Chartistic是一款通过交互快速编辑数据可视化图表的app。本文通过对“Chartistic”app进行产品体验与分析后产出的PRD文档。该文档由几个板块组成：全局说明、产品说明、页面详细功能说明等。

目录

一、文档综述

1.1文档输出环境

1.2产品简介

1.3产品总结

二、全局说明

2.1键盘说明

2.2按钮说明

2.3默认设置

2.4限制设定

2.5页面交互

三、产品说明

3.1产品操作流程

3.2产品功能导图

3.3页面流程

四、页面详细功能说明

4.1欢迎页

4.2首页

4.3图表编辑页

4.3.1柱状图/折线图/面积图/饼图图表编辑页

4.3.2智能剪贴画编辑页

4.4X轴Y轴编辑页（柱状图/折线图/面积图/饼图）

4.5设置编辑页

4.5.1柱状图/折线图/面积图设置编辑页

4.5.2饼图设置编辑页

4.5.3智能剪贴画设置编辑页

4.6图表完成页

五、总结

一、文档综述

1.1 文档输出环境

1.2 产品简介

Chartistic，一款备受好评的小众数据可视化app。

在这个到处都充斥着数据，以数据为导向的年代，日常办公中随时随地都有可能需要对或多或少的数据进行可视化处理来帮助分析与演示。

虽然有很多的功能强大的工具可以创建图表，但是却没有多少工具可以使创建更简单、更具有交互性。

Chartistic无需登录，打开即用，在移动端以交互的方式编辑数据，一分钟内创建漂亮的柱状图、折线图、区域图和饼状图。将图表以图像的形式导出，并将其嵌入到演示文稿、电子邮件、文档、电子表格中!

交互便捷，操作简单的它已在43个国家/地区投入使用。在新加坡、泰国、菲律宾和越南，名列App Store的年度十佳应用榜单。上线起至今共入选 App Store 精品推荐 9 次，下载量累计24万次 。

1.3 产品总结

目标用户：需要对少量数据迅速进行可视化处理的办公人群

产品定义：快速、简单的移动端数据可视化工具应用，导出图表作为PPT等演示工具的补充。

产品特征：

1. 无需登录
2. 交互式编辑
3. 外观选择多样性

二、全局说明

2.1 键盘说明

在不同页面需要输入编辑时，对应的弹出键盘的类型，数字键盘只能输入正数

2.2 按钮说明

图表编辑页面：

• 图表上默认的随机数值除外，标题编辑按钮、X轴编辑按钮、Y轴编辑按钮在未输入值前呈现灰色
• 图表类型按钮：当前类型按钮为黑色，未选择类型为灰色

X轴Y轴编辑页面：

• Y轴默认的随机数值除外，X轴名称编辑框、Y轴名称编辑框、X轴的值编辑框在未输入有效值前预填文字呈现灰色

设置编辑页面：

• 图表样式选择按钮：当前样式按钮为黑色，未选择样式为灰色

2.3 默认设置

新建图表时

1. 默认已有8组数据，Y轴数值在【0~1000】范围内随机，X轴不赋值待编辑
2. 标题默认可见、居中对齐
3. Y轴默认最大值为1000，最小值为0，不显示小数
4. 网格可见，行计数10，每一间隔的值100，对齐线不显示、简单图表不开启
5. 边框默认选择无边框
6. X轴标题/Y轴标题/X轴图例/Y轴图例默认显示
7. 背景/风格/样式随机
8. 单击增加一组数据按钮，增加的数据Y轴数值在【最大值~最小值】范围内随机，X轴不赋值待编辑

2.4 限制设定

1. 最多可输入12组数据
2. Y轴最大值可编辑范围为1-10000，最小值编辑范围为0-9999，最大值需要大于最小值
3. Y轴数值的编辑需在【最大值~最小值】范围内
4. 首先确定的是（最大值-最小值）/行计数=每一间隔的值 ，行计数的数量需要在【0~15】。因此每一间隔的值需要在【0.07*（最大值-最小值）~ （最大值-最小值）】这个范围内，确保最多只能有14行，考虑到（最大值-最小值）/输入的间隔值得到的行数有可能不是整数的问题，实际显示的行数为（最大值-最小值）/输入的间隔值四舍五入取整后的行数
5. 最大值、最小值、行计数、每一间隔的值仅可编辑为整数

2.5 页面交互

1. 弹屏时底部页面虚化，单击弹屏以外的虚化界面，弹层关闭，返回上一页面；
2. 图表编辑页面下滑展开X轴Y轴编辑页面，从屏幕下方上滑关闭；
3. 图表编辑页面左滑展开设置编辑页面，从屏幕左侧右滑关闭。

三、产品说明

3.1 产品操作流程图

3.2 产品功能导图

3.3 页面流程

四、页面详细功能说明

4.1 欢迎页

• 页面名称：欢迎页
• 入口：打开App进入
• 页面说明：打开App自动进入欢迎页，停留0.5秒后自动进入首页

4.2 首页

图一

图二

图三

图四

页面名称：首页

入口：欢迎页后自动跳入

页面说明：

序号1：点击出现其他链接弹层，首页页面置于底部并虚化（如图三）

序号2：点击出现新建图表类型弹层，首页页面置于底部并虚化（如图二）

序号3：

• 点击进入图表编辑页
• 长按或者左滑出现复制、导出、删除三个快捷处理按钮（如图四）

序号4，5：点击关闭弹屏，首页页面置于顶部并解除虚化

序号6：点击快捷处理按钮消失，回到首页，在首页图表列表第一个位置添加复制的图表

序号7：点击弹屏关闭，快捷按钮消失，回到首页，该图表删除，列表中该图表后面的图表前移填充空缺位置

4.3 图表编辑页

4.3.1 柱状图/折线图/面积图/饼图图表编辑页

图5

图6

图7

图8

图9

页面名称：柱状图/折线图/面积图/饼图图表编辑页

入口：

• 点击图表完成页编辑按钮跳转
• 新建图表类型弹屏中点击图表类型对应按钮进入

页面说明：

主页面：左滑展开展开设置编辑页面，下滑展开X轴Y轴编辑页面

序号1：点击返回首页

序号2：点击进入图表完成页面

序号3：点击图表类型切换为折线图，数值背景等设置不变，折线颜色为柱状图同一风格的单个颜色（如图6）

序号4：点击图表类型切换为面积图，数值背景等设置不变，折线与面积颜色为柱状图同一风格的单个颜色，折线的颜色比面积颜色深一个色号（如图7）

序号5：点击图表类型切换为饼图，数值背景等设置不变，配色也不变（如图8）

序号6：单击–切换图表颜色风格

序号7，17，18：按住上滑/下滑–修改圆点高度，上方或者下方的对应数值一起修改，左侧提示目前高度对应的数值，修改值在设定的Y轴最大值与最小值之间

序号8，9，10，12：输入值之前按钮为灰色，输入后字体颜色由背景设置决定；点击展开X轴Y轴编辑页面

序号11：

• 点击一次增加一组数据按钮，增加的数据Y轴数值在【最大值~最小值】范围内随机，X轴不赋值待编辑
• 最多可增加至12组数据，增加至12组数据后按钮变灰，点击无反应

序号13：点击后小圈即序号7变成删除符号如图9，单击删除符号删除该组数据，当删除至只剩一组数据时删除符号变回小圈，不可再删除

序号14：点击隐藏上面的下拉按钮、添加按钮、删除按钮、设置按钮，隐藏后图表变为左向，单击后以上按钮出现

序号15：点击展开设置编辑页面

序号16：输入值之前按钮为灰色，输入后字体颜色由背景设置决定；点击输入标题

序号19：点击饼图需要修改占比的目标扇形后出现两个半圆形按钮，按住按钮滑动分隔线调整目标扇形角度，按钮相邻一边的扇形同时被增大/减小角度，饼图中间提示目前目标扇形角度对应的占比

4.3.2 智能剪贴画编辑页

页面名称：智能剪贴画编辑页

入口：

• 点击首页图表缩略图跳转
• 新建图表类型弹屏中点击图表类型对应按钮进入

页面说明：

主页面：左滑展开展开设置编辑页面

序号1：按住上下滑动更改有色部分的高度，左侧占比数值一起更改，更改范围为0%-100%

4.4 X轴Y轴编辑页（柱状图/折线图/面积图/饼图）

页面名称：X轴Y轴编辑页面

入口：

• 图表编辑页面下滑展开
• 编辑X轴名称按钮，编辑Y轴名称按钮，编辑X轴按钮，下拉按钮点击展开

页面说明：

饼图没有编辑X轴名称按钮与编辑Y轴名称按钮

序号1：点击保留编辑结果，收起X轴Y轴编辑页面，回到图表编辑页

序号2：点击屏幕下半部分或者从下半部分上滑，收起X轴Y轴编辑页面，回到图表编辑页

序号3：

• 点击一次增加一组数据按钮，增加的数据Y轴数值在【最大值~最小值】范围内随机，X轴不赋值待编辑
• 最多可增加至12组数据，增加至12组数据后按钮变灰，点击无反应

序号4：

• 初始状态为隐藏，单击删除按钮即序号5后出现，点击删除对应的该组数据，点击屏幕其他任意位置再次隐藏
• 当删除至只剩一组数据时自动隐藏，不可再删除

序号5：点击编辑文本框与数值框之间出现小删除按钮即序号4，点击删除对应的该组数据

异常提示：

• Y轴编辑的数值>最大值时，弹屏【警告 所输入的值大于最大值】，输入框内容回到修改前的值;
• Y轴编辑的数值<最小值时，弹屏【警告 所输入的值小于最小值】，输入框内容回到修改前的值;

4.5 设置编辑页

页面名称：设置编辑页面

入口：

• 图表编辑页面左滑展开
• 图表编辑页面设置按钮点击展开

4.5.1 柱状图/折线图/面积图设置编辑页

标题设置功能

页面说明：

序号1：屏幕左侧页面点击或者右滑返回图表编辑页

值设置功能

页面说明：

序号2：最大值最高可设置为10000，最大值设置的值需要大于最小值，仅可编辑为整数

序号3：最小值最小可设置为0，最小值设置的值需要小于最大值，仅可编辑为整数

异常提示：

• 最大值>10000时，弹屏【无效值 请输入小于10000的值】，输入框内容回到修改前的值；
• 最大值<=最小值时，弹屏【无效值 请输入大于最小值的值】，输入框内容回到修改前的值；
• 最小值>=最大值时，弹屏【无效值 请输入小于最大值的值】，输入框内容回到修改前的值；

网格设置功能

页面说明：

序号4：可见性为关闭状态时，行数与每一间隔的值无法选择与编辑

序号5：初始默认值为10，可编辑范围为【0~15】，仅可编辑为整数

序号6：对齐条开启状态见图，在图表编辑页面滑动所编辑的数据对应到Y轴上的数值（图中的0、100、200、300等数值）时停顿一下，左侧提示所对应的数值；滑动编辑的数值（如323、546等）不在Y轴上时，不显示左侧的数值提示

序号7：简单图表仅保留图表主体形状，如上图

序号8：初始默认值为100，仅可编辑为整数，每一间隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】这个范围内，考虑到（最大值-最小值）/输入的间隔值  得到的行数有可能不是整数的问题，实际显示的行数为（最大值-最小值）/输入的间隔值四舍五入取整后的行数

异常提示：

• 输入的每一间隔的值不在【0.07*（最大值-最小值）~ （最大值-最小值）】这个范围内时，弹屏【警报 请输入0.07*（最大值-最小值）到（最大值-最小值）之间的值】，输入框内容回到修改前的值;
• 输入的行计数不在【0~15】范围内时，弹屏【警报 请输入小于15的值】，输入框内容回到修改前的值;

边框设置功能

图例设置功能

背景设置功能

页面说明：
序号10：主题文字注释

