亚马逊作为一个知名的电商平台，它的成功背后却有一个很难让人理解的设计逻辑：成功的设计不一定是美观的。为什么会这么说呢？本文将从四个维度展开分析，希望对你有帮助

编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。

一、表单的定义

表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。

二、表单的设计原则

设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。

针对互联网表单设计，我倡导的原则如下：

1. 尽量减少痛苦；
2. 说明填写完成路径；
3. 考虑情境；
4. 确保一直沟通。

三、表单的结构

我们先看看表单的结构，表单主要由5部分组成：

1. 标题：这个元素帮助用户引导完成表单填写的整个过程，尤其在你对信息进行分组方便用户填写时，特别有用。
2. 标签：告诉用户相对应的输入字段的含义。
3. 输入域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
4. 提示信息：包含帮助信息、占位符和反馈信息提示。
5. 操作按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

四、表单的表现形式

1. 标签

标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。

1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。

顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。

• 优点：有最快的浏览和处理速度，同时标签长度弹性大。
• 缺点：非常占纵向空间。

2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。

浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。

左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。

此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：文字开头按阅读视线对齐，方便阅读，节约纵向空间。
• 缺点：填写速度慢，标签长度和输入框弹性小。

3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。

对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。

与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：时间较短，节约纵向空间。
• 缺点：整体可读性低，标签长度和输入框弹性小。

4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。

内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。

另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。

• 优点：空间占比小。
• 缺点：在增加错误的可能性。

5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。

但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。

此外，输入项一多，还得记忆那个图标所对应的意思。

• 优点：空间占比小；在一定程度上缓解用户的困惑和自我怀疑。
• 缺点：可能造成用户的认知负担，增加用户记忆成本。

6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。

但相比其他几种标签样式来说，需要一定的开发成本。

• 优点：空间占比小，无需用户对标签进行记忆
• 缺点：需要一定的开发成本

关于标签样式的选择

2. 输入域

输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。

选择适合的控件样式，能在一定程度上提高表单填写的效率。

在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。

1）文本框

文本框包含了单行文本框和多行文本框。

针对单行文本框的设计建议：

a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

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

b. 采用字段掩码，自动匹配特定数字的输入格式。

例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。

c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。

d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。

e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。

例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。

f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。

知识扩展：什么是7加减二法则？

早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。

针对多行文本框的设计建议：

使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。

固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。

2）选择框

包括下拉列表、选框、开关、日期选择器等。

对于选择框有如下几个建议：

a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。

为什么？

因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。

但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。

例如：根据定位数据预先选择用户所在的国家/地区。

不过，请谨慎使用。

b. 当选项很多时，提供检索功能。

c. 提示信息要明确，要让用户明确自己选择的是什么。

3）单选框与复选框

a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。

b. 选项应该易于理解，容易区分。

c. 尽可能提供默认选项。

4）关于控件的选择

a. 选择框优于输入框。

任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。

• 一方面：简化用户的操作，点击次数远小于输入，减少用户的操作密度；
• 另一方面：减轻用户的认知、记忆负担。

相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。

用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。

b. 单选框与下拉选择框。

单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。

另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。

因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。

下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。

若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。

5）关于必填项

大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。

但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？

它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。

为了避免这种误解，可采用文本框内暗提示。

它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。

3. 提示信息

提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。

这里主要想讲讲错误提示的设计：

1）关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。

错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。

它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。

因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子，如下图：

当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢？

答案是：右边。理由如下：

a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。

放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。

但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。

b. 对于上边的错误信息提示，有着更高的认知负荷。

当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。

c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。

虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。

综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。

当然，如果开发时间有限，都选择放置下边也可以，方便适配。

2）帮助信息

有时候需要帮助性信息，来辅助用户完成表单填写。

当文本简短的时候，可以直接放在改输入框的附近。

当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。

也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。

如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。

五、复杂业务表单布局结构探索

在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：

• 客户1：“单列右侧空白区域过大，留白多，表单太长啦。”
• 客户2：“单列纵向占比大，表单太长，我看不到全部内容。”
• 客户3：“怎么不采用多列，多列我能看的内容多啊”等等…

针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。

1. 多列与单列的探索

首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：

方案一：采用4列布局，标签顶对齐。

那为什么标签不采用右对齐呢？

四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。

总体上来看，缩减的长图并不理想。

方案二：三列布局，标签右对齐的方式。

由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。

但字段若出现换行，则页面信息模块是混乱的。

根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。

同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。

综上，最后还是采用单列布局。

2. 单列布局在复杂业务中运用

面临的问题该如何解决？

我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。

我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。

如果是这样，用户的本质述求就是想要掌控感。

对现有的单列布局做了以下几个处理：

• a. 采用卡片式布局，区分内容；
• b. 增加引导式的定位锚点；
• c. 在锚处加入微动效反馈，给予用户确定感。

感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。

文章来源：人人都是产品经理           作者：@Nick 

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

编辑导读：如今，谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”，用于衬托一些喜庆的、重要的高光时刻，它们常被用来激起用户的情感，或烘托一种喜悦的气氛，从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds：庆祝用户进行了某项操作；欢迎用户使用新的应用程序或体验；确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到，Hero sounds出现的次数不应该频繁，否则无法突出其重要性。通过在同样的环节提供同样的声音，久而久之用户会将这种提示音与成就感挂钩，从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音，或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点，我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音，还是MacBook的废纸篓在清空时发出的揉纸的声音，都在某种程度上影响着我们的情绪，也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用，也可以单独使用。举个例子，在手机黑屏的时候，触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时，触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外，触觉设计（如震动）也是一种刺激感觉的好方法，可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后，我们将会对产品的某些功能有更加深入的了解。

