由于产品性质和业务阶段，身为B端设计师更加需要贴近一线场景，深入了解业务逻辑和用户使用场景，在不断深入的用户调研中，也收获了一些心得和经验，所以和大家分享一下我常见的三种用研方式，相关物料可以通过文章底部的原文链接得到获取方式

一、认识用研

1.1设计师为什么需要了解用研

我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息，最终利用获得的信息进行决策的过程，信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低

用研的过程就是一个信息的收集与处理的过程，在信息不足时我们可以通过同理心来“侧写”用户心智推测信息，这一点从事C端设计的小伙伴应该感同身受，但由于B端用户画像与设计师自身往往偏差较远，单纯的通过同理心来感知用户心智的门槛和难度较大

此时我们就需要通过用户研究的手段获取更准确更完善的信息，通过用户研究，设计师可以贴近一线场景，了解用户的真实场景和工作诉求，切身感受到产品的业务逻辑和使用链路，以便我们进行更准确的设计决策，同样的，这样也可以让我们的设计方案在讲述时有理可依，有据可靠，更容易获得上下游的信任

接下来是我对于可用性测试、用户访谈、问卷调研的学习总结，简单与大家分享，大家有什么见解也可以互相交流

1.2用研的纬度

这是《赢在用户》书中经常被人用到的用户研究二维分布图，这幅图很好的展示了用户研究的纬度，横轴是研究用户的结果；纵轴是理解用户的方式，行为、态度，即观察用户做什么、听用户说什么，因此，用研主要通过定性调研和定量调研分别关注用户的行为或者态度

那么什么是定量，什么是定性，行为和态度之间又有什么样的关系，在正式进入用研工作之前，有必要对这四个方向进行一个简单的了解

定性与定量

定性与定量是用户研究中常用的两种方法，两者之间性质和分析方法有一定的差异

• 定性研究主要回答“是什么”和“为什么”的问题，是对种类或者质的差异的分析，说白了就是通过经验、逻辑、同理心等非量化的方式去分析【主观】的信息

• 定量研究，除了能告诉我们是什么以外，还能告诉我们“是多少”，一般指具体【客观】的数据信息

通过上述示意可以发现，定量更加在意得出的数据，至于为什么会得出这个结果，就需要通过定性数据去验证，因此定性分析在一定程度上会更偏向于阐述某件事物的意义

二者是站在不同的角度看待问题——定量关注数，定性关注人，在实际工作中定性与定量往往相互配合，例如通过定量挖掘关键数据，再用定性剖析原因，最后定量进行验证，两者结合以求得研究效果的最大化

行为和态度

行为主要是指用户的某种动作，比如操作时的点击、滑动，以及视觉的关注点、肢体语言等，这些都是下意识，无需思考的行为数据，这些数据可能与信息层级、传递效率、操作时长、交互链路等息息相关，观察收集这些行为数据的最终目的是了解用户为何按照自己的方式进行操作，与我们预期设想的路径有什么不同之处，进而探究是什么促使用户做出的行动

态度则是用户的主观想法或者情绪，情绪会诱发用户产生一系列行为，例如操作遇阻时的焦虑，对产品体验不满的愤慨或者Aha moment时的惊喜这些都反映出了用户对于产品当下体验的一个态度，关注这样用户态度就能收集到产品体验的信息，所以，用户行为导致了某种结果，态度则揭示了影响行为的根本原因

在了解了定量与定性，行为与态度之后，我根据目前工作中常用到的可用性测试、用户访谈、问卷调研，并对每个方法的适用场景和进入调研的关键动作进行详细分析

二、如何选择用研

在开始进行用户调研之前，我们需要根据具体情况确定调研形式，以便实施后续的展开工作，根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑，选定适合当下情况的调研方式

三、用研执行关键动作

A. 可用性测试

1.准备阶段

1.1明确测试目的

首先应该以目标为导向，确定需要测试的产品是什么，想要验证什么样的结论或者达到怎样的预期，是为了发现产品或原型中可用性的问题，还是借此与竞品进行有效性、效率、满意度的比较，或是对某些功能点进行测试

1.2设计测试任务

在明确测试目的后开始设计测试任务，测试任务是可用性测试的核心内容，需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求，将任务场景化，然后对复杂任务的整体流程进行拆解，列出任务列表，以此来编写任务提纲

任务包括场景，操作和具体目标，设计的任务要有代表性，对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景；在任务描述时做到语言简洁，避免指定的操作或引导用户，若任务流程较长，可以进行拆解形成多个用户触点，但触点操作不需要告知用户，仅在用户操作时进行观察即可

1.3 设定衡量指标

在设计好测试任务后，我们需要为任务匹配对应的可用性指标，目的是为了通过指标反应测试内容的可用性问题，帮助实施者有重点的进行观察和记录，还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈

可用性指标主要包括有效性、效率性、满意度；这三者构成了衡量指标的一级指标，而每个一级指标下还包括更加细分的二级指标及衡量方式和标准，这就构成了可用性指标对照表；我们依照可用性指标对照表对每个任务的重点有了基本的概念，并且可以根据具体任务描述和衡量指标得到测试记录表

现在我们对每个任务的可用性指标有了基本的概念，但是可用性问题除了从实施者角度去观察用户行为和结果，还需要帮助测试者结合任务进行自评和反馈

而在帮助测试者进行任务反馈时，需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递，并且能够做到量化分析，这也就是ASQ评估量表的作用和目的

有效性可以理解为任务的完成情况，即成功完成、求助后完成，未能完成

效率性则是针对特定任务，观察其完成时间是否在正常范围内，其任务完成路径是否符合标准路径，是否存在偏离和犹豫的地方，在进行定量研究时常用指标有任务完成效率、理想路径偏移率等

满意度则是用户自我报告数据，包括任务完成难易度评价、任务完成满意度评价、及评价原因

根据场景描述、测试任务、节点反馈和ASQ评估量表，我们可以得到“任务卡片”，“任务卡片”可以帮助用户快速进入角色，明确内容，量化反馈，在每次任务完成后，将测试者所勾选的ASQ选项对应的分值相加，便可以得到任务评估分值

1.4准备测试脚本

可用性测试一般情况下需要两人协同配合进行，通常一人安排任务鼓励用户发声，一人观察记录，由于涉及内容较多，成本高样本含量低，对被试用户进行的活动任务也比较复杂且环环相扣，所以为了保障测试任务更好的实施，一般情况下会准备一份较为完整的测试脚本以供团队更好的配合

一般测试脚本包括自我介绍、访谈预热、测试规划、测试任务、量表问卷（可选）、结束语、记录文档、相关文档

1.5准备测试原型

1.6招募用户

用户可以大概分为新手用户和专家用户两种类型，当然也可以进行更精细的划分，例如（萌新、高浅、活跃、专业）在招募时为了结果可靠，应避免产品设计相关人员的参与，选择有代表性的用户，其中真实的产品目标用户为最佳，测试者不宜过多，一般5名左右就够了

例如调研XX产品的直播教室的可用性问题，就需要招募已在平台入驻且售卖直播课的老师，在招募时还需要进一步的筛选，如果招募的5名老师都是长期使用平台产品进行直播上课，用户对于产品功能足够了解，关注点会与新手用户会产生较大的差异

1.7准备场地

包括预约测试场地、记录设备、分配主测员和观察记录员、准备相关话术及活动礼物

• 测试场地：一般选择安静明亮的房间/会议室进行，访谈者和用户最好呈90度的座位

• 记录设备：安装测试产品的电脑、手机；记录设备可以使用录音笔、相机或DV。设备要稳定，电量充足

2.测试中

2.1暖场

在了解用户情况和布置任务前，不要太直接的进入测试氛围，营造一个相对轻松的交流环境。先聊点轻松的话题，“您从哪里过来的呀”“平常工作忙不忙”等问题，缓解气氛，把用户带入测试场景。可和用户聊聊被测产品相关的小问题，平时怎么用的？一般什么时候用？感受怎么样等等

2.2布置任务

向测试者发放任务卡，结合任务卡中的角色和使用环境对任务进行简单的介绍，如果是专家用户任务就不用过多描绘场景，可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等

2.3观察并记录用户使用过程

这个过程观察记录和引动测试者随时的发声很重要，与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为，用户的发声思考可直接影响可用性测试的效果和结论

我们可以适当引导用户进行思考发声，甚至可以为用户做一些简单的示范，例如 在新建时，可以说“我准备新建一门课程”，“我正在寻找建班功能，我现在遇到一些问题”等等，将自己操作时的想法表达出来，不需要刻意去思考，这有助于主测员去了解测试者的想法和感受

每个任务完成后，通过“任务卡片”重点回答测试者任务的完成情况，遇到的问题，询问测试者的态度和感受，还需记录任务完成的时间；与任务不相关的反馈可以记录在备注中，而在记录时尽量采用词组、短句的快速记录方式记录核心内容，整理后作为优化任务帮助产品进一步提升可用性和易用性

2.4进行量表问卷

ASQ量表

上面在介绍可用性指标及任务卡片时我们有提到ASQ量表，其主要涉及有效性、效率性、满意度3个方面，安排在用户完成单个情景任务之后，这时用户对于任务流程的操作感受是最明确和清晰的

SUS量表（可选）

SUS量表一般在相对完整产品整体的大型可用性测试后才会使用，因为一般的中小型测试任务比较集中和针对，用户无法感知整个系统，量表针对测试设置10个问题（有效性、效率、满意度），包含5个选项：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）

在布置问题时，奇数问题采用正面阐述，偶数问题采用反面阐述，以此来确保用户评价的可靠性