序号11：四种主题单选，设计出图标作为按钮外观，下方会出现对应文字注释，所选择的背景按钮外层加一圈黑色示意

图表样式设置功能

页面说明：

序号9：柱状图/折线图/面积图样式说明如图

4.5.2 饼图设置编辑页

标题设置功能

页面说明：

序号1：屏幕左侧页面点击或者右滑返回图表编辑页

表格设置功能

页面说明：

竖向表仅可选择左对齐或者右对齐，横向表可选择左对齐/右对齐/居中。

值设置功能

背景设置功能（同4.5.1柱状图/折线图/面积图）

图表样式设置功能

页面说明：

饼图样式说明如图

4.5.3 智能剪贴画设置编辑页

图像搜索功能

页面说明：

序号1：仅可输入英文名称搜索，无编辑内容时文本框内容为Search，字体浅灰色，输入内容后字体变为黑色

异常提示：

当移动端无网络时，搜索框下方“在线搜索图像”更改为“连接中断”，搜索框点击无反应

标题设置功能

值设置功能

背景设置功能（同4.5.1柱状图/折线图/面积图）

图表样式设置功能

页面说明：

智能剪贴画样式说明如图

4.6 图表完成页

页面名称：图表完成页

入口：

• 点击首页图表缩略图跳转
• 图表编辑页点击完成按钮跳转

页面说明：

序号1：点击返回首页

序号2：点击进入图表编辑页面

序号3：点击导出保存到本地或者分享

五、总结

以上便是我本次倒推撰写的Chartistic的产品需求文档，格式参考倒推“潮汐”APP的产品需求文档。

这款App是一款很实用的手机应用，交互很有特色，因为过于追求操作的简便，导致功能局限比较大，对于App的未来优化方向，笔者认为可以在以下几个方向尝试：

1. 增加“编辑两组不同指标数据”的功能，因为在很多场景下是需要将两组数据进行对比的，比如销售额与成本额的走向对比；
2. 在折线图与柱状图的编辑中可以将数值编辑为负值，例如毛利率这种类型的数据可能会有负值出现，而且负值是需要在数据可视化图表中突出表现的数据。

这是本人第一次撰写的产品需求文档，一定有诸多不足，希望各位前辈不吝赐教，感激不尽！希望可以成为一名产品经理，创造出对用户有价值的产品，不求做改变世界的产品，只求改变自己，改变眼前。

 文章来源：人人都是产品经理

大部分交互设计师接到需求后，就开始分析下竞品、然后结合自己产品和自己的想法，就着手交互原型制作了，在这样一个设计流程中，交互设计师很难有体系化的思考。

有没有一套体系化的设计思路，让交互设计师做出的方案又专业、又全面、又经得起挑战和用户检验的设计方案呢？

本文是我梳理的一套体系化设计流程与思路，希望可以帮到大家。体系化设计思路大纲如下：

• 拆解目标
• 确定设计方法
• 设计方案过程
• 方案细化和走查
• 数据跟踪
• 后续迭代

拆解目标

作为一个交互设计师。在我们接到需求之后，首先需要弄清楚的是产生需求的业务背景是什么。其次是基于业务背景了解产品的目标是什么。最后弄清楚产品的用户人群有哪些，用户目标是哪些。

交互设计师通过从产品经理或者其他需求发起方那里了解需求生产的业务背景，了解为什么要做这个需求。在了解清楚之后，追溯需求最原始本质。

在我们实际工作的大部分情况下，大部分产品经理不会在需求文档中将业务背景写清晰，这时候我们交互设计师就可以将业务背景在交互文档中输出，并清晰的展示出来。

1. 业务背景是什么？

业务背景通常是我们为什么要做这个功能。通过做这个功能，对业务有什么帮助。通过业务背景，我们可以推演出业务诉求，并得到对应的产品目标。

2. 产品目标是什么？

产品目标是产品能得到什么样的结果，对产品来说可以获得什么样的好处。所以在交互文档的设计中要重点体现出产品目标。通过明确产品目标，可以清晰的指导我们做交互方案。

3. 用户人群是哪些？

用户人群主要是通过我们对现有产品的用户画像得到，并推算出使用这个需求的用户人群是哪一类人，通过明确的用户人群，这样我们在做设计过程中，可以很清晰知道这个需求为谁而做。

4. 用户目标是什么？

用户希望通过使用这个功能达到什么样的好处或目的。

5. 设计目标是什么？

通过业务背景、用户人群、用户目标和产品目标拆解出对应的设计目标。

以登录注册为例。业务背景是目前产品的登录和注册的效果不理想。对应的用户人群分为两类，分别为新用户的注册流程和老用户的登录流程。用户目标是方便快速的完成登录注册流程，越简单越快越好。产品目标是提升登录注册的完成率。

设计目标是拆解，如何能提高登录注册的完成率。那么设计师可以拿到登录注册的完成流程，看看登录注册过程中，哪些步骤转化率低，那么对转化率低的地方进行设计优化。

目标拆解就是对页面进行数据提升具体优化方案，例如文案问题、视觉布局问题、交互路径问题等。

确定设计方法

对于设计师来说设计方法有很多种。例如常见的有：目标导向、数据分析、用户调研、设计走查、场景化设计、用户体验地图、竞品分析等。

在做设计方案过程中，一般不会将上述的方法全部用到，更多的是使用其中的一种或者几种混合使用。

根据具体的需求选择适合的方法。例如在做登录注册这个优化流程方案过程中，可以通过数据分析找到转化率低和设计走查思考如何提升数据，就可以完成设计目标。

设计方案过程

1. 不同场景梳理

我们需要以场景的思维做场景分析，通过场景分析就可以清晰地描述这些场景，从而确定用户的需求，并在这基础上用交互方案满足需求。

举个栗子，产品提出一个需求：应用添加「商品列表按照价格从低到高排序」的功能，这还是老思维，是在「定义我们的应用」；

而如果从场景的角度来思考，用户搜索某种商品，在列表页会列出一长串商品，而用户此时只想快速找到符合他的要求的那一个；而有些用户在挑选的时候，会需要买价格便宜的，此时排序功能就是用户的需求。

这样从场景来理解，会更清楚地理解需求发生的环境，便于做出好设计。

比如，顺着排序的场景，可以进一步想：有这样需求的用户在我们的应用里多吗？如果多，那么意味着用户经常需要进行排序的操作，所以在设计的时候，可以把排序的入口放的明显一点，好操作一点，方便用户轻松地进行排序。

对于使用滴滴快车的用户，整个流程包含三个阶段，分别为上车前，坐车中和下车后。每个阶段都存在多种用户使用场景。

2. 不同角色用户

有时候需要考虑不同角色的用户，例如后台系统，需要同时考虑普通用户、管理员角色和超级管理员。

三个不同角色的使用权限也是完全不同的。权限：普通用户 < 管理员角色 <超级管理员。三种角色的主操作流程也是不一样的，在设计过程中需要差异化设计。

3. 设计不同流程

明确设计目标、设计方法确定、弄清楚不同场景。接下来就是设计不同的流程。

一般先设计功能入口流程，接下来就是主流程和支线流程。最后才设计异常流程。

4. 方案细化和走查

在涉及到异常场景，且可以全局性复用的情况，则只需要全局性组件说明即可，不用每个流程都展示其异常场景组件或者页面。

全局组件指的是整个产品通用的组件，例如全局断网，操作成功、操作失败、加载、空数据界面，404 等

全局断网：一般是在首页使用 tips 提示。用户在其他界面点击操作时，也会出现 toast 反馈提示用户。也有一些 app 在用户进入后出现对话框提示用户网络异常。相对于对话框，使用 tips 对用户的干扰度更小。

操作成功：一般操作成功都是根据具体的使用场景出现对应的提示。

操作失败：异常情况导致操作失败，这时需要统一的提示，通常使用 toast，也有一些使用对话框强提示用户。

加载：涉及到全局加载和局部加载，全局加载在设计中要统一说明，例如上一个界面点击进入下一个界面，使用的全局加载就需要说明。如果是一些小场景的加载，那么需要特殊说明。例如上拉加载，下拉加载，局部小区域加载等。

空数据类型一共有三类：

• 初始状态的定义：初始化状态，没有任何内容，需要用户进行某种操作才能产生内容的界面。
• 清空状态的定义：通过删除或其他用户操作，清空当前的页面内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。
• 出错状态的定义：由于网络、服务器或者没有找他其他结果等原因导致无法加载内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。用户操作反馈的无结果界面也可以用这样的思路来设计。

数据跟踪

通过核心指标判断设计方案是否符合预期，以此验证设计方案是否成功，并为后续产品的迭代优化做依据。

1. 关注设计的核心指标

设计过程中，要关注设计的核心指标，针对于核心指标，进行针对性的设计。

如果改版的最重要（核心）的指标是任务流程完成率，先查看用户操作流失率，然后分析找出流失原因，给出对应的优化方案。等到优化方案的产品版本上线后，对比完成率数据变化。

如果改版的最重要（核心）指标是人均观看次数，则要思考可通过哪些设计策略可提升产品的人均播放次数。

举个例子，新浪微博，以前版本用户看完视频后，视频会有重播按钮和推荐视频，用户只有进行下一步点击才能播放下一个视频。

改版后看完视频会自动切换到下一个视频。这样的设计策略虽然绑架了用户的行为，用户从一个主动接收者，变成了一个被动接收者，但是这种策略能有效的提升人均播放次数。

2. 核心指标带来的价值/收益

当验证了核心指标往好的方向发展，这时候，就需要总结核心指标带来的价值和收益，这样的话设计价值才可以直接被量化。

举个例子：一个 banner 的点击率达到 3% 的时候，每天 GMV 约 200 万，当重新设计了这个 banner，同时其他条件保持不变，点击率提升到了 6%，这时候通过数据查看每天的 GMV 是多少，如果达到了 400 万，那么这增加的 200 万的 GMV 则是通过设计优化所带来的。

后续迭代

设计师在交付稿件后，容易松懈，以为项目告一段落，就疏于后续的跟进工作。其实后续的跟进也很重要。产品测试版上线后，交互设计师应该跟进后续的走查和设计问题的反馈。

通过数据分析，确定上线的方案有哪些问题需要优化，建立需求池方便后续跟进优化，不断完善产品设计。

文章来源：优设

好的用户体验是不会让用户注意到并毫无察觉的一种体验。表面上看似非常简单，但实际上设计师已经做出了非常多的设计思考。用户越少的去思考界面，用户就越能专注他们要完成的目标。在浏览页面时，用户的注意力不应该停留在界面和设计上，他们更应该关注的是如何达成他们的目的。所以作为设计师的首要工作就是通过事先清除障碍，为用户提供直达目标的途径。

“通常，飞速行驶的货车不可能轻松地停下来。因为运用更多的动能去改变运动状态是非常困难的。与其强迫人们从他们的主任务上转移注意力，不如直接带他们去他们想去的地方。”

——Luke Wroblewski，谷歌产品总监

换个思路来看。复杂和混乱的界面会迫使用户去寻找解决问题的方法，而通常情况下，这些方法并不是一目了然的。用户会因为过多的选项、界面、导航等感到困惑，用户可能会在思考过程中感到不知所措。即便是很短暂的停顿，也足以让用户离开。

这种过度的思考就被称为认知过载，在这篇文章里，我们将为你解释如何避免认知过载。首先，我们需要明白我们大脑中存在过载风险的原因。

认知超负荷的科学根源
认知过载是指工作记忆中脑力处理的信息总量过多。当你的工作记忆接收到的信息超出其可以轻松处理的信息时，就会发生认知过载，从而产生挫败感。
但这究竟意味着什么？工作记忆到底是什么？针对这些我们又应该怎样进行设计呢？那就让我们先来了解一下认知负荷理论的起源吧。