举个例子，如果某个用户通过APP进行付款，但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动，对用户进行错误反馈。当用户熟悉了这种震动模式之后，下一次再感受到这种震动，就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块，而过度专注于画面。但这两个板块却也扮演着非常重要的效果，可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感，在互动中为用户增加个性化体验，也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素，这是一款运动追踪APP，是为那些追踪自己生活习惯的用户设计的。在设计这款产品时，我希望可以为用户创造出一种满足感，鼓励他们培养好习惯。在这款APP中，我大量使用切换功能，通过不同的手势，界面或进程可以平滑过渡，使用起来非常便捷。当一个好习惯完成时，还会出现彩屑动画飞舞的，加强用户的满意度。

简言之，动图可以应用于不同的场景，通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系，实现快速切换，迅速解决特定的任务。动图可以让用户专注于眼下最重要的事，不被其他因素所干扰。——《谷歌手势设计指南》

在2020年，你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《用户体验设计中动画使用的终极指南》中指出的那样：“众多研究发现，界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别，而超过1秒的动画则会造成一种延迟感，让用户感到不舒服。”

通过动图及产生的动画效果（如切换）可以改善用户体验，同时保证可以迅速找到需要的版面，而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间，又不能改善体验，那么这种环节就没有必要存在。

8. 通过图像进行交流，并区分和突出产品特性

图片来自Bribble｜制图Elena Petkovska

我们或多或少都有这样的体验：打开一个界面，里面充斥着太多文字和太少的图像。在用户体验设计中，展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品，而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点，不管是用户自己上传的图片，专业摄影师的图片，还是插画风格的图片，它们都应该能直观展示产品外观，反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要，好的图片可以让用户界面更加生动，使用户体验更加完善。恰当的图片还能展示品牌风格，成为无声的“故事讲述者”。

我们应当有目的地使用图像，作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息，如产品外形、风格，APP的用途，状态等。媒体界有这么一句话：一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度，让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度（PPI）是用来衡量每物理英寸的像素数。另一个常用的单位是DP（Density-independent pixels，有时候简称为DIP）。像素密度=屏幕宽度或高度（以像素为单位）/屏幕宽度或高度（以英寸为单位）。

在设计界面时，我们不应该只关注像素，还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放，以适应不同屏幕的尺寸。

举个例子，我们现在有一个按钮素材资源，大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示；在一个320ppi的屏幕上它就会扩大成400 x 100 px，相当于原始素材的两倍大。

通过以上例子我们可以了解，在像素密度不同的屏幕上，素材呈现的状态是不一样的。在实际应用中，素材可以会被放大三倍甚至四倍，如果素材不够清晰，就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎，尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸？举个例子，iPhone XS Max的屏幕是414 x 896 pt，注意这里的尺寸是物理尺寸pt，而非像素。如果以像素为单位计算，那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时，我会首先考虑用414 x 896 pt的素材，然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用，你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用，但是在能联网的时候，最好还是主动提示用户，推荐他们连接网络。

如果有可能的话，要提前告知用户下载相关信息，以便脱机访问。最常见的例子就是Spotify等音乐应用程序，它允许用户下载歌曲，以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容，你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子（在谷歌浏览器连网的过程中，离线画面会出现一只霸王龙，按空格键或者向上的箭头就能控制霸王龙——译者注）。这个小游戏填补了用户等待连线的时间，将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外，我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导，在这一领域进行更深入地探索。

文章来源：人人都是产品经理           作者：Danny Sapio           译者：Michiko

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

编辑导读：如今，谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。

1. 通过图标和动画传达意思

图片来自Material

在没有其他方法的情况下，图标可以成为理想的指示工具。——《谷歌材料设计指南》

在《Design of Everyday Things》一书中，有“以人为本的设计之父”之称的唐·诺曼（Don Norman）阐述了他对图标的理解：图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中，我们很少会出现“左滑-删除”这样的文字指示，而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。

在用户和产品交互之前，插入动画效果。——《谷歌材料设计指南》

如果我们希望一款数字产品有着极简主义外观，那么我们可以借助动画来达到这一点。在上图的例子中，最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后，也就是人机交互的动作产生之后，才会出现这一垃圾桶，同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。

2. 有动画效果的图标

图片来自Medium｜制图Eddy Gann

动画可以展示图标所代表的执行动作，从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标，可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》

在两个动作之间增加一个过渡的动画，这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后，该图标变成了暂停按钮；点下暂停按钮，该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。

这只是一个简单的案例。现在想象一段更加复杂的经验：比如将某个产品添加到购物车中，购物车图标会出现装进货物的动画效果；或者想象某一功能无法使用时图标的弹出效果。

带动画效果的图标本身并不复杂，我们可以在Adobe XD中完成：通过给图标添加预设效果，或者加入淡入、淡出的效果即可。

动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小，却是影响用户体验非常重要的一环，我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》

请记住，如果界面上所有的元素和图标都在动，那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。

3. 调色板的生成和使用

调色板生成工具｜图片来自Medium

调色板生成工具（Material’s Palette Generator）可以调出任何你需要的颜色，色相，亮度，色度等都可以通过一系列算法调节出来，通过算法调出的色彩实用又美观。——《谷歌材料设计指南》

如果我们无法使用谷歌的调色板生成工具，手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态（如蓝色从暗到明、从深到浅的形态），你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具，你也应该仔细检查并矫正自己的调色工具。

4. 颜色

