一、什么是交互设计？

先来看一下百度百科的定义

交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。简而言之，交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。

为什么要做交互设计

在使用网站，软件，消费产品或各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。

从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。

二、交互设计常用原则和定律有哪些？

尼尔森十大可用性原则

1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈，例如：页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述，尽可能贴近用户所在的环境，将现实环境的操作功能巧妙的转化为线上功能，使其贴近用户。使用用户能听懂的专业术语，涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物，使用户更容易理解。例如：天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品，降低理解成本。

3、操作可控原则

对于用户的误操作，提供二次确认或者撤销的功能，这样可提高用户的操作可控性。

例如：删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范／逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等，例如：微信小程序设计规范。

5、防错原则

设置防错的机制，减少用户犯错。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。

例如：用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷，在适合的时机给用户需要获取的信息。

例如：验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如：手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息，如果不是优先级最高，要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。

例如：信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如：新功能引导、解释说明文案等。

七个交互设计定律

1、菲兹定律

点击一个目标的时间同以下两个因素有关：

（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；

（2）目标的大小（S）。目标越大，所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。

交互设计中要合理设置选项，以免用户使用中决策时间过长，降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

例如：手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节，这一固有的复杂度都无法依照我们的意愿去除，只能设法调整、平衡。

例如：在智能手机出现之前，手机上的操作按钮都是实体按钮。在智能手机出现手，手机被整个屏幕占据后，所有的操作都集合在了手机系统之中，等于把物理操作转移到了系统操作中，其本身的功能复杂程度并没有发生改变，只是转移了而已。

6、防错原则

大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。

例如：登录时用户名校验，手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。

”这个原理称为“如无必要，勿增实体”，即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物，从而提升使用效率。

三、交互设计如何开展工作

首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图，而是要先分析需求，了解产品的战略层和范围层的业务目标。把握产品设计大方向，只有方向对了后面的工作才是有价值的。

把握了产品方向，下面就该进行需求的分析，

首先针对需求考虑5个问题：

1、为什么要做这个功能？（业务需求）

2、产品期望得到怎样的成果？（业务目标）

3、谁来使用？（目标用户）

4、他们要怎样使用？（用户需求）

5、如何让他们都来使用？（将业务目标转化为用户行为）

清楚这5个问题后，再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求（业务目的、业务目标）和用户需求（目标用户、用户体验目标），把握关键因素（用户的动机、担忧和影响目标达成的障碍）。

归纳这些需求，明确设计策略。

将“业务目标”转化为“用户行为”，通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”，用户行为决定了用户界面，用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。

四、如何进行用户研究，方法有哪些

评估的形式及方法

常见的评估形式分为三类：

1、评估主体：根据评估的主体不同来进行区分，即谁来做评估。

按照评估主体来区分主要有两个主体：用户和专家

用户评估主要靠收集用户使用数据，也就是用户测试，它的数据相对客观，但时间和费用较多，评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观，但费时少、费用少、评估范围窄。

两种评估方法可以相互补充，并结合使用。

2、评估性质：例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价，如点击量、使用率等，可以用数据来说明。

定性评估是指对非计量性的部分进行评价，如流畅度、舒适性、创造性等进行评价。它只能表示一个度，无法准确用数据来说明问题。

3、评估过程：按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观，从客观的角度出发判断客观事物。

感性评估更为主观，评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用，才能完整的完成我们的任务，达到我们的目标。

常见的评估方法有四种：

1、原型评估方法：在产品研发过程中，对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法，原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型：

（1）快速原型：原型迅速成型并分配实施，在原型实验收集的信息基础上，系统从草案中得以完善。

（2）增量原型：应用与大型系统，从系统的基本骨架开始，需要阶段性的安装，及系统的本质特征是在初次安装完成后允许阶段性测试，以减少遗漏的重要特征。

（3）演化原型：对前期的设计原型不断进行补充和优化，直到成为最后的系统。

2、简易测试评估方法

在条件不允许的情况下，可以采取简易的方法来对用户体验进行评价。步骤是：

（1）实验室环境准备：准备好测试用的电脑或其他媒介。两个房间，房间1用来对被测试者进行测试，房间2用于设计师和工程师的观察。

（2）被试选择：分为用户组和专家组。

（3）进行测试：房间1中被试者根据自己的选择进行操作和测试，同时说出自己的内心想法，观察员在调查表上记录被试者的每一次的操作情况，包括出错情况和被试者的口语描述，当被试者在测试过程中遇到困难或操作无法进行时，观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2，设计师和工程师实时观察和记录被试者的情况，以便今后对产品做进一步的修改和完善。

（4）结果分析：通过多次测试后，将测试结果汇总，提取出交互设计中存在的问题，以及对交互设计有益的建议形成测试报告。

3、眼动评估方法

眼动追踪可以用来评价对产品（包括硬件产品和软件产品）设计的感性意象，评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。

4、脑电评估方法

通过对脑电信号的分析，研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛，被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷，例如空间分辨率上的局限性，因而对某些认知过程和脑区的定位并不是很准确。第二，在许多相似的实验研究中，由于研究者采用了不同的实验材料和方法等，实验结果也存在差异性。第三 ，由于采集记录时间的滞后性，脑电所记录的并不一定是当下被试者所想到的内容。

采取哪种方法来开展用户测试和评估，要根据不同的任务结合不同的环境来开展，比如：时间、成本、资源等。

启发式评估法

是专家评估法的一种，也被称为经验性评估，最初由Nielsen博士提出。简单来说，启发式评估是一种简易的可用性评估方法，使用一套相对简单、通用、有启发性的可用性原则，让几个评审根据专业知识和经验来进行评估，发现产品潜在的可用性问题。

启发式评估的两大要素：评估者和评估参照的原则。   

对评估者的要求主要有四个方面：

（1）人数：推荐3-5人，有时会更少

（2）知识：最好同时具有可用性知识及设计知识

（3）身份：最好是非设计者本人，否者不具有客观性

（4）岗位：设计师或用户研究员

评估参照的原则有：尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择，常用的是尼尔森十大交互原则。

什么时候适合使用启发式评估法？

交互设计和UI设计阶段、测试优化和产品发布后的阶段。

启发式评估的优缺点有哪些？

优点：成本低、效率高、发现大多数可用性问题，甚至是用户测试时不会出现的问题。

缺点：不能代表真实用户，相对主观、有时候发现问题过多、对评估人员知识背景要求较高。

什么时候适用？

（1）适合时间、资源有限的情况下快速发现可用性问题，降低风险及成本。

（2）版本变动不大的情况下，小成本检验。

（3）作为可用性测试的之前准备。

启发式评估流程是什么？

（1）准备阶段：确定范围、背景调查、参考评估原则、评委邀约、材料准备

（2）执行阶段：任务走查、整体走查、结果记录

（3）分析阶段：汇总讨论、报告总结、优化方案

可用性测试

先来看一下我们在平时工作中常常会听到这样的问题

产品经理：我们的用户觉得产品好不好用？使用过程中会不会遇到问题？他们是否满意？

设计师：设计的过程有一些纠结的地方，不知道实际用户是怎么理解和操作的怎么办？

产品开发后：想在大推前检验一下产品是否靠谱，适不适合大推？

当我们遇到这样的一些问题时，如何找到方法快速得到答案呢？

那就是接下来要介绍的可用性测试方法。

可用性测试是一种常用的、高效的方法。

它的定义是：通过观察具有代表性的用户，完成产品的典型任务，从而找出产品可用性问题并解决，目的是为了改善产品，让产品更容易使用。

什么时候适合做可用性测试呢？

一般是在：交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好，可以尽早发现问题并及时调整。

类型分为两种：形成式和总结式

形成式特点：小样本、发现问题为主、不能做定量对比。

总结式特点：大样本（30人以上）、定量的评估、可以做对比评估

可用性测试可以解决什么样的问题？

1、发现问题，产品在体验上是否存在问题

2、检验实现，期望的设计目的有没有达成，是否满足了用户的期望

3、产品评估，用户是否会满意

4、理解用户，了解用户行为习惯，了解用户认知，找到某些问题的原因

测试流程是什么？

整体上分为4个阶段：1、准备  2、测试  3、分析  4、优化

1、准备阶段要做的有哪些？

确定目标：确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有：

·对整个产品做可用性评估

·对新增的功能模块进行评估

·提前观察新方案对新老用户有怎样的影响

·提前检测改版是否达到预计目标

·设计时存在争议，如何选择解决方案