JOHN SWELLER和认知负荷理论
虽然对认知的研究可以追溯到几个世纪，但直到20世纪80年代，澳大利亚教育心理学家约翰·瑞勒才将这项研究应用于教学设计当中。Sweller试图为每一种类型的学习者找出最适合他们的学习方法，让他们可以记住他们学到的所有知识。换句话说，怎样的课程设计才是最佳的呢？
Sweller在1988年出版了“ 认知负荷理论，学习难度和教学设计 ”，这使他的研究工作达到新的高峰，于1994年重新修改并重新发表。他的研究中运用了数据组织结构中的图表数据库，讲述了有效和无效的教学方法，而他对于工作记忆负荷极限的研究结果才是设计师们找到的最有用内容。
Sweller的研究在许多方面扩展了George Miller的信息加工理论。George Miller是一位认知心理学家和语言学家，他在20世纪50年代测试出短期记忆的极限。Miller的研究在于数字化设计，尤其是分块技术方面，这将在后面讨论。另外，Miller还创作了论文“ The Magical Number Seven, Plus orMinus Two“，这个理论促使许多设计师将菜单项的数量限制在5和9之间。
虽然这些理论最初是针对教育领域的，但它们同样适用于用户体验（UX）设计。

工作记忆
如果你每次打开冰箱，都必须回答一个像谜语一样的问题，“什么东西小的时候四只脚走路，长大了以后两只脚，而老了以后有三只脚？”这是一个老段子。但是，根据认知负荷理论，使用这种让人无奈的用户体验设计会让用户产生挫败感。

要理解认知负荷理论，你必须要了解什么是工作记忆，大脑在短时间内用于完成任务的过程便是工作记忆。工作记忆必须借助外部刺激和短期记忆，并在需要时从长期记忆中抽取。通俗一点说，工作记忆相当于计算机内存，而长期记忆则相当于硬盘驱动器。
工作记忆和短期记忆通常可以互换使用，但它们略有不同。工作记忆是处理信息的过程，而短期记忆更像是一个信息的便签本，它虽然重要，但却没有长期记忆重要。
让我们看看这篇文章是如何解释这些差异的。在你阅读的时候，你可能会遇到一个用蓝色字体书写的陌生概念。你的工作记忆需要知道蓝色文本是什么意思，才能够理解文章更深层的含义。你的长期记忆知道蓝色文本表示链接，因此你的工作记忆知道点击该链可以获得更多信息。与此同时，你的短期记忆会记住你在文章中的位置，这样当你从外部页面返回时你不会迷失，但到了第二天早上，该位置就会被遗忘掉。

设计中的应用
Steve Krug（史蒂夫·克鲁格）是一位很有影响力的作家，他在网页设计中极力推崇认知负荷理论。他的书《Don’t make me think》被许多设计师认为是有巨大影响力的著作。
书中记录了许多宝贵的经验，下面就列举一些的：
1、每一个页面都要清晰明了。
2、用户倾向于“满意” - 也就是说，采取一个最简单的解决方案来解决他们的问题，而不是最好的解决方案。此外，作为习惯的生物，用户将一遍又一遍地使用相同的方法解决问题，而不会刻意寻找一个更好的选择。
3、当新用户可以熟练使用该系统来实现他们的目标时，系统的可用性就足够了。
4、用户使用网络的绝大部分是想要节省时间。因此，用户的行为通常会像鲨鱼一样“保持移动，否则就会死亡”。
5、后退按钮是Web浏览器最常用的功能。
6、屏幕上显示的主页按钮即使从来不被用户使用，但也能让用户感到放心。
总之，用户在浏览网站过程中哪怕是一瞬间的思考，也会对他们的工作记忆造成负担。例如 “这个可以点击吗？“首页按钮在哪儿？”和“我怎么保存？”等等问题，都会不同程度破坏用户体验。

认知超负荷最常见的原因
许多设计元素都有可能对用户的大脑造成超负荷，外界环境中会有更多的因素它们超出了设计师的控制范围。例如：一个用户浏览网站的同时会担心第二天的工作报告，或者被窗户外装修的噪音所打扰，此时，无论你的网站设计多么简单，这些都会耗尽他们的工作记忆。
我们要知道每个用户的工作记忆能力都不同。随性的用户比那些对每一件小事都无比关注的用户更能专注于你的网站。不经常上网的用户往往比经验丰富的网络用户思考的更多。
虽然我们无法量化所有的认知过载，但我们可以尽量的去避免他的产生，下面，我们对网页设计中最常见的类型以及避免它们的最佳方法进行了分类说明。
1.不必要的操作
用户的每一步操作都会增加他们的认知负担。过多不必要的操作会打断用户的思路或者会让用户抓狂。因为用户的工作记忆都集中在完成特定的目标上，所以多余的操作将迫使用户投入更多的精力，这样就需要更多的工作记忆才能完成任务，所以，那些不必要的操作步骤很考验用户的耐心。
速度和节奏是让认知负荷最小化的基本因素。用户希望以轻快，目的性很强的步骤来完成任务，所以应该提前消除一切延迟。

用户希望在他们提交邮箱地址之前就知道他们将要进入什么网站，但Touch of Modern却要求用户在使用之前必须进行注册！这个强制而又多余的行为将会吓跑很多的潜在用户。
解决方案
下面这个方法，可以帮助我们找到不必要的操作有哪些：列出用户要完成任务必须要去做的步骤。例如发送电子邮件：
1、点击电子邮件图标。
2、点击“发送到”输入框。
3、输入电子邮件地址。
4、点击“主题”输入框。
5、等等....
现在，重新审视列表并且找出可删减的操作步骤，想到什么了吗？你可以通过将光标一开始就自动定位在“发送到”字段就可以删除步骤2.这将减少用户的操作，虽然很微小，但你消除的每一步对于用户来说都是友好的。

我们来看看谷歌的主页。光标一开始就在搜索输入框当中，因此用户所要做的就是开始输入文字。这些微小的交互提升了整体的用户体验，所以不要忽视它们。
2.过度刺激
杂乱无章的页面会分散用户的注意力，使用户无法专注他们想要完成的目标。就像有好几个人同时与你交谈时你会很难集中注意力，当页面上太多的图片、动画、图标、广告、文本类型和鲜艳的颜色夺取你的注意时，就会很难集中注意力。
记住，每个人的工作记忆在完成目标的过程中，会因为外界的刺激对每一步工作重新排序。每一次分心，尤其是视觉上的强烈刺激，都需要消耗用户的一部分注意力。

LINGsCARS就是个极端的例子，你可以看到有强烈对比的颜色和绚丽的动效冲击着人们的感官。在屏幕上，即便在两个不同位置同时进行的动效依然会对用户造成过度刺激。
解决方法
首先，减少一切不必要的元素。仅保留必要的内容通常是最佳的选择，减少加载时间并简化体验。用户更喜欢视觉简单的网站，而不是视觉上复杂的网站。
你还可以进行内容区分以达到平衡的效果。太多相同的内容（比如文字或图像）会让用户感到厌烦。所以，视觉内容要进行合理的组合，图像、视频、信息图表等，能够使页面和谐，并便于用户理解。
影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版，但它反而运用同量的文字内容来平衡网站页面。

在抽取出一个页面上必须要展示的元素之后，你应该采用一种让用户立即能够理解的方式组织这些元素。对称或者不对称的信息布局显示都可以很快的被用户所理解，也就是说，用一种方式，尽可能的减少大脑的工作。这样不仅对称和不对称都能让眼睛感觉很舒适，而这样的结构也能让界面交互更容易。
下面来看一下Groupon是如何布置页面的吧。左中是文本类的垂直菜单，右中是一个有特色的冻酸奶交易文本描述，插在文本中间的照片和色块的使用，分分钟创造出一个让人喜爱的沙漏结构。
下面来看看Groupon是如何将它的垂直菜单（中间偏左）和描述冻酸奶的文字（中间偏右）进行布局的吧。大图居中被文字包围着，这样就打造了一个舒适自然的沙漏形状。

对称不仅仅是在屏幕的两侧应用相同的布局，它是视觉重心和视觉方向的平衡。通过这种方式，非对称页面也能看起来很有组织性，如下图的OTHR所示。

将你的页面内容精减到只包含简单的和非竞争性的元素，这只是完成了预防过度刺激工作的一半。。不要忘记要以简单的布局呈现这些元素。
3、太多选项（希克定律）
这有点自相矛盾：用户需要更多的选择，但是往往太多的选择会使他们的大脑超负荷。

席克定律（选择困难症）为我们揭示出了一种现象：用户拥有的选择越多，他们做出决定的时间就越长。

作为设计师要去理解库克定律，可以把每个选项看作是明亮的闪光灯，如下所示，太多的闪光灯会过度刺激用户。

甚至像Rakuten这样的知名网站也会犯类似的错误，因为他们没有真正的理解这个设计原则。给用户需要的而不是给他们认为他们需要的。
解决方案
假如你已经解决了不必要的和多余的选项，你可以将他们分别放入不同的组进行分类，你可以在百货商店的网站上看到很多例子，这些网站拥有广泛的产品选择。
它不一定是太多的选择, 只是一次有太多的选择。如果你可以用隐藏菜单，抽屉和拉出其中的一种方式隐藏一些选项，那么你将获得两全其美的效果，这些超级菜单虽然为用户提供了许多选项，但一定程度上不会给用户带来很大的负担。

但是，隐藏式的导航栏不利于发现，因此电子商务和新闻等行业的设计人员应该注意。你可以通过放置其他类似产品的链接使缺点最小化（比方说亚马逊的“相关购买”）从而最大限度地减少隐藏菜单的缺点。或者你可以归纳导航菜单的类别，将它们精简为单行导航（如Apple和CNN那样）。

你还需要注意应该如何组织整个网站的导航。许多与库克定律有关的问题可以通过管理信息架构（IA）来处理，我们将在下面的“难以查找的页面和功能”部分中讨论。
4.太多内容
就像过度刺激和选项过多的问题一样，提供过多的内容会将用户的工作记忆拉向不同的方向。
显然，你希望展现的只是重要的内容，但对于一些网站来说，一切都是重要的，如果你的网站也有非常多的内容，为了避免让用户产生困惑，应该对内容信息进行和里的组织规划。

Arngren的问题并不是它展示了很多的产品，而是它同时展示了太多的产品。在组织结构上的调整将会给网站带来更好的体验。
解决方案
如上所述，George Miller的解决策略是“分块”，将需要展示的大量内容以可管理的方式组合起来，以便于记忆，电话号码分为国家代码，区号，一组三位数和两组四位数字便于记忆，而一连串的11个数字会很难被记住。
你想在商店主页上放大量产品的图片吗？比起将它们全部罗列出来，不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。

还有文本组块，文本组块包括简短的自然段，合理利用标题和副标题以及足够的留白。
对于需要大量数据的长表单字段，可以尝试采用多步骤表单。长表单可能会令人生畏，有时会导致用户流失。你可以将表单的信息分在不同的页面里，减少信息过量给用户带来的影响。记得一定要有一个进度标记来让用户知道还剩下多少页。（可以总结为复杂的页面简单化）

购买机票总是涉及填写大量的信息，其中没有一项是多余的。Virgin Atlantic通过将其分解在多个单页面上填写来改善其繁琐的体验：选择航班，填写乘客信息，输入付款详细信息等。将所有这些信息放在一个长页面上会对用户造成负担，也有可能会放弃购买。
5.模棱两可的界面
认知超负荷的罪魁祸首先就是用户界面混乱。永远不要让用户花费大量的时间来弄清楚他们如何才能完成想要的目标，以及花费时间来弄清楚图标的含义是什么。

并非所有用户都是经验丰富的，从而可以理解SpeedCrunch这种含义模糊的图标。即使他们能够识别代表Windows系统和Mac OS X系统的符号，那么位于右下角的那两个图标也会让用户迷茫。
解决方案
使用用户已经熟知的视觉提示。用户通常会用他所熟悉的符号来进行操作，即便是在以前从未使用过的网站上也是这样。如果你觉得没有新意，可以融合品牌特征巧妙的结合成为用户所熟悉的形式。Home Depot虽然运用了较为普遍的图标，但同时也赋予了他们品牌独有的橙色。