• 在考虑如何使用颜色或颜色相关的问题时，指南中还提供了给界面选色相关的技巧和工具。——《谷歌材料设计指南》
• 选择令人难以忘记的色彩，以增强产品的品牌风格。——《谷歌色彩设计指南》

颜色对于数字产品的重要性，就像是盐和胡椒粉对吐司的重要性一样——添加太多了，就盖过了吐司自身的风味；太少了，味道就会变得寡淡。在选择配色以求增加品牌视觉效果时，一定要仔细考虑清楚给哪里添加什么颜色。

通过有节制地在APP里添加颜色，你还可以突出相应的内容，如文本、图片、按钮等。你可能已经注意到了，Instagram和Twitter上面布满了色彩鲜艳的图片和图标，与之相对应，它的用户界面非常简洁，不会喧宾夺主。

色彩也可以是一种交互元素，要考虑它们在什么地方交互，希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》

当一个元素的色彩与周围环境形成对比时，用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”，这个概念是说增加色彩的饱和度，使用更加大胆、更吸引人的色彩，制造视觉冲击。

另外，我们可以将重要的信息加粗显示，让它在第一时间进入用户的眼睛。简单来说，如果一种信息比另一种信息更重要，那么前者就要在色彩和篇幅上胜过后者，好让用户直观地进行区分。

5. 文字类型生成工具

文字类型生成工具｜图片来自Medium

Google Fonts是谷歌研发的一款文字类型生成工具，可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》

字体设计是一门艺术，它不仅关乎选择某一种具体的字体，更设计如何使用、粗细调节、比例调节等，目的是增加界面的可读性，从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具，可以节省时间，迅速生成段落、标题、正文、按钮等。

文章来源：人人都是产品经理           作者：Danny Sapio.    译者：Michiko

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

如今，很难用界面动画给人留下深刻的印象甚至惊喜。它显示了屏幕之间的交互，解释了如何使用该应用程序，或者只是引起用户的注意力。在浏览有关动画的文章时，我发现几乎所有的文章都只是描述了关于动画的特定的用例或一般事实，并没有遇到任何关于界面动画通用规则的文章。在本文中我收集了界面动画的主要原则和规则，以便给想要设计动画界面的设计人员提供一些帮助。

01 动画的持续时间和速度

当元素改变它们的状态或位置时，动画的持续时间应足够慢，以使用户可以注意到变化，但同时也要足够快，以免引起等待。

在动画中使用适当的持续时间，不要太快，更不要让用户过长等待

大量研究发现，界面动画的最佳速度在200-500毫秒之间。这些数据是基于人类大脑的特殊性得出的。任何小于100毫秒的动画都是瞬时的，根本不会被识别。而超过1秒的动画时长会传达延迟感，因此对用户来说很无聊。

最好在界面中保留动画的持续时间

在移动设备上，《材料设计指南》还建议将动画的持续时间限制在200-300毫秒之间。至于Web端，持续时间应延长30％，大约为400-450毫秒。原因在于：屏幕尺寸越大，物体在改变位置时可以克服的路径更长。因此，在可穿戴设备上，持续时间应缩短30％，大约为150-200ms，因为在较小的屏幕上，移动距离更短。

移动设备的大小会影响动画的持续时间

Web动画的处理方式有所不同，由于我们已经习惯了在浏览器中即时打开网页，所以我们希望也能在不同状态之间快速转换。因此，Web转换的持续时间应比移动设备短约2倍，150-200毫秒之间。在其他情况下，用户将不可避免地认为计算机死机或网络连接出现问题。

但是，如果你要在网站上创建装饰性动画或试图吸引用户对某些元素的关注，则无需考虑这些规则。在这些情况下，动画可以更长一些。

大屏幕电脑=慢动画？决不是！

需要记住的是，无论平台如何，动画的持续时间不仅取决于移动距离，还取决于对象的大小。更小的元素或带有小变化的的动画应该移动得更快。因此，大而复杂元素的动画在持续时间稍长的时候看起来更好。

在相同大小的移动物体中，停下来的是经过最短距离的物体。与大物体相比，小物体移动得更慢，因为它们的偏移量更大。

动画的持续时间取决于对象的大小和移动距离

当物体碰撞时，根据物理定律，碰撞的能量必须均匀分布在物体之间。因此，最好排除反弹效应，只在特殊情况下使用它才有意义。

避免使用弹跳效果，因为它会分散注意力

物体的运动应该是清晰和锐利的，所以不要使用运动模糊。即使在现代移动设备上也很难再现这种效果，并且根本不用于界面动画中。

不要在动画中使用模糊效果

列表项(新闻卡片、电子邮件列表等)在其出现之间应该有一个很短的延迟时间，每次出现的新元素应该持续20-25毫秒。元素出现较慢的话可能会惹恼用户。

列表项的动画应持续在20–25毫秒

02 缓和

缓和有助于使物体的运动更加自然，这是动画的基本原则之一。这一点在《迪士尼动画原则》(The Illusion of Life: Disney Animation)一书中得到了充分的描述，这本书是由两位重要的迪士尼动画师——奥利·约翰斯顿和弗兰克·托马斯所写。

为了使动画看起来不显得机械和人造，物体应以一定的加速或减速的方式移动，就像物理世界中的所有活动对象一样。

与线性动画相比，具有缓动效果的动画看起来更自然（这里提示下：注意看每段竖格的间距）

2/1 直线运动

不受任何物理力影响的物体直线运动，换句话说就是匀速运动。正因为如此，它们看起来非常不自然，对人眼来说是人为的。

