一、什么是交互设计？

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

交互设计（英文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版本的转化率、跳出率、留存率等

感谢阅读！

前言

尼尔森的十大可用性原则是尼尔森博士在分析了两百多个可用性问题的基础上，提炼出的十项交互设计原则。被广泛运用于网页、APP以及各种人机交互领域。

要注意的是，这10项原则是启发式（heuristics）的、通用的经验法则，而不是具体的规定。

一、系统状态的可见性

系统应该通过在合理时间内的适当反馈，向用户通知正在发生的事情或者当前的状态。

不要蒙蔽用户，沟通是所有关系的基础，无论人还是设备。

1.合理时间

当系统响应时间小于1秒时，通常正常反馈即可；

当响应时间长于1秒时，我们通常会通过加载动画、分步加载、占位符加载等方式，减缓用户等待的焦虑感；

如果超过10秒还没有得到响应，那么通常会认为这次请求是失败的，需要给予用户失败提示。例如：刷新提示、新页面加载提示、支付提示、下载提示。

当然加载时间并没有固定的规定，有个例子是这样的：

某个APP的用户反馈说他们的页面加载太慢了，希望提高服务器反应速度……于是他们对此进行了优化，优化后用户的反应：新版很给力，很快！

那这个团队的优化方案是什么呢？

。

。

。

——他们把小菊花转圈的速度提快了

2.适当反馈

对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何，减少不确定性；并引导他们在正确的方向上交互，而不是浪费精力在重复操作上。反馈有：

·状态反馈

用户需要知道自己的操作是否被系统感知，所以用户操作后，应该第一时间给出反馈。最常见的就是各种按钮的不同状态，比如未点击、点击、不可用状态，以及选中、未选中状态。

就拿小说类批量订阅列表来说，起点通过明显的线面和颜色区分选中和未选中的章节；而长佩我买的时候是需要反应一下：免费不可选中是浅灰色、未选中是深灰色，选中是绿色……但是初始状态时深灰色看起来像是选中？？

·进度反馈

进度通常有页面加载进度、下载进度、视频播放进度等

比如下图的invision网站，在阅读文章时通过顶部进度条的反馈，让用户知道自己的阅读进度。

·位置反馈

因为网络空间中用户无法像物理空间那样感知到自己的位置，所以我们需要在视觉上进行提醒，以免用户迷失。

比如标签栏、导航栏通过选中状态来定位当前所在页面，阅读、看视频、听音乐时系统会记录当前的位置，下次打开后继续。

·反馈方式多样化

反馈可以通过元素的颜色位置、文字、声音和震动，甚至动效去表达变化。

比如京东，通过产品图缩小-加入购物车的动效来反馈“商品已加入购物车”，直观形象。

二、系统与现实世界的匹配

使用用户熟悉的语言，单词、短语、图形，而不是系统导向的术语；遵循现实世界的惯例来呈现信息。

1. 使用目标用户的语言

这里的语言不仅仅包括文案层面的语言，还包括产品的设计语言（图形、配色和风格）。

产品使用的语言应该使目标用户能够清晰理解的。如果用户不能理解，他们会感到被忽视和受挫败，许多人将选择其他产品完成目标。

特别是现在很多公司选择耕耘细分市场的产品来分一杯羹，比如针对中老年、青年、儿童的产品，抑或商务、娱乐的产品，都要分别使用符合自己的定位的语言。

比如bilibili的设计语言和每日优鲜的文案语言——

2.模拟现实世界的对象

模仿现实世界的产品或者使用映射，能够利用人们现有的知识，降低学习成本，使他们轻松快速的理解界面。

像早期拟物化的设计，以及MD的魔法卡片模拟了物理世界中的纸张。IOS的指南针也类似现实世界中的指南针，以便用户轻松的使用。

熟悉是这些体验让用户愉快的原因。

比如微信阅读打开书的动效就像现实世界的打开一本书一样、给medium文章进行标记就像我们现实中使用马克笔一样。

三、操作可控、可逆

用户经常会在使用时发生误操作，所以产品需要一个非常明确的“紧急出口”帮助他们——即提供取消和重做的功能。

1.可撤销/返回

用户在使用产品时可以自由进退，遵循从哪里来就可以返回哪里去的原则；比如常用的各种二三级页面左上角必备的返回按钮。

当用户误操作时要给用户提供提供撤销、取消、重做等相关功能，比如聊天类产品的信息都可以短时间内撤销。

（突然发现这张图暴露了我每天点外卖的事实 ヽ(。>д<)ｐ

2. 不可逆的操作要给用户提示

不可逆的操作需要给用户明显的提示，以免对用户产生严重的影响。比如删除功能通常需要二次操作，重要操作会有弹框类提示。

四、一致性和标准化

设计者应遵循一致性原则，统一标准能确保用户理解各个元素在设计中，并且知道去哪里寻找哪些功能。

1 和用户的使用习惯保持一致

移动市场成熟的今天，已经有很多约定俗成的惯例。和用户的习惯一致，意味着用户不再需要重新学习，各种应用的切换之间没有学习成本。这也是我认为设计的趋同化未必不是一件好事情的原因。

比如常用的几种操作手势、下拉刷新功能、我的/地图/购物车图标等

2 产品规范化

在同一个产品中，同一层级的信息应该使用一致的设计语言。

比如导航、弹窗、按钮、列表，这是我们推行设计组件和规范的一个原因。

除此以外，颜色、文字、圆角、阴影等也是需要注意一致性的。

△谷歌google visual guidelines-google ads

五、防错原则

用户经常分心于手头的事情，因此需要通过提供建议、利用约束来防止无意识错误。

1 范围限制

其实限制用户的选择并不是一个好主意，但是如果有明确的规则来定义可接受的选项，那么限制用户可以输入的类型是一个很好的策略。

比如订房时，对可订房日期进行限制，防止用户选错时间。

2 提供提示

提供清晰的提示，也能防止用户犯错，提示包括标签、文字、颜色、以及反馈状态等。

比如IOS的键盘，选中的字母会放大，提示用户；输入文字光标会放大，防止用户操作失误。

比如负向操作通常为红色，红色是一种警示色，给用户预警防止误操作。

六、确认而不是记忆

尽可能减少用户的记忆负担，向用户显示他们可以识别的内容，而不是自己记忆和填写。

1. 让用户选择而不是输入

