小伙伴们画好视觉稿后，是不是页面的交互/视觉规约经常丢三落四，常常在设计宣讲时被开发测试提问？自己表面镇定，内心慌的一笔：这个...我没想到，那个...我没想到...

要想在宣讲时能够从容应对各种问题，就需要在设计稿完成后，把设计规约提前想好，那么设计规约要从哪些方面写起呢？往往B端产品的页面更加复杂，要补充的交互规约更多，小Zi就从实际工作中总结一些，供大家参考～

先来看个列子：

页面

交互规约如下

一个页面，交互和标注规则很长很长，很多同学反馈说不知道交互规约从何写起，看了上面的列子，大概从以下几个方面来书写规约：

大方面我习惯于分成【整体】和【具体内容】来写。

整体

一、页面自适应规则

首先从整体来考虑，首先要考虑页面是如何布局的，是自适应？还是定宽？常用的网页布局有：静态布局、百分比布局、响应式布局；页面的整体布局方式，也决定了页面具体内容规约的撰写；

参考文章《3种常用网页布局与设计注意点》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html

二、滚动条/滚动区域

1.页面整体滚动区域

滚动区域是从哪里开始？是页面级滚动吗？

2.滚动条的样式

需要给出滚动条的视觉和交互

举例：

三、初始状态/空状态

页面“加载”是做设计时常常忽视掉的，因为大家肯定是重点考虑有内容的情况，并且页面数据是否需要加载、加载时长等等需要根据前后端接口返回情况确定。

1.补充初始状态的页面；初始页面是骨架图还是保持不变，是否添加页面引导？等都是需要考虑的；

2.补充页面数据为空的样式；

举例：

四、加载样式

页面级加载的样式是什么样的？也需要补充到设计稿中；

举例：

五、其他特殊情况的处理

比如“无权限查看”“记录已被删除”“已被拉黑”等等情况；

举例：

具体内容

当补充完页面整体上的规则之后，就可以着手补充页面具体内容的规约了。具体内容的规则其实和整体规则从大方向是差不多的，也是那几个方面，只是更细节：

一、考虑是否自适应，自适应的规则

如果页面整体是定宽的，那么内容也是定宽的，就不需要考虑内容随着页面拉伸或缩小带来的变化；如果页面整体是自适应的，那么具体模块可以根据功能需要来设置哪些区域自适应，自适应的规则是什么；

举例：

二、考虑内容过多时的样式

B端产品设计场景更复杂，内容更加不可控，再加上电脑屏幕大小适配，页面宽度可自由拉伸，种种因素都要我们更加仔细的考虑页面的各种极限值情况，如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是：这里内容过多怎么展示？虽然我们在设计的时候是按照80%的场景去考虑，但是剩下20%的极限场景也需要我们给出设计规则。

内容过多，具体划分还可以分成以下几类：文字过多、选项过多、弹窗内容过多、按钮/标签过多、表格内容过多、功能过多等等情况，每种情况下有哪些解决方式呢，可以参考文章《B端交互设计之内容太多怎么办》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

举例：

三、考虑极限情况下的提示/反馈

用户反馈，页面中肯定不少，我们画页面时也会画出大部分提示，但是缺少提示/反馈依然是设计师常忽略的内容，主要是提示的场景非常非常的多，而且有很多细分情况：

1.数据处理慢的提示

问题举例:操作的数据过多时，后台数据处理慢是否有提示？

2.操作后的提示

成功、失败、进行中等，还有部分成功，部分失败的情况

问题举例:启用失败时如何提示？

3.无权限、禁用等的提示

问题举例:项目列表-阶段没有权限时，需要添加tips提示；

4.缺少二次确认提示

问题举例:新建页面点击取消是否需要二次确认提示?

四、考虑校验的时机和样式

1.校验的时机：是失焦后还是提交按钮时，还是实时的

问题举例:表单的必填校验，是失焦实时校验，还是在提交时校验？

 “实时校验”是在用户浏览表单时实时检查用户输入的有效性，而不是在用户提交表单时一次性检查全部输入：

验证消息显示在靠近输入的区域，并一起显示；

2.校验的样式：是在下方出提示，还是全局提示，还是什么的；

举例：

五、考虑是否缺少滚动条的样式

不仅要考虑页面整体的滚动区域，有些模块也是单独需要滚动的；

滚动区域是哪里？包不包括表头？标题？有没有内容需要锁定？滚动条的样式？这些问题都要给出规则。

问题举例:信息内容过多时，容器内展示不下怎么办？--答：展示不下时容器内出现滚动条，滚动区域是整个内容区；

六、数字方面的问题

1.数字输入超长的显示

问题举例：极限数字如何显示，比如筛选结果超过三位数：999+

2.数值是0时，是否有特殊的规则

问题举例：数值为0时，是否显示此模块？

3.是否有输入限制，比如，限制正整数、小数，小数精确到几位等等；

七、点击热区的范围

我们一般默认热区就是触发控件的区域，但是有时可能视觉上图标需要小一点的，但是热区需要更大一点，就要特殊标注出来。总之，方便用户操作为上。

举例

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是体验可视化地图

它们是一种体验洞察和形成参考材料的工具，能够帮助业务人员探讨决策使用，它们都是结合真实用户反馈形成的。另外这些地图本身并不能直接提供答案，而是用于促进对话或作为决策导向，它能跨部门让人们聚在一起讨论业务目标，指出潜在的机会或达成一致的价值观与目标，使解决方案更可行。即促进共同参与、共同思考、共同目标、共同发力。像心智模型、空间地图、服务蓝图、用户体验地图、客户旅程地图都属于体验可视化地图，也有称为对齐图。

用户画像&用户体验地图介绍

用户画像 本身可以反映出服务对象的特征，便于改进业务服务，帮助研究用户需求或产品痛点，因此在一些体验可视化地图中会配合使用。并且可以帮助设计师指导产品功能、导航、交互、甚至视觉设计方面的决策，是一种联系用户诉求与设计方向的有效工具，总之它能让你知道产品是给什么人用的，他们有什么特征或诉求。

用户体验地图 以个体在某个产品或领域中的体验经历为主，关注产品是如何契合个体用户体验的，通过用户个体的行为触点与视角来洞察商业机会。是一种比较视觉化、有助于引发共鸣和聚焦用户体验的工具，比较贴合情感化设计的理念，适用于洞察用户视角下与产品系统交互的可视化地图。

所以在作品集里经常看见这些体验地图就能够理解了，一方面是作为战略层的研究报告说明，用于佐证设计或决策的依据。另一方面是为了其他读者达成共识，便于共情设计目标。当然丰富和美化作品集也是一方面，更多的则是希望不要滥用起来，形同虚设，成了一个没有深入作用的装饰工具。

两者工具的差异与特性

用户画像的因素

用户体验地图的因素

如何打通用户画像与用户体验地图

方便直观易懂的去解释用户画像与用户体验地图之间的关系作用，这里我通过流程、相互作用来解释一下；

从流程上看

体验地图是基于用户研究开展的，所以要考虑研究谁，研究什么问题，在什么场景或领域进行，因此就需要借助用户画像去界定范围，以及形成用户材料，再去考虑用何种体验可视化地图展现，而用户画像也将一直贯穿始终提供可参考的用户信息；

相互作用上看

用户体验地图一般都是聚焦于既定范围的目标群体，一份完整的用户体验地图应该包含用户画像信息，应交代清楚目标用户的背景、场景、需求、痛点等关联信息，方便读者了解，以便于代入用户视角深入到用户体验地图的讨论中。

而用户画像尽管提供了由外而内的视角或部分设计见解，但并不能满足项目多样化视角的需求，且不足以形成一系列的设计见解洞察，所以用户画像始终需要与心智、情景、体验地图或研究报告等结合使用。也就是说用户画像需要与用户体验地图配合输出，两者谁也替代不了谁。

体验可视化工具的一般流程简述

一个正式且有效的体验可视化地图一般必须经过四个阶段才能完成，最后再得出结论达成一致；

一、项目启动；通过内部识别或收集用户反馈找到需求点，计划研究目的，制定目标。

二、开始调研；通过研究手段向用户收集优化资料或数据，为创造体验可视化地图提供可靠的数据。

三、阐述分析；选择阐述方式，通过体验可视化地图将研究结果与核心价值进行呈现，为后面探讨做准备。