·某个环节流失率较高，检测是否为设计原因导致

·需要拓展某一类特殊用户，测试针对这类用户在设计上是否需要作出调整

准备测试方案

方案中应当包含以下内容：

·测试目的：明确测试的目的及范围，测试目的决定了测试方案

·测试关注点：与负责的设计师一起梳理测试中要关注的问题

·用户招募：招募要求，样本配比，招募渠道

·经费预算：奖励的形式和额度

·时间计划：用于把控时间计划

撰写测试脚本：设计测试任务，通过用户行为去观察提问来获得我们想要的内容

基本的流程有：

·暖场：3min，简单聊天，消除用户的紧张情绪

·测试说明：2min，对测试内容规则做说明

·测试前访谈：10min，了解用户基本信息

·简单试用：3min，让用户熟悉产品

·测试执行：30-45min，提示任务并观察

·事后访谈：15min，针对疑点问点追问，填写评价表

·道别：5min，支付礼金，送用户离开

招募用户

招募什么样的用户呢？

·根据测试目的来定，找出与测试目标有关的筛选纬度

·特别考虑用户使用行为相关的特征，例如竞品使用经验，使用产品的目的，用户的活跃度等

·挑选最核心的纬度，转化成用户招募的条件，并尽量客观化，具体化，可衡量

·避免设置交叉条件过多，导致样本代表性降低

·学会辨别真假的用户信息

招募多少用户合适？

·以发现问题为目的快速可用性测试，6-8名即可

·考虑产品的复杂性，覆盖人群差异性，适当做调整，拓展到10-15名

招募渠道有哪些？

·公司内部

·现有产品用户库

·公司其他产品用户库

·熟人，朋友等

·推广渠道：官微、公众号、门户网等

·社区，论坛，qq群等

·第三方调研公司

准备测试素材：低保真或高保真原型，或线上已经可以使用的产品，也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备，摄像头，纸，笔，桌椅等。

测试场地选择：

·专业可用性测试实验室：一般对测试质量要求较高，旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间，一个测试间，一个观察间，中间有单向玻璃分隔。测试间中有多角度的摄像头，用来记录测试过程，观察间可以同步看到测试间里的情况，

·普通测试环境：在观察人数较少（小于3人），条件有限时使用。

预测试阶段：正式测试前进行预测试，保证测试流程通畅

·走查：记录可能出现的问题

·预测试：找人先测试一下

·调整：调整测试流程

正式测试阶段

测试参与人员有

·主持人：引导整个测试流程

·记录员：记录操作行为，访谈内容，发现问题等

·产品团队：参与旁听，观察，结束后交流

·用户：完成测试及访谈任务

测试过程中需要观察的要点：

·用户是否独立完成了任务

·是否存在无效操作或不知所措的情况

·用户是否满意

结果分析

边测试边总结，越及时越好

·测试完一个用户，做一次小结

·测试结束当天写小结，与设计师当场讨论

·重要问题反馈后再总结分析报告

·边测边改，边改边测

结果分析4个步骤：1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录

撰写报告

从4个方面来写：

·总体如何

·有哪些问题

·严重程度如何

·建议是什么

·除此之外，还可以围绕关注的问题，未满足需求补充分析

优化跟踪

在测试之后需要出优化的方案，测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决，可以结合其他的一些测试方法来得到。

问卷调研

问卷调查法是以书面提出问题的方式搜集数据的一种研究方法，研究者将所要研究的问题编制成问题表格，让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写，从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段，也可以用于产品上线后的评估阶段。

如果是想了解用户对产品上线后的满意度，可以使用问卷调研的方法。它比较适合去了解用户的认知态度，也可以附带了解用户的行为习惯，

问卷调研的优缺点

优点：统一性、灵活性、量化性、匿名性

缺点：（1）只能获得书面的信息，而不能了解到生动、具体的情况。（2）缺乏弹性，很难做深入的定性调研。（3）调查者难以了解被调查者是否认真作答，是不是自己填写的。（4）填写问卷比较容易，有些别调查者会随意选择，或者按照社会主流观点选择，这样会使调查失去真实性。（5）回复效率低，对无回答者的研究比较困难。

问卷调查的使用场景

适用于：（1）需要进行定量分析的调研。（2）需要匿名进行调研的问题。（3）对已有假设进行检验。（4）寻找问题隐藏的关联。（5）对产品设计用户认知及态度的评估。

不适用于：（1）发现和描述具体问题。（2）探索受访对象的模糊态度。（3）获取创新想法。（4）获取精确的行为数据。

问卷调研流程

1、确定目标：确定调研目的、对象、分析目的和应用对象。

2、调研方案：通过访谈、经验、理论等，确定调研框架，题目选项，分析思路，投放渠道，相本配比等。

3、问卷设计：问卷设计，问题美化，投放渠道。

4、问卷测试：多人测试，确保问卷的可读性，逻辑通畅

5、问卷投放：按照计划好的投放渠道进行投放，回收数据，数据清洗

6、问卷分析及填写报告：分析及报告填写，调研结果落地

数据分析

概述：通过在网站或应用中进行数据埋点，获取用户对产品的使用和行为数据，并进行基于产品体验优化的数据进行分析。

数据分析可以做什么？

1、可以做到用户从哪里来，来了多少

2、获取用户属性，用户地域，用户设备

3、访问了哪些页面，使用了哪些功能，消费了多少钱，消耗了多少时间

4、哪些流量可能存在问题，忠诚度如何，活跃度如何，有没有达到目标，和行业相比如何

5、流失情况如何，离开之后是否还回来

可以作为产品的眼镜和大脑，提供客观衡量的依据，可以持续优化改进。

数据获取方式的对比

日志文件：优势，完整的服务端请求记录。

                  缺点，日志的获取和清洗有过滤成本，许多页面操作无法记录。

JS页面标记：优势，数据获取可控、灵活，可以对页面操作记录进行记录，获取数据比较完整丰富。

                      缺点，需要在页面植入JS标记代码，某些情况下无法获取，如当用户禁用JS功能时。

常用的数据监控平台

1、第三方监控平台：如Google Analytics、百度统计、腾讯云分析等

2、自研平台

数据分析流程

1、监控  2、定义  3、埋点  4、测量  5、分析  6、优化

Web分析常用的指标

PV：是指页面浏览量，网页浏览数实施评价网站流量最常用的指标之一，用户每一次访问网站中的页面均被记录，对统一页面多次访问，访问量累计

UV：是指独立访客，是通过互联网访问、浏览这个页面的自然人

UPV：是指唯一身份综合浏览量

访问：是指在一定时间范围内，网站所有访问者对网站发起访问的总次数，从访客来到网站到最终关闭网站所有页面，记为一次访问

识别用户的方式：IP、IP+User Agent、cookie、User ID、设备ID、其他

复合指标

跳出率：指用户来到网站，只浏览了一个页面就离开的访问次数，占全部访问次数的百分比，简称“来了就走”。跳出率可以被用来衡量流量和页面质量，高跳出率表示访问者对着陆页面不感兴趣，没有继续访问更深入的页面。也可能页面设计存在问题，也可能是导入的用户不匹配。跳出率可以通过调整广告渠道，优化页面内容来降低。

退出率：访问者离开网站一次被记录为一次退出，某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高，代表某一页面可能出现了问题。

访问时长：网站停留时长，页面停留时长，应用使用时长。访问量是访问质量的一个衡量指标，较长的访问时间说明用户与产品进行了较多的互动。

访问深度：可以理解为单个用户平均访问的页面数，是PV/UV的比值。访问深度也是访问质量的一个衡量指标，可以考察用户是否和网站进行了较多互动。这个比值越大，代表网站的粘性越高。

转化率：指在一个统计周期内，完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算，例如注册转化率、付款转化率等，是一个重要的分析指标。

移动端基础指标

移动端的基础指标监测与web端略有不同，但分析思路大致相同。指标分为：新增设备、累计设备、启动次数、单词使用时长。

常见分析内容

流量分析（哪里来？）、用户分析（什么样的用户？）、行为分析（如何使用的？）、路径转化（表现如何？）、流失分析（粘性如何？）

A/B test

A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式，来获得具有代表性的实验结论，从而寻找到更好的产品策略。

简单来说，就是为同一目标制定两个方案，让一部分用户使用A方案，另一部分使用B方案，记录用户的使用情况，对比两个方案的结果，选择更符合的方案。

A/B test一般会在产品改版正式上线之前使用，来验证新的设计是否可以提高产品的表现。

