这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。带着这个想法，我开始逛“避寒寺”和“追波”，找可以参考的作品。这套作品我挺喜欢的，作者还做出了 3D 视角的。
先分析一下图标的结构。图标有三层：底部几何色块、毛玻璃主造型，带有含义的白色图形。
再分析俯视角度时图标的表现，方便用工具表现。
最后是颜色的归纳。作者用了饱和度非常高的颜色，基本都在右上角最尖尖的位置。
分析完以后可以开始临摹了…因为造型比较简单，我没有临摹，直接创意发散做了另一套。选主题的时候我随便开了个 APP（当时打开的是微博），觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景，所以这套图标用到界面会比较难适配，和原 APP 风格也不符合。在这里单纯利用主题来做练习。
做底部的几何色块时，形状可以尽量跟主图形相关性大一些，加强它们之间的关联性，如果实在没法关联的也不必勉强。
我降低了几何色块的面积，增加了多一层毛玻璃形状层，并且让白色的图形更灵活，而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后，自己进行的改变，效果还行。
做的过程中，发现草稿箱如果里面放一张白色的卡纸，视觉效果还不错，所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩，其它很牵强。
拿「照片」这个图标来进行拆分，参数分别如下：
这是最后呈现的效果：
封面图参考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做会更逼真吧。
临摹一套图标的时候，要带着目的去临摹，分析原作者每一步的处理。然后把图标拆分成不同的变量，修改这些变量的时候或许会得到不错的想法。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作者 新手如何做seo · 来源 新手怎么做seo
文章主路径如下：
这组图标非常有活力和创意，色彩很活泼，原作者是菜心。我也常用微渐变来做图标，但是没有尝试过加上描边，并且这种强烈的对比色也在我习惯用色外。临摹这组图标可以突破我的用色习惯。
我们先逐步拆分，再进行总结。
第一步，分析原作品的结构。
图标可以拆分为线、面和小元素。我在 sketch 做的，形状的线面转换比较简单。线跟面的图层要分开，因为面图层带有反光，而线图层没有。
第二步，确定光源的方向。
从作者的表现来看，光源在左上角，因此所有的图标应该遵循同一光源方向的原则。光源的表现会因为材质的不同而不同。比如「LIKE 灯牌」带有自发光、「铃铛」带有高光。所有物体的反光比受光面要亮一点，让人感觉很通透。
第三步，分析原作的颜色。
不要吸色，先自己调色。刚开始会有点难，但是这种练习会帮助我们提高眼睛辨色的能力，提高色感。对比自己和原作的颜色，发现我调色不够准确，没有做到不同颜色饱和度一致，渐变色跳跃比较大。这表示我还没有理解原作的用色，后续临摹的时候需要修正。
第四步，总结作者的设计语言。
分析完以后开始临摹。
先说一下体量感的问题，因为有很多设计师在做图标的时候会忽略这一点。常见的方法是拿图标框来限定，但是问题又来了，有的人限定得太死板，不会根据实际情况来微调。针对这种情况，可以拿别人的整套图标作品做反推，在临摹的时候，留意别人对体量感的把握。
定义了大概的体量之后，我会观察图标大致的形状和角度，凭印象先把造型做出来。过程中没有把原作品放在旁边，最多在忘记的时候去看一眼。这样做的好处是，可以发现自己观察的时候漏了什么（这个方法是跟菜心学的）。下图就是第一次临摹的草稿，orz…铃铛最不好画了。
拿着草稿来对比原图，把自己错漏的地方找出来。
统计错漏的地方，重新调整图标，达到 90%以上的相似度后，给图标上色。
做完这一步后，大概理解了作者做这套图标时的逻辑以及方法。我们可以开始做半原创的设计，在原作的基础上延展几个图标。我选择电商主题的「充值、签到 、赚钱、砍价」这四个图标来做。
我们先找参考素材。不管画图标、做界面，还是画插画，学会找参考非常重要。参考不是照抄，而是给我们提供灵感来源，切记不要凭空想象。有一天，团队的设计师跟我说她不会画衣服的褶皱，画起来总是怪怪的。我叫她上网找相似衣服的图片，看一下别人的褶皱和光影，她就茅塞顿开了。因为她总是用“原创”局限自己，没有找实物参考。
原创绝不是凭空想象，而是有源设计的融合。
结合作者的设计语言做延展图标，放在原作里面也不违和的话，就成功一大半啦。
接下来是原创时间～我们将作者的设计语言其中一些变量改变，会得出不同的结果。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：内容生态产品，连接着两方，一方是内容创作者，一方是消费内容的用户。如何建立运行机制，让平台健康自由成长是每个平台建设方头疼的问题。本文作者对此发表了自己的看法，与你分享。
写这篇文章是源于我之前的工作，之前的工作是做内容生态方向的产品。那时候我们天天把“生态”这个词挂嘴边，虽然每天都有工作做，也很忙，但是却很少静下心来想想内容生态是什么，去描绘它的样子。
最近看了一本书《简读中国史》，书中讲到当年英国、法国、西班牙这三个强国，其实刚开始英国并不是最强大的，英国的崛起有几个重要因素，其中非常重要的一点就是国会制度，不像我国古代似的，皇帝一人说了算。英国的国会制度，让国家有了很高的信任度，虽然没钱，但是有了借钱能力，这样使其在扩张的时候有了很大的财力支持，最终成了欧洲最强的国家。
在做内容生态产品这件事上，给我的一个启发是作为平台建设方，很重要的一点也是建立机制，建立一套运行规则，让平台自由健康生长。
一个内容平台，连接着两方，一方是内容创作者，一方是消费内容的用户。当然这两个角色也很有可能是同一个人。
首先要做的基础工作就是建立账号体系，这是任何一个平台最基础的工作，创作者要有身份。
既然是内容产品，自然就要有内容来源的通道，提供创作工具，让用户提供内容。例如抖音的剪映，快手的快影，包括荔枝和喜马拉雅都推出了自家的创作工具。所有的内容产品都在搭建自己的创作平台，从战略上来讲，这是必做的一环，主要负责内容的引入。谁也不愿说在内容的源头不占据主动作用。
创作工具也可以单独作为一个工具存在，把功能和体验做好一点，在这个环节，需要做的就是工具的多样性和易用性，多是一些体验层面的东西。而给自家平台导内容就是一件自然而然的事情了。
基础工作中，还有很重要的一点就是给创作者反馈。当创作者把内容放到你这里，产生了什么效果应该告诉他们。不仅平台自己关心内容的效果，创作者也很关心，而且越详细越好，便于他们对自己的内容进行分析。之前我接触过有的产品不太重视这一环节，其实你真正了解就会发现，很多创作者他们都很专业，他们非常关心自己作品的数据，也会根据数据去调整自己的创作方向。
现在内容平台之间竞争激烈，无论是上游的创作工具，还是内容的反馈和数据分析这些创作者服务，都已经成最基本功能了。
有了身份，有了内容来源的入口，我们就要为内容源源不断的流入做准备了。
因为流入的内容肯定有好有坏，所以我们要对内容进行分级。关于内容评级的方式，主要有两种：一种是内容自身的数据，如播放量，分享数等，根据这些数据来判定一个内容的等级；第二是通过一些技术手段对内容进行提炼，判断其内容质量，也会根据里面的主要内容做推荐。这两种方式都是比较机械化的，而内容是有温度，有情感的，判定内容的优劣还有一些不确定因素。所以我们也要增加人为因素，提供一些方式让运营人员人工筛选，发现新来的好内容，好作者。
内容分级后，间接的我们对创作者也相应的分出等级了。对于好的创作者，平台通常都会主动建立联系，维持好关系。而对于普通的生产者，可能就采取放任不管的态度。合规的基础之上，随意玩，但是不给你曝光机会。说白了，即使内容不好，也不至于溅起大的浪花。
时间长了，平台心中会逐步会有一杆秤，对内容的优劣有个判别。建立一套标准，至于说谁能胜出，关键的还是看内容自己，作者自己。至于说平台是否要强制干预，自己完全有主动权。
内容优劣，创作者等级，奖励的程度，这三者关联性很大，呈正比例关系。
在给予创作者的奖励方面，最主要的做法有两个，一个是流量的扶持，一个是金钱的奖励。
什么等级的内容该推到什么位置，展示多长时间，需要定义一个标准。毕竟推荐位是有限的，平台对于推荐位的权重心里也要有杆秤。现在很多家平台，在用户端的流量渠道都不只一个，这就涉及到更复杂的内容分发问题，把什么样的内容分发给哪个渠道，哪个用户，这也需要制定规则。
流量是最基本的，但只是靠着流量已经难以俘获作者的心了，特别是在一个竞争激烈的内容领域。对于大牌的创作者，很多平台都推出了物质奖励。内容达到什么程度，给予多少物质回报，平台也需要制定一个奖励制度。
说到物质奖励，如果只是平台自掏腰包的话，不可持续发展。最健康的生态的就是建立一个利用内容赚钱的机制，比如广告，内容吸引了流量，然后平台在内容中植入广告，赚了钱大家一起分。这样一来给创作者的钱，并不是平台掏的，来自于广告商。也是一个非常传统，使用非常广泛的商业模式。
这还不够，单纯靠着广告的话，估计大多数创作者的收益都不如预期，所以现在很多平台也把电商加入其中，给作者提供了直播带货的工具。
说到底，创作者的钱都是自己赚的，平台开发了功能，提供了土壤，也能从中享受分成。这个思路总的来说就一点，给创作者提供更多自身可创造收益的工具，包括打赏、虚拟礼物等。设计更多酷炫的虚拟礼物，用户通过视觉上的愉悦来给自己喜欢的创作者送礼物。
除此之外，有的平台还会做一套成长体系，一切都来源于的内容，一切的判断标准也都依赖于内容。不同的内容数据，累计不同的积分，不同的积分代表不同的等级，不同的等级又代表着权益不同。而权益跟奖励又是挂钩的，建立这样一个关系链条，只有这样用户才会有动力去升级。其实这个工作主要也是对创作者进行分层，平台的运营者毕竟不可能服务好每个创作者。通过这种方式，一来对创作者进行筛选，第二也是彼此建立信任的一个过程。我们都会关注内容风险，有了信任之后才放心把更多功能开放给创作者。
有了内容源，有了分发规则，有了判定标准，有了奖励，这样一个内容产品基础的循环就算有了。
为了更好的服务创作者，平台还要扮演一个导师的作用，给创作者做指导，撰写攻略分享给创作者。主要分三方面：一是产品功能的使用；二是如何把内容写好；三是传授一些运营知识。定期搞一些活动，激励用户生产内容的积极性，平台要与用户共同成长。
再往深了说，平台要继续提高竞争门槛。帮着用户保护他们的内容不被侵犯，如果被侵犯了能够及时的告诉他们。更激进的方式是跟他们签约，建立一个法律上的合作关系和约束力，这样对于创作者以后继续给你内容提供了法律上的保障。
上面所说的这些，到今天为止仍然是所有内容平台都会做的，任何一个新的内容诞生还是沿着这条路线发展。做了这么多年内容产品，我一直希望搭建一个可持续、健康的内容生态。平台作为规则的制定者，少一些人为干预。
平台还要做的很重要的一件事，就是建立内容与用户之间的通道。归纳总结内容到达用户的路径有3个：一个是官方的推荐；一个是个性化推荐；还有一个是用户与内容的订阅关系，与作者的关注关系。
理想情况下，如果把内容生态搭建好了，等着自由循环就可以。但对于创作者而言，最看重的就是粉丝，有了粉丝，即使没有平台的流量支持，内容也会有数据。而任何一个内容产品，如果没有粉丝关注这个关系，那创作者的角色都会比较被动，没有安全感。
从现实的角度讲，创作者的创作动力本身是基于兴趣和个人的能力，但是时间长了，大家的驱动力也会参杂一些利息因素。而单纯靠着平台基于内容给予的奖励或者是说平台插入广告的分成，并不能让创作者满意，或者说这个量级还是太少了。如果内容是广告的话，平台肯定是不会给予推荐的，所以最后只能通过这个关注关系来传播。虽然作为平台不希望有广告，但想要创作者有持续创作的动力，需要给予创作者一定的空间。
上面说的是产品功能，可功能谁都会做，关键还是看谁做出来的有效。有的平台，创作者尽管有十几万粉丝，但是发布的内容却没有人看，主要原因还是用户的活跃度不行。平台需要从用户这一端想办法提高其活跃度，要不然创作者的热情就会减退，搭建的这个机制也没法很好的运行起来。
可提高活跃度又谈何容易，说到更深层次的原因，跟平台本身内容的类型和媒介有很大关系。有的内容虽然有价值，但是用户的接收门槛比较高，用户主动去接触内容的动力自然不足，这种情况下想去提高用户活跃度势必会非常困难。
对于创作者而言，不同平台的价值也是不一样的。有的平台创作内容的成本很高，但是效果却很差，但有的平台创作成本比较低，却能收到不错的效果。差异之大，跟平台自身的定位和覆盖的用户群有关，前者决定了内容的衡量标准，后者决定了内容的用户接受程度。
很无奈，用时下流行的一个词来说，这就是赛道不同造成的优劣势吧。
现在的内容平台也有媒介之分，像B站和抖音是以视频为主，喜马拉雅主要是音频，今日头条是所有媒介都有的综合平台。
媒介的一个很重要的影响就是，不同的媒介覆盖的用户群体不一样，视频＞音频＞图文。今天我们看以视频为主的，不管是爱奇艺、腾讯视频还是抖音，日活都是上亿规模，而在音频领域，即使喜马拉雅这样的行业领头羊，日活数据也比视频平台低了好几倍。两者完全不是一个量级，单纯做图文产品的日活就更小了。
一个音频产品怎么去超过一个视频产品的用户呢？其实我觉得没必要，各自安好，但是有的单一媒介产品有这样的梦想，做内容的，本来赚钱就难，用户量少的话，吃饭更困难。
从内容源头上来说，不同媒介的内容可能都来自于一个创作者，创作者可以把同样的内容写成文章，录制成音频，也可以制作成视频，放到不同的平台上传播。内容的本质没变，只是媒介形式变了而已。
然后这个问题就变成了平台对于创作者的吸引力，哪种媒介平台对于创作者更有吸引力？虽然说创作者可以把内容制作成不同的媒介，但这是有成本的，看创作者的动力。再探究，到头来还是得看内容生态的规模，用户量，内容数据，服务，收益的方式和数量，关注这几个方面。
这几年，我平时也有写一些文章，放到一些垂直类的内容平台。感叹一点，一些垂直领域的内容平台，本身用户量很少，内容又无法直接收费，平台的营收又比较困难，所以在吸引创作者方面非常尴尬。给予的东西吸引力非常弱，如果在同行业还有竞争对手，且不说能不能发展成功，速度一定是非常慢的。
由于之前疫情带来的冲击，同时如今很多企业都在进行数字化转型，一些企业协同工具就发挥了重要的作用；像这类企业协同产品更多的需要注重用户的角度，以及一些对应的功能；本文作者分享了关于用经济学思维看产品之企业协同的思考，我们一起来了解一下。
科斯定理：一项有价值的资源，不管从一开始它的产权归谁，最后这项资源都会流动到能最大化利用其价值的人手里去。
网络效应：有一种产品或者服务，它随着每一个用户人数的增加，自己本身的价值也会增加；简单来说就是，「用的人越多，产品越好用」。
2020疫情给线上协同办公带来了大量的新用户，使得市场规模增速显著提升，除钉钉、企业微信类老牌产品继续扩大服务范围外，飞书、闪布、Welink等新兴成员也随着这一波云办公的潮流极速成长吸收用户。
从艾瑞数据发布的市场报告来看，2020年中国协同办公市场规模已然达到440亿元，同比增长率为43.5%，至2021年市场规模预计将突破500亿元。
企业协同SaaS属于B端产品中的企业服务领域，不仅需要企业负责人的拍板使用，也需要保证员工工作中使用的可靠性；这让协同SaaS在设计开发的过程中充满了多项挑战，因为老板与员工似乎本身就处在对立面，需要满足两个对立面的需求并不是一件容易的事。
企业协同实际上是一个非常大的概念，涉及到的产品也非常之多，细分领域可涉及文件存储与共享、企业邮箱、项目管理、员工管理、聚合平台等。
下图为艾瑞数据在《2021年中国协同办公市场研究报告》列举的部分协同软件：
今天我们将重点放在综合协同平台上，聊聊如何用经济学思维来帮助和协助产品的设计，选取的对象为我自己较为熟悉的三个产品：钉钉、飞书、闪布。
首先我们要知道，企业的本质就是一种团队，企业存在是因为“团队效应”（能够带来比每一个成员单独产出之合还要大的产出的组织）。
从经济学角度来说，企业的存在降低了每个人的交易费用，避免了单干造成的无谓损失；既然成为企业是为了降低损失，那么因为企业的成立，增加的内部管理成本以及随着员工人数增加、业务的冗杂等原因造成的协调工作的难度急剧增加，这个损失该如何解决？
产品的本质就是解决人们的问题。
而协同办公产品的本质就是降低成本，提高效能，为解决企业内部的损耗提供相应的解决方案。
以现有的产品形态举例：企业云盘可以解决员工之间文件的储存和分享；线上会议可以解决员工异地或在家办公实现云讨论；项目管理可以帮助企业更好的进行项目的分解计划于实行；线上审批可以推动企业管理数字化……
对于协同产品而言，除了需要能够满足企业现实需求外，如何形成自己的网络效应也是极为关键的。
协同是指协调两个或者两个以上的不同资源或者个体，协同一致地完成某一目标的过程或能力；因此协同产品只有在人数达到一定量后才能真正发挥和检验他的价值，如果一个企业仅有部分人使用同一个协同产品，他们不仅要承担高昂的运营成本，而且只能与数量有限的人交流信息，显然是没办法达到用户需求与产品目标的。
且协同产品因为其复杂性，企业更替的成本是极高的，员工不会愿意频繁更换自己的办公工具，对于企业负责人而言也一定不愿意因为选择错误导致高额的无谓损失；选择协同产品就好比走上了一条不归路，惯性的力量会使这一选择不断自我强化。
所以企业会努力往最大的平台上靠或找到可以与自身完全匹配的产品，趋利避害降低风险；以此出发产品可以找准自己关键点，你是否足够全面以支撑来自各行各业的需求实现，亦或者你足够灵活可以轻松的承接独立且个性的需求，找到他，并对外宣传他，形成自己的路径依赖，不要妄想自己的产品能够兼顾各方。
在现如今的互联网产品浪潮中，每一片浪花都只能荡起自己的小船，锁住用户才能真正存活下来。
说到B端市场，大家脑海里循环播放的一定是KP、KP、KP（关键人）。
B端产品的KP就是“老板”，那是因为老板往往是企业的专用资源（必须在特定平台上发挥作用且投入很难再收回）；而普通员工往往是企业的通用资源，其投入往往仅有个人劳动，可以随时收回。因此为了防止劳动力滥用资本，老板需要更多的特权与保护；因此在企业中的话语权也更重。从这个角度看，协同产品使用的关键同样也是老板，擒贼先擒王，正如钉钉做的一样。
钉钉的很多产品功能点，与其说是在实现企业内部的协作需求，倒不如说在实现“老板”的管理需求；因为需要快速的找到人而诞生的“钉一下”为钉钉的前期发展带来了直线性的发展，而与之一起打组合拳的已读未读功能，更是让员工在办公中无处可藏，把钉钉带上了一个新高度，也为后续中国企业协同产品奠定了一个产品基调，放眼当前协同产品池，强提醒+消息状态已然成为了企业沟通工具的标配。
而为了企业更好的嘉奖与“刺激”员工成长，钉钉推出了独有的专属红包，不仅可以随时随地发送指定员工领取的红包，还可以在群组内出现撒花等庆祝的交互样式，真正成为了老板们弘扬企业价值的工具。
类似的场景你也可以在闪布中看到，作为传统行业出身的协同办公产品，自上而下的体系仍然深深影响着产品的整体逻辑与优先级。
闪布的用户状态，去除了多种可能性的复杂度，屏蔽了用户手动操作的机会；简单粗暴的反映出员工的在线情况，简单的状态展示有别于钉钉与飞书的多种自定义选项，以此减少员工之间沟通的时间等待成本，加强了管理者的把控程度。
但是，协同产品真的只要做到搞定老板就可以了吗？
从科斯定理所说，一项有价值的资源，不管从一开始它的产权归谁，最后这项资源都会流动到能最大化利用其价值的人手里去；而企业协同是员工用来相互协作的工具，其价值必然也会体现在员工上，因此企业协同不仅需要有决策者的考量与拍板，同样需要有使用者的易用与喜爱，正如飞书在做的一样。
基于对 “生产力工具缺乏变革、工具不应管控人而要激发人、B 端产品应具有和 C 端产品同样友好的用户体验”三方面的思考，字节跳动启动了飞书项目；因此飞书自娘胎里就把使用者放在了自己的意识中，不论是视觉与交互的感官体验，还是各模块间产品功能的强耦合，直至深层的极致系统性能。
飞书都给用户们带来了与普通办公软件及其不同的感受，翻看飞书的软文、App Store等各渠道的用户评论，夸赞与认同占了极大的比例。
那么我们究竟该如何处理这白与黑的关系呢？
兹认为作为企业服务领域的标志性产品，企业协同仍然需要将解决企业问题，降低企业损耗，提升企业效率作为迭代的基础，通过产品的方式将线下的流程电子化，人工的行为系统化，化繁为简实现产品的目标；因此不论是产品需求的优先级排序还是产品的北极星指标，让协同真正在企业间实现价值是首位的；同时在降本提效的基础上也需要保证维护员工的个人权益，不以牺牲使用者的主观意愿为代价实现目标，最后逐步提升产品的易用性与优秀的使用体验。
举闪布的案例，闪布的工作台初期是由企业的运营管理人员进行全局配置，用于推广与运营企业内部应用，隐藏每个员工看到的工作应用都一模一样，有些自己不常用的或根本不接触的应用也常常被强制挂在首页突出位置。
在接收到各方需求反馈后，闪布将工作台的应用分成了“我的应用”与“全部应用”两部分，并且允许用户主动选择应用与相应位置，且当用户自定义后系统将不再推送后台运营配置的默认应用；这个方案不仅能满足企业针对员工(大部分用户都不会修改默认配置）的内部应用推广需求，也可以保证员工（小部分会修改配置）的自身权利得到保障，很好地诠释了白与黑，天与地的融合之道。
中国有句古话叫做授人以鱼不如授人以渔，经济学里也有一句话叫给穷人钱比给穷人食物更有帮助，因为钱有选择的权利。这些意思用在协同产品上也最为合适不过了。
协同产品不只是单纯的给用户一个工具，更需要传递更高效的工作方法。
就好像Xmind给普通大众带来思维导图框架的思考方式、Visio给用户带来具体严谨的逻辑思维流程一样，协同产品也需要通过探寻用户的日常使用情况（包括痛点、痒点、爽点灯），获取一些反馈的信息；能够支持并满足用户在日常办公过程中的需求，并可以将各类需求整合成一种工作方式与工作方法，并将此反哺给用户，帮助用户规范工作流程、加强管理能力、找到正确的办公方法。
再次举个栗子，飞书在21年全新的π版本中上线了飞阅会的线上会议功能，采用了发扬于谷歌的静默会议的方式，支持文件提前上传且可在文件中实时提出疑问并标注、支持同时段语音转义并自动保存会议纪要、支持会后根据会议情况创建日程待办并整理会议相关内容发送给参会者，详情可见下图。
这整一个产品链路对于很多企业、员工来说都是一中全新的会议方式，飞书也正是通过这个产品模块与功能的介绍向用户展示了如何进行一场高效的会议，这个方法的效果甚至比产品本身更重要。
当然除了方法论，真真切切的实现分工与合作也可以为企业协同带来更好的结果。分工与合作可以给人们带来更大财富，自己有什么优势集中做，社会的饼就能做大；而一个企业一个部门的每个人都处在自己独特的工作环节中，其所面对的人与事件都是独立的。
因此，产品需要考虑不同情况下如何实现最优分工，又在何种场景中最需合作，如将员工根据不同的岗位与岗级进行相应的标签分类，后期功能均可根据不同的角色标签给予不同的权限；而针对不同行业，产品也可以做到个性化定制与特殊化处理，比如钉钉就会针对学校场景设计独特的表单、群聊信息、线上会议模式等；而飞书则会针对互联网企业设计相应的话题群、Markdown格式文件等，这些种种是都是为了让人们能有更好的分工的基础，并最终完成合作的目标。
文章来源：人人都是产品经理 作者：碌碌无为的阿栓
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关键词：产品策略分析、体验设计方法论、分析问题方法
声明：本篇案例的分析范围是聚焦在体验设计的前期流程，分析产品的产品策略、需求分析、用户研究。同时这是一个As is分析而非To be创新设计，侧重点是和大家分享讨论如何去分析产品设计的前期策略定义，以及这些结论如何帮助我们去设计产品。
分析思路：提出问题
我拿到的课题是分析携程旅拍社区的产品策略，要分析这个事情，我们需要把问题进行一下拆解。首先我们应该意识到问题涉及到两个行业，一个是携程所处的OTA行业，一个是旅拍社区所处的社交行业，需要我们先分别去看待再统一进行思考。其次根据经典的5w1h问题分析法（我们在这里精简为2w1h，即what、why、how）我们需要把问题拆解为三个：携程旅拍社区是什么？携程为什么要做旅拍社区？携程是如何做旅拍社区的？
经过第一步对问题的拆解我们对问题分析的角度有了大致的方向，但是这并不足以开始分析，我们还需要对已经提出的问题进行进一步的拆解来更加明确我们如何解答这些问题。在这里我们使用著名的金字塔原理结构来对问题进行细化，并且推导出如何回答这些问题。在这篇文章，我们重点看最关键的问题 “携程为什么要做旅拍社区？”
到这一步，我们已经建立起分析问题的整体框架，当然在具体的问题分析中一开始就建立一个完善的分析框架是很理想的情况。大部分情况下我们需要在定义框架和具体分析中来回的完善和优化我们的框架，夯实它的逻辑性和完整性。我也是在实际的问题分析中不断发现新的问题、产生新的思路从而一步一步的让分析点能够更加完整和逻辑，同时对于问题的拆分角度和研究角度属于定性研究的范畴，它没有一定正确的答案，每个人都有自己的经验和想法，所以不必纠结自己看问题的方式，只要不遗漏关键的信息和出现逻辑推导上的错误即可。接来下我们就按照这个框架来进行数据的收集、归纳、总结从而回答我们一开始提出的问题。
第一部分：OTA行业的现状
1.1 OTA的定义
首先我们先理解OTA行业的定义是什么，OTA（在线旅游）指“旅游消费者通过网络向旅游服务提供商预定旅游产品或服务，并通过网上支付或者线下付费，即各旅游主体可以通过网络进行产品营销或产品销售”。为了更好的理解这个概念，我们可以从如下两张图业务范围和行业产业链来理解。
通过上两张图我们可以基本诠释清楚OTA是一个什么样的行业，同时我们也能总结出它的特点
在线旅游行业是一个经营范围广，产业渠道多链路长的行业。经营范围广是指对于旅行对于交通、住宿、娱乐等资源的需求，使得OTA企业必须要考虑资源端的供应，甚至是自己建立资源供应。产业渠道多链路长是指从上游资源供应最后到达用户手中，产品销售的链路长，渠道也多样，使得OTA企业必须重视对于上下游资源的掌控和多渠道的建立，搭建起自己的生态才能在竞争中游刃有余。
1.2 OTA的行业发展
其次，我们需要了解OTA行业目前的发展情况如何。通过对数据的收集，我们发现这个OTA行业目前的发展情况是：行业规模与用户规模不断增长但增速放缓，同时三四线城市成为重要的增量市场。
针对以上数据的收集和分析，我们发现整个行业的规模还在不断增长但是增速已经明显放缓，增长的动力主要来自下沉市场。
首先我们先看增长放缓，一方面中国经济增长放缓导致的人们消费能力和消费信心的下降影响了整个旅游行业，在线旅游则必然受到冲击。另一方面互联网的红利期已经结束，在线旅游依靠投资输血抢用户的时代已经过去，现有的一二线增量市场已经被挖掘殆尽，线上游客的增量时代结束进入拼质的存量时代。但是随着国家政策对于中低收入地区的倾斜和互联网技术发展，以前难触达的下沉市场变得容易触达，消费潜力得到挖掘和释放，三四线城市成为新的增长引擎。
第二部分：携程现状和发展
2.1 携程的现状
携程的现状我们可以概括为：OTA行业的独角兽，无论是在市场占有和用户规模上都遥遥领先，但是竞争者也不容小嘘。
2.2 携程的发展
为了了解携程的发展布局，首先我们看携程最近几年较大的战略布局动作
在搜集了携程近些年的商业动态后，我们发现携程在成为国内OTA行业的霸主后，分为两个方向进行进一步发展，
一.横向发展
1.进军三四线城市下沉市场，通过线下旅行社的方式把业务带入渗透率低的市场
2.把OTA业务触角伸向海外，通过投资收购等方式进军海外市场
二.纵向布局
1.同产业的上游的垄断行业供应商（高铁/民航等）战略合作，收购建立自己的非垄断行业供应商（租车/酒店等）
2.建立下游内容营销平台（携程旅拍等）填补了自己在下游产业链的空白
第三部分：内容社交的价值和现状
3.1 内容社交的价值和现状
内容社交，指用户第一目的是为了获取内容，内容的生产方式可以是普通用户（UGC），也可以是专业媒体或者作者（OGC、PGC）。内容社交平台通过提供用户感兴趣的内容（咨询、娱乐、知识等等）来吸引用户浏览，再通过内容流量产生价值。通过下图我们可以发现，通过不同媒介和细分领域的搭配，内容社交领域的玩法非常丰富，尤其是在垂直领域还有很大的想象空间。
3.2内容社交本身的作用价值
3.2.1商业价值
内容社交平台的商业价值主要体现在：
第一，目前内容平台已经成为重要的社会化营销渠道，用户规模大，市场规模增长迅猛。
第二，对于平台来说有效的利用了用户流量进行商业变现，对于广告主来说能够有效提高品牌营销的效果，广告主的营销预算正在向这一类平台倾斜。
下面我们以典型的内容产业，短视频行业为例具体看待
3.2.2产品价值
对于内容社交平台本来而言，其产品价值主要体现在相比较其他领域而言内容社交平台用户使用时间长、活跃度高，能够帮助产品争取用户注意力、抢夺用户时间。
3.2.3用户价值
互联网的本质在于连接，而「连接人与信息」正是最初级也是最基本的用户需求之一，在内容社交中用户不再只是观众，而是成为互联网内容的生产者和供应者，体验式互联网服务得以更深入的进行，用户的高层次需求得到进一步满足。
在内容社交这一领域，垂直领域的用户需求探索还有很大空间。
根据四个平台的数据结果，我们发现旅行这一主题无论在哪个平台都拥有非常高的用户关注度和互动性，可见旅行内容这一需求对于用户来说的价值还是巨大的。而目前这个主题绝大多是还是依附在综合性的内容社交平台上，在这一细分领域只有马蜂窝这一个较为有影响力的平台。
3.3内容社交在下沉市场的作用价值
3.3.1商业价值
上面我们分析了内容社交平台满足用户基本需求的案例，而对于下沉市场的用户而言，虽然传统的熟人社交、口碑传播还是占据了强势地位，但是内容正在逐渐成为他们消费决策时的依据。
3.3.2产品价值
内容平台在下沉市场增长明显，下沉市场用户对于旅行高相关内容兴趣度高，这是OTA行业下沉趋势的有力支持。
3.3.3用户价值
对于下沉市场用户而言，内容社交平台已经成为他们记录和分享旅行不可或缺的手段。
3.4内容社交对携程的作用价值
3.4.1商业价值：从产业布局来看
上文分析过携程目前的产业链布局和渠道现状，在旅拍上线以前，携程是没有自己的社会化营销渠道的。那么携程只能在第三方的渠道进行产品和商品营销，是自身渠道上的一个缺陷。而在上线旅拍之后，携程有了自己的社会化营销渠道，并且作为一个旅行社区，其用户营销的范围更加匹配平台属性更加精准。
3.4.2产品价值：从携程用户生命周期来看
通过整个用户生命周期的研究我们可以发现，旅拍社区在用户的整个生命周期里都为携程提供了巨大的价值。最核心的就在于，之前的携程产品策略都是建立在自身是一个OTA平台这个基础之上。旅拍社区的建立，让携程可以从内容平台这个角度，在产品策略上发展更多的玩法和思路，来提升整个产品生命周期的用户指标。
3.4.3用户价值
从用户价值来看，我们主要看旅拍社区是如何更全面的触达用户需求的。首先我们先梳理出携程的用户画像，然后从用户旅程和需求层级这两个维度去分析旅拍社区的用户价值。
通过上面的分析，在旅行的用户旅程和用户需求方面传统的OTA业务并不能覆盖到全部的需求。通过旅拍社区业务，携程真正做到了整个旅行需求的覆盖。用户不在是只在携程上进行商品交易，而是在整个旅行的用户旅程中，都可以使用携程来满足自己的需求。
第四部分：竞争对手的现状
4.1 竞品的定义
我们主要聚焦在直接竞品的分析上，结合前文的携程现状分析，飞猪和马蜂窝这两个是目前在市场除了携程之外比较有代表性的产品，飞猪是阿里巴巴在旅行领域的强力产品，而马蜂窝之前深耕旅行内容领域在取得足够的成绩之后开始拓展OTA业务和携程相反，所以我们重点分析这两个产品。
4.2 竞品的现状和对比
通过对产品定位和商业画布的梳理我们发现携程、飞猪、马蜂窝目前都是以OTA业务为主的平台，但是还有很大差异主要体现在：
1.飞猪是OTA行业的新玩家，但是却发展迅猛，在携程已经统一江湖的情况下确硬生生抢下一块市场。主要在于两点，一是有阿里强大的资源支持，包括技术、资源和品牌等
二是年轻化的产品定位，让飞猪更受年轻人喜爱。
2.马蜂窝是国内旅行内容平台的第一，最近几年开始进军传统的OTA业务，恰恰和携程相反。马蜂窝的优势就在于，一是积累起来的用户忠诚和口碑能够顺利帮助其完成前期的渠道建立，二是作为旅行前决策平台切入旅行产品预订，场景衔接非常顺滑不会让用户有违和的感觉。
接下来我们看这两个虎视眈眈的对手在内容社交领域的布局情况
4.3 竞品在内容社交的布局
无论是飞猪、还是马蜂窝都在内容社交领域大步跃进，虽然具体的形式不同，核心思路都是要利用内容社交这一手段，来提升平台的商业价值、产品价值和用户价值。既然竞品已经发现了内容社交对于自身的巨大价值，那么携程的跟进也是非常正确的。
回答问题：携程为什么要做携程旅拍？
到此之前所拆解出的四个维度我们已经全部分析完成，并且每个部分都产生了结论和洞见，那么我们就可以根据上面得到的结论来回答最开始提出的问题了
后记
对于之前提出的第一个问题携程为什么要做旅拍社区（Why）这件事情已经有了我自己的分析思路和结果了。那么携程是如何做旅拍社区的（How）有机会的话会继续分享我的产出。
文章来源：站酷 作者：龙龙真调皮
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先我们要明确什么是情绪版？我的理解是：情绪版既不是初稿也不是最终的风格方向，而是设计师在了解了相关的产品背景后，基于自己对于产品的理解给出的一个较为初始的设计建议，并且希望可以通过这个初始的建议与产品侧达成一些相关的设计共识。
情绪版的设计流程大概分为前中后三个阶段，前期：分析-收集，中期：筛选-组合，后期：打磨-呈现。
前期：分析-收集
主要是分析产品相关背景或需求本身的方向，结合产品背景及需求本身再进一步分析大概的设计方向并收集相关素材内容。
中期：筛选-组合
当我们收集完成后需要对现有素材进行二次筛选并组合，基于现有素材组合大概的设计方案结构。
后期：打磨-呈现
基础方案组合完成后需要进行二次打磨，细化方案的内容表现，检查整体的一致性及完整度，最后呈现给产品方。
可能很多设计师会疑惑为什么要做情绪版，直接设计初稿不就好了吗？如果有这个疑问，可能还没实际了解到情绪版到作用。但我们可以试着从我们在设计过程中遇到的痛点来了解情绪版的作用或者意义。
在设计的过程中你是否会存在下面几个问题：
前期思考不够——设计产出方案少；
设计不惧探索性——设计来源没有考究；
初稿多次修改没能达成共识——设计表达不出对方想要的；
设计中期出现不一致——设计没有贯彻始终。
从这几个问题中，我们可以得到一个比较统一的结论就是：前期设计呈现内容不够，导致沟通不足而产生方向不统一。因此基于这个关键点，我们再来看情绪版的作用
(1)辅助构建世界观
在前期，世界观、背景方面的内容大多是以文字的方式呈现，因此设计师可以通过情绪版的方式，来输出对应的世界观设计表现，这样可以更加直观的表现出对应的视觉语言。
(2)具象设计想法
在初期与产品侧沟通时，单纯靠语言表达的方式很难让对方达到一种脑补的状态。因此借助情绪版的方式更加直观的呈现设计想法，通过具象的图形或者图形，大大降低双方的沟通成本。
(3)明确设计方向
基于第二点的沟通，我们可以明确的了解到产品侧的一些喜好。为后续设计初稿时起到一个清晰的方向作用。
(4)提高前期设计的效率
从零到一设计一套完整的方案往往需要耗费较长的时间，借助情绪版设计的方式来快速响应一些想法及创意，这样可以大大提高前期的输出效率。
从多次的尝试中，我总结梳理了几个基本原则，了解这些原则可以让我们在做的时候更加严谨，输出更加准确的设计方案。
(1)多方向性
情绪版的设计与我们日常设计一样，需要给出不同的方向建议，单一的方案往往难以抉择。多方案输出除了提升抉择空间之外，还可以增加方案碰撞的情况，往往可能是方案A的某部分内容叠加方案B的某部分内容才能产生最初的方向。
(2)尝试性
此阶段的所有输出皆属于尝试与探索，因此不必过于考究设计细节，重点在于表达出需要相关的设计概念及思考想法，把更多的时间留作设计思考及方案尝试。
(3)效率性
情绪版的输出重点在于前期沟通而达到一个比较好的共识，因此在保证质量的情况下，避免花费过多的时间而影响输出的效率性。尽量做到快与准。在过往中项目组，基本上是以半天（4个小时左右）为一个单位来完成一套方案。
(4)试探性
情绪版是一种非常有效试探产品侧想要往那种方向去推动的方式，因为我们在实际的设计过程中，产品侧可能也对整体的设计大调并不少特别有明确的脑补，因此设计师可以借助情绪版的设计来挖掘产品侧想要往哪个方向进行发力。
这里总结情绪版的设计方法大概有这几种：1.借助图像/插图、2.结合实际场景引申、3.借鉴摘取同类型设计、4.绘制草稿。
(1)借鉴图像/插图
在我们设计一些专题活动或者绘制插图相关的一些设计时，可以考虑使用这种方法来输出你的情绪版设计，可以通过借鉴一些设计网站或插图网站上的现有素材来拼接，并表达自己在这方法的一些设计意图及想法。
(2)结合实际场景引申
从更概念化的角度出发，通过引用一些实际场景、物品、图像，来拓展相关的图形、质感、色彩方面的设计，并且输出相关的设计雏形。例如我们在设计LOGO或者图形类的一些设计，使用这种方法就可以帮助我们突破一些现有的认知壁垒。
(3)借鉴摘取同类型设计
在设计之初，我们通常会有一个大概的思考雏形，但如果直接开始设计往往效率上并不高。因此可以借助一些设计网站上的设计，通过摘取组合的方式呈现自己的初步想法。我通常会在UI新版或者改版的时候使用这种方式，但只能表达大概的想法且不能代表最终的初稿设计。
(4)绘制草稿
当我们想要表达一些沟通或者框架的设计时，我们可以使用草稿绘制的方式来表现，这个方式简单快捷，可以很有效率的对齐大部分的设计共识。
基于原则及方法，我们可以来简单了解下情绪版设计中需要注意的一些事项，通过这些内容让你在实际操作过程中少踩一些坑。
(1)控制方案的数量
设计方案控制在2-3个左右即可，前期大多是属于试探性方案呈现及找方向，太多则容易导致选择困难。
(2)避免篇幅过长
篇幅过长往往容易降低别人阅读的耐心，对于情绪版的输出也是如此。结合过往的经验，建议以16:9的画面为一页来呈现一个方案。
(3)区分重点次要
在一页内呈现的方案避免过于平均，可以适当突出某些想要重点表达的内容，例如在这个方案中想要重点突出图标、颜色等，那么这里需要突出这部分在画面中的比例，适当缩小其他模块的尺寸。
(4)结合世界观
在输出情绪版设计方案时还可以适当考虑结合产品的世界观，通过一些具象化的图形或者插图来表现相关的内容。例如我们之前在游戏中心改版的尝试中，就发散了几个相关的世界观，因此我们在输出方案时，则只需要把对应的世界观作为方案，通过情绪版的方式表现出来即可。
(5)保持整体风格一致性
一致性是表现一个设计师是否具有系统化、全局观的思考思维，因此我们在表现情绪版时也需要关注这方面的内容，避免整体的调性不匹配。
(6)完整性表达
在呈现方案时，尽量多维度的进行对比，呈现一个完整性、系统性的设计。例如我们在设计UI相关的内容，从图标、颜色、字体等等一系列的内容需要细致的阐述清楚，让人更加能够了解你的意图。
由于我日常以设计UI为主，因此可以给大家重点分享我在UI情绪版设计的经验。希望可以帮助到大家快速上手。
当你在做UI设计情绪版时，需要明确了解UI设计中的结构，更系统性的去思考整体的内容。我们在UI设计中往往需要包含以下这些内容：图形系统（图标+辅助图形）、颜色系统、字体字形系统、质感形态、界面形态、插图风格、动效系统、影像系统，等等这些部分的内容。
UI情绪版模版
过往实际案例分享
案例一：整体风格比较偏个性一些，页面尝试用深色的背景设计
优点：整体风格比较酷，配色比较未来感符合年轻的人的审美，深色的背景让内容更加聚焦。
缺点：深色的设计接受度是否可以，是否适合平台类APP设计
案例二：整体风格3D化的设计，包括页面的一些体验上都可以增加视察的效果来设计
优点：整体设计风格比较新颖，符合现在的设计趋势，整体感觉也比较年轻多彩
缺点：3D的制作成本相对较大。
案例三：整体风格比较清爽，白色融入渐变的设计也会显得比较年轻
优点：整体页面清爽，可以满足任何内容的透出，渐变色的图标和按钮的设计补充了细节
缺点：整体氛围感、娱乐感较弱。
很多时候我们会觉得情绪版设计可有可无，或者因为时间的关系不允许我们经过这一步。但，如我一开始提到的点，情绪版可以在前期帮助我们去打通很多思考的壁垒，辅助设计师在前期直观的与产品侧进行方向上的探讨，从而找到大方向上的共识。
文章来源：学UI网 作者：妙妙
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
01 什么是用户画像（what）
02 B2B用户画像的特色（what）
03 为什么要构建B2B用户画像（why）
04 如何构建B2B用户画像（how）
05 B2B用户画像的传播与使用（how）
本文尝试通过what-why-how的结构，结合自己的工作做一些实践，和大家分享下B2B用户画像的整体概念框架以及构建方法。出于对我司数据的保密，无法直接分享给大家细粒度且对应的数据，所以分享过程中我会结合业界和其他前辈在网上分享的内容和数据作为案例，如有不足和错误之处，还望大家批评指正。
那在讲B2B用户画像之前，我想先来说说用户画像的概念，在看一些文章时发现有些作者混淆了用户画像的两种概念。可能很多人没有注意到，用户画像这个词包含了2种不同的含义，一种是User Persona，一种Use Profile。
User Persona是对一个用户群体的整体抽象。这一概念最早源于交互设计领域，是Alan Cooper在《About Face：交互设计精髓》一书中提到的研究用户的系统化方法。“赢在用户”这本书将其翻译为“人物角色”，目前业内使用“用户画像”这个术语。表达的意思一样，是真实用户的虚拟代表，是在深刻理解真实数据的基础上得出的一个的虚拟用户。
User Profile是对每一个个体的画像，是在产品用户量有一定规模以后进行的。利用用户的行为数据或者填报的资料进行的用户属性标签提取，更多被运营和数据分析师使用，它是各类描述用户数据的变量集合。在大数据时代，企业通过对海量数据信息进行清洗、聚类、分析，将数据抽象成标签，再利用这些标签将用户形象具体化的过程。
两类画像的对比如下图：
明确了两种画像的区别，那本文我们就重点谈谈User Persona类型的B2B用户画像（后续文中简称“用户画像”）。至于User Profile，比较适合用户体量大的产品，而B端产品除了头部企业，很难达到这个量级，无疑用User Persona更合适，本文就不再赘述。
不管是B2B还是B2C产品也好，不论是商业层面上（比如在资源有限情况下聚焦关键用户类型）、或是在产品层面上（更好理解用户想要什么，确定功能的范围和优先级），建立用户画像的本质都是为了辅助一些决策。
不同之处在于C端面向的是大量且分散的个人用户，用户画像的主要目的是把用户聚类，更好的了解不同类型用户的特点和偏好。而B端产品，面向的是企业级用户，满足的是企业的管理或经营需求，关注的是成本和效率。画像的目的是针对业务不同环节中、具有类似任务的用户进行更立体、丰富的需求整理和挖掘，往往和角色相关。
其决定了B2B用户画像的几个特点：
伊查克·爱迪思（IchakAdizes）提出了企业生命周期理论，企业的发展大致有初创期、成长期、成熟期和衰退期四个阶段。不同阶段的企业，其组织形态、关注点、管理方式等都会有所不同，产品需求侧重点不同，用户画像的方向和调研方式也会有不同。
初创期：产品立项阶段
这个阶段往往指的是公司刚成立，此时产品、企业文化尚未成形，处于客户积累阶段，较为关注引流。需要通过用户画像定位细分市场、产品模式及功能，这个阶段需做定性调研了解目标用户，初步形成用户画像为需求做底层支撑，这个阶段的用户画像颗粒度可以粗些，旨在帮助团队快速就“我们的用户是谁”达成共识。
成长期：产品运营中（已有数据积累）
这个时候产品已有demo或已上线迭代，产品处于完善、升级的阶段。可使用“数据挖掘+定量筛选+定性丰富”的方式，结合项目的已有数据，使用定量筛选用户，做大量微观且具体的用户调研，基于后台、第三方平台监控发现问题，定位问题关键及原因分析，优化产品功能及运营模式，再通过调研访谈了解具体的行为细节和态度。该阶段的用户画像可用来验证问题、完善或发现新的机会点。
成熟期：产品相对稳定
客户资源相对稳定，可能已有一定的规模，内部管理需求增长，市场地位趋于稳定，日常工作也大多以维护为主。且现有增长点已遇上了瓶颈，用户活跃将不可阻逆地缓慢下降，即使你做再多产品优化、烧钱运营都无法改变产品终将走向衰退的命运，时间问题。企业急于寻找突破口和新的增长点，用户画像又将被赋予新的使命：基于用户画像进行“新增长点”的分析，定性挖掘蓝海，再定量进行验证。
衰退期：产品活跃度快速下降
进入到这个阶段，说明产品没有成功转型。这时候再做用户画像的意义其实不大，如果一定要做，除了提高回流率、挖掘增长点外，可以定性了解原因，调整产品。
不同于C端产品的的用户单一性，B端产品的用户画像对应的不是一个个体，而是一个组织或机构，同时涵盖组织机构中不同的人员。产品面向的使用对象可能从普通员工到企业高层，覆盖销售、技术、行政人事部分等，基于工作场景不一样，对产品的需求可能也大相径庭。
以一个CRM系统为例，一个复杂的B端产品可能会涉及以下四种角色的用户：决策者、主要使用者、次要使用者、间接使用者。如下图所示：
决策者：下决策购买产品或服务的人，可能是业务线负责人，也可能是公司董事长、CEO，他们常常不是产品的使用者，使用频次低甚至完全不用，他们通常都是从公司的整体利益出发，更关注产品能否给公司业务带来帮助，降本还是提效了。其评价某个功能的好坏，往往与使用者的感受是相悖的，如钉钉的“DING一下”,他们并不太关注使用过程、体验，更关注产品的核心价值，将利益最大化。
满足决策者的需要是做好B端产品的前提，也是制作用户画像所要明确的方向；很多体验做的不好、难看的产品之所以也能在B端市场有一席之地，就是因为满足了企业的需要。比较理想的情况下，团队对目标客群有一定深入的研究，形成趋于标准化的产品，就能打动目标客户群的大部分决策者。
主要使用者：真正频繁使用产品的人，也是产品/设计师想要提升产品体验要瞄准的人群
他们可能更关注产品的具体使用，是不是易用，有没有帮助他们更便捷地完成工作，有没有提高他们的工作效率。主要使用者是最容易识别的，以CRM系统为例，如果没有销售日常在系统中录入客户数据，管理层就无法查看成单量、进度等他们所关注的信息。
次要使用者：使用产品频率相对主要使用者更低，用到的功能也比较少，只在某个中间流程涉及少量操作。如CRM系统中人事、财务会涉及到其中钱或出差的审批对他们而言，主要需求是能快速找到自己的任务并完成就可以了。
间接使用者：不直接使用产品但会被产品影响的人群，产品和设计师在设计过程如果有资源和精力能兼顾他们的需求和体验，那就太贴心了。如审计、政府人员，属于不紧急，非必要需求。
B端用户使用场景多和业务形态密切相关，产品通常要解决的是某类角色工作时发生的问题，所以不同于C端用户画像，从用户视角出发，关注用户个人的场景、诉求、痛点和情绪，核心是满足用户的需求，关注用户的年龄、性别、收入、个性、习惯、消费模式等标签。
但是在B端产品中，我们抛开了用户作为个人存在的标签，我们更关注用户所代表的角色，他的岗位职责是什么，它在工作场景中需要完成哪些任务，这些任务要做什么的，其岗位职责决定了它完成任务的目标、场景、使用什么工具去，需要跟其他角色配合吗等信息。
所以B2B画像更关注角色的分类、工作/使用场景、用户目标、操作链路、角色协同等信息，很难看到类似这个人是不是已婚，小孩多大这些不知道如何应用于产品设计的内容。而在一个C端产品用户画像上很少看到有哪些让他压力山大的KPI等信息。
仍然以CRM系统为例，其主要使用者-销售的目标就是用该系统录入商机、线索等，然后根据数据情况制定客户沟通回访计划等，聚焦的是该系统能否让他很好的履行了其岗位责任。和他这个人在哪个城市、已婚未婚等个人特性是无关的。
B2B产品面向的是企业用户，满足的是产业链中各企业的经营需求，这时B2B画像应该具备行业、客户属性这一维度；但是最终购买者、使用者都是企业中的某一角色，这决定了B2B画像还有角色这一维度。所以，小编认为，B2B用户画像是企业和多个核心角色共同构成的画像，建立B2B画像，需要客户（企业）画像和角色画像两部分的信息。
1）客户画像
客户画像指的是使用B端产品或服务的企业用户，具有行业特征、企业特征及角色特征。其的目标是促成销售，主要用来帮助销售/运营人员他们快速定位目标企业，帮助他们更好的认识我们客户是什么样的人，让他们的工作更有方向。
一个典型的客户色画像会包括：
基本信息：外在的标签，如所处行业、地域、人员规模、收入规模（年营业额）
业务模式：线下的实际业务流程-视行业而定，如商业模式（靠什么赚钱）、业务模式（业务怎么运作）
组织机构：自上而下都有哪些机构，彼此之间的关系。
关键角色：各个机构里有哪些岗位/工种，决策链上有哪些角色、谁才是有价值的关键角色，角色话语权。企业的关键决策人随企业大小而不同，一般中小型企业都是老板、合伙人等。而大型企业采购B端软件都是需要经过内部流程的，最终审核人是老板，但其中影响决策最大的往往是商务经理负责人。
2）角色画像
B端产品虽然面向企业，但是最终使用执行的还是人，这些执行层（终端使用者）也是产品的检验者。在企业决定购买产品之前，执行层没有话语权，但是在续费的时候，他们的话语权比重会开始显著提升。
因此在我们的产品设计阶段，会更关注执行层的角色画像。当我们讨论产品、需求、场景、用户体验的时候，往往需要将焦点聚集在这类人群上。
一个典型的角色画像会包括：
基本信息：如角色名称、照片、角色/工种、平台偏好、文化水平、办公场地、使用频次，角色名称以及照片是为了更有代入感的个人情况说明，但值得注意的是，这里的情况更多围绕职业情况展开，比如工作年限，工作职责，能力维度等，那些在C端中常见的家庭情况，几个孩子什么的统统不重要。
用户行为驱动：用户的工作目标、工作任务和考核指标，B端角色通常是企业员工，为了薪酬，有一般都会有结合任务而完成的考核指标，了解考核指标可以在设计过程中更明确知道哪些内容是用户最关注的东西；
使用场景：工作的时间、地点及工作内容是什么，使用场景是重要但容易被忽略的一个内容，尤其要搞清楚使用产品的场景有哪些、用户平时的工作流程是如何的、主要使用什么功能。可用一个真实、普遍、易懂的故事勾勒一下
使用期望：日常工作面临的挑战和痛点，期望获得的帮助。
角色画像和客户画像之间没有直接关系。因为目标不同，所以会有不同的用户细分：客户画像的目标是成销售，获取利益；角色画像是为了解决问题和为用户创造价值，进一步为公司创造价值。但是在刻画B2B用户画像时，如果只考虑执行者的话，没有客户画像作为指引、摸清决策者的特征与行为，你的产品功能或者体验设计上可能就会出现严重偏差，甚至方向错误。
产品和服务只是企业将价值传递给客户的一种工具和媒介，无论产品形态如何，其本质都是在解决客户的问题。如果没法满足客户的业务需求，基本上该产品对客户是没有价值的。客户画像作用贯穿产品生命全周期，产品/市场/销售较为关注，它的价值主要体现有三点：
对产品：明确为谁服务，快速的了解客户的需求和状况，确定产品功能设计，学会识别用户的解决方案和用户在场景下的诉求，不断迭代调整产品；
对市场/运营人员：建立对客户尽量全面的了解并基于客户画像确定营销内容、营销策略和渠道选择，使产品的服务对象更聚焦；
对销售人员：帮助销售进行客户筛选，找到有效客户，提高转化率，确定业务方向和销售打法。合理配置团队，完成KPI。
客户画像越早建立越好，但是务必注意控制深度和成本，因为不同阶段的企业其侧重点有所不同。在初创期，产品团队可以通过关注典型客户来积累定性数据，从而低成本搭建客户画像；而到了成长期和成熟期，在拥有大量客户数据的前提下，企业可以逐渐过渡到使用定性&定量相结合的方式来形成更为清晰的客户画像。
以前业界有种说法，做B端，能用是第一位，用户体验不重要。所以除了一些成规模的SaaS公司，设计师在B端几乎无用武之地，成了组件化的搬运工、工具人。所以大部分的企业在跑马圈地时期是不注重用户体验的，企业有客户画像，却未必有角色画像。
还说用户体验不重要的人，可以看看有赞CEO白鸦的公开说明。
图片来源于网络
2020年，疫情为企业级SaaS带来流量，在今年2月宣布延期复工后，钉钉搜索量激增数倍，无论中大型企业还是小微企业都纷纷加入了远程办公的行列，协同办公SaaS获得了大量的“试用客户”，加快了市场激活的进程，但接下来，流量转化和用户留存成为后疫情时代的核心关注点。
后疫情时代，对企业来说，改善产品用户体验，了解使用产品的终端用户，构建角色画像愈加重要。而角色画像作为产品和设计师比较关注的画像，有以下三点价值：
设计前：帮助确立设计目标、设计策略与准则
设计中：解决架构混乱问题，明确需求功能的合理性和优先级；解决需求争议问题和沟通问题，与团队成员就服务目标达成共识，
设计后：解决可用性测试问题，帮助我们锁定合适的测试用户；
总结一下就是角色画像是产品的根基，客户画像是产品的外延生命力的象征，两者相辅相成。
对于这个章节。我将以我所负责的一款企业产品为例，来讲述用户画像的创建过程。在这个项目中我们通过定性研究创建了用户画像，当然如果必要，大家也可以在后期再通过定量研究对得到的用户画像进行验证。
用户画像的创建可分为以下几个步骤：
B端用研和C端有一点不同，企业用户的使用场景基于业务，背景复杂、角色多样、使用工具特殊（如企业自有后台系统）等，导致无法在可用性实验室中切实地模拟出来，所以我们得接近用户、基于业务场景去了解用户。
小编大致总结了一下，B端用研有以下3大痛点：
信息获取难：B端产品主要针对用户工作和业务开展，一般都是强制使用产品不存在“挑剔”的选择空间，导致用户的反馈就非常少，信息的获取壁垒较高。“深度访谈”是最核心也是获取信息性价比最高的一种方法，但是出于对信息用途的不了解，对商业隐私、生意经验泄露的担忧，B端用户可能不愿意配合调研或不信任你。
业务复杂：缺乏行业经验，难以理解业务，这会让用研对象觉得你不专业，仿佛鸡同鸭讲、对牛谈琴。而且在不理解业务的情况下，设计师在访谈过程中会过于关注基础业务，无法进行更深层次的访谈，采集的信息并非用户的真正需求。
视角不同：设计师视角容易缺乏框架性思考，搞不清每个业务模块/功能的边界以及它们之间的关系，不能站在用户（决策者、使用者）的角度思考问题，以至于被用户牵着鼻子走，用户说什么就是什么，能和用户产生共鸣的部分极少。
俗话说“磨刀不误砍柴工”，针对以上三大痛点，项目伊始有必要进行一轮全面的桌面研究，帮助我们快速建立对行业的全局认知并了解业务，另一方面，也有助于我们更好地和用户进行沟通。
研究内容：
研究途径：
此处有2个注意点：
针对以上2三点，下文将依次展开说明。
1、如何筛选出目标用户？
Cooper指出，不能为超过3个以上的用户画像设计产品，这样容易产生需求冲。当有多个用户画像的时候,需要考虑用户画像的优先级。前面讲B2B画像特点的提到过，由于是企业产品，仅仅产品中一条业务线，角色也是多样的，所以在筛选目标用户时有一点尤其要注意：应识别出关键的用户画像。
以我公司的招聘业务为例，为了便于大家在宏观上确定什么样的企业是我们主要的目标用户，我们的做法是按企业类型定义了三个KA客户画像。由产品、市场、以及各组leader一起来完成用户画像的优先级排序工作。确定用户画像优先级时，我们可以主要从以下几个方面来考虑：
然后再找关键的角色画像，即角色画像中的决策者和主要使用者，次要使用者和间接使用者因时间、金钱的关系，现阶段不做考虑。我司产品的客户主要是劳动密集型企业，作用是帮助客户解决蓝领用工问题和发薪合规问题。以招聘业务线为例，想把这个产品卖给某企业，首先要打动该企业的HR总监，再说服CEO/董事长，再让招聘部员工-HR试用。
那么这条决策链上的关键人就包括了HR总监、CEO/董事长、HR。那在这个案例中，HR总监是决策链的关键人物，因为只有他认可之后，才会申请购买或在CEO面前夸这个产品。而HR是最终产品的使用者，虽然他们在企业购买产品前没有话语权，但是在续费阶段，他们的话语权最大。对于处于成长期的产品来说，我们现阶段的调研目标也是为了获取HR总监和HR两类角色的用户画像，每个角色访谈4～6人；
2、画像维度有哪些？
筛选出了目标用户，那画像维度有哪些呢？。以本案例为例，在本次用户画像的设计中，因我司产品处于优化迭代阶段，做用户画像的目的是了解用户的使用情况，比如各功能的使用频率、使用中遇到的问题，定位问题关键及原因分析，优化产品功能及运营模式，同时也希望通过了解用户的具体行为细节和态度，发现新的机会点。
对于企业，主要了解其企业规模、行业属性、业务流程、组织架构、机构里有哪些岗位/工种。这个信息主要由产品或销售采集，应该前置于角色画像。而我们第一步的业务研究中，很大一部分内容也来自于此。
对于决策者，主要向其了解企业管理、业务等方面的需求信息，对于本产品决策者关注的是营收增长、效率提高还是减少成本等方面的问题。
对于主要使用者，侧重了解用户特征、产品认知、使用场景与痛点，各功能的使用频率、使用中遇到的问题等
根据前面前文提到的的用户画像构成要素和自身业务情况，有选择性的摘取，最终梳理出本案的用户画像维度如下：
明确了调研对象后，就可以展开调研了。一般有三种方式：
定量和定性调研究虽各有优劣，但定量较为昂贵、费时，也需要有精通统计分析的认为协助，在B端调研方式中并不太实用。对大多数团队而言，定性是性价比最高、最合适的。它不仅提供了“用户是谁、他们想要什么”，还是基于数据、经济高效较为快捷的一种方式。
采用何种研究方法，主要根据企业生命周期、研究目的、项目时间和经费等进行综合考量，本案中我们选择深度访谈收集一手资料。
在明确目标与方法后，需要对整个研究进行细化，制定具体详实的执行计划并开始招募用户采集资料了。可通过前中后三个阶段性策略的来进行访谈。
1. 访谈前：搭建信任基础
在构建用户画像的step 1中，我们已经对业务和要访谈的用户角色有了一定的了解。只需在访谈时间的4-7天前，根据确定的画像维度来设计访谈大纲。设计大纲的目的是避免访谈过程中对话内容发散、混乱而无法收集到足够多的有效信息。
需要注意的是：大纲需要针对访谈的每一条需求，做到详细、缜密，同时要考虑用户对访谈题目的理解，可根据产品使用顺序，由易到难、客观到主观、概括到具体的顺序展开，比如产品功能的使用频率就可以作为一个客观问题放在问题的开始。且要考虑访谈的时间，因为访谈的时间不易过长，所以访谈提纲也不能过于冗长，典型的访谈大纲模板如下图所示：
并提前将访谈目的告知受访者，能让他们看到访谈的直接或间接价值（提高工作效率、降低成本等），也就能更好地建立双方的信任。因此，我们需要提前确认整个访谈的规划，并主动将相关信息告知受访者，包括访谈的时间、地点、方式、目的、流程，还有过程中可能涉及的问题、后续发放的奖品等。
2. 访谈中：表现专业特质
开场介绍
跟C端访谈一样，正式访谈开始之前的开场白非常重要！除了再次介绍自己（不管是什么岗位，此刻我就是用户研究员），说明这次访谈的目的，一定还要强调访谈的隐私性和数据安全性，毕竟他们面对的是真金白银的生意。
暖场
在正式访谈前，可以先和用户闲聊2~3分钟，通过一定的沟通活跃气氛，让用户更加放松，同时增强用户对我们信任。暖场和开场介绍可穿插进行，没有绝对的先后之分，在访谈者自我介绍完成之后，也可以让被访者进行自我介绍。
一般问题
一般问题是指一些比较基础性问题，用户不需要进行太多思考即可回答，比如“你最常用的功能是哪些”、“使用时间多长”。
深入问题
深入问题是用户行为和想法更加深入的探索，会更关注用户行为细节和行为背后的动机。一般在问这些问题时，访谈者需要不断地询问用户为什么，直到用户无法继续回答。深入问题是整个访谈的核心，也最容易挖掘到用户需求和痛点。
回顾与总结
每部分的访谈结束后可进行简单的小结。访谈者通过回顾访谈过程对用户的行为和态度进行客观阐述，一方便有助于访谈者梳理思路，另一方面让用户对访谈结果再次确认。
3. 访谈后：实现长线共赢
最好和访谈对象建立长期联系，尤其是一线业务人员。人和人面对面聊过后，会产生基本的信任感和好感，要借助访谈的机会，拉近和业务人员的距离。如果后续项目中遇到问题，想获取最真实的一线反馈，可以联系之前的访谈对象，寻求帮助。
1）根据角色对访谈对象分组
将用户访谈后得出的重点信息写在便利贴上（或Excel表中打印后切片），设计师需要根据产品用户角色不同，将受访的用户归类分组，如HR和HR总监。
2）找出行为变量
分组后，需要识别关键的行为变量，将调研到的用户与行为变量进行一一对应，并识别差异化行为模式。如下图所示
3）映射访谈对象与行为变量的关系
再将不同的角色间同类行为模式归纳（合并同类项），进行行为描述。此处需注意以行为变量为依据进行用户对应时，不必追求绝对的精准，只要相对能映射清楚即可。梳理完后，观察可发现某些用户群体聚集在几个行为变量上，它们构成了一个显著的行为模式，由此聚类出某个角色类型。依此类推，可以发现几个不同的行为模式。为保证全面，映射完最好遍历一下，检查是否有用户或变量的遗漏。
4）找出共性行为模式
完成映射后，寻找在变量轴上的对象群。梳理完后，如果一组对象聚集在多个不同的变量上，则可以代表一类角色存在显著的共性行为表现（通常每类角色会有2～3个共性行为）。共性行为能帮我们识别标准化产品需要满足的用户需求，而差异化行为可以根据企业需求做定制化服务，一个B端产品是不太可能满足所有用户的需求的。
一旦我们找到共性行为，就可以创造用户画像了。梳理出每类角色的行为、目标、痛点等维度特征，形成画像的基本框架。最后再完善用户画像，此时我们需要做的事情主要是：
最终客户画像呈现如下图
数据已脱敏，非真实数据
最终角色画像呈现如下图
数据已脱敏，非真实数据
用户画像作为一个强大的设计和交流工具，能够让利益相关人目标始终保持一致，它的价值在于传播与使用。举个例子，90年代，库珀将用户画像的描述做成一页纸贴在墙上，一个产品的一个用户画像做一页纸，这样设计团队成员每天走进办公室就能看到。
用户画像制作出来后，与整个项目团队共享定义的用户画像是很重要的，千万不要让他在共享文档里积灰或挂在墙上当摆设。你要做的是让用户画像从纸上跃起，走进你同事的心里，让他在每次讨论、每个决策时，自然、自发地被提起。所以用户画像的使用也是极其重要的，不然前面的工作都是无用之功。
所以，你可能需要：
向团队介绍用户画像。花点时间介绍研究的过程，展示照片给他们看，聊一聊画像的需求，期望，痛点，性格等。最好以故事性的方式进行引导，并长期地在会议里提到并讨论它
在你的用户故事中使用用户画像。“如果我是**业务招聘员，我想要快速识别出今天某门店招聘的人数和到岗的人数”。设计时，花点时间想象一下软件会被用户在工作中如何应用。
造访不同团队，介绍用户画像，包括它从何来，如何用。教他们怎么招募有代表性的用户进行测验，如何写用户情景来启发设计或作为可用性测试任务
总的来说，在你能力范围之类的地方，宣传用户画像的商业价值，提升大家的信任。毕竟用户画像可以帮助产研团队跳出自己的需求，了解真正使用产品的人的需求。当越来越多的团队使用用户画像，那么用户画像就会越来越像一个真实的用户，帮助团队从用户的角度出发去设计产品。
值得注意的一点是，用户画像并非一成不变的，很大程度上受环境和周期的影响，所以我们要定期回顾自己的用户画像，对他们进行一些更新，确保和现实一致性。市场变化和策略的变化可能会重新定义你的业务受众，也可能出现其他的细分，这也是重新调整用户画像的好机会，否则它们最终将失去生命力。希望你的用户画像也能始终对业务起到帮助，为体验助力。
文章来源：学UI网 作者：小纽扣
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目录
3. 首次有效渲染时间要低于1.25秒，速度指数要低于1000
5. 渐进增强（progressive enhancement）
15.1 如何使用webpack将静态素材快速托管到ImageX，并开启http/2
18. 通过tree-shaking和code-splitting减少净负载
微优化是保持性能最好的办法，但是又不能有太过明确的优化目标，因为过于明确的目标会影响在项目中做的每一个决定。以下是一些不同的模型，请按照自己舒服的顺序阅读
根据一个心理学研究，你的网站最少在速度上比别人快20%，才能让用户感觉到你的网站比别人的更快。这个速度说的不是整个页面的加载时间，而是开始加载渲染的时间，首次有效渲染时间（例如页面需要加载主要内容的时间），或者交互时间（指的是页面或者应用中主要的页面加载完成，并主备好与用户进行交互的时间）。
在Moto G（一个中端三星设备）和Nexus 4（比较主流的设备）上衡量开始渲染时间（用WebPagetest）以及首页有效渲染时间（用Lighthouse），最好是在一个开放的实验室中，使用规范的3G，4G和Wi-Fi链接。
你可以通过你的分析报告看看你的用户处在哪个阶段，选取其中前90%的用户体验来做测试。接着收集数据，建一个表格，筛去20%的数据并预设一个目标（如：性能预算）。现在你可以将上述两个值进行对比检测。如果你始终维持着你的目标并且通过一点一点改变脚本去加快交互时间，那么上述方法就是合理可行的。
如果前端工程师们都在积极的参与项目概念，UX以及视觉设计的决定，这将会给整个项目带来巨大收益。地图设计的决定违背了性能理念，所以他在这份清单内的顺序有待考虑。
RAIL性能模型会为你提供一个优秀的目标，既尽最大的努力在用户初始操作后的100毫秒内提供反馈。为了达到这个目标，页面需要放弃权限，并将权限在50毫秒内交回给主线程。对于像动画一样的高压点，最好的方法就是什么都不做，因为你永远无法达到最小绝对值。
同理，动画的每一帧都需要在16毫秒内完成，这样才能保证每秒60帧（一秒/60=16.6毫秒），如果可以的话最好能在10毫秒内完成。因为浏览器需要一定的时间去在屏幕上渲染新的帧，而且你的代码需要在16.6毫秒内完成执行。要注意，上述目标应用于衡量项目的运行性能，而非加载性能。
纵使这个目标实现起来非常困难，你的最终目标也应该是让开始渲染时间低于1秒且速度指数低于1000（在网速快的地方）。对于首次有效渲染时间，上限最好是1250毫秒。对于移动端，3G下移动设备首次渲染时间低于3秒都是可以接受的。稍微高一点也没关系，但千万别高太多。
不要过多的关注当下最流行的工具，坚持选择适合自己开发环境的工具，例如Grunt、Gulp、Webpack、PostCSS，或者组合起来的工具。只要这个工具运行的速度够快，而且没有给你的维护带来太大问题，这就够了。
在构建前端结构的时候，应始终将渐进增强作为你的指导原则。首先设计并且构建核心体验，随后再完善那些为高性能浏览器设计的高级特性的相关体验，创建弹性体验。如果你的网页可以在使用低速网络、老旧显示器的很慢的电脑上运行飞快，那么在光纤高配电脑上它只会运行的更快。
根据你整体组织结构的优先顺序和策略，你可以考虑使用Google的AMP或Facebook的Instant Articles。要知道没有这些你也可以达到不错的性能，但是AMP可以提供一个性能不错的免费的内容分发网络框架（CDN），Instant Articles可以在Facebook上促进你的性能。你也可以建立progressive web AMP。
根据你的动态数据量，可以将一部分内容外包给静态网站生成工具，将它置于CDN上，从中生成一个静态版本，从而避免那些数据库的请求。也可以选择基于CDN的静态主机平台，通过交互组件丰富你的页面（JAMStack）。注意CDN是否可以很好的处理（或分流）动态内容。没必要单纯的将你的CDN限制为静态。反复检查CDN是否执行了内容的压缩和转化，检查智能HTTP/2传输和缓存服务器（ESI），注意哪些静态或动态的部分处在CDN的边缘（最接近用户的服务器）。
首先应该弄清楚你想解决的问题是什么。检查一遍你所有的文件（JavaScript，图片，字体，第三方script文件以及页面中重要的模块，例如轮播，复杂信息图标和多媒体内容），并将他们分类。
列一个表格。明确浏览器上应该有的基础核心内容，哪些部分属于为高性能浏览器设计的升级体验，哪些是附加内容（那些不必要或者可以被延时加载的部分，例如字体，不必要的样式，轮播组件，播放器，社交网站入口，很大的图片）。
使用符合标准的技术向过时的浏览器提供核心体验，向老式浏览器提供增强体验, 同时对所加载的内容要有严格的把控。即首要加载核心体验部分，将增强部分放在
DomContentLoaded，把额外内容发在load事件中。以前我们可以通过浏览器的版本推断出设备的性能，但现在我们已经无法推测了。因为现在市场上很多廉价的安卓手机都不考虑内存限制和CPU性能，直接使用高版本的Chrome浏览器。一定要注意，在我们没有其他选择的时候，我们选择的技术同时可能成为我们的限制。
在一些应用中，可以在渲染页面前先初始化应用。最好先显示框架，而不是一个进度条或指示器。使用可以加速初始渲染时间的模块或技术（例如tree-shaking和code-splitting），因为大部分性能问题来自于应用引导程序的初始分析时间。还可以在服务器上提前编译，从而减轻部分客户端的渲染过程，从而快速输出结果。最后，考虑使用Optimize.js来加快初始加载速度，它的原理是包装优先级高的调用函数（虽然现在已经没什么必要了）。
到底采用客户端渲染还是服务器端渲染？不论哪种做法，我们的目标都是建立渐进启动：使用服务器端渲染可以得到很短的首次有效渲染时间，这个渲染过程也包括小部分的JavaScript文件，目的是使交互时间尽可能的接近首次有效渲染时间。接下来，尽可能的增加一些应用的非必要功能。不幸的是，正如Paul Lewis所说，框架基本上对开发者是没有优先级的概念的，因此渐进启动在很多库和框架上是很难实施的。如果你有时间的话，还是考虑使用策略去优化你的性能吧。
仔细检查一下例如expires，cache-control，max-age以及其他HTTP缓存头是否被正确的使用。一般来说，资源不论在短时间（如果它会被频繁改动）还是不确定的时间内（如果它是静态的）都是可缓存的——你大可在需要的时候在URL中成改版本。如果可能，使用为指纹静态资源设计的Cache-control:immutable，从而避免二次验证（2016年12月，只有FireFox在https://处理中支持）。你可以使用，Heroku的primer on HTTP caching headers，Jake Archibald的 ”Caching Best Practices”，还有IIya Grigorik的HTTP caching primer作为指导。
当用户请求页面时，浏览器会抓取HTML同时生成DOM，然后抓取CSS并建立CSS对象模型，最后通过匹配DOM和CSS对象生成渲染树。在需要处理的JavaScript文件被解决之前，浏览器不会开始对页面进行渲染。作为开发者，我们要明确的告诉浏览器不要等待，直接开始渲染。具体方法是使用HTML中的
defer和async两个属性。事实上，defer更好一些（因为对于IE9及以下用户对于IE9及以下用户，很有可能会中断脚本）。同时，减少第三方库和脚本的使用，尤其是社交网站的分享按键和<iframe>嵌入（比如地图）。你可以使用静态的社交网站分享按键（例如SSBG的）和指向交互地图的静态链接去代替他们。
尽可能的使用带有
srcset，sizes还有<picture>元素的响应式图片。你也可以利用<picture>元素的AVIF、WEBP格式，用JPEG格式作为替补（参见Andreas Bovens的code snippet）或是使用内容协商（使用接受头）。本身可以使用自己的PS或者skecth尝试导出，若不能导出，可以尝试 火山引擎的ImageX图像处理服务（不知道怎么使用可以自行百度搜索 "火山引擎 ImageX"）可以支持多种格式输出，比如AVIF、webp格式；
我曾经写过这篇文档可以对照一下：高效率图像压缩处理服务， 参考截图：
你也可以使用客户端提示，现在浏览器也可以做到。在用来生成响应图片的源文件过少时，使用响应图片断点生成器。
当你在编写登录界面的时候，发现页面上的图片加载的特别快，这时你需要确认一下图片进一步优化的思路只要有三点：
- 降低图片的分辨率，如果浏览器中展示区域100*100，此时展示 400*400 就属于资源浪费，这也是显著提高图片响应速度最直接的方法；
- 降低图片压缩的质量，图片压缩质量，使用有损压缩，比如图片压缩质量90 和75对人眼可见的范围内都可以接受，常见支持有损压缩的图片格式比如，jpeg、wepb、heic、avif等图片格式支持图片有损压缩；
- 改变图像压缩的压缩方式，改变图片的压缩算法也能更高效的提高图片优化图片提高速度，比如 常见图像压缩率（图像画质等同前提下）： HEIF （heic） > AVIF （avif、avis） >webP（awebp） > jpeg > png 等；
正常情况下PNG是原图格式，体积特别大，巧的是业界对PNG 有
pngquant使用Median Cut量化算法的修改版本和其他技术来缓解Median Cut的不足，可以最大效率保留信息的前提下降低png 的体积大小；如果我们把如上的一些优化处理起来，我使用的过程中发现，火山引擎的imagex 已经完美的支持了上面三者的使用方法：下面我举个例子做一下说明：http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/public/attachments/2021/03/11/GyVrojIWFkQOKSAzYnUmlQxvaESnPaZYxgpu9v1Z.png~tplv-n9b2vwdhz3-12:300:200.webp 这个是 png的原图处理好的结果，在这个url中imagex 给出了一种url语义，"~tplv--模板名称:[模板参数].图像格式" 通过改变300:300 能改改变压缩率，通过参数能够调整压缩质量，通过改变webp-->avif 可以转换成不同的压缩方法；
更巧妙的是在这，就算指定输出png后仍然还可以设置质量参数
如果你还觉得不够，那你可以通过多重背景图片技术来提高图片的感知性能。
这里发现一个第三方写的但被官方推荐的开源插件https://github.com/Cmaxd/veimagex-webpack-loader ，通过配置webpack-loader 插件的方式可以将图片上传到ImageX，然后将图片使用不同的图片模板访问就可以满足需求，同一个图片可以使用多个地址，例如avif、webp、jpeg 使用 <picture> 标签进行降级 或者判断浏览器支持降级；
你用来修饰网页字体的服务很有可能毫无用处，包括字形和额外的特性。如果你在使用开源的字体，尝试用字体库中某一个小的子集或是自己归类一个小的子集从而压缩文件大小（例如通过一些特殊的注音符号引用Latin）。WOFF2 support是个非常不错的选择，如果浏览器不支持，那你可以将WOFF和OTF作为备用。你也可以从Zach Leatherman的“Comprehensive Guide to Font-Loading Strategies”一文中选择一个合适的策略，然后使用服务器来缓存字体。如果想要快速入门，Pixel Ambacht的教程与案例会让你的字体变得尽然有序。如果你用的是第三方服务器主机，没办法自己在服务器上对字体进行操作，一定看看Web Font Loader。
为了确保浏览器尽可能快的渲染你的页面，先收集页面首次可见部分的CSS文件（也叫决定性CSS或上半版CSS）进行渲染，然后将它加入页面的<head>部分，从而避免重复操作。因为慢启动阶段对交换包大小的限制，你关键CSS文件的大小也被限制在14KB左右。如果高于这个值，浏览器需要重复一些步骤来获取更多的样式。关键CSS是允许你这样做的。可能对每个模板都需要这个操作。如果可能，考虑一下用Fiament Group用的条件内敛方法。
通过HTTP/2，关键CSS可以单独存为CSS文件，通过服务器传输，而且可以避免HTML膨胀。服务器传输缺乏连续支持，并且存在一些超高速缓存的问题（Hooman Beheshti演示的前144页）。事实上，这样会导致网络缓冲区膨胀。因为TCP的慢启动，服务器传输在稳定的连接下会更有效率。所以你可能需要建立带有缓存的HTTP/2服务器传输机制。但请记住，新的
cache-digest规则会否定手动建立的需要缓存的服务器的请求。
Tree-shaking是通过保留那些在项目过程中真正需要的代码从而清理你的构建过程的一种方式。你可以用Webpack 2来提出那些没用的住配置文件，用UnCSS或Helium从CSS中取出不需要的样式。同理，也可以考虑学习一下如何编写高效的CSS选择器，以及如何避免膨胀和高费的样式。
Code-splitting是另一个Webpack特性，它可以根据按需加载的块将你的代码分开。只要你在代码中定义了分离点，Webpack便会处理好相关的输出文件。它基本上能保证你初始下载的内容很小，而且在需求被添加时按需请求代码。
Rollup所展示的结果要比Browserify配置文件所显示的好得多。所以当我们想使用类似工具的时候，或许应该看看Rollupify，它将ECMAScript2015模块变成了一个更大的CommonJS模块——因为小模块没准有出乎意料的高性能成本，这源自于你对打包工具模块系统的选择。
使用类似CSS containment的方法对高消耗组建进行隔离，从而限制浏览器样式的范围，可以作用在为无canvas的浏览工作的布局和装饰工作中，或是用在第三方工具上。要确保页面滚动和出现动画效果时没有延迟，别忘了之前提到过的每秒60帧的原则。如果没办法做到，那就尽可能保证每秒帧数的大致范围在15到60帧。使用CSS中的will-change通知浏览器哪些元素和属性发生了变化。也记得要衡量渲染执行中的性能（可以用DevTools）。可以参照Udacity上Paul Lewis的免费课程——浏览器渲染优化，作为入门。还有一篇Sergey Chikuyonok的文章讲了如何正确的用GPU动画。
使用页面框架，对高消耗组建延迟加载（字体，JS文件，循环播放，视频和内嵌框架）。使用资源提示来节省在
dns-prefetch（指的是在后台执行DNS检索），preconnect（指要求浏览器在后台进行握手链接（DNS，TCP，TLS）），prerender（指要求浏览器在后台对特定页面进行渲染），preload（指的是提前取出暂不执行的源文件）。根据你浏览器的支持情况，尽量使用preconnect来代替dns-prefetch，而且在使用prefetch和prerender要特别小心——后者（prerender）只有在你非常确信用户下一步操作的情况下再去使用（比如购买流程中）。
Google开始向着更安全网页的方向努力，并且将所有Chrome上的HTTP网页定义为“不安全”时，你或许应该考虑是继续使用HTTP/1.1，还是将目光转向HTTP/2环境。虽然初期投入比较大，但是使用HTTP/是大趋势，而且在熟练掌握之后，你可以使用service worker和服务器推送技术让行性能再提升一大截。
现在，Google计划把所有HTTP页面标记为不安全，并且将HTTP安全指示器设置为与Chrome用来拦截HTTPS的红色三角相同的图标。使用HTTP/2的环境的缺点在于你要转移到HTTPS上，并且根据你HTTP/1.1用户的数量（主要指使用过时操作系统和过时浏览器的用户），你需要适应不同的建构过程，才能发送不同的建构。注意：不论是迁移还是新的构建过程都可能非常棘手而且耗时很多。
重申，使用HTTP/2协议之前，你需要彻底排查目前为止你所使用协议的情况。你需要在打包组建和同时加载很多小组间之间找到平衡。
一方面，你可能想要避免将很多资源链式链接，与其将你全部的界面分割成许多小模块，不如将他们压缩使之成为建构过程的一部分，之后给它们赋予可检索的信息并加载它们。这样的话，对一文件将不再需要重新下载整个样式清单或JavaScript文件。
另一方面，封装是很有必要的，因为一次向浏览器发送太多JavaScript文件会出问题。首先，压缩会造成损坏。得益于dictionary reuse，压缩大文件不会对文件造成损害，压缩小文件则不然。确实有方法可以解决这个问题，但这不是本文讨论的范畴。其次，浏览器还没有优化到可以对类似工作流进行优化。例如，Chrome会引发进程间通信（IPCs），这些通信的数量与资源的数量成正比，而这成百上千个资源将会消耗大量的浏览器的执行时间。
Chrome的Jake Archibald建议，为了用HTTP/2达到最好的效果，考虑一下逐步加载CSS文件
当然你可以考虑逐步加载CSS文件。很显然，你这样做对HTTP/1.1的用户非常不利，所以你可能需要根据不同的浏览器建立多个版本来应对你的调度过程，这样就会使过程略微复杂。你也可以避免HTTP/2连接的合并，同时受益于HTTP/2来使用域名碎片，但是实现起来有些困难。
我们到底应该做什么呢？如果你粗略的用过HTTP/2，似乎成功的发送过10个左右的包（在老是浏览器上运行的也不错）。那你就能着手开始试验并且为你的网站找到平衡点。
所有的浏览器都支持HTTP/2并且使用TLS，这是有你可能想要避免安全警告，并删除页面上没用的元素。好好检查你的安全头部是否设置正确，排除已知的缺陷并检查证书。
如果还没有迁移到HTTP， 你那可以先看看HTTPS准则（The HTTPS-Only Standard）。确保所有外部插件和监视脚本都能被HTTPS正确加载，确保没有跨站脚本出现，HTTP脚本传输的安全头和内容安全头也都设置正确。
这份清单综合性很强，几乎介绍了所有的可用的优化方式。那么，如果你只有一个小时进行优化，你应该干什么呢？让我们从中总结10个最有用的来。别忘了在你开始优化前和结束优化后，记录你的结果，包括开始渲染时间以及在3G，有限连接下的速度。
但没关系，本文只是一个普通大纲（希望能做到综合性强），你应该根据自己的工作环境列一份适合自己的清单。最重要的，在开始优化之前，先对项目中存在的问题有一个明确的了解。
转自：csdn论坛 ，
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