选择和输入的操作成本相差巨大。产品应该给用户提供选项，让用户可以直接选择，而不是自己输入。比如淘宝填写收货地址

2. 自动读取、记录信息，减少操作路径

在用户使用产品的过程中，会有产生一些需要记忆的内容、或者操作路径，这个时候我们要避免用户记忆，把信息直接提取出来，送到用户手里。

比如自动读取短信验证码，比如bilibili会提醒上次播放的位置

3.内容可预期

内容可预期，减少用户操作路径，防止来回跳转。

比如起点章节付费时可以直接看到当前的余额、

比如京东金融首页直接显示了余额和代还金额（本来应该打个码的，但是想想我三位数的资产打码还不够费劲呢(ಥ_ಥ)

七、灵活性和使用效率

好的产品需要同时兼顾新用户和资深用户的需求。

对新用户来说，需要功能明确、清晰，对于老用户需要快捷高效使用高频功能。不可迎合某一种用户，把不必要的信息占据重要部分。

1.提供快捷入口

在首页放置常用功能，比如淘宝、支付宝、bilibili等等；或者提供自定义入口，比如猿题库可以自定义科目

2.允许用户重复操作

对用户频繁使用的功能，提供重复操作入口或者模板。比如美团外卖，可以直接选择再来一单

3.提供默认选项

通过提供系统默认选项，而减少用户多余的操作。比如美团、携程、每日优鲜等当地服务类产品，会默认选择当前定位的城市；购物会选择默认收货地址等

八、简约设计

不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性。

1建立清晰的视觉层级

能够方便用户无障碍的浏览信息，越重要的内容越突出。

通过颜色、大小、字体的字重、对比度、元素的间距、特殊造型、动效等来表现。

2 降低页面的干扰

页面中背景、装饰元素视觉过重的话，就会干扰到用户对于信息的阅读。

比如以图片为背景，我们要考虑图片上文字的识别性；列表页过重的分割线、页面内过多的装饰元素都会给干扰信息阅读……

比如下厨房菜单推荐的卡片，字体识别度特别差；移动掌厅的这个模块，字体色和背景色对比不清晰、以及字体太小，都会干扰用户识别信息——我们需要做的是降低这些干扰

九、帮助用户识别、诊断和修复错误

错误消息应以简单的语言表示，准确指出问题，并提出解决方案。

1.错误提示要直观

当发生错误时，提示信息一定要直观，视觉上能够引起用户注意，可视化处理，文案要简单概要。比如账号密码错误、以及各种异常状态

2.提供解决方案

当用户遇到错误时，不要只是报错，尽可能提供详尽的说明文字和指导方向，遇到了什么问题，以及如何解决等等。

十、提供帮助文档

帮助性内容有一次性提示、常驻提示和帮助文档。

1 一次性提示

多用在用户第一次使用，或者产品更新后，通常为气泡形式，或者snakebar的形式呈现。

2 常驻提示

用于操作时必须注意到的内容，在页面中以文本或者标签形式呈现。

3 帮助文档

一般用于解释规则或者热点问题，通常以超链接的形式存在于页面中；或者以集合形式位于设置页中，此时需要注意要易于检索。

总结

本篇文章主要介绍了尼尔森的10大可用性原则，以及介绍了适用范围和案例说明。最后我们再来复习一遍加深记忆吧~

What 是什么

简介： 按钮组是把相关的动作组织成一组按钮的设计模式。按钮组的内部内容彼此水平或垂直对齐，并采用相似的视觉设计。如果超过三个或四个动作，往往会采取多个分组。

例子： 语雀编辑器的顶部工具栏

Why 为什么

按钮组可以让界面不言自明。在复杂的布局中，被精心安排过的按钮组会很容易被用户感知和使用。一方面，它们在界面上往往非常明显，用户能够一眼看到有这些功能可以进行相关操作。

大家所熟知的格式塔原则（Gestalt principles）也在这里起作用。彼此相邻的按钮往往暗示着这些按钮的功能相近，因此会让用户感觉到这一组按钮可以完成类似的功能。相对的，不同的按钮分组往往暗示着不同的功能类型，因此彼此间应该保持间距，或用不同的形状，或用分割线进行区分。

When 什么时候使用

如果你需要在界面上展示许多操作按钮，且需要确保它们随时在界面上可见。但同时，你又需要用图形化的方式组织它们，以使它们看起来不会特别散乱。

这些动作中有许多是彼此相似的 —— 它们有相似或互补的效果，比如，它们的功能语义相类似 —— 由此它们可以三五成组地放在一起。

按钮组可以用在对产品全局有效的操作上（例如「打开」和「选项」操作），或特定的一些通用操作（「保存」、「编辑」和「删除」），或特定的某些操作（例如布局的「对齐」、「分布」）。不同范围的操作不应当被到一个组中。

使用条件：

· 存在大量操作按钮；

· 希望用图形化的方式组织这些按钮；

· 操作按钮间存在功能相关性和差异性；

How 如何使用

这个模式的总结简单到像是一句废话：把相关的操作按钮分成一组。

但如果详细展开就会有更多的介绍。比如：

· 如果需要包含文本说明，尽量使用两个字或三个字的动词短语，不要使用专业术语。

· 不要把不同功能范围的按钮放在一个组，应当将它们分成不同的分组。

· 同一组的按钮应该有同样的视觉设计：边框、颜色、高度或宽度、图标风格、动态效果等。

· 在空间排布上，可以将它们并排起来作为横排放置，如果空间不太适用的话，也可以考虑一列纵列放置（例如Photoshop的左侧工具栏）。

· 如果某一个动作是核心动作，可以将其区别对待。例如网页表单中的“提交”按钮。核心动作是希望大部分用户都需要（或期待）执行的动作。让这个按钮拥有更加强烈的图形或视觉风格来让它在显得更为突出。

· 如果按钮足够多，而且它们都有小图标，你也可以把它们放在工具条或者像工具条那样的狭长条上，放置在页面的顶部。

通过使用按钮组可以避免界面上按钮或链接过于拥挤混乱，也可以避免一长串冗长的动作列表看起来毫无关联或区别。

通过这一模式，你可以创建一个较为清晰的元素层级结构：用户可以一眼看出哪些动作是彼此相关的，哪些是重要的。

Example 案例

案例一：Sketch 的顶部按钮工具区

用户需求：编辑设计文件中的对象