标准标签（如“联系人”和“提交”）的按钮比非传统标签（如“地址”或“开始”）更容易识别。通常已知的标签可以提高用户的浏览体验，而不常见的标签会让用户暂停以了解按钮的功能。不要为了个性化而丧失了识别性。
另外，你如果真的需要一个从未见过的图标该怎么办呢？如果这样，可以运用现实生活中的场景展示来让图标进行自我解释，这种做法是连接现实和虚拟的桥梁。例如：早期的互联网先驱选择了一个信封来代表电子邮件，因为信封是邮件系统的明显标志。
此外，要避免含义模糊的图标，特别是可能还会被误认为是其他含义的图标，就像下列Issuu的图标，有些是被人熟知的，但有一些却不是。如果用户必须通过点击这个图标来发现它的功能，这就会中断他们的操作进程。

任何一个表意不清的图标都应该附带说明，告诉用户怎样操作。新的并且不常见的用户界面，就需要更多的分步教程。例如，Slack就给出了一个完整的视频引导来说明界面的操作流程。

6.难以查找的页面和功能
即使用户已经拥有他们所需要的一切，但他们可能还是不知道如何去寻找它。这样就会让用户费尽脑力去寻找他们所需要的。作为用户体验中不可或缺的元素，导航应该放在明显的地方，给用户信心去任意浏览网站而不会迷失。

如果你觉得汉堡包图标不好，那可以在看看Mojo Yogurt，它会要求你将鼠标悬停在左上角的徽标上以显示导航菜单。

虽然围绕着Logo有个小的动效，但对于整个屏幕的颜色和动效来说，它并不够明显。
解决方案
根据用户的偏好理顺你的信息架构。你的目标用户群可能并不认可你的做法。因此，要想他们学习如何组织网站，卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。

如果你还希望通过组合页面和菜单项来消除多余的页面。设计工作室Waaark通过将其工作室的简介，团队成员简介和联系信息这三个页面合并到一个页面来简化他们的导航。

如果某些功能或特征比其他功能或特征更重要，可以运用视觉手段来吸引他们的注意，增加大小，添加动画以及使用对比色以此来吸引用户的眼球。

PayPal期望有更多的老用户而不是新用户，并通过设置登录按钮与吸引注意力的白色块背景来迎合前者。
7.内部不一致
假设网站的主页使用标准的蓝色和带下划线的文本来表示链接，但另一个页面仅使用蓝色而没有下划线。当用户浏览其他页面时就会停下来去想，“它没有下划线，这还是个链接么？”他们甚至可能不会再去关心链接，而会被其他页面的不统一分散注意力从而影响整体的用户体验。
要记住，最好的用户体验是不会被用户所察觉的，而像上面这样通常都会被注意到。
总结
1、认知过载是影响工作记忆的因素。当过多的信息阻碍决策和整体经验时，就会发生认知过载。
2、使用不同的内容类型和结构化页面组合，可以避免视觉混乱。
3、隐藏式菜单可以帮助用户一次管理可用选项的数量，但降低了可发现性。
4、“分块”和“步骤”等的方式可以防止认知过载。
5、UI元素和图标应该基于用户现有的认知上，这样他们就不需要过多的思考，新的独特的功能要加上解释说明。
6、围绕用户的实际思考方式构建你的信息架构。卡片分类等可用性测试可以为你的目标群体揭示最直观的导航方案。
7、视觉和功能的不一致，以及打字错误和语法错误，都会分散用户的注意力。
8、尽可能减少冗余。另外，请留意如何最大限度地减少用户操作步骤量和他们必须花费的精力。

文章来源：UI中国

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

关于「撤销」有很多设计细节可以讲，所以我花了两周时间，将其浓缩成 3000 字，帮助各位产品设计师更好理解撤销的设计细节。

撤销的目的是帮助用户取消当前的操作行为。

撤销可以对用户使用产品起到一种安全保障作用，让用户在界面中自由地探索而无需担心操作所可能导致的严重后果。

或者用户删除了一个视频，撤销可以帮助用户恢复他所删除的内容；以及用户进行了一步操作，觉得不太好，就通过撤销来回退到上一步操作。

与之对应的叫「重做」，就是当用户撤销了当前的操作，但是想了想，还是行进到刚才已经操作的步骤好了。既给了用户安全感，还给了用户反悔的余地。

类似于下象棋的时候，你觉得这一步走得不好，所以悔棋了，虽然对家没说什么，但是你心里又觉得过意不去，毕竟落子无悔真君子，所以你又把棋子放回去了（真是不怎么恰当的比喻呢）。

这样做的目的是提升用户使用产品的信心，增强对产品的控制感；鼓励用户放心地探索，快速建立起自己熟悉的操作路径。

所以关于撤销，我们可以从下面几点来聊聊：

• 依次序撤销
• 选择性撤销
• 撤销在界面中的运用
• 与撤销冲突的元素

依次序撤销

它的意思是，依次撤销之前的操作。

在尼尔森可用性原则里，就有一条类似的原则存在，即 User control and freedom（允许用户自由操控）。

很多人把这条原则解读为「撤销原则」，本质上是没什么问题的，因为撤销确实需要让用户自由操控。但是早期的撤销，并不「自由」，而仅仅只是让用户在一定范围内「可操控」。

比如早期在一些产品里，执行多步操作，但往往只能撤销一次，要想继续撤销是不被允许的，所以它的操控自由度就很低。那时候如果把这条原则解读为「撤销原则」，显然是不合理的。

于是，后来逐渐延伸出多次撤销的功能。

我记得最早使用 PS 的时候，在 PS 里面就有关于撤销次数的范围设定，但是我忘了具体范围的上限与下限是多少了。

使用的方式是，比如我设置参数为 10，那么之后我的撤销也只能操作 10 次，要想继续撤销，就会告知无法继续了。

现在的很多工具产品应该是没有这些限制了，比如 Sketch，Word 都是可以无限次撤销直至最初始状态或刚打开文件的状态。

相对早期撤销的使用逻辑，后来可多次撤销的操作在自由度上，确实是好了那么一些。

它就是在「单次撤销」的基础上，给了用户「多次撤销」的机会，并让用户回到自己满意的位置。

但是这里的撤销，它还不够自由，因为它是「依次撤销」—— 每一步撤销用户都得经历。

选择性撤销

当撤销随着用户场景的变化而进化之后，才真正具备了比较自由的操控方式。

让撤销具备「选择属性」，必须与另一个元素做一个结合，那就是「历史记录」。

继续拿 PS 举例。

大家看到上面这张图，当你在 PS 的画板里完成了一系列操作之后，发现后面有一些东西做得不是很好，想回去重做，但是依次撤销又觉得不好把控，于是就通过操作历史，来选择具体回退到哪一步。

相比于依次序撤销，选择性撤销的自由度更高，也更符合其对尼尔森可用性第三条原则的解读。

或者再通俗一点的例子，浏览器。

假设这时候你打开了 5 个网页，关掉了其中 3 个，但是突然想起第 1 个关掉的网页还有值得收藏的内容，于是依次撤销 3 次，才打开第 1 个关掉的页面。

而现在有网页历史记录，就可以直接帮你打开之前关闭掉的所有网页中的其中一个。

解决了用户每一步都要经历的问题。

当「撤销」与「历史记录」结合之后，「选择性撤销」的出现还能解决掉「依次序撤销」的一个关键问题：撤销重做之后，无法复原。

通俗点讲，就是当用户撤销到之前的操作，进行了新的操作行为，那么原来旧的那条线路就被废弃了。看图：

当用户操作到第 5 步，然后撤销至第 3 步，再执行一次新的操作，那么步骤 4 与步骤 5 就会被废弃。

大家知道很多设计师都会做版本记录，因为 PS 的历史记录虽然在撤销操作上方便了很多，但无法复原之前的操作逻辑依旧不能满足一些设计师的诉求。

毕竟不废弃的话，撤销操作的逻辑就会很复杂；且通常「选择性撤销」伴随解释，说明用户清楚知道自己当前行为会造成何种后果。但它并不能解决用户操作过程中实际存在的这类问题。

而「选择性撤销」的「版本记录」可以解决这个问题，来看下面这个例子。

结合历史/版本记录，比如用 Notion 或石墨写了一篇文章，它们都会有版本记录，过程中会根据时间维度与内容变更维度来判断是否进行保存，那么当用户想回滚到之前的那段内容，只要对这些版本进行点击查看，然后选择具体撤回到哪一步即可。

比如我今天（2019.11.05）早上花了半小时最后对文章做了一次整理，添加了图片，它就会记录其中的操作变化，且可进行选择。这里无论如何撤至哪一步，其它内容都会有留存，不会消失。

也许这已经不是通常意义上的撤销，但它确实是撤销的升级版。

这样看起来是不是自由操控度要高很多呢？

到这里，我只是讲了「撤销」的特性，下面来聊下它在界面设计中是如何应用的。

撤销在界面中的运用

我们现在在很多产品里都能看到撤销，在网页里与移动 App 中，它的使用形式虽然多样，但本质上并没什么区别。

大多就是单次撤销，因为用不到多次撤销，多次撤销更多是在工具里被使用。

比如油管的撤销使用：

当用户对一个视频进行「不感兴趣」的操作时，视频内容会变成右边这样，可撤销。这个内容会一直存在直到用户刷新页面时才会消失。

类似的还有淘宝网页端的购物车，当删除添加的任一商品后，其也会在附近位置出现可撤销的操作。

在网页产品中，撤销的运用大多是这样的。

我们再来看移动端产品对于撤销的应用。

在 iOS 中比较常见的是微信的摇一摇手机撤销正在键入的内容：

这类撤销较为被动，经常是在无意间触发，所以不是我们主要要聊的。

而有一类产品，撤销会以 Snackbars 的形式出现，如图：

当这类邮箱产品，删除了某封邮件后，在底部就会出现这样的提示，告知用户可撤销上一步行为。

更多的还是工具类产品，比如修图类产品 Snapseed：

它有单次撤销，也可以重做，还能多次撤销，多次撤销就是点击「查看修改内容」之后，右图出现的样子，它会把所有步骤都呈现出来，给予用户选择具体撤销至哪一步。

其实更多的也就是这样了，但是，为什么呢？为什么在非工具类产品里撤销很少见呢？难道用户从来不会误操作或操作之后反悔？

下面一节来解答。

与撤销冲突的元素

先放结论：当某个功能具备撤销属性时，切勿再使用二次确认对话框，反之同样成立。

撤销与二次确认，是两种东西，虽然有时候解决的是同一个问题，但是它们的属性是完全不同的。

举个例子：

上面这张图，左边是在执行操作前弹出的确认框，右边是执行操作后弹出的提示框。

二者的区别很明显，二次确认的删除提示框更具警示效果，后者作为提示，较为弱化，且通常是在用户操作完成后弹出。对于用户来说，在非工具类产品中，前者更好的抑制了用户的冲动行为或误操作行为。后者作为提示类控件，不具备警示效果。

所以它们不应该同时出现，且它们虽然是解决同一个问题，但是是完全不同的情况。

于是，在大多数产品中我们很少看到撤销的使用，因为大部分需严谨的操作都会有二次确认，并不严重的操作也就不需要任何提示。即使是上述提到的邮箱删除，没有二次确认也是因为它有撤销作为提示且还有回收站允许用户检查确认。

所以，除非是场景与之密切相关的，比如社交产品内容发送后的撤回功能。

微信早期的撤回，只是撤销，它并不具备「重做」属性，现在撤回，内容会重新出现在输入框让用户重新编辑。

它们之间的差异是：它并不会产生严重后果，但确实会产生小问题。比如误操作发出信息，或发出后发现话术并不严谨。