四、达成一致；使相关业务人员共同参与研讨，结合地图报告进一步的思考，指出潜在机会或达成一致的观点。

五、展望未来；根据研讨结果设计解决方案，提出价值主张，进一步跟进和实施起来。

真实应用中不用急着画图准备填充，先明确目标再从用户研究或资料收集开始。如果没办法找到目标用户进行访谈或测试研究，那么至少找到一线的人员进行访谈或测试，不要依赖自己的见解或认知套用，这些地图的精髓在于打破内部视角建立起一场具有包容性的对话，不同部门的参与者多多益善，所以这些地图只是研讨中心的参考物。

如何正确Get用户原型与画像

构建和使用画像时大致可以分为两类；

1. 根据用户研究建立正式的用户画像

2. 建立人物角色原型

具体取决于用途与条件情况等，制作任何一组用户画像都非依托想象力，都是基于事实或用户研究的。并且不只是简单的人口数据或个人信息描述，如果一组不能达到共情效果的用户画像也就失去了核心价值《如何有效快速共情-点击查看》，就像一份简历，没能体现出个人能力与专业素养一样。

人物角色原型

制作一个正式的用户画像是一个漫长的过程，还需要开展用户研究，如果你没有现成的调研对象或调研条件，你就可以采用人物角色原型，该方法是由《Lean UX》的作者Jeff Gothelf提出的，他描述到；

“人物角色原型是一个正式人物角色的变式，其最大不同在于人物角色原型不是用户研究的结果，而是更多的源于头脑风暴的结果。公司成员会从公司理念出发，基于自身领域的专业性和直觉，来明确谁是公司产品或服务的目标用户，用户的动机和需求是什么。”引：Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

这类角色原型不用花费大量时间去做用户调研，它们是基于已知的特征情况或预期的目标用户，适合临时性使用，便于开展前期工作或达成一致的见解，但是人物角色原型并不能代替基于可靠数据的用户画像。

构建人物角色原型的方法

就是跨部门集体参与贡献观点与数据来构建。前线相关业务人员是必备的，人数控制在5-8个人就行，要有主持人把控节奏和参与度，尽可能收集到不同业务视角下的问题反馈，讨论开始前可以提出一两个角色原型来激发讨论，然后充实起来，尽管最后可能形成了多个角色甚至有些看起来有冲突，不过没关系，重点是让这些人物角色清晰明确下来，不一致的地方可以进一步的讨论。

人物角色原型的构成内容

一般人物角色原型在一页的篇幅内就可以显示完，主要五个板块。值得注意的是，一定不要脱离了产品主题的范围；

一、角色基本资料：角色头像、姓名、头衔、单位或一些可用的辅助资料。

二、人口统计特征：一般包含性别、年龄、职业、收入等与主题相关的人口统计指标（类似简历中的个人信息）。

三、心理统计特征：与主题相关联的因素，主要指不可轻易观察的心理活动、态度、信仰、动机、观念的个人特征。

四、产品相关行为：指与产品体验有主要关系的行为或是行动，包括兴趣爱好、个人习惯、专业活动等。

五、需求与痛点：用户有哪些与主题相关的需求或痛点，你的设计可以满足用户那些需求和痛点缓解。

用户画像

用户画像本身可以帮助发现问题或进行决策，同时也反应出了对用户或用户视角的共同理解，并且可以在日常研发工作中持续使用，例如一些材料归档、分享、更新、辅助其他可视化地图等，以发挥出更多的余热。

如何打造可用的用户画像

定性还是定量类型

根据产品需求选择定性还是定量分析，亦或者结合，一般定性适用于用户需求深挖或业务创新等情况，讲究的是“为什么”，而定量更像是通过数据验证“有多少”，常用于数据分析、趋势分析、数据验证、做精细化运营和用户精准投放。  

定量需要足够的数据支撑，如果项目需要画像且企业不稳定、用户量级不够不能满足数据需求，则可以借助市场数据报告、白皮书、第三方数据服务平台、调研服务公司等来参考，这些数据也都是可靠的。大数据杀熟就是数据画像的反面引用，通过画像对用户进行分层，再挑出用户中的软柿子或老实人欺负。

识别用户群体优先级

对目标群体要有认知，要根据特征划分层级或类型，例如典型用户、潜力用户、专家用户。这些用户的界定范围需要业务相关人员去制定，类似一份简历我们可以根据能力对标级别，一般我们可以通过4个比较有影响力的指标进行划分，至于权重我们可以采用常见的四象限或卡诺模型；

在制作用户画像前可以合理的根据人物角色原型的特征过滤目标用户群体，但不要过分依赖，你只是需要找到符合的目标群体，而不是根据原型找到理想的那个人。

最终调研对象的关系表呈现；

定性类画像不用邀请很多用户参与研究，一般在5人左右，只有研究资源充沛时才会考虑邀请更多研究对象，一方面是研究发现5人左右就能反映出绝大多数问题了，另一方面是出于时间精力和预算情况考虑。

定性类用户画像要做什么

一、确认研究对象的优先级，根据需求背景或目标确认重点跟次要群体来挖掘不同用户视角下的问题；

二、通过线上招募(APP内或相关平台发布有偿邀请，亦或者寻求第三方服务公司帮助)、客户群(相关的用户答疑群邀请)、论坛社区(发布招募帖子等)、专家咨询、产品线上推送等方式，寻找目标群体并建立联系；

三、选择线上访谈、可用性测试、问卷调查、焦点小组等有效的用户洞察方式，并设计好相关问题或材料准备与用户进行深入研究(主要围绕已知问题或新的设计方案验证，再就是新的业务需求洞察为主)；

四、整理用户资料，围绕研究主题建立用户画像信息，完成主要信息模块，可以根据业务需要，将用户技术特征、职业特征、环境因素进行补充(需要考虑是否与业务有一定关联或影响，否则无意义)；

五、完善用户画像的细节，将价值信息同步到画像中，并对有效信息的细节进行补充，增加可信度还原真实性；

用户画像并没有一个模版标准，具体还是要看业务需求，而且网上的模版挺多的，自己甄别吧。另外在用户洞察的过程中，我们可以结合可用性测试、绘制故事板（这两种研究方法有兴趣可以查阅资料，一两句讲不清楚，有机会展开讲）等方式一同进行，而不只是把目的停留在建立用户画像上，这样反而获取的有效信息受限了。

定量类用户画像要做什么

一、数据采集

通过有效途径将用户产生的数据集中，不论是产品数据库、数据埋点、第三方数据统计或是定量调研的结果，这些数据都是重要构成部分，同时也决定了信息的范围，比如你拿不到用户的出行数据，那么就根本没办法构建相关标签或指标。

二、数据定义

对数据进行清洗整理，识别出用户行为数据、用户偏好、生命周期等数据，并进行标签化分类整理，这些标签或指标可以体现出某些维度的趋势或用户行为预测。不过值得注意的是，在构建这些标签或指标时尽量结合业务流程或生命周期来梳理，考虑画像建成目的与业务场景同时，也要思考标签的权重问题，标签不等于越多越好。 

三、构建画像

根据产品阶段或业务需要，把相关业务标签结合用户群特征信息整合成用户画像，一般的业务标签类型有增长策略、用户偏好、用户价值、营销触点等，这类画像可以包揽多个维度信息，还能对周期数据可视化显现趋势变化，但是在用户痛点或需求上，可能不会很直观，需要进一步的结合用户场景带入思考。

通常互联网产品前期，没有构建标签或数字画像的经验，可以考虑让团队引入相关第三方数据画像服务，它们可以更便捷的接入到你的产品中并帮助你打标签做统计；

以下截图来自第三方大数据画像工具(神策)

*第三方数据分析辅助产品也不少，这里只做交流使用

如何让画像角色更生动

画像中的角色应该更加生动，能够让我们感受到真实的存在，只有这样才能产生共鸣，赋予画像价值，为此我们可以通过控制以下六点来做的更好。

一、不要特殊化

特殊能加深印象，但是特殊化并不代表产品的典型群体，同时在实际应用时容易扰乱共情或分散注意力，例如用户群体是普通青年，就不要描述成一个帅气的学霸，也不要为用户添加一些奇怪的癖好，这些不相干的信息并不能让画像更加生动；

二、合理应用头像