Sketch 也是个很典型的应用了按钮组的设计工具。Sketch顶部的按钮不少于15个， 有很多要理解和追查。 但是得益于精心的视觉和语义组织，界面按钮始终保持一定的可理解性。

案例二：macOS Finder

用户需求：按自己需求对文件进行显示修改和操作

这个案例显示了来自 macOS 的 Finder 窗口的顶部按钮组。 秉承其设计传统，按钮风格明显。 导航组是放置在左侧中的按钮组。 布局相关的按钮组放在了中间，文件操作相关的按钮组放在了右侧。这样的设计使得界面变得易于理解和使用。

案例三：WebStorm 顶部操作区

用户需求：项目执行相关操作

这个案例显示了 Webstorm 的顶部功能操作区。WebStorm 采用了按钮组的模式，将项目执行的相关操作和Git相关的操作聚合在一起，中间使用了分割线进行了区分。

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

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

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

背景

在日常工作中，身为设计师的我们时常有这样的情形：身兼多个业务，但大部分的业务都是小业务，业务方给的需求也是七零八碎的小需求居多。面对该情况设计师有时会觉得没有一点挑战，限制自己对美好设计，给用户创造美好生活的想法，总想要去搞个大新闻。

不妨回头看看小业务，自己真的对它了解了么？这里提供一种视角，小业务也可以做大视野的事。通过一个小业务的案例改版，讲述如何从小项目中出发。

曾经负责过一个基础模块支持：设计详情。它是设计师用酷家乐设计工具设计方案产出的载体。该模块在之前有过改版迭代，迭代对业务目标（留存活跃）的提升并不理想。那从哪里入手呢？

方法流程

1. 理清业务目标

2. 挖掘用户需求场景

3. 梳理产品功能

4. 拆解设计目标

5. 设计策略实施

6. 验证迭代

一、理清小业务的业务目标

相对于大业务（例如网站改版），小业务因为简单，其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况，直接从梳理小业务具备哪些功能直接入手，分析下现状问题后开始制定设计策略，这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体，只是策略的表象。理清小业务所承担的业务目标是前提，那么如何理清呢？

理清业务目标

小业务目标来自大业务目标，对大业务的业务目标进行一级级向下拆解后，即可获得小业务对应的目标。目标拆解需要遵循MECE原则，拆解方法包含：二分法、过程法、要素法、公式法、矩阵法。（tips：目标的拆解有一定难度，）

Dapp设计详情为例，在酷家乐大增长业务背景下，用户活跃和用户留存为核心的目标，设计详情处于设计路径的一个节点，拆解得到设计详情的5个主要业务目标：

• 设计详情-用户周活跃

• 设计详情-新用户留存

• 设计详情-老用户留存

• 设计详情-内容投稿数

• 设计详情-内容分享数

业务目标可分为2个类别：

• 第一类别：符合用户意愿，如活跃、留存，在满足用户需求的情况下可以自然达成；

• 第二类别：不符合用户意愿，如内容投稿、内容分享，用户不太会主动去完成，需要去创造动机，激励用户进行。

二、挖掘小业务关联的用户需求场景

有小业务的业务目标后，第二步就需要给用户提供价值满足用户需求，以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提，那如何获取用户需求场景呢？

1. 用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定，包含四个关键要素，其中需求本身最为核心，需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】，【某用户】做了【某事】来满足【某需求】”

用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组（1-3年、3-5年、5年以上），每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景

访谈信息整合如下

2. 规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的，碎片化场景对设计指导容易出现偏差，需要把场景结构化，为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整，按设计前、设计中、设计后三个阶段进行划分。

以上梳理了设计详情相关的用户需求场景，再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景，在设计师的整个设计流程中只占了一部分。从设计层面来看，该2个场景局限在方案设计大场景中，设计更多做的是对其方案设计操作的体验优化，在原有较好操作体验的现状下，其对给用户创造价值上没有很大增量。再从以上业务目标来看，2个单一场景很难去促使用户对内容进行分享和投稿。

三、梳理产品功能矩阵

在理清小业务的业务目标和需求场景后，下一步就是按照场景去梳理产品能力。

1. 小业务功能现状分析

老版app设计详情的功能进行初步的现状分析，设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看，多个场景无法实现，如营销、谈单；从业务目标来看，通过当前功能有较大的优化空间，如当前投稿很难让用户知道投稿有什么价值。

2. 产品能力梳理

分析现状发现功能不足以支撑用户需求场景，有获取功能2个方向：

1. 挖掘现有能力：可以扩大梳理范围，从小业务所在的上一级业务到整个平台，一级级往上梳理场景对应的现有功能。

2. 打造新能力：围绕场景，打造出新的功能

挖掘平台上现有能力，可对业务的能力价值最大化利用，与其他业务形成互通，实现1+1大于2的业务价值。亦可围绕场景打造新能力，可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵，从平台获取到了很多全新的能力，以及对原有的能力进行了能力拓展。

四、拆解每个场景的设计目标和策略

在梳理出产品能力后，需要通过设计策略把产品能力有效组织起来，让用户快速感知快速上手使用。设计策略推导自设计目标，那如何得到设计目标？

基于用户需求场景将行为事件拆分，提炼行为事件再推导出设计目标，再基于设计目标给出设计策略。

Dapp设计详情受制于移动端能力，只涉及设计详情中5个相关场景，其设计目标和设计策略的拆解结果如下

拆解出设计目标后，基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状？首先需要明确什么是问题，问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题，很多情况是默认假设了一个预设目标，但这目标得到不严谨、不全面，容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出，其最终都来自设计目标。

对老版Dapp设计详情现状进行了分析，得到了问题

五、设计策略的落地

在上一步得到设计策略后，围绕着设计策略是设计方案。本段将不全部展开说明，只选3个关键点讲述设计方案的思考

1. 设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多，设计三步思考：

第一步：简化功能认知，对功能结构化，以场景的维度重组织功能，并以场景打造功能集合的认知，建立场景能力区；

第二步：梳理场景共同涉及的内容，作为联系的载体承载场景的放置，设计详情中展示态的方案涉及到了5个场景中的4个场景

第三步：提取场景中即时性和高优先级功能，打造快捷功能区

框架如下

建立框架后，填充具体的能力和内容。如场景入口放置于底部，并根据场景优先级做了主次的区分。

设计详情框架建立后，打造细分场景中的设计