所有动画应用程序都使用动画曲线，我将尝试解释如何阅读它们以及它们的含义。曲线显示了物体的位置( y axis=position )在相同的时间间隔内物体的位置如何变化(x axis=time)。在当前情况下，运动是线性的，因此物体在同一时间行进相同的距离。 

直线运动曲线

例如，直线运动只能在物体改变颜色或透明度时使用。一般来说，我们可以用它来表示物体不改变其位置的状态。

2/2 缓入或加速曲线

我们可以在曲线上看到，在开始时物体的位置变化缓慢，而速度则逐渐增加，这意味着物体正在以一定的加速度移动。

加速度曲线

当物体以全速飞出屏幕消失时，应使用此曲线，比如说系统通知或者是界面卡片。但请记住，只有当对象永远离开屏幕且我们无法调用或返回它们时，才应使用这种类型的曲线。

将卡片滑出屏幕的加速曲线

动画曲线有助于表达正确的情绪。在下面的示例中，我们可以看到所有物体的移动持续时间和距离是相同的，但是即使曲线上的微小变化也可以影响动画的气氛。当然，通过改变曲线，你可以使物体尽可能地接近于真实世界。

持续时间和距离相同，但却是不同的氛围

2/3 缓动或减速曲线

它与缓入曲线相反，因此物体会快速覆盖很长一段距离，然后缓慢的降低速度，直到最终停止。

减速曲线

当元素出现在屏幕上时应使用这种类型的曲线——它以全速向上飞入屏幕中，然后逐渐减速直到完全停止，这也可以应用于从屏幕外部出现的其他卡片或对象。

减速曲线，使动画更好地呈现

2/4 缓入缓出或标准曲线

该曲线使物体在开始时获得速度，然后慢慢地将速度降回零。这种类型的移动是界面动画中最常用的。当你犹豫在动画中使用哪种类型的运动时，可以使用标准曲线。

标准曲线

根据《材料设计指南》，最好使用非对称曲线，使移动看起来更加自然和真实。曲线的末端必须比它的开始更加突出，以使加速的持续时间短于减速的持续时间。在这种情况下，用户将更加关注元素的最终移动，从而关注元素的新状态。

查看对称和非对称标准曲线之间的区别

当对象从屏幕的一部分移至另一部分时，使用缓入缓出功能。在这种情况下，动画避免了引人注目的戏剧效果。

卡片在屏幕上的移动以及相应的不对称曲线

当元素从屏幕上消失时，应该使用相同的移动类型，但用户可以在任何时候将其返回到先前的位置。它涉及抽屉式导航等。

抽屉式导航从屏幕上隐藏了标准曲线

从这些例子中可以看出，许多初学者忽略了一个基本的规律——开始动画并不等于结束动画。与抽屉式导航一样，它以减速度曲线出现，而以标准曲线消失。另外，根据谷歌的材料设计语言，物体出现的时间应该更长，以吸引更多的关注。

侧面菜单的出现和消失，分别通过减速度和标准曲线实现

使用函数cubic-bezier()来描述曲线。之所以称为立方，是因为它基于四个点。在图上已经定义了具有坐标的第一个点0;0（左下）和具有坐标的最后一个点1;1（右上）。 

基于此，我们仅需描述图形上的两个点，这些点由函数的四个参数给出cubic-bezier()：前两个是坐标x和y第一个点，后两个是坐标x和y第二个点。 

为了简化曲线的工作，建议使用easings.net和cubic-bezier.com网站。第一个包含最常用曲线的列表，你可以将其参数复制到原型工具中。第二个来源使你可以使用曲线的不同参数，并立即查看到物体将是如何移动的。

函数三次贝塞尔曲线的不同类型的曲线及其参数

03 界面动画中的编排

就像在芭蕾舞蹈设计中一样，主要思想是在从一种状态转换为另一种状态的过程中，引导用户注意一个流动的方向上。舞蹈编排有两种类型——平等交互和从属交互。

3/1 平等交互

平等交互意味着所有对象的外观都遵循一个特定的规则。在这种情况下，所有卡片的外观都被视为一种流程，可以引导用户的注意力集中在一个方向上，即从上到下。如果我们不按照顺序，那么用户的注意力将会分散。所有元素同时出现看起来也会很糟糕。

用户的注意力应引导在一个流动的方向上

对于表格视图，它有点复杂。在这里，用户的焦点应指向对角线，所以逐个地显示元素是一个很糟糕的主意。单个展示元素会使动画过长，并且用户的注意力会呈锯齿状，这是错误的。

卡片形式的对角线外观

3/2 从属交互

从属交互意味着我们要有一个吸引用户注意力的中心对象，而所有其他元素都从属于它。这种类型的动画给人一种有序的感觉，从而引起用户对主要内容的更多关注。

在其他情况下，用户将很难知道该关注哪个对象，因此他的注意力将被分散。所以，如果有多个要设置动画的元素，则需要明确它们的运动顺序，并尽可能将动画设置为最小的对象。

只有一个中心对象的动画很有必要，其余元素应是被引导的。否则，用户将不知道关注什么对象

根据材料设计语言，当移动的物体尺寸发生不均衡变化时，它们应沿着弧线而不是直线移动。这有助于使动作更自然。“不成比例”是指物体的高度和宽度的增加/减少是不对称的，即以不同的速度进行(例如，一个正方形的卡片变成了一个长方形)。

当移动的物体不按原有比例变化时，应沿着弧线运动