所以这一段内容只是想告诉各位：二次确认操作与撤销操作是两种不同的东西，虽然看起来是解决同一个问题，但它们的差异也是非常明显的。必须谨记。

另外还有个提示：心细的同学会注意到文章里或其他产品里出现的「撤销」通常也会写成「撤消」。在别的领域里这是两种不同的内容，但在产品设计领域里，目前并没有对这两者做明确的区分，所以暂时不用过于纠结。

总结

这篇文章讲了很多内容，我在这里梳理下：

• 撤销分为依次序撤销与选择性撤销；
• 依次序撤销有单次撤销与多次撤销，以 PS 为例；
• 选择性撤销大多在工具类产品里被使用，它与历史记录结合，解决了依次序多次撤销部分内容被覆盖的问题；
• 在非工具类产品里，被使用更多的是单次撤销，是因为场景限制；
• 撤销与二次确认不可同时出现，它们看起来是解决同个问题，但之间存在较大差异。

所以当你设计的产品要用到撤销时，也要注意这些细节问题。

这就是本篇文章的所有内容了。其实这篇文章里包含的内容有很多，而且有很多争议点我都没放出来，直接一笔带过给出正确结论了。写这种大部头文章太累，要思考的点很多，需要帮助读者从多视角排雷，很可能导致初学者在读文章过程中出现阅读吃力的问题。所以之后还是会挑一个点来写吧。

文章来源：优设

我们通过门铃声儿得知门外有人来访，也能通过电话铃声得知正被人呼叫。短信通知也有着类似的作用，包括各类产品的消息推送。

但不同的是，消息推送的重要性随着「通知」被滥用而变得不那么重要了。它们变得不像门铃或电话铃声起到的作用性那么大，包括短信现在也大多是垃圾信息。

而且，通知越来越多地通过各种方式去触达用户。比如消息未读的红点提示，或者显示消息的数字统计，以及手机使用过程中的顶部提示与声音或震动的提醒，等等。

但我们还是无法抑制点击图标的冲动，这仅仅是因为它具有未读的计数或红点提示，即使我们已经知道当中的内容并不重要。

而我要说的是，当通知内容变得次要且被滥用之后，它仿佛成了一种违背设计原则的功能 —— 中断用户当前行为。因为它打破了用户与产品之间的层级关系，破局至产品之外来吸引用户的注意力，这是一个非常打扰的行为。如果我在看书，突然收到一条并不重要的消息，那我一定会非常反感。

所以，为了不被「红点」支配，以及不让通知所打扰，我会把手机里所有产品的消息推送都给关了。

但是，以上内容并不能说明通知的无用论。同样有许多用户还是沉迷于通知的使用上，它所控制的是用户对于某个产品的控制欲，担心错过某条消息，就好像我在豆瓣写了篇随笔，就想看别人给我点赞评论的消息，但我又不可能一直盯着，所以通知这时候就起到了一个很好的作用。

以至于对于优秀的产品人或设计师，包括运营来说，利用好通知，就能掌握用户心理，巧妙的将用户留在产品中。它们甚至有助于与打算放弃产品的用户建立联系并促进互动。

那么，我们应该如何更合理的设计通知呢？下面我们通过「通知的组成部分」以及「通知的使用类型与规则」来详细做一次拆解。

通知的组成部分

关于通知的简单定义：它是一种吸引用户注意的功能模式，让用户获悉新事件的信息动态。产品将其发送给用户并与用户产生交流。

因此从这个定义中我们可以知道，通知有两种形式，分别是被动只读型和操作反馈型。

被动只读型，是指该信息可读，但不可进行操作；操作反馈型，是指用户可对该通知进行操作，如某宝订单支付成功后的地址信息确认通知。

所以在梳理组件的时候也要注意掉这个差异。

1. 消息中心

这里的消息中心，是一个信息汇总中心，但并不一定是信息来源。意思是，信息来源可能是有很多用户在你的文章下面点赞了，而这个点赞行为被汇总到了消息中心，再用消息中心指引作者去到文章页面查看具体详情。

所以它是一个汇总表。但也有可能它就是信息来源点，比如一些系统通知，告知要升级，因为它没有其他功能可承载，所以只会在消息中心里出现。

或者类比 iOS 系统的通知中心，如果通知是 App 推送的，那么它会指引用户进入某个 App；如果通知是系统行为，如勿扰模式，「6:00 前来电和通知将会静音」这个通知，是只可在通知中心进行操作的。想要更改，就需要手动打开设置。

2. 通知指示符

它可以是点，也可以是计数器，只要表明目前消息中心有新的信息就可以。我个人一直觉得这就是让我们多数人养成强迫症的罪魁祸首。

3. 信息标题

它主要是指该信息来自于谁或属于什么子类型，比如用户互动点赞消息，评论消息，系统消息等等。用户可以通过标题来获悉该信息类型，再通过内容摘要来判断内容是否重要。

当然，这里的摘要如果过长，就需要省略处理，引导用户进入消息源或消息中心。

4. 推送时间

推送时间是一个看起来简单，实际上也好像不是很复杂的逻辑。只要说明该通知的发送时间即可，但是需要注意的是时间段问题。比如几分钟前，几小时前，几天前，这里的逻辑是按照时间推进规则持续增加来告知用户该消息的推送时间节点的。也就是过得越久，时间概念就越大。

5. 通知图标

上面讲到消息类型，我们也经常会在各类产品中发现不同通知的类型会汇总在各自的类型下。包括用户所接收到的信息，通常也会告知用户该信息属于什么类型。有时候，标题可能会更细，但是用户通过图标可以判断该信息属于什么类型，甚至都不需要仔细查看标题与内容。

但是，并不是所有产品的信息都可以通过图标来判断，有时候图标只是一个大方向，如果手机锁屏，相对于用户来说，这条通知只是告诉用户该信息是由什么产品推送，而并不能指向至该产品的什么类型的信息。所以在使用的过程中，同样需要根据业务的场景，谨慎地选择图标。

6. 阅读指示器

它就像是上面提到的红点，这里指的是进入 App 的消息中心之后，所显示的内容。

7. 操作行为

这里的操作行为分两种，分别是 App 外与 App 内，它们之间的操作逻辑是不同的。iOS 系统通知的清除操作，只是在系统的通知中心将该信息清除，进入具体 App 后，这条消息还是会存在。而在 App 内删除该条信息，则该信息才会真正消失。

所以从上面可以看到，通知推送，是有两大类别的，分别是 App 外与 App 内，它们之间的逻辑关系与展示形式会有所差异，需要根据具体情况进行设计分析。

8. 小结

对上面的内容进行总结，可以得到这样一幅画像：

大部分系统或产品的通知组成，都可以通过此图概括，唯一不同的是，它们会随着不同的业务而发生变化。

比如豆瓣的推送消息告知用户近期有新的电影上映，那么通知来源要么是电影模块的功能详情页，要么是通知中心的系统消息；而通知类型就是内容更新；详情则根据具体内容来组合排列；最后送达至用户。

而其中的差别就是，如果是通知中心推送的，用户点击之后则是进入通知中心列表。如果是具体功能推送的，那么用户点击进入的就是具体功能页面。如下图所示：

从这里可以看出，通知是有具体模式的。

一旦确定了通知的主要目标，以及想要解决的问题，包括它们如何对业务产生作用以及对用户形成吸引力，就可以确定通知的具体样式了。

在这一节里只要知道通知的组成部分与通知模式如何指引用户进入 App 即可。后面我来带大家理一遍逻辑，以及在设计通知时要注意哪些问题。

通知的使用方法

聊完上面的内容之后，我相信大家对通知的组成与使用模式已经有了全新的认识，但也仅此而已，我们还是不知道一个优秀的通知功能应该从哪些方面去提升用户体验。这里面所包含的不止是表象，还有内在的规则逻辑。所以从这一节开始，我们仔细来梳理一遍。

从我们平时使用到的，以及上文提到的，可以大概先梳理出几类常见的通知类型。

1. 用户信息类通知

这种类型的通知有很多，比如微信消息发送，知乎私信，手机短信等等，它们主要由用户主动生成发送至其他用户被动接收，作用就是促进用户与用户之间的互动关系，以提升用户使用产品的频率与时长。

这种通知，可给予用户操作也可不给予操作，不操作就是读取，并回复；操作就是可对该用户的信息进行屏蔽、已读、删除等设置。

这是最常见的通知类型，在多数社交产品与有社交特性的产品里都能看到。

说明

之所以给予用户信息的操作行为，是因为用户信息可分为感兴趣的与不感兴趣的，它主要取决于人。不感兴趣的人，频繁的发送信息，会影响用户对产品的好感度，毕竟有很多用户消息并不是用户想要接收的，所以在社交产品里，用户可删除好友，或拉黑好友；在有社交属性的产品里，用户可拉黑账户，以达到不被骚扰的诉求。

如果没有到达删除好友的程度，也可对该好友的信息进行屏蔽，甚至对该好友信息做已读而实际上未读的处理；或者对重要信息做未读而实际上已读的处理。

当然，用户还能对群消息做更复杂的设置。这就是产品对这类通知的一种优化方式。

2. 系统推送类通知

我们经常会在手机上收到一种系统类通知，或者在 App 中也会收到类似的系统通知。大多是关于系统升级，密码更新等。

这类通知多数是用户被动接收，且对于系统与用户来说是较为重要的。当然也有不重要的，比如 App 更新说明的通知，告知用户新功能有什么变化，或系统更新了什么等等。

对于这类通知，用户大多无法进行设置，因为它们比较强制，没有可以商量的余地，类似于告知用户：我们有新的消息，比较重要，你来看看，即使你不打算更新或执行也来看下。

说明

系统类通知，通常来说较为被动，要么强制用户执行操作，要么就是提醒用户系统近期做了更新，或者是一些并不重要的信息提示，比如勿扰模式。

强制类系统通知不能频繁，否则会给用户造成控制欲反制的副作用。类似于本身用户使用产品需要对产品享有控制权，现在反而被产品控制了。这是不行的。

3. 通用推送类通知

这类通知就是第一节中提到的那些，比如点赞/评论，内容更新等等，这类通知如果是忠实用户，那么或许不会反感它的频率，当然还是需要适当。但如果是普通用户，那么造成的影响就是直接关闭该 App 的所有通知。

我们现在的很多人，之所以开始反感通知的主要原因，就是这类通知所造成的。内容不断更新，随着时间的推移，每天推送多条对于该用户来说无用的通知。包括只适合一些符合条件的用户参与的活动通知也推送给所有人，那么用户就会逐渐对这类产品的通知失去兴趣，造成无法弥补的损失。

即便像某团一样，经常弹出开启通知的弹框，也依然无法召唤回用户。这就是很典型的下场。

说明

通用型通知，如果是业务很复杂的产品，就必须建立通知推送的功能模块，给予用户进行选择接受哪类信息的权力。允许用户进行相应的设置，如活动类推送可拒绝接收。

在很多产品中都已经置入这样的推送模块设置，如下图。

这类内容就是针对于产品的具体业务进行细分。

比如兴趣精选，私信消息等做好类别划分。用户可对自己感兴趣的通知做选择性的推送接收。

另外就是，在相同账户的不同设备之间，推送应该同步推送与被处理。不能这边推送了，那边没推送，或者这边处理了，那边没被处理。

4. 智能推送类通知

不知道大家是否有印象，在使用如大众点评等产品时，只要你切换了城市，产品就会推送通知告知用户该城市有哪些值得游玩的景点与品尝的美食。

虽然这类通知还算不上多少智能，但至少在用户群体中是存在这类诉求的。而这类诉求有时候并不能主动感知，因为用户可能会想不起来通过哪类产品来查找附近美食。当这么一条通知出现的时候，正好解决了用户的问题，反而提升了用户对于产品的好感度。