2. 营销获客场景设计

营销场景的设计，将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类，就可以清晰去梳理出现有的功能，以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后，再传达各渠道提供的价值激励用户去触发行为。

3. 谈单场景设计

谈单场景关键在方案详情上，谈单面对不同情况，存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容：图文方案、全屋漫游、渲染图册。在方案详情中，头部承载了全屋漫游、图册，如图文方案过于繁琐可直接点击全屋漫游图进行讲解，亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航，可快速切换到需要讲解的地方。

六、上线验证

上线后数据平稳后观测，设计详情的周活提升了89%，每个场景下的功能数据都得到显著的提升（tips：有部分数据因技术原因没有采集到）。除了改版了Dapp侧的设计详情，后续对PCweb侧的设计详情进行迭代，同样起到不错的结果。数据的结果验证了方法的可行，并起到了积极的效果。

最后的思考小结

以上是我应用这套设计方法去做了块小业务优化，反向推动进入产品迭代，上线后取得了不错的成绩。在本次赋能后，对小业务中多了一些感悟

• 小业务是大业务的缩影，可以作为去赋能大业务前沿验证的实验田，大概率可以快速验证自己的想法，即使方向错了因为小业务改动影响面也小

• 因知识广度和深度的限制，不是所有设计师都可以一开始就可以把控大业务，小业务可作为打磨设计深度专业度，一些小业务的复杂度并不低于大业务

• 该设计方法同样适用于大业务，但方法是死的，不是所有情况都套用，得需要把握重点灵活应用

• 不要总想着搞个大新闻，在能力未被业务方认可时，小业务的赋能可以成为一个很好的发声口

• 不要轻视小业务，有可能是你根本还不了解

近些年，得益于经济和社会的高速发展，越来越多的中老年人开始尝试享受移动互联网带来的便捷生活。50岁及以上网民在总网民中的占比已经由2015年的9.2%提升至2020年的26.3%，增长接近两倍。但中老年在融入移动互联网时仍面临诸多困难，是需要重点关注的弱势群体。

随着各类问题在社会舆论中持续发酵，国家政策也开始关注中老年的互联网使用体验，推动各类APP进行适老化改造。2020年12月，工信部发布《互联网应用适老化及无障碍改造专项行动方案》。2021年3月11日，全国人大发布《十四五规划纲要》，明确提及“加快信息无障碍建设，帮助老年人、残疾人共享数字生活”，更是将信息无障碍建设上升到了国家顶层规划的高度。

 

为了更好地服务中老年人，百度在2021年上线了百度大字版和百度关怀版APP。对于中老年人来讲，视力老化是难以避免的问题。随着年龄增长，中老年人晶状体硬化、睫状肌衰弱，物体不能很好地成像在视网膜上，带来视觉上分辨物体的敏感度、色彩感、明暗感、空间感的下降。

 

但是对于中老年人而言，手机APP的字号、行距真的是越大越好吗？我们首先试图从现有标准中寻找答案。然而通过梳理，发现行业内已有标准主要是针对各类残障人士的，并且是原则性的建议，推荐的字号、行距的理想值过于宽泛，对手机APP适老化设计升级的指导意义比较有限。比如W3C发布的《Web内容无障碍指南（WCAG2.1）》，关于行距的要求是“至少为字体大小的1.5倍”。所以我们通过科学、严谨的研究，制定了一套设计标准，来指导资讯类/内容类APP全场景文字排版适老化设计升级，为中老年用户带去字里行间的关爱和更好的阅读体验。

下面就将从研究方法和成果两个方面做具体介绍。希望能帮助大家掌握相应的研究思路，在后续制定设计标准时可以快速上手，同时也将此次适老化设计标准研究的成果与大家分享，为资讯类/内容类APP适老化设计升级提供参照。

///

研究流程与方法：如何通过用户研究制定一套设计标准？

| 明确标准的应用方向

为了让一套标准对设计工作具备实际的指引价值，我们在研究规划环节充分考虑了设计经验和迭代需求。用户研究和设计师一起对资讯类/内容类APP所有涉及文字排版的页面、模块进行了通盘梳理，确定了12类应用方向（即用户的使用场景）。对于这么多使用场景分别做研究费时费力，我们选择通过洞察背后的用户阅读模式，把12类应用方向收敛为4大类阅读场景：3类主场景（包括长文阅读、搜索、概览阅读）和1类辅助信息场景。针对主场景，研究中老年用户理想的字号、行距和粗细组合；针对辅助信息场景，研究中老年用户的最小可辨识字号。这样研究既能覆盖各类应用场景、不同的信息层级，又能更聚焦、更高效。

| 构建评估体系

在确定了标准的应用方向之后，评估体系的搭建也参考了过往的设计经验。我们一方面查找并梳理了学术界在字号、行距方面的研究成果，另一方面也结合了百度已有的设计经验。最终确定了字号、行距、粗细、颜色四个考察变量在不同研究场景的研究范围（即自变量选取水平），并综合主观体验指标和客观眼动数据指标搭建了中老年阅读体验的评估体系。其中,主观体验指标包括关键信息发现、清晰度、舒适度、满意度；客观眼动指标包括眨眼频率、瞳孔直径变异性和阅读速度。

| 实验流程

在实验中，我们邀请了60位50-70岁中老年用户参与调研，通过任务模拟他们在真实场景的长文阅读、搜索、概览阅读情况，综合眼动实验、问卷调研和访谈方法评估不同字号、行距、粗细对中老年阅读体验的影响，探寻不同场景下最适合的字号、行距、粗细方式。在实验过程中，通过SMI-ETG2w眼镜式眼动仪测量眼动数据。

///

研究成果：适老化设计标准介绍

通过对各类阅读场景、设计变量和体验影响因子的充分分析，本研究形成了一套完备、成体系的适老化设计标准，可用于指引资讯类/阅读类APP中不同页面和不同信息层级的适老化设计改造。

| 主场景理想字号、行距和粗细的组合

研究结果明确了资讯类/内容类APP对于中老年人在不同场景里任一信息层级的理想字号、行距和粗细组合。以概览阅读场景（Feed列表页）和长文阅读场景（图文落地页）为例，优化前与预计优化后的字号、行距、粗细组合如下：

概览阅读场景

长文阅读场景

| 辅助信息最小可辨识字号