A/B test可以测试的元素有：标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试，这就是两个测试类型单变量测试和多变量测试。

A/B test工具

Google Website Optimizer：搜索巨头提供的免费A/B test工具，一个很好的入门级工具，但是没有一些先进的功能。

Visual Website Optimizer：一个易于使用的A/Btest测试工具，包含功能有所见即所得的编辑器，单机地图，访问者分割和标签等。

Unbounce and Performable：集成着陆设计的A/B测试工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企业级测试工具

App Adhoc Optimizer：国内A/B Test工具，同时支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB测试服务的专业Saas平台

Optimizely：是网上现有的最专业的AB测试工具之一，它的价格要比其他的工具高很多（也可以免费使用一个月），它提供了一些非常好的功能。

Unbounce：对于登录页面的测试来讲非常不错，而且它不仅仅是个测试工具，还可以在无需自己编写任何代码的情况下来创建登录页面。

如何做A/Btest

1、确定目标，例如提高网站的付费转化率，降低跳出率等

2、测试方案，建立假设：购买按钮的颜色会影响点击率？缩短流程可以提高复费率？改变导航可以降低跳出率等？

3、创建相比较的两个版本，改变其中的变量

4、发布测试，将部分流量导向B方案，但不一定是5：5

5、数据分析，收集数据，对比AB版本的转化率、跳出率、留存率等

感谢阅读！

文章来源：站酷   作者：_微光
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

于B端，我想刚开始很多同学就直接拿Ant Design套套界面，因为公司要求并不高，随后字节Arco Design也推出了对应的模版和规范，能让我们快速作出一个不出错的方案。

但是随着公司对B端越来越重视，这些模版显然就太烂大街了。公司、市场的要求显然不止于此，我们的设计追求也不止于此。 

那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？

其实很简单，王阳明先生告诉我们知行合一，知是行之始行是知之成。我们如何才能提升B端界面端精致度？

第一，需要知道什么是好的设计；

第二，需要不断的去实践去练习，缺一不可。

本文先和大家谈谈知的层面，提高我们的眼界，下面就和大家分享一些不错的B端产品，大家有时间可以去慢慢体验。 

PS：作为B端设计师，一定要去多拆解竞品，多研究好的产品，别面试的时候，面试官问你研究的B端产品是什么，你只知道阿里云、腾讯云、百度云哦！ 

1、Hubspot

做B端的同学，尤其是做CRM的同学应该都知道Salesforce，他是全球最大的 CRM（客户关系管理） 工具公司。 

Hubspot同样是提供客户管理相关的应用，虽然成立相对Salesforce晚，但是在市场上也占有一席之地。

从设计的角度来看，他的界面风格更加简洁舒适，从体验上来看和国内的CRM系统完全不同，其体验更加自然和舒适。 

这种风格大家看了有没有觉得很熟悉呢？

大家在去看看 GoDoddy , Airbnb ，Zillow,是不是发现风格有一点类似，大家可以对比国内产品去拆解下他们的交互细节有什么不同，完成同样的任务他们采用的方案有何不同，相信你会有很多的收获。 

国外的界面看着总让人觉得很舒适，仅仅是因为克制的设计、中性灰使用得好吗？当然不是，是因为英文本身就是图形化的文字。

如果翻译成中文，你会发现好像不是特别理想。 

这个样子拿给领导过稿，怕是分分钟被拍死，因此我们还是需要多看看国内优秀的产品。

2、神策

神策的设计，我想B端的朋友不陌生吧，国内产品中他的设计一直是我们的参考对象。

不同于其他产品，他的体验门槛比较低，注册后就可以去体验他的demo，也没有试用期限，参考对象从可视化报表，到界面交互均能找到参考。

不过当你参考一次后发现，做出来的界面怎么还是少了一些灵魂，虽然界面风格上了一个台阶，但为什么用户还是觉得产品难用。

3、项目管理类

这里不得不和大家推荐项目管理类产品了，这类产品是专门给互联网公司的开发团队使用，他们都是专业用户，同时这些都是提高他们工作效率的工具，因此这些产品投入的成本更高，优化得更好，拆解他们的产品，就是直接观看高手的成长之路。

Jira

Jira是Atlassian公司出品的一款事务管理软件，JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。

同时他也是国内项目管理类产品的学习研究对象，因此大家可以通过文章、B站、界面截图，自己申请体验等方式全面的进行体验。

同时也可借助群的力量，调研下有使用Jira的小伙伴，看看他们在使用中有什么问题，下面是我收集Jira网页版和本地配置版的问题截图，这些都来自不同角色的真实体验，会更有分析的价值。（这部分截图涉及到公司的数据，同时数量多不太方便打码，就不分享给大家了。）

当然国内的项目管理类产品也得去看，我们要对比哪里做得好，哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，这些产品不管从视觉还是体验都非常不错，大家一定要去体验。

5、文档管理类产品

通过不断对竞品进行拆解，你已经不是当初那个小白了，你的行业认知，方案设计能力应该赶超了一大波人。

成长的同时，又发现你设计的界面，不太精致，少了些温度，这时候推荐你看文档管理类产品。

WPS

第一个和大家推荐的是WPS，界面简洁，配色舒适。 

飞书

在管理类的软件中，不得不提飞书的管理界面，从设计到使用体验，他给我的感觉终于不是那么千遍一律，用组件库搭建起来的感觉。

他开始有了温度，开始注重品牌感的打造，用户的引导，符合品牌调性的插画。 

对一些体验的细节进行优化，比如传统的编辑都是放在页面顶部，它采用了离光标更近的位置。 

根据菲兹定律，光标当前的位置和目标位置的距离D越短，所用的时间越短，具体好不好用，欢迎大家在评论区留言哦。 

6、概念稿

到这时候如果你觉得线上的产品太禁锢思维，那么推荐你看看dribbble、behance，搜索data、web、dashboard等关键词，去看看有没有新的灵感。

我的花瓣收集了一部分，如果不嫌弃，可以去看看，顺藤摸瓜应该可以找到很多不错的设计。

图片标题

7、画重点

如何提升B端界面的精致度？

第一，要知道什么是好的设计，多拆解国内外优化的B端产品。

第二，多在工作中时间，有时间多做ABC方案，锻炼自己的方案设计能力，多踩一些坑，时刻保持学习能力，慢慢就成长了。

文章来源：UI中国   作者：风筝KK
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

从挑选出的828件作品中，排名前十的作品中9件为B端设计，另一件作品也是B端产品C端化的产物。其中：

B端界面设计占比476/828，57.4%；

C端界面设计占比180/828，21.7%；

视频动效作品占比223/828，26.9%；

能看出其中的比重关系，B端设计再次大火，为什么是再次？因为B端设计之前火过，只不过没有赶上一个好的时代，在C端设计风光的十年里而忽略了其存在。随着C端市场饱和与数字化的浪潮下，实体经济、To B 、To G的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计，相信今年视频动效作品占比还会再次提升。

追波年度最佳作品

追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。

为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。

MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。

最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。

下面我们来欣赏年度最佳作品里面的流行趋势吧。

易读性（停顿感）

字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。

通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。

曲线

在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。

除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。

多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。

多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。

B端界面设计

侧边栏Sidebar

B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。

仪表盘设计

仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。

流程设计

复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。

B端C化

B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来实现B端产品C端化。

轻代码化

轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。

轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。

界面设计技巧

人文气息

为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。

当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。

这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。

毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。

轻拟物

轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。

简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。

几何图形

几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。

几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。

暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。

在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。

模块化（组件化）

为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。

产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。

插画

插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。

几何插画

几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。

线面插画

线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。

动效

微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。

Mg动画

Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。

三维

三维图标

MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应用场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。

轻三维

为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。

P4D（PS+C4D）

P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。

卡通IP

卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。

卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维IP可以选择外包完成。

对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。

三维动画

C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。

文章来源：UI中国   作者：RaDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

本文从What和How两个部分阐述如何输出清晰有效的设计方案，为大家建立系统的设计思路提供帮助。

很多初入职场的设计师在审美和平面图形基础上都比较扎实，对软件的操作也出神入化，单个方案的界面视觉表现完成度和细致度也没有太大问题。但却往往在实际输出项目方案的时候碰到瓶颈，方案反复地修改还不尽人意，设计能力无法得到质的提升，晋升的脚步也从而停滞。

本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案，希望给大家一些建立系统性设计思路的启发，帮助大家更好地输出设计方案，为决策设计方案提供更有力的参考。

 WHAT: 什么是清晰有效的设计方案