当物体按比例改变其大小时，使用沿直线的移动。由于这种移动的实现比较容易，因此通常会忽略不成比例的圆弧移动的规则。看看实际应用的例子，你会看到线性运动的主导地位。

尺寸的比例变化是沿着直线上运动的

曲线上的运动可以通过两种方式实现：第一种称为垂直向外——物体开始水平移动并以垂直移动结束；第二种是水平向外——物体开始垂直移动并以水平运动结束。

物体沿曲线的移动路径必须与滚动界面的主轴线重合。例如，在下一张图片上，我们可以上下滚动界面，相应的卡片以“垂直输出”的方式展开-首先从右到下，然后向下。反向移动以相反的方式进行-即卡片首先垂直上升，最后水平移动。

卡片的展开/折叠方向应与界面的轴线一致

如果移动物体的路径彼此相交，则它们将无法彼此移动。这些物体应通过减慢或加快自身的速度，为另一个物体的移动留下足够的空间。另一种选择-他们只是推开其他物体。为什么？因为我们假设界面中的所有物体都位于一个平面中。

在移动过程中，物体之间不应相互穿过，而应为另一个物体的移动留下空间

另一种情况，移动物体可以高于其他物体。但也不能通过其他物体消失或移动。为什么？因为我们相信界面元素的行为符合物理定律，现实世界中没有任何固体物体能够做到这一点。

物体可以超越其他物体，然后移动

结论

从以上总结的规则和原则能明白，UX界面动画是反映物理世界中存在的运动，如摩擦、加速等，模仿现实世界存在的行为。我们可以创建一个序列，让用户能够理解期望从界面得到什么。如果动画是正确构建的，那么它不会太引人注目，并且不会分散用户的目标，动画不应该影响用户使用或完成任务。

但是不要忘记动画更多的是一种艺术而不是科学，所以最好的方法是在用户身上试验和测试你的决定。

文章来源：站酷    作者：UX辞典

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

本文将针对酷家乐旗下云端建模工具——酷大师所做的可用性测试，说明工具型产品如何去做可用性测试。

打造一款产品的过程中，我们需要时刻保持警惕：功能是否满足用户核心需求？交互流程能否做到简单流畅？是否还有未知领域可以由用户带来启发？进行一次准备充分的可用性测试，无疑是解答上述问题快捷有效的方式。

下面我将结合本次针对酷家乐旗下云端建模工具——酷大师所做的可用性测试，说明工具型产品如何去做可用性测试。

准备阶段

第一步：明确测试目的

测试目的不同，安排的测试任务就不同，进而就会影响最终得到的结果。所以测试之初需要考虑清楚测试目的。国际标准化组织在人体工程学设计的人机交互部分（ ISO9241） 把b2可用性c 规定为 3 个指标：

• 有效性：用户使用该系统完成任务的精度和完整性；
• 效率：用户使用该系统完成任务需要耗费的资源；
• 用户满意度：用户对该系统的舒适度和认可接受程度。

结合这3个指标，我将本次测试目的设定为：

• 了解用户对酷大师现有主流程的使用现状；
• 了解用户对酷大师的体验满意度及需求满足情况。

第二步：确定测试时间和环境

测试时间：

• 测试准备时间：建议为期2天。准备相关文档、设备、场地、任务等。
• 用户测试时间：建议为期3-5天。可短时间内容集中进行用户测试，或在工作日穿插进行测试。
• 结果整理时间：建议为期5天。用于整理测试信息、落实产品迭代任务、撰写总结报告等。

测试环境：

• 线下环境：邀约用户到公司办公室现场测试；
• 线上环境：考虑到用户路程及时间等限制性因素，也可在线上进行测试。

第三步：安排测试设备

• 操作设备：取决于目标用户群体主要使用的设备，假如用户都使用ipad，就要将ipad列为主要操作设备。
• 录音设备：测试结束后需要进行详细的信息整理，录音资料可以帮助回忆沟通内容。可使用手机自带录音功能或专业录音笔。录音前必须告知用户，在征得许可后方能进行录音。
• 录屏设备：工具型产品的操作过程中涉及很多细节，录屏资料可以帮助工作人员进行问题定位。可使用电脑自带录屏功能，或录屏工具。
• 远程设备：由于部分用户需在线上测试，可使用在线工具进行远程协作，比如：zoom、腾讯会议等。
• 记录本和笔：测试过程中进行表格填写时需要使用。
• 文档资料：主要包括测试过程中需要填写的表格。建议打印n+2套，n是测试样本数量，另外2套备用。
• 场地准备：提前预约会议室，给用户独立的操作环境。
• 测试酬劳：具体可根据公司政策进行准备。

第四步.邀约测试样本

Nielsen在理论中认为5-8位用户可以测试出85%的可用性问题，实践下来确实如此，样本数量建议控制在这个范围。

在同一个产品的用户中，新手用户、永久的的中间用户、专家用户这三类角色通常是共存的。我们需要让新手用户快速和无痛苦地成为中间用户；避免为那些想成为专家的用户设置障碍；最为重要的是，让永久的中间用户感到愉快，因为他们的技能将稳定地处于中间层。

本次测试中，我尽量使样本中包含这3类用户，比例为2：3：3。测试之后，就可以大概知道对于不同类型用户来说，产品可用性和

易用性情况，也可以得到多维度差异化的反馈。

第五步：设计测试文档

测试中需要使用一些管理用户信息或记录用户反馈的表格，在准备阶段就要做好表格设计和打印工作。下面是具体的表格，可根据具体需求做相应调整。

《用户信息&排期表》