通常作品集中的头像都比较美观个性，这没事儿。但实际画像应用中，头像也是很重要的一部分，会马上映入眼帘，这些头像不要使知名人群的，且贴合真实用户标签，不用暴露性感或是丑陋异样的，也不要使用插画、卡通、3D形象，不要有奇怪或不自然的行为动作。

三、充实细节

以一款线上教育产品作为背景，举例原本我们的用户信息写到：

那么即可根据产品属性结合实际情况进行丰富补充，例如调整为以下描述；

虽然没有过大的变化，但是已经将贴合教育产品的地域信息、课程阶段、收入情况进行了完善刻画；

接着再例如，虞溪女士的需求写到；

简单来看确实是透出了线上教育产品的需求，但是需求并不深刻，也没有刻画出虞溪女士的核心诉求，为此我们可以结合创造情景故事的方法，融合角色、场景、行动、事件、评价、情节这些元素去深度刻画描述，例如以下调整；

结合创造情景故事的办法是为了刻画出更多细节，不仅可以让浏览者更好的沉浸在角色视角，也能在完善的过程中深挖出更多有价值的思考；

四、创造情景故事

情景故事不会很枯燥会更抓人心，能够传达更多信息的同时，将产品信息与真实情景交融在一起，方便团队记忆理解以及更好的促进讨论。创造情景故事的元素通常有：角色、场景、行动、事件、评价、情节。看起来就像是在描述“我与xx产品的一天”。

1. 角色：故事的主人翁或是参与者，不可缺少的重要部分；

2. 场景：故事发生的时间地点物理环境，例如早上八点半我在拥挤的地铁上抢到了座椅，并打开了手机；

1. 行动：能够观察到且与主题有影响的行为动作，例如我被这个问题难住了，解锁手机并打开了这个APP；

2. 事件：发生了什么事儿，角色间做出了什么反应产生了何种结果；

1. 评论：角色怎样评估并作出决策，有了怎样的目标，并如何进行下一步。其中任务目标是驱动的核心；

2. 情节：一系列行为与事件的演变过程再到结果，从问题的发生到角色推进目标到结局。例如经典的戏剧结构：

*创造情景故事是要花费时间精力的，如果时间充裕你可以慢慢将相关描述进行转换，时间有限责挑取重点转化；

五、不要孤立使用画像

在前文就有描述到画像需要配合其他体验可视化地图一起才能更好的发挥效用，画像通常始终保持着个体视角，而且没有办法传达一系列完整的体验报告，所以为了更好的满足项目多样化视角的需求，尽量不要孤立的使用画像。

六、定期更新

产品发展中，会经历不同的阶段与市场变化，用户群体自然会变。如果说产品在研发新的功能去开拓年轻化的市场，那同样意味着目标群体趋向年轻群体，这种时候就需要变更或新增用户画像，就不要使用旧的画像起步了。

基本上做好以上细节，你的用户画像就大功告成了，这就像是结合STAR法则优化项目经历一样。最简单的标准就是业务人员能够去理解这些角色并代入角色视角思考，可以有效共情或决策。

如何用好用户体验地图

首先我们回顾一下用户体验地图的关键词：既定的用户群体、应用场景或领域，用户以某个持续性目标驱动与你的产品或服务发生交互，并且涉及多个阶段来实现目标，地图会通过由外而内的视角洞察产品服务是否契合用户的体验。

由此可见在与用户研讨时，我们的问题或测试任务应该覆盖相关阶段或重要的任务流程，以此来获取体验地图的相关重点信息。另外很多产品比较庞大，服务颇多，因此控制好体验的阶段范围也很重要，不仅会拉长工期也会使得焦点分散。

用户体验地图的构成简述

用户体验地图主要包含三个层面的内容，一、用户目标阶段，二、用户与产品服务交互，三、痛点机会洞察；

其实碍于不同产品和服务类型，体验地图的构成元素也有差异，不过在漫长的应用发展中也逐步趋于稳定。

常见的构成元素：

一、用户需求或目标：
在体验地图中，用户以需求或目标驱动与产品发生交互，需求或目标既定了要做什么，应该需要什么服务。

二、行为阶段：

行为阶段是界定场景的重要部分，以目标任务阶段的生命周期或者关键节点展开，不一定所有阶段托盘而出，阶段太多则不聚焦，细分太多则费时间也不一定快速见效。

三、采取的行为触点或步骤：

用户使用产品或服务展开的行为或接触的设备、泛功能应用等。

四、想法与问题：

在体验服务的过程中出现的问题或是一些真实的想法感受。

五、情绪波动与精神状态：

情绪和精神状态通常是反映服务好坏或用户满意度的重要因素，但同时也难以观察或量化，通常会根据用户对问题的描述来共情情绪，亦或者向用户提供情绪表情标签。

六、痛点或机会揭示：

结合上层阶段行为与用户的反馈信息向下垂直洞察产品服务的痛点或机会。

七、设备或其他图例补充：

例如跨端跨设备或包含特殊标签信息的补充说明。

*示例模版

用户情绪板怎么用才对

表情包早已成为网友互动和情绪表达的重要部分，但是在实际的可用性测试或访谈中，用户会相对拘束一些，也不会把各种各样的表情挂在脸上，所以才说用户情绪很难研究和洞察，更别说量化执行了。有些人可以进行表情管理，情绪更是难以琢磨；

那么体验地图中的情绪板怎么搞定呢？

就用户体验地图中的情绪块来讲，通常一定不只是表情icon来做表达，这样费解还缺乏实际价值，所以一定会加上相关描述来揭示用户情绪与观点。心智模型中用户情绪感受便是靠的文本描述来传达。

早期Pieter·Desmet在其《Designing Emotions》一书中提出了如何衡量情绪的研发方法，他开发了一款叫做产品情绪度量仪的工具，其原理就是为用户提供各种表情表达的卡通形象，用户在体验过程中根据自己情绪选出最匹配的那个卡通形象来示意自己情绪。这个工具经过不断迭代并丰富声音后已授权到：https://www.premotool.com/，我们可以在度量用户情绪或其他体验可视化地图中配合使用。 

另外在使用表情标签应用时，并不大推荐常见的微信表情、QQ表情等，这些表情在长时间的使用中，用户都会形成一些偏好，这会影响使用决策

在服务体验的过程中，很多时候情绪变化并非是单一线型上起伏变，例如：

我在观看电影高潮的部分突然网络异常，那么我的情绪应该是多样化的，一边是代入高潮部分的激动，另一方面是网络带来的失落感，同时还有等待网络恢复的焦急。

为此我们通常有两种方法来传递情绪变化；

1、将喜、怒、哀、乐、悲、恐、惊或需要的情绪标签化，每种情绪用一个颜色表示，然后使用同轴的趋势图结合用户行为阶段来表示；

2、即使一次展示多种情绪，也难免有积极情绪与消极情绪同时出现的情况，这种时候可以围绕一条分界线划分两类情绪区间，使用情绪曲线结合关键因素描述来显示更加全面而复杂的情绪心理，对应每个关键情绪节点可以使用不同表情图标细化辅助，使得情绪起伏的信息更充实有价值；

怎样完善用户体验地图

1、建立正确的项目目标是第一步，用户体验地图的优势与作用都有在前面讲过(如果忘了可以在“两者工具的差异与特性”中开始回顾)，使用用户体验地图是有目的性地，它不是优化体验的万金油，通常都是收集用户反馈知道某一些阶段或环节存在问题，而建立优化目标开展的工作；

2、锁定存在问题的阶段，建立用户问卷、焦点小组或用户测试进行聚焦研究，尝试收集用户的意见或优化方案；

3、通过白板或线上协作工具建立简易的用户体验地图框架，并将研究用户的画像信息与碎片信息填入地图。白板共创的办法其实就是根据用户体验地图的框架，结合用户视角将自己的观点写到便签贴到对应的区域，避免你一句我一句难以记载和整理；

4、关注每个阶段的过渡，通常问题很容易出现在这些地方，例如付费前到付费后阶段，如何进入后者阶段就成了关键点，另外没啥优化空间或体验良好的阶段可以折叠起来留出更多空间关注核心；

5、用户体验地图的画龙点睛之处在于跨部门协作完成，而不是闭门造车，邀请一两个其他部门的人说明要求和完善地图并不是什么难事，只有这样最后的结果才能达成战略一致，而不是自己绘制完后要求其他人被动接受结果；

检验用户体验地图的标准