首先我们需要对清晰有效有一个整体的认知。所谓清晰，从字面上理解是指看得很清楚、明朗，设计层面来说就是方案能做到方向明确，方案明了。而有效字面上指的是有效果，有效力，从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。

清晰和有效的考量维度是不一样的：清晰更多是针对设计这一环节，在于不同方向/方案的差异度和侧重点；而有效则更多需要联合设计上下游（用户/产品/开发）。对于优秀的设计方案来说两者相辅相成，缺一不可。

接下来我们来详细拆解什么是清晰和有效。

1.清晰 - 方向明确，方案明了

——————————

很多设计师对方案输出的数量有个认知误区，认为设计方案越多越好，可以给老板、合作方更多选择，往往不假思索地用大量的时间输出所有可能的方案，并拿出来让别人评审，认为把所有的可能性列出来就不会错，这正是对方案清晰性缺乏认知的表现。

在设计最初期，不要着急动手输出界面，先结合目标（近期目标和远期目标）综合考量，系统性地思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度，只有清晰的思考方案才会创造无限的可能。

 用案例来让大家对清晰这个定义有更具象的认知：

相册小程序Logo这个需求的目标是需要突出相册元素，并强化品牌识别度。

这是设计师输出的Logo提案初稿，虽然输出了28个方案之多，但没有设计思路的规划，想到哪就画到哪，很多方案是重复的，还有一些方案在设计初期就应该Pass，设计的整个细致度也不够充分。

于是设计师对设计方向重新进行规划整合，按照输出形式重新规划了分类。

按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。

我们重新回顾一下这个需求，28个方案 VS 4个方案，设计师需要的不是尽可能输出多方案的能力，方案越多可能表示你在错误的道路上越走越远，需要的是通过前期系统的思考能一次把方案做对的能力。

2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案

——————————

很多设计师拿到产品需求会立即动手，认为满足了产品这个角色提的需求便是好的设计输出，或者把方案出的天花乱坠，当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度。

解决存在的问题—从问题出发

我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，但需要注意的是用户的反馈不一定是真正的问题，需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑，这种属于用户感受，我们可以再深挖一下用户觉得丑的原因，是不是改变了太多用户习惯，但又没有给用户真的带来更好的体验和更多的收益。

能达到设定的目标—从目标启动

问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯，大批用户投诉，但如果这个新Tab是符合我们目标的，我们不能为了短期解决用户投诉把这个Tab下掉，应该继续观察用户在这个使用过程中碰到了什么问题，解决实际操作中碰到的问题。

用案例来让大家对问题和目标有更具象的认知：

我们需要优化QQ空间的为空界面，首先我们梳理下现网存在的问题，风格整体比较老旧，很多图形表意不明确，新出模块就会有新风格，所以存在很多不统一的地方，空间整个业务有一百多个为空界面，导致开发也不清楚到底应该怎么用，用什么，所以很长一段时间是处于乱用的状态。

接着我们梳理了这次优化的目标：

1 界面统一，用户能对表意感知明确（解决现网问题）

2 强化QQ的品牌

3 做成基础组件，保证复用性

4 低成本开发

确定了优化目标以后我们没有马上急于尝试风格，而是先遍历了所有为空异常页，整合了所有场景最后梳理出八种情况，这八种情况可以覆盖所有的为空场景，梳理整合场景是目标1、3、4能实现的前提。

然后我们基于这八个场景来输出设计风格，要低成本开发，所以这里没有考虑加动画，用企鹅剪影结合具体的场景来表意，不仅强化了品牌，也能做到表意清晰明确。图形定好以后我们马上也输出了规范，Push给对接的开发同学方便调用。

在输出方案过程中，始终都要紧紧贴合问题和目标，避免无效设计。

能落地的方案—技术可以实现

在输出设计方案的时候，设计师需要考虑到开发成本是什么，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小，我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力，最后也只会是设计的自嗨。

用案例来让大家对清晰这个定义有更具象的认知：

产品提了好友生日推送礼物的需求，目标是想用生日这一比较温情的场景去设计专门的祝福页，用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片，从实现手段的难易规划了三个方向：

A 手势交互但开发难度大: 3D手势交互动画

B 趣味动图且开发成本适中：局部小动画

C 静态但开发成本低：全静态视觉，复用已有开发流程

最后团队对齐了人力成本，决定采用方案C，把设计精力放在本身卡片的表现上。

HOW: 如何输出清晰有效的设计方案

那如何才能输出清晰有效的设计方案呢？设计方案归根结底是思维方式的具体体现，输出清晰有效的设计方案最核心的点在于体系化的思考方式，我总结了一下几点：

1 拓宽边界

——————————

拓宽边界需要设计师站在更高的视角和有更广的视野，把设计从表现和执行抽离往前后延展，在整个设计过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，能站在上下游各维度去Review整个项目，只有站在更全局的视角审视，才能跳出片面设计的维度。

2 转换视角

——————————

从不同的视角看待问题，学会拆解问题和解决问题，从产品/开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是不是足够，是不是能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。

举个例子，产品同学觉得输出的方案不好看，是在用感性表达，我们可以尝试继续拆解不好看背后的原因，比如是不是核心内容不够突出、担心按钮转化率等，一开始就抱着产品不懂设计这种想法是没有办法解决问题的。

还有一个就是用户同理心，很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题，比如新功能内部团队觉得很厉害，但实际门槛太高，用户根本不知道怎么操作，而我们长期体验这个产品反而忽略了产品的易用性。

3 结构思维

——————————

我们在启动项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念，最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。

举一个日常生活的例子帮助大家理解，比如我的问题是长得丑，我的目标是要变得更年轻漂亮，我的理念就是改善体型和优化五官，最后找到具体的发力点比如晚上不吃晚饭，去美容院打美容针、学会怎么化妆等。

4 认知创新

——————————

有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情，认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化、还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。

5 及时复盘

——————————

完成项目以后需要不断的总结方法，遇到的问题，除了技法层面的提升，更重要的还包括思考层面的提升。学会去总结之前踩过的坑，避免重复性的问题，比如你的输出一直存在层级不清晰的问题，那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误，但是尽量避免总是犯同样的错误，这样才能加速成长的脚步。

写在最后

有了解和学习 B 端的同学必然都听说过 SaaS 这个词，这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要，但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问，Saas 应该怎么设计？适用哪些设计风格？

……

所以我从最底层的技术层面，来解析 Saas 到底是什么，在未来你再也不用担心对这个词汇一知半解，无法正常参与业务讨论了。

讲解什么是 Saas，或者刚刚图例出现的 Paas、laas 是什么，首先要认识一个问题，一个需要联网的软件，是如何落地的，需要哪些前提条件。

通常，我们可以把一个普通的联网产品要正式上线并使用，需要满足 9 个层级的条件，我们简称 “9层塔”，分别是：

下面，我们根据每个大层级来解释一下，它们分别都是什么。

1.1 基础设施层

基础设施层是一切网络服务的根基，由现实世界的硬件组成，是所有技术、代码、数据的运行基础。

层1：网络（Networking）

即基础的互联网电信宽带服务，通过电信运营商在各地搭建联网用的设备，并使用线缆相互连接，满足数据的物理传输可能。

比如你想要在家上网冲浪（非移动上网），最基础的条件是就是购买和开通宽带服务，通过接入光纤的形式，实现从家中连接到互联网世界的可能。

层2：服务器（Serves）

服务器，本质上也是一台电脑。有了联网的条件，我们就要把网络接入到这台 “电脑” 上，让它来完成各种数据的处理和存储。

但不管它能做什么，要做什么，首先你得先有这台设备，不然后续的工作都无从谈起，所以服务器指的就是用来完成后续工作的电脑设备。

层3：存储（Storage）

存储就是硬盘，你想要运行的任何程序、代码，还是想要收集的数据，都需要容纳的地方，那就是硬盘空间。存储就是关联到服务器的硬盘，是数据存储的物理环境。

之所以硬盘被独立出出来，而没有把 CPU 内存这些拿出来，是因为数据的存储和安全（物理上）是网络服务的重中之重。CPU、内存、电源坏了，替换就可以，硬盘损坏导致数据的丢失是无论如何不可能接受的。

所以，工程师们开发了非常多特殊的技术来保障存储的稳定和安全。

1.2 技术应用层

技术应用层，就是具备了网络、服务器、硬盘以后，让这些基础设施充分发挥作用和能效的相关技术。