此外，研究结果也明确了黑色（1F1F1F）字体的全局最小可辨识字号。以75%中老年用户可以看清的字号作为最小可辨识字号标准，黑色（1F1F1F）最小可辨识字号为36px。

 

此次研究填补了学术界和业界在手机APP适老化设计领域的空白。在百度，该套标准已落地百度关怀版，未来还会在百度大字版和更多为老年人提供服务的APP上线。面向行业，我们也积极共享研究成果。百度大字版、百度关怀版运营同学牵头和老龄产业协会合作，设计师结合本次研究成果编写了《移动互联网应用适老化设计要求》团体标准，已经于2021年11月10日发布。希望本次的研究成果能帮助更多资讯类/内容类APP完成文字排版的适老化升级，为中老年人带去更多的关怀和更好的阅读体验，为移动互联网行业的信息无障碍建设贡献一份绵薄之力。

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

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

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

课题背景

今年，突如其来的疫情使儿童家庭学习成为重要学习场景，线上教育与家庭早教类产品的需求陡然增加。但线上教育和早教行业已然成为一片红海，数字化产品和服务的同质化严重，各大公司和厂商都希望形成差异化竞争，以在激烈的赛道中争得一席之地。目前，市面上的早教产品大都聚焦于儿童学习效率提升和内容丰富，却忽视了儿童对于早教类产品的真实体验与诉求。

MOMOUX设计团队致力于创造有温度的体验，主张将真实用户需求带入产品创新与研发流程，使用系统化的方法重构生活场景并发觉用户诉求，从而创造贴合用户的产品及体验，以解产品创新之困。

本期研究方法与策略

在研究中，MOMOUX团队基于VIP（Vision in design）研究框架，对现有的儿童早教学习情境进行解构与重构。

VIP设计方法框架包含三个关键流程：提取因素、构建情境、定义交互。VIP设计方法首先通过深度洞察对现有环境下的产品、用户、场景与体验进行系统化因素提取与解构；其次通过提取的因素重构出新的情境，最后在新情境下定义未来产品的交互方式、创造全新产品体验。通过深度洞察与研究，重新定义了未来儿童早教产品的四个创新情境和交互趋势，分别是：多孩互动、自然探索、拥抱屏幕、多元关系。

这四个情境反映了未来的儿童早教学习场景中，我们对人与人、人与物、人与环境之间关系的洞见，是我们根据真实用户情况对未来数字数代早教产品交互方式与情境的大胆畅想。希望此内容能给儿童早教行业带来一些不同的声音和启发，能够在数字化时代为儿童发声，回应数字化中儿童学习需求及市场发展的需求。

趋势一  多孩互动

国家统计局的数据显示：2019年全年国内新生人口1465万，二胎占比57%。 随着“全面二孩”政策的放开，不同年龄段的孩子们在同一个家庭中共同生活学习成长将成为设计师与产品开发者无法忽视的重要场景。 

What‘s going on？

调研发现，多孩家庭中照顾孩子的任务非常繁重。通常，一部分母亲会转为全职妈妈，爷爷奶奶等长辈分担部分育儿工作。

在家庭关系方面，“陪伴”是多孩家庭的重要育儿观念，父母会花更多时间与孩子相处。相较于第一个孩子育儿经验不足，父母已经能够游刃有余地抚育第二个孩子了。这时，父母会花更多精力协调两个孩子的关系。 

在多孩家庭中，通常两个孩子的年龄相差较大，不同年龄段的孩子在发育特征、表达、沟通方式及与产品的互动行为方面存在较大差异。 

一个典型的场景是6岁左右的大宝希望和3岁左右的二宝一起玩游戏，但是由于3岁孩子对物品的占有欲望强烈，总是抢东西，所以两个孩子无法一起好好玩耍和交流。所以针对低幼儿童的产品基本上很难适应6岁的学前儿童。但不论是家长还是孩子都希望两个孩子能够一起学习和玩耍。目前大部分产品在设计、使用方式上都只考虑了单人的互动方式。要解决此问题的关键是通过产品在孩子之间建立沟通的“媒介”。 

What‘s new？

学龄前儿童与低幼儿童的互动方式和操作习惯完全不同。要让两个孩子同时使用产品进行互动与交流，就需要产品本身的操作特性满足不同年龄段孩子的行为习惯与互动方式。

其中一个潜在的发展方向是融合AR技术的互动式搭建玩具。该类型的产品既满足了学龄前儿童需要的产品拓展性、多元化，也能在实体层面满足低幼儿童在感知运动阶段对于实体互动的需求。

OSMO Hotwheel MindRacers

Hotwheel ™ MindRacers将现实和虚拟赛车游戏结合在了一起。混合了多模态的交互方式，强调游戏过程中的竞技性与可玩性。在游戏过程中还加入了现实中的协作影响游戏进程的模块，通过互动游戏促进不同孩子之间的交流与沟通。

What‘s next？

未来，在多孩家庭互动情境下，产品除了 能满足人与物的交互问题外，还需要帮助不同年龄段的孩子更好地进行协作交流。产品交互方式不再是传统的一对一交互，而是拓展到一群年龄各异的孩子。参与体验的孩子们年龄虽然不一样，却都能通过产品的不同模块各尽所能地协作，完成同一个任务或目标。这样齐心协力完成同一件事的体验，也必将成为孩子成长过程中的 珍贵回忆。 

MOMOUX suggests

◆ 思考

• 何将多孩家庭的需求融入到您的业务版图中？ 

• 您的产品、服务可以通过何种方式介入多孩家庭的生活形态？ 

• 多孩家庭除了家庭场景外，是否还有其他场景需求？ 

• 孩子之间最理想的互动方式是什么样的？ 

◆ 讨论

• 讨论目标用户的时候，不要把家庭成员视为独立的个体去研究，而应该更多的从家庭关系层面审视用户的生活方式。 

• 对于儿童之间的关系，要注意不同年龄段儿童的差异而不是把他们混为一谈。留意不同年龄段的孩子是如何构建关系的。 

◆ 实践

在产品开发过程中，应当定义多样化的交互体验，探索多人互动情境的可能。同时，需要明确不同年龄段孩子对于产品体验的诉求、交互方式、偏好等。另外，开发过程中使用模块化设计与集成设计可能是一个明智的选项。 

趋势二  自然探索