单个测试者提交量表后，我们需要计算量表分值，奇数项计分采用“用户打分”-1，偶数项计分采用“5-用户打分”，由于是5点量表，每个题目的得分范围为0-4，共10题，所以最大值为40，而SUS的范围在0-100，所以需要将所有转换分相加后乘以2.5，即可获得SUS分数

3.测试后

3.1问题归类分析

简单测试直接根据发现的问题优化设计即可；如果目的是用于讨论和汇报，需要对记录内容进行整理和输出，这时需关注问题的出现频次、优先级和用户反馈，按照问题维度分类，将不同用户暴露的相应问题进行合并，罗列问题所对应的功能点、可用性指标、用户比例、用户反馈及相关现场记录文件，之后基于问题对业务和体验的影响划分优先级并且标出对应的PM同学，最后针对这些问题给出优化建议

问题优先级的划分方式

通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题，根据问题对任务完成度的影响，我们可以划分为P0（紧急问题）、P1（重要问题）、P2（次要问题）的方式对问题进行优化和排期

• P0：用户遇到阻力且无法解决，未能完成任务的问题

• P1：用户遇到阻力且反馈频次较高，在求助后完成任务的问题

• P2：用户遇到阻力但可以自行解决，完成任务但感到不顺利的问题

3.2输出测试报告

较大的可用性测试在得出结果后需要向团队内的成员分享，所以需要进行一次报告输出做到内容对齐，一般包含整体概括、重点发现、项目背景、测试过程、测试结论、优化方案几个模块，具体汇报形式是不受限制的，一般文档形式输出较为高效，keynote汇报从内容和形式上会更加丰富

• 整体概括可以将测试背景及测试结论简单的阐述，其中测试背景包括（项目背景、测试内容、施测情况），测试结论包括（测试结论、优化建议）

• 项目背景就不必多说了，将业务背景和测试目的进行简单概括即可

• 测试过程包括准备阶段（如何招募用户、招募了多少名、用户的基本信息和类型；有哪些测试任务、如何进行测试和记录形式）及测试阶段（本次测试安排的任务、设计的量表问卷、现场的录像照片）两个环节进行展示

• 测试结论需要将暴露的问题进行问题描述，结合整理的文档表格详述问题未读和用户反馈

• 最后，结合问题提出完整深入的优化建议和解决方案

3.3后续跟进方案

• 探讨解决方案：协调产品、设计等多个角色来探讨合适的解决方案，要注意，设计时要思考新方案是否会带来新问题，并再次通过可用性测试来验证新的方案。

• 持续跟进：了解项目结果的落地情况；已改进的问题或遗留的问题可在下个版本的测试中继续跟进

B. 问卷调研

在进行问卷调研之前，我们需要认识到问卷调研包括两种调研类型，定量调研与定型调研，实际上大部分的问卷都是定量调研，需要大量的用户样本，在收集问卷后需要分析数据占比来验证用户想法，另外小部分就是定型研究，一般原因是因为用户样本量较小，通过小样本量来研究产品的可用性问题

1.问卷前的准备

1.1明确调研目的

问卷调研中设计者并不直接接触用户，所以在问题的深度和广度上是有限的，一份问卷不能解决多个问题，通常会围绕解决1-2个核心问题去研究，在设计问题之前需要明确此次问卷调研的目的，然后围绕这个目的去思考各种问题，通过怎样的问题达到怎怎样的结果

例如通过思考和确认，针对我们这款由0到1的知识教育平台型产品，其调研的目的主要在于

• 需求验证，包含对用户进行市场分析、了解现状、发现问题，从而提供解决方案，再到两端用户是否满意现在的解决案

• 用户接受并付费的意愿如何。收集用户信息、挖掘分析用户的付费意愿以及付费习惯

问卷的目的一般可以分为六个方面：

1.2目标用户分析

对调研用户进行分类是较为重要的环节，用户类型不同，问题内容也不同，只有在不同角度不同用户下设计的不同问题才会获得有价值的结果

这种情况在问卷中还是比较常见的，例如我们填完问题一后，根据选择的不同，可能会跳转到问题三或者问题五，这就是问卷设计者根据不同用户分类进行的多种问题设计

例如在收集知识平台满意度和相关竞品使用习惯时，个人机构和组织机构的视角是不一样的，B端客户和C端消费者的视角也是不一样的，所以在问题设计时需要分开对待

问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例，提高调研质量和数据可信度，便于后期对用户进行更加深入的调研

举例

结合上面调研的目的及用户分类，以此我们思考在问卷的设置方面：

对于B端（老师）来说，首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受

对于C端（学生）来说，首先需要了解的是用户基本信息，是否使用过课程相关的服务，用过哪些竞品、吸引用户的点在哪等等

1.3内部需求对齐

当需要有问卷调研的需要时，首先应该与团队内部各合作方对齐调研意向，一方面是为了避免过量的问卷投放打扰到用户，另一方面问卷调研属于团队项目，在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法，这样一来才能将问卷调研的价值最大化

例如教育平台侧在新版本上线前为了调研售课老（机构）师对平台使用的满意度和深层次的需求问题，那么在发起调研之前，需要跟产品、教研、客服等业务合作伙伴对齐需求

2.设计问卷

2.1划分问卷模块

设计具体问题之前，我们需要预设几个问卷的模块，通常围绕几个类型：用户类、行为类、产品类、态度等，在得出完整的问卷之前，我们不需要考虑问题的先后逻辑是否合理，先根据调研目的和模块类型进行问题穷举，当用户模块相关问题写完后再继续写下一个模块的问题，直到所有模块的问题都已经设想完毕，在对问题进行重组

用户类：收集用户基本情况，方便我们了解用户群体，比如：职业、学历、团队构成

行为类：了解用户的行为或者与围绕产品相关但不涉及产品本身的问题。比如：有没有在其他平台入驻、售课时视频课比较多还是直播课比较多

产品类：了解用户直接与产品相关的体验问题。比如：对产品印象如何、一般使用某产品的哪些功能、频率怎样、还用过哪些竞品、喜欢哪些功能

态度类：用户对产品的看法。比如:评价、好感、想要的功能；尽量避免提一些无法判断、没头没尾的问题，一方面对产品优化没有帮助，另一方面会降低用户的的期望

2.2衡量问题类型

问卷的问题形式是多样的，题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成，需要根据具体目的来选择相对应的问题

封闭/半封闭题型的选择在于能否将答案穷举，避免出现用户因为没有合适的选项而随便勾选答案的情况

量表题型在答案上有明显的程度高低区分，设计者对该问题有进行统计的需求

在问卷中应尽量避免较多的开放问题，一般在针对某种方向/某个定性的问题做预探索时使用

这里只对问题的类型做简单的概述，具体的形式是多样的，例如选择题可以有单选、多选、图片选择；量表题除了打分之外，还有排序和点数分配等其他形式

2.3问题重组

在得到具体的问题后，我们需要对问题进行重新编排，通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答，除了按照问题的难易度之外，还需要根据问题的属性由浅入深的重组问题

例如问卷开始先安排过滤题用于过滤用户，识别用户是否符合问卷的目的来保证问卷数据的质量，然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组，当然这些顺序并不是固定的，需要依据具体的问卷内容进行调整

关于过滤问题：

用户在实际问卷回答中，受到各方面因素的影响有很多，例如有时用户出于自我暗示、自尊心或者时间紧张状态下，很难根据自身实际情况完成问卷调研，而是随机挑选或者作出相反的选择，这种问卷在回收后会对定量分析造成干扰，所以我们需要依据问卷重要程度，安排适量的过滤题来避免此类情况的发生

比如在对于关于产品改版的满意度调研中，向用户询问有关产品功能的问题

如果用户回答“某某功能”，但在是否知道时选择了否，或者使用时长很久，但却不知道某某功能时，在后期数据中，可以将这部分无效问卷去除

• 问题注意事项

3.问卷投放

3.1问卷评审

一切准备就绪，是不是准备投放问卷了？别急，许多问卷在投向用户之前，往往会忽视通过内部手段进行问卷自评，通过问卷自评可以发现这份问卷有没有偏离最初的调研目的，你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等

一般自评包括3个环节：问卷自审、问卷内审、问卷内测

• 问卷自审

问卷设计完毕之后，需要根据最初确定的调研目的对问卷进行自审，可以站在用户的视角对问卷进行第一次填写，确定问题是正确有价值的，是有其他选项，也可以估算回答问卷所用时间，问题中的词语是否能被用户理解且没有歧义等

• 问卷内审（可选）

不少公司内部有设立专门的用研团队，在确立调研需求初期就应该与需求方深度绑定，有明确的需求认知，有句话叫当局者迷，邀请用研团队参与审查可以从专业角度把控用研目标，评估问题是否能被用户接受等，他们可以从一些不同的角度发现问题

• 问卷内测（可选）

内审之后，可以借助产品的代表性用户（一般3-5人）进行问卷内测，通过观察填写情况来检验问卷设计的合理性，例如观察答题时间、用户类型与题目是否关联等等，确保证问卷上没有其他问题

3.2预计采集样本量

内测完毕之后，就可以向用户投放问卷了，为了避免给过多的用户造成打扰，我们需要根据产品的用户数量判断问卷的投放数量

一般没有明确规范多少用户投放多少问卷，基本都是自己判断，一般如果总用户量不足30，需要至少覆盖50%（15个）；如果总用户量30-100，30人以上就可以；如果是总用户量100-1000，覆盖20%-50%就可以。