层4：虚拟化（Virtualization）

虚拟化是个比较抽象的概念，它是一种资源利用的技术，让服务器最大化的利用和分配自己的资源。

比如一台服务器，有8核心、8G内存、8G存储，如果卖个一个客户运行一个程序，那么很可能这个这个程序日常只使用一个核心的算力，1GB内存，1G不到的存储，剩下的算力资源不就浪费了嘛？

于是，虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序，并根据它们各自使用的消耗灵活分配 CPU 和内存资源。

所以，今天如果你想要搭建一个网站，云服务商出售的 “虚拟主机”，就是在实体服务器主机上切割出来的一部分。这样客户省钱了，商家利润率也更高了！

层5：操作系统（OS）

每台电脑都有自己的操作系统，我们熟知的 Windows、Mac OS等等。如果硬件没有搭载操作系统，那它们就只是一堆工艺精密的废铁。

对于服务器来说也是，任何服务器想要正常运行，都必须搭载相关的服务器操作系统，有了基本的系统，我们才能创建程序，让服务器去运行我们想要的功能。

前面提到的虚拟机，就允许同一台服务器通过虚拟技术运行多个系统。

层6：中间件

中间件也是个比较复杂的技术概念，它是个独立系统软件服务程序，是软件的直接面向对象（而不是服务器），是一种支撑软件。

举个不太严谨的例子，我们常规的逻辑是一个程序对应一台服务器（或虚拟机），但真实情况往往是一个程序会关联好几个服务器和不同的系统，来完成不同的网络服务。正常情况下，你需要对每个服务器和系统进行适配。

而中间件的作用就是帮助你省掉这个麻烦的步骤，让你只需要对接唯一的翻译和话事人，他会帮你向不同的任务对象传达你的要求。

层7：程序环境（Rumtime）

程序环境，就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言，都需要安装一个对应的运行环境。

许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面，那就证明这个游戏中运用到了 Java 的代码，如果你没有 Java 的运行环境，那么它们就无法生效。

1.3 产品表现层

层8：应用（Application）

在这个系统下，应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序，不管是后端程序还是前端程序。

它们需要使用某些特定的程序语言来编写，并运行在上面所说的对应环境中。我们所说的后端开发，通常就是开发服务器所运行的程序的程序员。

层9：数据（Data）

这个词放在这里可能有比较大的歧义，数据实际上就是使用这个程序所产生出来的数据，而不是单指数据库（数据库也是环境的一部分）。

比如你打开一个网站注册了账号，上传了头像，那么这些信息就是使用程序所额外产生的数据，它是项目正常运作的必然产品。

1.4 SaaS 到底是什么

理解上面的9个层级的内容是什么，我们就可以看下面这张图表了。

SaaS 全程 Software-as-a-Service，翻译叫 “软件即服务”，讲人话就是 “卖联网软件” 的。

前面提的 9 个层级，除了最后一层数据是我们普通人可以负责的，其它每个层级都需要对应的开发和工程师来负责对吧，那么我们普通人还是企业就不能使用网络软件服务了嘛？

这肯定是不符合事物发展规律的。

SaaS 的存在，就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意，直接让你在浏览器或本地客户端上直接使用这款联网软件，并创建对应的数据信息。

换句话讲，只要这个软件是联网的，且软件本身的功能就是服务的核心（划重点：社区电商类软件的服务显然不是软件功能本身），它就是 SaaS。SaaS 既可以免费，也可以是通过批量出售软件功能的使用权来赚取收益。

免费情景：

微软：如果你使用了基于 Web 的电子邮件服务（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已经使用一种形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/

付费情景：

在 B 端的语境下，SaaS 通常就是指制作一个面向商业用户的联网软件，然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……

所以明白了嘛，SaaS 只是一个商业形式或技术形式的统称，它根本没有具体的设计规范或者学习方法，完全根据业务的实际需求和场景决定。

最后，再问你们一个问题，你们现在负责的项目是 SaaS 嘛？

在 9 层塔中，SaaS 是完全制作好软件让用户直接上手使用的软件，而 PaaS 和 IaaS 就不一样。

2.1 PaaS

PaaS 全文 Platform as a Service，是平台即服务的简称。这属于完全技术化的服务，是非程序员的一般用户难以参与到的业务类型了。

即服务商提供了基础的 7 层服务，只要用户购买了这些使用权，那么就可以直接在这个基础上编写或安装运行的程序进行使用了。

比如全球最大的开源 CMS 博客程序 WordPress，是由 PHP+MySQL 编写的，如果要创建这样的网站，就可以直接购买符合程序对应环境的服务器，再进行安装部署即可。

2.2 IaaS

IaaS 全文 Infrastructure as a Service，就是用户只购买一个完全空白的虚拟主机，类似你购买了一台硬盘格式化后完全空白的虚拟电脑。

用户可以自己选择安装什么样的系统，编写什么样的中间件，最后再搭建自己的框架。这适合定自定义要求更高的用户，完全根据自己的需要 DIY 项目的服务器功能。

2.3 Hosting

Hosting 则是比 IaaS 更进一步的服务，从原本的虚拟服务器升级到了完整的服务器。

也就是说，在一些特定业务环境下（比如特殊的数据安全要求），用户需要购买完整的服务器硬件使用权，从原本的合租换成整租。

所以，Hosting 就是服务器托管的意思，用户向一些服务商购买了完整的服务器硬件使用权和联网功能，然后远程进行控制和使用。而商家负责硬件层面运维，防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。

2.4 Co-location

九层塔中，我们其实还省略了一个更底层的环节 —— 数据中心。

数据中心是一个物理名词，在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州，就是典型的数据中心。

Co-location 的服务也叫场地出租，就是数据中心的商家，把数据中心的物理空间使用权租用给用户，用户自己购买服务器或商家的（不是临时租用）放进去，再借助数据中心的网络和其它基础服务实现服务器的正常运转。

这个概念大家简单理解就可以，我就不多做介绍了。

所以，九层塔中包揽了不同层级数量的技术，就可以形成不同的服务，每一级服务有各自的优缺点，是由项目的实际情况决定的。

相信看完前面的介绍大家已经知道，SaaS 等服务是建立在联网的基础之上的，也就是说，除了可以独立运行在你客户端里的本地软件，还包含更多需要联网的软件，或者干脆运行在远程服务器主机上的软件。

这是一个发展的过程……

最早的软件安装是我们到软件店里购买软盘、光盘，回到家里的电脑安装，这些软件往往只在本地运行，是不需要联网的孤岛。

随着互联网行业的发展，孤岛渐渐被消除，联网上传和获取数据越来越普及，甚至，软件都不需要再下载和安装，直接用浏览器就可以访问使用。

这种模式，就催生了软件的开发维护与服务器、网络的硬件运行进行了分工，一般的产品开发团队专注在软件应用层面的开发工作，而把网络、远程服务交给其它商家，并付费购买。

这样不仅带来更高的效率，而且降低了各自的成本，实现了多方的共赢。

所以，我们再来理解云服务这个词就很容易了，云就是网络，云服务就是基于联网实现的各种软硬件服务的总和。

除了远程的虚拟机、中间件、数据库外，还有远程计算、渲染、CND加速、直播分流等等。

这也是为什么云服务会成为互联网发展的基础，因为它实在太重要了，几乎所有互联网公司都无法脱离云服务带来的支持。

这也是为什么各个大厂纷纷投入云服务的赛道中，因为这是互联网的基建和命脉之一，拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下，头部的厂商拥有更好的机群、技术、人员，可以大幅度降低运作成本，提供更优质但价格更低廉的服务。

虽然云服务在今天不可或缺，价格也越来越有优势。但是，并不是所有企业都一定要选择购买外部的云服务，这就是我们要理解的另一个课题 —— 私有化部署。

云服务再怎么便捷，也有一个缺陷，那就是数据是存储在别的商家、企业的服务器中，有一定的数据安全隐患。

虽然数据安全是云服务的最基本保障，但很多对数据隐私、安全极度重视的企业，是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器（私有云）的方式，实现从网络、硬件到软件全局私有化的部署。

也就是说，服务器机房是自己公司的，网络是自己迁进机房的，服务器自己买的，环境、虚拟化、数据库自己搭建的，后端程序也是自己写的，最后电脑手机上运行的客户端，是连接这些服务器的。

哦对了，当然这些硬件日常的维护也要由自己公司的运维负责……