在这张表中管理测试用户信息b2姓名、职业c 、测试安排「时间、地点」、测试工作人员「主持人、观察员」。一场测试尽量安排一位主持人和一位观察员作为工作人员相互配合。

主持人负责与用户沟通互动，推进测试进程；观察员负责设备和资料保障，以及测试过程中的行为观察和记录。一个人独自承担主持人+观察员角色的话，在用户反馈密集而现场又出现临时状况时就会手忙脚乱，所以建议两个角色分工协作。

《用户基本信息问卷》

在这张问卷中可以设计与产品相关的用户基本信息问题，问卷设计原则为：

• 关联性：与需要测试的内容相关；
• 层级性：问题层级依次递进，使用户回答问题时能够思维连贯，由浅入深；
• 隐私性：尽量避免涉及用户敏感信息，必须涉及时需解释原因，尊重用户意愿。比如有些用户不愿透露年龄、收入等信息。

这张问卷使用在线工具呈现，比如腾讯问卷；也可现场打印纸质问卷进行询问填写。大多数用户比较喜欢现场填写。

《单任务满意度问卷》

测试过程中，我们需要让用户完成一个完整任务，该任务需要拆解成若干单任务。在每个单任务结束后，立刻对用户进行该单任务的满意度询问。

《SUS系统可用性量表》

用户结束完整任务后，填写该量表。该量表由10个题目组成，包括奇数项的正面陈述和偶数项的反面陈述。在结果整理阶段，我们再对该量表进行分值计算。

第六步：规划测试脚本

从开始到结束，需要主持人将整场测试的各个环节串联起来，引导用户操作，推动测试进程向前发展。为防止意外状况出现，可以预设测试脚本，规划情境和话术，并在预测试环节验证及优化该话术。

比如可以这样开场：“首先非常感谢您今天能来参加我们的可用性测试，我是主持人XXX，这位是观察员XXX。我们这次是对酷大师建模工具进行可用性测试，想了解您使用时的体验和感受。

在这里需要强调的是：我们测试的对象是工具，而不是您，所以您不必感到紧张……当您使用工具时，我们会观察和记录。今天的测试大概需要一个小时，测试过程中会有休息时间。测试过程中，请您将手机保持静音状态……“

比如可以这样进行两个单任务环节串场：“好的，我们已经完成了第一个单任务。现在有一份简单的问卷，填完后可以稍微休息一下。

「出示问卷，并作简要填写说明」「问卷完成后进行简单访谈，用户也稍稍休息后继续」现在，我们开始进行第二个单任务「要清晰且大声地说出这句话，以“鼓励”测试参加者和提示记录人员」……”

具体话术依据需要测试的内容和情境展开，尽量做到专业、友好。

第七步：设计测试任务

可用性测试往往带有一定目的性，而这些目的能不能达成，取决于任务与目的的关联性以及用户是否能够给到对应反馈。通常，测试用户是愿意给予反馈的，那么测试任务的设计就成为整个准备阶段最重要的环节。

做好测试任务的设计和拆解：需要具备从全局高度理解产品的能力；需要知道产品全链路的过去起源、现状细节、未来走向；需要把控重点，拎出骨架；需要去繁就简，以较少的任务成本测出最有价值的信息。

本次测试中，我设计的主流程是：模型创建——材质铺贴——模型渲染——模型发布——模型分享，并且我还希望测到拉伸、阵列、组编辑、移动、旋转这样的主功能。所以我将这两块有机结合，给到用户创建一个「楼梯踏步模型」的任务。

我将任务按照主流程拆解为5个单任务，主功能分布到其中几个单任务中，且尽量做到两个单任务中不重复使用同一个主功能。

预测试阶段

大多数产品都存在一些限制因素导致的尚未解决的已知问题。这些问题在测试中出现的话，会转移用户注意力，削弱本次测试的价值，偏移本次测试的目的。

另外，我们准备阶段进行的种种规划也需要得到验证。结合这两个原因，正式测试之前建议进行内部的用户预测试。找出并修复测试环节中的漏洞，准备好各类突发状况下的planB，以及修复影响正式测试的已知问题，提高正式测试的执行效率。

正式测试阶段

第一步.测试开场，填写《用户基本信息问卷》

本次测试是在工作日穿插进行8场一对一用户测试。这样可以放缓测试节奏，在两场测试间隙有充足时间简单整理上一场收集的信息，与下一场用户确认测试安排，以及对突发状况及时处理。

正式开始前半小时，观察员需确认设备都已调试妥当，资料都已打印完成。主持人可与用户进行联系，带领用户进入测试场所。主持人可以通过填写《用户基本信息问卷》了解用户基本信息，帮助用户消除在陌生环境下的沟通障碍。也可以使用户以放松状态完成测试任务，以开放心态为后续拓展性话题的展开做好准备。

无论是填写《用户基本信息问卷》还是后续的问卷，建议采用主持人提问、用户回答的方式收集信息。用户的注意力集中于思考和沟通，就能够提供更多有价值的信息，而不是忙于撰写问卷。

第二步.完成单任务，填写《单任务满意度问卷》

主持人按照顺序分步解说单任务。单任务测试过程中，工作人员不要去打扰用户，也不要给用户任何提示，所有的问题都等到测试结束再进行解答。

观察员需仔细观察用户操作，记录用户是否很容易判断出如何操作，完成某个重要功能点时是否顺畅；需随时关注用户表情，记录下明显表情相关联的流程或功能点等等细节。