3.3选择投放渠道

我一般常用投放渠道有：1）飞书推送；2）站内公告；3）其他内部资源

问卷调研基本分为线上调研，线下调研两种方法，线上通常是问卷投放或者电话询问的形式，线下一般与用户访谈相结合，做到定性定量相结合；选择投放渠道时，一般根据调研目的、投放预算、预计采集样本量、统计分析成本来进行判断

4.数据清洗产出报告

一般用研团队会使用专业的解决方案快速作出数据分析，比如SPSS，而设计师在实际工作中很少会接触到此类工具，因为此类视角下探索的方向和内容更加具体，变量在可控范围之内，不太需要复杂的分析模型，较为常见的更偏向Excel或者问卷平台自带的分析功能，所以我们可以对分析思路做一个简单的了解

4.1数据清洗

前面在问题设计时我们有讲到筛选题相关的内容，加入筛选题的目的就是在数据分析前便于我们将异常问卷剔除出去，保证最终结果的准确性，除了观察筛选题的选项之外，我们还可以根据问卷填写时长、量表打分规律、问卷填写完整度等几点进行问卷筛选

4.2问卷分析

• 看整体

还记得我们设计问题的第一步划分问卷模块吗？模块通常围绕几个类型：用户类、行为类、产品类、态度等，在分析问卷时可以基于这些结构得出一个较为整体的情况分析，例如用户群体结构（用户类）、存在的问题和新的诉求（用户建议）等，通过对比相同角色的回答，找出共性的问题和信息

• 看差异

在得出整体结论之后，我们可以通过差异分析深入挖掘更多信息，例如观察不同用户角色对于产品的建议或者评分，会发现用户角色对于产品的建议和需求是不同的，这种分析方法重点在于找到两个可能存在关系的因素，通过对比不同角色的回答，找出差异和影响因素，根据上述举例就是将（是什么）（怎么样）进行差异对比

• 问题归类

根据反映问题的模块对用户问题进行归类分析，写明用户的问题描述和具体模块，并且对后续优化提供解决方案

4.3产出报告

问卷报告一般包含调研背景、问卷回收情况、调研结论（功能优先级、用户反馈、数据展示等）、整体评价（功能评价、体验评价）、等，分析时从数据出发找出差异，分析原因，给出结论，在具体汇报时可以按照先结论后具体问题的方式呈现报告，同时可以结合数据提供相对应的解决方案

  

C.用户访谈

1.访谈前

1.1明确访谈目标

明确访谈目标，可以保证访谈内容在大方向上是一致的，例如调研班主任实际外呼的场景及外呼时关注的信息，在访谈时就不会去问关于主讲排课的问题，也可以防止访谈过程中遇到富有表达欲的用户偏离主题，在访谈过程中难免有用户兴致勃勃的谈论自己对产品的看法，在这种情况下，拥有明确的访谈目标可以保证深陷用户的情境中不迷失访谈方向，保证访谈的最终结果是有价值的 

1.2确定访谈类型

根据不同的访谈目标，可以分为三种访谈类型：

• 开放式访谈

在围绕的主题和问题上都是开放的，没有固定的问题也没有固定的答案，采访者可以根据受访者的表现进行相应的问题补充，受访者可以充分表达自己的观点和意见，氛围最为轻松，接近人们日常的对话，适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的

• 结构式访谈

有严格的问题顺序，采访者必须按照顺序和题目提问，受访者回答的答案都是固定的A、B、C、D，这就需要采访者必须有一个很清晰的目标，在问题的设计上要仔细推敲和打磨受访者可能回答的形式，当然，再缜密的设想在实际访谈中也会有意外，所以也会设置一些开放性的问题让受访者可以自由的进行表述，并给出更加开放和深入的回答，适用于定量数据的研究

• 半结构式访谈

是实际工作中运用的最多的一种形式，在形式上是结构式与开放式的结合，包含了固定的的问题之外，也设置了开放式的问题，根据访谈时的受访者的实际情况进行问题的增减，适合定性+定量研究

按照访谈的途径来划分，又可以分为线上和线下两种，在受访者不方便的情况下可以进行电话访谈的方式来进行，但是如果访谈包含较为复杂的经历和过程的询问，线上访谈比线下访谈要逊色不少

1.3设计访谈提纲

明确访谈目的与访谈类型后，就要基于访谈目的，拟定访谈提纲，访谈提纲是方便与用户交谈过程中抓住核心，保证访谈高效有序进行的关键，就类似一个标准流程，保证需要研究的问题都可以包含在内，访谈提纲一般包含五个部分，分别是访谈目的、开场白、提问访谈、用户演示、结束语（基本信息、过往经历、产品感受、流程体验、竞品体验），其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题

提问访谈是提纲中较为重要的一环，问题设计要由易到难，由浅入深，由边缘到核心，在开始阶段设计一些简单的开放式问题来营造访谈的氛围，这个过程中可以了解用户的基本情况或者对产品的使用情况，等访谈向一个方向聚焦时，再逐渐收缩问题范围，逐步追问核心问题

设计好的问题还需要整理成访谈记录表，在进行访谈、时，一方面按照访谈清单大纲尽可能的进行脱稿提问，另一方面则需要记录用户对于问题反馈，记录问题时记录员最好记录用户的逐字稿，以便于后期进行记录整理时不与用户表达产生偏差

1.4招募用户：

用户招募是较为重要的一环，承接访谈前后两个阶段的关键节点，用户招募准确，后面的访谈才有实际意义，招募哪些用户是由访谈目的所决定的，一般招募环节分为三部分

• 1.41.明确目标用户

招募用户的选择是由访谈目的决定的，不同的访谈目的所招募的用户是不一样的，一般按照使用产品深度的纬度来划分用户

• 核心用户：产品中较为活跃的用户

• 边缘用户：产品中即将流失或者已经流失的用户

• 潜在用户：当前并不是产品用户，但在产品定位的用户群体中

而访谈目的一般有两种情况

• 研究产品所存在的问题，例如研究一下最近用户活跃度为什么下降

• 研究产品目标用户所存在的需求，例如研究用户对新功能的满意度

所以如果访谈目的是发现产品现存的问题，那么应该去寻找核心用户，他们那对于产品有着明确的认知；但如果为了增长，则应该寻找边缘用户和潜在用户，他们会告诉你他们需要什么，你需要做什么

• 1.4.2多渠道招募

面向内部用户的产品进行用户访谈时，一般直接找对应访谈者的leader或者pm沟通即可，而在对外产品时则需要根据确定的筛选条件进行用户招募工作

核心用户的招募相对边缘用户较为简单，一般可以通过行为日志数据、登录时留下的联系方式、产品用户群或产品内运营推送推送来招募核心用户

潜在用户由于对产品接触较少，一般通过问卷、外包招募、熟人推荐的形式进行招募

• 1.4.3验证目标用户并邀约

在得知用户是否愿意接受访谈后，需要再次验证这些用户是否真的符合样本特征，要注意的是，筛选访谈对象要注意平衡，避免同一类型的对象占了过多比例，导致访谈结果不全面

例如做一次关于学习平台APP的功能优化访谈，就要避免对象大部分是管理者、80后的情况，因为用户不是目标用户、80后用户的需求频率不大

很显然，90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户，那就根据这类人群的角色模型来筛选邀约对象

1.5准备场地和物料

• 场地选择

用户访谈的可选场地有很多，大部分是请用户到公司来使用公司的会议室，或者有的公司拥有休息区或者共享空间，环境较为舒适和温馨，也是可以的

需要注意的是，场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感

• 物料

采访者需要提前准备好物料，包括访谈记录表、访谈提纲、录音设备；访谈时可以一人负责提问，另一人负责记录，在使用录音设备对受访者进行录音时，需要提前告知并取得同意

2.访谈中

2.1开场白

在一切准备工作ready之后，可以进行访谈了，访谈中难免遇到一些不善表达的用户，如果一开始就切入正题进行访谈，访谈者可能在紧张的状态下无法与采访者达成信任关系，气氛就会有些尴尬

所以需要先进行简单的寒暄和自我介绍让气氛轻松起来，还可以简单介绍访谈的背景、流程、内容、时间，告知受访者今天只是探讨问题，没有对错之分，所以希望畅所欲言，不要掩饰真实想法

2.2访谈并记录

还记得咱们前面准备的访谈提纲吗？在进行简单的暖场之后，我们可以先对用户的基本情况和使用经历进行询问，从职业、流程、爱好等基础信息作为切入点，为用户营造特定的使用场景，然后再进入访谈环节

访谈时，抛出问题的目的不仅仅是得到用户的一个结论，而是希望用户借此将自己的体验和前因后果告诉采访者，然而很多时候，用户告诉我们的信息都比较浅显，比如“我想要个xxx功能”“我觉得xxx挺好的”，这时我们需要对用户想法刨根问底，从而证实用户说的“想要xxx功能”是否合理，或者看能否想到其他解决方案

• 如何刨根问底？

1、结合梯子理论，通过问用户以下4个层层递进的问题，来了解用户需求和用户心理

• 属性：对于这个产品，你最在乎什么功能？

• 利益：你为什么在乎这个功能，它可以解决你什么问题？

• 心理：解决这个问题，可以达成你什么目标？

• 价值观：你为什么在乎这个目标？

2、情景再现

回答提问时，用户很少会去主动联想具体使用场景下的体验问题，比如当你问“上次旅行去哪玩了？”用户大概率会回答“去环球影城玩，人特多排队两小时，玩了个什么叫鹰马过山车，20秒，下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点，等等这些更想要了解的问题告诉你

