导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时，显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式，但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则：

简单

首先，最重要的是，导航系统必须简单。良好的导航应该感觉像一只无形的手，引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。

可见

正如雅各布·尼尔森（ Jakob Nielsen）所说，识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用，而不仅仅是在我们预期用户需要导航的时候。

明确

导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标，它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买；此元素将指导他们执行适当的操作。

一致性

所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户，要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。

大拇指设计法则

史蒂文·霍伯在对移动设备使用情况的研究中发现，49%的人依靠一个拇指在手机上完成任务。在下面的图中，手机屏幕上的图表是近似可达图，其中颜色表示用户可以触及的屏幕区域，并与拇指交互。绿色表示用户可以轻松到达的区域；黄色表示需要伸展的区域；红色表示需要用户改变握住设备的方式的区域。

在设计时，要考虑到你的应用程序将在多种环境中使用；即使是喜欢使用双手握手机的人也不一定总是使用多个手指，更不用说双手与你的用户界面交互了。将最高层级且常用的操作放在屏幕底部非常重要。这样，通过单手和拇指的交互即可轻松达到目标。

另一个重点是底部导航应该用于具有相同重要性的最高层级目标。是需要从应用程序中的任何位置都可以直接访问的。

最后，也是很重要的一点，要注意点击目标区域的大小。Microsoft 建议 你将触摸目标区域大小设置为9平方毫米或更大（135 ppi显示器上的48×48像素，缩放比例为1.0倍）。避免使用小于7平方毫米的触摸目标区域。

触摸目标区域不应小于44像素到48像素（或11毫米到13毫米），包括填充。

标签栏

许多应用程序使用标签栏来显示应用程序最重要的功能。facebook只需轻触一下就可以提供核心功能的主要部分，允许在功能之间快速切换。

底部导航设计的三个关键因素

导航通常是将用户带到他们想要去的地方的工具。对于具有相似重要性的指定目的地，这些目的地需要从应用程序中的任何位置直接访问。好的底部导航设计应该遵循以下三个原则。

1.仅显示最重要的目的地

避免在底部导航中使用五个以上的访问标签，因为TAP目标之间的距离太近。在标签栏中放太多标签会使人们很难点击他们想要的标签。而且，随着每个额外的选项卡显示，就会增加了应用程序的复杂性。

避免使用五个以上的目的地。

避免滚动内容

对于小屏幕来说，部分隐藏的导航似乎是一个非常好的解决方案，因为你不必担心有限的屏幕空间，只需将导航选项放入一个可滚动的选项卡即可。但是，可滚动的内容效率较低，因为用户必须先滚动才能看到所需的选项，因此最好尽可能避免。

该避免在选项卡栏中放置太多项目，以防止用户滚动，然后才能单击所需的选项。

2.明确当前位置

应用程序菜单上最常见的一个错误是没有明确用户的当前位置。“我在哪里？“是用户遇到的基本问题之一。用户应该第一眼就知道如何从A点转到B点，而不需要任何外部引导。你应该适当的使用视觉提示（图标、标签和颜色），这样导航就不需要任何解释。

图标

底部导航应该与图标的内容进行适当的结合。尽管有一些用户熟悉的通用图标，但大多数图标代表的功能包括搜索，电子邮件，打印等。

在适用于Android的先前版本的Bloom.fm应用程序中，很难理解用户的当前位置。

颜色

避免在底部选项卡栏中使用不同颜色的图标和文本标签。相反，遵循这个简单的规则，用应用程序的主颜色为当前的底部导航（包括图标和任何显示的文本标签）着色。

左：不同颜色的图标使你的应用看起来像一棵圣诞树。右：只使用一种原色。

这是iOS的Twitter应用程序中的底部栏菜单。消息视图处于选中状态。

如果底部导航栏是彩色的，请确保对当前位置的图标和文本标签使用黑色或白色。

左：避免将彩色图标与彩色底部导航栏配对。右：使用黑色或白色图标。

文本标签

文本标签应为导航图标提供简短且有意义的定义。避免使用长文本标签，因为它们不会截断或自动换行。

避免换行，截断和缩小文本标签。