一、首先看你是否与用户建立联系，用户体验地图的个体对象是用户不是你自己，尽可能的获取真实的用户的信息。

二、一个产品运作是需要多个部门协作的，所以至少要有三个不同部门的人员参与进来。

三、协作完成用户体验地图和达成共识后，你会惊奇的发现问题如何解决，各个部门该怎么配合实现都清晰明朗了。

前一阵子跟UXren社区主理人宝珠老哥讨论过，就如截图所示，更重要的是将企业各部门协同在一起，达成一致的战略目标，共同参与探讨出解决方向为业务赋能，这才是体验地图的精髓所在。

什么是触点模版工具

用户体验地图通常包含了一系列阶段，而每一个阶段都会由多个触点编排成一段微型体验，而触点模板工具将会很好的为你建立和打开一片微型的体验模型，这种模型是由罗伯特·罗斯曼(j·Robert·Rossman)[美]与马修·迪尤尔登(Mathew D·Duerden)[美]在《最佳体验》中提出的一种体验洞察工具，它可以很好的结合体验地图去进一步的深挖某段流程或阶段里需要优化的体验，它们之间的关系就像一条路线图与一份详细的指引说明。当你完成某个触点模版时，你会对该触点上的体验设计有清晰的认识，并且会形成一份书面报告与执行团队共享和交流，触点模板可以很好的解释体验是如何设计的，并且将相关执行团队的角色联系在一起，这不是噱头，你可以根据后文指引进行尝试。

体验类型的框架

体验是复杂的，在用户触点模版工具中，体验被划分为平淡的、专心的、难忘的、有意义、革新性五种类型，并且它们具有连续性，是通过关键特征与关键属性定义出来的，它们结合了心理学理论基础，目的是方便更好的理解体验，并在设计实践中起到指引作用促进交流，因此我们在设计时也应该对用户体验结果有意向性的去设计，框架如图；

*关于参与感的两种系统思维是两种不同的思维状态，系统1更像是惯性思维，凭借认知或经验更加快速和自动化的思考，而系统2就会开始更主动的更深入的进行思考，参与阶段越高思维越深思。

而三个阶段分别是；

一、接受：个体意识到和接受体验过程中正在发生的事情。

二、思考->处理->计划：个体开始积极的思考体验，并对正在进行中的事物做出处理与反应，同时可能开始计划各种应对方案。

三、行动：深入的参与到体验中并引入新的触点和元素来维持互动，从而共同创造体验，例如《鱿鱼游戏》上映后，影片中的“扣糖饼”又带火了糖饼。

当新的事物被第三阶段引入后，又会重新开始接受并循环，不过这并不代表所有的体验都能够完整经历这三个阶段。

触点模板框架

触点是用户进行交互的重要部分，其周期可长可短，会产生不同感受，而一系列的心理感受会促成最终阶段或完整的体验。触点模版由11个部分组成，它们互相作用指导和揭示体验设计的方向与细节，并把设计结果引向预期的体验方向。

抬头信息

• 编号：对应到体验地图的阶段编号或是触点编号，随着触点设计逐步完善，对应的位置可能会发生转移。

• 标题：对应该触点模版主题的标题或是任务触点的名字。

• 体验类型：触点的体验类型或整体的体验目标，从平淡的到革新性的五个体验类型。

• 期望的反应：我们把期望的反应视为触点预期结果的北极星指标，它可以是多个。我们通过用户反应逐步提炼出预期的结果供予用户体验，例如期望的反应是笑容，那么我就可以提炼出“讲个笑话、开黑游戏”等可以促成反应的体验结果，同时期待的反应应该尽可能的传递用户价值。

核心组成部分

• 期望的结果：根据期望的反应，我们要提供给用户哪些体验来实现。同时期望的结果应该跟类型相匹配。一般我们可以根据 “1. 产生积极情绪、2. 吸引注意力、3. 帮助发展和加强关系、4. 从更宏大的视角给人来带意义、5. 提升能力、6. 孤立自由选择” 这些类型内容作为起点，并根据体验项目的情况细化，例如“心情低落想要刷刷手机产生积极情绪”Change“在App上刷会儿短视频，看点有趣搞笑的段子来缓解下低落的情绪”。

• 体验场景元素：触点模板工具没有特定的行业或业务模式，因此这些元素根据需要完善即可。而实际的元素应用中也会有不同的权重，注意重点元素的设计应用。

• 互动设计：可以是人与人互动、人机交互或更为复杂的互动，就是有意向性的将元素进行编排与用户产生互动获取必要的信息或传递。

• 贡献者：整个体验阶段中，可见的幕前服务人员与后台的服务员，他们是组成完整体验的重要部分，例如餐饮店的服务员与传菜员就是可见的幕前服务贡献者，而厨师们就是幕后的贡献者。

• 共同创造：共同创造和可供性是促进用户参与的两个重要的方法，并且参与度有高有低。好的体验更多是与用户共同创造的，建立合适的触点与用户共同创造体验是重要的！以微信的“拍一拍”来看就是个很好的例子，拍一拍功能本身是加强了微信聊天的可供性，给用户提供了更多的互动可能，同时用户可以自己编辑被拍以后的文本，加强了体验的趣味性，这便是共同创造的过程。可供性为用户提供更多互动体验的可能，而共同创造为用户提供DIY的空间。

• 优化：对触点进一步的优化，加深体验感受。一般分成了两大类型，一类是技术优化、一类是艺术优化。例如让一个App加载短视频更快更流畅，这就是技术型优化，如果为一个服务器未响应的404界面配上缓解焦虑的插图，这便是艺术型优化。

• 过渡：触点与触点之间的过渡可能波动、异常、缓慢、复杂等，如何引导用户正常的过渡到下一个触点也是重要的一部分，它可以是自动化的隐式过渡也可以是引导性的显式过渡，就像是安全通道的指示灯一样将用户从一个地点带往另一个地点。

*触点模版（可直接下载原图进行打印使用）

如何构建一个触点模版

通过一段音频聊天室互动体验之旅来揭示触点模版用法与效果，音频聊天室大家应该都熟悉了，这里就不聚焦用户画像与用户体验地图了，触点发生在用户第一次进入歌厅音频房间，那么应该怎么设计体验来为用户留下好印象呢？

触点是发生在注册后的第二个阶段，即首页房间列表(编号A02)，完成注册阶段后见到的第一个界面。标题则暂定为“一次非凡的音频互动之旅”，我们希望新用户在选择好一个房间进入后能够有一次愉悦难忘的体验经历，而相应的期待反应则是“有人带我玩真棒！这个声音我好喜欢，下次还来找Ta们”。体验类型则希望是从平淡的体验类型升华到难忘的。

其中体验场景除了设备自身与软件环境，更多真实的环境因素碰撞我们无法预测和控制，因此仅锁定软件自身的场景元素。互动设计则是关键，软件本身更多是工具支持，我们需要利用好运营资源跟用户产生互动来促成体验结果，这里我们会根据技术可行性优先考虑能为用户提供的体验结果，再到互动设计部分。其次就是过渡部分，预期的过渡触点实际上会有多个方向，我们优先以充值消费作为一个触点(转化)、私信关注为另一个触点(形成互动联系方式)，完善后的触点模版如图；

在该触点模版中，主要揭示了如何为用户打造理想的体验之旅，不仅涉及到运营方法也包含了软件的重点优化部分，它很好的展示了如何通过角色之间在软件中的互动来促成体验与商业价值，当你把这份资料在团队里分享后，完全可以清晰的对体验设想进行解释，以促进团队内的深入讨论与细节推进。至于相关功能的细节推敲同样可以采用触点模版继续深入。

接着A02触点模版中提到的标签体系优化，我们再一次的结合触点模版进行标签的体验设计，编号设定为“A03”，这是一个泛触点，它涉及到用户注册进入时、房间互动、系统消息、消费与充值、装扮标签的着落页，但归根还是在应用内。标题为“让标签为用户赋能意想不到的体验”，在这段泛触点中我们期望围绕标签为用户打造难忘的体验，让标签产生更多的价值与业务转换，经过初步的体验设计后，新的触点模版如下；

在这个触点模版上我们对标签的作用价值进行了定义，并对功能及业务流程上进行了设想，已经初步的形成了标签体验的设计，接下来只要将装扮标签的着陆页与房间内的应用进行完善设计，在辅以条件判断与消息通知打通闭环就算是完成主要工作了，再此后的内容你是继续用触点模版还是设计交互原型都是可以的，至少目标是明确的。相信写到这里，触点模版的应用与功效你已经一目了然了。