我们需要帮助用户在基本体验之上还原体验的动机，引导用户对使用场景进行还原，了解用户当时场景下的行为，再针对场景和行为去挖掘用户产生这种体验感受的动机

3、鹦鹉学舌

复述的时候，有时用户还会根据你的复述追加一些他当时没有想到的关联信息，比如“你的意思是。。。我的理解是。。。对不对？”这样可以避免双方理解的偏差，还可以总结提炼用户的观点。这样又可以挖掘到更多内容

2.3结束语

在访问结束后，我们可以与用户一起快速回顾访谈的内容，如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏，并将事先准备好的礼物或者酬劳送给用户表示感谢，向参与度高，善于沟通的优质用户表示保持联系，留下联系方式方便后续进行可用性测试或者再次访谈

3.访谈后

3.1整理访谈内容

一般是在两个用户访谈之间的间隙进行笔记的整理， 将用户的口头语言转换为书面语言，这样一方面减少后续因访谈内容大量堆积而形成的整理压力，另一方面可以根据上一场访谈进行复盘，从而对下一场即将开始的访谈进行内容调整，在整理时我们需要将重点放在用户的提出的问题和负向反馈上

3.2问题归类分析

整场访谈结束之后，我们会发现用户会提出各种各样的问题，我们需要依据问题的纬度进行分类，将不同用户遇到的相同问题进行归纳

问题归纳主要包含两个部分，主要问题和具体问题，主要问题就是访谈中出现的较为明显的反馈问题，例如“超7成用户对首页推荐的内容并不感兴趣”，而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型

3.3产出报告

访谈报告是至关重要的，一方面可以和大家共同讨论发现用户真实想法，另一方面也方便产研团队根据问题关键点投入人力作出进一步优化，一般在访谈当天完成结论报告，时间有限是以关键结论为主，具体问题可以后续补充。访谈报告一般包含访谈背景、参与人员、用户信息、主要问题、具体问题、用户建议、优化建议

总结

本篇文章是我学习到的用户调研的三种方式，调研方式不重要，重要的在于如何理解用户需求，真正了解用户想要的是什么，无论B端还是C端，产品最终还是要服务于用户，作为设计师同样需要了解用户研究，只有对用户足够了解才能作出高体验质量的产品。

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

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

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

What 是什么

简介：「多级撤销」允许用户撤销一系列的操作。用户操作的顺序能被系统捕获记录，根据原始执行顺序，一步步返回历史操作。

例子：用 Sketch 画设计稿时，可以多级撤销，允许用户返回上一步或更早的历史操作

Why 为什么

具备多级撤销的功能可以让用户觉得能够对界面进行安全探索，不必担心造成某些不可取消的修改。例如，如果单击了错误的菜单项，不需要进行复杂的恢复，不需要退回到此前保存的文件版本，或者寻求系统管理员的帮助。

多级撤销也让专家用户更快更容易地探索工作路径。举例而言，一名 Photoshop 用户可能会在一个图片上执行一系列的滤镜操作，研究那些结果看是不是他喜欢的，然后再逐一撤销，回到起点。

When 什么时候使用

需要用户频繁在单一页面上交互的用户界面，相比普通的网站或者移动端 APP，交互操作要复杂得多。例如：文件编辑器、图形建模工具、邮件阅读器、数据库软件、写作工具、编程环境等。该功能能使用户撤销一系列操作而非单一个操作。

使用条件：该软件的单一界面交互比较复杂和频繁

How 如何使用

软件首先需要一个强大的模型，这个模型是关于动作是什么样的——动作的名称、动作所关联的对象，以及如何返回历史动作。

决定哪些动作需要成为可取消的操作。如果动作可以改变一个文件或者数据库——任何将是永久性存在的对象——都应该是可取消的动作。具体而言，在大部分应用里，人们期望能撤销下面这些改变:

• 文档或表单的文字输入

• 数据库

• 图片或画布的修改

• 布局上的变化位置、大小、顺序或分组在图像应用程序中

• 文件操作，例如删除或修改

• 对象的创建、删除和重新组织，例如邮件消息或电子表单的列

• 任何剪切、复制、粘贴操作

下面这些修改基本上是不可撤销的：

• 文本或对象选择

• 窗口或页面之间的导航

• 鼠标光标和文本光标的定位

• 滚动条的位置

• 窗口或面板的位置和尺寸

• 在一个未提交的对话框或模态对话框上的改动

展现方式

然后，决定以哪种方式把撤销操作展现给用户。大部分桌面应用程序会把“撤销/重复”的菜单项放在“编辑”菜单下。撤销通常也关联到Ctrl+Z 或类似的快捷键。

Example 案例

案例一：Microsoft OneNote 笔记编辑器

用户需求：撤销文字输入

Microsoft Onenote  文档编辑器挡在输入过程中需要修改可以用快捷键 COM + Z 撤销，或者使用编辑菜单下的按钮帮助用户返回上一步。

案例二：Photoshop 多级撤销

用户需求：回到历史操作记录

Photoshop 同样可以采用快捷键和菜单按钮返回历史操作，由于 PS 的操作修改繁琐且复杂，所以为用户提供了历史记录面板，用户也可以点击历史操作步骤回到想要的历史操作记录。

案例三：美图秀秀图像处理 App

用户需求： 撤销回到上几步图像处理结果

使用美图秀秀等图片处理 App 对图像进行美化操作时，常常会返回查看对比不同的效果，或者操作错误时返回到前几步，顶部的撤销按钮可以让用户回到任何历史操作步骤。

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

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

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

“Uber是一种非常独特的模式，没什么可以参考的产品”

——Travis Kalanick

Uber遍布全球65个国家，超过600个城市，拥有7500万用户，为很多人解决了交通不便的问题。

这个规模和增长速度是前所未有的，Uber提到这其中独特的商业模式和用户体验是驱动。

所以哪些是最重要的用户体验问题，Uber又是怎么通过科学的方式来解决这些问题的呢？

Uber用户最大的痛点-等待

-

想象一下你在凌晨2点的冬天，独自矗立在陌生城市的街头瑟瑟发抖；或者是你要参加一个重要的会议，如果Uber准时到达的话那就正好赶得上。

在这些非常紧急的情况下，人们对时间的感知是扭曲的，等一秒像是一分钟，等一分钟像是一个小时。

不仅如此，人们还会用这种扭曲的等待时间来评价整体用户体验，为什么会这样？这就用到一条心理学原则叫“峰终定律”（peakend rule).

隐藏在“难以忘怀的用户体验”背后的科学

-

Image via UI Patterns.com

峰终定律指的是人们基于最高峰体验和最终体验来评价整体体验，而不是在这段体验中的平均感受，这个定律对好体验和坏体验是通用的。

对品牌来说，顾客会深刻记住这两个点：最坏（或最好）的体验、最后的体验。

Photo by why kei on Unsplash

好体验对“等待时间”的要求是非常苛刻的，这也是用户给出好评的关键点，Uber花了无数时间来解决这个痛点，这就是Uber决定要应用心理学来完善用户体验的原因。

在这份调查中，Uber发现了3个关键原则，可以解决“等待时间”这个痛点：厌恶无聊，操作透明化，目标趋近效应。

1.厌恶无聊

-

“人们讨厌无所事事，他们需要一个原因忙起来”

——researcher Chris Hsee

Photo by Fabrizio Verrecchia on Unsplash

最近对心理学、幸福和用户体验的研究，揭示出一个原则，就是“厌恶无聊”，指的是人们在忙碌时感到更快乐，即使他们是被迫忙碌。

如何应用这一原则？

可以让用户参与读取信息、游戏化和增加视觉效果等方式，让用户保持忙碌的状态。

像下面Uber采用的方式，他们利用一个动画来愉悦用户，同时实时告诉你等待时间。

Uber Blog Australia

2.操作透明化

-

“当用户从我们为他们创造价值的过程中分离时，他们会感觉我们没有全力以赴。

这时候他们较少重视或肯定我们的服务。”

——Ryan Buell，哈佛商学院

Photo by Sitraka Rakotoarivelo on Unsplash

操作透明化是一种能让用户看到公司如何运营操作的直接方式，这样用户就能看到我们在整个过程中付出了多少努力。

根据最新的研究发现，操作透明化会让用户对产品的价值评价更高，让人们感觉更好。

如何应用操作透明化？

及时告知用户，让关键信息可见，还要帮用户理解信息来源。

在下面Uber Pool的例子中，他们提供了到达时间的计算方法这一信息。通过一种简便的方式告诉用户，即使是没有任何技术基础的用户也能看懂。

Engineering at Uber（右图详细解释：我们是如何计算到达时间的）

3.目标趋近效应

-

目标趋近效应表明人们更愿意为即将达成的目标而付出努力，而不是他们已经走了多远。

Photo by Jonathan Chng on Unsplash

越接近目标，用户就越愿意采取行动更快的去完成这个目标。

如何应用目标趋近效应？

想象目标趋近效应是一条真实存在的终点线，用户越接近终点，越能鼓励他们积极行动。

你也会经常看到这个原则应用在很多交互元素上，比如进度条，填写完成度等，用即将完成来鼓励用户完成任务。

Uber通过解释幕后发生了什么来应用这一原则，他们解释过程中的每一步，让用户感觉到为了达到他们的目标正在不断的努力。

最后

-

毫无疑问，Uber很大部分的收益来自利用科学改善用户体验，最先在Uber Pool运行的增加了厌恶无聊、操作透明化、目标趋近效应的实验版本，效果非常好：