传统的教育与学习活动通常发生在学校或者家中。随着城市文化活动设施日趋丰富，“户外教育”等新型教育观念的倡导，越来越多的家长倾向于在周末组织出行，这衍生出了丰富的户外亲子学习场景。

What‘s going on？

随着社会公共场所的公共教育属性的不断增强，家长们越来越重视周末休闲活动的文化属性。受访家庭表示，周末除了无目地的与孩子逛街之外，也会关注美术馆、博物馆推出的亲子公共教育活动与展览。科技馆、植物园、动物园等以亲近自然为主的场所也受到家长们的欢迎。 

在观察儿童户外活动时，我们也发现孩子喜欢将在家里使用的玩具、音箱等带到户外。产品只要有挂绳就有携带的可能，孩子就倾向于将产品带到户外。从心理学角度分析，一方面有满足虚荣心的因素，另一方面孩子在陌生的环境中也需要某种熟悉的“工具”去探索未知。 

不过目前的产品，只能实现产品特性的户外化，却没有实现产品体验的户外化。譬如产品增加了提手或吊环，孩子很容易将产品带到室外，但带到户外后的体验却是缺失的，比如产品屏幕在强光下无法看清。 

所以，孩子们在户外时，需要的是一件能真正与户外环境发生互动的产品。

What‘s new？

无论是从产品层面或是概念层面已经有厂商注意到了儿童户外产品使用场景。儿童数码相机已经悄然在公园与景区开始风靡。MITA - 小糖口袋相机通过塑造贴近儿童的设计语言与使用方式，创造了可以帮助儿童记录生活的数码相机。 

 MITA - 小糖口袋相机

Zigmo儿童户外玩具设计旨在帮助孩子安全地开启户外探索，设计了一系列产品帮助孩子更安全地与自然环境接触。 

 Zigmo儿童户外玩具

NewDealDesign 设计了一款基于 AI 的玩具 Spot，让孩子们愿意重新跑出门，爱上和大自然互动。本质是一款手持扫描仪与投影仪，可以帮助孩子识别自然中的物品并将其转化为图像储存在系统中。 

Spot design by NewDealDesign 

What‘s next？

学习本身是在大脑内建构概念的过程，而在自然环境中、孩子们可以通过自己的观察与探索建构自己对事物的认知。未来儿童将会在自然环境中自主学习，孩子们可以“师从自然”，通过产品的辅助更好地观察自然。这种学习方式将有效的补充课本灌输式的学习模式，孩子们的学习将越来越多地与自己的兴趣为主导，实现体能与心智的全面发展，激发孩子自身的好奇心与学习欲。 

MOMOUX suggests

◆ 思考

• 儿童产品的户外使用场景发生频率较低，需要思考户外环境产生的需求是否真的有机会转化为产品。 

• 儿童户外场景中存在多种影响因素，对于产品功能实现更加苛刻。如光照与声音效果会在复杂的户外场景下打折。 

• 户外本身就是孩子的游乐场，产品不一定是主角，产品的角色更像是一个工具去帮助孩子实现户外活动。 

◆ 讨论

• 在讨论孩子户外活动场景时，不要以大人的视角去“规定”孩子必须要做什么。多去和孩子沟通，了解孩子想要什么。 

• 孩子在户外非常好动，在产品设计的时候也需要考虑安全性，需要和家长讨论一下产品能否保障孩子的安全。 

◆ 实践

在户外产品的开发与创新过程中，需要将产品还原到真实的情境中去，校验产品是否真的符合情境下的体验需求。另外，在产品设计开发前，需要仔细研究相关的人因标准以确认产品在户外使用时的安全性与可靠性。 

趋势三  拥抱屏幕

数字化时代，儿童接触手机、平板电脑屏幕的年龄越来越小，使用频率越来越高，随之而来的是越来越多的屏幕使用场景。 

What‘s going on？

家长虽然担心使用平板电脑屏幕会对孩子的视力造成不良影响，却还是会因为购买了app课程而为孩子购买平板电脑。在调研中发现3-6岁儿童家庭中，平板电脑普及与使用率非常高。 

虽然大部分家长允许儿童使用平板，但还是会限制平板电脑的使用频率与时长。部分家长反映由于接触了碎片化的内容与短视频，孩子的情绪变得急躁，注意力涣散。所以对于产品内容的专业性、健康性是家长在购买产品过程中考量的最主要因素。 

What‘s new？

在线教育成为大势所趋，既然家长教师和学生都无法彻底拒绝平板电脑，就应该积极拥抱屏幕，并且思考如何让屏幕以一种更健康、更趣味的方式介入孩子的生活中。 

一部分厂商考虑从技术的革新方面改良孩子对于产品的使用习惯，推出了投影类产品。Marbotic Deluxe 学习套件包含一系列木制玩具，可与IPAD上的APP进行交互，从而帮助孩子学习和阅读和数字。孩子只要将单词“贴在”屏幕上，软件就会帮助孩子进行学习。 

Marbotic Deluxe 学习套件

What‘s next？

未来从技术层面，产品将与触屏技术深度融合，实体产品的体验与屏幕紧密的结合在一起，越来越多跨屏幕交互体验将被创造出来，孩子的注意力将更多地向屏幕外的真实世界转移。屏幕显示的内容将作为屏幕体验的一个辅助，从“沉浸于屏幕信息”向“沉浸于交互体验”的策略转化。 

孩子们不会只沉溺于屏幕交互的短暂满足感中，他们会越来越意识到，屏幕只是对真实世界的延伸于拓展，而真正重要的还是自己所处的实体世界。 

MOMOUX suggests

◆ 思考

• 屏幕不是洪水猛兽，开发产品的时候应该思考是否有更合理健康的内容来支持孩子于屏幕间的互动。 

• 如果没有内容资源对屏幕做支撑，可以考虑在产品互动形式上的创新，如投影、语音交互等。 

• 在设计产品时，大部分出发点都是让用户更沉迷，但是针对儿童的设计，产品需要在儿童成长中扮演一个更负责任的角色。 

◆ 沟通

• 需要更多地了解孩子需要屏幕做什么，互动过程中哪些过程是可以通过实体产品解决的，以及实体产品如何互动。 

• 可以多倾听母亲的声音，了解母亲对孩子习惯培养的希望，从而在孩子使用屏幕时更有效地对儿童的行为进行约束。 

◆ 实践