触点模版小结

触点模版的板块跟信息维度较多，但是考虑到触点或项目的实际情况，模板内的信息填充不用完整。并且它的确可以很好的将体验设计的思路整理出来并形成材料分享，对于多个触点只需要根据体验地图上的顺序打上编号后，即可将多个触点模版的关系连接起来，你可以将打印填充后的模版依次排列或张贴在白板上的体验地图上。

触点模版就像是一份交互自检表，它从多个维度去考虑和解释了触点体验的设计，尽管没有勾画出详细的设计细节，但是体验设计思路与执行团队的任务已经很明确了。

另外完成触点模版时，并非是要按照模版里的板块顺序作业，比如有时候我们是根据体验结果考虑运用哪些体验场景，如果有固定的场景，那么你就可以根据场景情况开始考虑，一般更倾向于先设定体验结果进行倒推。再就前面啰嗦过的，我们根据项目情况完善需要的模块即可。

服务蓝图介绍

更完整的服务流程可视化工具，可以结合用户体验地图对服务流程进行优化或调整，相比传统的业务流程图，它在用户角色关系与前后端分离上有明显优势。是一种服务可视化的工具，利于让产品保持精益（识别价值点、优化流程）

多角色的引入，虽然使得蓝图更加复杂，但是能够反映出更多角色的交互与流程关系。

服务蓝图的因素：

服务蓝图的构建元素：

结语

客观来讲，这些体验地图时常保持争议，特别是逐步大范围在业内曝光后，形式化、假把式、滥用等标签也愈发明显呐，这些体验洞察工具并不总是能够在项目中发挥预期作用，它们也需要区分使用场景跟项目需求情况，如果你没有尝试过，可以积极引用，当你熟悉应用后你会发现收获更多的是一种体验设计的思维，一旦需求或痛点摆到面前时不再像一只无头苍蝇。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

写在前面

今年的“双十一”，朋友圈异常安静，没有了以前电商活动的氛围，没有漂亮的数据，没有晒图，有人说是用户消费疲软了？数据不会骗人，今年”双十一”一天的GMV还是比去年高了将近500亿，而且一大波尾款人在11月1日就已经结束。再加上直播电商，用户购买渠道变多了。李佳琦直播带货一晚就超100亿的GMV，说明用户的消费意愿和消费力还是很强的。算一下，50个李佳琦直播一晚上就能抵上“双十一”一整天的GMV，有点厉害。中国伟大复兴的道路还在继续，随着人民生活水平的提高，文化素养提高，互联网普及，消费力只会增不会减，只是战场在变化。

前些日子发了PP微助手的优化作品，本篇将结合改版思路和最近对互联网设计行业的思考进行一些分享，希望对大家有一定的帮助，欢迎大家来指正吐槽~

点击可以查看   PP微助手改版优化

流量变“留量”

互联网产品最重要的就是流量，没有流量，就算产品设计的再好，早晚也会运营不下去。纵观这些年移动互联网的发展，市场已经被分割的差不多了，各个行业都有龙头企业（社交：微信、购物：京东淘宝、出行：滴滴哈罗、外卖：饿了么美团、旅游：携程等等），各大互联网公司业务也趋于稳定，红利期已经过去，流量市场已经变成了“留量”市场。就像淘宝这种大流量的产品，也在吃流量老本。

回归到设计，在互联网公司做设计，一直在强调需要有产品思维、用户思维，然而在“留量”的时代，更需要我们具有运营思维，同行业的业务趋同、需求趋同，可挖掘的需求少之又少，可以打开同一行业的各类app一看，就知道产品形态大同小异。所以只能在“留量”里下功夫，既要减少存量用户的流失，还要在这基础上让存量用户创造更大的价值。必然，我们在做设计改版的时候就需要结合一些运营知识。

曝光

“曝光”一词相信大家都听过，在拍照时，“曝光”时间越长，照片细节就越丰富，当然过度“曝光”，也会让照片失真。在运营一个互联网产品时，也需要用到“曝光”，这里的“曝光”是指产品内容的“曝光”。

用户在进入某款产品的时候，都是带有一定目的性，通常情况都会经历三步操作，从看见内容，到与产品互动，最后得到想要的结果。

这里的“看见”，就要说到产品承载信息的曝光，合理的信息曝光才能更精准快速的触达用户。同时，运营同学最关心的数据和流量，也是需要安排合理的信息曝光才能有有效的数据和流量。在手机这么一小块屏幕想把所有内容都曝光出来，是不太现实的，就算能，也不合理。把过多的信息一下子全部曝光给用户，效果反而会很差。通常做法就是对页面进行楼层的分割，流量进行合理的分发。大流量的产品，每个楼层都需要单独部门去运营的，这样就会出现业务主次和优先级，不然各部门就会为了争夺"屏幕地盘"，无限撕逼。

作为设计师，就需要和运营部门做好以下确认：

1、楼层怎么分割，哪些楼层是产品部门控制，哪些楼层是运营部门控制，每个楼层显示哪些内容，设计师需要根据每个楼层的重要性，去定义屏占比

2、哪些模块需要首屏曝光，哪些是需要第二屏曝光，依此类推，这个至关重要，设计师就要考虑各类机型适配问题，比如iPhoneX一屏能显示下的内容，在其他手机未必能显出来，这样会直接影响曝光，导致数据不好（等着背锅吧～），严格来讲要根据实际用户使用机型占比去定义首屏显示的内容。

3、每个模块内容的信息层级，明确信息优先级才能结果为导向去做交互布局和视觉呈现，这时候就是你发挥的时候，对比、亲密关系、留白等等，都可以上了。

这里结合PP微助手的一些改版优化（非全套），分享一些改版思路。

PP微助手改版思路解析

项目背景：PP微助手是取代电视遥控器一部分功能开发的一款小程序，核心需求有几点

1、账号统一，PPTV时代的用户，大多都是使用的PPTV的账号，为了方便管理苏宁易购账号体系，会引流把PPTV尚未升级的账户统一升级合并至苏宁易购账号。

2、投屏功能，看影片终端还是以电视机为主，所以只做投屏，不做在线播放功能

3、智能语音，结合苏宁小biu智能语音系统，可以和电视机语音互动，实现交互功能

4、会员业务，移动端开通会员比电视端更方便，同时可以用一些运营手段促进用户开通会员

5、推送活动，电视机打开频次不如移动端，推送活动给用户，移动端可以实时看到

电商行业通常会把用户分成“大明”、“笨笨”、“小闲”三大类用户，在视频类产品，绝大多数用户都是“小闲”用户，来平台都是找乐子打发时间的。

思路一：架构改变（产品思维）：

PP微助手本来就是辅助电视机的，用户觉得用遥控器操作麻烦才会选择用小程序操作。在设计的时候，把用户当成是一个并不想动脑子并且很懒的傻子，产品设计越简单越好，否则用户干嘛要用小程序，遥控器挺好的，遥控器的大多交互都已经习惯，也没啥学习成本。

从用户角度分析，进入小程序无非就是找片源、看片以及看片过程中的一些基础控制操作（播放、暂停、快进等等），所以简化了产品整体框架，从原来底部5个tab（首页、片库、遥控、搜索、我的），改为3个tab（首页、遥控、我的）。产品呈现给用户的样貌更加简单直观，也相应的培养了用户心智，让用户对PP微助手这款小程序有个基本定位。

思路二：楼层分割（运营思维）：

首页改版前，按照iPhoneX的尺寸，首页第一屏也就曝光了3个分类，而且下滑到底总共也就几个分类，片源的曝光度不高，banner呈现也相对普通，就是那种正常电商类头部banner。同时交互成本也高，要点击“更多”才能看该分类影片的全部列表，要知道多一步操作就会多损失一部分用户转化。

改版后，针对第一楼层推荐影片采用电影宣传时的大海报样式，视觉焦点更强烈，同时曝光也更强烈一些，你去电影院的时候，看到的电影宣传海报，大多都是这类竖版的，用户已经有一定的心智模型，所以在这里采用竖版更为好一些。这些推荐影片在这里也作为“hook”，后面会讲。当然像电商类产品，首页需要考虑严谨的屏占比，这类尺寸肯定不合适。