一个单任务完成后，提示用户稍事休息，然后提问《单任务满意度问卷》中的问题。此时可以回答用户操作过程中的疑问，也可以藉由操作中的细节做延展发散，询问用户操作感受。通常可以获得很多针对该单任务的意见和建议。这些意见和建议后续就需要记录整理，作为优化任务帮助提升产品可用性和易用性。

第三步.填写《SUS系统可用性量表》，了解整体评估

整个任务完成后，可以藉由填写《SUS系统可用性量表》，了解用户对整体的评估。由于量表的10个题目中，包括奇数项的正面陈述和偶数项的反面陈述，所以在提问过程中一定要陈述清楚题目。如果用户认为有些问题无法回答，则视为其选择中间值。在后续的结果整理阶段，再对量表总分进行计算。

在问题询问过程中，可以有针对性地询问原因。比如针对第2个问题“我认为酷大师建模工具的操作较为复杂，其实没必要这么复杂”。

如果用户认为不复杂，则可以询问哪些点非常简单易用；如果用户觉得复杂，则可以询问哪些点觉得复杂。用户告知原因的同时，常常会说出他认为比较简单的解决方案。这些解决方案或者来自于竞品，或者来自于实践，或者来自于创新，常常可以帮助我们开拓思路，走出认知盲区。

第四步.拓展性访谈，测试收尾

在这个环节可以不必拘泥于原定的测试任务。建议预留一定时间，大到行业发展，小到产品细节，与用户进行一番深度探讨。这些来自于一线的用户常常会带来一些新鲜的灵感，为产品未来的拓展提供一些线索，解决产品当下的一些困惑。

由于我们一开始就对测试样本进行了分类，所以也可以结合前面几个环节的信息，对各分类下的用户诉求和行为习惯进一步验证、区分、归纳。

结果整理阶段

第一步.SUS量表分值计算

首先，我们需要计算SUS量表总分。奇数项计分采用“原始得分-1”，偶数项计分采用“5-原始得分”。由于是5点量表，每个题目的得分范围记为0~4（最大值为40），而SUS的范围在0~100，故需要把所有项的转换分相加，最终再乘以2.5，即可获得SUS分数。

其次，我们可以获得分量表得分。SUS量表中，第4和第10项构成的子量表为“易学性”（Learnability），其他8项构成的子量表为“可用性”（Usability）。

为了使易学性和可用性分数能够与整体SUS分数兼容，范围也是0~100，需要对原始分数进行转换：易学性量表转换分数的总和乘以12.5，可用性量表乘以3.125。

最后，我们可以将SUS量表分数换算成百分等级来解释，找到对应评级。百分等级的意思是指测量的产品或系统相对于总数据库里其他产品或系统的可用性程度。比如SUS得分是73分，其百分等级大约为67，意味着比大约66%的产品可用性更好。

第二步.整理问题列表，推进迭代优化

做完所有用户的测试之后，我们一定会收集到很多涉及具体功能点的反馈。对于正向反馈，我们可以谦虚地接受，并且思考这些打动用户的点如何复用；对于非正向反馈，我们应该冷静地思考，它们将是本次可用性测试中最直接而有效的收获！

对这些反馈可以进行分类归纳，将其中能够立即应用于产品的内容整理出来，按照优先级，放入产品迭代优化任务中。这些任务将提高产品可用性，在数据层面能够帮助提升留存率。我们这次可用性测试中总共获取97个有效反馈，其中62个整理进产品迭代任务，并且取得了用户使用数据上的相应提升。

第三步.撰写测试报告

整个测试环节通常只有2-3位工作人员，如果希望能和团队一起分享测试的收获，建议整理一份总结报告。可以使用word或者ppt形式，说明测试背景、测试用户信息、主要结论、发现的问题、以及解决问题的行动项。

总结升级

经过几场颇具收获的工具型产品的可用性测试之后，我做了一些总结，希望能够形成适应于工具型产品的可用性测试体系：

1. 目的性

工具型产品的可用性测试目的比较统一：帮助团队优化体验路径；帮助团队明确用户使用产品时的体验感受；帮助设计师验证设计指标。

2. 专业性

完整的可用性测试全程都需要专业支撑，从筹备到进行，从任务到结果，每一个细节都需要考虑到位。在这过程中我们要尽量保证：流程规划清晰；文档整理完整；分工明确到位。

3. 参与性

大多数可用性测试是用户体验相关岗位人员发起，但是用户对于产品的反馈与团队每位成员息息相关，所以建议团队共同参与。比如在这次可用性测试中，就邀请了产品经理和研发人员担当观察员或主持人；邀请用研人员给予专业指导培训；在对测试反馈的问题进行优化过程中，也是团队通力合作，推进迭代快速进行。

4. 周期性

可用性测试不是进行一次就结束的一场表演。而是结合产品进展情况，可持续实施的一种有效的快速验证方式。

可以在新产品上线后进行，可以在重要功能上线前进行，也可以在迭代优化后进行。建议周期性进行可用性测试，取得一些结果后立即应用于产品，隔段时间再次验证，形成良性循环。亦趋近于精益用户体验中倡导的基本MVP理念。

当然，每次可用性测试都需要工作人员投入大量时间和精力，所以专业赋能可以成为很好的解决方案。即团队成员可以学习使用该方法，轮流进行周期性操作。

写在最后

我们日常其实接触并积累了大量专业方法，可用性测试只是其中一种。在不断实践的过程中才能真正体会到这些方法的魅力之处，在不断落地的过程中才能打磨自身的方法论体系，形成属于自己的一套打法，给产品设计带来新颖的专业思路。

文章来源：优设    作者：酷家乐UED 

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