菜单元素应易于理解。用户应该能够理解点击元素时会发生什么。

目标尺寸

使目标区域足够大，以使其易于点击或单击。要计算每个底部导航动作的宽度，请将视图的宽度除以动作数量。或者，将所有底部导航动作设置为最大动作的宽度。Android建议移动设备底部导航栏的尺寸如下。

显示了移动设备上的固定底部导航栏，单位为密度独立像素（dp）

标签上的微标

你可以在标签栏图标上显示微标，以表明存在与该视图或模式相关的新信息。

考虑对标签栏图标加微标以保持通俗易懂。

3.使导航不言而喻

良好的导航感觉就像是一只看不见的手，可以引导用户前进。毕竟，如果人们找不到它，即使是最酷的功能或最引人注目的内容也没有用。

行为

每个底部导航图标必须指向目标目的地，并且不应打开菜单或其他弹出窗口。点击底部的导航图标可以引导用户直接进入相关的视图，或者刷新当前活动的视图。不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件。如果需要提供控件，请改用工具栏。

每个底部导航图标必须通向目标目的地。

上面的控件是工具栏而不是底部导航。

保持一致性

尽可能在各个页面上显示相同的选项卡。最好是你能给用户一种视觉稳定性的感觉。

当选项卡的功能不可用时，不要删除它。如果在某些情况下删除了某个选项卡，但在其他情况下没有，替换使应用程序的UI无法预测。最好的解决方案是确保所有选项卡都已启用，但要说明为什么选项卡的内容不可用。例如，如果用户没有本地文件，则Dropbox应用中的“本地”选项卡将显示一个页面，说明如何获取文件。

Dropbox应用的空状态页面

滚动时隐藏标签栏

如果屏幕是滚动的，则当人们滚动查找新内容时，标签栏可以隐藏，而当他们开始回到顶部时，标签栏可以显示。

标签导航可以在滚动时动态消失。

视觉愉悦

避免使用横向运动在视图之间转换。活动视图和非活动视图之间的过渡应使用淡入淡出动画。

图形图标：创意导航

屏幕尺寸是将你的观点传达给用户的主要挑战。使用图形图标作为菜单元素是解决移动端屏幕空间有限问题的最有效的方法之一。图标的图形说明了点击它后将会进入什么页面，这种导航模式更加节省屏幕空间。

Google Material Design，浮动操作按钮

Google Material Design 对这种类型的导航使用术语“浮动擦操作按钮”。它们的区别在于浮动在UI上方的带有圆圈的图标，并具有运动行为。

像Evernote这样的应用程序通过对最重要的用户操作使用浮动操作按钮简化了操作流程。

Tumblr具有漂亮的图形图标以及适当的标签。当你在应用程序中滑动屏幕时，这些图标也很方便地消失。

然而，这种模式有一个明显的缺点-浮动操作按钮隐藏内容。从用户体验的角度来看，不便于用户频繁点击操作

而且，许多研究人员表明，图标难以记忆，而且效率极低。只有普遍理解的图标才能被很好的记忆（例如，打印，关闭，播放/暂停，回复等）。这就是为什么使图标清晰直观*，并在图标旁边引入文本标签的*重要原因。

结论

导航通常是将用户带到他们想要去的地方的一种媒介。在使用应用程序时，要始终考虑用户角色以及他们的目标。然后，定制导航以帮助他们实现这些目标。为用户设计。一个产品对他们来说越容易使用，他们使用它的可能性就越大。

转自：UI中国-Coldrain1

在做交互文档之前，我们先要明白什么是交互文档、为什么要做以及做了给谁看。

一、什么是交互文档 

交互文档，即交互设计说明文档。英文 Design Requirement Document ，简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。

二、为什么需要交互文档          

有些人可能对文档这种东西比较反感，尤其是从事工作不久的朋友。其实工作得越久，越会发现文档的重要性，它可以帮助你理清思路，并记录下来，便于回顾。

通常，一个比较基础、规范的交互文档（DRD）由：文档封面、更新日志、文档图例、设计背景/思路、业务流程、页面交互、全局通用说明、废纸篓八部分组成。当然，这不是绝对，你可以根据你的实际工作需要进行增减。