第二楼层是影片的分类，采用文字tab左右滑动的方式，这种分类方式虽然没啥设计感，也普普通通，但是在一个分类众多的产品里，这种处理方法相当不错。减小了楼层的冲突，也提高了内容的曝光。像腾讯视频、爱奇艺、优酷，分类tab都是吸顶固定的，很直观的传达给用户影片信息。下拉的时候，这里采用feed流，用户在交互习惯上，连续操作时，对同一种交互会有惯性和依赖，上滑时查看更多影片，能满足用户的预期，也不会因为调整新的交互（上述的点击跳转查看更多）方式让用户反感。在视觉形式上，采用了横版的样式，是为了和第一楼层形成对比，也是为了节省屏幕空间，能曝光更多的内容。二楼的影片内容也可以分布一些“hook”

搜索也是一种用户找片源的方式，后面再讲，这里要考虑到流量分发的情况。

思路三：引导用户（运维思维）

按照福格模型B=MAT，完成行为的三要素：动机、能力和触发器。

用户进了影片详情，说明已经有动机了，这时候需要抓住机会，按照产品需求可以完成两个行为目的，一个是让PPTV账号升级成苏宁易购账号，二是转化成会员用户。

这里要看一下进入详情的数据，是“hook”进来的用户多还是非“hook”进来的用户多。如果是“hook”进来的多，说明用户主观意愿不是很强，这部分用户可能会流失，如果是非“hook”或者搜索进来的更多，说明平台用户主观意愿更强，有较高的粘性，更容易促进会员的转化。

对平台来说，希望用户进来完成两条路径：

1、未登录的用户，点“推送”和“开通会员”按钮，进入下一步登录或者升级账号流程。当然这一步会流失用户，部分用户会反感登录这种操作。

2、已登录的用户，可以快速推送影片，完成自己的看片目的，如果是会员影片，这里就需要用户先开通会员，当然只是引导，还会有一部分用户不想开通会员，选择离开。

防止用户过多的流失，就需要平台一定的干涉，加强登录或者开通会员的意愿，可以从以下几点入手：

1、沉浸式体验，进入详情，头部区域自动播放影片花絮或者预告，快速让抓取用户眼球，增加下一步操作的意愿。

2、醒目的豆瓣评分，“hook”影片选择一些评分高的，用户针对豆瓣评分已经有一定的认知，评分优质的影片，用户更有意愿观看，更容易促进下一步动作，提高会员的转化率。

3、各类标签，比如：首播、独家、会员免费、会员半价、4K高清等等，能清晰定位影片，捕捉各类用户看片心智。

4、会员相关信息展示，未登录的提示“登录领券、限时活动等”，非会员提示“会员权益、开通会员的利益点等”刺激用户。

思路四：优惠券吸引用户（运维思维）

改版前优惠券和体验券在不同入口，流量分散了，券的目的就是要让用户去使用，需要缩短路径，更直观的展示给用户，能让用户快速做决策。如果券种类多的话，还需要区分各种券样式，需要让用户快速定位想使用的券。

其中已使用和已过期的券对用户来说就是已经没用的券，并不需要再用单独的tab分类，并且弱化处理。因为PP微助手会员券相对比较少，不像电商一样，会送很多商品券，所以用最简单的形式展示给用户就行。

值得注意的一点，不是说已过期的券就没用了，如果运营把控好节奏，发券有一定规律，用户看到过期的券会有一定的挫败感，就会经常来关注券。“废券再利用”也能增加用户的粘性。针对快过期的券，必要时候可以做二次提醒，给用户造成紧张感，会激发用券欲望。

说服用户下决定，一般从以下三个点去考虑：时间紧迫性、暗示稀缺性、后果恐吓性

流量分发和流量承接

产品的流量来源有很多，除了自身用户进入产品的流量，还有线下广告、线上广告、分享链接等等各种来源。目前主要的流量分发方式包括：搜索分发、算法分发、社交分发、人工分发、付费分发。PP微助手主要应用算法分发、搜索分发、人工分发。

先讲一下“hook”，在电商里是“钩子商品”，这里我把“hook”当做是“钩子影片”，运营精准推荐的一些“hook”，会取到不错的转化效果。

用户在产品内的行为路径是不可控的，一大波流量进入首页，每个用户都有自己的目的，所以需要对用户进行分流。一部分用户去了搜索，这类用户目的很明显，知道自己想看的影片名称，这部分就是搜索分发的流量；一部分用户被“hook”勾走了，"hook"激发了用户的看片动机，这部分就是人工分发的流量，需要运营去干预；一部分用户在不停的浏览，在浏览过程中找自己的影片，产品会分析用户行为，显示千人千面的首页，这部分就是算法分发的流量。

有流量分发，那必然就有流量承接，流量承接都是相对流量分发的，在电商产品里，站内的流量承接一般都在商详，以及对应的后置链路（订单确认、结算等等），从各渠道进来的流量，最终汇总在商详。在商详，会突出各种利益点和产品自身优势去刺激用户下单。至于利益点，活动时候的各种优惠信息就是典型例子，产品自身优势，比如：淘宝的先享后付、京东有京东物流次日达等等。在PP微助手这里流量承接就是影片详情以及后置链路会员套餐页，具体可以看上面的“思路三”的分析，怎么去承接流量，怎么去促进转化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、设计和艺术的区别

艺术：

艺术是感性、天马行空、富有创造力的，表达创造者的个人意识。

设计：

设计是理性、精密的，为了解决用户的问题

（你看得懂吗？你有什么见解？为什么大家见解不一样？这就是艺术的魅力）

二、用户体验及用户体验设计

什么是用户体验？——————使用一个产品时的主观感受

用户体验设计？———————为了提升用户体验而做的设计

1.用户体验设计

首先要解决用户的某个实际问题--让问题变得容易解决--最后给用户留下深刻的印象。（视觉只是其中一部分，并不是设计的全部）

Eg：充电插座的苦恼--错开位置

尿液四溅--厕所里放一只苍蝇，用户会去瞄准上厕所（设计美观且有趣味性）

2、用户体验设计的特征

(1)严谨、理性、创意

先关注要解决的问题----其次思考有趣的创意帮助用户得到更好的体验。

(2)提供特定问题的解决方案

设计目标是什么，为什么人解决问题，如何解决

Eg:钢铁侠u盘死死按住关机键；楼梯是为残疾人设计的吗，我懵了？

(3)不让用户思考

用户感到挫败，会放弃。你的设计不要用户一头雾水。

(我到底怎么走?)

(4)趣味横生

尿液四溅贴提示语效果不好，放一只苍蝇效果很好？

因为：抓住了用户的心理和行为习惯，同时充满趣味，吸引用户

Eg：path推出的商店功能，在里面买自己喜欢的贴纸，摇晃手机贴纸也摇晃，感觉很好玩吧～带来好的体验感

3.用户体验设计师遇到问题如何思考

三、各种设计师的区分

1.怎么和别人解释用户体验设计师

A：“你用一个网站的时候，有没有出现：某个功能找不到了，点击按钮没有反应，填写的信息不知道哪里错了总是不能提交成功？”

B：我们的工作就是改善这种情况，让你使用网站时有一个好的体验，同时能让用户感到愉悦和不受打扰。

工作中：除了考虑用户还要让公司有利可图

2.交互设计师

通过分析用户心理模型、设计任务流程、运用交互知识把业务逻辑（需求/功能）以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的平衡点）的过程。

即：从公司战略角度考虑问题，在公司需求的基础上让用户觉得好用、易用

交互设计师的产出物：不是原型，你不是画图的工具，重要的是解决问题的能力

工作内容：竞品分析文档、用户反馈整理、流程图、设计草图、原型...

3.视觉设计师

原画：设计者很强的手绘能力，作品充满艺术表现力

平面：传达思想，较强的感染力

推广运营设计师：突出重点抓眼球

UI：良好的审美、具备一定的交互知识

                      (原画)                              (平面)                                              (推广运营)

4.用户研究员

通过各种分析和研究，深入了解用户特征，用户行为习惯，为产品运营推广提供必要的方向

工作内容：市场分析、竞品分析、创建人物角色、问卷调查、焦点小组、用户访谈、可用性测试

四、用户体验设计师的作用和价值

1、用户价值商业价值

用户通过优秀的设计快速达到目标，企业也会财源滚滚