“Express POOL团队用A/B测试的方式，发现增加这些解决方案后，取消率降低了11%”

——“Uber如何大规模利用行为科学”

如果你想在产品中应用这些原则，必须要结合非常严格的测试。一个原则的应用，可能要通过上百种实现方式对比实验，才能找到最佳解决方案。

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

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

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

蓝蓝推荐：这是一篇很实用的表格基本交互形式文章！
译文：如果没有将数据可视化和具备编辑数据的功能，数据就毫无用处。未来行业的成功依赖于将数据收集与更好的用户体验结合起来，而数据表格的设计体验则非常重要。

当我们设计Web表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。

例如：在表单界面Label（标签） 和 Input（输入框） 上下还是左右排列合理、Label要不要加冒号、输入框到底多宽合适等等......

以上这类问题看起来并不影响用户完成任务，很久以来也少有人关心这些细微之处会不会对用户有什么影响。

以至于，我表达想写一篇探究这些细节的文章时，同事会偷笑说：你都开始研究标签末尾要不要加冒号了吗......，太冷了——真是个冷知识！

确实如此，这些偏门、细碎的内容，鲜少有人会去留意和思考。因此我在写下这些分享内容时期望可以达到目标是：“冷知识虽然冷，但有用”。用我了解的这些表单设计冷知识：启发你的冷思维、引出你的热思考。

话不闲聊，我们开始讨论第一个问题：

 

///

01.标签末尾要加冒号吗

有个表单细节不知道你有没有想过，标签末尾是否要加冒号？

这个问题在我前团队发生过激烈争论，有同事说：“不要加，占用间距，而且没人会留意它......”,也有人说：“要加，从含义上讲，冒号的作用就是提示上下文或总结上下文的停顿。加上之后能更好表示标签与输入域的关联......."。

听起来好像都有些道理，那到底谁更对呢！

首先，我们追溯一下 Web 发展史，早期可访问性核对清单中通常坚持要标签带冒号，因为屏幕阅读器一度必须依赖各种技巧才能理解标记不明的表单。

而随着技术发展，Web表单使用“label”标签（tag）可以做正确的标记，那么屏幕阅读器就能通过标记（markup）把标签（label）和相应的字段对应起来则无需再借助冒号。

不过在客户端又有些意外！曾经 Windows Vista 指南中明确要求使用冒号， Mac Aqua 也有此要求但规则会稍灵活一些。这种情况是因为某些情况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难，桌面环境不会直接显示代码。也是这个历史原因，造成 Vista 和 Aqua 各自都有大量其标签包含冒号的历史表单。因为实在没有必要把它们全部改掉，直到今天客户端的表单依旧延续这一规则。

通过Web发展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别，如今的屏幕阅读器技术已转变为识别标签的底层代码，无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了。

 

那从情感角度分析标签带冒号的是否对用户体验有影响呢？

回到最开始，我和同事们的争论……

 

先简单说下答案，无任何影响！

在《Web表单设计·创建高可用性的网页表单》中，作者（卡罗琳·贾雷特）曾经做过大量的表单测试，最终证明从未有一名用户谈论冒号是否出现，即使是有些在其他环境中很介意标点符号的人似乎在线上表单中也未曾注意到。

 

从以上两个角度不难发现，无论是从技术发展还是情感体验，都证明可不必要求表单带冒号；因为可用性访问清单不再有这样的要求，用户研究也证明几乎没有人会留意表单冒号是否出现。

这样的结论，看似表单带冒号是失败了……，但这并不妨碍它作为一种习惯或传统延续至今，无论在客户端还是Web设计系统中仍然常见。例如：苹果电脑的Mac系统，国内阿里的Ant Design Web设计系统。

 

因此，得到以下几点建议：

如果你希望自己的网页表单与流行的桌面环境保持一致，请使用冒号。

如果你已有大量使用冒号的表单，请保持继续使用下去。

如果你在建立一个新的系统，你也可以索性抛硬币决定，不过要严格遵循一种方法。

///

02.哪种标签对齐方式更好

在表单中标签与表单域的对齐方式，如果你的团队已有明确的规范和使用场景，你只要拿来主义即可。可如果某天由你主导定义一个新的表单规范时，不知道你会不会重新考虑哪种标签对齐方式更好，怎样区分使用场景！

通过科学实验发现，无论是在眼动仪的热图，还是在许多可用性测试的观察结果中，用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧，甚至都不会瞟上一眼。

以此为基础，我们在网页表单设计中有3种最常见的标签对齐方式：顶对齐标签、右对齐标签和左对齐标签。你可能会说还有混合对齐标签、内联标签、图标标签等，这些确实存在但并不是最核心的几种对齐方式，它们基本是在这3种形式上变化，不脱离本质。

 

下面我们逐个分析一下：

 

1.顶对齐标签：

马泰奥·彭佐从2006年7月进行眼动研究发现，从标签移动到输入框只需50毫秒。比左对齐标签快了10倍，后者需要500毫秒；比右对齐标签方式快2倍，后者高达240秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势：

最利于减少表单填写时间（标签和输入框位置最为靠近）；用户视线固定，动线一直向下（清晰的完成路径）；节省大量横向空间（可用于以多种方式组合的相关输入框）。

劣势：

占用额外的垂直空间（如果可提供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签）；建议使用输入框50%至75%的高度作为相邻输入框间距。

适用场景：

希望用户快速填写表单，完成任务；同时，当输入项存在主次之分时，对标签扩展性要求高。

2.右对齐标签：

如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。马泰奥·彭佐的眼动研究发现，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒，而填写完成时间比左对齐快2倍。

优势：

标签与输入框相邻（方便快速填写）。

劣势：

右对齐布局造成左侧不齐，影响了快速游览表单的效率问题；若标签文字宽度变宽，右对齐还存在灵活度问题。

适用场景：

既要减少垂直空间，又要加快填写速度的场景。

3.左对齐标签：

在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。根据马泰奥·彭佐的研究，典型扫视时间为500毫秒，很长说明用户经历了沉重的认知压力。

优势：

容易游览标签；占用垂直空间较少。

劣势：

标签和输入框的相邻间距增大；适合于用户不熟悉表单要收集的数据或问题无法分成易处理的内容组，左对齐标签游览表单问题会更容易。用户只要上上下下阅读标签左栏，不会被输入框打断。

适用场景：

表单中存在较多的复杂或敏感信息，希望用户放慢速度、仔细思考（在一些注册类表单中较多使用）。

单从效率角度看，顶对齐标签>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。

因此，得到以下几点建议：

如果你希望用户放慢速度，仔细思考表单中每个表单项，左对齐标签是个好选择，特别是含有大量可选输入框或高级设置的陌生数据时；

而顶对齐标签在一些国际化产品的表单设计时，会有更好的延展性；

至于，右对齐标签虽然与表单域联系紧密，便于用户填写，但是要考虑好标签的长短不齐如何解决。能否精简标签内容，以及确定好表单与界面的边距。

///

03.标记必填与可选字段的困惑

许多表单设计中，有个常见问题：是否应该标记必填字段？如果表单中的大多数字段或全部都是必填的，我们是否仍然应该标记它们？

先简单回答：是肯定的，用户有时需要通过必填标记来评估工作量，了解输入信息量的最低限度。我会在下面具体解释原因。

 

了解不标记必填字段的诱惑

通常，设计师会觉得每个必填字段都有一个标记是重复的、丑陋的、占空间，而且干扰界面，甚至可能看起来很扰乱（有认知负担！）。因此通常采取以下一种或两种策略：

1.在表单顶部显示说明，说明中除非另有解释，否则所有字段都是必填；

2.只标记可选字段，因为它们通常较少；

3.在某些特殊情况下，也会什么都不做：相信用户会神奇地知道需要填写什么字段；如果不知道，那么只需要点击提交报错即可。

这些方法有什么问题？如果你这样想，我来告诉你

1.用户一般不喜欢阅读表单顶部说明。不难想象，用户不太可能阅读表单顶部的说明。表单字段需要自给自足，毕竟，每个字段都有特定指令——它的标签，为什么用户需要阅读其他任何东西来填写它呢？

2.即使用户阅读了说明，也可能忘记。你可能会说：用户阅读了顶部的说明，怎么就会忘记——这么简单的事情？

的确容易忘记，特别是当表单很长或填写表单被打断时（这种情况在移动端很常见）。即使用户记得，但这占用了工作记忆，增加了认知负荷。换句话说，你让用户完成任务更难了。填写表单本身对用户来说就相当有挑战性——为什么要让它更具有挑战性？

3.用户必须扫描表单以确定是否为必填字段。不难发现，无论是否在表单顶部包含说明，结果都可能相同，用户会忽略或忘记。他们会扫视表单，找到一个标记为必填或可选的标识。

而且有些用户甚至不会费心去环顾四周，他们只会做出假设。他们会想——“嗯，邮箱——不需要我的邮箱吧？先空着呢”。即使用户没有留空，也不得不暂停来思考一个字段是否需要填写，减慢交互速度并使过程看起来更长、更乏味。

想要解决以上问题很简单：标记所有必填字段。尽量明确和清晰展示每个必填字段，并标记它。当然，就像有些设计师所说：界面出现大量必填标识（红色星号*）确实会增加视觉噪声。甚至重复的星号 * 会带来一些认知恐慌。但相比之下，两害取其轻，这些负面因素是轻微的。

如何标记必填字段？

这里包含至少有两种方式：星号*（红色）和“必填”提示。星号*在网页上已经很常见，用户熟悉其含义。优点是它不占用太多空间，也看起来与标签文字足够不同，所以使用它。