比如，如果是C端产品的话，用户调研的结论、用户画像、用户体验地图等等，都可以放进去给看的人一个参考。尤其是在如今这么关注用户体验、产品思维的一个大环境下，这些数据支撑很有力量。同时还可以帮助开发人员、界面设计人员培养产品思维、体验思维，大家一起将产品变得更好。

其次，交互文档的整洁与美观也很有必要。相信在过去几年不少人有遇到过这样的产品经理（兼交互），他们会输出一些有时连他们自己都看不太懂或者直接从其它竞品截图来的线框图。当开发和界面设计的人提出质疑的时候还美其名曰线框不重要，重要的是里面的业务逻辑。。。其实用产品思维想，交互文档就是交互设计师的产品，而看的人就是用户，保持良好的可读性，可谓至关重要。

1、文档封面

交互文档的封面如上图，通常包括产品的名称、Logo、版本号以及版本发布时间、所属部门、对接负责人/对接人。

2、更新日志

我们都知道，在产品的迭代的过程中，需求/功能是会不断调整的。而更新日志，就是为了迭代而生。它一般由修改日期、修改内容、修改人、版本号和备注组成。如果是新增的功能或模块，建议是要加上链接可直接跳转至新增内容的，如上图。

版本号也是同理，都应加上对应的版本链接，便于查看者回溯之前的内容，与当前的新版本形成对比。这一点对开发人员来说很重要，其次对于新同事深入理解产品也能起到很大的帮助。

修改日期，通常是按时间倒序排列，查看起来会比较方便。

3、文档图例

文档图例，顾名思义就是关于此文档的一些辅助说明，目的是为了让读者更好地理解文档。如上图的：操作/跳转图例、标签图例、流程图例以及手势操作图例。

4、设计背景/思路

因为我今年对接最久的是一个B端产品的项目，所以整理了一个产品画像，仅供参考。

5、业务流程

业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。

例如淘宝APP，买家购物由始至终的流程就是它的业务流程。通常用泳道图的形式展示，多数情况下是由产品经理绘制。

以上是我所负责产品的核心业务的流程图。因为是B端产品，涉及角色较多，针对3个代表性角色分别进行了绘制，仅供参考。(涉及到保密协议，所有关键词都去掉了)

6、页面交互

（1）信息架构

信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。

（2）权限说明

如果是C端产品，权限这一块相对简单，比较好整理的。B端产品涉及角色众多，可能要单独拎出来分析整理。以上仅供参考，大家具体情况具体分析。若是功能很单一的产品，交互文档中也可省去这个模块。

（3）操作流程图

产品操作流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。

上图是登录、注册和找回密码的操作流程图。仅供参考。模板源文件下载，后台回复“交互”即可。

（4）页面线框图

页面线框图，是通过图形化的表达形式，阐述产品在页面层面的信息。包括： 

【页面标题】即每一个页面的对应标题，一般就是导航栏标题

【页面内容】以黑白为主，保证信息规整易读

【交互说明】用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则 等等

【主流程线】只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受

以上是注册/登录的线框图和详细的交互说明。将重点内容用红色标记，可以让查看者一目了然更好理解文档。

7、全局通用说明

（1）常用控件

常用控件类似UIKit，通常将极具复用价值的控制整理在一起，方便及时调用。

（2）复用界面

（3）时间规范

（4）缺省页汇总

五、总结

文档、软件只是工具，最重要的还是要落地、实行起来才能对产品有所帮助。所以在撰写文档的每时每刻，都应该站在“读者”的角度思考，他们看的时候感受会是怎样的，会觉得很难理解吗？

转自-站酷

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

竞品分析是UX设计师的标准工具之一， 且用户体验设计师的主要交付品之一就是竞品分析报告。在设计一个新的方案之前，我们往往会查看其他类似的产品，了解其他人做的相关工作，希望从中找到任何弱点或者优点，并期望在此基础上进行改进，这将利于你的设计。事实上，竞品分析已经不再局限于一种工具方法，更是一种思维模式，如何对比分析，如何批判性的进行比较以及从差异中获取价值。