eg：改变一个按钮的颜色，点击率提高35%；优化操作流程，转化率提高50%...

2、项目价值

跟进各个环节，保证产出物质量

推进统一及标准化，提升设计效率

促使项目流程合理，有规划

五、交互设计师的作用和价值

1.工作内容

分析重塑需求;与用研配合，了解用户特征与行为；设计结构、流程、界面、动态效果；跟进视觉、前端、开发；及时整理上线问题，准备下次迭代...

2.品牌价值

维护和突出品牌形象，统一的设计理念

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我们生活在一个信息大爆炸的数据化时代，随着网络科技的飞速发展，产品和用户之间的互动也日趋复杂，新功能不断涌现，带来便利的同时也导致用户对功能的认知摩擦日益加剧。在这种情况下，人们对交互设计的需求就越来越大，市场对交互设计师的需求也越来越多。许多公司都注意到交互设计对品牌创建、用户满意度以及回头率等方面的影响。那么，什么是交互？交互设计应该做什么？希望今天这篇文章，能够加强你对交互的理解。

交互就是与另一个人或者物进行交流互动，比如你说话或按动鼠标，对方给你反馈，这就是交互。对于设计师们来讲，交互多指用户与计算机、手机等产品进行的交互。

交互设计是一个页面或者一个界面的内容规划，例如哪里放图片，哪里放按钮，哪里出现文字；或者说是一个庞大网站以及产品的整体逻辑梳理，例如如何安排信息层级，如何让用户更轻松地找到自己想要了解的信息，如何让整个网站或产品更加合理、有效地运转。

一个城市有合理的规划交通才会便利，城市里面的人才会觉得更加舒适，而一个合理的交互设计也直接影响着一个网站、一个产品甚至一个品牌。

视觉设计是感性的，更注重一切表象的东西，比如颜色、版式、形状、调性等，视觉设计最终的成品是视觉的效果图设计稿。

交互设计相对来说更加理性，交互设计更加注重用户是谁，通过需求分析得出问题、解决问题，交互设计的最终成品是原型图。

看过了文字解释，再让我们一起来看看生活中无处不在的交互设计。

叠猫猫、盖楼、星秀猫……每年双11，天猫都会创新活动，激发用户对双11购物节的期待，营造蓄势。

今年的双11的主题为喵糖总动员，用户通过组队一起做任务赚喵糖，通过掷骰子的方式获取糖果数，占领格子，击败对手。获取喵糖的过程中，营销或引流设置无处不在。除了做每日签到奖励的简单任务外，最简单的方式就是用15秒的时间去浏览平台推送给你的主会场、各大分会场、各细分品类、各个商家店铺等页面。通过这样的任务设计，可以引导用户浏览会场店铺或各品类商品，最大程度地完成各个淘宝店铺的曝光需求。

 

天猫双11-喵糖总动员活动页面

新冠疫情还在持续蔓延，飞猪App贴心的在行程页面，添加了防疫工具引导栏，通过点击按钮，可跳转至支付宝中行程码、核酸预约等界面，为用户出行提供便捷的准备工作。

用户在滑动页面时该导航栏会被隐藏，静态时则显示两个应用，点击展开才能查看更多。设计采用浮层式引导，提供便利的同时，且不会对用户产生干扰。

 

飞猪App界面

一切交互设计所要达到的效果就是形成良好的用户体验，让用户在使用界面时更方便找到自己感兴趣的东西。

通过地图及定位，通过气泡及icon的区别，把附近的美食等进行排名，让用户更快知道自己的距离。还设置了点击卡片展示店铺信息同时支持查询路线等功能。

 

美团App界面

“优秀的设计是考虑周到且不放过每个细节”。往往在那些不易被察觉的细微之处，倾注了设计师的诸多巧思与心血，哔哩哔哩在设计中做了以下一个有趣的小细节。

在账号登陆页面，当我们输入账号或者手机号的时候，页面插画中的22和33是睁大眼睛的，而当我们输入密码或者验证码的时候，他们则用手捂住了眼睛。这个有趣的设计生动地传递了App对用户隐私的尊重与保护。

 

哔哩哔哩App界面

当你使用百度搜索物品，查看图片时，左右滑动即可切换下一张图片，上划即可关闭图片，这样的操作手势，更加方便快捷。

在查看物品图片时，下方还会出现商品推荐购买链接，仿佛“一站式”购物的贴心服务。

 

百度App界面

交互设计的核心目的是信息的传递，无论如何设计交互图、如何设计交互流程，我们要思考的核心和准则是如何把想要传递给用户的信息以最简单、最容易的方式让客户接收，反之用户也能用最简单的方式找到自己想要的信息。

这些信息包括内容、按钮、文字、图片等一切信息的载体。我们要明白在进行交互设计时的前提是如何去梳理信息更好地传递。

那么，如何才能让信息更好地进行传递？我们要搞明白信息传递时需要营造什么样的氛围，哪些信息元素需要突出，目标用户是谁，根据这些才能以一个正确的方向有逻辑地进行交互设计，而这一切的最终结果就是实现一个良好的用户体验。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：全速设计
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本文将从理论到实践，从软件到插件，再到不同应用场景拆解和团队协同的重构，一步步教你如何搭建产品KIT组件库。也给大家带来逆天的Anima插件教程，组件化设计的必备插件，目前国内还比较少有文章讲到。手把手！嘴对嘴！堪称全网最细保姆级教程！

01. 什么是KIT组件库？

一个成熟的设计团队，都会为产品制定设计规范，搭建产品KIT组件库，组件化思维也是设计师的必备思维之一。组件库会让团队协作变得高效且一致，让团队成员专注于深耕体验和细节，实现设计向产品赋能。极大的节省设计和开发成本，优化用户在界面流转间的感知差异体验。

02. 原子设计理论

将普遍存在的人性用户心理规律运用于设计，增加设计的温度。

近来对用户心理比较感兴趣，去看相关设计资料的时候发现相关内容重复性较高，多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙，在遇到让我们上瘾，持续付出或获得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能为我们的后续的设计吸收。

最后想说，设计师的价值不仅仅在视觉，好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野，多思多想，掌握钥匙，开启用户不同的心门。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

“今天吃什么啊？”

“不知道啊，看看大众点评，哪家店比较靠前”

“一会去看什么电影？”

“我看豆瓣上，这部片子评分特别高，我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，会发现当你面对的选择越多时却越不知道该如何做决定，或者当下做了决定后会一直思考做的这个决定是不是最好的，这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？如果排行榜仅仅是用来降低用户的选择成本，为什么所有商家都对排行榜趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配！

排行榜的本质是一个没有感情的信息筛选机制，将所有相关的同类事物之间通过比较，从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应使得用户降低自己的选择成本，可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名，那么这一切背后的原理是什么？

一个完整的排行榜是由平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。

1.选择类排行榜-降低用户选择成本

在没有各种应用前，当我们决定购买什么东西或去哪家消费时，前期需要花费大量的人力、物力去搜集相关的信息进行整理集合，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。

选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助用户降低选择成本的同时，也影响着用户的最终选择，在接下来的平台侧方面会有详细的分析）。

比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解，收集信息建立备选集，但由于京东在电子设备购物方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了可以展开话题相通的谈资。

在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感等等，这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜，不知道你有没有参与到其中，并把这些报告的截图分享到自己的朋友圈！在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要清楚自身在大数据下的自我确认，通过各种各样自我测试类榜单，判断自身的能力、情绪、价值等等，来达到自我认同，否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，大家一起参与讨论。

无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？下面我们来讨论排行中平台的影响及背后的原因。

对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起，我们对世界的认识来自我们的父母或老师，而这些教导我们什么是对、什么是错的长辈或老师，对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家，比如：医生、律师、教授等，认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究这一领域问题的工作，做出更轻松的决定，虽然不一定是正确的。

搜索我们会第一时间想到百度，需要观看影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动着用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？

2.平台权威性—平台侧

• 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力，在减轻用户的决策压力的同时，也影响着用户做出平台所需的决策方向；

• 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度，加大平台承载内容的传播范围。比如，每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度。

• 输出口优化

排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值。

• 平台盈利

平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后，部分平台开始利用排行榜进行商业变现，比如百度、58的竞价排名等，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。

上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得上榜用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。

• 同系同门资源导流

对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。

• 自建用户体系

不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。

• 伪造

当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。

面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。

知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）。