现在很多产品的通知都逐渐智能化，不会像以前那样，三更半夜发来一条无关紧要的通知。而出现这类问题的主要原因还是在于产品、设计、运营，在这方面没有下过功夫，只将通知作为一种普通的工具来使用。导致用户开始排斥通知，将其强制关闭。之后，就很难再让用户开启了。同理心效应，当做这类功能的时候，可以回想一下自己是如何被其他产品打扰的。

随着大数据的发展，我相信未来的通知系统会更加全面，且能做到千人千面的模式，不过在此之前，各位产品设计师，还需要对通知下一番功夫才是。

5. 小结

我们还可以继续举例说明，但是基本大同小异，所以到这里为止，我再对上面的内容做一次总结，梳理出一个好的通知应该是如何设计的。

干扰最小化：通知本身具有强制性和干扰性。它的目的是把用户的注意力吸引到产品上来，所以要认真思考发送通知的内容、时间、频率；不要提醒用户当前屏幕上已经处于展示状态的内容；也不要推送与用户无关的系统信息。

跨设备：当用户读过了某条信息，这条信息应该不再做展示。同理，用户也应该能够在其它更适合接收消息的设备上找到已读信息。用户通知应该在所有设备上进行同步。

允许设置：允许用户在「设置」中禁止或调整通知的形式。如案例一，通过选择推送内容，来影响接收推送的频率。案例二，可选消息提醒的形式是红点+数字，或仅是红点。

时效性：良好的通知应尽可能实时推送。而不是等这件事情都过去很久了，才推送给用户知道。

支持汇总：把同类型的通知合并为一条，并显示信息未读数量。也可以考虑一键展开通知，显示信息详情。

可操作性：把通知和操作结合在一起，让用户不需要打开首页就能对特定通知进行常规操作。操作应该清晰明了，且仅在未重复默认操作时提供。同时操作应该是有意义、实时、和内容对应的，并且能让用户完成某个任务。如案例一，可以在不打开邮件的情况下，直接对通知进行管理、查看和清除。案例二中的操作针对的是未读邮件，可便捷地在通知板面进行回复、删除、标为已读或垃圾邮件。

总结

对本篇文章的拓展总结：

• 通知具有召唤属性，但是频率过多就会变成打扰，所以要注意通知的频率与内容重要性；
• 设计师或产品经理应该将通知的内容分类梳理出来，以便维护或新增必要需求可能需要用到的推送信息。
• 通知一般为两种类型，一类是推送只读型，一类是操作反馈型；设计师需根据不同类型的通知做好对应的设计，针对具体问题具体分析；
• 想要利用好「通知」，也需要对业务有详细的了解，再代入本文所列举的注意点，就可以设计出一个体验更佳的通知模式。
• 通知规则不会脱离本篇文章的范围，所以只要详细研读，必会有所收获。

文章来源：站酷

先问一个问题：怎么样衡量一个设计好与不好？工作中实践越多次，越会发现华丽的设计稿并不是体现设计师专业能力的唯一标准。普通设计师和高级设计师区别在于，设计方案是否具备完整设计思路；设计对于业务有没有真正的价值体现；以及设计方案的推动落地的完整性到底有多少。设计越往后走，越考验产品思维，设计思维，以及设计推动能力。这是产品设计师需要关注的核心三要素。

设计师在工作中接到设计需求会不自觉的第一时间想着如何去进行视觉表达，视觉表达确实非常重要，也是公司对于设计师的核心价值的定位之一，但视觉表达只是其中设计专业本职工作中的一个环节。设计师还要应该能够站在产品、设计、技术等不同维度去思考设计方案的可行性。产品打磨-视觉呈现-落地执行，在这三个核心点里面设计师分别有不同的定位和价值所在。 

  一. 产品“双标”满足   

产品打磨包含产品规划，内容组成，界面布局，交互梳理等等…所有环节的工作是为了符合产品最终的目标。产品所有的能力会核心围绕两个点：1商业变现 2用户需求满足。这两个目标在产品执行的环节有时候会有一些冲突，在产品打磨阶段设计师通过怎样的方式，做到既满足产品商业目标又满足用户体验需求？可以按照以下几个步骤进行分析寻求切入点： 

这里用腾讯动漫付费模块举例说明： 项目背景是腾讯动漫产品要做付费体系升级设计，接到需求先有由产品源头一步步深入，逐步展开设计方案的规划。 

 01 产品目标确认  

通过对项目背景的解读和产品方案的深入了解，以及总结当前存在的一些问题，可以明确得到项目中产品核心目是什么。付费升级核心原因是付费转化低，用户付费意愿不够强烈。此次升级的核心目标是促进内容消费，提升付费率。 

 02 分析用户路径  

确认目标之后从哪个模块儿开始进行首要需要考虑的。对于现有现有功能的升级，建议核心从产品本身着手，可以根据用户行为分析，获取用户常规使用路径，找到用户使用场景下的核心目的，从而去挖掘用户在付费路径下的诉求点，根据诉求点找到付费升级的触点。这里我们罗列了用户阅读产品的路径。 

 03 观察用户核心需求是否被满足 

 用户在每个场景下都会有“痛点”和“痒点”。比如在阅读前，核心目是想快点看到漫画内容；阅读过程中，想要及时宣泄对漫画的故事情节的感受；阅读后，希望找到更多相关内容或者能够和内容有更多的互动。目前产品在这三个关键的路径节点都存在一些问题，阅读前对于付费缺乏正向引导，阅读过程中互相行为较少，阅读后没有更多延展内容可供消费等。 

 04 洞察设计切入点  

根据用户在阅读 “前 中 后” 关键路径的节点的不同情绪反馈，我们可以做出找到相应情感满足切入点，并且制定解决方案 

 05 制定设计方案  

将之前找到的设计情感切入点用交互和视觉的形式呈现出来，尽可能完整的表达清晰。下面展示是关于付费升级优化的完整视频DEMO。整个方案采用趣味情感化形式为核心设计思路，逐步去引导用户付费。让用户在趣味互动中完成产品的商业转化目标。 

https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html

 二. 设计呈现的“差异化”   

视觉呈现是设计师们都比较擅长的工作，但不同专业高度要求下方案最终呈现出的效果是完全不一样的。好的设计方案，需要在设计上做出明显的“差异化”，这里的差异化是指要区别于常规输出一般的水平。差异化的可以从多个点入手：

优质的设计美感：

美感是作为设计师首先需要培养的技能之一，也是在后续职业生涯的一直需要用到的技能。设计师被神职化的很大一个原因就是因为设计师的美感比一般人要好，有懂得欣赏美、鉴别美、以及创造美的能力。单一从视觉层面，设计作品是合格品还是精品，最终取决于画面的精美程度。项目不分大小，再小的一个项目都可以做出精致品质，这也是体现设计师专业度的核心衡量之一。

完整设计思路：

设计方案的完整性也能够很好的设计师专业度的差异化，几张图的设计稿和一个有完整设计思路的设计方案在品质上自然是明显差别的。设计师不光需要将设计呈现出来，更需要有严谨的设计思路并且表达出来让受众到你的设计想法。设计前期分析、中期执行、后期落地以及迭代优化，能够让设计师有意识的锻炼和提升自己的设计思维，对于设计师能力提升有必然的帮助。 

独特创意：

设计差异化呈现上，创意是一个非常好的切入点。行业大趋势的前提下，现在同类产品越来越趋于同质化，受众使用产品的时候都会有一些常规认知，关于功能的、交互操作的、内容组成的等等，淘宝和京东、大众和美团、甚至QQ音乐和网易音乐在产品使用体验上都有高度重合的地方，这些已经在用户心智中形成习以为常的认知感受。如果能够在用户的常规认知里，用创意手法呈现出超出他们预期的内容使其惊喜，产品设计就会有明显差异化体现。 

善用情感化：

具备美感的设计能让作品看起来有高级感，但更为高级且有效的是能够引起用户情感共鸣的设计。设计是主观的，对于设计每个人都有自己的想法，也正是因为主观的设计感受，能让设计在情感化打造方面可以有很多的尝试方向。能够引起受众主观情感上的共鸣和认同的设计，会形成产品的核心记忆点之一。设计师对于情感化设计往往会有一些误区，认为图形可爱，色彩羡慕，动效流畅且能够形成一套视觉体系，就能够算情感设计。真正的情感设计是需要从用户角度出发，挖掘用户的认知领域和喜欢，从而去进行符合用户情感诉求的呈现。 

三. 方案推动的效能管理 

设计方案输出只是整个产品生产流程中的一个核心环节，产品上线后体验如何最终取决于落地实现的程度。在方案落地支持过程中，效率协调和实现能力是保证设计方案贯彻一致执行的关键因素：

 协作  

产品设计师工作协调分为内部协作和外部协作。内部协作即设计师之间的沟通协同，主要内容是如何保持设计语言一致性，除了制定设计规范，还可以建立公共控件库，线上调用。控件库能够使设计师协作无学习成本，设计师输出设计稿效率也能够大大提升，同时保一致性。

外部协作主要是和下游的技术同事直接的工作对接，设计方案的交接方式以及开发获取信息的效率很关键。在开发接收设计方案的时候，尽能力降低获取成本以及理解成本。比如设计稿的标注，在标注上设计师一般会花很长时间，开发也需要逐步查看，偶尔还会有标注遗漏的地方。我们团队会直接采用插件，设计稿及时同步，并且开发可以自己随时查看每个元素的标注信息，便捷。

这里推荐两款协调软件：一款是InVision可以在sketch里进行控件协同调用，所有想用的元素直接源文件调用，不需要再问同事要源文件！另一款是Zeplin技术同学可以直接查看元素属性以及间距等，设计师解放双手不再需要标注！

官网链接： 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/

实现能力   

专业技术之间的壁垒，也会成为设计方案实现的阻力。同样的界面，设计人员用设计软件实现，技术人员用逻辑代码实现，实现的方式和成本存在很大的差异性，所以往往设计师认为很简单的需求在开发层面的确非常难实现。当然，不是所有需求都是无解的，设计师在技术实现层面还是可以做一些事情：

01 方案前置沟通

设计一个新的功能的时候，如果有非常规的设计方案，可以提前和技术人员沟通实现的难易程度，让技术人员有前期预判和预演的时间。并且，可以将设计做成简易DEMO方便技术人员快速理解，避免双方存在信息不对等的情况。

02 搭建开发控件库

开发控件库和设计规范一样，是最基础但应用最为频繁的模块儿。开发控件库可以将最基础的元素形成固有规范，所有开发实现都用同一套规范，以确保实现的高度一致性，同时也能够提升实现效率和设计还原。设计可以辅助开发一起制定开发控件库，确保控件库和设计规格的一致性。

03 寻求技术语言共通性

尽量将设计方案转化为技术能够理解和复用的形式进行对接。除了静态设计稿的标注，设计和技术实现最大的难点在于动态交互的实现上，对于动态设计，将设计方案转换为代码文件交付给技术实现，这样能确保功能的正常实现同时减少后期设计还原性的偏差。

以上初步总结的关于产品设计师在设计过程中从前期产品规划到中期设计执行再到后期开发落地应该注意的一些核心点：

第一条，设计方案既要满足产品目标又同时要兼顾用户体验；

第二条，优秀的设计师，会保持设计方案的“差异化”；

第三条，设计师职责除了确保设计方案完整性，更重要的是推动设计方案的完整落地。

在产品设计过程中，设计师需要关注还有很多关键点，这里也欢迎大家一起补充交流，正是这些关键点，将设计师的思维逐步打开，使其成为一个具有全链路思维的设计人才。 

文章来源：UI中国

交互手势是用户操作的重要部分，交互手势的设计好坏非常影响用户体验，那么，交互手势的设计上对于容错性和逻辑性需要注意什么？

随着用户体验被愈发的重视，更多的 APP 偏向于使用多手势优化用户的操作流程，降低使用阻力。