UX设计项目会遇到哪些类型的竞争对手？

这个问题可以理解为，我们要分析哪些竞争对手？一般来讲，所有UX项目都面临两种竞争，一种是直接竞争对手，即业务有直接冲突，涉及到具体的利益冲突，商业冲突。例如滴滴和uber，淘宝和京东。另一种则是“间接竞争对手”，往往针对某些相似的产品模块，这里的竞争并没有准确的定义，只是为了比较而给与的一个名称。 例如你在进行自家产品登录注册模块的设计，此时你不仅仅可以研究一些直接竞品，也可以研究其他拥有此功能模块的产品。而该产品与你的产品并没有构成竞争的关系，只是提供了一个参考方向。

为什么要进行比较？

关于这个问题有两个答案，首先，调研竞品发掘哪些功能或服务是他们不能做或者没有实现的，这就是我们的产品可以利用的机会点，以提供新颖的或者说更强大的功能，从而提高产品竞争力。例如顺丰快递首先开创了机器填写快递信息的功能，从而大大提高用户填写订单的效率、准确度和满意度，进一步提高品牌竞争力和服务水平。

其次，检查其他设计师对相同需求的解决方案必然会对你有所启发，有利于你从中获取灵感来优化自家产品。例如信息架构的优化、或者简单地操作流程的优化。参考竞品意味着你可以不断从中学习，把竞品的每个模块、步骤拆解开来，分析其背后的设计原因及它们如何发挥作用，这将有利于你的产品设计。

参考竞品首先意味着你能够达到和竞品同一水平的用户体验，因为有了参照标准相当于指路明灯，竞品的优秀体验也会督促你不断优化自己的产品。但竞品虽然为你创造了一个标准，同时也会限制你的思路和想法，使你可能错过一些更优秀的解决方案，参考竞品能让你追赶别人，但无法让你完全超越他人。因此仅仅复制是不够的，必须融入自己的见解且时刻保持创新意识。

对直接竞争对手进行分析

通常，竞品分析发生在项目的早期，你或许会寻找市面上是否会有竞争对手，然后尝试着从竞品中寻找优点和弱点，以推动自己的产品。如果没有竞争对手时，往往可以从目标用户入手，因为用户实际上拥有自己的解决方案或者说策略，例如在滴滴流行起来之前，对应的用户群往往使用出租车来代替出行方式。目标用户在这之前是如何解决他们的需求的？你应该可以获得一些间接可比的方案，收集用户的相关想法有利于推动你的产品设计。

在产品上线后的运行阶段，仍然需要做竞品分析，此时或许存在一些新兴的的竞品，虽然是后来者，但往往会在交互、体验或者运营策略等方面碰撞出一些新的创意。根据竞品的功能策略，你需要进行一定的调整，不断对产品迭代优化。除此之外，产品有时需要做一些追随趋势的更新，例如视觉风格、新的交互设计语言等。

如何从间接竞争对手那里获得灵感

间接竞争对手也会给你一定的启发，作为一个用户体验各种产品时，留心那些优秀的设计，可能是视觉方面也可能是交互方面，总之这些优雅的设计将会成为你的灵感之源。然而所有的设计都有其适用场景及背后的设计原理支撑，在海外设计经验中一再强调的 context（上下文）就是这个意思。

优秀的设计都是最适合自己的产品和策略的设计，而不是最美观或最的。因为设计不仅仅包涵体验更是要兼顾业务。同一个设计在一个地方发挥作用并不意味着移植到其他地方仍然有效。

例如一个简单的登录模块的设计，按照常规经验，以目前微信的受众数量做参考，可以无脑选择微信快捷登录，这无疑是最便捷的方案，但为什么很多产品仍然采用手机登录？因为一个注册的手机号码能为公司的未来带来极大的增值，每个号码背后都是一个用户，且通过手机号可以对这个用户进行持续的推广营销，如拼多多的短信推广，移动联通的电话推广。