这样的成本高嘛？非常高。但类似国企、银行、证券、国防、政府机关等机构，对数据的安全性是异乎寻常的执着的，他们是有足够的动力划出预算来确保数据的私密与安全，用来运行自己内部的 B 端系统。

这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件，尤其是服务器在国外的。

再问下一个问题，私有化部署，就意味着这个环节中所有步骤全是自己搞定嘛？

当然不可能，因为应用这个层面，有时候不是想开发就开发得出来，或者成本实在超出了预算。因为私有化的主要目标是数据安全，但不是应用的工具一定得个性化定制。

比如在即时设计官网的价格页面，就可以看到 “私有部署” 这个选项。它的实际作用，就是允许客户在自己的服务器上安装它，让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中，满足客户的数据隐私需求

注：这例子大家讨论最多适合理解，非恰饭

所以，了解完上面的概念，你也就大概能明白什么是云服务，什么是私有化。如果需要在工作中碰到更细节的名词还是概念，可以再进一步做理解。

文章来源：UI中国    作者：超人的电话亭
分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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

综合监管平台是对自然资源管控的一个OA系统。主要功能是对国土资源相关业务的监测、评估和统计，将各专项规划实现“多规融合”，从而优化城市自然资源配置，做好国土空间规划统筹。

为什么要有设计规范

1、多个设计师同步设计

我们部门有2名UI设计师，所以在我们同时画同一个项目界面时，为了保持整个设计的统一，就需要我们设定设计规范。

2、设计与前端之间的沟通

与设计同理，开发人员参照统一的设计规范写页面，可避免同一系统中出现设计控件混乱的情况，从而提高开发效率、减少沟通成本、减少返工率。

3、在公司内部复用

在公司内部，设计规范可运用在多个项目中，从而减少开发的工作量、提高开发效率。

建立设计规范前的工作

从产品经理手中接到原型图，首先是与产品经理的沟通，包括客户需求、设计风格的确定、页面内容的布局等等，关于设计尺寸，因为我们客户用的是1920*1080分辨率的电脑，所以设计就基于1920*1080尺寸来做；但有时会基于1440*900的尺寸来设计，然后上下适配1920*1080和1366*768。所以设计尺寸要根据具体情况而定。

页面框架

a、主体框架分为四个区域：顶栏、左侧栏、页签、主体内容

b、主体内容上、左边距为10px，默认显示一屏高度，超出的内容加上下滚动条

c、页面中的各个组件根据不同屏幕分辨率采用自适应

如何建立设计规范

1、颜色规范

后台系统主色调大多运用蓝色，这是因为蓝色往往围绕着科技、安全、信任等等，很符合业务场景，比如智慧城市、智慧医疗、智慧交通等。但是蓝色用多了也会让人感觉没有新意、审美疲劳，所以在色调这块，后台系统可以采取皮肤功能的扩展，做两套配色好的皮肤供客户选择，这样避免了因客户的不满而一次次的修改，从而提高工作效率。

2、文字规范

因为我们面向的客户多为政府工作人员，且年纪稍长，所以字号要比平常的网页设计要稍大一些；常用字体，中文：微软雅黑，英文或阿拉伯数字：Arial；行间距=字体+8px。

3、按钮规范

按钮是用户与系统间交互的一个重要触点，用于特定触发事件的发生。按钮类型可分为线性按钮、面型按钮、文字按钮、图标按钮、图标+文字按钮，按钮状态分为常规、悬停、按下、禁用。按钮的宽、高、曲率、文字离边框的间距需要在规范中写明。

4、表单规范

在后台系统中，表单多用于登录注册、搜索框、选择器、信息录入等。表单类型可分为输入框、下拉框、时间选择框、单选框、多选框等等，表单状态分为默认、输入/选中、填写完成/已选择、不可填写/不可选、错误提示。对于必填表单，需在标签前后或输入框后增加“红色*号”。输入框的高度、曲率需要在规范中写明。

5、表格

此图为可进行单选或批量选择、排序、表头分组和带有冻结列的复合型表格：

a、固定列表格：对于屏幕无法展示完全的内容，可以采用冻结重要列的方式，然后横向加滚动条左右滑动

b、可对数据进行排序：升序和降序

c、文字类字数限制：重要字段全部显示，其他文字信息超出宽度以“...”代替，鼠标悬停时显示全部内容

d、对齐方式：文字信息左对齐，因为人的阅读习惯是由左到右、由上到下的，此外在主从型列表中，采用左对齐错开文字，可使用户一目了然，降低视觉噪音；数据信息右对齐，因为数字单位个十百千万...是由右向左，方便比较数据大小

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

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

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

本文是参考国内交互设计标准网站及用户行为研究实现的用户体验设计规范，用于后台设计，网站设计等。

一、统一性

涉及到的产品越多，产品统一性越强，实现信息同频，开发和设计快速了解信息

• 字段统一：模块之间的tab的字段位置保持统一，减少用户记忆负担

• 按钮位置统一：（页面功能操作按钮，添加按钮，导出按钮，批量操作按钮的位置）

一个项目中会涉及到多种按钮，甚至一个页面中也会涉及到多种不同功能的按钮，这个就需要把同一类型或同一功能的按钮，它们的位置统一。减少用户学习成本。

因为如果同一样的功能按钮在不同的变换位置的话会打乱用户已经形成的习惯，增加其学习成本。（尽量采取以下情况的一种）

• 帮助说明的统一性

帮助说明的表现形式有很多种，但不管选那种整个项目要保持统一，一些特殊情况除外，固定一个位置，可以方便用户在最短的时间内，快速完成此项操作和获取内容。

二、权重性

权重是为了突出有效信息，也能在不同元素建立一种有组织的层次结构，让用户快速识别关键信息。

• 主次关系对比

为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断，来突出其中一项相对更重要或者更高频的操作。

突出的方法，不局限于强化重点项，也可以是弱化其他项。

按钮主次

信息主次

但是在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断

数字主次

• 操作难易顺序

表单在遵守操作流程的情况下，让用户涉及到的操作从易到难，让用户有填下去的动力。

排序规则

（1）有“有默认项”的选项；

（2）有“选项”的选项；

（3）只输入“数字”的选项；

（4）“添加图片”“修改”等涉及复杂操作的选项；

（5）“备注”“商品卖点”等选择。

左右排版的时候将“重要必填项”先在从左边（纵向排列）开始排版（排版时仍按照我们的从简到难的规则）

注：当“必填项”比“非必填项”多时，排版上要考虑，就按照次序，左边排满，再排右边。

• 可视区域不=可点击区域

在使用Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。

注：当悬浮在“客户”所在的文字链单元格时，鼠标

【指针】随即变为【手型】，单击即可跳转。

当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。

注：在移动端尤其适用。

鼠标移入按钮附近，即可激活Hover 状态

三、有效交互

• 页内编辑：

单字段行内编辑

当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』

状态一：普通的浏览模式，不区分可编辑行和不可编辑行；

状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；

状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。

单字段行内编辑

当『易读性』为主，同时又要突出操作性的『易编辑性』时，可使用『文字链/图标编辑』

状态一：在可编辑行附近出现文字链/图标；

状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。

多字段行内编辑

当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』

注：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在Table 中进行编辑模式切换时，需要保证每列的不跳动。

• 轻量化设计

减少负担，增加轻量化的操作

注：删除的操作是谨慎的，系统在不打断当前操作的时候给出二次提醒确认。

• 输入框实时判断

填写表单的条件反馈。

注：不需要提交后才出现提示，输入及时给用户反馈

• toast反馈提示

完成整个操作后的提示以及系统提示

注：重要的，文字多于15个字以上不适合放在toast里面提示。

• 提供邀请

提供下一步操作的入口

不仅要提示他发生了什么，还能引导他怎么做，甚至能让他一步到位直接跳转到要进行下一步操作的页面去操作

当页面没有按钮时，提供明确的入口。

最后，关于后台的用户体验设计规范就总结到这里啦。

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

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

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

让信息架构，和产品架构，产生“化学反应”

这个信息架构的角度，具体而言，就是只包含一级频道的交互设计。

核心功能、辅助功能、重大功能，作为产品的三大类功能，更多是从发展的角度来划分。

除此之外，大部分 App 都还有一些非常基础的功能，比如“个人资料”、“我的收藏”、“设置”、“搜索”等，此类功能，我们称其为通用功能。

核心功能、辅助功能、重大功能和通用功能，是产品的四大类功能。

总的来说，本文主要以底部 tab 导航的 App 为例，探讨一下，如何在一级频道来落地产品的四大类功能。