可以使用其他标记形式吗？当然可以，但是最好遵循市面上常见的形式（雅各布定律），这样更符合用户认知。

星号应该在字段标签之前还是在字段标签之后？

这不一定有实际影响，但将其放在标签之前的一个原因是，只需扫视标签的最左边字符，就能轻松定位必填哪些字段。

星号*是一种视觉标记，应当仔细考虑表单中的标识位置。标识在标签左边能指引用户迅速浏览界面，并判断出必填项。如果在右侧由于输入框形式、长度各不相同，标识和输入框对齐会导致难以浏览和判断。

是否也应该标记可选字段？

虽然这不是强制性的，但标记可选字段确实减轻了用户思考：如果没有这个标识，用户要环顾四周，并根据其他标记字段推断该字段是可选的。如果“非必填”在字段标签旁边，那该任务会变得更容易。不描述可选字段，这没问题，但这样做会是一个很好的额外帮助。

为什么登录表单没有标记必填？

登录表单很短，一般由两个字段组成：用户名和密码，这两个字段总是必填的。如果使用星号*，标记这些字段的成本很低，并不会出错。但是，绝大多数用户都使用过很多登录表单，他们是知道要登录需要输入邮箱/用户名和密码的。所以，在登录表单中，可以省略这种形式。

而在注册表中不标记必填字段是危险的。注册表单因产品而异——不同公司在创建帐户时需要不同类型的信息。它不仅仅包含用户名和密码，所以请标记所有必填字段（包括用户名和密码）。

 

因此，提出以下几点建议：

基础前提，尽量去除任何不需要回答的问题，特别是涉及到用户隐私的内容。可以更容易让用户填完表单。

为了增加表单填写的机会，请尽量减少用户需要付出的努力和他们需要记住的信息。有很多方面有助于解决这些问题，但标记必填字段（以及可选字段）是最容易的方法之一。

///

04.表单域提供一些默认值有必要吗

先给出答案：这是肯定的！

在《选择的悖论》一书中，作者巴里·施瓦茨讨论了生活中选择过多的影响。并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量——即在满足多数人需要的地方放置选择——来帮助人们做出明智的选择。

而在Web表单中也有很多地方能利用智能默认减少不必要的选择次数或输入，加速表单完成过程。所以，只要合适就在表单域中预先为用户填写你认为他们想要的输入值。

通过提供合理的默认，能有效节省用户时间，就是这么简单。应用分担了用户思考或输入答案的工作。填写表单永远不是一件有趣的事情，如果这个模式能把表单填写的时间减少一半，用户会非常感激。

你可能会问：默认值不是用户想要的，误导用户怎么办？

在设计有默认值的表单域时，你要思考默认值是否是大多数用户可以接受的答案，如果不确信可以先去做一下用户调研，了解用户的心声。

就算默认值真的不是用户想要的，至少你也为他提供了一个示例来告诉用户答案应该是什么样子的。这一点也可以节省用户几秒的思考时间——或避免一条错误信息。

但并不代表所有的表单域都要给出默认值，我们只是尽可能的让用户节省时间。

 

如何使用：

在第一次向用户显示表单时，用一个合理的默认值预先填写文本框、组合框或者其他控件。也可以使用用户之前提供给应用的信息来动态地给出默认值（例：通过身份证自动识别出生日期；利用邮编，推导出对应省/市）。

如果只是因为你觉得不应该留下空白的输入域，那么不要使用默认模式。只有当你有理由确信绝大部分用户，在绝大多数情况下，不会修改这个取值时才提供默认值——否则，这将会给用户带来额外的工作！

///

05.输入框的宽度如何设定

有一个容易被忽视但实则举重若轻的问题，表单中输入框宽度如何设定？

在表单设计中，对于 Checkbox、Radio 等控件，很明确必须跟随内容自适应处理。但对于Input、Select等你会不会产生困惑，是定宽处理还是跟随内容更好。

不知道你是否试图这么理解过？输入框作为用户填写信息的主要方式，其表现形式是否可以提供给用户填写表单的有用线索。

唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。

在真实场景中，大部分输入框是存在理想长度的，那么就应该向用户暗示所需输入内容的长度来减轻判断负担。

下图就是典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理，反而容易误导用户对输入金额的判断，造成一种不安全感。

表现形式要为用户填写提供有用线索，采用不同长度的文本框提供了暗示；这种暗示是一种有用线索，当输入框长度长短不定时，用户会很自然地思考为什么这样；填写输入框时会自然考虑这些线索。

请注意！保证暗示效果的同时，不要设定太多的宽度，反而会让表单显得凌乱；太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。

什么是模度值和数量呢！

落在具体设计上要先梳理产品中常见的表单类型，然后设置一个默认宽度。以此为基础来有规律的增加长度，并考虑清楚它们的适用场景；从而定义出不同的模度，最终制定出整洁有序的模度规范。这样就可以让一线的设计师们跳过部分繁琐磨人的细节思考，快速搭建出合适的表单宽度并合理有效。

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

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

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

众所周知，黑帕云这样的产品几乎使用了所有类型 B 端的组件。

由于我司设计资源有限，所以在拥有了组件库、设计师定好了设计规范之后，作为产品经理就直接可以手撸设计稿了。

这是是前面一文《 B 端产品中，一个 Epic 基本功能设计的过程》 提到，作为一个长大了的产品经理，有时候没有资源给你做交互没有资源给你画 UI 的，你要自己学会自给自足。

这个系列就是作为产品经理的我，在这两年中“自给自足”做设计的的一些总结与发现。

自给自足的前提是，前面说的组件库和设计规范，即拥有一个设计体系（Design System）。

01.什么是设计体系？

关于设计体系的定义和内容各家都不同，我找出来了以下案例供参考。

《设计体系：数字产品设计的系统化方法》

Tilio（一个写作和笔记应用）联合创始人，有十年 UX 设计经验的阿拉·霍尔马托娃在《设计体系：数字产品设计的系统化方法》一书中这么定义：

设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。
模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。
实践则是我们如何创建、捕获、共享和使用这些模式，尤其是在团队协作时做这些事情的方法。

书中将设计体系分成以下几个部分：

设计目的、设计原则、组件库、样式指南，以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。

整理之后，可以参考下图：

Salesforce：Lightning Design System

Material Design

可以发现，以上设计体系无论如何定义概念，都是由设计原则+设计指南+一些基础的元素（比如 Design Token、Material Foundation、Icons）+组件库+其他资源工具构成。

形成这些内容的目的都是为了给自己产品建立一套保证设计质量、提升设计决策、提升沟通效率的“工具包”，从而让产品形成自己的符合设计原则的风格。

所以设计体系是什么不重要，重要的是如何在遵循设计原则下，能够高效做出高质量的设计。

02.设计原则（Design Principes）

一个开源设计原则和方法的网站 Design Principle 这样定义设计原则：

Design Principles are a set of considerations that form the basis of any good product.

译为“设计原则是构成任何好产品的一套基础考虑因素。”

比如 Salesforce 的设计原则是：清晰、高效、一致、美观。并且优先级由前到后。

可以理解为 Salesforce 会追求清晰大于高效、一致、美观，比如在产品设计中，让用户清楚的看到、理解、自信地去操作要比任何事情都要重要。

这个准则很容易理解，可以推论出 Salesforce 在度量体验时，将“易用性”放在了第一位，即作为一个 SaaS 产品，不能有任何让用户产生疑惑的地方。如果在设计上的美观而要牺牲清晰，这就是不可取的。

03.组件库

有了设计原则之后，下一步是需要一个组件库。这里说的组件库囊括了无论是原子化的颜色、字体、阴影、Icon 这些基本的元素，还包括了已经封装好的组件，如 Button、Alert、Toast、Text Input。

关于为什么要组件化，也不多说了，之前看过一篇阅文体验设计 YUX 的《组件化思维—— 适应并推动业务及产品变革的设计案例》写的非常清楚。

接下来我通过 Minecraft 这个游戏来总结了组件库。

玩过生存模拟类游戏大家都知道，在游戏中会有一些可以靠双手劳动得来的基础材料，比如砍树砍来的木头、地上捡的石头、挖矿挖的燧石。这些基础材料可以合成一些简单处理过的材料，比如把木头合成为木板。然后可以再把半成品进一步加工，比如木棍。

在 Minecraft 这个游戏中，如果玩家要制造一个弓箭，需要一个弓和一个箭。弓和箭的合成又需要一些半成品和成品或者原材料来加工制作，如下图：

对应在设计组件库中可以对照查看，一个完整的页面是可以通过一些元素、控件、组件、大组件组成：

04.适用人群

在系列开始之前，先声明一下文章的范围和适用人群。

关于 「B 端设计总结」这一系列，主要是我个人在已有了我们的设计规范和组件库后，“自给自足”的情况下探索出来的一些组件使用规则，更偏向产品经理或者交互设计师来参考。

所以系列中不会写设计规范，比如说字号、颜色、间距等等这些属于设计规范中内容。而是基于已有的规范，总结之前我们功能中涉及到的该使用哪些组件，也可以称之为狭义上的设计指南（Design Guidelines）或者设计模式（Design Patterns）。

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

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

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

设计思维史

很多人认为设计思维是全新的概念，这其实是一种常见的误解。设计已经实践了很长时间：纪念碑、桥梁、汽车、地铁系统都是设计过程的最终产品。纵观历史，优秀的设计师都应用以人为本的创意过程来构建有意义且有效的解决方案。