点击某个确定的按钮的手势操作虽然被普遍使用并被用户熟知，但是增加更快捷的手势操作可以大大增大操作热区，提高操作效率，如下图。

然而，我们可以发现由于不同产品的设计师对于用户体验的理解不同、交互层面的思考不同，导致设计的交互手势也不同。

有时同一种操作在不同的 APP 中交互手势也是不统一的，这无疑增加了用户的学习成本和记忆成本。

举个例子，iOS 端的得到和有书的播放页的打开和关闭方式。

得到有两种方式打开和关闭页面，用户可以通过点击控件或上滑控件打开播放页，通过点击收起按钮或下拉页面关闭播放页。但是有书只有一种方式打开和关闭，用户只能通过点击控件打开播放页，通过点击返回图标关闭播放页。

这让习惯了使用得到的我去使用有书时，感觉非常别扭，每次都尝试用得到的手势去操作但是都失败了，失败后我下一次并没有记住仍然用手势去操作，如此反复令我相当沮丧。

容错性

容错性是一个很大的话题，今天我们仅仅在交互手势层面上讨论。

上面的例子中，有书并没有设计滑动手势去打开和关闭播放页，那么我以我的经验去进行的滑动滑操作在有书这个产品中就是错误的和不被产品识别的。但是这种手势又广泛存在于大量的音频播放 APP 中，如喜马拉雅、荔枝 FM 等。

一旦用户从这些 APP 迁移到了有书，本来养成的操作习惯在有书就失效了，用户就会感觉“这个 APP 很难用，用起来很不舒服”，进而可能放弃有书转而投向其他产品怀抱。

与手势设计类似，这也是为什么现在的同种类型的 APP 的信息架构设计越来越同质化，当我们打开淘宝、天猫、京东时我们有时感觉就像是同一个 APP ，本质上也是为了降低用户的迁移、记忆和学习成本。

如下图所示，提高手势的容错性对用户的意义。

很多优秀的产品考虑到了上述问题，设计了多手势来优化用户体验。

举个例子，在 APP Store 的首页点击一个推荐卡片后进入详情页，由于详情页是直接由卡片放大转场的，不同于传统的新页面右侧进入和从底部弹出。

在用户的使用习惯和认知中新页面如果从右侧进入就可以通过右滑返回，从底部弹出的话就可以下拉返回。因此，当用户面对卡片放大进入新页面这种全新交互时可能会疑惑如何返回，对此理解不同的用户可能会尝试右滑，也可能尝试下拉。

APP Store 的设计在此就有很好的容错性，用户可以通过三种方式返回首页，分别是、右滑返回、下拉返回和点击叉号返回，这不但降低了用户的记忆和学习成本，也便于不同习惯的用户使用。

针对不同的场景，手势的使用也会有不同。

一个很好的案例是知乎的评论：知乎的评论的关闭方式有三种，分别是下拉、右滑和点击叉号。

用户观看评论的场景有两种，第一种是只想看一下精选评论然后关闭，第二种是被评论吸引后一直往下看。当用户单手操作不方便点击叉号时，下拉对应的是第一种用户；右滑对应的是第二种用户，不管用户看了多少屏的评论，随时可以通过右滑关闭评论（因为用户翻阅了很多屏评论后需要下拉到第一条评论时，下拉关闭评论手势才会生效，所以第二种用户一般不使用下拉去关闭评论）。

可能你会心生疑惑：“第一种用户也可以使用右滑来关闭评论呀”，确实可以，但是对于人的操作习惯来说，上下滑动会比左右滑动更方便。

还值得讨论的是苹果自 iPhone 6s 开始加入的新交互方式 3D Touch，它允许用户通过更大力度的重按呼出情景菜单快捷地使用高频功能而不用先打开 APP，对于追求效率的用户来说简直不要更方便，但是对于不支持 3D Touch 的机型则无法使用情景菜单。

因此，在生活中我发现这样的现象，很多使用惯了3D Touch 的用户换到无 3D Touch 的苹果机型后很不习惯，总是尝试去重按但是是无效的。

其实在很多安卓手机上也有情景菜单这一功能，它巧妙地将卸载也加到了情景菜单中，因此用户只需要通过长按就可以获得所有需要的功能，而不是像苹果那样长按是卸载而重按是情景菜单。

我猜测苹果为了适配所有机型，提高容错性，从今年的发布会的 iPhone 11 和iPhone 11 pro 开始，取消了 3D Touch，转而使用 Haptic Touch （有震动反馈的长按）代替。当你长按某个图标时，感受到震动后松开，即可呼出二级菜单；如果震动后仍不松开，则进入到卸载 APP 时的抖动状态，使得之后的即使不支持 3D Touch的机型可以使用便捷的情景菜单了。

对于不支持 3D Touch 的老款机型会不会在 iOS 13 更新后也可以使用 Haptic Touch 呢？

如果一致统一的话，容错性将大大提高，我们将拭目以待。

不仅仅是 iOS ，Android 的版本 Android 10经历了 6 个测试版迭代后正式发布，我们发现交互手势是 Android 10 的一个巨大亮点。Android 10 在第三版内测系统开始引入全局手势操作，用户启用后，屏幕底部便不会再出现虚拟按键和导航栏，只会剩下一个指示条，上滑返回主屏、侧滑返回上一层的操作逻辑也均和 iOS 保持一致。

这可能标志着安卓手机一直以来在国内各家厂商的各种创新手势的割裂生态中即将重归统一，并和 iOS 保持一致。

这种妥协将大大提高在用户使用一款新安卓手机时的容错性，同时降低了今后用户在两大系统之间的迁移成本。

逻辑性

再谈谈逻辑性，在交互手势的层面上，如果用户能够通过某个手势进行某个操作后，按照逻辑，用户也可以通过反向的手势或对应的手势进行逆向操作。

比如，在微信首页下拉调出小程序页面，之后可以通过上拉返回首页。点击加号呼出更多操作，再次点击加号收起更多操作。

如果违背了用户的心理模型和逻辑性，用户就会感觉到混乱和不适。

这里举一个反例， Uki 的个人主页可以通过点击或下拉底部的固定底板收起更多信息，但是收起后只能通过点击展开更多个人信息而不能上拉，不符合逻辑与用户的心理模型。

如下图所示，逻辑性对用户的意义。

有的时候，我们会发现为了提高容错性，我们会牺牲一部分逻辑性。

就像上文提到的知乎关闭评论弹出框，逻辑上它是从底部弹出的，但是不但能够下拉关闭还可以右滑关闭。尽管右滑关闭有些违背用户的心理模型，但是确实给用户带来了很多操作上的便捷。

如何设计

1. 是否需要加入多手势操作的考虑因素

我们需要考虑的因素包括使用频率、危险程度和特殊体验。

1. 使用频率：当一个功能的使用频率足够高时，我们加入多手势操作去提高用户操作效率才是有意义的。一个低频的功能的特殊手势操作很容易被用户遗忘。
2. 危险程度：如果一个操作不可撤销且存在危险性质，我们最好不要加入多手势操作。此时我们需要用户更加专注，如果加入多手势操作可能会增加误操作的概率。
3. 特殊体验：当我们需要加入特殊的模拟体验时，此时我们可以加入多手势操作。如探探左滑无感右滑喜欢，给用户带来的“翻牌子”感觉是点击操作无法替代的。QQ 阅读下拉拟物绳灯进行日间和夜间模式切换，这种存在我们记忆中的交互方式能够唤起我们的情感。

2. 评估所选手势的考虑因素

1）考虑不同平台的硬件系统和操作系统特性

由于硬件与操作系统差异，iOS 系统支持很多手势，但是安卓系统在手势支持方面就不如 iOS 丰富。

安卓硬件设备的差异比较大，不同安卓手机厂商会在安卓系统的基础上自定义系统的手势操作，因此对于手势的支持也有较大的差异。对于这种情况我们需要熟悉相应平台的规范，做到心中有数。

2）考虑所选的手势的学习成本和记忆成本，用户是否已经被教育

如下图所示，尽管设备支持的手势数量多不胜数，但是日常使用 APP 时，大部分用户习惯使用的手势很少，比如单击、双击、滑动、上拉、下拉、双指扩张和收缩等。除此之外的手势教育成本和学习成本很高。

一般比较通用的功能是没有必要在此处创新的，但是如果一些特殊的操作确实需要加入时，我们就需要考虑下面的问题。

a. 如果没有教育成熟，考虑加入教学或搭配简易的操作方式

对于我们需要加入的手势操作当前用户并未被教育成熟时，我们需要考虑加入手势教学，具体的手势教学类型下一部分会详细讨论。

然而，大部分情况下用户的记忆是短期的，教学内容可能会被快速遗忘，下次用户使用 APP 时仍然不会使用特殊手势。此时我们应该将一些比较难以记忆的手势操作搭配一个简单的手势操作。

比如 QQ 阅读的下拉拟物绳灯切换夜间模式的手势操作设计，其考虑到了有些用户在现实生活中并未见过拟物绳灯，并不知道是要进行下拉才能触发操作。因此，QQ 阅读贴心地搭配了一个简单的点击操作，用户通过点击绳灯也可以切换夜间模式，如下图。

b. 考虑所选手势是否可能导致冲突和误操作，如果导致了，考虑如何避免和折中

最常见的手势冲突情况就是 APP 的手势与操作系统的全局手势冲突。

解决方案有两个，一是避免设计与全局手势一致的手势操作，例如 iOS 的在屏幕边缘右滑返回、全面屏机型的底部上滑退出应用等全局手势操作；二是仍然设计与全局手势冲突的操作，但是将全局手势部分禁用或以其他的方式区分开。

如下图有书播放页的案例，由于进度条滑动控件过于靠左，导致使用 iOS 全局右滑返回手势时有时会产生误操作，即本来想要右滑返回却不小心滑动了进度条。

这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。

误操作指的是，我们设计的手势操作与 APP 内的其他操作或系统全局手势操作接近导致用户触发了非预期的操作。比如 iOS 端的知乎被吐槽的一个右滑返回手势操作，经过研究发现，由于 iOS 端的知乎在浏览回答的页面设计的右滑返回的热区过大，导致用户上滑浏览的时候如果手指的滑动角度变化幅度过大一不小心就触发了右滑返回，再次进入回答后又需要翻页很久才能找到之前离开的地方，很影响体验。

我觉得知乎可以减少热区，将热区调整为 iOS 全局的右滑返回区域即可，如下图所示。

当然，产品设计需要平衡与取舍，如果减少了热区是否会影响其他用户的体验还需要考虑和调研，两者并无绝对的对错

3. 让用户了解并使用新手势

当新手势无法直接让用户感知时，我们需要加入一些手势教学帮助用户快速上手使用。

1）手势教学方式

a. 浮层和动画引导使用静态或动态的手势图片或气泡示例告诉用户使用哪种手势进行操作

相比于静态，动态比静态更为直观和易学。

b. 内容隐喻通过微妙的视觉线索暗示用户此处可以通过某种手势进行操作

由于教学内容难免具有干扰性，对于高级用户来说是不必要的，但是对于初级用户又是必要的，因此以这种内容暗示的方式使教学极为轻量化，在低干扰的情况下使得用户学习了手势操作。

如下图，哔哩哔哩在打开第一篇文章时会平移显示下一篇文章的框架，暗示用户可以通过左右滑动切换文章。

再比如陌陌在打开点点功能时，会在用户进入页面的时候播放一个动画，暗示有很多卡片叠加在了一起，用户可以通过滑动切换卡片。

2）教学的出现时机

a. 操作前当产品中设计了不容易感知的新手势，在用户操作前，通过教学让用户了解和学习新的手势。

b. 错误操作后对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。

如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势进行教学。

结语

以上是日常思考和总结，有不恰当之处欢迎指出。希望本文在大家进行手势设计的过程中能够帮助做出合理的决策。

文章来源：人人都是产品经理 