在儿童带屏产品开发过程中，需要优先考虑内容是否能于其屏幕进行有效适配，软硬件的多模态交互会很大程度影响产品的全局体验。在这个过程中需要尽可能地减少系统的BUG。在软硬件协同设计中，再小的问题都容易毁掉产品整体的体验。快速原型与渔网模型是开发过程中不错的选择。

趋势四  多元的家庭关系

家庭中孩子与家长的关系正随着技术的发展与生活方式的转变而发生微妙的变化。家长自身的角色定位也从与孩子一同成长的“陪伴者”朝着更加多元化的方向发展。 

What‘s going on？

社会结构和家庭结构的变化使得亲子关系变得越来越多元。有为了陪伴孩子而辞去现有工作，进入幼教领域给孩子更好教育的家长；也有在异国他乡出差而将孩子交给保姆、老人抚育的家庭……家庭关系多元化带来的是家长对自己的身份定位也越来越多元化。在调研过程中我们发现母亲在家庭关系中的定位从“施教者”转向了“引导者”。主要体现在：

• 与孩子沟通中更加尊重孩子的行为自主性，希望通过兴趣让孩子主动做喜欢的事情，以此来培养孩子的学习习惯，而不是一味地向孩子灌输。

• 母亲们也会主动地将部分家务工作分配给孩子，通过平等地共同体验来让孩子理解自己（自己是谁，母亲还是孩子）。

• 越来越多的家长意识到单纯通过陪伴儿童并不能完全解决成长中遇到的问题，而陪伴过程中的关系构建才是儿童成长阶段最关键的因素。 

What‘s new？

一些产品抓住了家长希望通过产品培养儿童良好习惯的需求，开发了介入日常生活场景、重构家庭关系的产品。产品帮助家长与孩子共同设立每日的生活与学习目标，当孩子完成目标之后，通过家长手机端确认任务，孩子按下硬件即可打卡签到领取相应奖励。帮助家长更好地督促孩子完成任务，形成更好的习惯。 

PUPUPULA 儿童学习打卡机

一款叫KITCHEN KIDS的儿童厨房装备让孩子能够更安全地承担厨房备菜的任务，让孩子在参与家务活动中体验到更多乐趣。 

Kitchen Kids 儿童厨房装备

What‘s next？

未来父母与孩子的关系势必向多元化的方向发展，家庭形态与成员之间的关系也将变得越来越多元化。简单的“大众”产品将很难满足日益细分化的家庭需求，产品的实体性也许在未来将越来越不重要，而能协同家庭硬件帮助家庭构建关系的服务将会赢得更多人的青睐。 

MOMOUX suggests

◆ 思考

• 在构建儿童与父母关系的过程中，最关键的因素是平衡父母与儿童的需求。从单一角度进行设计是无法创造成功产品的。 

• 在家庭关系的建构中，产品不一定以主角的形式呈现，产品更多地以一种沟通媒介的形式出现，帮助信息在儿童与家长之间顺畅地双向流动。 

◆ 沟通

• 需要多了解家庭场景亲子之间有什么主要的活动，参与者是谁、会遇到什么样的问题，这些问题如何去解决。 

• 需要了解未来亲子关系的发展方向，如何通过您的产品与服务去帮助家庭构建、巩固这种关系。 

 

◆ 实践

构建家庭关系的产品或服务需要同时考虑父母视角与儿童视角的体验，APP的设计过程中需要考虑儿童端与父母端的登录、权限与体验。 

总结

亲子家庭学习场景，在互动方式、场景、交互媒介、亲子关系构建方面都涌现出了新的趋势。产品经理与设计师需要结合真实用户在场景下的需求进行深入思考，才能设计出更加贴合未来场景与用户需求的产品与体验。

我们通过研究挖掘了儿童早教产品的新场景，建构了数字时代下早教产品的四种交互创新方式，反映了当下亲子关系、互动方式、教育观念等方面的变化趋势。这对于火热的儿童早教行业来说，或是开启早教产品新物种的开始。

 

对于设计创新来说，不论时代与社会如何发展，我们总是重新回归到情境中去探索、去发现。

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

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

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

在数字化的浪潮下，政府希望通过人工智能占据智慧城市的发展先机，推动民生改善及产业增长，这离不开政府和科技公司的紧密合作。因此，科技公司不仅面向To B型企业，同时面向政府或相关事业单位，即是称之为「To G」这种特殊划分。

鲲云科技（以下简称为鲲云）就是这样一类科技公司，他们作为一家技术领先的人工智能公司，以数据流技术为核心，提供高性能低延时、高通用性、高算力性价比的下一代人工智能计算平台和软硬一体化的平台解决方案，加速人工智能技术在智慧城市、智慧安监、智慧制造、自动驾驶等领域的落地。

01.表现层 

1.1 提升视觉精致度

当用户接触一个产品或物品的第一步，永远是外观视觉。固然，企业官网作为互联网产品，优质的官网必然是为它的用户有针对性地服务。虽然访客首先感受到的是网站的视觉设计，但我们不仅要对网站视觉美观与否有所重视，更好的访问体验、更实用的网站功能、更高的网站辨识度，以及通过视觉实现直观的价值传递表达，都需进行深度探讨。

网站呈现给访客的第一印象尤其重要，而网站首屏则会作为传递网站风格及功能的媒介。我们从鲲云的品牌设计理念出发，以直观的视觉形式来体现科技感。

首页Banner质感升级

一个视觉效果好的网站，80%以上是靠优质的图片支撑。我们首先在官网首页Banner采用产品渲染图来呈现鲲云核心产品。首屏的功能性常会被忽视，其实，企业官网附带着商业属性，商业环境下的视觉应该更注重强化产品，满足需求的产品力加持。

为了提升banner的视觉质感，我们对鲲云三款主打产品重新建模渲染，通过主要光源及补光掌握好产品形态，在将产品细节充分展现清晰的前提下，产品暗面加入环境光使整个画面更丰富饱满。

与此同时，完成产品渲染后结合了场景化的特殊版面来营造氛围，使整个画面更具真实感染力。这样一来，当访客来到鲲云官网，一个极具科技感和创造力的鲲云会给访客留下深刻的第一印象。

图标/Icon差异化升级

图标是比文字更容易理解的可视化语言，它对于信息传递十分高效，可以说图标将这个世界结合起来。鲲云图标体系由两部分构成，分别是UI icon和3D icon。

