用户 福特 最终目标 初入行的交互设计师或产品经理通常都会从搭建界面框架开始思考问题，这是一种错误的思考方式，但这也是不可避免必须要做的。如何将这件事变成正确的呢？那需要理解搭建框架之前对更高层面理解的前提下开展界面设计。更多关于五要素的干货：学会「交互设计五要素」，帮你更快Get到设计关键点！B端浪潮下设计师的「尴尬」供应链资源整合是企业发展态势。阅读文章 > 大对数的商业产品产生的必要条件为：用户有需求，企业有利益。所以我们需要明确用户需求与产品目标。首先我们需要用一个经典案例来了解什么是用户目标，什么是用户需求-福特与马的故事。故事开始，假设福特在调研现场，福特跑去到处问起马车客户客户老爷们：“您需要一个什么样的更快的交通工具”。几乎所有人的回答都是“我想要一匹更快的马”，很多人听到这个回答后，纷纷跑去马圈培育质量更好的马匹，来满足客户的需求，此时福特并没有立刻跑向马圈，而是继续往下问；福特：“您为什么需要一匹跑的更快的马”？客户：“可以跑的更快！”福特：“您为什么需要跑的更快？”客户：“这样我可以更早的到达目的地”福特：“所以您需要一匹跑的更快的马的动机是？”客户：“我可以用最短的时间到达目的地”这个案例中，用户的最终目标是“用最短的时间更早的到达目的地”，用户的需求是“一匹跑的更快的马”。用一匹跑的更快的马更快的到达目的地看似毫无问题。接下来我们从诺曼理论到目标的 3 种类型，再到需求的 5 个层次进行分析与拆解，看一下福特是如何创造出世界知名的“福特汽车”。诺曼在《情感化设计》中的提出认知过程中的 3 层理论，主要讨论了对设计的潜在重要性。所谓的 3 层理论是在产品设计的过程中需要解决的 3 个不同层次的认知和情感处理过程，即“本能、行为、反思”，但是诺曼并没有用什么方法系统的把认知模型和情感应用到设计实践或者用户研究中。在后来产品和设计大神们的不断的实践中发现，将这一理论付诸实践的关键在于将 3 种用户目标（体验目标、最终目标、人生目标）相对应的用人物模型的定义过程（用户细分-可用性和用户研究-创建人物角色模型）恰当的描述出来，并建立相对应的人物模型。情感化设计模型与目标的映射关系体验目标对应本能层次；这一层更多的是从用户的本能来说。客户在马圈看到一匹雄壮的、充满肌肉线条的、毛色靓丽的雄性大棕马，首先从视觉上来说，这匹马在客户本能想象中相比于其它马就很出色了，跑起来一定又快又英姿飒爽。当客户忍不住垂涎于马的美色之时按耐不住手欠时摸了一把，摸到了青筋在沉稳有力的跳动，这时客户更加激动了。当听到大棕马鼻孔喷射粗气像行星发动机一样的声音时，断定这就是梦中朝思暮想、千里江陵一日还的汗血宝马。这就体现了本能设计在视觉、触觉、以及听觉上都会出现。再举一个例子；在在炎炎夏日，当你看到超市冰柜上的可乐时，会本能的想到透彻喉咙的冰爽、会咽一口口水，但同时也想到可乐接触喉咙时“呛”人的又爱又恨的感受，这也是本能感受。最终目标对应的是行为层次；这一层要考虑的是行为，当用户牵着亲手钦定的汗血大棕马回到自家马厩的时候幻想的一定是让这位高价买来的大棕马用“最短的时间到达目的地”，跑赢对手节约时间来挣美元。可是幻想很美好，现实很残酷，面对这么好的大棕马忽略了一点—为客户增加了新的任务—“好生喂养”，品相好（期望越高）吃的当然也好，这无疑增加了饲养成本，需要每天按时按量喂上等饲料，按时按量喂水，打扫马厩频率也增加了，搞不好还需要一块优良的草地、修个更加宽敞的马厩才能养好马。促使完成这些任务发生的行为的动机是最终目标（最终目标代表用户使用某个具体产品时执行任务的动机）。若好生喂养过程中出现纰漏，比如大棕马感冒了，势必会受到影响到最终目标的实现，同时也会影响到本能层次的感受。这也说明了行为处理过程会影响本能和反思的过程，因此最终目标会成为决定产品体验较为显著的因素之一。必须满足用户的最终目标，让用户感觉到他们值得为此付出时间和金钱。最终目标内目标/行为/任务关系说明人生目标对应的是反思层次；反思层次看起来“高大上、难以看透”，但这是 3 个层次里最简单的。这一层考虑的是要成为一个什么样的人（这里确实需要升华一下，高大上一点）。在福特与马车的案例中，客户的最终目标/动机是“用最短的时间到达目的地”。此时让福特再代替我们向客户一个问题福特提问：“您想要用最短的时间到达目的地是为什么呢？”用户 1 回答：“我想赶回去给 3 岁的女儿过生日”用户 2 回答：“时间就是金钱，我想节约时间赚更多的钱，变成一个亿万富豪”用户 1 的回答对应的人生目标为“做一个好父亲、好家人”。用户 2 的回答对应的人生目标为“成就自己的抱负”。此时我们发现用户的人生目标来自于用户更深的动机（行为模式/最终目标），而更深层次的动机和行为需要更高层次的系统（广泛的人种学研究和文化建模）来实现。产品设计师要通过更高层次的系统功能、正式的设计概念和品牌战略转化为用户更高层次的人生目标。很明显在最终目标对应的行为层次中，感冒的大棕马达不到最终目标，更不用说达到人生目标了。这也更加说明了最终目标的行为层次会影响到人生目标的反思层次。现在了解到了诺曼的情感化模型及对应的 3 种目标，要谨记，设计产品不仅仅是要帮助用户实现最终目标，还要向用户的人生目标迈进，产品向实现用户的人生前进，为产品赢得的不单单是普通的用户，还有为产品而发烧的忠实用户。留一个问题，如果现在能够穿越回百年前，你化身成为福特，你会实现用户那一层次的目标呢？文章内容来源于对阅读《About face4》、《用户体验 5 要素》、《情感化设计》三本书加结合实际经验的理解。第一次写文章，如有不同观点和见解请包涵，如有错误指出请指正。理性讨论，拒绝争吵。接下来将会按产品五要素由下到上逐步出一些列的文章，欢迎大家关注。下一篇将会写一写知道目标以后如何分析用户需求本篇来源：优设网原文地址：https://www.uisdc.com/five-elements-of-the-product
用户 数据 布局 面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。在 B 端系统中，不同的用户操作着不同的业务流程，面对大量的数据，能快速且准确的找到自己需要的数据，可以明显提升任务完成效率。筛选作为任务节点中的重要媒介工具，设计师如何才能准确全面的匹配场景，先让我们全面的认识一下筛选。更多筛选功能设计方法：B端筛选功能如何设计？4个章节帮你掌握！引言筛选作为一个常用的功能，在产品设计中的应用面是非常广的。阅读文章 > 一、筛选的类型筛选的存在无非就是帮助用户准确、快速的找到目标数据，这个数据可能是单个，也可能是一组。在《信息架构：超越 Web 设计》中，筛选系统与导航系统、标签系统、组织系统被列为信息架构的一部分，因此筛选也会与其他系统有一定的联系，比如状态、类型筛选就需要依赖标签系统。筛选的类型分为输入类筛选、选择器类筛选、平铺类筛选、分页筛选、高级筛选。1. 输入类筛选输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据。输入类筛选从筛选准确性上，可以分为模糊筛选和精准筛选。① 模糊搜索按照用户输入的检索词，筛选出字段中带有该检索词的所有数据。优点：可以筛选出同类数据缺陷：精准度不高② 精准搜索按照用户输入的关键词，仅筛选出整个字段都与筛选词相同的数据。优点：检索精准缺陷：由于过于精准，会考验用户的记忆能力。由于精准搜索的精准性，一个字的偏差，都会造成搜索失败，因此，在正常的设计应用中，模糊搜索的使用频率会更高一些。输入类筛选从筛选形式上，可以分为单标签搜索和多标签可切换搜索③ 单标签单标签搜索只能在输入框中的一个既定范围中搜索。优点：便捷，应用普遍缺陷：范围少，面对复杂数据需要多个组合筛选④ 多标签可切换在一组标签中选择搜索范围优点：便捷，节省空间缺陷：展示不直观；多一步选择标签的操作；不能组合筛选如果空间有限，没有组合搜索的可能性，可以使用多标签可切换；正常情况下，不要剥夺用户使用组合筛选的机会。2. 选择器类筛选选择器类筛选可以是单选或者多选，用户点击选择待选项即可。这类筛选往往是筛选的某类标签或者某组数据，方便用户批量处理。优点：无需准确记忆，适合批量数据缺陷：展现方式不直观，匹配结果的精准度不够此类筛选往往和表单的选择器使用的是同一个组件，而且可以使用第三方的开源库，应用范围比较广，同输入类搜索一样，是最优先被考虑的类型。3. 平铺类筛选平铺类筛选是将所有的待选项铺出来，方便用户直观选择。可以是单选，也可以是多选。优点：待选项平铺，选择方便直观缺陷：占用空间，待选项数量过多的时候，可能会存在折行或隐藏，没有关键词搜索，选择效率变低平铺类筛选大多应用在电商、招聘等网站；如果筛选维度很少，空间充足且待选项的数量在 5 个左右，可以考虑在表格、列表页面使用平铺类筛选。4. 分页筛选分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来，不一样的是，分页 Tabs 的视觉级别更高一些，相当于标题存在，并且不支持重置。有一些平台也称之为分组。优点：帮助用户提前做了一轮筛选；待选项平铺，选择方便直观缺陷：占用空间，需要考虑待选项的数量和页面空间的适配分页 Tabs 对用户来讲无疑是便捷的数据筛选，但前提是需要保证大多数用户筛选维度的共通性，否则就会对部分用户造成困扰，或者提供用户自定义的机会。5. 高级筛选高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加等属性。优点：可以满足的用户应用场景最多缺陷：操作比较繁琐二、筛选的布局由于筛选组件的数量和业务应用的场景有所不同，所形成的布局模式会有所差异，大致会分上下布局、侧边布局、浮层布局、表头布局。1. 上下布局上下布局是值筛选条件位于数据的顶部优点：展示直观，筛选条件和数据关系联系更紧密；横向空间上可以展示更多的数据缺陷：数量多的话会压缩纵向空间上下布局是当前用户使用方式中最常用的方式，如果系统给的筛选条件过多，需要对筛选条件进行分层，低频类的需要收起。2. 侧边布局侧边布局是指将筛选条件列在数据的左侧或者右侧。优点：可以展示更多的筛选条件缺陷：宽度大的话会压缩横向空间；从视线覆盖面积来讲，侧边布局用户对照查看数据的耗时会更长使用侧边布局的时候，需要考量当前内容区数据的字段展示量如何。因为一般情况下，侧边会存在导航，再加侧边筛选，数据压缩比较严重。还要看一下当前用户的使用习惯如何，对侧边布局的接受度。3. 浮层布局浮层布局一般会有抽屉、对话框、悬浮框。优点：节省空间，能容纳更多的筛选条件缺陷：用户无法快捷的对比筛选值和筛选数据；具有一定的打断性，特别是对话框和抽屉；用户再次修改比较麻烦浮层布局一般在空间有限，又有筛选需求的时候使用；使用过程中需要标记当前有筛选值，最好能将筛选值单独显示出来，方便用户数据对比和清除重置。4. 表头布局表头布局是将筛选条件的图标固定在表格表头的右侧，用户点击后筛选优点：筛选流程更直观缺陷：用户无法快捷的对比筛选值和筛选数据；表头的空间有限，如果是横向滚动，隐藏后不容易发现一般不推荐优先使用表头筛选；像个别场景，空间有限，使用过程要标记当前有筛选值的状态。如果为方便用户筛选，又没必要单独给界面加一个选择器类筛选，可以尝试使用排序代替筛选，让数据以一定的顺序进行分组。比如按照优先级：高、中、低排序，倒序按照高、中、低的顺序排列，正序反之，可以满足大部分用户的查询需求。三、筛选的触发方式1. 实时触发在输入或者选择筛选值的时候，数据实时匹配。优点：筛选效率高缺陷：比较考验系统的稳定性；对于想使用精准搜索范围的场景，会延长整体的加载时间与手动触发相比，更推荐实时触发，但是要考虑系统的稳定性，在答应用户之前先和研发团队预研方式的可行性。2. 手动触发在输入或者选择筛选值的之后，需要手动点一下搜索或者查询按钮。优点：稳定性更高缺陷：多一步操作，效率低四、帮助用户1. 帮助用户做收纳无论使用哪种布局或者筛选类型，都会遇到筛选条件数量很多的情况。如果当下不能轻易改变用户习惯或者优化成本太高，可以试试以下三种方式：对筛选条件进行分层，将高频的筛选条件放在外面，低频的收起，用户用到的时候再展开。一些复杂 B 端系统，筛选条件是根据用户自定的数据生成，因此数量和内容不可控，多角色场景下使用习惯也不一致，这时可以给几个系统常用筛选条件，让用户可以自定义选择。考虑极限情况，如果用户确实添加了很多的筛选条件，要考虑页面内局部滚动。2. 帮用户标记筛选状态如果在使用可收起筛选、浮层筛选、表头筛选等方式的时候，一定要为用户标记当前有筛选值的状态。如果不标记，用户在筛选后没有重置，离开页面再回来的时候容易遗忘当前已经筛选过。或者将选择后的筛选值外显，在数据顶部放置一份，方便用户对比和清除。3. 帮助用户记住筛选值用户筛选过后，点击数据查看详情，如果详情是一个单独页面，往往都会刷新，再返回的时候，筛选条件已经清空了，如果用户需要多次查看该筛选值下的数据，需要多次选择。所以，用户从下级页面返回上级页面的时候，需要帮用户记住筛选值。至于是研发记住，还是优化设计表达避免刷新，要具体场景具体分析。筛选器的使用有的平台也会叫过滤器、视图等，名称有出入，但是功能大体是一致的。一般在筛选条件数量和使用角色都比较多的业务场景中使用。系统会默认给几个筛选器：全部、我负责的、我创建的等。这是从另外一个维度帮助用户记住：将常用的带有筛选值的筛选条件作为一个筛选组保存起来，方便用户下次进来的时候直接选择使用，方式便捷迅速。以下是几种筛选器在页面中的常见表现形式：4. 帮助用户更容易到达在有筛选条件的表格页面，应该确保顶部筛选条件和操作栏固定。如果数据太多，滚动会隐藏筛选区，应该只允许表格内容区滚动，方便用户对比筛选值和筛选数据。另外，如果用户要修改筛选值，这样的话不需要再回滚，容易再次触及。当然，除了以上设计复盘，还可以对筛选组件做一些创新设计，有机会再和大家讨论。业务场景的不同会导致设计师的表现也会有所不同，上述是我对最近工作的复盘，如果还有其他的筛选内容，欢迎大家再补充和交流～本篇来源：优设网原文地址：https://www.uisdc.com/filter-function-design-3
用户 场景 地图 在日常的工作中，大家或多或少都听过/用过用户体验地图，简单的说，用户体验地图是梳理用户场景和体验问题的一种工具，那在用户研究中，什么时候/阶段适合用体验地图？使用体验地图的价值是什么？体验地图又是如何构建的呢？该篇文章将会结合两个具体案例为大家逐一解答，文章分为上篇和下篇，上篇主要是介绍用户体验地图的定义、使用场景与价值，下篇会拆解用户体验地图的构成与构建流程。 文章主要以我的经验为主，不是教科书和绝对，希望能带给大家答案/启发～也欢迎互相交流～“用户体验地图（上篇）概念介绍与使用价值”中主要为大家介绍了用户体验地图的定义界定、使用价值和适用场景，下篇我们进入到“实操”阶段，具体看一下用户体验地图的构成、各部分的意义、以及是如何一步步构建出来的～还没有看过上篇可先看，先理解概念再进行实操～用户体验地图设计指南（上）：概念介绍与使用价值在日常的工作中，大家或多或少都听过/用过用户体验地图，简单的说，用户体验地图是梳理用户场景和体验问题的一种工具，那在用户研究中，什么时候/阶段适合用体验地图？阅读文章 > 一、用户体验地图包含哪些内容？如果问你体验地图包含哪些内容你会如何回答？用户画像、用户场景、情绪体验、用户痛点等……综合来看，体验地图包含一部分必要内容：即场景、行为、痛点/需求、机会点，也包含一部分可灵活使用的内容：用户画像、用户阶段、触点、情绪体验、用户诉求、标杆，灵活部分我们可以根据项目需要将各有利于我们理解用户的内容加到体验地图里。另外从信息来源的角度看，地图中包含的内容一部分来源于调查（即用户调研），一部分来源于洞察，也就是我们拿到用户调研信息进行梳理后，由用户研究员、设计师、产品等不同角色洞察提炼的内容。结合上篇中的全包用户体验地图具体拆解一下各部分构成的内容与意义：阶段：用户完成目标大致分成几个阶段，能够更有条理性的去拆分场景、防止丢场景场景：用户完成目标经历的各个场景，在阶段下进一步拆分，需要注意：1）是场景，不是我们的产品功能模块（有可能一个场景涉及到多个功能模块） ；2）不一定是按从早到晚的时间顺序发生的，场景间是前后、转移的关系（比如咨询沟通、量房、出设计是用户在前期确定公司时会多次经历的场景，而不是一次就确定下来）行为：与场景对应，描述的是该场景下用户是怎么做的，用于理解用户行为的原因、问题点。需要注意：1）关注动作是否有一定顺序，有顺序按照顺序描述；2）描述出用户接触到了什么触点（产品、渠道、人等）触点：用户在完成目标过程中接触了什么、与什么发生了交互，一方面能够得到目前满足需求的触点是什么、另一方面之后我们的机会点也可以拆到触点中去落地。触点可以分为移动/数字触点、物理触点、人际触点三类，我们在互联网产品项目中可重点关注移动触点，即手机、电脑、不同的 app 等情绪：用户在各场景下的体验情绪，让用户体验与业务建立更强烈的“共鸣”。而对情绪的描述可以是感性的描述（如开心、迷茫、吃惊、担忧，引发反思“我们的产品为什么让用户有这种感受？”），也可以是高低的描述，采用类似于可用性问题优先级计算或用户评分等方式将用户的情绪高低量化绘制曲线。标杆：若存在标杆产品/服务可对比，可对应看标杆做了什么解决的用户的什么痛点、对用户情绪拉升的影响。痛点/需求：描述用户的痛点或需求，从行为顺序上、在各触点上梳理清晰，让归纳有依据。诉求：在某一场景下或多个场景下用户的核心诉求、想取得的核心价值点是什么，从行为、痛点/需求中提炼洞察而来，帮助我们在设计机会中抓住“核心目标”（比如我们提炼出用户的核心诉求是“省心”，那围绕省心我们可以做哪些满足用户？通过诉求扩大我们的机会点思考范围）机会点：结合用户痛点/需求、标杆、诉求，对于我们的启发。可以结合触点或不同利益方区分机会点的针对性。二、用户体验地图的构建流程如果把用户体验地图当作一个调研方法，它的构建分为 4 步，分别是明确目标与用户、确认场景、开展调研、洞察绘制。但在最初的时候我提到用户体验地图是方法也是工具，如果已经有了足够的调研素材可以直接进入第 4 步洞察绘制。接下来以 XX 平台的商家直播体验地图为例讲述构建流程项目背景：XX 平台为了给商家提供更好的直播带货体验，在商家后台上线了直播中控台功能，但目前版本仅是结合经验与竞品做法聚合了“我们认为商家需要的直播相关的功能”，并不确定是否命中商家的直播需求、且想明确迭代方向，因此开展了该项目。明确目标与用户确认项目目标是梳理用户体验地图：中控台已有部分功能，在调研中既要关注用户对已有功能的体验情况，也要关注用户的潜在需求，挖掘更多的产品机会点，因此从实际直播场景入手，梳理直播体验地图理解用户真实场景与需求；区分目标用户群体差异：考虑不同使用经验与不同商家类型的差异，一方面寻找老用户与新用户，另一方面需覆盖不同类型与不同品类的商家，因此需包含作者型、商家型直播达人，包含服饰、母婴、食品、珠宝等不同经营类目的商家。确认场景明确目标用户后，需先从内部梳理用户场景，场景将作为研究大纲主线，辅助撰写访谈提纲，在调研中更有条理性的去访谈、观察、验证用户的使用流程（需要注意梳理的是用户场景、而不是产品模块）。如果这个阶段场景不全/顺序不对没关系，我们在后续调研中动态调整。（比如图中绿色字场景均是调研中增加）梳理方法：走查产品功能、模拟用户使用场景梳理技巧：从大到小—广度优先，其次深度（比如前面提到的先阶段再场景）开展调研调研方法选择：获取用户体验信息的方法不仅是用户访谈，在访谈的基础上叠加观察、共创，能更深入的去挖掘；同时还可以加入情绪打分衡量用户在不同场景下的情绪高低。访谈+观察：更适合有产品载体的体验过程，如进行已有产品改进、0.5-1 产品创新时。让用户在真实场景中操作产品/体验服务，观察用户行为，鼓励用户随时分享自己的感受（遇到的问题、觉得好的地方等），在用户阶段性完成几个场景或完全结束后，进行深入访谈；访谈+共创：更适合聚合多触点的体验过程或更偏服务的体验过程，如进行产品增长研究、0-1 产品创新时。将多个同类用户聚在一起，在过程中引入大白纸、便利贴、问题提示卡、刺激物等工具，互相激发、提高讨论效率；提纲设计与执行：遵循两个原则：一是“场景的”，在整个访谈中多问用户怎么做的、为什么这样做；二是“总分总的”，由整体流程深入到各场景中后再看整体（如先让用户回忆整个流程、关注用户的核心场景，再分场景询问用户的行为、原因、痛点与需求，最后统一回忆确认、查漏补缺）洞察绘制在调研结束后，就正式进入到了信息整体分析阶段了～在信息整理前需要明确两个问题～需要做几张图？看不同类型用户的场景差异与需求差异，场景不同的用户必须分开绘制，若场景相似、行为也相似，仅是需求有差异，可以在一张图中单独指出 ；场景主线怎么确定？场景并不是“自然时间顺序（从早到晚）”，是“行为顺序”，且并不是所有行为都是线性顺序，可以是局部线性、前后循环。目标是让场景全面且有组织逻辑（如直播体验地图，直播前的设置优惠、投放广告并没有很明确的前后发生顺序，但需保证是属于直播前的；直播中的多个场景是重复/交替出现，不需要写多遍）弄清楚几张图、场景主线之后就可以正式整理信息了～正式绘制包含 5 个步骤：① 创建用户角色当不同用户群体场景、需求差异较大时，需分角色理解用户并创建用户角色/画像。用户角色主要包括用户特征、产品使用习惯、产品目标：用户特征：对需求有影响的特征，如在工作中的角色（运营、客服、管理等），如较突出的人口学特征（老人、宝妈等）产品使用习惯：使用产品的场景、频率、主要使用的功能产品目标：使用产品主要达成的目标/主要诉求需要注意：用户角色并不是一个被访者形成的，而是抽离同类被访者的共性特征虚拟出的角色（可以以一个很典型的人为主，补充其他特征）② 体验流程梳理建议先使用表格梳理体验地图，按照格式列好横轴与纵轴维度，以文字的形式汇总同一类用户的调研信息到对应位置，然后处理每个位置的重复信息、合并同样的行为、需求、痛点，向上总结。而且有时候输出表格版本的用户体验地图也能够满足内部需要了～需要注意：尽量保留“原汁原味”的信息，比如用户的原声表达、有多少用户有这样的需求等，让信息保持丰满、建立同理心。③ 需求评级判断体验地图中需求的高低可以从用户角度和业务角度去综合判断：用户角度： 一是需求对用户任务的影响度，即需求是否在体验的核心链路上、用户是否有其他方式满足该需求，在核心链路且无法通过其他方式满足的需求优先级高；二是需求频次：该需求被提到的频次。（可参考可用性问题评级标准）；业务角度：满足该需求对产品目标的影响，比如产品目标是提升商家 GMV，直接影响 GMV 的需求优先级高。④ 机会点洞察调研中思考的机会点：主参与调研过程的人可以先产出自己思考的机会点，但可能会存在难落地、局限性；与业务不同角色工作坊，共创机会点：组织产品、运营、设计不同角色，用研将调研发现作为输入，帮大家理解用户需求，利用体验地图的框架、便利贴等工具共同讨论机会点，更加全面、可落地。⑤ 可视化一般情况下表格版本的用户体验地图可供内部/小范围内的结论同步与分享，也可以进一步可视化便于没有参加构建的同学能快速、重点获取主要信息，也便于更大范围的分享与沉淀。这里为大家提供 2 个来源于网络的用户体验地图可视化：看完上下篇，你觉得你能自己开始做用户体验地图了吗？可以操练起来试一试～希望对你有帮助，如果有问题可以随时交流最后我想说，用户体验地图是一种方法/工具，目的是更好地理解用户行为与需求，因此有时候项目发起的目的并不是梳理用户体验地图，但也可以基于调研发现去梳理，做为呈现调研结果的工具，更好地理解用户。而且对用户体验地图的应用，是可以去创新、去发挥的，结合我们不同的调研方法、其他工具，融入到体验地图中，未尝不可？欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/user-experience-map-4
氛围 兔年 用户 随着开工响声结束了兔年春节，相信兔年都会给我们带来好运和惊喜，让我们一起来努力和期待吧！在这个移动互联网时代中，相信手机也是伴随我们跨年的物件，而各类应用软件也为我们的兔年春节增添了许多乐趣。作为 UI 设计师，我们通过自己的创意让用户感受到不一样的兔年氛围，下面黑马哥带大家一起回忆一下。通过一些 APP 线上案例分析，看看 UI 设计师是如何营造兔年春节氛围感的。更多氛围感设计案例：如何营造氛围感？来看QQ游戏中心的实战案例！QQ 游戏中心作为服务于 QQ 玩家的平台，致力于为游戏玩家发现好游戏和提供游戏相关服务，如何在为玩家提供好游戏推荐同时，为他们提供好游戏相关服务，是我们需要探寻的设计平衡点。阅读文章 > 一、应用图标小空间里的氛围感应用图标的氛围感是提高用户打开产品的关键，作为春节氛围感的营造来说，是最容易让用户感知到的。在这个方寸内的小空间里面，也是设计师发挥创意脑洞的形式。通过兔年春节发生变化的一些应用软件分析，众多案例都在配色、文案、图形营造等方面进行设计发挥，也有结合 IP 形象装扮和营销活动主题等形式，增强用户对产品的情感化认知。二、顶部视觉区域背景营造作为应用软件的主界面来说，顶部视觉区域也是设计师发挥的一方空间。在氛围感的表现中也是非常利于发挥的，经常在一些节日庆典和主题活动时进行设计表现。结合春节元素和喜感的红色氛围营造，给软件带来了新春情感化，作为兔年春节来说，小兔子的元素也会被充分展现。除了兔子元素以外，也有运用灯笼、烟花、祥云等元素点缀，达到营造背景氛围的目的。三、营造图标设计氛围春节期间在图标设计上面营造氛围感是最为常见的，也最容易吸引用户的关注度。重点在金刚区图标和底部标签栏图标设计进行发挥，结合配色、节日元素和造型等方面进行设计，达到营造氛围的目的。图标风格多样和灵活多变的特性，无论是结合传统文化还是其他多样化表达，都非常利于设计发挥。除了在春节氛围中便于发挥以外，在其他主题活动中也是重点表达的形式。四、异形广告中的氛围和元素异形广告相较于中规中矩的矩形束缚来说融合性更强，更容易让界面上下的内容过度更自然。近些年异形广告穿插在界面中非常普遍，特别是在营造氛围层面效果也是十分突出的。由于特殊造型的设计发挥，便于设计师结合各类元素，营造贴合的界面氛围和强化视觉感。五、氛围浓厚的闪屏广告闪屏广告算是春节期间最常见的表达方式，无论是情感化的闪屏设计，还是结合营销广告表达，这里都是最容易出现在用户视野中的。闪屏广告的主题营造非常多，众多产品都会结合，创意发挥也是层出不穷。六、引导页中的风格氛围化引导页相对来说曝光度会比较低一些，大部分情况还是初次使用或者更新时出现，如果恰逢春节期间发生版本迭代也可以尝试营造氛围。可以在元素造型不变的情况下改变配色风格，也能起到营造氛围的作用。七、弹窗设计的氛围点缀在用户浏览内容或者操作功能时，弹窗可以辅助操作和理解，也可以作为温馨提示或者信息传递等。在春节期间为了渲染氛围，也会结合主题元素进行氛围点缀，带给用户更加情感化的感官体验。八、异形弹窗营造新春氛围在一些营销活动的配合中，弹窗通常会打破边界的束缚，异形弹窗更能吸引用户关注。也能更容易结合主题元素营造氛围感，特殊的造型更利于设计发挥，界面内的融合度也相对较高。通常结合兔子 IP 形象、红包和春节元素等，以质感风和 3D 建模形式表达居多。九、丰富界面背景氛围感丰富整个界面背景相对较少，也有产品会在部分界面或者界面局部卡片等场景中进行表现。氛围感的营造可以带给用户有温度的体验感，也能将春节氛围重点突出。十、沉浸式体验的活动氛围感沉浸式的体验能够吸引用户的参与感，比如春节期间的红包雨，融入到整个界面的设计中，以趣味性的形式满足用户心理。在不隔断与界面之间的联系，降低活动对用户的干扰，进而提高氛围感和参与度。比如高德地图在春节期间设计了放烟花的体验，用户可以在定位的任何地方点击燃放烟花，新添春节的氛围。将这一传统文化搬到了线上云端，也是提高体验度的不错形式。十一、营造氛围的专题页设计春节氛围感在各类营销活动中表现度是最高的，随着近些年新的技术和视觉表现力的提升，在视觉感的强化层面也是十分出色。无论是运用三维化还是插画风，带来的视觉张力都是非常棒的，今年各大产品呈现出来的设计感视觉表现力都非常不错。十二、互动性体验的活动设计随着视觉表现力的提升，提高用户对于活动的参与度要往游戏化和互动性等方面探索。比如抖音在兔年春节期间的活动设计，游戏化的互动体验增加了活动的娱乐性，用户的参与度也是可想而知的。也有通过自定义角色装扮的形式带来互动性的玩法，在氛围感十足的场景中送祝福，无论是娱乐性还是感官体验层面都非常不错。小结本文主要是对春节期间的一些设计案例进行了回忆，体验、分析和总结了一些优秀的设计点，希望可以作为日后灵感的来源。描述属于主观意识，不足之处大家选择性吸收，我们互相进步。本篇来源：优设网原文地址：https://www.uisdc.com/create-festive-atmosphere
页面 用户 信息 前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。有的时候流程和业务都不在话下，但是到了具体的页面设计就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了 60%的冲动购物。宜家的动线设计将用户与各类商品区进行了有效的串联，在刻意设计的路线上，商家填满了各类家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。从动线展示图中我们可以看到，一条“清晰明了”的曲线引导用户前进，同时还会提供一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。在整个宜家商场的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小地图、地面标识、醒目的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。这与我们的页面设计有着异曲同工之妙，将商场的商品陈设和页面中的信息组织放在一起我们可以发现，都在向消费者或用户传递一种建议和方向。所以，在页面设计我更愿意称之为页面框架或者页面信息设计，就是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上就是在与用户沟通交流，使得页面易学易用。有一个成语是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道就是设计师所搭建的页面框架。经过设计师的合理分析和设计，使用看不见的设计手段和看得见的表现方式，给予用户明确的“提示”，帮助用户迅速的完成任务。往期干货：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 如何进行页面框架设计前面对页面框架设计有了一定的了解，那么怎样才能设计出好的页面，应该运用什么方法，采用什么流程。在《信息架构-超越 Web 设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合方式，为用户创造他们所熟悉的环境。根据日常的工作经历，将“如何做”这个过程分成了以下四个步骤。1. 了解业务在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。在辛向阳的交互设计五要素中强调了，交互设计的对象是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，最后达成了他的目标。那么如何让用户产生更有利于目标实现的行为，在设计之前先了解一下这些业务要素。① 用户简单来说就是使用我们平台的人。在一些 B 端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。管理者：我希望能够看到团队中所有人的工作进度。普通员工：我希望能快速的完成自己的任务。这两种角色的诉求都是用户需求，分析阶段需要做好用户分层，在后面的目标拆解中就可以获得更明确的方向。② 场景对于用户提出的反馈或者意见，要切实考虑应用场景，辨别用户提供的是需求还是方案。比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台就是这么做的。接到这个反馈，我的第一反应就是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有时间做这个。找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件需要本地保存后才能上传，很不方便。我向她提供了我们目前平台要实施的方案：1、可以直接在描述的富文本中编辑保存；2、可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后，他表示这两个方案都可以，不需要页面的随意上传了。所以在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。具体如何去了解我们的用户场景，除了业务或者产品经理的阐述和解释，另外我们在前期进行竞品分析的时候也是不错的时机，因为在相似业务场景中，不同平台之间的表现方式不会出现太大差异，相当于设计思考前置，由方案倒推了需求。不过还是建议以具体业务具体分析为主，毕竟每个公司的工作方式是不同的。③ 目标对于设计师而言，目标就是这次设计的目的是什么、解决什么问题、创造什么价值，利用某些设计策略手段，对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务，忠实于用户。一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。业务提出了今年我们要在去年的基础上，提升用户满意度 15%那么设计就应该去分析低满意度背后的原因是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件使用等问题。当我们确定好影响满意度的因素之后，可以对其中一个因素提出设计目标：缩短用户完成某个任务的时间 20%，以此来聚焦用户操作流程的低效问题。设计目标是在了解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为具体的设计要素的过程。④ 媒介用户产生交互行为的最大媒介就是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。而组件并非是简单的平铺，而是要做的设计目标的指导下，选择合适的组件和表现方式，使用户看到页面时，快速的产生恰当的行为。⑤ 行为在界面中中用户主要的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑怎样的触发形式能使用户最低成本、最顺畅地完成行为。当然行为并不是孤立存在的，它需要多个动作和媒介，以及视觉行动等共同构成。而如何让用户产生恰当的行为，需要功能信息显性化的设计。2. 组织信息组织信息是页面设计的重要组成部分，我们看到的页面信息都是整齐的，每个整齐的背后又暗含了特殊的组织关系。对于业务分析或者需求文档所得到的业务信息需要设计师进行下一步的精加工，首先要了解当前所处页面的主要功能是什么，其次是明确功能信息并进行相应的分析，获得可以搬运罗列的功能块。《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理方式。① 明确信息通过业务了解，明确当前页面将要进行哪些操作或者应该具备哪些功能点。以上图所展示的简单需求为例。从当前页面中我们可以看到，这是一个任务管理的模块页面。在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。而这些信息的来源就是上面我们分析的业务场景，这只是经过整理之后的。② 罗列信息明确了业务信息之后，相对应的我们要将我们页面布局所需要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。对于刚才的信息我们可以简单的罗列如下：创建 A、创建 B、创建 C、修改、删除、标题、筛选状态、关键词筛选、数据列表③ 导入观点，确定关系确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给相关信息找到恰当的位置。以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。可以分为三类：操作、筛选和数据展示。如果我们对个别的信息再进行赋予观点，还能出现新的关系。如果从业务使用频率进行观点导入，那么任务 A、B、C 的使用频率依次降低，最后可以确定的优先级关系就是创建 A>B>C。在任务页面中，创建类的操作优先级要明显高于编辑类，所以“创建”>“编辑”。操作和筛选作为数据产生和查找的工具，需要放在更显眼的位置以更容易被发现。以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采用相应的策略。通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采取相对应的设计方式。针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的使用。当然组织信息的最后产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。组织信息是继了解业务之后的信息处理和清洗的步骤，也是业务场景以及设计目标的应用，可以为后面页面布局提供更有针对性的建议。另外，我们还可以了解一些常规的信息组织方式。④ 常见的组织方式常见的组织方式可以分为精确分类和模糊分类。精确分类将信息分成定义明确和互斥的区域，采取的是客观态度。如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。比如 App 中的城市选择，就是采取的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。模糊分类将信息分成不精确定义的种类，采取的是主观态度。受困于人的主观性和分类标准的模糊性，因此很难设计和维护。但是在一些场景中，模糊分类却更重要和有用。主题、任务、受众、隐喻导向等属于模糊分类。上面操作按钮的分类就是采用了任务导向，将按钮分成了创建和编辑两个部分。京东商城的左侧商品分类采用的就是模糊分类。混合方案是在 B 端产品中常见的方式，能灵活的处理页面信息，应对不同用户和信息的场景差异。在 Ant design 的典型页面中，左侧菜单采用了模糊分类（主题），而表格信息采用的是精准分类（时间倒序）。3. 组件选择组件的选择是信息可视化的第一步，是为信息寻找相应容器载体的过程。① 导航导航存在的作用是任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式。常见的导航可分为：全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。返回导航：常见的组件有面包屑、返回按钮等。友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。其他导航：常见的有步骤条、分页器等。② 标签标签通常是向用户显示组织系统和导航系统最明显的方式，例如全站导航系统相匹配的文字标签：主页、搜索等。标签分文字标签和图形标签：文字标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的方式，所以文字标签的选择要常见并且易于理解，选择行业中的通用用法。比如在协同工具的领域，一些最主要业务单元的命名，无外乎项目、需求、任务、缺陷、迭代等，即使是新出现的平台，也会默认去遵循这个行业命名。因为在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教育的成本，降低平台的使用效率。图形标签在页面设计中，作为文字标签的补充，会更形象的传达信息。主要应用的地方的是图标。图形的使用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考成本。在 Iconfont 上搜索“返回”，检索的结果都是相似的箭头，即使有设计师会做一些样式调整，但是都离不开箭头这个符号，因为这已经形成了深刻的用户心智。还有图文类的软件，我们可以看到他们上面展示的文字和标签都是相似的，大家都在做一些微调，但是都在遵循最初 Office 给用户形成的符号认知。所以针对新的平台产品，除了调研用户对标签的使用习惯之外，还可以参考竞品的使用现状，这属于行业的隐形共享资源。③ 搜索搜索系统是用户快速寻找信息的工具，搜索系统的使用要根据页面信息的内容量和场景要求进行配置选择。常见的组件可以分为：输入类筛选：输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据；选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直观选择；分页筛选：分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来；高级筛选：高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加。具体的筛选类型的特点和使用场景，已经在上次的文章中有所阐述，详情可点击查看：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 以上是阐述了对页面结构设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的使用说明，这里不再描述。4. 页面布局页面布局是页面设计的最后一步，是功能信息布局的关键，是为用户搭建易于发现的流程节点。① 选载体首先根据当前的业务的场景特点，先选择信息的承载方式。目前有三种方式：页面、对话框、抽屉页面：信息承载量最大，适合信息浏览、数量级较大的创建和展示；对话框：信息承载量小于页面，流程中断性较强，适合轻量级的信息创建、处理和展示；抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。在具体的使用过程中：如果信息量较大，有组合方式比较复杂的信息创建和展示，考虑使用页面；如果信息与触发页面有较强的关联性，考虑使用抽屉；如果信息与触发页面有较弱的关联性，需要聚焦当前任务，考虑使用对话框或页面。② 分区域在确定好使用的承载方式之后，要对基本的大块信息区域进行划分。首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。因此要放在非常显眼且稳定的地方。以一开始展示的需求页面为例，根据 F 型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。在大厂的典型页面中我们也可以看到相应的实践。顶部和左侧相比，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更容易发现的固定位置，根据 F 模型，放在信息展示区的顶部。这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。按照本文的阐述，选载体和分区域略显啰嗦，在实际的工作中，往往导航等框架组件的选择与分区域同时进行，所以，我们一般可以从以下方面迅速开始：如果是老平台，只是做部分功能扩展，需要按照原来的页面框架设计进行新的功能设计，保持界面的一致性。如果是新的页面，可以参考竞品的页面，因为他们的处理方式已经经过市场和用户的检验，具有一定的可靠性。参考各大厂规范的典型页面，这些页面是他们内部设计师经过多次讨论才上线对外，应用场景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟悉。3. 调布局在划分好区域之后，需要对页面中的组件布局进行调整。比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了填充和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据使用频率高低进行相应的排序。同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空白，可以将筛选类组件右对齐。在 B 端产品中常见的表单页面中，根据 Ant design 的复杂度模型，从页面信息的复杂度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更容易理解和查找的内容模块布局。其中步骤分组一般用在创建页面，Tab 分组一般用在展示页面。在具体的组件布局中，还需要考虑组件的对齐方式、尺寸、位置等，这些都需要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会发现做左对齐的方式比较常见，因为在一屏内它的信息承载量是最大的，屏效比最高。4. 建议① 设计理论的应用设计理论和原则是前人在实践的基础上总结出来的规律和方法，虽然设计趋势会发生变化，但是信息的传递原理短期内是相对稳定的。通过理论的应用，引导用户关注页面架构的焦点，就可以达到信息传递的目的。1）视觉动线理论F 型视觉动线模型是尼尔森于 2006 年提出的，模型中指出，用户常用习惯方式是：扫描。在信息浏览过程中，遵循最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的 F 型。Z 型视觉动线模型也是尼尔森对用户的浏览习惯进行研究后得出的结论，一般会用在门户类、文字类网站，Z 布局应用很简单，将重要的信息元素放到 Z 形上面，用户扫描过程中会沿着这条路径获取信息。但是 Z 形也有弱点，用户很容易会受其他显眼的元素吸引，所以在布局的时候，要控制好这些元素。2）交互设计四策略删除将产品中可有可无或者没有使用频率的功能删除，使用户能聚焦在核心流程上，减少信息干扰和产品维护成本。在具体的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种方式即可，叠加使用反而耗费产品的简洁感，给用户增加视觉负担。分类面对种类和数量众多的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。刚才上面的操作关系就是分类的一种，面对一一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的一致性。隐藏将高频的功能和信息适时适地的展示，其他的则进行合理隐藏，也是为了页面聚焦，减少视觉负担，保持页面简洁。像表格中的操作按钮，一般情况下都会将用户将会使用的两个高频按钮放在外面，其他的放在更多中；另外，按钮的使用还有一定的引导性，比如从平台角度讲，希望用户的数据越来越多，所以不是很希望用户删除或注销，所以这类按钮都会放在架构设计的末端。转移一般情况下是将复杂进行转移，将用户的重复或复杂操作，交给后台处理，增加任务处理效率。3）格式塔心理学格式塔心理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉倾向，从而快速的辨别。在这里主要说一下这四个原则：接近性原则：在人们的视觉感受中，会习惯于将彼此接近的元素看成一个整体。元素之间的距离越小，说明彼此的关系越近，当然，这个原则也是反过来用，如果想让人感受到两个元素不是一个整体或类别，那么把他们的距离拉大即可。购物 APP 的卡片浏览模式，图片下的标签与图片的距离差异，可以让人轻易的区分出，图片和标签的整体关系。我们在划分区域的时候，一般内容区中导航区、数据展示和操作可以通过距离来划分，使页面归类感更强，提高信息获取效率。相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量众多的元素，可以根据样式分成若干组合。比如形状、大小、颜色、方向等都是视觉判断的维度。与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。在美团 APP 的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。闭合性原则：人们的视觉会主动将不完整的图形补全，形成一个完整的整体。人类的感知是完整的、闭合的。IBM 的 logo 是闭合原则应用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母 IBM。主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素往往会被人们认为是主体，会将底部元素当作背景。比如对话框的使用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户传递信息。2. 遵循用户习惯在产品调研前期，我们需要对用户习惯有全面的认识，比如当前用户日常常用的软件是什么，基本的工作流程，具有什么业务习惯。这些采集信息将会在具体的页面布局中给我们带来非常大的指导作用。如果说设计之初对用户是未知的或者刻意差异化，那么用户使用和理解平台有可能会带来额外的成本。遵循用户习惯，简单来说，就是让用户一眼就能知道平台应该怎么用，不需要思考就能理解平台所提供图形和语言。当然，对于一些复杂的流程，还需要建立恰当的帮助系统。这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的斟酌和考虑，对前面的一些内容再做出调整，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情况快速实践的，并没有标准答案。以上是作者自己根据日常的工作经历复盘整理，如果有其他的补充分享，欢迎一起交流。参考：https://ant.design/docs/spec/form-page-cnhttps://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeawhttps://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ本篇来源：优设网原文地址：https://www.uisdc.com/page-design
用户 社交 产品 一、前言在设计工作中，竞品分析是很常见的一种调研方式，多看多体验产品可以帮我们拓宽更多的设计思路和眼界，而不仅仅是靠凭空想象和“我感觉是这样…”来做判断搞方案，本文简单分享自己在体验产品过程中的理解和思考。更多产品细节：10个产品细节剖析，看看高手是如何做设计的！作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。阅读文章 > 二、社交产品赛道此次分享聚焦在陌生人社交赛道，围绕“发现-连接-破冰”的陌生人引力公式来拆解分析一些社交 app 是以怎样的方案来帮助用户完成这个社交行为链。（来自 ISUX 发布过的陌生人引力公式）1. 探探：上传照片场景化使用场景：探探以颜值社交为核心，主要玩法是刷卡式社交，比较依赖于用户照片，所以在整个产品体验流程中都会不时的引导用户上传照片这一行为；例如在浏览照片、编辑资料、特权奖励的流程中都采取了不同方式进行引导。设计思考：探探将上传照片的场景具像化，在编辑资料的照片模块，使用最好看的旅行照、独一无二的才艺、我的宠物和生活照等文案，这样的设计可以引导用户上传不同类型的照片来丰富个人画像和人设，建立吸引力，以及用户之间的共同点和联系；还能暗示一些不好意思或不想上传人像自拍照的用户上传一些生活照，丰富产品的用户照片池。2. 探探：资料百分比完成度使用场景：在资料编辑界面，探探将待完善的个人资料信息分模块标明完成度百分比，奖励用户完成 100%时可以提升曝光。设计思考：这种完成度百分比的方式通常在一些电商运营活动中会出现，探探把这种百分比的方式运用到资料编辑的不同信息模块下，这样做可以分散用户完善资料的压力（就像大目标拆成小目标一样，小目标更容易去实现和行动）3. CP：标签生成个人介绍动态使用场景：在新用户初次进入 CP 时，会让用户选择一些个人标签，选择完成后，会将个人标签自动生成一段自我介绍作为动态发布。设计思考：这个是我在体验中觉得非常 nice 的一个功能，通过提取用户标签形成个人介绍动态，不至于新用户和不喜欢发动态的用户主页光秃秃一片，而且对比纯标签来说，一段口语化的文字表达更有亲和力和交流感，吸引其他陌生人产生兴趣打招呼。（我在 soul 中深有体会，因为在 soul 没有发布任何动态，好几次都会被问主页怎么什么都没有～）4. umi 星球：录制声音词卡选择umi 这个产品目前还没有太大用户量，是一个初创产品，但是产品的差异性和设计感很好，值得借鉴。使用场景：在录制自己的声音时，umi 会有一些词卡选择，用户可以根据词卡内容来录制声音。设计思考：现在很多陌生人社交 App 中都不止局限在文字上的形象展示，用户通过录制声音可以更加丰富的展现自己；声音的表达一是音色氛围、二是语音内容；umi 在内容上提供了词卡，照顾到用户可能会不知道录制什么的茫然，根据产品目标群体选取的都是一些挺符合年轻人审美的句子，像经典影视台词、情感文字、文学作品，比较文艺有意思，不会那么土味和 low～ 渲染产品充满艺术感和年轻的调性。我觉得同类的产品是可以借鉴一下思路的。5. umi 星球：随机昵称使用场景：在新用户注册时，umi 可以随机生成昵称让用户选择。设计思考：不知道大家有没有这种感受，就是每次下载一个新的 app 注册时，想名字都好累，脑子一片空白，特别是有一些产品还不让名字重复，就要反复的尝试替换；在umi里可以选择系统随机提供的名称，整个注册流程更快、降低用户操作成本，不容易在这个阶段导致用户流失；而且提供的名字都是一些挺有意思的名字哈哈哈，让用户比较能接受，例如“天炉座5688”“仙女座1277”…想起来自己体验过的一个社交产品忘了叫什么名字了，自动起名“土豪的猎豹”外加一个大黄狗搞笑表情包头像（拴 Q，一进直播间都喊欢迎猎豹哥哥哈哈哈)，说真的头像和昵称在虚拟世界还蛮有存在感的，在大家都不认识的情况下不自觉地会有把头像和昵称当成是对方形象的这种心理暗示；没有绝对说哪种类型是好的，只是采取自动生成头像和昵称的方案最好根据品牌调性来设计。6. cp：互动任务排序使用场景：产品的定位是主打线上转线下的恋爱社交；双方互相欣赏后自动变成七天 cp，开启 cp 空间，可以打卡完成任务增加亲密度。设计亮点：cp 空间的任务排序和任务内容设计很有意思，从关系角度来说是“陌生人-破冰-好感-确定关系-热恋”的流程来排序的，循序渐进的拉近两个陌生人之间距离，促进关系的建立。从恋爱场景的角度是“线上-线下-线上”的流程，契合产品线上转下恋爱的定位。从用户心理层面进行任务内容设计，例如刚开始先做几个用户成本比较低的小任务破冰，然后就是互看照片（前边的几个小任务也可以说是为看照片做个铺垫，看照片我觉得挺真实正常的，换位思考一下，在不了解的情况下，现在线上交友选择性多，大家很难在不知道对方是什么样子的情况下付出那么多的时间成本陪聊进一步突破），照片互看后的任务内容设计围绕关系升温逐渐转线下确定恋爱关系…优化方向：cp 空间的任务打卡方式过于单一，只能通过发动态来完成，缺少仪式感，促使用户做任务的动力稍显薄弱，可以适当的增加一些有意思的玩法和视觉效果，除了能促进用户活跃度以外，从业务角度来说有可能开辟更多的付费渠道。cp 空间在对话框里的呈现太像系统通知，可以增加一些对话感，强调人与人的互动；例如通过修改任务邀请文案“xx 邀请你一起…”、“xxx想和你一起cp…”；或者通过一些动效来增加趣味性和cp氛围。7. Soul：酒馆猜拳社交破冰使用场景：用户在聊天过程中，可以通过酒馆猜拳来问答式聊天，完成社交破冰。设计思考：Soul 主打灵魂、兴趣三观社交，所以用户互相聊天了解的过程是很重要的，而在与陌生人联系上后，却不知道怎么聊天，容易陷入无话说、尴尬、以及不舒服的盘问式对话。酒馆猜拳是我使用过程中觉得体验的还不错的破冰玩法，双方 souler 通过猜拳你来我往的互问互答，在答题的过程中逐渐放开自己，延伸捕捉出更多的话题，降低交流门槛，到后面可能不需要猜拳问答，也能有很好的聊天氛围。优化方向：这种破冰方式在其他的一些社交应用中也有看到过类似的，soul 做的更加细致一些，但我认为还有一些能优化的点就是：一将提问的问题归个类，这样可以更快的找到目标问题，而不用反复刷新问题，找好半天，没有合适的问题，让对面一直等着，当然这一块 soul 这么做也有可能是想减少用户操作路径和层级吧。8. Soul：亲密度标识建立关系使用场景：soul 在跟对方聊天达到一定时间后，会出现的一个“soulmate"标识，互动的时间越久，这个标识就会依次点亮，表示两人已经建立了关系亲密度。在“cp”、“qq”中也有这样的亲密度标识运用。设计思考：soul 的亲密度标识采取字母”soulmate“，一是很好的与品牌元素进行结合；二是通过亲密度点亮，能表明自己付出了更多的时间成本，跟对方的聊天比其他陌生人更久有更多话题，以这种方式可以一定程度上拉近两个陌生人之间的关系。我觉得这种亲密度标识在陌生人社交、情侣、crush、闺蜜这些关系中的用户会比较适用。9. 探探：趣味测试+发送话题使用场景：在聊天场景中，探探提供真相测试玩法，邀请对方一起做测趣味测试或接受对方的测试邀请，可以根据测试结果查看双方的匹配度，根据测试内容还可以提取相关话题发送给对方，是一个社交破冰的玩法设计思考：探探的这个趣味测试玩法，兼顾趣味性和社交性；我体验比较好的一点是所有问题的测试结果以一种更舒适友好的表达方式来表达，不会觉得某一个答案就是不好的而违心去选择，这会让用户没有压力的选择真实的内心答案完成“真相测试”；其次就是在测试结果页将问题和选择自动生成一段文案，用户可以发送给对方来展开聊天互动。对于有些内敛或不太会表达的用户来说，这样子的破冰更加自然和容易接受，以此降低用户破冰心理压力。三、结语陌生人社交产品下又有不少细分赛道，像这两年出现比较多的的语音派对交友、虚拟社交，可以单独进行分析；因为我目前的工作是在社交赛道，平时会比较多看和分析这类产品（其他类型也会看），后续会继续更新日常产品体验和设计思考，今天的分享就先到这里了。[link ]本篇来源：优设网原文地址：https://www.uisdc.com/social-app-design
产品 用户 业务 俞军老师曾说：“用户是需求的集合。”需求的诱导因素是复杂的，需求的表达形式也是各异的。B 端产品与 C 端产品显然面向不同的人群，满足于不同的需求，简单来说，B 端产品多从角色视角出发考虑需求，服务于企业或组织，偏向于满足降本提效与资源整合的诉求，而 C 端产品多从用户视角出发考虑需求，服务于个人或消费者，偏向于满足市场发展与体验升级的诉求。本篇文章希望能够帮助大家更形象地理解 B 端与 C 端的区别以及如何上手 B 端调研。一、B 端与 C 端的区别在了解差异前，首先要明确 B 端与 C 端的定义：B 全称是 Business，即商业，多指企业用户，使用的是具有业务管理思想的数字化工具，常见的 B 端产品有 ERP、OA、CRM、Slack、Notion 等。C 全称是 Customer，即消费者，多指个人用户，使用的是能够满足某一群体需求的客户端，常见的 C 端产品有例如京东、微信、抖音、微博等。在日常工作与生活中，我们都离不开使用 B 端与 C 端的产品。洗漱时，我们打开“网易云”听最近喜欢的音乐；出门时，我们打开“百度地图”查看路况并叫车；工作时，我们登录 Outlook、京 me、JoySpace 与营销中心等办公工具，进行邮件查收、业务沟通、会议记录与活动发布；下班后，我们在“美团外卖”挑选晚餐并下单，B 端与 C 端的产品就这样穿插在我们的生活与成长里，那它们在产品定位上到底有什么差异呢？目标用户的不同C 端面向个人用户，服务于在不同生活场景下的每一个人。C 端产品拥有更宽泛的受众群体，每一个核心功能都在解决大多数人的诉求，这也意味着，它需要更细致的用户画像，比如年龄、地域、收入、文化、职业、喜好等等。B 端则面向企业用户，服务于在不同经营场景下的每一个“企业”，企业可以是商家，可以是团队，可以是组织。B 端产品拥有更垂直但复杂的受众群体，它不需要收集这类人在性别、年龄与地区等维度的差异，转而关注这类人所属角色之间的差异。“营销中心”是京东内各业务方开展京东营销活动时的中心化工作平台，一个典型的 B 端产品。我们在调研过程中会通过岗位/负责品类/工作年限明确用户所属的群体角色，比如是运营还是营销，负责的品类是图书还是汽车，至于用户年龄多大、哪里出生与性格怎样并不会影响对产品需求的判断。使用场景的不同C 端产品的使用场景具有极高的自由度，它会出现在各式各样的状态下，甚至在同一时间里或一个任务下可以使用多个产品，比如在在外出旅游的晚上，打开“腾讯视频”追着最近爆火的综艺，打开“轻颜相机”美化下白天拍摄的相片，再去到“微信”发一条旅游主题的朋友圈。使用场景的碎片化与任务的随机性，使得 C 端产品需要始终注重体验的提升。B 端产品的使用场景则不同，用户是为了工作，工作包含特定的任务，任务具有明确的动线，因此用户需要长时间与沉浸式的使用，使得 B 端产品需要具备严谨高效的操作流程与简单清晰的页面设计，为了更准、更快、更好地解决问题。核心诉求的不同C 端产品对于开发者而言，核心诉求是拉新、留存、转化，通过对用户需求的挖掘，迭代优化出有价值的产品，大多 C 端产品最终目的为了盈利；但对于用户而言，核心诉求是满足自我情绪，通过“微信”与父母视频，满足思念的情绪，春节期间在“京东”购买新衣，满足能在春节收到货的期待。B 端产品的核心诉求是基于业务规范，让业务流转效率更高，员工学习成本更低。相比于 C 端对用户体验的极致化追求，B 端产品的需求更易受到业务形态或是企业战略的影响。更多B端和C端的差异对比：如何区别B端与C端的产品设计差异？我总结了26条对比！随着企业数字化转型，B 端产品越来越受到人们的重视，B 端产品也越来越丰富，越来越多的 C 端设计师转行到 B 端产品的设计上来。阅读文章 > 固然 B 端与 C 端存在各种维度的差异，看似 C 端产品对用户体验更为重视，但无论是 B 端还是 C 端，实际的使用者都“人”，C 端产品需要考虑商业价值与用户体验的平衡，B 端产品亦是，精准地洞察用户的需求，对企业效率的提升也大有裨益，但新人小白如何快速上手 B 端调研呢？二、B 端调研的小经验入职京东的第一个完整的项目是《通天塔用户体验研究》，通天塔是京东旗下一个快速搭建活动页面的平台，我们在京东看到的活动落地页大多是依赖于通天塔的能力。在调研过程中，作为新人的我，踩了很多的“坑”，也总结出些许经验，希望与大家分享，欢迎大家的批评指正。全面理解业务C 端产品是个体导向的，个体的偏好不影响他人的偏好，个体的痛点也未必是他人的痛点。但 B 端产品中的各方是广泛关联的，所以个体的偏好与痛点并不是随机的，也不是完全独立自主决定的，而是受到整个业务场景的影响。因此，在思考 B 端产品体验的时候，不应该仅仅思考其中某个个体的体验，还应思考他所处的业务场景。“模板组件不丰富”是关于通天塔的一个最高频反馈，也是产品侧希望优化的重点方向。作为新手研究员的我们应该避免在访谈时问出“您需要什么样子的模板？”，并草率地给出“进一步丰富模板组件”的建议，而是需要把侧重点放到对业务场景的分析以及业务需求的梳理上。比如，“您的岗位职责是什么？”、“在页面搭建过程中主要负责的任务有哪些？”、“参与搭建的页面展示在前端的哪些位置？”、“希望通过活动页面达到什么业务效果？”、“重点关注哪些维度的效果数据？”、“负责的是什么品类？”、“这个品类有什么特性？”、“品类特性期望在页面中以什么形式展示？”等等，以此，我们会更清楚当前用户的业务范围以及这类角色的业务诉求，更好地站在业务的视角出发提出更有针对性的优化建议，找到真正被需要的“丰富性模板”。总之，调研过程中需时刻牢记业务目标，最大限度地为企业赋能，避免在细节中“钻牛角尖”。深度熟悉产品在入职京东前，我在京东购买过各类商品，参与过各类活动，在没有系统性的学习下，我也可以熟练使用各项基础功能。但在第一次接触“通天塔”时，我遇到了许多问题，比如“我不知道素材组是什么以及如何绑定”，“在没有素材组 ID 可用于测试时，也不知道如何去其他系统里创建素材组”，我意识到 B 端产品远比 C 端产品难上手。在对产品不熟练时，直接去邀约用户执行访谈显然是低效的，因为“你对用户的调研”会变成“用户对你的授课”。所以在调研执行前，能够熟练使用 B 端产品是必要的，特别是用户日常高频使用的功能，减少调研时的“讨教”与因功能盲点造成的理解偏差。此外，即使研究员已经可以熟练使用产品，在执行过程中，用户的“实操”仍比“口述”更有效，引导用户直观地展示操作动线，会更容易地挖掘卡点与痛点，也能减少研究员在操作任务上的理解成本。拓宽竞品分析的边界竞品，可以理解为一个参照物，观对手，明优劣。C 端的竞品是清晰好找的，比如京东的竞品有淘宝与拼多多等，抖音的竞品有快手等，爱奇艺的竞品有腾讯视频与优酷视频等，但通天塔的竞品是什么？大家会说自然是各大友商旗下搭建页面的工具，但这类产品往往是企业自行开发，供于内部员工与商家使用，作为一名个人用户，是难以获得权限进行走查的。此外，B 端产品往往是服务于特定企业，具有个性化需求，难以从市场中获取相关信息。所以应该如何进行竞品分析呢？首先要敢于申请账号，想要全方位走查 B 端产品定需要足够的权限，但不能因此就放弃尝试。从申请一个账号开始，会发现部分 B 端产品并没有非常严格的使用界限。我在调研过程中，百度搜索了许多竞品，部分页面搭建的产品其实是同时面向 C 端与 B 端的，初次注册的个人账号虽缺少对一些高级功能的使用权限，但也足以给到一些启迪。其次，受访者的信息是重要的。在执行访谈的过程中，不要忽略询问受访者对竞品的态度，因为有些受访者有使用过相关竞品的经验或目前仍在多个渠道中负责搭建页面，他们对竞品能力的熟悉度与可提供信息的价值性要远大于个人走查所能带来的。以上就是个人对 B 端的理解以及在 B 端调研时沉淀的小经验，作为新手研究员，仍有许多不足之处，欢迎大家批评指正。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/business-investigate
用户 情感 产品 我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。一、3个故事故事一：爱购物的女人你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他人赞美的过程。故事二：给美女主播打赏的工人据相关数据调查，很多人会拿出个人工资的 80%给女主播打赏，为什么呢？那是因为他们在直播当中喜欢与美貌女主播互动，在这过程中能够带给他情感上的满足感。故事三：购买保健品的老人另外还有一个现象，很多老人宁可省吃俭用也要买很多无用的保健品放家里，也不一定会吃，因为保健品能给老人情感上的安全感。以上三个故事向我们表明：商家在面对个人消费者的时候，通过满足人情感需求的方式，让人感受到幸福快乐或避免恐惧忧伤，从而达到赚钱的目的。同样，我们产品的目的也是服务于人，也需要满足用户情感上的需求。美事是 58 沟通协作的办公管理平台，作为一款 B 端的工具型产品，相比 C 端产品在设计上会更理性和更严谨些，但给产品注入更好的情感设计，是任何产品都需要考虑的，因为它不但可以增加用户在体验上的愉悦感，也能向用户传达它的品牌价值。那什么是情感化设计呢？唐纳德·诺曼在他的设计心理学提出：情感化设计是指以人与物的情感交流为目的的创作行为活动，旨在引起用户注意、诱发情感反应以提高执行特定行为的可能性设计。简单理解是：它是一种顺应或唤起用户内心情感的设计方法，旨在让用户产生积极的用户体验和行为。更多情感化设计干货：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 二、前期分析1. 项目背景&目标基于美事 6.0 全新升级之后，产品界面的还有部分品牌视觉不统一、基础体验待优化的问题，于是我们启动了以“情感化”为设计方向，打造更精致的品牌视觉体验，来增加用户对美事新品牌的认知以及提升产品的基础体验。2. 应用场景梳理首先我们对市面产品可以做情感化的设计场景进行了大致梳理，包括：缺省页、操作反馈、引导浮层、表情包、闪屏、皮肤、生日弹窗、登陆页面、loading、下拉刷新等。由于 B 端产品和 C 端产品在各方面都存在较大的差异，B 端产品使用情感化的前提必须是在不影响产品本身的功能性与可用性的基础上，之后才能去考虑怎么从情感化的角度去优化这个产品。3. 建立情感化设计模型诺曼根据人类心理特征，将情感化设计分为：本能层、行为层、反思层，我们通过这三个层次，结合设计手段及用户心理搭建一套情感化设计模型。首先在本能层，通过感官的传递，在视觉上呈现给用户的感受是美观的、愉悦的，唤起用户对产品的喜爱；其次在行为层，通过简洁易用的互动模式，引导用户完成他的操作目的，建立起用户与产品直接的情感关联；最后在反思层，在本能层与行为层的共同作用下，通过运营设计手段来加强用户对产品的情感连接，并带来情感上的共鸣，以此来赢得用户对产品的认同。4. 关键词提取结合情感设计理论和我们的目标，进行提取了 4 个关键词，分别是愉悦性、趣味性、品牌化、情感共鸣。三、6个技巧接下来我们会通过围绕 4 个关键词及结合情感化设计模型，将情感化设计完美的应用到产品当中。1. 品牌符号化，传达品牌印记在本能层上，我们希望传达给用户的视觉感受是轻松、愉悦的，因此在设计启动页的过程中，先通过赋予美事 logo 更多的含义，以 logo 图形+内容的组合的方式来诠释美事产品的特点，来提升用户对美事品牌的感知；另外画面做轻量化处理，既能让用户的视觉更聚焦，也更能突出品牌来加深印象。2. 创意图形与文字，增加用户愉悦感插画和文字都是传达信息的重要手段，同时也是情绪的重要载体。因此在美事缺省页设计的时候，我们采用了创意的插画表达形式，再结合风趣幽默的文字，当用户遇到阻碍时，通过增加产品的流畅性和愉悦性能很好的减少用户不良情绪。这种良好的情感化设计，不仅能帮产品更好的传达品牌，还能引发用户的情感共鸣，为用户带来更愉悦的体验。3. 沟通互动，拉近用户情感美事作为沟通工具，表情包是用户沟通中最常用的表达方式，也更容易唤起用户的情感，并能有效的缓和或带动气氛，拉近用户之间的距离。4. 注重仪式感，创造氛围与意境反思层次的设计，在于更高层次地满足用户的精神需求，为了让用户感受到更多人文关怀，因此我们在新员工入职、生日、司龄的时候，会送上祝福和礼品，营造温暖舒心的工作氛围，向用户传递品牌温度。在职天数场景也都能加深品牌对用户的情感触达，让用户感到温暖。5. 打造设计周边，渗透品牌文化通过对美事表情包元素的提取，设计创意的礼品周边，既能有效渗透美事的品牌文化，还能大大提升用户对于产品的好感度。6. 情感运营，加强用户粘性年底通过盘点用户数据，为用户营造一个个性化、情感化、有温度的视觉感受，打造一份具有仪式感的专属年度报告，易拉近用户间与产品的距离。另外在可通过制造些话题，形成一定范围内的传播效应。总结到尾声，简单做个总结：在整个项目过程，我们从用户角度出发并关注用户情感的多样性，洞察更多用户的真实诉求，从而不断优化我们的产品体验设计。为了给用户提供更愉悦的体验，我们思考如何更好的将情感化设计应用到产品当中，简单来说可以分为以下三个步骤：首先明确项目的目标。这点非常重要，这能让我们在后面的设计过程中不跑偏方向。然后梳理情感化设计的应用场景。根据自身产品的需求，可以对应用场景做个优先级，慢慢迭代设计。最后通过符合或 IP 融合到设计创意并贯穿整个产品的设计中。拟人化的 IP 传达的信息，更容易引起用户共鸣。以上是我想跟大家分享的有关情感化设计的一些思考，希望能给大家带来些启发，也借此与大家一起共同探索、学习成长，欢迎大家在评论区留言。最后感谢大家的阅读。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/emotional-design-skills
用户 莫奈 图表 一、前言莫奈是一款主要服务京东内部用户的数据可视化平台，它以容器的形式将京东城市各种与智慧城市建设及运营相关的能力聚合，并以可视化的形式面向客户呈现。作为京东莫奈的设计负责人，过去三年一直负责莫奈可视化平台的用户体验设计工作，由于本人日常设计主要以智慧城市、数据可视化大屏为主，所以我既是莫奈的设计负责人也是莫奈的深度使用者或者说专家用户。在长期使用莫奈的过程中，本人梳理了大量与视觉、体验相关的问题，这些问题，部分在产品日常迭代中得到了优化，但是也有相当一部分解决起来具有一定的难度和成本；与此同时，作为用户体验设计师，我日常与业务方、客户方以及用户接触紧密，所以在与大量用户沟通后，也从用户侧收集了不少使用体验相关的问题。我对以上两个渠道的问题整体梳理汇总，并与产品侧讨论沟通后，大家认为这些问题比较严重的影响了用户使用莫奈的效率，降低了莫奈对业务侧赋能的质量，提高了客户使用莫奈的成本。所以我们必须规划出一个产品迭代的周期，针对莫奈体验问题，进行一次密集的优化和革新，这便是本次莫奈体验升级改版的基础背景和原因。 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。本篇文章写作的主要目的，是想将本人在这次改版设计中用到的一些方法、流程和经验与大家做次交流和分享，希望能为同行在类似的改版设计中提供一定的借鉴和参考。京东往期案例复盘：让购物简单快乐！京东 APP 11.0 深度解读：视觉篇在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个场景是如何外化以辅助达成改版目标的。阅读文章 > 二、体验升级流程实际上，在梳理出整个体验升级流程之前，通过与产品负责人的多次沟通，我们事实上已经对体验升级这个需求达成了共识，而流程图解决的是做什么、怎么做的问题。下图展示的这套体验升级流程较为通用，大多数产品的体验升级都可参考下面的流程执行。这套流程的主要作用有两个，一是通过它可以更直观的跟产品负责人、开发负责人等关键角色沟通，让大家对体验升级这件事儿有整体且全面的了解，方便大家评估工时、预估成本和安排排期；另一方面也能够使我自己的工作推进的更加有节奏有条理，避免工作内容长时间停滞在某一个环节而影响整体进度。三、改版背景及产品简介基于 STAR 法则，背景概况部分向大家介绍莫奈体验升级的必要性。在企业中，想要推动一个需求顺利执行，那一定是需求上下游以及相关方的利益都得到了体现和满足。莫奈此次升级，从体验设计师角度来讲，我们作为用户的代言人，在了解到用户大量反馈和建议后，有责任将用户的声音转化为需求，并推进落地为产品的一部分；从产品团队来讲，莫奈想要不断发展，持续为客户和业务方带来显著的效率提升、明显的成本下降，也必须对过去老旧的产品架构做一次深度的革新和优化；从前端工程师、研发同学的角度看，以往不合理的底层代码设计，使产品在性能、稳定性等方面留有大量隐患，因此在日常迭代工作之外，研发同学总要消耗部分精力去维护那部分不稳定的存在，从而导致研发同学人效比低、开发体验差；从上级 Leader 来看，公司的核心经营理念是“成本、效率、体验”，但成本的降低、效率的提升、体验的优化都依赖于强悍的技术和优秀的产品，而莫奈此次体验升级正是践行公司核心理念的有效尝试，综上，此次体验升级于多方有益，符合部门整体利益，所以大家很快达成共识。四、莫奈典型用户场景梳理通常我们说用户体验时，用户是一个群体的概念，而这个群体如上图所示，可以被进一步细分为多种角色，理想情况是每一类角色的体验都被满足，但现实执行中我们必须要有策略和取舍。所以要想产品有好的体验，首先我们要知道用户群体中不同角色对产品的使用情况如何，并找到对产品依赖度强使用频次高的那部分用户和场景，然后针对他们以及他们使用的场景做高优先级的优化。从莫奈典型用户使用场景可以归纳出：首先，莫奈的主要使用者为各个项目的产品经理及开发工程师，其中设计师也有相当大的使用强度，这三类用户他们直接使用莫奈，并把莫奈作为解决数据可视化场景构建相关需求的主要工具和方案，所以，以上三类用户，我们将其称之为莫奈的核心用户。核心用户使用莫奈产出的作品，经由上下游同事传达和部署给业务方及客户后，莫奈的商业价值便得以体现。其次，每类用户使用莫奈不同功能模块的频次不同。从使用场景中我们也发现，莫奈的使用具有上下游的关联性，核心用户处于流程的下游，中上游的用户虽不是核心用户，但他们因为更接近客户和业务，往往具有比核心用户更高的决策权。因此我们优先让核心用户体验提升并不意味着放弃上游的体验，而是资源有限的情况下我们的工作必须有取舍有重点。实际上我们是通过建立核心用户的声量和口碑来向上游用户传达莫奈的价值和特色，通过核心用户使用莫奈交付的结果来证明莫奈的可靠。与此同时，我们也通过对内外的宣讲和培训，持续接收上游用户的反馈，并在迭代中持续优化。五、体验痛点分析-用户调研知道了核心用户是谁，那么核心用户的体验痛点是什么呢？虽然在日常的交流沟通中我们已经获取了不少用户反馈、收集了相当的问题建议，但作为体验升级的系统性工作，为了更全面的了解用户体验痛点，我们还是设计了一次完整的用户调研活动。本次调研主要采用线上问卷调研、线下访谈+用户行为观察的方式进行。线上问卷采用京东良研问卷系统，除了面向核心用户推送，我们还面向莫奈主流用户及边缘用户推送了问卷内容，因此，问卷调研整体覆盖较为全面。线下访谈除了邀请部分核心用户，我们也从问卷系统中筛选了部分反馈问题多且愿意参加线下访谈的用户参与。线上线下均包含内外部用户，以期获得更加客观真实的反馈。用户调研的核心目标是充分收集用户反馈，并将反馈结果量化及系统化，量化后的结果可做为设计侧推动产品执行体验优化的关键依据，也可以作为后续验证优化结果的对照项。六、体验痛点分析-问卷设计本次问卷设计我们参考了 PSSUQ 整体可用性量表，并结合本次调研目标做了部分调整。PSSUQ 整体可用性量表可以从系统易用性、信息质量、界面质量三个方面将体验结果量化，然后通过与行业基本经验值比较，既可以知道用户对莫奈在以上三项的满意度，也可对莫奈当前整体体验结果有一个全局的概况性评价。同时根据三个方向的评分也可以更细致的指导后续的设计优化方向，为设计决策提供更多科学可信的依据。PSSUQ 整体可用性量表作为一个通用模版，其内容比较固定，为避免多次打扰用户，提升问卷调研效率，我在 PSSUQ 的基础上添加了少量关键信息甄别、用户反馈积极性识别类问题，从而使问卷内容更加符合本次调研目标。七、体验痛点分析-问卷调研问卷设计好之后，接下来就是问卷发放以及结果分析了。PSSUQ 量表内每个问题均有 8 个选项，「1-7」是对该项描述的认可程度，得分越低代表用户对该项描述越认可；「NA」代表用户对该项描述无法评价。本次调研通过京东良研发放线上问卷 100 份，共收到有效问卷反馈 87 份（大于 PSSUQ 所需的最少样本数量：20），说明问卷结果具有较好的可信度，其结果值得进一步研究。通过整理和统计问卷数据，可以得出以下结论：内外部用户在系统易用性、信息质量、界面质量三个维度对莫奈均不满意对比行业经验值（均值），莫奈系统总体体验质量与行业同类产品存在明显差距莫奈用户群体整体积极性较高，具有较强的沟通及反馈意愿整体评分结果与日常同相关同学的沟通结果一致，以上评分结果也反映出此次体验升级的紧迫性，作为由设计驱动的改版设计，设计侧面临较大压力。八、体验痛点分析-亲和图在设计问卷的环节我也提到过我们的问卷在 PSSUQ 量表的基础上针对本次调研目标做了部分调整和优化，而线上问卷最后两个选项以问答题的形式向被调研用户提供了对莫奈各方面建议的反馈渠道，通过问答项我们收集到用户反馈的各类问题 80 多条，我们采用亲和图对这些反馈做整理，亲和图顾名思义，它可以使具有类似特征和关联属性的问题更加临近，从而将零散的问题被归类，方便从杂乱的问题中找到规律，并通过比较不同类型问题的占比，更直观的了解用户反馈的问题主要集中在那些方向。如下图所示，产品的反应速度及稳定性、模板和组件丰富度是用户反馈问题最集中的两项，前者影响用户最基础的使用体验，后者决定产品能多大程度上便捷的服务用户。良好的稳定性和反应速度可以让用户专注于任务本身，而使用模板能最快速的产出作品，降低新手的使用门槛，丰富的组件能够满足用户在各类复杂场景下的业务需求，减少组件二开成本，提高交付效率。针对这两个大的问题点，首先，对于那些能够在当前产品日常迭代中优化的点，我整理后会以需求的方式向产品团队提出，并在日常迭代中逐步优化；然后，对于那些需要“伤筋动骨”做底层优化以及长期运营沉淀才能有效改善的问题，我们会进一步向用户收集和完善相关信息，并将相关问题梳理到本次改版任务中，做系统的解决和处理。九、体验痛点分析-线下用户访谈在「05、体验痛点分析-用户调研部分」已经介绍了本次参与访谈的用户来源，但在实际执行时，我们也邀请了部分在线上问卷反馈中描述模糊不清、难以理解，需要面对面交流或者演示才能理解的问题的用户。访谈先通过与用户简短的沟通了解用户的岗位/职业以及使用莫奈的主要场景、频次、设备等，然后通过给用户设置一到两个简单的任务，观察用户在完成任务过程中的行为、表情、语气等，以了解莫奈在一些典型使用场景下的易用性及可用性。比如，对于视觉设计师：请在画布中添加一个条形图，并将条形图的颜色修改为绿色、激活纵轴辅助线、修改辅助线为虚线样式....；对于开发工程师：请在画布中添加一个环形图，并使用 json 为环形图添加一组动态数据....。之后，在用户完成基础任务后，我们还会针对用户关心的问题进行更细致的沟通，了解用户更细致的反馈。对于用户反馈的问题，我们整理后会在公司内部的需求及研发管理系统“行云”中以需求的方式提交给产品团队并同步添加反馈问题的用户为该需求的关注者，后续，当该需求的状态有任何更新时，问题反馈者都能及时收到更新。如此，受访者反馈的问题从需求提交到需求最终提测验收，都能在线跟踪并闭环。这样做既是我们团队的责任，也可以增进用户对莫奈的信任，并期望活跃用户后续能继续为莫奈提供建议和反馈。十、体验问题汇总-用户体验金子塔通过线上问卷调研及线下访谈，我们已充分了解了用户心声，接下来我们通过用户体验 5 要素模型，将各类问题进一步归纳并按照产品建设的上下游协作关系，把每一个具体的问题汇总给对应的角色，并由对应的角色产出具体的解决方案，然后通过线下会议同步各自方案并对方案进行评审和沟通，由此，关于体验升级的所有事项及具体任务便可周密安排，之后便是资源投入、推进升级工作具体执行。从用户体验 5 要素，分析「盒马鲜生」是如何收获百万好评的！前几天我去盒马鲜生凑热闹逛了一会，体验了一下盒马的商品品类、用户动线、展柜分布和设计、APP交互、品牌设计等方面。阅读文章 > 用户体验 5 要素模型，从产品的战略层出发，层层递进直到表现层，把影响用户体验最根本的因素分层并可视化，借助这一模型可以让大家对“用户体验”这个概念有更好的理解，并能促成大家在更大的层面上达成共识。以往谈到用户体验，大家首先想到的是界面是否好看、交互是否流畅，然而一些对用户体验也有着重要影响但“不可见、不直观”的因素却往往被忽视，尤其对开发侧同学更是如此，他们鲜有意识到产品的目标、内容以及性能等这类的因素，也是构成用户体验的重要部分。对于莫奈这样一款长期维护持续迭代的产品来说，好的用户体验并不能以“毕其功于一役”的方式来实现，而是要通过持续不断的改进和优化才能持续满足并提升用户体验，所以借助用户体验 5 要素等模型，我们引导产品及研发团队更好的理解用户体验，这样不仅能帮助设计师在本次体验升级改版工作中与大家高效协作，也非常益于之后日常产品迭代的沟通与协作。十一、体验问题汇总-体验升级方向上一步，我们通过用户体验金字塔将体验问题汇总并划分给了不同的角色，之后各个负责人产出解决方案并与大家评审和沟通，而体验升级方向正是基于大家对各类方案一致沟通后达成的共识和结果，体验升级方向以设计为主导，同时兼顾产品和研发的部分目标，我们用 5 个短句将五个升级方向概括，每个方向尽量解决一个维度的问题，比如“界面视觉质量提升”解决表现层的问题、“信息层级优化”解决框架层的问题。体验升级方向作为对体验升级结果的导向，将指导后续设计动作的展开。十二、策略制定-设计目标确定基于体验升级方向，接下来就要制定具体的设计策略，来实现体验升级方向中要达成的结果。设计策略制定第一步先确定设计目标，我们将设计目标拆解为三个方向，每个方向通过两个关键词定义。设计目标主要分为视角与交互两个方向，同时兼顾产品侧“易拓展、易维护”的需求。实际设计中，视觉与交互并非独自分开进行，在设计开始的阶段，需要先定义设计风格等基础设计要素，之后视觉便可在此基础之上全面展开，此时视觉设计要考虑交互的效果，交互设计也需要斟酌设计的展现。十三、设计执行-视觉风格定义对于设计目标中关键词所代表的那些抽象概念，每个人的认知可能都不一样，但是搜索引擎和大数据推荐的算法，可以告诉我们普通大众对那些关键词所表现出来的意象是如何认知的，之后我们便可从符合大家普遍认知的视觉素材中，提取出符合关键词所表达出的意象的设计要素，之后通过在设计中应用这些设计要素，就能把关键词定义的抽象的设计概念转化为具象的认知，我把这个过程称之为“抽象概念的可视化”。而“情绪版”是我完成上述工作的主要工具。我们使用搜索引擎以及 AI 推荐的关联算法，针对“科技和高效”这两个视觉目标的关键词收集了海量的音视频设计素材，把这些素材集合在一个画布上形成“情绪版”，然后通过归纳这些素材共有的特点/要素，就能将体现“科技、高效”这两个概念的所有设计要素剥离出来，并通过简洁的文字加以描述和归纳。此后，我们通过在视觉设计执行的过程中应用这些设计要素，通过合理的搭配和组织，将这些设计要素融入到莫奈新的设计语言，如此，产品最终便可在视觉上呈现出与视觉目标关键词定义的一致的视觉和心理感受。十四、视觉风格定义中的 7 要素基于情绪版提炼出的设计要素其实已经足够具体，但是如何将这些要素应用在设计中，我们还需要进一步归纳。我个人一直以来习惯从形、色、字、质、构、动、音 7 个维度分析一个设计作品的设计风格，就如同人体是由肌肉、骨骼构成的一样，以上 7 个维度也是构成一个设计作品的“经、骨、肉”。所以，我认为对于一个设计作品，尤其是 UI 设计作品，以上 7 个维度基本能够完全概况它的风格，所以当我要为自己的产品做风格设定时，我也是从这 7 个维度出发来为每个维度定义具体的风格和策略。这种细分维度然后定义风格的方式有多种优势，其中最明显的是它能够将我们风格定义的设计工作条理化，避免反复尝试和摸索造成的大量返工和思绪混乱，比如，如果我对质感的定义有偏差，不符合情绪版中提取出来的设计要素的特点，这时候我只需要对“质感”这个维度的风格进行优化和调整，而不需要推翻整个 7 要素重新再来。这种设计方式让我的设计更加理性，也让后续设计执行的工作更加的有条理和舒适，从设计风格落地的角度来讲，这种方式我个人认为是最能够忠于情绪版所归纳出的设计感受的方法。十五、视觉改版：造形演绎对于产品界面的造形设计，一方面依照情绪版中提取的设计要素“透视、空间感、异构造形”来考虑，另一方面我也结合莫奈的产品 Logo 做了适当的抽象和演绎；两者结合最终确定了当前莫奈的造形设计。首先，产品左侧主导航采用了具有一定透视角度的异形设计；产品顶部标题区域也采用了相同的设计思路：左侧为品牌 Logo 设计了一个容器，Logo 在其中容纳放置；Logo 右侧收起的区域预留了常用公告、跑马灯的设计，方便产品把日常重要信息同步给用户；最右侧呈现用户个人中心、空间管理、使用帮助等菜单项。对于这种异形的设计，用户是否能够接受，在设计开始时我存在一定的疑虑，因此在设计初稿定稿后我们邀请了部分用户做了测试，大部分用户认为新的设计有创意具有鲜明的特点，也有部分用户认为透视的设计看着较为怪异，尤其是左侧主导航的文字在添加透视效果后识别性存在一定的问题。因此针对用户反馈我优化了透视的角度，从多个透视数值中选择了一个即能展示透视的设计效果、又不至于透视过大导致文本图标等变形严重而不易识别的角度，其次，我还配合开发同学对导航透视文本和图标的渲染做了一些优化，从而使其具有更好的识别性和清晰度。在以上两项优化完成后，新的用户测试表明大家对该设计的满意度有很好的提升。十六、视觉改版：色彩搭配莫奈在改版之前就已经有自己的品牌色，新的色彩升级围绕“科技与高效”两个关键词，结合情绪版提取的设计要素，将原有品牌色做了细微的调整。首先蓝色饱和度增加，绿色调整色相使其偏向蓝色的一端并增加亮度。如此，当两个颜色搭配使用时，蓝色作为主色调体现科技、可靠的视觉和心理感受；绿色作为点缀色和强调色，体现活力、高效与创新。蓝绿对比强烈，具有很好的场景适应性和品牌特色。十七、视觉改版：字体选取字体作为 UI 界面中最常见的元素以及作为信息呈现的主要载体，字体的使用对产品的易用性和视觉表现有着非常重要的影响。结合体验升级方向中定义的“增强品牌特色”的目标以及情绪版中提取的非衬线的设计要素，对于字体的设计风格，我将其归纳为"定制化、品牌性和非衬线"。为了实现字体风格的设计目标，我选取了两款京东品牌的定制字体“京东朗正体”及“京东正黑体”。京东朗正体经过多次迭代，目前具有丰富的字重和独特的品牌特色，将该字体用于莫奈的品牌 Logo，可以很好的体现京东的品牌特色并体现出与其它产品差异化的字体设计。京东正黑体主要用于莫奈产品中的数字、拼音、英语、数值符号四个场景，该字体也是京东金融 APP 的系统数字字体，其最大的特点是等宽、简洁、紧凑具有很好的识别性与易读性，并且该字体有较小的字符宽度，所以当其用于大屏编辑器时，能够在相同的空间下容纳比其它字体更多的字符，而这个特点对于“寸土寸金”的属性面板尤为重要。此外，该字体在作为数字字体使用时，其小数点、千分符等也具有很强的特色，具有不错的辨识度与个性。而产品中的中文字体 Mac 与 Windows 系统有不同的方案。在 Windows 下，由于系统自带的微软雅黑当字号小于 14pt 时，字符在水平方向上存在明显“参差不齐”的现象，加之该字体很少更新，没有针对当前高像素密度、高分辨率的屏幕特点做相关的适配优化，所以在高分屏下，其字体边缘会有明显的锯齿。之前在用户调研中，有用户反馈字体模糊不清、识别困难也是上述原因造成，所以 Windows 系统下莫奈界面字体选取了思源黑体，思源黑体是 Adobe 与 Google 联合开发的开源字体，其字重丰富、字形简洁、现代，能够很好的适应 PC 与移动端的显示，也能适应当前已渐趋主流的高分屏，所以使用该字体能够给用户带来不错的信息呈现。除此之外，思源黑体的字形特点与 MacOS 系统下的苹方字体相似，因而使用思源黑体在一定程度上也能够保证用户在不同平台使用莫奈时体验的一致性。十八、视觉改版：质感表现质感的呈现主要通过色彩、透明度的变化、毛玻璃效果的模拟来实现，色彩与透明度的变化搭配毛玻璃效果使用，可以呈现科技、轻盈的质感。十九、视觉改版：结构设计结构设计主要目标是组件化及原子化，莫奈最核心页面是大屏场景编辑器，该页面承载着可视化大屏由 0 到 1 构建所需的大多数功能，也是莫奈产品日常迭代维护投入资源和成本最集中的模块。以往编辑器的界面设计虽然也有不错的设计规范，但是并没有按照原子化、组件化的思路来考虑各类组件组合使用时的搭配问题，因此基于以往的设计规范，大屏编辑器页面的产品需求总是需要 UI 产出设计稿研发才能开发，且由于没有系统的梳理过编辑器页面各种组件的类型，所以部分组件在同一页面的不同位置存在不同的形态；还有一些组件，在具体页面中的使用并不符合该组件的功能和用途，存在错用乱用的情形，由此造成编辑器的界面设计、开发和维护都具有较高的成本。新的改版设计，在设计之初就联合产品对编辑器内的各个模块所包含的各类组件进行了梳理，通过将各个模块的组件罗列出来，然后重新梳理组合、去重、合并之后，我们就可以知道当前编辑器界面总共有哪些类型的组件，以及每类组件用在何处，而组件原子化后也通过间距规范、使用场景示例等方式解决了如何用的问题。原子化的组件，精简了组件的数量，同时每个组件也针对自身功能和用途的特点进行了优化，在此过程中也考虑了组件搭配、组合使用的适配和呈现问题。比如，针对颜色选择组件，我们默认以十六进制展示颜色色值，并在色值后以百分比显示该颜色的透明度，我们还在色值后面增加了色值预览的小色块，这样的设计兼顾了开发与设计同学使用莫奈的场景。对于开发同学，他们在代码中习惯使用十六进制色值，而设计师更习惯于 RGBA 或 HSLA 的调色模式，因此，虽然十六进制的色值也能包含透明度信息，但我们依然在颜色后面增加了百分比及小色块，已帮助设计同学确认颜色的正确性，此外我们还通过色彩显示模式切换、自动输入校正等手段，确保不管用户输入的颜色采用何种方式，最终属性栏都是按照用户设置的模式以统一的格式呈现。而诸如此类优化，在本次体验升级中不胜枚举。二十、视觉改版：动效设计莫奈的动效设计主要有两类，一类是用于页面视觉效果营造的氛围类点缀动效，另一类是用于功能及信息传递的交互类动效。两类动效都通过“节奏感、轻盈”的设计风格，传递科技、高效的视觉感受。在本次动效交付中，为了保证动效的清晰度与流畅感、并减少动效的体积和提升动效加载速度，动效文件均采用 Json 代码的形式交付前端，该类动效由浏览器在网页端实时渲染，具有矢量动画的特点，能适应多种设备及屏幕分辨率，具有优秀的前端呈现效果。首页科技感流光氛围动效页面及大屏加载 Loading 动画二十一、设计执行-典型页面效果1. 产品登录页2. 产品首页-我的可视化页面3. 我的可视化页面改版前后对比4. 大屏模板页面5. 可视化场景编辑器页面6. 可视化场景编辑器页面改版前后对比7. 产品主要 ICON 设计二十二、交互优化：图表属性配置优化针对视觉层面设计优化后，接下来针对莫奈典型的用户使用场景以及之前线上问卷、线下访谈中用户反馈问题比较集中的一些场景进行交互层面的优化，我们交互优化的目标是“简单、流畅”。首先进行交互优化的是各类图表的属性及配置项设置相关的交互优化。莫奈作为一款可视化场景搭建平台，为用户提供了各类型的图表，每个图表均具有“样式、数据、交互”三大类配置属性，这三大属性，从图表看起来是什么样、图表展现了什么数据、图表可以与用户进行那些互动三个维度解决了图表在数据可视化呈现中最基础的需求。由于图表在数据可视化呈现中频繁使用，所以与图表配置相关的操作自然也是相当高频和常用。当前版本下，图表配置项主要问题有两个：一个是图表配置项层级过深，用户需多次点击才能对某一内容进行修改；第二是批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高。针对用户最关心最影响体验的两个交互问题，我的优化方案如下。优化图表配置项层级过深，用户需要多次点击才能对某一个内容进行修改的问题要解决问题，首先要知道问题从何而来。经过深入与产品、研发同学及部分用户访谈沟通后，我发现当前导致图表配置项层级过深主要有两个原因，分别是产品规划与设计展现。具体来讲，产品层面有三个问题：① 产品对于当前图表配置项的结构梳理是以程序的逻辑来呈现，而非以用户的视角来归纳。举个栗子，在当前版本如果用户要修改柱状图某个柱子的颜色，操作路劲如下：样式>数据系列>系列名称>形状设置>颜色设置。而这一路径为何如此设计？因为颜色这个属性的后端代码就是这样的结构。这一路劲把用户最易理解、最直观的属性名放到了路劲的末位，而在它之前呈现的内容、名词其实都有一定的理解难度，尤其对于新手更是如此！用户想要更改颜色，Ta 首先需要知道什么是数据系列、其次还要了解形状设置可能包含哪些属性等，正因具有一定的门槛且不直观，所以用户初次进行上述设置时往往需要在样式一级菜单下点击多个属性、反复尝试确认，才能最终完成颜色修改的设置，这样一个使用的流程自然会给用户“层级过深”的感受② 图表配置结构存在冗余、不够精简。还是上面那个栗子，用户修改颜色需要触达第 5 级。但是这种细致的分层分级的结构设计是必要的么？答案是并不是！因为只有用户关注的才是有用的，产品应该提供用户想要的内容而不是强塞给用户产品具有的所有的功能，所以我们没有必要把图表在后端具有的所有属性都罗列出来，适当的对配置项做些精简，合并一些同类的属性、然后通过“更多”按钮隐藏一些对图表呈现无关紧要的内容，如此，图表配置项便能瘦身，用户使用起来也更轻松。③ 图表配置项的各个属性，在属性列表的排序没有遵循用户使用的频次和习惯。排列在前面的属性并非用户最常用的那些，因此用户要在列表中从上而下的“翻找”，这种使用过程中的顿挫感，一方面影响了用户使用产品的效率，另一方面也加深了用户“层级过深”的感受。知道了问题从何而来，那么解决问题便也变的简单。首先，我们联合产品经理，对莫奈已有的 60 多个各类图表组件，逐个进行了配置项的梳理，当所有图表的配置项都以思维导图的形式呈现时，他们的共同点、同类项便一目了然。此时，之前存在的“图表配置结构存在冗余、不够精简”的问题便可解决。而对于先前存在的 01 与 03 问题点，在上述梳理工作完成后有了一定的优化和改善空间，但仍然存在一些不确定的因素影响设计和产品的决策。比如、“属性列表中，哪些属性是用户最常用的”，类似这样的问题我们通过访谈几个用户并不能得到可靠的结论，对此，一方面我们通过为配置项区域增加数据埋点，分析用户对各个配置项使用的频次来为后续的持续优化提供决策支持，另一方面我们也参考、调研了同类产品中一些用户量较大、设计质量较高的产品来进行当前有限的优化。配置项层级过深的另一个原因，是属性配置列表的结构及布局设计存在“深层级、空间利用率底”的特点。如下图，左侧图片示意了旧版莫奈的配置列表设计结构。可以看到旧版设计完全采用树结构的形式将各项自上而下排列，并且采用每级向右缩进一个字符的形式来做层级的区分，旧版的设计基准尺寸为 1440PX，属性配置栏本身较窄，而逐级缩进的策略更是导致信息展示困难；其次，树状的结构在展开层级较多时，部分一级属性会被挤到一屏之外，用户需要频繁滚动鼠标滚轮才能看全信息，综上，旧的设计策略也给了用户“层级深”的直观感受和交互体验。新版设计首先增加了配置属性栏的宽度，让其能够在横向上展示更多信息；其次，新版设计，将提炼后的一级属性标签固定在属性配置列表左侧。相较于之前，这样的设计始终能够让用户清晰的看到所有一级属性，用户可以随时在各类属性中切换，并且右侧属性内容的滚动也不会影响一级属性的位置，如此就给了用户很好的全局观和使用的便利性与确定性。最后，新版设计采用分隔线与色块结合的方式来表达属性列表内的层级关系，去掉逐级缩进后，配置列表在视觉上更加整齐一致、且空间利用率也有了进一步的提升。优化“批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高”的交互问题在数据可视化场景搭建过程中，用户对多个图表的相同属性进行统一修改、一次性调整的需求非常迫切和刚需。比如当前可视化大屏中有 N 个图表，此时，用户想要将其中 6 个图表的横轴颜色调整为相同的绿色，在用户的视角下，此时的操作应该是先选中 6 个想要调整的图表，然后找到横轴颜色设置项，之后统一调整色彩。但莫奈当前的版本，如果用户按照上述流程操作，看到的将是下图左侧的示例：图表多选之后，对齐、坐标等基础项仍然可用，而与属性相关的其它设置并没有被聚合并呈现，在此情况下，用户想要完成最初的目标就只能 6 个图表逐个依次调整！显然，这样的操作并不符合用户预期，它使用户的操作效率大大降低。上述问题是一个体验相关的问题，同时也是一个强技术相关的问题，我们想要让多个图表的同类项聚合显示，首先要能在底层对各个图表的配置项有十分清晰的梳理，好在我们解决第一个问题：“配置项层级过深”时，已经完成了对 60 多个图表的细致分析，有了这项工作的基础，当前面临的问题便不那么棘手。如右侧示例：当用户多选图表时，图表的同类项会被聚合，并以用户视角的理解，将属性类别进行分类，这样的分类打破了传统的按照图表固有属性排列的惯例，而是把图表固有属性整合归纳到用户易于理解的类目下，如此，用户多选图表之后便能够便捷的对图表的各类属性进行统一的调整和修改，而这样的操作是符合用户习惯和预期的。二十二、新建大屏交互流程优化新建大屏作为创建数据可视化场景的第一步，它的易用与否直接给了用户最直观的对莫奈的第一感受。对于新建大屏的交互优化主要有三个方面：创建流程、模板预览与模板展示。创建流程优化：首先，旧版的创建流程：新建可视化>选择模板>大屏命名>创建成功。 这一流程中“大屏命名”是没有必要的，因为用户在新建可视化大屏时可能存在多种需求的可能性，也许用户只是想看看创建完成后内部编辑器是什么样，或许用户有实际项目，但当前项目名称也并未确认，所以在此时添加一个不可跳过的步骤着实让人不爽，况且大屏创建成功之后在多个位置有多种方式都能便捷的修改大屏名称，因此，更快速的进入编辑器开始设计创作才是用户创建可视化最根本的目标，所以，拿掉“命名流程”，显然可以让整个交互的过程更加流畅。模板预览与模板展示优化：原有的设计，当用户点击创建大屏按钮后，会在页面底部拉起一个小的抽屉，抽屉内包含一个空白模板以及有限多个其它内容模板，而在如此狭小的区域展示这么多内容，不管是从交互效率还是视觉效果上看，都显得格外的拘谨和难受。新的设计首先是全屏铺开，尽可能充分的利用页面空间。在模板展示及预览方面，我设计了列表展示与缩略图分布展示两种方式，并添加了分类标签和搜索按钮，此外还联合产品增加了模板收藏功能，这样用户可以把自己喜欢的、常用的模板收藏，方便之后更快速的使用模板预览方面，在两种布局模式下，用户鼠标滑过模板缩略图时，模板均会以较大的视图动态呈现模板内容。在列表模式下，模板预览窗口固定在页面右侧区域；缩略图分布的模式下，预览窗口根据鼠标指针的位置激活。当用户选中某个模板时，点击底部创建按钮即刻进入大屏编辑器界面，此时用户便可基于模板内容进一步完成自己的定制化设计。二十三、全局搜索交互优化如今移动端各类产品已经给用户养成了算法推荐+自主搜索的产品使用习惯，这种习惯当前也逐步从移动端往 PC 端转化。搜索能从海量信息中最快速的找到用户关心的内容，因而提高搜索功能的易用性，能明显提高用户使用莫奈的效率。以往的搜索功能按照不同模块和场景分布在不同位置，用户需要先找到对应模块才能进行搜索，降低了搜索的便捷性和易用性。新的设计在保留之前搜索能力的基础上，新增全局搜索，用户在一个位置即可完成对组件（优先展示当前画板内组件）、属性、帮助等内容的搜索和查找，进一步提升搜索的效率。二十四、图层管理交互优化一个数据可视化场景，通常是由 N 个数据图表与其它数据要素一起构成的多个页面来呈现和展示的。这些页面内包含大量的元素，而对这些元素的管理主要通过大屏编辑器页面左侧的图层管理面板来实现。一般我们对图层管理的手段主要有三种：命名、分组和查找。给组件命名是一个耗时且麻烦的行为，我们在做用户调研时发现，大部分用户都没有给组件规范命名的习惯，大多数情况下，组件在图层面板列表内都是以默认名称或者默认名称+1、2、3 的形式存在。这导致了当页面组件较多时，通过组件命名来查找组件其实相当困难，所以自动生成缩略图的形式相比让用户耗费大量时间为图层命名更能改善用户体验。缩略图以快照方式保存当前组件最新状态截图，从而帮助用户更快速的将图层组件与页面上的内容对应起来。新的设计，图层成组后也取消了缩进字符的效果，我采用给成组对象设计更明显的分组示意图标以及为组内列表添加深色色块的方式，完成了成组对象与列表内其他要素区分的需求，新的设计使成组对象更易查找和识别。此外，我们还增加了对图层列表的搜索功能，帮助用户快速定位名称已知的设计元素。二十五、经验总结此次体验升级是设计主导推动，产品与研发紧密配合的结果。体验设计师作为最接近用户的群体，是产品与用户沟通的桥梁。时刻关注用户心声，并能将用户细碎的吐槽和各类反馈转化为体验痛点、制定对应的优化策略是体验设计师的基本功。而对于设计和产品本身是否热爱，也是设计能否不断精进、体验是否能够不断提升的关键。好的设计不仅服务了产品、帮助了用户、同时也成就了设计师本身。本人为莫奈提供设计支持的三年多时间，在没有 KPI 要求和外部压力的情况下，通过公司内部需求管理系统“行云”，为莫奈提交 231 个体验优化建议；以线下线上的形式面向莫奈产品及研发团队进行了 20 多次专业分享。正是日常这些积极主动且持续的努力，使我本人与莫奈产品团队建立了非常友好紧密的联系，这也为推动本次体验升级改版提供了巨大的助力。我认为作为体验设计师，我们不仅要对用户有同理心，为用户创造愉悦舒适的感受，同时也要对身边的同事、职场中的合作伙伴有相似的同理心和换位思考的意识，体验关乎人、环境与生活，尝试在生活中磨炼自己创造好的体验的能力，并将其应用到体验设计师的职业工作中，我相信，倘若如此实践，必能在职业和生活中都获得有不错的成就。好的产品，必然是持续关注用户诉求，不断迭代发展的产品，好的体验设计也必然是陪伴产品不断优化、持续精进的设计，复盘的意义不仅是沉淀过去的经验，更是为未来更好的体验蓄能。此次分享如能为大家带来那怕一点点的启发，本人便倍感荣幸、开心至极！ 期望大家能够与我有更多交流，么么哒~~欢迎关注作者的微信公众号：「BYMD」本篇来源：优设网原文地址：https://www.uisdc.com/jd-monet-user-experience-upgrade-design
对话框 用户 模态 对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。更多交互方式：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、了解对话框1. 对话框定义对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。关于对话框的概念，以下是百度百科的解释：对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。2. 对话框分类按照对话框的交互方式，可将其分为「模态对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。模态对话框：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。① 何时使用模态对话框在重要的警告时使用，避免出现严重问题、或修正已出现的问题。例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。例如：在使用 Canva 资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。用来将复杂流程拆分成简单步骤。例如：Teambition-分步骤的模态对话框式创建项目。用来获取信息，该信息可大大减轻用户的后续操作/精力。例如：在转账场景中，如果先复制一个账号，打开手机银行 APP（以招商银行或平安口袋银行为例），系统会通过模式对话框询问用户是否向这个账号转账，这样的设计做到了预判用户行为，节省用户后面的操作成本。非模态对话框：与模态完全相反，它更加温和，不会强制打断用户正在进行的现有流程，对用户的干扰比较小。通常这类对话框只会在屏幕上短暂停留，几秒就会消失，也因此用户容易忽略它们的存在。因此非模态对话框不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。② 何时使用非模态对话框在获取与当前流程不必要信息的时候使用。例如：平安口袋银行和平安数字口袋采用气泡卡片展示更多功能或引导用户登录。不打断重要流程中使用。例如：在平安口袋银行 APP 中购买理财时，如果遇到疑问的话，不会弹出框提示让客户咨询投顾，而且采用气泡框形式提示，不打断用户购买。简单来说，两者的优缺点见下表：二、对话框常见应用场景从前面讲到的定义来看，对话框最主要的目的是：传递信息。那么从目标导向的角度来看对话框，对话框要传递的信息的常见应用场景主要有以下五种：1. 属性对话框属性对话框是向用户呈现或让用户改变所选对象的属性或者设置。一般来说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。该对话框适用于非频繁操作和或仅需要设置一次的属性，属性对话框常见在一些设置、详情中。例如：Windows 11 系统的设置界面，可设置系统的全局属性。2. 功能对话框功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能，如打印、文件上传/导入、插入对象或拼写检查。该对话框不仅允许用户启动一个动作，而且也允许用户设置动作的细节，属于模态对话框。例如：浏览器的打印功能，会弹出模态化的打印窗口，用户可设置打印的细节。例如：飞书的文档导入功能，使用模态化对话框，引导用户选择文件类型或进行批量导入操作。3. 进度对话框进度对话框是由应用程序启动的，而不是由用户请求而启动的。它们向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。每个进度对话框都应该向用户清晰地展现如下信息：一个耗时的进程正在进行现在一切正常该进行还有多长时间才能完成还有多少事情或项目没有做完用户如何才能取消该操作，或重获控制权例如：使用 Axure 软件导出 html 文件时的进度提示，既提醒用户当前 Axure 正在运行，又告知用户当前文件导出进度。例如：使用 Sketch 软件导出文件时的进度提示4. 通知对话框通知对话框将一些重要信息报告给用户。来源可以是一些触发的事件，也可以是其他用户的通知。常见的有通知中心对话框，处理完成某个操作的告知等等。例如：花瓣的通知提醒例如：脉脉的隐私政策阅读提示和汽车之家的开启通知提示，均采用模态对话框方式5. 公告对话框公告对话框，和进度对话框一样，由应用程序直接启动，不是由用户请求发起的。公告对话框有三种：错误、警告、确认。这种对话框通常不会要求用户填写什么，只会询问你“真的要进行吗？”或者告诉你一件事情。所以在这种对话框上，一般只会有只有[取消]和[确认]，或者[OK]。属性、功能、进度对话框，是用户主动请求的--它们为用户服务。但是，应用程序发起的公告对话框--它们为应用程序服务，常常会牺牲用户利益。由于公告对话框比较常见且常常牺牲用户利益，那么我们怎么把这些讨厌且无用的公告对话框直接铲除掉，换成更加友好、能给用户带来真正帮助的交互方式呢？接下来我们来一起看看怎么让公告对话框“名声鹊起”。三、怎么让公告对话框“名声鹊起”我们可以从应用本身和对话框本身着手提供友好的交互方式，减少公告对话框的出现频率。1. 应用方面解决用户错误的方法不是指责用户，让用户再认真一些，或者给他们更多的指导练习，而应该优化应用设计，让犯错变得困难。① 让应用变“聪明”，减少用户犯错使用有界控件。比如验证码输入框、数字键盘等示例：登录蓝湖时的短信验证码输入框示例：转账时输入金额的数字键盘，金额大小的位数提示；平安口袋银行的身份证号专属键盘提高可见性，用户可自主纠错示例：输错密码是一个很难避免的错误场景，语雀密码登录支持可见密码，一来是考虑安全问题，二来在用户输错的场景下可以打开眼睛，即可见密码，减少出现错误频率。具备预判思维，在容易出错的地方提供更方便的功能示例：在支付宝聊天窗输入一串数字，支付宝发现这个问题后，提供了识别后直接转账的功能，预判了用户的惯性，减少错误发生Zoom 拉会前预设值在加入会议室的界面，提前选择是否在进入会议房间后“不自动连接语音”和“保持摄像头关闭”，有效避免忘记闭麦或者忘记关摄像头就直接加入了线上会议的意外尴尬让操作可“复原”，提供撤销功能在很多破坏性的操作都会二次进行提醒，让用户确认操作，比如说删除操作。在删除之前都会询问用户“你真的要删除吗？”想一想……你在看到这些提示的时候，是不是眼疾手快地按下那个「确认」按钮？这种对话框在没有容错处理时，非常容易被我们这种无脑按「确认」的用户酿成大错。比如我“手贱”只是试试这个删除，然后就把某个表几千条辛苦写了一个月的数据删掉了，由此可见系统的容错处理有多么重要。示例：Windows 系统在早期的时候，删除文件时会让用户进行二次确认，但这是完全没必要的，因为删除文件不是真正的删除，还会在回收站里面。Mac 系统：在回收站删除文件将是永久性删除，此时的确认对话框才是对用户有用的。2. 对话框设计方面从对话框本身的设计优化出发，我们可以对话框的使用场景和文案方面着手进行优化设计。① 对话框使用场景其实什么时候使用对话框、是否使用取决于你要给用户展示的信息是否重要。例如你在手机上买了一张电影票，支付失败的结果如果用 toast 展示就会容易被用户忽视。那么等到用户到了电影院才发现自己购买失败，那么用户极有可能当场卸载你的产品。模态弹框会打断用户当前操作流程，所以「使用对话框要克制」。总原则是：能在界面展示就不用弹框，能用非模态弹框的就不要用模态弹框。总之，重要的信息优先考虑使用对话框。具体的使用原则有：弹框使用尽量克制。文字需要精简，使用行为召唤动词。注意区分复杂任务和轻量任务，选择对应的弹框类型。反馈要及时。可使用引导帮助选择。② 清晰且友好的文案如果非要使用对话框，那么请使用友好尊重用户的方式。当我们说到人与人之间的交流时，语言是重要的媒介，而用户与产品之间同样如此。在设计过程中应始终努力设计出有效的提示性文案，但是, 一定是有比没有要好吗？个人认为也是不必要的，糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况：含糊不清过于啰嗦无意义，产生误导无同理心因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑，甚至可能会破坏品牌对用户的忠诚度，产生本末倒置的结果， 也给用户带来不佳体验。所以，语言是使产品更加人性化的主要因素。产品的文案则充当了语言的角色，它可以使用户参与其中，影响他们的情绪，并把这种人机的功能性关系转化成人类的个人情感体验。而这种用户的情感体验才能够真正的彰显品牌个性，从而与其他产品区分开来。错误提示设计三步法尽可能准确地描述问题和哪里出错了，简明易懂。提出建设性意见，解决问题，保持流程前进不中断。如果此时问题还不能解决，告诉用户可以做些什么来帮助他们，以及他们可以向谁求助。不要责怪他们，礼貌的对待用户，在报错中加入情感。总结对话框可以成为帮助用户完成目标的有用助手，而不是让他们在每一步操守挫败的可怕绊脚石。通过保持对话框的可管理性，并且只有在他们的功能真的属于另一个房间的情况下才调用他们，你将很好地维持用户的工作流状态，保证他们会成功完成任务，并且满怀感激。本篇来源：优设网原文地址：https://www.uisdc.com/dialog-box-design
用户 书架 起点 起点读书的用户数在今年迎来了 5 年来最大的增长。随着网文行业成熟，用户构成与行为模式也在迭代，下半年我们对起点的书架页进行了一次改版，探寻适合新阶段的最优解。—— Yanni、FANYI关于书架从现实中厚重典雅的书架、早年 app 常见的木质拟物 UI 书架，到今天起点 app 的书架，书架始终是读者保存与组织书籍的地方。但不同的是，网文的书架，注意力在不断更新的文本和推荐的内容，书架更像一个订阅源的集合。起点书架提供了列表和图墙两种陈列模式，单行列表模式被 90%用户使用，因为列表模式展示了更丰富的作品更新信息。往期案例：用起点读书的实战案例，教你从AE制作到落地开发的方案导语动画可以辅助视觉制作焦点，引导注意力的方向，越来越为广大视觉设计师青睐。阅读文章 > 一、背景随着行业成熟，书架功能累积带来可用性的挑战。尤其是今年，起点用户量大幅增长，用户内部开始有细分的需求，我们也时常听到不同的声音。起点承担了培育精品内容的职责，平台上追更用户更多。在书架这个重要路径，互动和召回能力有精细打磨的空间。2016 年（左）～2022 年的起点读书书架二、挑战新的起点 — 探寻新的最优解用户与业务的的诉求交缝，我们迎来了一次产研协同的改版机会。作为体验设计师，我们希望提高核心功能的满意度，让不同用户获得简洁高效的使用体验；同时，作为网文行业的设计师，我们也希望设计用户合理路径，重构有助内容业务健康发展的功能形态。三、洞察用户直觉认知的书架，是一个非常 简洁 的页面，这也是我们收到的持续的诉求和期待，然而事实并非如此。1. 来自书友的洞察起点的用户研究员和设计师合作，访谈了书架深度用户，其中包括部分担任作品运营官的专业网文用户。同时我们测试了现有的起点 app 和改进方案初稿，希望了解他们遇到的挑战和见解。我的地盘被挤占书架是起点流量最集中的页面，除了书籍列表，还有关联留存和福利的签到、阅读时长，以及承担孵化作品职能的导读。这些功能争夺注意力，并让用户感到属于自己的空间被挤占。自动使人焦虑网文作品生命周期的变化，如更新、下架使作品在列表中的排序变动，让用户感到不稳定和焦虑。不同场景，对书架功能的期待动态变化同一页面承载多个用户场景：日常追更时-书架是「床头柜」，用户只关注自己在看的两三本书，功能越简单越好；书荒时-书架变成自己维护的一个「书城」，找书的地方，希望一秒钟把养肥的书翻出来，依赖排序、筛选等功能，工具属性变强。用户分群，形成不同需求部分用户习惯保持书架只有少量书，而有些则会添加上千本。普通用户会出于对作品的支持成为作品运营官。分群用户养成了不同的书架使用习惯。网文阅读时间长、平台经验越久的用户，对书架要求越高。这看起来像少部分专业用户的烦恼，但对于起点来说，核心用户正是阅读沉浸度高，书龄近 5 年的资深网文读者。设计无法消除复杂性，而是将复杂性放在合适的位置。2. 深入现状3421 份 用户问卷展现了更详细的用户特征和行为差异：书架不同作品数用户的常用功能与难用功能书籍量 与高付费、高活跃、网文阅读历史久正相关，是 资深网文用户 的一个特征；书架常用功能 TOP3 签到、推荐票、书详情 ，其中 两个是单书功能卡的快捷操作；书籍量超过 500 本的用户对管理需求显著更高，对已有功能批量管理、排序、筛选的不满程度远超其他用户；书架作品数多的用户常用互动功能，也更易书荒，导读使用率和接受度都更高。除了阅读书籍，书架还是支持运营作品的重要节点。这个发现让我们感到兴奋，它也揭示了重塑更优路径的机会。四、设计方案1. 重新定义信息布局① 弱化导读侵占感新版本每日导读和书列表分区更明确，书列表展示区域更大，满足用户对于「我的地盘」拥有感的期待。② 围绕行为组织功能排序、管理、筛选等功能聚合为管理操作栏，方便快速找书。低管理需求的用户也可以选择自主关闭，保持书架简洁；③ 隐藏高级功能筛选是典型的深度用户需求。新版在原来的筛选功能基础上做了分级。点击筛选，快捷操作栏展示高频条件；再次点击更多才会展开更专业的多维筛选。④ 符合直觉的排序为什么加的书会乱窜？—— 访谈原声用户在日常追更和主动使用排序功能找书时，对排序功能持不同的预期。我们明确两种场景，重构了排序规则。追更场景：日常使用、刷新、自动同步——混合排序；例如，用户使用更新时间排序，数据刷新时更新的书往自动往前排；同时假如用户刚阅读过一本书，其也会自动往前排。主动找书场景：手动切换排序——仅使用排序维度重排。2. 提供高效工具一个分组里 795 本书，书太多了管理一次好几个小时。—— 访谈原声起点超过 3 万起点用户书架里有 2000 本以上的书。我们希望书架不止可以愉悦追订，也可以完成高效的管理。管理功能在书架上占据更重要的位置，批量管理应当拥有更好的操作体验。用户对于管理的诉求各不相同，但他们普遍会保持一套自己分组的逻辑，譬如按身份、按粉丝值、按养肥、按状态等。① 支持组别间快速切换旧版本的书架在进行分组管理时，需要频繁进入分组再退出分组，反复查看作品所处位置，这一点极大增加了用户管理分组的成本。新版本增加了分组快速切换的能力。用户在进行批量管理时无需多次重复操作，滑动浏览过程中会收起分组更专注选择。② 全部作品——支持跨组别管理考虑到用户可能存在多个组作品同时处理的情况，我们增加了全部作品列表，用户可以无视当前分组状况对指定作品进行操作；同时考虑到用户作品数量可能较多，可选择临时勾选按书名排序，实现快速查阅。③ 快速多选操作细节上，增加手势滑动快速多选及快速全选分组，提高操作效率。3. 加强人与书的连接追订模式由起点首创，天然更容易形成读者对特定作者的黏附，开启了网文产业化运作。出于对后续情节稳定获取的需求，读者又形成了「养书」的模式，先把新书加入书架，稳定更新到一定字数再去「宰书」。用户对追更提醒有诉求，单每章提醒略显频繁，积攒的字数太多又会使用户觉得难以追平，感到压力。① 完善追更能力阅读路径上，增加轻量的追更功能触达。每天第一次阅读书籍返回书架时，在书籍上方提供快捷开启提示作品更新过程，完善对更新章数、字数 按节点 提醒的能力「养肥」作品提醒。开启更新提醒后，如作品未读内容超过设定节点，展示「已养肥」标签，便于在合适的时机跟上更新进度。② 互动「月票机制」建立了读者和作者的强互动关系。同时围绕一本作品建立的书友值和书友圈，进一步加强了起点内部的情感凝结。这些互动让正版阅读生态活跃而有生命力。单书功能卡是书架的一个特色功能，除了承载管理操作，也是跳转书友圈、投票打赏的快捷入口。新版本对单书功能卡的互动、管理、票赏功能做了更明确的分区，同时高频票赏功能保留在底部符合习惯的位置。4. 重新审视行业范式对于书架中的「分组」，4 本书封宫格排列是一种行业范式。用户反馈「很难从列表里一眼识别出分组，有两个原因。一是起点资深用户囤书数量大；二是网封风格特点：起点书封系统覆盖了 70%的新书，相比单本定制的出版书封，网封的色块、疏密的对比更弱。4 本宫格形式有它的优点，露出书封多，少于 4 本时有数量的隐喻，但显然这些在图版率较大的图墙模式体现更明显一些。缩小书封比例、增大了图与留白空间的对比可以改善识别，列表模式下书封尺寸小，效果也比较有限，这个区域更像书和组的「logo」。我们引入了文件夹的形式，通过 颜色辅助 识别，配合组内置顶功能，可以曲线 自定义 分组的封面。5. 每一本好书，都是新的起点符号是文化的抽象体现。什么样的视觉符号可以传递 网文印象 ？网文是开阔而喧哗的大众文本，我们选择了「江湖」这个意向。江湖是天下，是生生不息的江河湖海，又是庄子所言与庙堂相对，广阔逍遥的适性之处。书架背景上，柔和的抽象图形描绘了辽远的山河图景，朦胧变化的极光色营造「织梦」感，几抹文字笔画「点」飘散其中，勾勒文学超越平凡生活的浪漫想象。起点今年提出了新的品牌主张 “让好书生生不息” ，缺省态、本地书的封面等细节露出品牌意象，传递起点的愿景。五、结语身为内容行业的设计师是幸运的，中国网络文学正在成为具有时代意义的文化现象。刚刚落幕的起点读书「网文填坑节」吸引了超 7000 万用户参加。网络文学的意义已不仅是创造了多少传统文学标准下的「经典作品」，也在于带动了无数普通人参与了这场盛大的文学实践。希望通过起点设计师的努力, 给每一个用户带来简单、愉悦的阅读体验，共同见证更多自由书写、深刻共鸣与恒久感动。让起点继续陪伴作者和读者，走好每一步。欢迎关注作者的微信公众号：「阅文体验设计YUX」本篇来源：优设网原文地址：https://www.uisdc.com/starting-point-reading-bookshelf
你想 用户 对象 平常在日常的工作中，经常会发现小伙伴们对于一些属于会有混用的情况，比如“登录”和“登陆”、“稍候”和“稍后”、“预定”和“预订”……虽然有些术语之间只有一字之差，但其用法天差地别。今天笔者整理了一些产品设计中常用的易混淆术语与大家分享，希望能给各位在工作中带来一些参考和帮助。往期分享：产品设计中如何正确运用标点符号？5个章节帮你掌握！一、前言标点符号，是辅助文字记录语言的符号，是书面语的有机组成部分，在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质，帮助使用者有效表达思想感情和理解语境。阅读文章 > 一、登录 vs 登陆登录和登陆是混用率较高的一组词汇。首先，登录是一个信息名词，在英文中的表达为 login，是指进入操作系统或应用程序（通常在远程计算机上）的过程。我们平时用到的扫码登录、密码登录、验证码登录其实是用户登录的不同途径。为什么我们需要登录呢？登录的核心目标是为了完成用户身份验证，建立和用户之间的唯一关联性，也就是如何证明“你”是“你”。而验证用户身份无非是为了两个权限的控制：“读”和“写”。“读“是用户自己获得和自己个人相关的信息的权限控制，”写“是把用户的行为、用户和网站的交互内容记录下来的权限控制。只有核实了“你”是“你”，才能把和你有关的读取和写入数据库的权限开放给你本人。而登陆呢，在英文中表达为 land，我们经常听到的“诺曼底登陆”，“台风即将登陆”，在狭义上是指到达多个地方（多指陆地），也可以作为军事用语，表示由空中或水域成功着陆，后来也引申为商品等打进市场。这个词并非是计算机专用术语，但你说为啥还有这么多网站在登录界面使用“登陆”按钮呢，唔，这个锅拼音输入法可不背。因此，如果你想表示“进入网站”，应使用“登录”，如果你想表示某产品功能即将上线，应使用“登陆”，两者不可混用。二、删除 vs 移除来看下面两个场景：① 你在商家后台创建了一个“双十一大促”营销活动，这时候因为某些原因导致该活动无法进行，你想把该活动删掉，请问在活动列表里，你应该用“删除活动”还是“移除活动”？② 你在商家后台创建了一个“双十一大促”营销活动，并且在这个营销活动里添加了很多活动商品，但是因为误操作，你不小心多添加了一款商品，你想把该商品从列表中拿走，你应该用“删除商品”还是“移除商品”？从字面意思上理解，两个词汇的差别在“删”和“移”，删除是“永久性”地去除操作对象，操作对象一般在系统中不再存在。而移除是“暂时性”地移走操作对象，操作对象在当前项目中不再显示，但仍存在于系统中。也许你会纠结，用户真的能理解“删除”和“移除”之间的区别吗？我们并不希望设计师一板一眼地只能在这两个词汇中二选一，所有术语的使用应该贴近用户心智，让用户了解当下语境并引导其做出正确的决策才是我们的最终目的。在企业微信里，如果你想把成员从群聊中移走，系统使用的是“移出群聊”而不是“移除客户”，而在通讯录里，如果你不希望和某人联系，就可以使用“删除客户”将其永久删除。从场景上看，“移出群聊”在语义上理解是从当前群里移走，但本身用户并没有被删除，更强调操作的临时性，从使用者的角度出发，是不是比「移除客户」更人话？三、新建 vs 添加站在巨人的肩膀上，我们来看看苹果是怎么做的。当你想在系统中建一个新的文件夹，苹果用的是“新建文件夹”，当你想把已有的图片同步到“照片”，系统使用的是“添加到‘照片’”。两者看起来意思差不多，如果改成“添加文件夹”“新建到‘照片’”似乎也没多大差别，那么两者区别在哪呢？首先，新建是一个计算机专用术语，指电脑中可以存贮文件的工具，比较常规的用法是使用“新建”的文件夹来存储同类型的文件，而这个过程通常是从 0 到 1，需要你手动配置，而“添加”其实就是增加，更强调把已有对象（通常为在对象列表中选择已有的对象）移动至一个新的集合里。我们在 Sketch 里也可以找到相同的用法，添加组件库是从本地已有的组件库集合中选择其中一个并添至 Sketch 的组件库里，而新建主要用在创建一个新的画板。前者强调增加，后者强调从无到有的搭建过程。因此，如果你想表达从无到有地创建一个对象，这个过程里需要一系列的输入或者配置，可以使用“新建”，如“新建图层”“新建商品”，如果你想强调在某个集合中添入已有对象，可以使用“添加”，如“添加联系人”“添加银行卡”。四、稍后 vs 稍候平时打电话打不通的时候，你可能会听到手机里的语音提示“你有一个电话正在通话中，请稍 hou 再拨”。请问这里应该用“稍候”还是“稍后”？从字面意思理解，虽然两者都有让人等待的意思，但其实还是会有严格的使用用法。后，表示后面，稍后本身是一个副词，一般后面会跟着其他的词语，如“系统加载失败，请稍后重试”，意思是系统出现了数据加载失败，需要你等一下再重新操作一下，一般界面中会出现“刷新”这样的动词操作。候，是一个动词，表示等候，稍候也就是稍微等一等，一般可用于单独使用，如“系统加载中，请稍候...”，意思是系统正在处理数据结果，请稍微等待一下（用英文来说就是 wait a moment）。因此，“请稍候”一般可以作为一个完整祈使句来单独使用，而“请稍后”需搭配动词使用才有完整意义。五、预订 vs 预定“预订”和“预定”的区别在于“订”和“定”，订可以表示订阅、订购，而“定”则表示决定、约定。预订，指事先订约购买东西。一般用在生活中订购物品等事情上，比如预订酒店、预订飞机票等，通常需要提前预付一定的金钱。预定，指预确定，事前规定、决定或约定。比如预定婚期、预定时间。两者最大的差别在于关涉的对象不同，预订关涉钱款交易，而预定则与时间、计划、方案、目标、地点等相联系。因此，如果你想要确定的事物与钱款交易相关，可以使用“预订”，而如果想强调计划好的事物不会轻易变卦，可以使用“预定”。写在最后看到这里，也许会有人说，有些词汇本来就意思相似，用错了对于用户也没多大影响啊？你看，在登录界面使用“登录”或是“登陆”按钮，用户都能理解这是什么意思，有必要这么“咬文嚼字”吗？这里引用伟大的乔帮主说的话：设计是人造产品的根本灵魂。如果连我们的“根本灵魂”都腐坏了，又怎么做得出好的，甚至伟大的产品呢？作为保障产品体验的责任人，如果连错别字这样的基础知识都掌握不扎实，谈何设计更优秀的产品体验？你在工作中还有遇到其他容易混淆的术语吗？欢迎在评论区留言，大家一起讨论。本篇来源：优设网原文地址：https://www.uisdc.com/terminology-science
用户 内容 场景 本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。更多增长设计实战：增长设计实战！如何用一个公式提升5倍转化率？设计师如何提高转化率？阅读文章 > 写在前面端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品，带来使用量的提升，从而实现用户规模提升的一种增长手段。随业务快速增长，有驾从百度汽车频道衍伸出了有驾小程序、M 站、PC 站以及 APP 等多纬度的产品矩阵，依托各端流量实现矩阵产品间的导流，逐步积累用户规模，是有驾目前获客渠道中占比最高的方式。本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。一、为什么要做导流1. 导流的目的对于业务本身而言，随着移动互联网流量红利期的结束，获取新用户的成本越来越高，不管是新产品还是成熟型产品，都需要通过导流的手段来持续扩充新用户。其次，对于有驾产品生态而言，需要各端产品间的相互联动，协同发挥优势，实现流量价值最大化。2. 导流的优势成本低，相较于投放、活动等渠道流量获取方式，矩阵导流成本低；高意向，用户购车意向明确更容易实现商业转化；可共享，用户数据及行为关联互通。二、如何做好导流设计1. 问题分析通过梳理核心场景的 4 种导流条，发现各个场景导流形式各异，用户缺乏统一认知，导流引导语单一内容吸引力弱。在用户在浏览页面时，点击功能入口或想要继续查看更多内容，需要下载 APP 才能继续阻碍用户浏览：缺乏统一认知：视觉表达形式不成体系，用户感知不够；内容吸引力弱：内容单一缺乏吸引力，用户没有点击欲望；阻碍用户浏览：打断用户正常使用功能，影响用户体验。从导流链路的用户行为来看，整个流程下载路径过长，发现用户流失较大的转化点：从小程序落地页到下载页：在进入小程序浏览页面时，用户没有注意到导流条就滑走了；点击导流条进入下载页：点击导流条会先调起导流弹窗，点击确认后再进入到下载页，用户未选择下载就退出了。2. 明确设计方向针对导流现状缺乏统一认知，内容吸引力弱、阻碍用户浏览、下载路径过长的问题，我们搭建了一个完整的导流链路图，根据用户增长模型，把用户生命周期各节点的用户行为与产品触点一一罗列出来，找到增长路径的设计机会点。通过以上的问题分析，如何建立用户和产品的链接，保障友好的体验，是本次导流升级要解决的问题。根据用户关键行为，我们可以将整个导流链路拆分为 3 个阶段来挖掘主要机会点：下载前：兴趣激发导流吸引，建立用户稳定认知；下载中：强化用户转化动机，刺激用户完成下载；下载后：保障还原体验畅通，提升首次使用体验。下面将分别介绍导流下载前阶段的设计落地实践，以及下载中、下载后阶段的延伸设计思考。三、下载前1. 强化触点吸引是否能成功引起用户注意，是转化开始的第一步，统一的视觉风格和满足用户诉求的内容，有利于增强导流条的吸引力。① 收敛导流条类型针对「阻碍用户浏览」打断用户正常使用功能、用户没有跳转预期的体验问题，下线了阻断式和截断式两种体验不友好的导流类型，将原来 4 种导流类型收敛为 2 种，仅保留通用导流条和功能延展导流条，基于这 2 种导流形态进行深入的设计探索。② 建立通用视觉标准针对「缺乏统一认知」视觉表达形式不成体系、用户感知不够的视觉问题，建立了通用导流条标准化规范。统一视觉形态，优化为页面内通栏嵌入式，同时融入品牌色强化用户感知，根据页面布局制定了不同的展示规则。上线后，内嵌导流条在展现受限的情况下，导流转化数据与改版前基本持平，为了进一步提升导流的点击效果，开始探索场景化定制提转的设计方向。③ 定制场景化内容针对「内容吸引力弱」内容单一缺乏吸引力、用户没有点击欲望的内容问题，在通用标准化形态的基础上，根据不同场景用户诉求点，丰富导流内容。分别从内容定制、按钮文案优化、以及氛围强化 3 个方向验证对转化的影响。内容定制：丰富导流利益点、场景化内容更能激发用户兴趣，促进转化达成；按钮文案：转化按钮文案导向性明确、内容与导流利益点匹配，可以助力按钮转化提升；氛围强化：导流样式上适度弱化氛围、样式更倾向于原生功能，有助于提升导流条点击。2. 拓展场景扩量复利通用标准导流条的成功经验，应用到功能延展类导流条中继续验证有效性，从产品价值点出发，挖掘高流量场景的机会点从而带来转化增量。① 价值传递根据小程序和 APP 两端各自的不同点，分别从功能差异及体验差异两个方向进行优化。APP 特有功能：APP 完善的功能体验可以更好满足用户诉求，例如参配浏览场景下，引导用户体验搜索及横屏查看的高频功能，对于导流转化有正向帮助；各端体验差异：小程序和 APP 两端体验存在差异，例如图片浏览场景下，APP 清晰流畅的浏览体验及放大全屏查看图片的交互体验，能够刺激用户转化。② 价值延续当用户完成核心内容消费后，是否可以引导用户去 APP 继续浏览更多相关内容，进而引导用户下载呢？服务透传：平台服务内容传递，例如在内容落地页文末增加品牌广告导流条，帮助用户建立品牌认知；相关推荐：引导相关内容消费，例如在文章或视频页增加相关推荐导流条，引导用户浏览更多相似内容。四、下载中当用户通过导流条进入到下载流程时，还有哪些手段可以刺激用户激活减少流失呢？强化下载动机：下载页前置 APP 落地页内容，例如将通用下载页优化为场景化下载页，给用户超前产品体验吸引转化；减少用户流失：缩短链路简化流程，例如可在下载中间页完成应用下载，同时退出下载页时增加挽留。五、下载后当用户在应用商店下载完成后，我们还能做哪些提升首次启动 APP 的体验呢？还原链路畅通：提升场景还原成功率，减少频繁提示信息干扰；建立用户心智：引导新用户探索功能，根据用户兴趣推荐适合的内容。以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考，为大家提供可以继续探索的方向。写在最后总结一下本篇文章关于导流的体验设计要点：全链路洞察，对导流链路进行拆解，通过盘点导流链路的用户行为，明确每个节点的设计方向；降低广告干扰性，减少用户浏览过程中的阻断感，适度弱化广告氛围；用户的视角引导，让用户专注于产品本身传递的价值，引领用户完成对产品的探索从而完成下载激活。希望以上的设计思考，可以带给大家一些启发。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/diversion-design-2
设计规范 操作 用户 前言B 端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态，在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解，希望可以带来一些启发。本篇先谈谈设计规范制作的指导思想--设计原则，后续文章再展开讲一下常见各种组件的设计规范。一、设计规范作用设计规范作为 B 端设计中非常重要的一环，它的作用主要体现在以下三个方面：在日常工作中，当项目组收到一个新的需求时，如果已经具备了成熟的设计规范体系，其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。以下是具体工作流程：二、设计原则通过前面内容我们知道了设计规范对于产品设计意义重大，那么制定设计规范制定依据又是什么呢？这里就要引出设计原则这个话题，设计原则是设计规范的总的纲领，所有的设计规范都应当以设计原则为基准。设计原则主要包含以下内容：接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。1. 清晰清晰原则主要从视觉角度让界面信息传达合理，提高用户信息获取效率。主要包含对比，亲密，对齐，重复四个方面。① 对比：对比是指界面中为了区分信息层级，强化元素对比度，使用的很常见的一种手段，例如下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮；又比如通过对文字字号加大，字体加粗，颜色加深来与弱文案形成对比，凸显关键文字信息。② 亲密：如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。③ 对齐：在界面设计中，将元素进行对齐，既符合了用户的认知特点（我们往往倾向使知觉对象的直线延续还是直线，曲线延续还是曲线），也能引导视用户视觉流，让用户更流畅地接收信息。④ 重复：重复是指相同的元素在项目中重复引用，作用是可以有效降低用户的学习成本，同时提高这些元素之间的关联性。2. 高效高效原则体现在便捷、轻量、简化、一致几个方面，目的是通过合理的方式让产品操作更加便捷；交互体验与内容更加轻量和简化；以及产品风格保持一致。下面结合几个常见案例说明如何应用这一原则。① 合理利用拖拽--便捷、轻量：在涉及到诸如上传文件，排序，滑动输入，搭建等需求时，合理采用拖拽交互往往可以打造更加便捷用户体验。② 尽量减少不必要的跳转--便捷、轻量：用户操作过程尽量减少跳转，以实现交互减步长，从而使用户操作更高效轻量。例如能用原位操作就不考虑展开收起；能用展开收起就不用气泡...依次类推（优先级从高到低：原位 ＞ 展开收起 ＞ 气泡 ＞ 弹窗 ＞ 抽屉 ＞ 新页面）③ 放大点击热区--便捷：放大可点击按钮热区，相对于较小点击热区，具备更丝滑操作体验。④ 悬停即现--轻量：利用悬停即现，避免信息过于重复啰嗦，简化页面提高阅读体验。⑤ 折叠次要功能--简化：页面功能按钮过多时，可将次要按钮收纳到一起，点击时再展开，外面只展示高频操作或重要按钮，保证页面内容简洁。⑥ 统一样式--一致：一致性是指在不同页面中相同操作应保持一致视觉与交互样式，可有降低用户学习成本与企业开发成本。3. 友好友好原则应贯穿用户操作前，操作中以及操作后三个阶段，给予用户及时反馈与帮助。① 操作前：在用户操作前给到合适的引导与帮助，有效减少用户迷茫感。② 操作中：通过交互效果以及页面样式让用户可以清晰感知到自己当前操作。③ 操作后：利用界面中元素变化清晰直观展示当前的状态4. 可控可控主要体现在自由和导航两个方面。① 自由：自由即指用户可以自由完成一些操作，例如回退，撤销，终止等。② 导航：导航是指用户随时知晓当前所在位置，而且可以利用导航随意到达目标页面。通过本篇内容我们大概知道了制作设计规范主要方向，那么具体到每个组件上，我们该如何去设计呢？后续篇章将细分聊聊如何去设计 B 端常见组件的一些内容。部分参考资料：《B 端产品设计-Mia》《Ant Design》本篇来源：优设网原文地址：https://www.uisdc.com/design-principles-2
物料 视觉 用户 前言这次节日活动做了节奏性规划，从题材探索、物料提效、数据论证几个方面，跟大家分享设计是如何深度参与活动当中的。更多节日设计复盘：腾讯案例复盘：如何从零开始打造一个动态节日闪屏？项目背景闪屏作为打开 APP 产品时首要展现的部分，品牌的「门面」顷刻尽显，在众多节日闪屏中如何凸显产品特征、体现品牌的文化性是节日闪屏的重要目的。阅读文章 > 一、活动背景“投资攻略”一直是平安银行理财业务打造大型的理财活动，每年的重大节日都会做，今年的元旦和春节为了让全国人民长假资金不闲置，假期有收益，平安银行理财业务在节前精心准备了投资理财攻略的活动。二、项目思考元旦、春节这类理财活动是没有 offer 的，更多靠物料宣传及推广，所以两次重点活动更多精力的是在探索主视觉的设计方向，希望以此来打动用户，并吸引用户进来“串门”。此项目主要分为三大阶段：前期阶段：主视觉概念设定阶段 -- 围绕题材、品牌角色设定做；中期阶段：活动入口物料 -- 提效设计及提高转化研究；项目后期: 数据验证分析 -- 总结问题和优化方向。1. 元旦项目主视觉概念元旦的理财活动周期时间短，物料单一，所以在策略上更多偏向前期的主视觉概念设定，以此保证活动顺利上线。① 题材方向思考元旦作为阳历新年，具有辞旧迎新的意义，所以围绕“跨年”“迎新”作为切入点，通过脑爆发散的方式列举有关的字眼来呼应主题活动，最终筛选出了正向、点题的关键词作为主视觉搭建对象——奔跑的人、红包、传统建筑。② 草图构思通过筛选出的关键词，结合主题，以草稿进行快速构思；草稿一：人物、场景没有节奏感，元素之间相对孤立，不协调需调整；草稿二：调整奔跑去抓红包的节奏感，口袋旺过于靠边缘了，舞狮过于抢镜需要调整；草稿三：主题与视觉紧密联系，表明“大步向钱冲”的意境。③ 配色方案为了让整体画面“跨年、迎新”的氛围感更浓，从配色和细节上做了一些探究，颜色上汲取中国传统配色作为参考。2. 元旦主 KV 产出元旦氛围：衣服的纹路、荷花、孔明灯、这些具有中国传统古典特色的元素进行画面融入，以此让用户感受到元旦的节日氛围；整体构思：“以大步向钱冲”的创作理念，来提醒用户“抓住理财收益”。① 春节的理财活动题材方向思考春节活动时间周期长，流量大，有更多时间去做设计策略和系统性规划，以此希望活动产能达到预期。题材方向思考今年春节是比较特殊的一年，因为疫情的持续影响，很多人只能选择就地过年。对于长时间没能回家的异乡人，自然对今年“春节”有了更多的期盼，所以今年视觉上除了体现理财概念也要更聚焦于“温情”、打造“团圆年”的愿景，希望以此来打动用户，并吸引用户进来“串门。概念提炼如何打造“温情喜庆年”呢？通过思维发散的方式来提炼关键词，最终晒筛选出以“家”为场景元素来搭建，希望借此将温情喜庆的春节氛围传递给每个用户。场景搭建“家”可以是住宅，是文化记忆，也可以是和家人在一起的情感化表达；家更像是温情的具体阐述，通过选用“家，最为我们的主场景搭建对象，灯笼、对联、烟花营造春节氛围。角色设定在人物设计上，主要从亲和力、喜庆为出发点，在着装和人物细节之处着重考虑，比如服装纹理参考和多人物之间的动态组合参考，既贴近真实，又具备温情感。配色规则元旦配色汲取了具有中国传统色系作为主物料的配色；春节配色为了增强喜庆氛围，采用了偏向大红色系作为主色系，更加符合过年热闹的场景。② 春节主 KV 产出③ 春节主视觉延展及应用微海报高效产出满足业务推广需求微海报在这次节日活动中，更新频率高，每天都要进行修改，所以在设计上通过主视觉图形分拆和素材库应用形成系列感，从而达到高效产出，满足物料推广需要。重点流量入口引流设计部分资源位流量较大，为了增加活动入口的点击率，设计上进行阶段性物料区分投放，前期进行节日营销，后期采用了“投资日历”的形式，示意客户做好理财时间规划，再不买就错过的急迫感。部分活动入口活动长图模板展示页三、数据验证1. 总产能数据通过视觉设计策略及表现最终吸引用户访问 PV 达到 560 万,UV41 万，比去年销售额和订单量同比增加 9%，整体订单转化率达 7.8%，优于去年。2. 成交数据发现活跃用户带来的理财销售占比 79%，主要集中于节前节后三天成交TOP 前三的销售产品，主要集中于节前节后成交3. 根据数据发现，后续优化设计策略重点在节前后三天物料进行差异化，强化用户感知，后续可重点突出销售高的产品介绍、募集倒计时、增加节后成交紧迫感。4. 重要流量入口同比数据提升注意到通过重点流量入口前后期不同物料投放，转化也有所提升，比如首页氛围转化率为 7.03%、弹窗转化 4.5%，数据环比元旦提升了 2.5pct 和 1.1pct，其它资源位，基本保持不变。结语本次活动前期的准备较为充足，物料宣传覆盖很广，在没有 offer 的情况下，通过视觉表现上的设计策略一样吸引了较多的用户预览，从而带动了产品复购，这为我们以后的工作留下很好的借鉴。本场活动也有一个经验上的汲取为后续提供优化方向，比如春节活跃用户大多数在节前 3 天，我们可以通过这 3 天与前期物料进行差异化，重点突出产品介绍、募集倒计时来强化用户感知和增加成交的紧迫感，来达到促销目的。欢迎关注作者微信公众号：「OnepinganDesign」本篇来源：优设网原文地址：https://www.uisdc.com/holiday-activity-design
用户 测试 问卷 用户研究对于设计具有重要的意义，不仅能够为设计团队提供可信性和权威性的依据，而且能够让团队与用户达成统一认知，帮助我们在设计问题上做出更全面科学的决策。最近浏览了超过 30 篇用户研究案例，总结了 3 种常见的用研类型：问卷、访谈、测试，以及具体的实践流程。分享给大家，希望对大家有帮助！！相关干货：万字干货！大厂最爱的用户研究方法全方位科普导读：这篇长文主要讲述了用户画像与用户体验地图在实际应用中的作用、差异、流程、实用技巧和关联。阅读文章 > 写在前面社会科学领域中将研究方法分为定性研究和定量研究 2 种，在开始介绍这些用研类型之前，我们需要先了解这两种研究范式的基本概念与区别。定量研究（Study on measurement）：定量研究是指确定事物某方面量的规定性的科学研究，将问题与现象用数量来表示，进而去分析、考验、解释，从而获得意义的研究方法和过程定性研究（Qualitative research）：定性研究是指通过发掘问题、理解事件现象、分析人类的行为与观点以及回答提问来获取指导性的结果。简单来说，定量研究和定性研究是相对的两个概念，前者考察和研究事物的“量”，后者考察和研究事物的“质”。因此，两者在研究范式上存在着明显的不同。 具体区别可以从研究目标、研究对象、研究方法、问题形式、结论表述 5 个方面来阐述。研究目标：首先，研究目标上，定量研究重视对目标的预测而定性研究重视对用户的理解。研究对象：研究对象上，定量研究强调事实的客观实在性而定性研究强调对象的主观意向性。研究方法：定量研究主要运用统计分析、建立模型等方法，设计师常见的定量研究工具有桌面调研、问卷调查、A/B 测试等；定性研究则主要运用逻辑推理、历史比较等方法，常见的定性研究工具有用户访谈、焦点小组、角色推演等。问题形式：定量分析只能回答少数简化轴上“多与少”的问题。而定性研究能够以丰富多元的形式回答“是什么、怎么样、为什么”等问题，能够真实反映现实情况的复杂性。结论表述：由于研究目标及方法的不同，两者在结论表述上有着较为明显的区别。定量研究主要以数据、模式、图形等来表述；定性研究结论多以文字描述为主。一、问卷问卷一般指的是“问卷调查”，是最为常见的一种定量研究方式，当然也可以进行某些定性的调研。它是由一系列问题组成，用户自行在纸上或线上完成答题。问卷调研的流程一般可以分为 5 个步骤。问卷准备-问卷设计-问卷投放-数据回收-报告产出。1. 问卷准备① 明确调研目标当你想要比较不同用户的答案、向大量用户进行提问时，可以考虑采用问卷调研的形式。研究一定要具备目标导向性，进行问卷调研之前，必须明确调研目标。目标的设定应尽量客观，很多设计师设定的目标只为了证明自己的观点是正确的，结果围绕这类目标的问题往往具有很强的诱导性。② 明确调研用户一个产品可能涉及到多个用户的使用，甚至会对用户做分层的运营，特别是 C 端产品，不同用户所使用的功能和习惯会截然不同，因此在设计问卷的时候，我们需要明目标用户的特征，新用户还是老用户？活跃用户还是流失用户？围绕用户属性采取不同的问卷设计策略。③ 选择问卷工具现在市面上有着非常成熟的问卷设计工具，都能满足问卷的发放及回收功能。目前比较常见的有问卷星、腾讯问卷、Credamo、金数据等。2. 问卷设计① 梳理框架框架应该满足先客观后主观的特点，问卷的框架可以分为 4 个部分，顺序依次是开场白-基础信息-封闭式问题-开放式问题。举个栗子：开场白：优秀的开场白可以提高问卷的完成率，告诉用户本次调研的目的，有多少道题目，会花费用户多少时间，用户坚持做完会有什么报酬等等。基础信息：一般是和用户特征的相关的题目，目的是为了快速捕捉用户特征，增加分析维度。封闭式问题：封闭式问题一般提供特定的选项，是一种客观的提问方式，是或者不是，会或者不会。开放式问题：这种问题可以得到非常多样的答案，是一种主观的提问方式。当你想要获得尽可能多的反馈时，可以提这种问题。比如对于产品的建议等。但请记住，不要在刚开始就问用户一些开放式的问题。否则用户可能会直接退出。② 设置题型、逻辑题型：几乎所有的问卷工具编辑时都可以预设几十种题型的选择，常见的有单选、多选、填空、评分、表格，高级的有矩阵、排序、量表、比重等等。一般来说，常见的题型就可以满足基本问卷的设计。逻辑：如果你想获取调研更多的信息，可以对选项设置不同的逻辑关联，常见的逻辑类型有 3 种：关联逻辑、跳转逻辑、引用逻辑。示例如下：③ 设计后续回访问卷调研有一个弊端，不能对用户的回答进行补充提问。所以我们需要设计一个后续回访的方式，比如留下你的联系方式，或者给用户一个同意后续联系的操作。总之，确保问卷回收后可以追溯到问题的来源进行补充提问。3. 问卷投放① 圈定目标人群问卷投放不是遍地撒网，投放时根据目标控制答题者的年龄、性别或地域等条件，做到目标人群的精准投放，回收的数据才会更真实有效。② 选择投放渠道渠道可以是单一的，也可以是多元的。常见的投放渠道有微信群、朋友圈、问卷二维码、群发短信与邮件等。C 端产品由于用户体量大，一般会在产品内部预留问卷入口。B 端用户发放路径会有限制，可以找运营团队、客服团队针对性的发放。4. 数据回收① 筛选样本一般来说，参与的人数越多，得到的信息就越可靠，主观信息也是这样。因此，在研究中，尽量多收集一些信息。但并不是所有的信息都是有价值的。在样本回收后，我们需要剔除无效样本，筛选出有价值的样本，保证数据真实性。一般来说筛选样本可以通过 2 种方式：自动筛选、手动筛选。自动筛选：如果计划回收的问卷数量很多，建议在问卷投放时制定无效问卷的规则，比如省份、城市、填写所花时间等。问卷星、腾讯问卷等工具都提供了自动筛选的功能。手动筛选：对于样本量较少的问卷可以采用手动过滤方式，下载初始数据后，对样本进行逐一筛选。最终保留有参考价值的数据。② 单一维度分析单一维度和交叉维度是相对的概念，我们回收的每个问卷数据，都可以看作是单一维度的分析。③ 交叉维度分析设置一个或多个自变量（X）和因变量（Y），通过交叉分析，取得综合结果。一般来说，自变量常常客观信息（性别、年龄、身份）等，因变量常常为要分析的客观问题或者主观问题。通过交叉分析，我们可以得到更加全面、有价值的数据。5. 报告产出① 原始数据原始数据指的是未经分析与转化的回收数据。原始数据的文档不需要在汇报中展示，但原始数据的留存对于团队外的分享和后续的复查具有意义。一般在汇报时，我们会在报告的结尾处附上原始数据的链接，方便感兴趣的同事查看。② 总结规划总结一般包括调研目的、数据回收情况、分析结论、优化建议。如果是定量研究的数据，可以在报告中用模型、图表的方式来表述。用户主观描述的定性问题，也应对问题进行大致的分类，方便在报告中展示。除此之外，有了研究数据之后，需要分析一定要有后续的解决方案和大致的规划，形成完整的闭环，进一步突出调研的价值。二、访谈访谈就是你事先准备好一系列问题，然后当面询问用户。访谈调查是通过向受访者提问来获取信息的总称。是一种定性调研的方法。常见的访谈方法有用户访谈、焦点小组等。访谈的流程一般可以分为 4 个步骤。访谈准备-进行访谈-输出结论-报告产出。1. 访谈准备① 确认访谈目标尽管访谈可以和测试者直接接触，但在收集用户使用产品做什么、如何使用产品等方面表现并不佳。访谈更擅长收集用户的某些行为习惯或使用哪些产品方面的意愿。所以在进行访谈的初期，我们需要深入的探讨用户研究的目标，从而选择合适的方式。② 招募用户访谈不同于问卷，是一种点对点的用研方式，所以访谈用户的筛选比问卷更加严格，除了符合目标人群外，还要划分用户是否具有代表性。如果你需要对多个用户进行访谈，你还需要考虑目标用户的配比，尽量找一些能代表不同人群的用户。常见的用户招募渠道有 3 种：内部推荐、问卷筛选、机构代理。③ 预设访谈大纲访谈的过程是网状的，如果缺乏结构性的串联，很可能在访谈中迷失方向，导致漏掉某些重要的内容。从内容的划分上，访谈类别可分为：非结构式访谈、半结构式访谈、全结构式访谈三种。非结构式访谈：指有主题、却没有操作化为具体访题的访谈，是非正式的、随意的。只需要让用户充分表达自己的观点即可。半结构式访谈：有主题，有大纲。是一种比较灵活的访谈方式，可随时调整问题的顺序、新增问题等，是实际的工作过程中最常用的一种形式。全结构式访谈：把研究问题操作化为具体访题、且访题之前有严谨逻辑结构的访谈。在访谈大纲顺序不变的情况下，用户可以进行自由的表述，并进行补充提问。对于访谈经验不足的人员，建议采用半结构式访谈和全结构式访谈的方式。提前预设好访谈大纲，方便及时发现未访谈的要点，以此增加对整个访谈的把控。④ 确定场地、时间当你想对多个用户同时进行访谈时，你会发现，把他们聚集起来并不是一件容易的事。所以尽量在招募成员的阶段就确认好访谈时间，防止出现招募后时间冲突的情况。访谈可以在很多地方进行，可以直接去受访者的家里，也可以邀请受访者聚集到某一个地方。大部分情况的是请用户到公司来，然后使用公司内部的会议室进行访谈。访谈人数较少的话，建议选择公司附近的咖啡厅等一些温馨舒适的公共区域，这种访谈环境不会有太强的压迫感，从而减缓用户的紧张情绪。⑤ 准备访谈报酬访谈需要花费用户的时间，除非你和访谈对象关系很铁，否则最好准备一下访谈的报酬，让用户知道这次行动是有回报的。有了报酬体系，不仅可以让用户认真对待这次访谈，还能方便后续跟进前期访谈没有注意到的问题。⑥ 准备相关素材除了与受访者交谈，访谈需要全程记录内容。所以在人员配比上建议由 2 位以上的设计师参加，一位负责引导谈话并适当做些笔记，另外一位负责详细记录访谈内容，查找提问的漏洞。道具上除了笔记本、电脑这些基础的设备外，你还需要准备录音工具和记录工具。这里推荐几款不错的提效应用 印象笔记、石墨文档、魔音助手、Verse 等。如果你需要将用户的内容进行公开，还需要准备一份授权协议书，尊重用户的隐私。人员：至少 2 位（一个提问、一个记录）道具：录音工具、记录工具、访谈大纲、授权协议2. 进行访谈访谈流程可按照开场白-探索式访谈-开放式访谈-封闭式访谈-结束语的步骤展开。① 开场白人们对于陌生的人和环境有着本能的排斥情绪，好的开场白可以减少用户的紧张情绪，消除用户的担心，快速建立信任关系。我们首先可以进行简单的寒暄和自我介绍。通过轻松的沟通先活跃气氛，让用户更加放松。紧接着就可以告诉用户此次访谈关键信息：此次访谈的目的、时间等。② 探索式访谈早期访谈具有探索性质，重点是了解用户一些基本属性。问题通常较为广泛、开放。较少探究细节。目的是为了对用户有了一个比较彻底的了解。如果访谈人员直接切入核心话题的话，就会导致用户省略原因和背景，直接表述结果的情况发生。③ 开放式访谈在对用户有一个比较深入的了解之后，设计师可以按照大纲提出开放式和明确的问题，形成初步轮廓。这时的问题通常更关注于细节和深度。用户在回答一些问题后，可以适当的进行补充提问，确保得到用户更开放、深入的回答。④ 封闭式访谈访谈的后期，设计师依靠先前观察到的用户模式，快速回顾访谈的内容和回答。聚焦到与调研目的相关的核心信息，对任务和信息需要的假设进行细微调整，提出更多侧重封闭型的问题，对数据进行收尾。⑤ 结束语结束的时候向用户表明本次访谈已结束。向用户表达感谢。如果访谈过程中得到了一些负向的反馈，告知用户问题我们很重视，会尽快把收集到的访谈内容反馈给相关部门。如果提供了奖品和红包也需在访谈结束后一并发给用户。一些参与度高、善于沟通的优质客户，需要在访谈结束后维护好关系，方便再次访谈。3. 输出结论① 整理原始记录原始记录不需要任何修改，一般来说，负责记录的人员会在访谈的间隙快速整理笔记，对之前记录不完全的部分进行补充以及快速的检查。但难免会有一些问题记录的不够充分。这个时候需要设计师整理一下原始记录。对记录进行查漏补缺。② 问题归类没有任何一个开发人员希望拿着访谈录音再听一遍。对不同用户遇到的相似问题进行归类，聚焦到大致的问题类别。适当情况下，可以突出问题比较多的模块。这样不仅方便其他成员进行查阅，对后续解决问题也有指导性的帮助。4. 报告产出① 原始文档原始文档一般包括 2 份，录音文档和笔记的文本文档。如果录音清晰的话，可以使用一些转化工具，直接生成录音的文本，提高产出效率。② 优化建议不是所有的访谈都要给出明确的产品建议，但对于报告来说，优化建议很重要。访谈研究的建议往往基于访谈记录以及被访者提出的问题。很多设计师会把访谈过程中的用户建议当作产品下一步的推进方向。其实这是不正确的。设计师要理解和转化用户真实的需求和动机，然后再把真实的需求落实到具体的产品流程中，从而给出产品的优化建议。三、测试测试是测量用户与产品交互特点的一系列技术总称。一般来说。测试需要在较为完善和连贯的设计成品上进行，通常是为了验证某一个产品的设计。也就意味着，测试一般是放到设计周期的后期进行。常见的测试类型有可用性测试、A/B 测试、眼动测试等。测试的流程和访谈类似，但操作内容有区别，访谈流程也可以分为 4 部分：测试准备-进行测试-输出结论-报告产出。现在越来越多的公司将测试流程纳入产品生产周期，甚至有专业的测试团队进行测试。对设计师来说，测试可以保障线上还原度和体验闭环，对于保障用户体验至关重要。这里主要介绍可用性测试。1. 测试准备① 建立测试标准组织者需要在测试前建立测试标准，目的是更好的观测用户体验。国际标准化组织覆盖（ISO）人机交互部分把计算机“可用性“规定为 3 个指标：有效性、效率、用户满意度，这 3 种指标是比较常用的可用性指标。组织者可根据测试目标，自定义二级指标内容和规则。② 招募测试人员现在的互联网环境中，很少有公司会花费成本招聘外部人员进行可用性测试。所以可用性测试人员一般都是公司内部的相关人员。如果需要招聘外部人员进行测试，招募渠道可以参考访谈的招募渠道类型。③ 准备测试材料测试的准备材料主要包括测试文档、测试设备、录音设备、录屏设备、记录本等。测试文档：包括测试前的测试标准表、任务脚本；过程中的记录表格；测试后的体验测评的表格等。测试设备：取决于目标用户群体主要使用的设备，如果目标群体大部分是安卓系统，那么我们应该配备不同型号的安卓手机。如果我们测试网页这种涉及多设备的场景，需要准备好不同的设备。录音设备：和访谈一样，我们需要录音设备记录测试的过程。便于测试结束后进行详细的信息整理，可使用手机自带录音功能或专业录音笔。录屏设备：录屏资料可以帮助定位到操作过程中的许多细节。一般的电脑、手机这些测试设备都会自带录屏功能。如果部分测试设备无法录屏，则需要自备录屏道具。记录本：记录测试过程中用户的行为。④ 确认时间、地点和访谈一样，测试前需要确认好地点和时间，一般来说，大部分的测试地点是在会议室进行，需要注意的是，测试的过程需要录屏和观察，所以测试区域的分配上要保留测试区和观察区两块区域，保证能够清晰的看到测试者的情况。2. 进行测试① 发布测试任务进行测试之前，我们需要将测试剧本分配到具体的测试者，测试任务一般包括 2 点：任务目标和情境条件。任务目标：指的是本次测试想要完成的最终目的，情境条件：指的把任务润色成用户一个实际的使用场景，或者给任务设置约束条件。比如你想测试某个购买流程，目标是让用户完成购买操作，情景条件是价位、品类和功能限制。测试任务可以写成：你想要购买一个价位在 150-200 之间的 XX 品类商品，不使用搜索功能的条件下完成本次购物操作。② 观察与记录观察：观察员通常由项目高参与度的专业人员担任，设计师或者产品经理。观察用户的操作过程中的表情、行为、表述内容等。观察员在观察过程中应该保持中立、客观，可以适当的时候深入问询问题，帮助用户表达潜在的意图。记录：观察员需要尽可能的完整记录被访用户的言语内容、情绪、用户操作路径、完成情况等。这样比起后续听录音笔、看用户操作视频再来记录会更高效。而且在用户测试完毕后，需要对测试过程中遇到的问题进行补充提问。③ 体验评测一般可用性测试完毕后，可以使用一些方式去评测流程的整体满意度。除了直接询问外，比较常用的方法有场景后问卷（ASQ）和系统可用性问卷（SUS）。场景后问卷：ASQ 是一份五点或者七点量表，共有 3 道题目，评估维度从任务难度、完成效率、帮助信息三个方面获取测试者的直接反馈。通过得分/总分的方式取得一个平均分值，平均分值越高代表体验越好，只有大于 0.6 才能合格。系统可用性问卷：SUS 量表被认为是 80 年代经典的可用性问卷标准，SUS 用于评估对整体系统的可用性，它是一份五点量表，共有 10 道题目，评估维度有可用性和可学习性。SUS 分数计算比较复杂，经过大批数据的研究和应用迭代。最终的分数计算方式有 3 步，步骤一：所有奇数题目得分减一后相加；步骤二：所有偶数题目得分由五减去后相加；步骤三：将奇数题最终得分+偶数项最终得分，然后再乘以 2.5 即最终 SUS 得分；得到的总分对应以下不同的评级，共有 ABCDE5 个级别，一般来说，大于 70 属于合格。3. 输出结论① 数据收归一般来说，测试过程中的问题一般会聚集到某个点，数据收归的目的是对各种问题进行分类整理，类别可以按照划分的指标类型、解决优先级或者问题类型来分布。这样能够很直观的展现问题缺陷与突破口，同时能够快速体现测试价值，或者说你进行可用性测试为业务带来的价值。② 确认优化排期测试的一大好处是测试结论可以直接转化为产品文档进行后续的产品改良。所以在我们进行数据收归后，应及时协同内部团队做好后续的排期优化工作，将设计调研结果的价值发挥到最大。这一步才是最重要的，也是设计师价值提升的体现。4. 报告产出① 测试报告当我们完成所有数据收归后，需要产出一份完整的测试报告。报告的撰写可以从测试背景-测试过程-测试结论-优化排期四个维度来完成，这里不做赘述。② 材料归档可用性测试是产品研发周期的必要流程，每次测试报告的归档和管理也至关重要。归档材料主要包括被访用户基本信息、任务测试记录表、每一个用户的录音与录屏材料、测试满意度的问卷及结果、可用性测试问题汇总表、总结报告。在这一步才表示我们所有的设计调研工作结束了。总结用户研究是做好设计的关键，以上就是用户研究的 3 种常见类型。问卷调查和访谈能够帮助设计师在开发早期理解用户真实的需求、动机。测试能够评判设计是否简单高效。在开发周期各个阶段采用合适的用研方法，产品将会最终收益。对于设计师来说，虽然日常工作中并不是都有机会进行用户研究，但用户研究是项不可缺少的技能。暂时不用没关系，Mark 一下。源文件链接：https://www.figma.com/file/BwLfmNE64MVakvohIzBvRB本篇来源：优设网原文地址：https://www.uisdc.com/user-research-type
互动 用户 贴吧 本文搭建“信息更易懂”、“路径更顺畅”、“玩法有惊喜”互动系统设计方法，焕新 19 岁贴吧互动体验，提升用户活跃。往期改版案例：上亿人使用的百度贴吧，是这么做设计改版的！随着产品的发展和用户群体的演变，用户对产品的认知也在发生变化，当用户认知和产品形象发生偏差时，体验升级就势在必行了。阅读文章 > 大厂出品！百度数字人设计改版实战复盘通过构建伙伴认知、满足情感互动、增强沉浸体验等手段，增强 AI 伙伴的曝光率，进一步向用户传达智能搜索感知，促进搜索行为转化。阅读文章 > 前言良好的互动氛围是社区产品的核心，贴吧作为一款近二十岁的社区产品，设计师秉承年轻包容的产品理念，始终在探索属于贴吧的特色互动形态，在这过程中，希望通过互动系统设计方法，升级贴吧互动体验，培养用户心智，形成良性互动链路，最终提升用户活跃。一、探索互动系统的设计方法较为简单的互动形态为作者生产内容，浏览者为喜欢的内容点赞、回复，甚至私信创作者，这些互动行为会激励创作者继续生产内容。基于以上互动形态我们搭建了循环互动系统，创作者为浏览者供给内容后，我们需要在互动环节引导互动行为发生，在触达环节优化互动信息触达，在反馈环节引导参与互动反馈，从而形成正向循环。结合实际的项目经验我们发现互动系统运转离不开“信息更易懂”、“路径更顺畅”、“玩法有惊喜”这三个要素。二、寻找贴吧互动设计机会点贴吧的角色是由创作者—楼主、浏览者—吧友组成，良好的产品运转模式为：创作者向浏览者生产供给内容，浏览者对其互动激励。但贴吧多年来互动链路中断，导致从互动到供给无法形成正向循环。1. 特色场景洞察问题贴吧的场景及形态广泛，与其他产品有所不同，具有内容形式多样、浏览场景独特、互动类型广泛、回复逻辑精细、互动玩法多元等特点，通过走查上述特色场景发现诸如链路中断、功能缺失、结构混乱、内容丢失等问题。2. 下探设计机会点基于以上问题的共性，我们可以从中总结出核心体验断点：看不懂：回复列表内容结构不合理、收藏后看不懂更新的楼层内容；看不到：Push 通路不稳定无法触达用户、大多用户关闭推送 push；没意思：赞、回复等互动方式老旧，刷贴、签到行为重复，没有特别的玩法。下面会使用上述总结的互动系统设计方法，对贴吧现存问题进行体验升级，提高用户的互动积极性。三、 互动系统设计方法应用举例1. 信息更易懂贴吧的回复场景多，逻辑复杂，创作者与浏览者在看到对方的回复后，内容展示需要易读易懂，彼此才会有意愿回复反馈。① 查看列表—优化结构查看评论列表的旧体验存在回复对象错乱、内容缺失的问题，新体验根据语境自由展现原贴、楼层、楼中楼三层结构，承接上下文关系，降低用户理解成本，并将其复用在查看点赞、查看@ 等场景中。② 查看详情—精准定位点击列表页后的精准定位也是易懂的关键，我们对内容被折叠、定位不准旧体验问题进行优化，新体验默认展开原贴及楼层内容，细化点击贴子、楼层、楼中楼后的定位逻辑，帮助用户精准看到想看到的内容。③ 继续消费—延长步长用户从回复列表进入查看详情页后，旧体验只展示当前的评论楼层，看不到上下文内容。新体验在定位楼层前后增加楼层内容，同时通过“查看之前楼层”和“加载之后楼层”方式继续浏览，延长步长。2. 路径更顺畅产品的推送 Push 向用户推送感兴趣的信息，需要稳定的触达用户且有意愿打开，才能达到召回用户目的。① 打开推送开关—场景引导旧体验引导开启 push 场景缺失，方式过于生硬，新体验选取贴吧高频互动场景，在用户签到后、回复后、发布后选择合适形态展现引导，提高推送通知打开率。② 展示推送—有吸引力旧体验互动 push 内容表述凌乱，新体验将 push 内容结构化，以“用户昵称+动作+互动对象”的结构展示推送内容，并强化互动用户的头像，适当展示互动详情，吸引用户点击。3. 玩法有惊喜贴吧点赞、回复等互动方式存在多年，缺乏新颖性，用户互动心智疲软，急需通过轻量、有趣的创新玩法，刺激浏览者互动。① 新增动态表情结合贴吧元素，补充单击、长按、双击的递进互动点赞方式，给予用户感官刺激，提升点赞爽感。结合时效性运营活动，增加高考、劳动节、618 活动点赞，营造惊喜感。首次私信提供贴吧 IP 表情，助力用户关系破冰。后续私信增加开香槟、丢炮竹以及丢炮竹炸滑稽双向互动玩法，持续提升用户互动意愿。② 新增潮流表态虚拟形式是近几年受用户喜爱的潮流表态玩法，探索虚拟形轻互动方式，互动后通过私信触达，并沉淀社交货币资产，进而引导双向互动。小结文本搭建的“信息更易懂”、“路径更顺畅”、“玩法有惊喜”互动系统设计方法，已将其运用在贴吧的特色互动体验升级中，并取得正向数据和用户反馈，希望该项目的设计方法及经验能为大家提供参考。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/tieba-design-revision
用户 网页 可用性 编者按：这篇文章出自用户体验设计行业内的资深机构 NNGroup，他们一直谨慎而专业地对行业进行审视、分析和总结，这篇文章更新于 2023 年第一天，他们通过真实的用户调研和持续的观察，梳理了最近几年移动端 UX 设计的变化，下面是正文。从 iPhone 诞生到现在已经15年了，移动端的用户体验设计的综合素质已经相当稳定了。移动端的标准已经制定完全，移动端 Web 应用和本地应用之间的界限也越来越模糊了。最初的 iPhone 是在 2007 年 6 月发布的。2008 年底，我们开始发布了第一版「移动端设计报告」，当时绝大多数的用户所使用的移动端设备，用户体验是相当糟糕的。当时，与绝大多数的移动端网页和硬件设备相比，程度能到「勉强能用」的APP或者网页，都已经算是极佳的用户体验了。而在5年前，我们发布第四版「移动端设计报告」的时候，我们对移动端产品的可用性状况进行了全面的评估。但是我们很高兴地发现，绝大多数的移动端 APP 和网页都提供了良好的用户体验。随后的第五版报告中，我们看到了持续的进步。此刻，移动端用户体验终于抵达了成熟期。移动端设计变得更加稳定，而多实验性设计和功能的接受度有所降低。此外，移动端成为主流，用户几乎会在移动端设备上尝试完成几乎所有人物（尽管用户仍然喜欢在大屏幕上完成更重要的任务）。很少有公司现在不碰移动端的业务。在今天的这篇文章中，我们将会突出探讨移动端设计的现状以及一些突出的主题。0、调研用户基于第五版的移动端可用性报告，我们进行了远程测试和面对面的可用性测试，涉及 19 名美国的参与者，它们测试了总计 60 个不同的网站和 APP。1、设计风格的融合过去几年中，最大的变化是设计风格的融合。在更早一些时候，许多网站和 APP 的设计者会尝试新的交互方式和布局结构，而如今我们可以肯定的说移动端交互已经稳定下来了。很多设计模式已经成为标准，并且大家对于什么时候用什么设计元素有了清晰的认知，比如导航栏和汉堡菜单，如今已经达成某种平衡，绝大多数的网站和 APP 会选择其中一个作为主要的导航模式。尽管按照「信息气味理论」，汉堡菜单的数值偏低，但是它依然成为了主流的方案之一。这种融合出现在方方面面。比如 iOS 和 Android 如今就变得和彼此更加相似，这也使得设计师可以可以毫无挂碍地为两个平台设计近乎完全相同的 UI，而不会影响最终 APP 的可用性。其中最典型的变化，就是 苹果官方出的 iPhone 和谷歌官方出品的 Pixel 系列都将屏幕的 Home 实体按键去除，而界面交互几乎完全仰赖手势操作。苹果将 3D Touch 去掉之后，Android 和 iOS 如今使用着完全一样的长按呼出菜单。2、「完整网站」的消亡最近一次移动端可用性设计会当中，我们很惊讶地碰到一位参与者，他不知道我们所说的「完整网站」是什么意思。在很长一段时间当中，移动端访问网页的时候，打开的是专门针对移动端设备开发的精简后的「移动版」网页，而原本针对桌面端设计的网页会「更加完整」。虽然有一小部分用户可能会青睐于在手机上访问桌面版的页面，但是绝大多数人不需要这样做甚至不知道有「桌面版」存在。由于响应式设计的存在，如今绝大多数的网站从功能到内容都可以兼顾桌面和移动端两种环境，内容不适配移动端的情况越来越少，几乎不存在了。3、原生应用和 web 应用之间界限更加模糊对于开发者而言，本地原生应用和 web 应用在技术层面上几乎完全不相同。而对于用户而言，两者仅仅是渠道有所不同两种应用工具。在过去5年当中，两者甚至在渠道之间的界限也都变得越来越模糊，至少在用户层面的感知是这样的。首先，web 应用和原生应用之间的差异正在变小。随着渐进式web应用（PWA）的出现，我们现在拥有和本地应用高度相似的移动端网站，它们可以拥有一个独立的图标，单独在后台运行，甚至可以接入推送通知等手机功能，而这些在之前是不可能拥有的。BMW.com 的网站以 PWA 应用的方式存在同时，原生应用需要和网络更加靠近才行。原本必须要安装到本地的应用正在变得更加轻量、易于「安装」，iOS 平台上推出了 App Clips，而 Android 平台上一会儿有对应的即时应用程序，它们让用户无需安装即可提前体验 APP 在本地于运行时的功能。这种机制又更加靠近 PWA 应用的体验，两者之间的界限变得更加模糊难明。4、更简单的登录和注册登录和注册的用户体验升级是移动端用户体验进化的标志之一。设计师汲取了来自方方面面的经验教训，非常确定在移动端小屏幕上输入密码是一件乏味的事情。如今有很多不同的方式让登录和注册变简单，有的是基于身份验证机制（面部识别、指纹验证等），有的是基于已有的支付接口（Apple Pay、Google Pay、支付宝等）的方式，有的则是内置于浏览器和系统的密码管理器，设计师已经在尽力缩短登录的流程。而注册的新趋势是「无密码帐号」，无需定义密码即可创建帐号，着是基于一次性密码（OTP）和魔术连接（magic link）的机制，其中，一次性密码我们应该都很熟悉了，密码或者验证码通常是系统发送到绑定的帐号或者手机号上，借此实现注册和登录。苹果的密钥机制则更进一步，系统自动创建，然后加密存储于云端，用户甚至不用知道他们的密码具体是什么。5、围绕小屏幕设计我们在几年前已经注意到，设计师已经开始有意识地针对小屏幕的限制来设计网页和 APP，如今，这种趋势更加明显，设计师将不必要的 UI 元素熟练地隐藏起来，让用户在滚动浏览中自然获取信息，首屏也不再是堆满功能按钮的垃圾堆。然而另一方面，我们依然注意到很多网页还是会因为一些不必要的元素被刻意拉长，其中很多确实是基于「用户是通过移动端访问网页」的这种场景来进行设计的。但是，需要强调的是，用户仅仅只有在认为你的内容有价值的时候才会继续滚动，如果重要信息之前是一屏无关紧要的低价值信息或者装饰的时候，他们可能会在滚动之前就直接放弃了，而这种情况在注意力被高度稀释的今天，只会越来越频繁地发生。BankofAmerica.com 的页面中无效的装饰信息拉长了整个页面。6、叠加过多功能在几年前观察的时候，我们就注意到移动端页面上叠加了过多内容的情况，而如今这个问题也同样被放大，变得更加流行。很多网页一打开就出弹出框已经是基本操作，更有甚者直接拉满，右下角是聊天气泡，顶上是弹出框请求 Cookie 权限，中间是广告和促销，就这种局面下还有网页本身的汉堡菜单和导航栏藏在首屏上。不幸的是，即时用户不被这些东西烦死，互相叠加覆盖的功能同样很容易出现各种可用性问题。有的是功能本身在不同设备上加载时因为兼容性差异自然出现的，还有的则是因为用户以为它们是无关的新页面，直接关掉。7、应用内浏览器另外一个重要的趋势是应用内内置浏览器的流行，这种技术的好处在于，用户在应用内点击某个链接的时候，无需跳转出去直接就能在应用内加载页面内容。它的优点在于留存用户，但是它的缺点也在于它容易让用户感觉迷惑和混乱，突然打开网页可能会让用户忘了他们在哪，并且可能因此很难再次打开对的链接。此外，应用本身的 UI 元素也会干扰内置浏览器的使用，比如屏幕内出现2个汉堡菜单这种情况。另外，由于内置浏览器的可用性，可能会有的页面 UI 元素无法完全加载，页面出现多个汉堡菜单，导航功能和 APP 自带的导航栏同时存在。页面中按钮被覆盖，无法完全加载。结语必须承认的是，移动端的用户体验比以往任何时候都要好，网页、本地原生应用之间的一致性正在变好，用户已经适应了绝大多数常见的交互模式，在移动端上请求桌面端页面的情况发生的频率在降低，但是移动端体验距离完美还有很长的一段距离。本篇来源：优设网原文地址：https://www.uisdc.com/state-mobile-ux-2023
声音 用户 听觉 在这个互联网信息爆炸的时代，我们每天都会接触不同的产品，在日常的 UX 设计中，设计师往往会关注产品的界面是不是好看，交互是不是便捷，而声音设计是最容易被忽略的：天猫精灵的人声音效，饭烧好后小米电饭锅发出的提示音……不可否认的是，声音在我们的生活中方方面面扮演着重要的角色。恰好笔者最近在阅读《声音体验设计》，总结了一些心得体会，与各位分享。更多声音设计干货：连声音都是细节！阿里设计师总结的10个声音设计要点声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值，作为在阿里巴巴的体验设计师，以前并没有太多的机会去以声音作为设计手段。阅读文章 > 一、声音是如何产生的声音是由振动产生的声波，通过介质（空气或固体、液体）传播并能被人或动物听觉器官所感知的波动现象。好，此刻，请你停下来，把你的右手放在喉咙的位置，然后尝试发出“啊”的声音，你是不是会感受到喉咙有明显的振动感？那是因为你的声带振动产生了声波，通过空气传播并被你的耳朵所感知。由此可见，声音的产生离不开物体的振动、传播的介质以及人或动物的听觉器官。此外，声音有三个重要特性，即音调、响度和音色。音调指声音的高低，是由频率决定，频率越高音调越高。响度又称音量，人耳感受到的声音强弱，它是人对声音大小的主观感觉量。音色指的是声音的品质，与发声体的材料和结构等自身因素有关。我们在清晨能听到小鸟的叫声不是因为其响度高而是因为小鸟声音的频率很高，而摩托车的隆隆声又低又深是因为其声音频率低响度高。二、为什么我们需要声音声音是我们连接世界，连接其他人最本能，最强大的方式。研究表明，人的感官从外界获取的信息里，视觉占 60%，听觉占 20%，触觉占 15%，味觉和嗅觉分别是 3%和 2%。另外，人对视觉的感知时间为 189 秒，而对声音的感知时间仅需 146 秒。虽然通过视觉获取的信息量占据了绝大部分，但人对于声音的反应速度要快于其他所有的感官刺激。由此就可以解释，为什么跑步运动员的起跑提示是听发令枪而非看倒计时了。1. 声音包含情绪听是一种被动并时刻发生的行为，声音可使听者自发且直接产生情绪反馈。音乐就是最常见的一种通过声音进行情绪表达的方式。我们通过视频号观看演唱会，其实不光光听的是音乐本身，歌手饱含情怀的演唱、评论区实时滚动的字幕， 或许能够唤醒你生命中的一些难忘记忆，让人的情感达到共鸣，这是听觉和视觉所带来的震撼力。2. 声音包含信息声音能够通过其特有的通道表达眼睛“看不见”的信息。多邻国作为一款风靡全球的语言学习工具软件，通过闯关式的答题形式，伴随情感化的动效和游戏化的音效提示让使用者爱不释手。答题正确和错误时系统出现的差异化提示音清晰地传达了正确和错误的信息，带给用户积极的正向反馈。3. 声音包含品牌特性你还记得每次走进全家便利店时听到的那个音乐旋律吗？声音标识也属于企业品牌的一部分，企业通过创造那些打破陈规的声音触发器，以此捕获消费者的注意力，然后利用这些注意力唤醒消费者头脑中与品牌相关的正面体验。好的声音能够给用户留下深刻印象，以至于下一次听到声音就能想到这个品牌，比如英特尔那段洗脑的标志性音乐“灯，等灯等灯”就是一个非常好的案例。图自 sankeibiz.jp4. 声音能降低认知负荷著名的研究人员马克·韦塞尔曾说过，“我们需要的是更聪明的人类，而不是更聪明的设备”，注意力将是未来最稀缺的资源，而如果让用户以最小的注意力来达成目标是我们需要关注的。每个人的注意力总量是有限的，但是我们可以通过将不同精度注意力分配在不同复杂程度的任务上来以缓解用户在同一时间处理多个任务时的压力，从而提升任务处理效率。当你在驾车时，几乎所有注意力都集中于看路况，偶尔看一下后视镜以及指示灯的状态，而地图导航的语音播报功能其实是利用了对人的注意力精度要求最低的环境知觉，利用了活跃的听觉通道，不仅减轻了对其他通道的占用，还能避免因视觉误差带来的潜在危险，降低用户的认知负荷。三、常见的提示音事件当你使用手机拍照的时候，按下“拍照”按钮后系统发出的“咔嚓声”是不是似曾相识？数字世界里的许多声音来源于现实世界，手机本身没有快门，但是设计师从已知世界中获取灵感，给手机重新设计快门声音，让手机拍照用起来和胶片相机一样。有的声音提示可以帮助人们获取反馈，以确保用户的操作是正常进行的，比如手机按键声、数码相机快门声；有的声音能帮助人们获取信息，减少人们出错的概率，比如安全带提示音、行驶方向提示音。按照声音类型我们可以对其分成四种类型，包含机械类、反馈类、信息类和状态提示类。四、声音设计法则1. 声音设计第一法则：我需要在这里添加声音吗和界面设计一样，在声音设计里我们也需要遵循“Less is More”的原则。站在使用者的角度想象一下，当你在厨房烧饭被油烟机的轰轰声吵得脑壳疼的时候，手里拿着的铁锅铲和锅碰撞产生的“哐哐”声，电热水壶、电饭锅、烤箱、搅拌机的声音同时响起，是不是会有再也不想在厨房多待一秒的想法？声音设计的首要法则是，考虑用户是不是真的需要声音，出现声音的场景是什么，如果有可能的话，我们可以用其他方式来提醒用户吗（比如换成闪烁的指示灯）？2. 让声音听起来简单在 shopify 设计系统的官方网站里，对于声音的时长描述为：“短音不超过 250ms，长音不超过 1 秒”。过长的提示音会让用户觉得拖沓厌烦，过短的提示音则无法让用户明确感知。比如我们经常听到的 QQ 软件里的“咳～咳”咳嗽声表示收到系统消息，“咚咚咚”敲门声表示有好友上线，“滴滴～滴滴”表示有人给你发消息了，这些声音虽然听起来简单却是有意义的。3. 在合适的情境发声就像做界面设计一样，作为设计师我们大部分时间是在办公室电脑桌前做设计，但很少有人能真正站在用户的使用场景去思考问题。如果你设计的一款手机被用户放在口袋或者书包里，这个时候有人打电话来了，用户却无法听到来电声怎么办？如果用户此时正在开会，但手机铃声突然响起了怎么办？考虑用户一天中的时间或活动，确保产品在各种方便和不方便的场景下都进行相应测试，可以防止多种错误的假设出现。4. 协调多维度感官体验通常情况下，声音不会作为一个单独通道出现，考虑听觉、触觉、视觉的统一性很有必要。当你走进一家看起来很有情调的咖啡馆，一进门就能闻到浓浓的咖啡豆香，店里贴满了富有年代感的海报，可是播放的却是让人抓狂的重金属音乐，是不是让你体验特别糟糕？5. 注意声音的重复容差研究表明，用户对声音的容忍度是有限的，声音越复杂越重复，阈值就会明显降低。有些声音每天会出现很多次，也许初次听到用户会觉得声音很好听，但是当一天中这个声音到达十次甚至是百次的时候，用户就会觉得厌烦。因此我们的声音应该是信息丰富的，而不是烦人的。写在最后“收音机与电视机很像，只是电视机有画面。如果视觉阻断了更多可能性，那么听觉就带来了更多的可能性。”声音可以表达出影像外形无法表达出来的信息，为用户提供更好更直接的体验。设计师常说“细节决定成败”，而声音体验设计是我们在日常工作中不可忽视的“细节”，牢牢抓住这个细节，能够为我们的产品体验提升带来更多的可能性。参考Shopify 设计系统：https://polaris.shopify.com/design/sounds《声音体验设计》[美]Amber Case / [德]Aaron Day /本篇来源：优设网原文地址：https://www.uisdc.com/sound-design
信息 用户 视觉 遇到跨职能同事对界面设计方案发出灵魂拷问，设计师该如何应答？本文从理论和应用层面，对不同种问题总结了万字科普，希望有用~往期干货：UI/UX设计作品集中的推理分析该怎么写？高手实操案例分析！编者按：作品集中的推导分析部分该怎么写，而不是套市面上的流程和模板？阅读文章 > 一、那些年，我遇到的灵魂拷问...我的日常工作嘛，想必和其他从事界面设计相关工作的设计师一样：70%的时间用来构思设计策略和产出设计方案、30%的时间用来和产品团队各种各样的角色打交道：比如需要通过项目展示，让产品决策者买账；或者给开发工程师解释设计细节、跟踪上线后的品控问题。而在这 30%的沟通时间中，与合作小伙伴们的探（撕）讨（逼）设计问题总是不可避免的一个环节。那在这个时候，如何让他们理解问题背景、如何让他们理解你的设计方案、如何让他们“买账”......诸如此类问题是否能高效沟通，显得尤为重要。其实，对于一些比较偏产品向的界面设计问题（比如：为什么支持“批量取消"？为什么有“确认页”？为什么“全屏展示活动图片”？...等流程、功能、信息展示型问题），我们解释起来是比较容易的——我们可以对标着产品经理制定的产品目标，结合数据分析师或用户研究员总结出来的数据或用户事实，即可快速地合理解释自己的设计方案。但是，如果你的小伙伴恰巧是非常严谨认真、刨根问底的人，他们可能会问出一些 非 常 微 妙的问题，让设计师立时无法抓到一个准确的论点或论据展开阐述，往往只能和团队的小伙伴们相顾无言。那这些 非 常 微 妙 的问题具体指的是什么呢？容我举个栗子：类似于以上的问题，想必各位设计师在日常工作中并不罕见。然而我每每回答时，对话会进入一个奇妙的怪圈，be like:“你不觉得这样设计更清晰/工整/美观吗？”“我不觉得啊，我觉得都长得差不多。”“可是这样用户能更快找到交互目标，完成交互任务，有更好的用户体验呀。”“啊？有吗？为啥？所以呢？”“......”所谓“忍一时越想越气，退一步越想越亏”。咱就是说，每次都不知道如何解释、眼睁睁看着设计被“砍”来“砍”去可不行。为了让我自己变成更加“耐撕”的设计师，同时尽可能帮助到遇到类似问题的小伙伴们，我尝试着阅读、思考、总结了一些界面设计的科普知识，并以此来深入浅出地、感同身受地、科学严谨地解释一下设计师那些对于微妙设计细节的坚持，到底是从何而来的。欢迎各位设计师小伙伴给你们身边发出类似灵魂拷问的跨职能同事分享这个科普帖；也欢迎刚出新手村的、从事界面设计相关工作的设计师小伙伴们，把它当作入门级界面设计理（下）论（饭）科普来阅读。1. 呔！灵魂拷问挑战一！对于“界面设计的工作定义”这个问题，我根据自己的理解和体悟，尝试着用更加通俗的方式概括了它的答案：界面设计，不仅仅是埋头把线框图“从无到有、从有到优”地吭哧吭哧画出来就完事儿了，它还包括了解目标用户的特性和需求，了解产品的细节和目标，并根据用户的期望和产品的商业目标，假设出最“两全其美”的方案，并用目标用户能“看得到”“看得懂”“能操作”的界面把这个方案表达出来。对于这个“两全其美”的方案本身，比如有什么功能、流程长什么样子这些问题，相信产品团队的其他角色会贡献一定的想法和决策；而对于让用户能“看得到”“看得懂”“能操作”这个要求，则是界面设计工作中的主要责任和挑战，也是我们花费了大量时间去“纠结”的关键点所在：有人肯定要问：但凡是能用智能电子产品看到你这个界面的人，肯定看得到字、认识字、也知道要点哪儿。为什么说“看得到”“看得懂”“能操作”这三点居然是个“挑战点”呢？——其实，“能做到”不一定意味着“做得好”，实际上人类的知觉和行为能力是十分有限的。关于这个论点，我将用一个例子来让大家深切了解（人类）用户的认知局限性。请仔细阅读下方的视频截图中，黑底白字的字幕给你“布置”的“观察任务”，之后再点击下下方的视频以开始观看：(《The Monkey Business Illusion》 - B 站视频源 点击下方视频直接播放，或复制链接跳转到 B 站观看）： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。默数白衣服的人传了几次球看完这个视频，相信大家对于人认知的局限性已经有了一定感悟。然而，和“有限”的用户认知相反的是，在实际的产品规划中，（由于不断更新的商业目标）产品的功能和信息的增量却是“无限”的。这对矛盾意味着，要做到“看得到”“看得懂”“能操作”这三点，团队中的设计角色必须斟酌如何正确引导用户在海量信息中，按我们预期的方式和顺序去浏览和操作：而这就是，除了“画界面”——即“把产品经理规划的功能落实在界面中”这个要求之外，界面设计的另一个要求。这也导致了设计师在设计界面的工作中，会反复斟酌一些在跨职能同事眼中显得“无足轻重”的细节了。看到这里，各位看官可能会有进一步的疑问：诚然，“引导用户按商业期望并尽量无痛地操作界面”在上述矛盾点的铺垫下，确实显得十分重要。但是，这难道不该跟“界面结构”“文案”这些更直观的要素具有关联性吗？正确的交互引导和设计师纠结来纠结去的界面细节（比如：元素距离、字体大小、图标元素......等），到底有什么因果关系呢？用一个不那么恰当的例子做类比：程序员在模拟环境下跑代码之前，虽然没有那么确切的证据能证明这段代码一定能跑通且无 bug，但是他们往往会参考以往的经验和网上的案例，用最保险的逻辑和语法至少先码出一段能跑的代码，让它先运行起来再纠错。那么相似地，设计师设计的界面在上线之前，谁也不能保证这个设计一定能达成设计目标——商业目标及用户体验目标，但起码我们可以参考行业公认的“共性设计规律”，以及通过用户调研、数据分析得来的更有针对性的“个性设计规律”，用最自信的方式先设计出一个达到开发和上线标准的界面：而上述所说的“行业公认的共性设计规律”，往往就和那些跨职能容易忽略、但设计师却不停纠结的界面设计细节，息息相关。那么，这些“行业公认的设计规律”是什么？决定了怎么样的设计细节？以下我将挑选最基础的一些案例，用跨职能小伙伴们常见的“灵魂拷问”作为开头，结合理论和应用场景，帮助大家更快地感受和理解。2. 呔！灵魂拷问挑战二！我们来抽象和展开这个问题：为什么我们需要对某些界面模块进行“特别的设计”？需要“特别的设计”的情景是什么？为了回答这个问题，我想首先介绍一个界面设计的基础理论给大家：这个理论其实很好理解，无需再深挖背后的心理或生物学原理啥的。不过值得一提的是，这个理论其实不仅运用在界面设计中，在很多其他的艺术或设计创作领域也很常见，我能快速想到的一个（奇怪的）例子就是，喜剧《唐伯虎点秋香》中唐伯虎初遇秋香时，唐伯虎端详了一下秋香的外貌，对身边的祝枝山说“长得也是一般的好看而已嘛”，然后祝枝山意味深长笑了笑、朝着人群大喊：“美女！”，结果所有华府的女佣都转过了头，唐伯虎惊讶地往后一跳，直呼：“哇~秋香果然是国色天香，超凡出尘！”如果把唐伯虎想象成目标用户（？），把秋香姐想象成我们想重点推荐的功能（？？），要想让秋香姐，啊不是，某个功能对用户而言，是引人注目且过目难忘的，我们需要做出强烈的“对比”来凸显——在界面设计中，这个“对比”可能是颜色、尺寸、形状、留白等样式上的各种不一样：让我们再回头看看这个灵魂拷问：诚然，通过“挑选一个合适的展示位置”在现有布局中达到“使模块呈现最好的曝光量、（重复）点击率等表现数据”这个目的是可行的，但是不可否认的是，一个载体界面上最佳的位置是有限的，位置的更改更是对页面其他模块而言会牵一发动全身、对用户而言会产生新的学习成本。一旦我们想尽量维持其他现有功能的布局、或希望除了位置优化之外，穷尽最大所能提升模块的行为表现时，为这些模块做特别的设计优化是必要且合理的。当然，这种“特别的设计优化”中的具体设计细节，也要考虑到此处设计复杂度 v.s.研发周期等“性价比”问题，不能理直气壮一味追求“特别的视觉效果“而掉入“过度设计”的怪圈。3. 呔！灵魂拷问挑战三！让我来进一步抽象这个问题：对于界面中的文字信息，既然可以利用格式（分行、分段）来区分其类别和从属关系，我们为什么还需要进一步给予文字不同的视觉权重呢？在进一步解释其原因之前，让我们先明白另一个关于信息阅读的“规律”：为了更好地理解这句话，让我们将自己代入一个例子来实际体会一下所谓的“通过抓取关键词判断全局内容”是个什么情况，请回答以下问题：回想一下，你在以上例子中收集信息的方式是什么样的？是挨个阅读了第一组和第二组中的所有内容并做出了判断？还是跳跃阅读式提取了和“台灯”更相近的关键字并做出了判断？相信大部分人都更偏向于后者，而后者就是我们所说的“通过抓取关键词判断全局内容”。记得之前在阅读《社会心理学》这本书的时候，我发现在应用层面上，几乎所有的人类行为动机，其背后都有一个较根源的规律：人脑总是倾向于“简化提取信息“和“分散认知压力”。那么，当我们尝试着用这个心理学现象去反观“信息线索”这一规律时，它似乎变得可以推理和解释了：当我们的界面中堆叠了海量信息和视觉元素时，和我们预想的“用户会按顺序依次获取信息并进行脑内加工”不同，用户下意识会为了简化认知过程、分散认知压力，去跳跃式阅读并“采摘”他们认为的关键信息到大脑的“中央处理器”中，进行进一步加工，以便搞清楚“这个页面是什么？”、“我能否找到我需要的东西？”、“我大概能在哪里通过什么后续交互找到它？”...等问题。不知道大家是否曾看过“F 型阅读顺序”这个用户阅读规律，其实它的底层逻辑也同样是“信息线索”。那么让我们回到开头的灵魂拷问：为什么需要给界面上的某些文字进行视觉权重的处理，也就是加黑、加粗、加大、加行距等等？其实答案已经不言而喻了——为了把我们想传递给用户的信息，像喂饭一样“喂”到总是跳跃式阅读、可能会遗漏关键信息的用户的“嘴”中，让他们找到他们想找到的、或者我们想呈现给他们的信息。举两个栗子：4. 呔！灵魂拷问挑战四！用简单的话来复述这个问题，就是：利用额外的动态控件去传递信息，它的必要性是什么？对于这个问题的答案，让我从一张图片开始，为大家展开阐述。如下图所示，请你尝试盯着图片中心的蓝色圆形，并尝试用余光去辨别距离这个圆形由近及远的物体分别是什么：你是否有如下感觉：距离圆形，即我们的视焦点越远的物体，越难以辨别是什么形状？那么请你再尝试盯着下面这张动图的图片中心的圆形，并尝试用余光去辨别最远处那个不停运动的物体是什么：对于这张图片，那个动起来的、距离圆形较远的物体，好像没有静态的时候那么模糊了？以上这两个例子，其实都涉及到一个关于人类视觉的普遍规律：这个规律实际上和我们眼球构造导致的视觉特性有关，如下图所示：人的眼球视觉可分为“主要视觉”和“次要视觉”。其中，“主要视觉”分布在中心区域且范围较小，由“视锥细胞”产生图像，而“视锥细胞”对于光线充足条件下的静态目标的色彩和形状细节都十分敏感，在白昼时是人类主要使用的视觉细胞；“次要视觉”则围绕“主要视觉”分布在其周围且范围较大，由“视杆细胞”产生图像，“视杆细胞”对于亮度和动态十分敏感，是黑夜中在“视锥细胞”失灵时的主要视觉补充方式。其实，不仅是人类，很多其他以捕猎为生的哺乳动物的眼球也有同样的视觉特征。“主要视觉”能帮助捕猎者更好获取在视觉中心的猎物的一举一动，“次要视觉”则能帮助捕猎者快速获取周围环境中潜在的危险或捕猎竞争者的动向变化。这就解释了为什么当你在光线充足的屏幕上，盯着上面那张静态图片中的圆形时，你的“主要视觉”只能支持你看清视觉焦点范围内的很小一圈的事物，比如距离圆形最近的外星人头像；而对于那些距离圆形较远的形状，则因为落在了“次要视觉”中，而随距离变得越来越模糊。那上面这个视觉规律和本环节的灵魂拷问又有着怎样的关系呢？首先我们要明白的一点是，人类只有一双眼睛、一个视觉焦点（动线）。那么，当这唯一的视觉焦点随着我们正在进行的交互，移动到界面中的某个位置时，可能某些比较重要的、距离视觉焦点较远（而坐落在了“次要视觉”区域内）的信息，正在随着交互的进行更新了部分内容，那用户很可能就错过了这个重要信息的更新。那么，设计师能做什么来防止这种情况发生呢？根据上文提到的视觉原理，这里应该有两种思路：1. 把关键信息的静态文案，放置在当前交互（视觉）焦点附近 2. 如果 1.的解决方案在当前界面布局规范中不被允许，那么我们可以利用“视杆细胞对动效敏感“的特性，动态展示关键信息。最后，让我通过总结上文的内容，来快速回答一下本环节的灵魂拷问：当你想强调的信息和当前的交互（视觉）焦点较远的时候，由于视觉的局限性，我们很难感知到其变化。如果这种“不被用户感知”的概率很大、且其造成的体验或商业后果让人难以接受时，将该信息重复强调在焦点附近、或者用动效引起用户的注意，都是必要且合理的设计手段。5. 呔！灵魂拷问挑战五！同样，首先让我尝试转译和展开这个问题：在内容能够完整传递信息的情况下，为什么我们还要增加额外的视觉要素？对于这个问题，和前面的环节相同，让我先引入一个和答案有关的设计规律：单纯看字面的意思或许有些抽象，为了方便大家理解，同样我将用一个实际的例子来让大家亲身感受一下这个规律。如下图，请分别大声朗读出两个组中的所有词汇，朗读时记得尽量快速并保持正确（想挑战更高难度的小伙伴，也可以尝试朗读每个词汇的字体颜色名称）：你是否发现自己在识别和朗读第一组内容的时候，速度是快于第二组的？那原因又是什么呢？如果你仔细研究上面两组词汇，就会发现：第一组词汇的字面意思和字体颜色名称是一致的，比如：“粉红色”三个字的字体颜色也是“粉红色”；而第二组的上述两个要素，却是错位的。其实，在这个例子中，（如果你挑战的是朗读词汇本身）字体颜色就是一种“环境刺激物”，当人们对“环境刺激物”和目标识别物本身的信息认知是一致或者相似的时候（正如第一组所展示），就如本规律所说，人的辨识速度会更加快；反之则减慢。接下来，让我再例举一个和界面设计更贴脸的例子，让大家快速感受一下：如上图所示的三组提示，你阅读时长最短的是哪一组？你能最正确地 get 到弹框信息的又是哪一组？想必大多数人的答案都是第三组，因为其提示中的文字和辅助刺激物（颜色、图标）传递的信息是一致的，因而能使人们更快更正确 get 到信息。其实这个例子也体现了界面设计中，最常见的“环境刺激物”是什么——比如：颜色、图标、插图......这种视觉类刺激物；其他一些不常见的“环境刺激物”包括了：声音、震动这些和其他四感相关的刺激物（写到这里突然想到windows系统里，当警告框莫名其妙连续弹出时，那一连串的“噔噔噔噔噔”，就算现在回想都能吓到炸毛的程度...）：当然了，选择“环境刺激物”时也不一定非要挑选被文化或普遍认知刻进我们 DNA 的那些元素，诸如：红色=警示、感叹号=有问题......，它也可以来自特定产品领域、甚至完全来自你的产品本身：通过在交互中的不断重复和保持一致，将新的“刺激物+含义”组合刻进用户的潜意识中。比如，在填写密码/验证码等口令类输入的情境下，弹出框的震动会让人甚至都不用看错误提示，就意识到“填写错误”这个信息。这是因为某些聊天和金融类 APP 已经通过不断应用该“环境刺激物”在相应的场景，来让我们下意识把“震动”和“填写错误”联系起来：好的，有点扯远了......让我们回到这个问题。已知人在与界面交互时，注意力是线性的+有信息量上限的，当设计师面临：用户正在最重要的任务或者信息流中，且不应该被打断并转移注意力到次要信息线上。但同时，获取该次要信息对于用户后续的操作决策而言，又是必要的；用户正在主信息流中获取某个信息，但 ta 需要花更少的专注力成本在这个信息上，以便于将注意力“花在刀刃上”。在这两个情况下，用视觉权重适当的、含义一致的“环境刺激物”去辅助呈现对应的信息模块，是合理且有必要的设计手段。这是否给你带来了一些颠覆原来认知的、对界面设计的启示？——有的时候，界面设计上的“多设计”，反而是为了用户“少阅读”。6. 呔！灵魂拷问挑战六！同样，让我转译一下这个问题：在分割界面信息模块上，多样的空白行、多余的分割线，他们存在的意义是什么？在回答这个问题前，同样让我们从一些由实验结果总结而来的“规律”作为前情铺垫：这个规律其实很简单直观，大家可以回想一下自己欣赏各种平面艺术作品时，是否都是按照简单几何形去拆解构图的？或者反过来思考，在阅读过的平面设计构图教程中，是否大多数构图法则也都是以简单几何线/形作为基础的，比如：三角形、圆形、正方形、梯形、对角线、放射线等等...从正反两个方向来看，都有事实印证这个规律的正确性。在界面设计中，由于“传递信息”这个关键目的，带来了“布局的复杂度必须较低”的局限，同时也是考虑到技术投入和实现难度等问题，当设计组件或信息模块时，我们通常会采用的形状仅有方形和圆形：其中，圆形常用于偏视觉的元素（比如：图标，图标按钮等），我们暂且不展开。接下来，让我们聚焦在常应用于控件或文字模块的“方形”上。这时候就不得不引入一个在界面设计领域，大家最熟悉的理论之一——“格式塔”理论了。这里为了让解释更加好理解一些，让我直接选取一些和本环节问题最相关的两个“子理论”来为大家展开阐述。第一个“子理论”是“邻近性原则”：上图其实把这个原则体现得淋漓尽致，我就不再为大家举另外的栗子展开解释了。其实，这个原则就回答了“信息间的空白空间”存在的必要性——你是否还记得前文提到的“信息线索”这个规律？既然人们的界面阅读习惯是“快速扫描”、“跳跃获取信息”，那么，和“文字权重的多样性”类似，“空白空间”往往能让人在扫描信息时，下意识推理出信息结构（即信息的从属、分组关系），从而使得这种“跳跃式获取信息”的行为更加快速和准确。比如：当用户看到一整块被空白分割出来的、较独立的部分时，会下意识去扫描第一行——他们往往会认为那一行是标题。通过这种方式，他们可以了解这个信息模块是关于什么的、有没有仔细阅读的必要......等等关键信息。那么，如果“有层次的空白空间”就能在视觉上帮助分割界面的信息层级了，为什么有时候设计师还会应用分割线/框呢？首先需要从另一个“格式塔”的“子理论”——“同域原则”说起：这个规律说明了“分割线”也同样能帮助信息分组。并且，在设计实践中，“分割线”这种更为强烈的视觉元素，其分割信息的视觉强度是大于“空白空间”的——这意味着在以下两个情况下，分割线是有存在必要的：当在界面中的某层平级元素里，有最最需要重点强调的单个信息组时，需要用分割线/框强调之； 当界面中的某类平级元素，因为内含的子元素太多太杂导致“分无可分”时，需要引入视觉上观感更强烈的分割线/框来强化分组。当然，还有其他例外的情况也会使用到分割线/框，它们和视觉分组无关但和交互引导息息相关，比如：“带边框的信息模块”可用于暗示该模块可点击、且点击都指向同一个目的地页面；“一列带框的信息卡片被屏幕边缘隐藏一部分”，能用于暗示该卡片列是可横向滑动的......等等，这些常见的使用场景相信大家都不陌生，就不展开讨论了。所以总结并回答一下本环节的问题：“空白”的多样性，能帮助用户在扫视界面时，更快理解界面中的信息的分组关系、子母集关系，从而提升当用户跳跃式阅读界面时，其找关键字的准确性和速度；而分割线/框，作为“空白”的补充手段，既能在视觉上强调单个信息模块，又能帮助在层级过多、元素过杂的情况下，让信息的分组显得更清晰。因此，在信息较多、层级较复杂的界面中，设计师合理地利用多种数值的空白间距、分割线/框，是一种能帮助用户在阅读信息时“大脑减负”的常见方式。7. 呔！灵魂拷问挑战七！上述问题中提及的，无论是“菜单”还是“筛选”，本质上都是为目标选项池新增属性维度，并按这些维度分别分组，基于此让用户“按组定位”逐渐找到目标选项的一种交互方式。所以，让我们转译一下本环节的问题：和让用户直接阅读选项信息并决策相比，为什么我们需要通过（多层）分组的方式，让用户决策的过程从“一次性选择到目标”到“通过层层筛选、慢慢锁定目标”？它应该被应用在什么情景中？因为这个问题解释起来也有些复杂，因此，同样地，让我从人类“决策行为”的剖析开始阐述。人的决策行为，本质上分为“感知”和“思维”两个步骤：先“感知”一个可选项、理解它的内容、并将以上内容“存储”在自己的“短时记忆”中，然后接着“感知”下一可选项并同样存储在“短时记忆”中......然后通过“思维”快速判断自己对每个可选项的主观喜好、客观利弊，最后做出决策。从上述的“决策行为”方式中，我们可以看到承上启下的关键点是“把选项储存在‘短时记忆‘中”。说的有点悬乎，举个通俗的栗子来讲就是：当你上班摸鱼，思考中午吃啥的时候，你得先在脑内回忆一下今天食堂的菜谱有啥，才能基于这个信息纠结一小下下，最后决定吃什么。那可能有人又会问：这“短时记忆”又是什么？为什么选项会被存储在“短时记忆”、而不是其他什么什么的记忆里呢？好的，那让我们进一步展开这个话题，来探讨一下“短时记忆”这个概念。让我快速用一张图片来给大家科普一下什么是“短时记忆”，以及它的兄弟“长时记忆”：一般，在我们采集到信息中的关键内容后，它会被首先放入“短时记忆”中，只有当我们不断复习（刺激）该信息到某个临界值，它才会被放入“长时记忆”库中，拥有“长时记忆”的特性：一个事实是：大多数的选择决策往往都是一次性的。这就决定了它们只会存在在“短时记忆”中，并拥有“短时记忆”的局限性——留存时间短，最关键的是，可留存的信息量少。那到底这个“少”又是多么地“少”呢？这时候就不得不提到继“格式塔原则”之后另一个界面设计中最常被提及的定律——“米勒定律”了：那么，基于上面提到的两个关键点（即“记住可选项是决策的关键点”、“能记住的可选项的容量十分有限”），我们可以引出一个和用户决策行为相关的界面设计中的规律——“席克定律”：下面我将举一个栗子，让大家感受一下这个规律将如何作用于我们的决策行为中。假设此时你正准备吃中饭，那么请分别在下面 A-C 组的菜谱中决定你想吃的东西。你可以尝试计时，自己从开始阅读菜谱到最后决定吃什么共用了多久：体验完上述的栗子后，请试着回想一下：是否从 A 到 C 组的决策时长有个非常明显的增长趋势（如果你有一丢丢选择恐惧症，那么这种增长会更加明显）？这就是“席客定律”想告诉我们的规律。那么在设计实操中，如果可选项过多（超过 9 个），且这种决策对用户而言是必要的、不可跳过的，我们怎么减少用户在进行该决策时的思考负荷呢？在本环节的开始，我曾提到过，人类的决策过程分为“感知”和“思维”两个步骤，因此我们的优化方案也可以从分别优化这两个环节入手：优化“感知”的处理负荷，即帮助用户剔除非必要的可选项，可用的手段有自动筛选、自动排序，以及手动筛选框、手动排序等功能；优化“思维”的处理负荷，即将决策的关键因素拆解成不同的维度（组），并将信息多层次地分组放置，形成各种样式的“菜单”，手风琴菜单、下拉菜单、侧边菜单...等等。当然，解决措施有意义的前提是想解决的问题是有意义的，因此我们可以逆推，上述 1.和 2.的解决措施的应用场景为：选项库在做决策的当下，只会存在于用户的“短时记忆”中——毕竟正因为如此，才有了决策能力的局限性，才引发了后续问题和解决思路。那么，到底是哪些具体的应用场景符合上述条件呢？我罗列了一下能想到的场景：动态变化的选项库，比如：商品搜索结果列表、活跃用户列表、最热门的歌曲列表等等；非用户定制的、使用频率较低的选项库，比如：工具类软件的某些功能列表，系统设置选项列表等等。而一旦选项库是静态的、使用频率较高的、用户定制的，在这种情况下，选项库大概率已经坐落在了“长时记忆”的区间中，所谓“自动脑补”。在这种情况下，设计师可以不用考虑优化决策体验的问题。这时候，设计师使用“菜单”或者“筛选框”等控件的考量，更多应该是基于用户的心智模型、竞品的常规处理方式、它本身或其他同界面入口的曝光量影响等问题了。二、灵魂的拷问？灵性的应答！虽然，贯穿本文的始终是一个个“规律”和“理论”，但引用这些“规律”“理论”的本意是为了佐证本文中各种观点的合理性（毕竟“理论”和“规律”都是多次实际实验后总结出来的、在当前情景下最可能发生、最普适的现象），而非真的让大家在实际解决问题的时候，去咬文嚼字般地用似是而非的语言营造自己的权威感。让我们开个脑洞换位思考一下：当你在和程序员交流的时候，他们直接甩出代码开始和你讨论数据结构；当你在和数据分析师交流的时候，他们直接把公式和 XX 定理摆在你面前高谈阔论......在这些情况下，你非但不会觉得他们很专业，反而会一头雾水地当场无语，对吧？推己及人，我建议大家在实际的跨职能沟通中，能够更多以这些“理论”“规律”中较表象、容易理解的信息作为起点，结合实际的问题情景、设计方案去解释和沟通：以上就是基于我在实际工作中跨职能小伙伴们常问我的灵魂拷问，深度研究和思考后总结出的一些理论依据和应用方法，希望对你无论是审视自己的设计作品、还是回答跨职能同事的问题，都有参考价值。最后，感谢大家阅读本文，也欢迎各种点赞评论收藏，栓 Q~欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/workplace-response-guide
在路上
落霞与孤鹜
张大湿
飞翔的企鹅
表哥