Sandy现任阿里影业—淘票票体验设计专家，2015年加入阿里巴巴，深耕B端行业产品，服务于电影产业链中的投资、宣发等角色。2017年起接触C端用户产品，推行价值导向和问题导向。2019年开始实践线上线下全链路设计。

活动笔记：

阿里影业的服务涉及的面很广，涉及到b端与c端全流程的体验服务，包括面对片方的制作和宣发、发行、乃至面向用户的售卖与放映，在每个节点都有涉及。而淘票票，经历了四年的产品迭代，以一年一个版本的速度的进行优化。15年的理念是做一个好用的购票工具，16年新增了营销，17年加强营销，18年新赛道探索。到了2019年，改版应该进行新的思考：怎样做？做什么？怎么做？做对了吗？

此次淘票票9.0版本是根据用户现有的习惯与市场的变化，由设计师发起的一次自下而上推进的改版。以下是淘票票9.0的设计策略与设计目标：

1. 内容设计赋能
   新服务，扩展观影决策节点，帮助用户发现好电影。
2. 购票流程体验打磨
   新体验，解读用户行为，体验走查，打磨核心购票链路体验。
3. 年轻化
   新用户，关注用户群体的变化，搜索年轻用户群的品牌认知，提升年轻用户满意度。

接下来将对三点设计策略进行逐一的讲解。

1. 新服务—内容的赋能

根据内容类型和场景进行划分，结合内容特点和用户喜好，打造全场景运营，例如提供影讯、通稿、片单、榜单、热点、解读、文章和活动等等多元化内容。通过提供不同的内容展现给用户，将内容进行解构、把触达的场景进行细化、优化设计的表达，从而达到帮助用户可以更好的理解电影的目的。

2. 新体验—打磨购票流程的体验设计

设计前，首先应当熟知两种设计思维导向：

• A.当设计目标是帮助企业完成商业目标时，是以价值为导向。
• B.当设计目标是为了提升用户体验，则是以思维为导向、问题为导向。

而这次9.0淘票票改版采用的是以问题为导向，期间经历了五个流程：

2.1 找问题

首先出去找问题，找问题的方法有很多，如：用户研究、定性、定量、业务数据和体验走查，收集业务、用户、客满不同视角的疑似问题。

• 会通过支付宝、淘宝、百度糯米来比较价格高低，对比价格需要反复推出
• 进入不同的影院和场次，不太方便
• 希望看过的电影能够产生一些纪念价值
• 不清楚80元和40元的座位有什么区别
• 不明确片尾是否有彩蛋
• 购票平台的评分对自己没有参考价值
• 电影院的地址、停车场是否免费等信息不够准确
• 买完票到取票之间，需要反复确认订单信息、分享订单信息，但是订单入口
• 藏得有些深
• …

2.2 看现象

找完问题之后，基于数据的支撑，去看用户有哪些习惯的变化，看到目前的现象后再进行数据解读。

• 影院页和选座页返回率高
• 越来越多的用户购买当日的电影票
• 多数用户选择更短的买票路径
• 大多数用户去过的电影院在3家以内
• …

2.3 定位问题

基于使用场景和使用效率，进一步定位问题所在。

2.4 分析原因

分析出症结，以便推进最终的解题环节。

• 症结1：平台服务与用户决策心理脱节
  现有的流程是线状的：选影片-选影院-选场次-选座-下单。但是用户实际的心理决策是网状的，用户可能在选时间的时候考虑影评好不好，会在选场次的时候考虑价格是不是合理的。
  
• 症结2：认知过载
  理想状态是在传达信息后，在用户感知、接收和决策后，希望得到用户方的正反馈，但是现实往往是用户认为认知负担过重，反馈失效的情况。其中信息传达、颜色的设置最直观的感受是“乱”。决策流程上最直观的感受是“打扰”，提醒用户是否确定要买某时候的票、提醒用户确定退出选座页不保留刚才选的座位，所有的提示的设计，都是采用一种打扰的方式进行询问的。
  

2.5 解题

解题1：场景化探索。

以解决问题为目标，达到优化用户体验的目的，对场景进行预判、探索，把场景分为三个典型的场景：

• 典型场景1：短时决策–例如距离开场时间较短，对价格不敏感，希望找到距离合适的影院，快速完成购票决定。
• 典型场景2：追求体验–对影厅的要求较高，希望找到放映效果最好的影厅。
• 典型场景3：价格敏感–找到符合自己价格预期的影院。

解决：针对第一种场景，选坐页可以快速找到选场次的功能，淘票票提供常去影院、附近影院的选择，减少用户决策时间。针对第二种场景，部分观影者不知道价格更高的IMAX厅、杜比厅的观影效果，价格比普通厅贵了50块钱，那么这个钱值在哪？淘票票使用视觉映射和科普的手段，例如当点击进入杜比厅后，下拉可以呼出信息，了解相关的影厅，给予科普；而且界面设计不同，更贵的影厅视觉效果好，界面上也提供用户更强的视觉冲击。

解题2：用户视角信息重构，进行信息降噪，减少认知负担

认知负担=信息呈现类型x信息量

以上公式可以看出，假设设认知负担为定值，当信息量增多的时候，需要减少信息呈现类型，适当进行信息降噪与信息结构化。降噪是把想要突出的信息更加突出；信息结构化是把同类型的信息以结构化的呈现出来，让用户自然对信息产生亲密性。

对于信息传达，改变之前比较打扰的提示弹窗，现在淘票票会把所有信息都放在页面中，用一种更轻量的方式提示用户，不再打扰用户。信息重构则是把需要用户确认的信息放在最头部，例如退票、改票，其次界面罗列的是优惠信息，最后才是影城卡营销和卖小食的信息区域。新旧改版对比图很好呈现出淘票票有效减少认知负担所做的优化。

3. 新用户—提升年轻用户群对品牌认知

基于调研，淘票票的用户群体趋近年轻化。改版中所制作情绪版、图标、元素、字号、空间结构等视觉语言，注重和品牌元素的结合，产生出新的视觉语言与品牌形象，从而更加贴近年轻人的心理与喜好。

4. 体验度量

根据heart模型进行设置，选出适合9.0版本的衡量维度：S，T，A。以体验目标出发，符合业务目标进行探索。不一样的体验目标使用不一样的度量方法。对于内容而言，需要衡量的是用户的接受度，用户需要看到它，接受它，并且需要知道用户是否觉得有用。而对于核心购票流程，该流程则是比较偏向工具，度量方式则是任务完成度、完成任务时所花费的时长、信息有没有被有效的传达给用户等来衡量的。最后对于视觉方向，用户的想法会比较主观，通过满意度和推荐度来衡量。

现场问答：

提问者1：观影者通常会在朋友圈、豆瓣和推荐来决定要看的影片，基本不会在淘票票上寻找值得看的影片，为什么淘票票会做这方面的探索？为什么要做内容决策这件事？

回答：从想看电影到下单的过程哪个地方淘票票是没有做好的、做到的，根据定性调研，发现一半以上用户都不会在淘票票上进行决策。但是淘票票还是希望尝试一下，希望用户可以在淘票票上完成完整的购票观影体验。从数据显示，用户心智还是不好但是有一些提升。而且豆瓣经历了10年从pc到app，保留了用户的历史等数据，没有办法让用户直接转到淘票票进行观影决策，这也不是淘票票希望看到的。淘票票也希望可以和竞品和合作方去提升观影决策，达到共赢的目的。

提问者2：淘票票改版之后，有一个衡量它的改版效果S、T、A的度，有没有考虑要做NPS？

回答：淘票票一直有在做，从这次改版之后来，淘票票所有用户群指标提升了应该有五个百分点，然后年轻用户的百分点在八个以上。NPS是一个非常关键的衡量用户满意度的指标。

追问：NPS是不是适合淘票票这个产品？还是适合于所以互联网产品？

回答：NPS在集团内它的重视度是很高，基本上阿里系所有的产品都会有指标。

提问者3：我之前是淘票票的用户，曾经用过淘票票做观影决策，看下面的电影评价，结果发现电影评价是虚高的，就是说其实电影没有那么好，但是评论会倾向性的选择一个好的评论放在下面，经过这次经验之后，就再也不用淘票票作为观影决策了。想了解现在淘票票的评论机制，它是怎么个呈现的方式？是不是会优先选择就是比较好的评论放在首评？或者是有一些什么样的计算方式？另一方面对于现在的评论失真的这种情况，有没有想到一些改进的措施？是最近有没有做过一些改版之类的，就是关于这种内容方面的？除了刚才讲的那些界面，视觉方面的，想了解内容方面有没有一些提升？

回答：第一点，用户群的不同。对于影评这个来决策，淘票票可能跟豆瓣用户群有非常大的差异，豆瓣是影迷聚集地，爱电影这帮人的一个粉丝聚集地，圈子比较小，想要进入这个圈子有一定的成本。但是像淘票票它服务的是大众场景，服务的有外卖小哥，也有大城市去打工的用户，也有三四线在国企里那种的员工，淘票票服务的用户是大众的，所以对于评分虚高这件事，不是说它好或者不好，也就是不能单纯的绝对说好还是不好，可能大众的心智就是这样的。用户不像一个资深影迷，看到速度与激情会认为是大烂片，可能反而觉得好，非常值得去看。第二点，关于这种影评的一个分发策略涉及到产品策略，不是很方便讲。但是淘票票在这方面一直有优化的，并且现在也是在持续优化，希望影评可以真正为用户去提供这个观影决策。第三点，淘票票的用户其实不只是c端用户，它还有还有影院还有片方，但是水军应该不会有，至少淘票票平台是非常不鼓励这种情况，而且会有一定的反作弊、返水的机制。

提问者4：因为是以设计推动的一次改版，想了解一下推动的过程？第一就是因为平时改版都是产品的来做的，那这一次由设计来去推动的话，那设计跟产品之间的这个协作关系是什么样的？然后改版历时半年，是淘票票的设计历程中是常态吗？如果不是的话，平常的这个改版的节奏是什么样的？

回答：第一点，设计要不断的去跟产品、运营沟通，去跟不同角色沟通，沟通可能是最重要的一点。当所有人都达成共识了，确实有这样的问题需要改，那全部门所有人就会去团结，去把这个事情搞出来。搞出来之后再去向上一层一层的去向上汇报。汇报的可能要经过很多轮，不断有反馈的意见下来，因为本身视角输入的也不够全，接受到的声音也没有上游接触的多，所以团队会去接受意见，然后重新的进行。一轮review下来大概三四个月的时间，然后再去跟开发团队沟通为什么要去升级设计语言，怎么样去帮开发提效？怎么在下一次10.0改版的时候更容易。第二点，团队第一次历时半年进行改版，之前没有停下脚步来去深耕用户体验，所以有一些坑或者一些弯路。平常的改版中基本上是两周发一个版本，非常小步快跑的。对于设计如何跟产品团队去协作？刚刚也有讲过，达成共识之后，然后把这个事儿做起来，提需求、进版本，从需求池里评估需求优先级进版本。交互设计跟产品经理这个角色没有绝对的一个边界，可能都是去不断的去触碰，只要去配合合作的好，把这个产品去做出来，不用管处在一个什么样的一个岗位。

提问者5：最开始的时候有问到淘票票和猫眼之间的一些对比，想了解在改版完之后和平时的工作中，是怎么会去了解和竞品？怎么去比较？有没有一些关注的量化的一些指标？

回答：不管服务于什么样的产品，都会做竞品调研。会关注市场的变化、竞品的变化。对于设计团队来说，其实主要的是关注的是用户行为、功能和视觉界面。包括上了哪些个新的功能？在不同的渠道是怎么样去运作的？运营思维是什么样子的？淘票票团队有在研究竞品，有在做竞品的一个分析，衡量的指标也主要是满意度、推荐度，因为没有办法去看竞品的数据，只能通过用户反馈去看竞品跟淘票票的差距。

 文章来源:uxren