01 宏观上讲，怎样更好的摆放四大类功能？

网易云音乐是我个人很喜欢的一款产品，日常用的也比较多。不过，它的新版（6.0 系列）给我的直观感受是，有点复杂了，我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。

给我类似感受的产品，还有 Keep 和知乎。

究竟是什么，让我觉得，这些产品变得有点复杂了？

个人简单总结了一下，最直接的一个原因，是这些 App 都新增了重大功能，并给这个重大功能单独加了一个一级频道。

比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道，都分别占用一个一级频道。

企业为什么这么设计？个人的猜测，这些重大功能于企业而言，很重要，要么肩负商业化使命，要么被寄予厚望，所以企业就单独给了一个一级频道。

这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系，那我们就需要考虑更多的因素。

之前在信息架构那篇文章里，个人的建议是，如果想让 App 始终保持简单，那就只保留 4 个 tab，也即只有 4 个一级频道。

如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能，以接近最优的方式，安置在寸土寸金的 4 个一级频道上？

我想，这中间一定有一些原则，值得我们探讨和参考。

1 和重要程度保持一致

通常而言，重要程度越高，分配到的空间就越多。这是一个比较普世的道理。

也就是说，这条原则，主要会影响到，四大类功能，各自占用多少空间比较合适。

我们有 4 个一级频道，每个一级频道代表了 25% 的空间。

再来看四大类功能，按其大概的重要程度，简单的分析一下。

先说核心功能，这个最重要。

核心功能是立足之本和护城河。先换个角度看这个问题，假设有三种可能，即核心功能可以占用一个、两个或三个一级频道。

先用下排除法。三个一级频道难免显得过多，剩余的三种功能挤在一个一级频道里也会显得过分拥挤；一个一级频道的话，倒也可以，但是平分四分之一的空间很难体现出核心功能的重要性。

相比之下，两个一级频道就显得较为合适。

综合考虑到有四大类功能，通常两个一级频道也不会完全给核心功能所用。

所以，核心功能，大概占用一个半一级频道，也即 40% 左右的空间即可。

再说通用功能，这个比较容易。

此类功能通常比较多，重要程度可能不及重大功能，但是又不能没有，所以通常我们也会单独给一个一级频道，就是“我”或者“设置”之类的一级频道，大概占用 25% 的空间即可。

第三，说下重大功能，这个比较重要。

通常而言，重大功能的重要性仅次于核心功能，而且重大功能可以有多个，再考虑到通用功能一般单独占用一个一级频道。

那么，相对而言，重大功能，完全可以单独占用一个一级频道，甚至更多，大概占用 30% 左右的空间即可。

最后，说下辅助功能，这个比较特殊。

首先，很多产品是没有辅助功能的；其次，辅助功能是个小功能；最后，辅助功能的数量一般也不多。

总的来说，辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多，所以，辅助功能一般和重大功能共用一个一级频道即可，大概占用 5% 左右的空间。

2 和使用频率保持一致

通常而言，用户用的越多的功能，就排的越靠前。

也就是说，这条原则主要决定四大类功能的排序问题。

具体而言，用户用的最多的是核心功能，所以核心功能最靠前。

重大功能和通用功能，有时候很难说哪个使用频率更高，比如微信里的“搜一搜”和“收藏”。但是比较明确的是，很多 App 在诞生之初，并没有重大功能，只有核心功能和通用功能。

所以自然而然，通用功能排在了核心功能后面。

个人有个猜测，一方面，有时候很难说清重大功能和通用功能，哪个使用频率更高；另一方面，通用功能起初是排在最后的。

所以，当重大功能出现时，就延续了旧传统：通用功能依然排在最后。最终结果就是，重大功能和辅助功能排在中间。

值得一提的是，现在市面上开始出现两类现象。

其一是，有一些拥有 5 个一级频道的 App，开始把核心功能放到中间那个频道，比如 Keep 的“运动”频道。

其二是，企业开始人为的控制打开 App 时默认展示哪一个频道，而且默认显示哪一个频道，存在多种情况，例子依然包括 Keep：以前默认显示中间的“运动”频道，现在默认显示“计划”频道。

个人觉得，对企业而言，这两类做法，都是得不偿失的。

因为这样做，会让 “从左起，1、2、3、4”这个排序失去价值。没有这个前提，也就谈不上“和用户的使用频率保持一致。

而且，这种默认不显示左边第一个频道的做法，有时候会让用户产生一种被绑架的感觉（默认显示收费频道），有时会让用户感觉企业在自作聪明（默认没显示收费频道，但也没显示核心频道）。

3 符合用户预期

主要有两个预期，逻辑预期和习惯预期。

3.1 逻辑预期

用户确实很懒，但不代表用户不会思考。

比如前文提到的，网易云音乐的“私人 FM“功能，在我的认知里面，”私人 FM“和”每日推荐“一样，都是个性化推荐，性质极其相似，应该放在一起。

所以，当我在新版里的“每日推荐”旁边找不到“私人 FM”时，心里就觉得很奇怪很不解，心想这么好的功能不会是给删了吧。

后来某一天，当我在第三个一级频道“我的”里面发现“私人 FM“的时候，我又觉很别扭，不好用。

在新版里面，一开始我是去“发现”频道的“动作库”找的，怎么找都找不到，跟找不到网易云音乐的“私人 FM“是一样的心情。

因为我觉得，“动作训练”和“动作库”，是很接近的一对事物，从逻辑上来讲，用户会觉得这俩事物挨在一起，或者会猜他们是不是挨在一起。

3.2 习惯预期

这里的用户习惯，主要有两类。一类是自家产品培养出来的，一类是市面上的产品培养出来的。

通常情况，一级频道的设计，是要符合用户习惯的。

最忌讳的情况是，自己一手培养的用户习惯，到最后自己再一手去打破，这样很容易引起用户的烦躁、不满和失望等负面情绪。

比如 3.1 段的两个例子，同样也没有符合用户的习惯预期。因为在最开始，网易云音乐的“每日推荐”和“私人 FM“是挨在一切的，Keep 的“动作训练”和“动作库”也是融合在一起的。

4 良好的扩展性

就一级频道而言，重大功能和通用功能是最有可能扩展出更多子功能的。所以，就扩展性而言，需要重点照顾到这两类功能。

通用功能大部分都收纳在“我”这个一级频道，通常也是一个列表的样式，天然自带良好的扩展性。所以，扩展性的难点和重点，最后是落在了重大功能这里。

在一级频道，重大功能的展现形式，通常有两种。

一种是像核心功能一样，直接把重大功能的内容铺陈出来，典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来，只展示一个入口，典型代表是微信的“发现”频道。

对企业而言，现实问题是，当重大功能的数量上升到两个、三个甚至更多时，如何展示他们？

市面上的常规做法，也是两种。

一种是像网易云音乐和 Keep 这样的，直接开辟一个新的一级频道，供重大功能使用。还有一种是微信这种，把所有重大功能都收纳起来，有新的重大功能出现时，新增一行列表即可。

个人推荐微信这种做法，因为这种做法的扩展性最好，可以应对无穷尽的重大功能。

至此，我们简单总结一下。个人看法，四大类功能，具体咋摆放，并没有标准答案，但是可以参考以上 4 个原则。

02 微观上讲，有没有补充和例外？

有。借这个话题，聊两个比较特殊的问题。

1 顶部标题栏的两侧，适合放什么功能？

先来分析一下这个位置，顶部标题栏的两侧，位于屏幕的左上角或右上角，是个很显眼的位置。

个人认为，有三类功能比较适合这个位置。

第一类，是和当前页面内容有密切关系的功能。比如“编辑”型功能，可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能，可参考 Twitter 首页信息流的发推图标。此类功能，最适合这个位置，而且一般也没有更合适的位置来摆放他们。

第二类，是比较高频的通用功能或重大功能，比如搜索、消息、设置等。

第三类，是某些高频功能的快捷入口，比如微信的扫一扫和收付款。

除此之外，如果是一个比较低频的功能，不管是通用功能、重大功能还是辅助功能，放在这里，都不合适，因为会对用户形成打扰。

2 一个功能，最多可以出现几次？

大部分功能，在 App 里只会出现一次。但在日常使用各种 App 的时候，我们也会多次看到同一个功能，在不同的地方。

有时候，能看到三次，比如搜索，在微信、知乎和网易云音乐都出现了三次，我们也不会觉得哪里不对劲儿。实际上，搜索虽然出现了三次，但也没有引起我们的特别注意。