编辑导读：对于老一辈人来说，他们没有赶上互联网兴起的时候，等到想要主动“触网”时，才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验，但在实际操作中，老人家还是一头雾水。这时，操作越是简单的产品，越能够赢得他们的喜爱。本文作者从自身经验出发，对这类现象进行分析，与你分享。

上周某天吃完晚饭，我妈递过她的华为手机怯怯地问我：你有空吗？我想叫你帮我跟那个商家说换一个快递，我们家这边的百世快递的站撤了，叫他们不要用这个快递。

我脑海中闪过一个念头：嗯？最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我：不是淘宝，是拼多多。随即自己打开了她微信里的拼多多小程序，演示给我她找不到商家客服。我跟她说，这个功能要用APP才行，于是帮她下载了拼多多APP并很快解决了问题。

弄完之后，我们又展开了这样的对话：

我妈：哎呀，这个拼多多真是太好了，物美价廉，超方便！你怎么不早教我用！

我：我自己都不怎么用拼多多啊！

我妈：这个是我的舞友上周教我的！我打开一看，哇，好多有用的东西，又便宜！第一天我就买了几百块的！

我：但是拼多多很多假货啊！

我妈：我又不像你们追求什么名牌！有什么假货可言？一条裙子30块！

我：……

我妈：而且！以前我在淘宝总要你帮我付款，现在我用拼多多自己用微信就可以支付了。

我：我早就叫你开个支付宝账号，你自己又不开！

我妈：那么麻烦，我不会，你又不教我！而且又要绑定银行卡，万一哪天我的钱被人家骗走，那些什么黑客……

我：哪有黑客黑你，你又不是马云……

我妈：还有，拼多多退货很方便！以前我在淘宝的时候，退货要你帮我搞，还要在家等快递上门，很不自由，现在我自己去菜鸟驿站退就得了。

我：好吧。

我妈：以后我就用拼多多，我那些舞友都在用！

我：你开心就好。

我回头想了想，这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像：

• 年龄特征：60岁左右
• 工作与生活特征：退休在家，时间较多
• 消费能力：退休金4000元左右
• 家庭情况：已有孙辈
• 人际关系：以广场舞舞友、同学、工友、插友为主的人际关系圈，集聚在微信上
• 消费态度：不追求牌子，追求低价
• 网购习惯：淘宝的老用户，但没有支付宝账号；网购品类主要为衣物及家居用品
• 触媒习惯：微信（微信群、朋友圈）、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢？

首先，我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为，在跟我妈的交谈里，我已经感受到她心里估计“从此淘宝一生黑”了。也确实，一个月以来我妈没有再叫我在淘宝付款过。所以，我想我妈大概率未来不会再用淘宝了，也就是说，淘宝直接流失掉了我妈这个用户。

其次，来看看用户定位。

根据上面我列出的以我妈为原型的用户，多吗？我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》，60周岁以上的人口约有2.5亿人，60-65周岁的人口约有83250000人，分别占人口总数的18.1%和6%；根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》，截止2020年6月，我国手机网民用户规模达9.4亿。

那么，根据这个比例可以推算，这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体，实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化（力推天猫）的战略执行以来，实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户，他们大多数没有支付宝账号，但在微信上有钱，但除了平时发发红包，菜市场便利店买点东西，基本上还是没有用出去。于是，这批用户沉淀在微信钱包里的海量的钱，很难直接转化到淘宝上。

另外一个关键的地方在于，他们对淘宝是有怨言的，但在拼多多出来之前，没有替代物。某种程度上来说，对用户而言，忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少，品牌还是得需要不断优化产品，满足用户的需求。

品牌也好，产品也好，本质上是为用户提供价值，而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫，去了解用户瞬息万变的需求，而去打“情怀”，讲“文化”。所以，我们可以看到当某些品牌醉心于自己的“情怀和文化”之时，其竞争对手在了解用户需求和优化产品而推出竞品后，瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢？

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢？

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后，我猜如果你是我妈，你也会用拼多多了。

在我妈跟我的对话里，还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗？并不是。我一直觉得淘宝的物流虽然不如京东，但并不差，而且也不断在优化升级。但为什么我妈还是觉得不好呢？这一点不能单纯地从物流本身来看，而得回到淘宝的产品来看。

在淘宝上，推出了一个功能，叫“找人付款”。当时我觉得这个功能很好，解决了我帮我妈买单时，她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端：当要退换货时，我这边无法执行，她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后，PC端的退换货服务非常麻烦和繁琐，让我都研究了差不多一个小时才解决。而最后，我妈那边又无法支付退货费用，我在PC端也支付不了，也不能“找人付款”。总之，整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷，但目前的情况而言，这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢？它基于微信这个社交生态圈。加上没有什么太多余的功能，我妈很快就能上手了，自己操作还是比别人代操作方便多了。

谈到这里，我还意识到一个重要的问题。

从产品对人际关系的影响而言，淘宝是负向的，而拼多多是正向的。从某种程度上而言，60岁以上的这代人，是被互联网抛弃了，所以当他们想搭上这波潮流时，不得不面对自己的儿女，需要向他们请教，怎么用怎么学。这一点首先就会让不少子女心烦，不少父母自卑。

再进一步，如果每次父母网购都得“捆绑”上子女时，对人际关系是正向的吗？而在拼多多上购物时，他们不仅可以大大优化自己的产品使用流程，还能跟自己的老朋友们一起拼单，互惠互利，这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗？

一点个人小想法，想到哪写到哪。

如果你有不同的意见和想法，欢迎评论或留言。

文章来源：人人都是产品经理           作者：@源记物语

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