4.搜索-筛选（无明确搜索目的）

当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。

没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。

5.搜索-筛选（有明确搜索目的）

相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。

排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。

排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。

2.图文结合形式

相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。

• 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）。

• 左文右图VS左图右文

每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到）

榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；

信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。

排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

背景

在 B 端设计领域中，不管是内部用户、产品、设计师、开发，还是外部产品、设计师等，总能听到关于界面「屏效」方面的诉求或吐槽。

「屏效」狭义理解是「界面过度留白」；广义理解，「屏效」源自谐音“坪效”，指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数）。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。

为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感，于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开，将实践过程中反复验证有效的设计策略沉淀成设计手册，同步将部分功能进行工程化，确保可以开箱即用。

探索阶段-为谁在何时何地设计

用户声音｜不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%；认为提升屏效对体验有提升的终端用户占 50.6%。

外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里，其中就有 2 点提到关键字「效率」。

通过了解不同用户和产品类型发现，不同的用户在工作场景的产品使用中有着相似的特征：

案例收集｜发现问题，大胆假设

纵观 B 端产品界面，发现普遍问题和收录在解决屏效问题上实践得比较好的案例，为了逐步突破问题，选择以数据产品中覆盖率极高的表格为设计切入点，通过线上跨产品多端地毯式的体验走查，发现表格三个层次的问题：

视觉、交互层在无需理解业务场景和用户目标的情况下，都较容易发现，属基础问题，但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设：为提高屏效，可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度，可以通过提高信息密度；交互层为提高操作速度，可以缩短当前手势到目标之间的距离；信息层为提高信息被理解的速度，可以通过重组织等方式。

基于假设，我们进行了进一步的桌面研究，查阅论文等书籍，寻找设计理论的验证和指导。

竞品分析｜寻找实践证据，谨慎验证

我们知道视觉上界面留白过多（过疏会增加滚屏成本，过密因易串行而影响阅读效率），以表格「行高」为例，探索各表格在字号、字高和行高的关系，因为不同字体的同字号实际像素高度会有差异，因此选择的是字高（即文字垂直高度的视觉大小）而非字号或字行高，决定留白的两个重要因子是字高和表格行高，以次推演，界面元素和元素间距的留白关系，探究在视觉层怎样的留白率能保证甚至提升屏效。

以数据产品中的表格为例，通过直接和间接竞对的方式，分别从数据的查阅（视觉）、分析（交互）维度进行功能点和设计细节上的比对，来看看优秀产品是如何解决屏效问题。

直接竞对：内部用户口碑较好的产品 A、B外界竞对：同领域的 Tableau、网易有数、金山、微软表格；间接竞对：谷歌邮箱、AntD 等的紧凑主题的常规列表（一维表格）

通过竞品分析可以发现，数据分析领域的表格留白率普遍较低（信息密度高），尤其是金山和微软的电子表格，其次是同类面向数据用户的 Tableau、网易有数，而谷歌邮箱等工作台常用的常规列表紧凑版本中，留白率和数据领域的电子表格不相上下。

紧凑版的使用场景也常常是面对数据量巨大的信息呈现，通过切换紧凑主题，提升信息的快速浏览，而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大，而在实际案例实践中，也已经将表格行高优化至 30px，克制的使用留白。

除此外，竞品其他层次的设计也做了比对，总结来看整体设计做法：高密度、少屏数、少留白等。

文字陷阱：中英文字高不等于字号

举个容易犯错的竞品参考是，谷歌在紧凑版主题下字号 12px，列表行高是 28px，但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤，缺乏呼吸感。

原因在于谷歌的 12px 是英文字体，实际字高只有 10px，而 AntD Table 的语境是中文字偏多，实际字高有 12px，所以留白的差异在于一个是 18px（28-10），一个是 16px（28-12），这也是为什么决定决定留白的两个重要因子是「字高」和表格行高，而非「字号」和表格行高，进一步推演，决定界面留白的是「元素视觉高度」和「元素间距」。

论文查阅｜寻找理论证据，谨慎验证

研究表明，低密度认知负荷低，但高密度任务完成率高，用户更喜好

参考资料：论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息，用户需要需要阅读（视觉），思考和理解（认知），需要点击按钮、操作鼠标和打字（行动），在人机工程学中，统称为负荷。即认知（记忆）负荷、视觉负荷、动作负荷，即分别对应用户体验设计的三个层级，信息/视觉/交互。而负荷所花费资源从多到少依次为：认知 > 视觉 > 行动。

认知负荷，举个例子，看了但不一定懂了。你是否有这么一种体验——刷抖音，虽然很多（信息密度小，输出效率低），但可以一直刷下去并且刷很久；而看一门 C4D 教学视频，即使就短短十来分钟（信息密度大，输出效率高），但是却要看上半天。因为刷短视频时，你的输入效率远高于作者的输出效率，而看一门 C4D 教学视频时，你的输入效率远低于作者的输出效率。可是，输出效率是客观的，输入效率是主观的。如果输出效率很高，你可以通过提高自己的输入效率（比如让自己成为 C4D 专家）来跟上作者，从而变强；否则输出效率很低（信息质量低），你的输入效率很高（很专业），信息于你而言都是无效的。

假设负荷总量不变的情况下，那么以上三类场景界面需要对用户负担分配大致如下，官网品宣类需要低认知成本，低视觉负担，视觉要求高，用户才会被吸引过来阅读，甚至酷炫的交互更能增加互动体验而带来的趣味感，比如苹果官网，信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息，而 B 端应用因为是专业使用，首先认知方面随着员工的专业度提高而降低，因此可以通过提高视觉负担，来降低行动负担，进而减少操作用时，当然最佳情况是三个维度能整体降低负担，让总负担降低，就需要更多设计巧思了。

面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中，设计师常用的 Top 3 做法为：【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。

实践阶段-如何设计

通过以上的探索，我们可以确定的是，B 端产品面向专业人员的工作界面设计中，提高屏效可从视觉、交互、信息三个层次进行，视觉层-高密度，即提高屏幕信息密度；交互层-低跳转，通过减少页面跳转、手势与常用操作的距离等；信息层-有效性，通过重组织或辅助信息帮助用户理解，甚至提供帮助手册等以提高用户专业能力。

基于以上的总结，对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，寻找运营机会点。

如下表格经过高屏效策略优化前后对比图，优化前相同维度下不同人群数量的对比需要视线来回跳动比对，而优化后的表格内容，更符合用户看差异场景下分析目的数据查阅，视线锁定相同维度，即可快速比对数值大小。

下面以视觉、交互、信息三个层次解剖设计过程背后的思考。

视觉层｜高密度-克制的留白

眼动理论：研究表明，人眼最小可视视角 0.3 度，水平最大眼动舒适转动区 30度，垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px，水平视野舒适眼动宽 1200px，垂直视野舒适眼动高 2200px。参考资料：论文《基于眼动交互的用户界面设计与研究》

如图，缩小表格行高的同时，目标信息之间的眼动距离随之缩短，在眼动舒适区内看到更多信息，便于信息的高效获取。

交互层｜低跳转-高频信息前置

理论基础：菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型，它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为：T=a+blog2(D/W+1)，W为其中目标的大小；D为到目标的距离；T为移动到目标所用最短时间。参考资料：菲兹定律

表格单元格借助交互状态，增加悬浮出现的信息组件，前置显示目标单元格明细信息，同时通过交互出现的指示器辅助行列信息的获取，高频操作考虑手势位置放置，缩短与操作目标的距离，以提高整体操作效率。

信息层｜有效性-信息重组织

理论基础：交互设计四大策略「组织、删除、隐藏、转移」参考资料：《简约至上》

用户为了对比 A、B 两不同人群在相同维度（白领-有信用卡）下的人数差异，但内容的重组织方式让两数据行需要频繁点击滚动条来查看，根据用户目标，将关联性大的数据放置相邻列（即将要对比的人群放置列头），即可快速查阅，减少眼跳距离。

结语

设计趋势中常见的大字体大留白界面，但在 B 端场景中，面对紧张的工作节奏，时间和注意力变得尤为可贵，相对而言，基于复杂度守恒定律， B 端信息量大且高频访问的产品中，「用得快」要比「看得美」更重要，「高密度」「低跳转」诠释的即是「空间换时间」，少一次点击，少一次跳转，少一份等待，就多一份时间和效率。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务