在 1900 年代初期，夫妻设计师 Charles 和 Ray Eames 实践了“边做边学”，在设计他们的 Eames 椅子之前探索了一系列需求和限制内容，即使在 70 年后的今天仍在生产中。1960 年代的裁缝师让·缪尔 (Jean Muir) 以她对服装设计的“穿着设计”方法而闻名，她非常重视自己的衣服在他人看来的穿着感受。这些设计师都是他们那个时代的创新者。他们的方法可以被视为设计思维的早期例子——因为他们每个人都深入了解了用户的生活和用户未满足的需求。著名的 I ♥ NY 标志背后的设计师 Milton Glaser 很好地描述了这个概念：“我们一直在寻找，但我们从未真正意识到......正是对人的注意让你真正掌握那些东西。”

尽管有这些以人为本产品的早期例子，但设计在历史上一直是商业世界的事后想法，是仅用于修饰产品的美学。这种主题设计应用程序导致公司创建的解决方案无法满足客户的实际需求。因此，其中一些公司将他们的设计师从产品开发过程的下游（他们的贡献有限）转移到了起点。他们以人为本的设计方法被证明是导致公司差异化的一个因素：那些使用它的公司已经从创造符合人们需求的产品中获得了经济利益。

为了在大型项目中能够采用这种方法，需要对其进行标准化：一种将创意设计过程应用于传统业务问题的正式框架。

1990 年代，IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语“设计思维”，并将多年来酝酿的方法和想法封装成一个统一的概念。

What——设计思维的定义

设计思维是一种伴随着过程而生的意识形态。

定义：设计思维是一种思想主张，一种注重实际操作，以用户为中心的设计方法来解决问题的思路。这种以用户为中心的设计想法有可能会带来创新，而创新可以带来产品差异化和竞争优势。设计思维包括 6 个不同的阶段，如下所示：

How - 过程

设计思维框架遵循 1) 理解、2) 探索和 3) 实现的总体流程。在这些更大的范围内分为 6 个阶段：同理心、定义、构思、原型、测试和实施。

同理心：进行研究以了解用户所做的、所说的、所想的和所感受的。

• 想象一下，你的目标是改善新用户的入职体验。在此阶段，你将与一系列真实的用户交谈。直接观察他们的所作所为、他们的想法以及他们需要什么，问自己诸如“什么激励或阻碍了用户？”之类的问题。或者“用户在哪里经历了挫折？” 目标是收集足够的观察结果，以便可以真正理解你的用户及他们的观点。

  
  

定义：结合所有研究并观察用户存在的问题。在确定用户需求时，开始寻找创新机会。

• 在定义阶段，使用在“同理心”阶段收集的数据来定义需求。整理所有观察结果，并在用户当前的体验中进行比较分析。不同的用户是否有一个共同的痛点？识别那些未能满足用户的需求。

  
  

想法：集思广益，提出一系列疯狂的创意想法，以解决在“定义”阶段确定下来的未能满足的用户需求。给你自己和你的团队完全的言论/想法自由；在此阶段没有任何想法是不合适的，收集大家的各种想法，此阶段想法的数量超过质量。

• 在这个阶段，把你的团队成员聚集在一起，勾勒出许多不同的想法。然后，让他们彼此分享想法，混合再混合，在彼此的想法上再产生新的想法。

  
  

原型：为想法子集构建真实的视觉展示。此阶段的目标是了解以上几个阶段形成的想法中，哪些是有效的，哪些是无效的。在这个阶段，通过输出原型的过程，来权衡想法的影响与可行性。

• 让你的想法可操作。比如，做一个新的登录页面，画一个线框图，并在内部寻求大家对此的反馈。根据反馈对其进行更改，然后用快速而简单的方式继续进行原型设计。然后，与另一组人分享。

  
  

测试：把原型给到你的用户来获取用户的真实反馈。问问自己“这个解决方案是否满足用户的需求？” “它是否改善了他们的感受、想法或完成任务的方式？”

• 将你的原型展示给真正的客户，并验证它是否实现了你的目标。用户的观点是否有所改善？新的登录页是否会增加用户在网站上花费的时间？在用户操作原型时，持续测试和观察用户。

  
  

实施：将设计付诸实施。确保你的解决方案得以实现并触及到最终用户的生活。

• 这是设计思维中最重要的部分，但也是最常被遗忘的部分。正如唐诺曼所宣扬的那样，“我们需要做更多的设计工作。” 设计思维不是魔法，并不能让你从实际的设计中解脱出来。Milton Glaser 的话引起了共鸣：“没有“创造性”这样的东西。仿佛创造力是一个动词，一个非常耗时的动词。这是在你的脑海中思考一个想法，并将这个想法转化为现实的东西。这将永远是一个漫长而艰难的过程。如果你做对了，那感觉就像是在创作。” 尽管设计思维对产品的影响很大，但只有执行设计想法才能带来真正的创新。设计思维的成功在于它能够改变最终用户生活的某个方面。第六步：实施——至关重要。

Why - 优势

为什么我们要引入一种新的思维方式？采用设计思维的原因有很多，足以值得单独写一篇文章，但总而言之，设计思维实现了这些优势：

• 这是一个以用户为中心的思考过程，从用户数据开始，创建满足真实的而不是想象的用户需求的产品，然后用真实用户测试这些产品。

• 它利用集体的专业知识并在团队成员中建立了一种大家都认同的想法，并得到广泛支持。

• 它通过为同一问题探索多种解决途径的过程而来带来创新。

Jakob Nielsen 说：“一个解决错误问题的漂亮界面将会失败。”设计思维解放了创造力，并将它们集中在正确的问题上。 

灵活性 — 适应您的需求

上面的过程一开始会觉得很深奥，千万不要认为这就是打开成功之门的钥匙，相反，应该把它当作梯子，在需要的时间和地点为产品提供支持。

每个阶段都意味着迭代和循环，而不是严格的线性过程，如下所示。在构建和测试初始原型后，通常会返回到理解和定义两个理解阶段。这是因为直到线框原型化并且想法把变为现实，才能真正体现您的设计。很难一次性就准确评估您的解决方案是否真的有效，在这一点上，循环进行用户研究是非常有帮助的。为了做出正确的决策或确定开发顺序的优先级，还需要了解用户的哪些信息？之前没有研究过的原型产生了哪些新用例？

也可以重复阶段，通常需要在一个阶段内多次进行练习，以达到进入下一阶段所需的结果。例如，在定义阶段，不同的团队成员具有不同的背景和专业知识，因此看待问题的方法也不同。在定义阶段花费大量时间来使团队成员对问题的认知达成一致是很有必要的。

可扩展性——应用广泛

设计思维具有可扩展性。对以前那些无法改变思维方式的公司，现在有了一个大家都可以理解的指南，并增加了产品成功的可能性。这不仅适用于产品设计等传统的“设计”主题，还适用于各种社会、环境和经济问题。设计思维很简单，可以在各种范围内实践；即使是棘手的、未定义的问题。随着时间的推移，它可以应用于改进搜索等小功能，也可以应用于设计颠覆性和变革性的解决方案，例如：重组教师的职业阶梯，以留住更多人才。 

结论

我们生活在一个体验的时代，无论是服务还是产品，我们都对这些体验抱有很高的期望。随着信息和技术的不断发展，它们在本质上变得越来越复杂。每一次迭代都会带来一系列新的未满足的需求。虽然设计思维只是解决问题的一种方法，但它增加了成功和突破性创新的可能性。

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

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

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

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

要想在宣讲时能够从容应对各种问题，就需要在设计稿完成后，把设计规约提前想好，那么设计规约要从哪些方面写起呢？往往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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

颜色会潜意识地为观看者提供有关应用程序的大量信息，即使他们从未阅读过任何文字。

什么是色彩心理学？

不同的颜色实际上可以对人类的情绪甚至行为产生深远的影响。这是全球各城市许多绿色和蓝色倡议者背后的想法：绿色和蓝色使观看者感到更加平静和放松。

绿色对减轻压力（和其他因素）的影响如此深远，以至于实际上可以帮助人们延长寿命。

这对应用程序设计意味着什么？

嗯，颜色的影响不仅仅是观众喜欢与否，还会影响他们的感受。例如，深浅不一的蓝色会激发忠诚和可靠的感觉。绿色激发舒适和幸福。黄色与快乐和刺激有关。红色让人兴奋并引发欲望。

但是那些不一定是感觉的东西呢？人们是否也倾向于将某些价值观与颜色联系起来？

这项调查要求人们选择与某个词相关的颜色。他们发现：

• 信任 = 蓝色（34% 的受访者）

• 速度 = 红色 (76%)

• 便宜或便宜 = 橙色 (26%) 和黄色 (22%)

• 高品质 = 黑色 (43%)

• 高科技 = 黑色 (26%)、蓝色 (23%) 和灰色 (23%)

• 可靠 = 蓝色 (43%) 和黑色 (24%)

• 乐趣 = 橙色 (28%) 和黄色 (26%)

• 恐惧、恐怖 = 红色 (41%) 和黑色 (38%)

应用程序设计人员在开发应用程序时最好牢记这些关联。然而，这些都不是应用程序开发人员绝对必须遵循的硬数据。相反，它们是开发人员可以遵循的指南，并结合下面讨论的其他设计原则。

围绕颜色的文化差异

在选择颜色时，牢记应用程序的受众始终是至关重要的。

例如，在西方文化中，白色往往代表纯洁或纯真。然而，在亚洲的某些地区，白色是用来表示哀悼、厄运和死亡的。显然，如果应用不当，这可能会产生严重的意外后果。