还有一些功能，是出现了两次。我们在第二次看到的时候，会有点烦躁，心想怎么又来了；有时候会有点困惑，心想下次我该用哪一个，哪一个最快捷。

这中间有什么原则可以参考吗？

先来看下搜索，在微信、知乎和网易云音乐，都是比较高频的功能。换句话说，用户在不同的一级频道，都有可能需要搜索一下，所以搜索出现三次，在不同的一级频道，是有这个需求存在的。

搜索以外的功能，个人认为，只有一类适合出现多次，通常两次足矣。

那就是，此类功能确实比较高频，同时路径又比较长，使用起来不够方便。这时候，就适合给此类功能一个快捷入口。这个快捷入口，一般是出现在标题栏。

一个功能，如果只是单纯的重复出现两次，两次都没出现在标题栏。那给用户的感觉，就是，App 并不是在给我提供快捷入口，而可能只是通过重复的方式来强推这个功能，就容易产生烦躁和困惑的负面情绪。

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

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

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

用户体验四维度的概念、价值以及相互之间的关系

用户体验，是用户在使用产品过程中建立起来的一种纯主观感受。

解读用户体验，可以有很多视角。本文提供一个以人为本的视角：用户体验四维度。具体如下。

HI X：Human Interface Experience，人与界面的交互体验。

HC X：Human Content Experience，人与内容的交互体验。

HH X：Human Human Experience，人与人的交互体验。

HB X：Human Brand Experience，人与品牌的交互体验。

用户体验四维度

01 四维度的概念

怎样判断一款产品有几个维度？这就要从四维度的概念说起。

1. HI X（人与界面的交互体验）

HI X 是指用户在浏览、阅读、操作界面过程中产生的主观感受。

HI X 既受信息架构、交互设计和UI设计的影响，也受根需求和功能架构的影响。主要依托手机和电脑的互联网产品，天然存在界面。所以，HI X 属于基础属性，所有产品都有。

2. HC X（人与内容的交互体验）

HC X 是指用户在消费内容时，内容本身带给用户的主观感受。

这里的内容，既包括衣服、鞋子等实体商品，也包括文章、图片、视频等虚拟内容。诸如淘宝、网易严选等电商产品，以及公众号、Instagram、抖音等 UGC 产品，都具备 HC X 属性。

3. HH X（人与人的交互体验）

HH X 是指用户与其他用户、产品工作人员沟通交流时产生的主观感受，或产品的社区氛围、沟通氛围带给用户的主观感受。

所以 HH X 有两层含义。第一层发生在用户与用户之间，是指当用户扎堆或沟通交流时，交流氛围、交流内容带给用户的主观感受。第二层发生在用户与产品工作人员之间，是指当产品依靠人力向用户提供咨询、售后、配送等服务时，产品工作人员的服务行为带给用户的主观感受。

关于第一层含义，不管是更强调社区属性的产品，比如天涯社区、豆瓣小组、百度贴吧，还是更强调内容属性的产品，比如公众号、微博、小红书的笔记，都具备 HH X 属性。

关于第二层含义，常见的 HH X 由客服人员提供。如果是电商产品，提供人员还包括快递员和售后人员等。

4. HB X（人与品牌的交互体验）

HB X 是指当用户想起、谈论起品牌，或使用品牌的产品、体验品牌的服务时，品牌带给用户的主观感受。

只要一款产品做成了品牌，它就有 HB X 属性。

HB X 会直接影响到我们是否信任、喜欢一个品牌，以及是否会使用它的产品和服务。所以，我们对 HB X 往往会有一个抓重点的综合评价。就像一个外向活泼的女生，虽然在外向程度方面和一个内向安静的男生不一致，但双方也可能会选择在一起，因为内向、外向并非双方关注的重点。

因为 HB X 牵涉到对品牌的综合评价，所以就像工作都有一段试用期、恋爱都有一段了解期一样，HB X 的形成往往也需要较长时间，通常至少要 3~5 年。

02 四维度的价值

每一个维度，各有什么价值？

1. HI X（人与界面的交互体验）

作为基础属性，HI X 的价值主要体现在以下两方面。

如果是一款只具有 HI X 属性的工具型产品，比如视频会议产品 Zoom，那于这款产品而言，HI X 就是一切，这款产品的成败也几乎完全取决于 HI X。

如果是一款同时具有 HC X、HH X 属性的内容型社区型产品，比如 B 站、快手这些视频类产品，那此时的 HI X 就会扮演一个类似交通出行（基础设施）的角色。如果 HI X 比较差，这个“出行”过程就会像出去玩时的塞车一样，让人难受；如果 HI X 很优秀，这个“出行”过程就会像准点的高铁、飞机一样，又快又爽。

2. HC X（人与内容的交互体验）

HC X 主要从内容层面影响用户满意度。

如果 HC X 比较好，用户消费时的决策时间就会被大大缩减，同时用户满意度也会比较高。比如淘宝上就有一些原创设计、质量不错、价格不贵的精品小店，很受欢迎。我们去网易严选、优衣库天猫旗舰店这些质量不错、设计不错、价格适中的店铺买 东西时，也会很快很省心。

以上说的是电商产品，对于 UGC 类的内容产品，也是类似的道理。比如站酷上的首页推荐和编辑推荐，相对而言，HC X 比较不错，所以看这些内容的用户也会比较多。

3. HH X（人与人的交互体验）

HH X 是用户情绪的最大影响因素，在情感方面对用户具有最大吸引力。物以类聚，人以群分。HH X 良好的产品，会像一场谈笑风生、其乐融融的聚会，吸引用户去扎堆。

良好的 HH X 往往意味着良好的氛围，它不仅能带给我们诸如轻松、愉快等积极情绪，还能在一定程度上带给我们一种归属感。最终的结果，就是我们喜欢用这款产品。比如 B 站的 HH X 就比较好，具体而言就是弹幕氛围比较欢乐友好，这样的氛围带给用户的感觉是比较好的，用户也喜欢在 B 站就着弹幕看视频。

4. HB X（人与品牌的交互体验）

HB X 事关品牌能不能以正面形象住进用户心里。

良好的 HB X，往往意味着良好的品牌美誉度和忠诚度。HB X 良好的产品，就像你信任和喜欢的男/女朋友一样，他/她会在你心里占据一定的分量和地位，让你乐意介绍给家人和朋友认识。比如苹果的 Mac，就有很高的品牌美誉度和忠诚度，用户也很乐意把 Mac 推荐给身边的朋友。

03 四维度的关系

四维度之间存在怎样的关系?

1. HI X 是另外三个维度的基础

HI X 作为基本维度，相当于“水之源，木之本”。如果把用户体验四维度比作一个金字塔的话，塔底的基石一定是 HI X，塔尖则是 HB X。

2. HC X 通常是 HH X 的基础

HH X 的产生，通常离不开 HC X。也就是说，通常得有一个合适的“内容”或“主题”，才能把人聚拢过来。比如结婚的时候，你可以邀请到很多亲朋好友来参加婚礼，但在平时，你很难邀请到这么多人。我们在 B 站看视频的时候，弹幕通常比较欢乐友好，氛围不错，但如果没有这些视频，也就不会有这些弹幕，以及不错的社区氛围。

3. HI X、HC X 和 HH X 共同构成了 HB X 的基础

HC X、HH X 和 HI X 一样，都可以成就 HB X。

以早期 Keep 为例，刚开始只有课程这个功能，也就是说只有 HI X 和 HC X 这两个属性。其中，HI X 还可以，HC X 比较优秀。在此基础上，慢慢发展出了社区功能（HH X 属性），而且做得不错。再往后，有了“自律给我自由”的品牌精神。在课程、社区、品牌精神等因素的助力下，Keep 有了不错的品牌美誉度和忠诚度。也就是说，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。

4. HB X 也可以仅有 HI X 这一个基础

有些产品并不具有 HC X 和 HH X 这两个属性，而是仅有 HI X 这一个属性。单凭一个良好的 HI X，也可以成就良好的 HB X。

比如 Zoom，作为一款开视频会议的工具应用，它最初只有 HI X 这一个属性。但是因为很好用，HI X 很优秀，所以如今的 Zoom 即便没有内容（HC X）和社区（HH X）属性，依然成了一个在全球都很受欢迎的品牌，拥有了不错的 HB X。

总的来说，在四维度的金字塔里面，它们的关系如下图所示。

文章来源：站酷    作者：SnowDesign

分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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