所以，一切的设计都应以设计背景，业务诉求为基本原则来进行，盲目的追寻极限的视觉和效率，盲目的信奉设计潮流趋势都是不可取的。好的设计和时尚的设计不同，好的设计有持久的价值，是美学和体验的结合，并以基于心理学社会学的用户研究为后盾。这样的设计符合用户的需求同时能为企业带来收益。而时尚的设计则会随着时间流逝而销声匿迹。

一味追寻潮流的应用程序设计，公然违背基本的可用性惯例，违背交互设计的基本原理，很有可能在市场中失败。——Prototyper.io UX首席负责人Miklos Philips

竞品分析时谨记五个原则

为了保证你所进行的竞品分析的有效性，需要谨记以下五个原则。 

1.理解背后的需求

分析任何设计之前都需要理解设计背后的核心需求，这并不是简单的查看表面内容，除了交互体验上的思考，更要深入产品本身，去更多的理解业务层商业策略等方面的内因。每个设计都有对应的场景、上下文甚至各种限制条件。只有理解这些你才清楚这个设计是否适合你的产品，或者是否有一定的参考意义。

比如观察淘宝的搜索功能你会发现首页的搜索和店铺的搜索有很大差异，即首页的搜索比重要远远大于店铺的搜索。店铺中的搜索按钮仅仅展示一个双指面积的btn，而首页则是展示一个接近通栏的搜索条。那么分析下来，店铺的搜索btn小巧精致，简易美观是否应该借鉴，答案是看情况。淘宝首页入口提供的是一级搜索，涵盖了淘宝百亿级别的商品，因此搜索功能的优先级极高。而店铺商品有限，用户浏览商品往往按照分类，很少使用搜索功能，这种情况下搜索的优先级很低。 

因此，理解设计背后的理念，解决的问题、如此设计的原因才是竞品分析重点关注的方向。切记浮于表面。

2.确定真正的竞争者

认清自己的竞争者，他们往往并不仅仅是表面的直接对手。事实上应用程序只是一种帮助用户达成目标的技术手段从用户角度，有很多可选方向，而你的产品想要获得成功，你就要做那个体验最好，满意度最高的选项。回想一下，便利贴的功能应用程序是否能实现？答案是肯定的，但现在为止并没有任何应用程序能够撼动便利贴的霸主地位。因此，滴滴的竞品真的只是其他网约车公司吗，事实上滴滴最大的竞品是出租车。通常，你最强大的对手并一定不是和你一样的科技产品。

3.通过标准来判断，而不是个人臆测

每次进行比较都意味着根据某个标准来进行判断，如何决定两者的功能孰优孰劣，最好的方法是引入标准或者用数据说话。例如竞品某个模块转化率高，那必然有其内因。另外，我们可以根据业界的标准来评判产品的可用性体验，如尼尔森的启发式评估原则（后面会详细讲到）。

4.盲目模仿是导致失败的罪魁祸首

在特定环境中行之有效的方法在另一环境中可能根本行不通。每个设计解决方案不仅是针对眼前的问题，而且还针对目标受众。请记住，良好的设计是仔细的分析研究产生的，需要付出大量的努力来与用理解用户，定义问题，并 根据上下文构思，最终产出最终设计和评估解决方案。

你可能会说，别人已经验证了的功能，我们没必要花费时间去重复测试，但他人的功能是针对特定的场景特定的业务目标，或许并不适用你的产品。所以，在模仿之前，请仔细考虑您的问题与原始设计师的方案匹配程度。

5.用户测试无可替代

在竞品研究中我们需要时刻保持怀疑的态度，在将竞品的设计应用于自己的产品之前，需要评估设计背后的需求、场景，以判断会否适合自家产品。这个过程可以没有用户参与，例如选择专家进行的可用性评估。但最终，在你决定将设计投入自己的产品时，你需要意识到只有真实场景下的用户测试，才能判断该设计是否成功。 

无处不在的“汉堡菜单”按钮。最初是Facebook率先取得成功的设计，现在有大量证据表明该设计带来了很大的可用性问题。通过将图标与其他导航方式（例如ios的菜单导航）进行比较的A / B测试，发现了这些问题。