为此，设计人员应该了解他们的受众并相应地选择颜色，这在日益全球化的社会中并非易事。

选择主调色板

应用程序设计人员和公司等都应该在确定其品牌的主要调色板之前进行仔细研究。最重要的是考虑观众和他们想要传达的内容。

蓝色是一种流行的颜色，因为它与信任和可靠性有关，但它也变得有点过度使用了。

橙色可以与廉价联系在一起，但也可以与乐趣联系在一起。

红色可以令人兴奋和振奋，但也代表恐惧。

更好的使用颜色来设计应用将有助于塑造观众的感知。设计人员需要了解颜色关联以及用户如何下意识地查看设计以创建成功的调色板。

色彩和谐

一旦应用程序设计人员确定了主要颜色，就该选择其他颜色了。使用一种颜色很简单，通常不会很引人注目。

但是，选择的颜色需要很好地搭配。

冲突的颜色会让观看者感到不安或有压力。相反，应用程序设计者应该寻求创造一种赏心悦目的组合。一种会让用户感兴趣并让他们对应用程序感觉良好的应用程序，从而引导他们尝试它。

这里有一些设计师可以遵循的基本原则，以在他们的设计中创造和谐的色彩。

单色

首先是在整个设计中坚持使用相同的颜色，但使用不同的色调。这增加了产品的兴趣但又不会很突兀。

类似色

另一个流行的选择是使用类似的颜色。这种方案也很难搞砸，尽管设计人员确实需要了解每种颜色的饱和度。

此方法可以使用色盘上彼此相邻的颜色。例如，绿色和蓝色，或橙色和红色。

互补色

互补色方案使用调色板上彼此相反的颜色。例如，黄色和紫色或蓝色和橙色。

使用互补色时，设计师必须仔细选择阴影和色调。如果做得不好，很容易创建一个视觉上不和谐的方案。

但是，如果做得好，互补色可以使应用程序设计真正流行起来，并在众多其他不那么吸引人的应用程序图标中脱颖而出。这可以使用户更有可能选择该应用程序而不是其他类似功能的应用程序。

分裂互补色

这种方法有点复杂，但可以产生一些引人注目的结果。它采用三种颜色，一种颜色和两种相邻颜色的互补色。例如，从紫色开始，然后添加橙色和绿色。

设计师必须小心使用这种方法，错误的组合会使设计从有趣变成突兀。

正确的应用程序设计颜色

总而言之，应用程序设计中的颜色世界非常复杂。没有一种颜色会吸引所有观众，也不会适合所有品牌。然而，选择正确的颜色绝对意味着一个成功的应用程序和一个普通的应用程序之间的区别。

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

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

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

关于数据可视化项目

在贝壳，有店东、圈经、CA等多种服务角色依赖数据信息作业，各种各样的数据被用于管理、分析和制定目标。但是，房产垂直领域的数据非常庞杂，数据体量也在急剧增长，图表的应用场景越来越复杂，除了pc和移动端的数据看板，还出现了线下门店大屏场景。

与此同时，数据展示一直处于无可视化规范的状态，导致频频出现“数据堆叠”“数据出界”“数值无单位”等可读性低的问题。因此，把这些复杂、抽象的数据，通过更直观更容易理解的可视化方式展示出来，建立一套专注于房产领域的可视化组件规范，变得尤为重要。

图1 数据部分展示现状

Kecharts项目从汇总和梳理数据展示问题出发，聚焦并抽象问题点，旨在建立起统一的可视化规范。同时，我们还对极端数据的展示进行计算规则处理，从人工配置的效率考量，系统性地帮助用户进行高效分析和决策。

1.从不统一到有规范

数据规范的第一步，解决“知道什么数据用什么图表，了解颜色的使用规范、数据排版展示的要点、适配性原则”等基础规范，从配色、布局、基础展示规则上，满足数据展示的美观度和可读性。

2.极端情况的处理规则

最难解决但也最有价值的痛点是：数据体量大、维度多带来的“不确定性问题”，想要把海量、高维的数据以准确有效的方式展示，需要建立高质量的交互和配图规则。因此，我们在梳理基准展示规范的基础上，也对极端情况进行了一系列的规则处理。

3.人员可配的高效性

数据往往是由平台自上而下传达到城市，再由专业的商业分析师对数据进行分析和处理，很多数据需要人工绘制和展示。因此，Kecharts在设计数据规则展示的同时，也要考虑数据的可配置输出规则，尽可能减少人工操作成本，降低由于人工分析水平不同导致的报告质量方差。

一、建立图表可视化

基础规范

建立基础可视化规范，是为了将图表展示拉到基准线水平，也是当前要做的第一步。基础的规范建立，可以让图表迅速换身衣服，第一时间提升用户的感受。所以，第一步首先解决配色的使用、基础的布局、图形的基本表达等方面的规范问题，满足数据的基础美观度。

1. 配色

更科学的配色带来崭新的视觉感受

图2 配色色板图示（局部）

优化前，Kecharts各种配色之间关联性低，与整体平台的表现层形式不统一。优化后色板的样式与KeDesign（贝壳设计系统，“UXD笔记”公众号后台回复“贝壳”，领取VI规范文档）无缝融合。现有配色方案饱和度更协调，阅读体验更友好。

由于数据体量大，我们尝试将8种常用色扩展成10种常用色以及24种扩展色来更好地满足业务需求。并且根据不同品牌主色，进行明度调整。除此之外还增加了更沉稳的商务主题以及暗黑主题配色，满足特殊业务场景的使用。

图3 配色的概念图

2. 布局

更合理的布局带来清晰准确的表达

基础布局

图表的构成，由一系列独立的图形与法元素结合而成，如包含标题区、操作功能区、面包屑、图例区、单位区和图表区，通过合理的基础布局增强图表的秩序性和一致性，同时规范标题、图例等元素的展示适配规则。

图4 数据基础布局规范（局部）

精细图形

整体的图形展示细节也做了统一调整，从整体排布、字体、字号、圆角、描边粗细、数据轴、标签等方面进行了优化设计，使整个图表看起来更加精细。

基础的配色、字号、布局调整之后，基本满足了数据的展示基准，从基础合理性展示和视觉感提升上，有了一定的改良。

图5 基准规范后的对比

3.适配

更灵活的规则带来细腻的交互体验

图6 栅格化设计图示

定义图表的适配规则

定义四种图表卡片的适配方案，当图表放大或缩小到某一区间时，内部布局会根据图表大小变化进行有权重的删减，使图表在多种区间内能够将核心数据表达的更清晰。

图7 栅格化设计图示

二、极致探索

极端情况规则

满足了数据的基准展示，并没有达到完整的可视化展示规范，海量和高维带来的展示问题依旧存在。所以，在建立基准规则的基础上，结合贝壳数据的特色，需要集中处理极端情况带来的问题，从基准线提升到具有易用性的“标准线”。

图8 以饼状图为例的极端情况分析

1.解决数据量过载

导致的不确定问题

过滤数据

首先从底层数据进行过滤，过滤底层占比0%的数据，减少数据呈现量。将占比为0%的大部分数据在图表的可视化展示中去除，转移到图例中展示，满足了用户需要完整数据的诉求外还大幅度提升了图表的可视化程度。

元素优化

优化标签、线条、指示等元素的展示规范，从定义边界位置、规范标签的展示内容上，对图表内元素的极端情况做适配处理。

智能检测

为了消除信息过载带来的标签碰撞，我们制定了标签的智能检测规则，当两个标签重叠超过1/3时，自动化地隐藏部分标签，被隐藏的部分可以通过悬停展示详细信息，不经意间大幅度的提升图表的展示美感和用户的浏览体验。

图9 饼状图为例的处理过程

2.拓展通用性极端处理规范

从单点问题扩展为通用性规范处理，在不同类型图表的极端情况处理过程中，从全局的角度出发，对极端情况下出现的核心问题做汇总并抽象，在颜色、碰撞、超图形等方面，输出极端情况处理规范。

图10 通用性智能检测规则（局部）

三、提升人工配置

的高效性

数据分析和传达的过程，依托于人工过滤、处理、绘制和展示，考虑数据的配置输出，人为水平难以把控，尽可能减少人工不必要的操作成本，从而提升数据报告产出的质量。

在配置自由度时结合产品定位、属性和功能进行思考。用户希望数据通过配置层处理后转化为可视化图表。普通用户期望通过简单的操作快速搭建数据看板；高级用户希望对可视化图表有精细化的自定义需求。

我们尽量用智能处理代替人工对数据无效数据的筛选，对数据的展示做智能的适配，如指标卡的展示，前置设置了一系列的展示模版，在用户选择指标数据的同时，会根据指标的数量做自动化贴合排布。与此同时，保留了一定的人工可配置自由度，支持用户可自由配置指标卡的细节展示等。

图11 指标卡用户配置示意

因此，针对大量杂乱的数据，数据的呈现通常需要两层呈现给用户。第一层是数据库和数据源，会自动过滤掉存在的垃圾数据和无效数据。

第二层是数据分发层，尽可能的通过自动化的配置去辅助操作员进行数据的分发和最终数据面板的呈现效果。通过简化操作流程和匹配人为操作习惯，降低学习成本，提升操作效率，为操作者提供“顺其自然的设计”。

图12 数据处理分层图示

结语

Kecharts的初衷是保证数据的真实、高效展示数据、遵循美学原则。我们遵循数据能够真实呈现的原则，在可视化表达中确保不遗漏、不误导，确保数据准确性。

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

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

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