3D icon可帮助访客更简易、高效地理解鲲云两大核心技术的实际属性。UI icon拥有清晰、简洁单色线性的特征，其风格符合鲲云品牌气质，每个图标特征和细节保持一致，在视觉上呈现出更好的统一性。

我们提炼鲲云logo造型轮廓特征、以及根据产品和服务方向进行图形发散，提取鲲云品牌基因，进而使图标实现差异化设计。

1.2 交互动效细节

一个可以给人留下记忆点的网站，往往需要靠一个个精致到位的细节设计，做到让网站最终脱颖而出。可以说，细节是构建起整个设计的基本元素，细节不仅是细节。

科技类产品复杂度较高，只查看技术和产品概念往往会感到枯燥，如何做到直观呈现鲲云核心技术区别于普通技术，还能提升趣味性？

在首页接着往下呈现鲲云核心技术的第三屏中，我们应用柱状图结合交互微动效的方式，将鲲云CAISA芯片与普通芯片进行利用率、性能及延时三方面的对比。

当访客点击查看某一维度对比，可触发柱状图由下至上匀速的位置及渐变色变化，更直观地向访客表明鲲云此款芯片可提供更高的算力性价比的优势，同时引导访客注意力，加强访客与其互动链接。

在网站中较为常用且能保障性能的微动效有四个变化属性：大小、位置、旋转、透明度。这四个属性任何一种或是几种有所变化时，就能达到交互微动效的目的，如果再加入其它不必要的属性，则会影响动效的流畅度。

首页第四屏的四个核心产品展示中，移动鼠标放置各个产品版块触发的微动效，缓动的效果能让版块更自然顺滑，看起来十分舒服和谐，符合访客认知及预期。

1.3 文案升级

我们明确了鲲云官网文案语言要保证表述清晰明了、详略得当，直观地将产品信息及优势传达给访客，便于访客理解且能产生记忆点。

“

关于鲲云

提供下一代计算平台 加速人工智能落地

---------------------

核心技术

数据流创新架构 突破冯诺依曼瓶颈

---------------------

产品中心

自主芯片架构 成就领先的算力性价比

---------------------

应用案例

我们的技术已在多个行业实现规模化落地

---------------------

合作伙伴

携手共创人工智能新时代

”

我们见过不少企业官网文案，都喜欢用抽象的词汇来高度概括产品概念。在我们看来，佐证产品使用真实专业的语言搭配数据内容，可体现出产品专业性的同时，用更真实的力量打动访客。

1.4 移动端兼容

我们利用响应式网页设计构建网页布局，使页面能够更好地适配不同尺寸屏幕，进而使网页体验更适应用户的需求偏好。

02.引导层

官网建设需要遵循“不要让我思考”的原则，这是产品设计中广为流传的一句话。网站作为单向信息传播工具，我们难以左右访客的浏览行为。

我们需确定官网的层级结构，做好访客整体体验的宏观把控，让访客按照我们设想的行为去操作。我们除了必须满足访客基本浏览需求之外，更要主动展示企业核心竞争力的内容，这是最终实现增长的有效途径。

我们从用户分层入手，站在各个访客角色的角度进行审视，使得鲲云官网各版块页面设计上不同的展示区、功能区以及CTA按钮等充分满足访客想看到的信息需求。诚然，各版块信息内容之间存在价值等级，例如知乎的问答会占据首页较大的空间。

根据鲲云先有技术再有解决方案的底层逻辑，我们将鲲云「核心技术」板块放置在导航栏第一位，先有「核心技术」，再有「产品中心」，后有「解决方案」及「应用案例」。

路径1：「核心技术」页面关联「系列产品」

路径2：「产品中心」页面关联「应用场景」

路径3：「解决方案」页面关联「应用案例」

通过设计官网层级结构，结合对访客心智特点的思考和利用，让访客更多行为能够发生在直觉系统的判断中。当然，降低访客跳出率、建立起访客信任都在上述层级结构设计的考虑范围之内。

对于To B和To G产品，企业更看重的是产品本身能否为企业带来价值。鲲云的客户群体角色通常为多层级，他们会从性价比、效率提升、适配企业状况等多个维度进行筛选和考量，本质既是要优化客户效率，实现“降本增效”。

基于这一特点，我们在「核心技术」板块Banner图设计了下载白皮书的「 CTA 行动号召按钮」，并确保CTA颜色对比显眼且目标清晰。

03.品效合一

3.1 为SEM专设了专题页

基于鲲云SEM投放需求，我们专门设计了专属落地页——「解决方案」版块，将官网首页与该广告转化页分开，各司其职。

大家应该多少有听说过，我们可以通过FABE法则和AIDA模型等经典方法搭建出一个优质的网页框架。

一个落地页应该凸显对访客有利的信息，当访客来到广告转化页时，如何快速获得想要的信息，并为他们建立起对鲲云产品的价值认同进而实现转化，这时就需重点打造信息分层。

整个页面采用相对清晰简约的视觉设计，围绕「解决方案」这一核心有层次地规划整个布局及各信息点优先级。页面Banner作为门面，也是整个页面氛围的关键所在，我们将重点信息突出，文案传达简洁有力，图片素材的选取兼顾了鲲云品牌形象，整个页面的营销属性做到尽量弱化。

3.2 转化入口

访客浏览页面时，不一定会经历完整转化过程才会转化，我们设计了及时的行为号召入口，帮助访客在某一节点做出行动时，实现快速转化：

1. 咨询弹窗
2. 右侧悬浮商桥
3. 解决方案资料下载
4. 底部「立即体验」入口

......

行业特性指导整站设计

鲲云面向的客户群不仅是面向To B，同时面向从To B衍生出To G这一种特殊划分。基于这一行业特点，我们在整站设计中有更多精致度和可视化的思考，它不需要五花八门的Banner、会员体系以及炫酷的交互动效。

我们只需要让访客“惯性”操作，制定更符合人性的策略来指导设计，让访客按照我们设想的行为去操作，这是最终实现增长的有效途径。当然，提高转化率是我们引导设计的主要目的之外，降低访客的跳出率、建立起访客信任都在我们网站引导路径设计的考虑范围之内。

增长超人为客户做的从来都不仅仅是一个网站，而是为企业提供从营销策划到落地的一整套互联网解决方案。网站只是一个载体，我们真正的价值在于能够帮助企业找到正确的竞争优势，扭转高成本低转化的现状，实现营收增长。

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

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

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