时刻留意竞争对手的产品设计有利于你不断更新和迭代，从而保持竞争优势，但你必须知道，研究竞品只能让你和它处于一个水平，他不会教给你如何开辟新的想法，如何解决未解决的问题。并且能从竞品分析中收获的有效信息完全取决于你的个人能力和经验。因此保持质疑，持续思考，以创新意识探索更可能是UX设计师长远的目标。 

NNG的十项UI界面启发评估的原则

前面提到我们应该通过标准来衡量产品的设计，而不是个人的主观臆测。尼尔森的启发式评估原则就是这样一套可实践的评估标准，共有十项，主要涉及到用户体验、可用性的评估。使用这是个标准能够评估出大部分的可用性问题。

1系统状态的可见性

任何情况下都应该显示易于理解的界面信息和系统状态，以保证用户正确执行操作。

这其中其实不仅仅要求“可见”，也要求“隐藏”。因为系统界面的展示目的是使用户易于理解其中的信息，因此要清晰展示有效信息，同时隐藏无效信息和干扰项。概括来说这一项原则的关键在于视觉传达的效率，如CTA按钮高亮来聚焦注意力，文字链按钮添加下划线或箭头来传达可点击的状态等。

2.系统与用户习惯的匹配

设计师应根据目标用户的经验习惯进行界面设计，如使用符合用户认知的语言、概念、预测用户的常规行为方式如单手操作，减轻认知负担，并使系统更易于使用。

在电脑屏幕右键弹出的菜单窗口恰好在鼠标附近，因为用户当时视觉聚焦于此。移动端阅读类产品的目录按钮总在右下角，因为大部分人使用右手单手操作，而在IPAD端的阅读产品，目录置于左下角，因为用户一般需要双手持设备，此时左手点击目录更符合用户习惯。

当然，不仅仅要考虑用户操作习惯，更要考虑用户的心理预期。这就要用到隐喻，例如按钮按下后模拟出下沉的视觉效果，再如最早的阅读类产品模拟真实书架，还原用户习惯的书架浏览查找书籍然后阅读的体验。

3.用户控制和自由

产品应该允许用户自由控制自己的操作行为，例如可以撤销重做，或在不同内容间自由跳转。

4.一致性

界面设计人员应确保在相似的平台之间维护图形元素和术语的统一。例如，代表一个类别或概念的图标在不同的设备上使用时不应代表不同的概念。垃圾桶应当代表删除、回收等操作，而不是其他的语义。

5.防错

提前预测可能发生的错误，尝试尽量避免它们，将潜在的错误保持在水平。用户不乐意处理错误同时不擅长处理错误，为了减少用户遇到错误的，试着消除问题部分。例如验证码部分只允许填写数字，且自动唤起数字键盘无法切换字母键盘，这样就防止用户输入错误信息格式的可能。

6.降低用户认知负荷

人类注意力是有限的，不要尝试一次行给用户灌输过多信息，试着一次只展示一个核心功能或内容，每个步骤只用来做一件主要的事情。目前主流的注册流程都遵循这个原则，一次只进行一个步骤，输入手机号、发送验证码、填写验证码、登录成功。

7.灵活性和效率

使用更少的交互，让用户更便捷的完成目标，例如使用缩写、语音输入、自动填充等技巧。目前有些产品通过自动填充手机号码来提高登录注册效率，或自动填充短信验证码来提高验证效率，这就是一种优化交互来提高产品使用效率的方式。（但这种方式对权限要求较高）

8.美学原则与极简设计

减少混乱和多余的元素，不要争夺用户注意力，提供清晰可见的导航。根据海外的调研，有三到四成用户离开一个网站的原因是导航混乱不易理解。

9.帮助用户识别、诊断错误并恢复

采用通俗的语言解释错误的情况并提供解决方案或说明情况。

10.帮助文档

我们期望不需要说明文档（类似说明书）也能让用户正常使用和产品和解决遇到的问题。但我们仍然需要一定的说明文档，来解释特殊情况或常见问题，以保证用户在需要时能轻易找到解决方案。

文章来源：UI中国

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. 小结

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

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

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

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

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

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

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

总结

对本篇文章的拓展总结：

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

文章来源：站酷