什么是菲兹定律？

菲兹定律由心理学家Paul Fitt于1954年提出，它是物理世界中人体运动的数学模型。这一定律提出之后，在很多领域都得到了应用，但是在人机交互领域的影响尤为深远，可以说是人机交互领域的第一条定律，它通常被用来解释鼠标（PC端）和手势（移动端）在界面中的移动规律。这项定律尤其适合按钮等可点击、可选择、可交互的元素，目的：易于查找和选择。作为一个数学模型，菲兹定律是有表达式的，表达式如下：

T 是完成动作的时间a代表装置开始结束的时间，b表示该装置的速度，这些常数可从实测数据进行直线近似取得。D是起始位置到目标中心的距离。w是目标区域在运动维上的宽度。

结论： 离目标距离越近，所需的时间越短；目标尺寸越大，完成速度越快，时间就越短。也就是说，预测点击一个目标的时间，取决于目标和当前位置的距离+目标的大小。

---

如何将菲兹定律应用在交互设计上？

1 、放大可点击元素的尺寸

大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离，并且再进行精细的调整才能选中，这样不仅难以点击、且需要花费更多的时间。

这里的大指按钮的实际大小、也就是点击热区的大小，包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮，四周大量留白； 而移动端设计里通常会扩展宽度，使用各种通栏按钮，使用户操作更加容易和快捷，可点击图标也会放大可点击区域。

注意： 并不能无限的放大。大小给可用性带来的加成是有限制的，如果把一个很小的按钮放大，它会变得更易于点击；但是如果按钮尺寸已经足够大，那么再放大尺寸，也并不会提高可用性和用户操作效率。

2、 减少移动的距离

依据菲茨定律所言，距离目标越近，用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离，来提高用户的使用效率和交互体验。

1>减少绝对距离

因为移动端用户通常为单手操作，也就是大拇指为主要操作工具，在现在大屏手机泛滥的情况下，屏幕很多地方是单手无法触及的，所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。

2>减少相对距离

在两个或多个操作中，通过缩短可交互元素之间的距离来提高用户的使用效率。比如确认删除操作，因为它是重要的负向操作，所以对于双重确认，相比于在当前列表区域确认删除（如下图微信），如果使用弹框，那么用户手势的移动距离相对会更长（如下图淘宝）

p：对于微信来说，删除对话是用户比较常执行的操作，因此便利性应该更高；而淘宝更想阻止用户进行此操作。 也就是说并不是所有操作都需要缩短距离。

3 、相关元素靠近

相关的内容或者交互元素要彼此靠近，可以在视觉上增强他们之间的相关性认知

4 、屏幕的边缘和角落无限大

因为屏幕的边角有一个隐形的“结界”，可以阻止用户鼠标因为大幅移动而超出目标区域范围，因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落，而不用进一步微调。 所以屏幕的边角适合放置菜单栏、按钮这样的元素，不管箭头移动多远，最终会停在屏幕的边缘并定位到菜单上。 比如chrome浏览器它把TAB栏放在了屏幕最顶部边界，用户使用效率比较高。

---

其他补充：

1、饼状菜单会比线型菜单更易选择，而且错误率更低，这里面有两个原因：

• 饼状菜单的每个菜单项和菜单中心的距离都一致

• 饼状菜单的每个菜单项的楔形目标区域都非常大，一般都会扩展到屏幕的边缘

2、 目标点的位置实际上是边缘的一些像素加上边缘之外的全部面积。所以，这样看来目标点就足够大了。原因是基于fitts定律，它的一个分母的增大了而使得界面的效率提高了

总结：

1、我们想要更容易点击到控件，就应该放在屏幕的边缘或角落里。让常用的控件更大，更容易辨别；

2、使用屏幕的边缘和角落让控件有效扩大，永远不要把控件放在离屏幕边缘或角落一个像素远的地方；

3、边缘之外的地方，也可以算作目标点的面积，这样一来，目标的面积就被无限的放大了，也更方便用户操作。

补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画，先初步了解下:

作者：GIGI小王子

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本文主要聊一下产品中使用的几个交互设计原则，一致性，费茨定律，容错性，希克定律。

一致性

我们在做设计时，经常会讲到要保持一致。一致性的好处从外部来说，可以极大的提升产品的易用性，降低用户的学习成本，同时也有利于品牌形象的传达。从内部来说，将一些相同或类似的功能进行复用，提高团队的协作效率，让资源得到更充分的利用。

那么设计师该如何做到一致性呢?

一致性体现在产品中可以体现在很多方面，比如是视觉风格统一，交互操作统一。视觉上可以是配色、字体、图标、页面布局、插画，以及在不同终端上的统一。交互操作可以是相同相似功能在不同页面的呼出方式，一些地方动画的表现形式。

另外，产品与本身所处的行业内的竞品的一致性，比如音乐播放页面，用户已经习惯了上面是歌曲宣传图，下面是播放切换的控件，各个产品的排版布局都是相似的，这样的统一可以让用户没有陌生感，在接触一个新的音乐类产品时很快的上手。

 

滴答清单的网页端、桌面版、网页插件，将页面的主要功能信息都放在了左边，中间部分是清单列表，最右侧是清单详情，配色都是用了灰色、白色、浅蓝色，图标风格上使用的面型风格，这三个终端的视觉风格是保持了高度的一致，传递给用户的也是很强的品牌理念。

 

 

阿里云盘，App启动页和网页功能介绍，都是使用了C4D插画，来保证两个终端品牌风格的一致性。

 

 

微博App的详情页及他人主页，这两个页面的评论功能都使用了相同的底部弹出框的控件样式，用户可以在不用思考的情况下直接操作，这是利用了相同功能在不同页面复用了相同的交互控件。

 

 

 

费茨定律

简单点来说，有两个关键因素，两个操作目标的距离、操作目标大小。第一个因素意思就是在当前产品中两步操作，手指移动的距离越短，操作就越容易。第二个因素是当前操作目标越大，操作越容易。

 

石墨文档App。在页面右下角有一个悬浮的新建按钮，点击后从底部弹出活动视图，用户可以进行新建文档、表格等操作。这里使用从底部弹出活动视图，而不是在新页面或者页面中间，正是利用了费茨定律，缩短了两步操作之间手指移动的距离，降低操作难度。

 

 

 

滴滴出行、如祺出行

滴滴出行打车页面，App首先会自动定位你当前所在位置为出发位置，目的地一栏显示文案「输入目的地」。设计师将输入框设计的很大，文案字体也很大，在当前页面中非常醒目，极大的方便了用户的操作。这就是应用了费茨定律的第二个因素，当前操作目标越大，操作也就越容易。

反观如祺出行的打车页面，出发地一栏和目的地一栏的尺寸是一样大的，都是使用图标+文字样式，出发地一栏使用深灰色的图标、深灰色的字体，而目的地一栏图标虽然使用了橙色主题色，但是文字的颜色是浅灰色，字号也没有放大，非常不显眼。要知道用户当前的迫切需求是输入目的地，这样设计无疑是增加了用户操作的难度。

 

 

 

 

容错性

平时在操作产品界面时，经常会因为一些原因造成操作错误，而有些错误造成的损失是无法挽回的。那么设计师应该怎么避免用户操作中犯错呢？容错性原则可以很好的解决这个问题。容错性定义是：

“容错性是产品对错误操作的承载性能，即一个产品操作时出现错误的概率和错误出现后得到解决的概率和效率。容错性最初应用于计算机领域，它的存在能保证系统在故障存在的情况下不失效，仍然正常工作。产品容错性设计能使产品与人的交流或人与人借助产品的交流更加流畅。”

拆解一下，影响「操作时出现错误的概率」的因素有，操作前的引导提醒以及操作时的提示。影响「错误出现后得到解决的概率和效率」的因素有，操作后的解决方案

 

微信的修改微信号功能，不同于修改昵称直接进入编辑页面，微信在中间增加了一个页面，页面内容显示当前的微信号及提示文字，目的是提醒用户要慎重，避免有些用户修改了微信号之后后悔。这里是用到了容错性的操作前的引导提醒，降低了出现错误的概率。

 

 

QQ注册页面，用户输入昵称后，系统会检测昵称是否可用，及时给出给出提示。输入密码时会自动出现密码设置的提示，及时提醒密码都有哪些规则，避免用户输入不符合要求的密码。操作中给出这些相应的提示，可以使用户更加流畅的完成注册流程。

 

 

 

印象笔记网页版。将一篇笔记删除后，页面顶部会出现一个提示框，文案是「已将XX文章移至废纸篓」，提示框2、3秒之后自动消失。如果刚好这篇笔记是不小心误删的，这里的提示框给予了用户反悔的机会，帮助用户及时的找回笔记，弥补错误。

 

 

 

 

希克定律

希克定律，又叫是希克一海曼定律（Hick Hymalrs 1aw），是一种心理物理学定律。应用在产品设计当中，就是当页面中需要有不同选项时，要尽可能的少而简单，降低用户的决策成本。

 

美团外卖页面的金刚区，共有三行应用。核心推荐的5个应用是放在第一排，其他10个应用排成两排，核心推荐应用与其他应用在图标风格上使用了区别化设计，用户在进行选择时变成了5选1，而不是15选1。这是设计师在功能设计时针对应用做出了重要程度的区分，以帮助用户更快做出选择。

作者：不吃橙子D

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

除非有更好的选择，否则就遵从标准  —— 阿兰库珀

费茨定律：

距离：起始位置离目标位置越远，我们到达目标位置所花费的时间就越长，反之亦然。

目标大小：目标面积越大，我们定位到目标位置所花费的时间就越短，反之，目标越小，定位时间越长。

·生活中的费茨定律

刹车和油门踏板相距很近，刹车时的物理面积比油门的物理面积大，会最快接触到踏板，减少事故的发生。

·界面中的费茨定律

（1）距离目标位置尽量缩短，相关操作保持亲密性

例如：抖音的视频播放界面，系统会判断用户进行触发时手指与屏幕的接触位置，并将操作按钮显示在离用户手指最近的位置。

                                        

（2）目标尺寸大小要合适

目标点击热区在合适的范围内，越大越容易精准点击，越小越容易误操作。iOS交互指南中规定最小点击热区为44*44。

（3）拇指原则

人们在使用手机时，75%的交互操作都是由拇指驱动的，考虑到费茨定律，如果目标位置超出拇指的移动范围，操作成本增加。

米勒定律：

是交互设计中常用的一个定律，美国心理学家对人的记忆能力进行定量研究，他发现人的短时记忆能力广度为7±2个信息块，超过这个范围就容易出错，在7+2与7-2之间浮动。

·生活中的米勒定律

电话号码，银行卡号，身份证号码进行数字分隔，降低记忆成本，提高信息的易读性，视觉防错。

·界面中的米勒定律

（1）分段记忆，信息分层

文章、文本中的字号、字间距，目的就是便于读者记忆和提高易读性

（2）导航和选项卡不超过9个

网页设计的一级导航不要超过9个，如果导航和选项卡内容过多，可通过聚合按钮来包容其他次要入口。（用户使用导航就是要快速找到自己想要的内容，如不能快速查找，用户可能会就此流失掉）

（3）系列位置效应

首因效应：相对中间位置，我们对最前面的物体记忆清晰。

新近效应：相对中间位置，对序列末尾物体记忆更清晰。

席克定律：

是一种心理物理学定律，用户所面临的选择数量越多，花费时间越长，人机交互界面选项越多，用户决策时间越长。

·生活中的席克定律

遥控器按钮越少，越快做出操作；如交互设计四策略：删除、组合、隐藏、转移。功能层级也需要细分核心功能、辅助功能、边缘功能。而核心功能是进入产品第一个发现的功能，操作频率高，所以它的视觉应是最突出的，可以帮助用户增强感知和节约选择时间。

      

·界面中的席克定律

（1）减少选项并提供默认值

选项越多，用户决策的时间越长，减少用户思考的时间就是减少操作时间和学习成本，让用户不思考就做出正确的选择，对于小模块来说，一般选项不超过9个，9个以上可以用交互约束用户的行为，如展开收缩。

（2）选项分类分层，信息区分主次

在菜单栏的设计过程中，我们会进行同类分组和多级分层的设计，效率会更高。重点信息、推荐信息和普通信息要在时间上做区分，这样才能抢占视觉并在第一时间感知到。

（3）分步完成，分布显示

分解复杂流程，让用户一步步操作，而不是全部堆到用户面前，通过分步完成一个任务流，降低其他信息给用户带来的干扰。例如：用户填写表单时，可展示选项，当填完最后一项选“其他”时，再展开剩余的表单，目的上是为了减轻大量表单，给用户感知上带来的压力，达到场景细分的目的。

接近法则：

接近法则也是格式塔理论中我们最熟悉的，最常用的一种法则。观察者看到彼此临近的物体时，会将它们视为一体。

·生活中的接近法则

小区规划图中，会通过较宽的过道，绿植围栏来划分他们之间的关系，从而增强人们的感知。

·界面中的接近法则

界面中的接近原则是对相似的信息及功能类别进行分组、布局。作用是直接影响到用户与产品的视觉交流，引导用户的浏览及操作行为。

常见的在列表页面，通过色块区分大组与大组，分割线区分小组与小组，目的都是在视觉上通过组与组的区分来划分功能与功能之间的关联性。

以上这四条是我们在平常工作时都会用到的，我们再进行一个界面的设计时应该对照下以上几条定律，在与产品或开发battle时也能有理有据，告诉他我们「为什么这样设计」。写的手有些痛，剩下的4条定律下期我再继续补充，下期见～

作者：瞧见猫

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

八个交互设计原则帮你避免出现基础错误

1 一致性：一致性能给用户节约成本、元素风格统一和延续性、产品内部结构的一致性

2 反馈：操作成功或失败都有明确的反馈、告诉用户此刻的状态是什么会有什么结果

3 方便使用： 减法设计（扁平的框架设计—减少不必要的操作步骤，每个流程清晰没有太多分支）

重点功能随手可用 多选择少输入

4 预防出错/防错原则： 操作给予提示

5 帮助用户认识改正错误：如果出错要帮助用户从错误中恢复过来

6 高识别性：（复杂的交互要给与引导和帮助）

7 用户自由控制权：用户可以取消正在执行的操作 每个层级都能找到上一级的方法

8 符合用户的操作习惯

作者：why夏天的风

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

作者：TUTU兔

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

如果你是一位经验丰富的设计师，你应该会同意这个观点：从他人的作品中获取到灵感并不算偷窃他人的作品。这是属于在对设计进行深入研究呀，这也属于一种设计模式呀，而且还遵守设计规范呢。所以，当然要以用户们所熟悉的那些模式来创造出可用性界面。

不过，有的设计师则会认为，过于遵守设计规范，而且，经常性的从他人的作品中获取灵感的话，自己本身的创造能力就会下降，这就导致了这样一个结果——一天下来，你的所有APP都长一个样。

从交互设计的角度看，我们会发现一个问题。什么问题呢？

习惯性的去应用一些所谓的最好的设计模式，可能会让你觉得Google，Facebook，Instagram或者说其他的一些你最喜欢的APP总是做的非常棒，你会觉得，他们的设计目标和你自己的设计目标并没啥差别，但是，人家成功了，而你的作品却失败了。所以，这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式，可能在你第一次看来，这些设计模式也就那样。

1、隐藏导航

关于汉堡图标，已经有不下于50万的文章来争论它了。如果你一篇都未曾读过，试着去读一两篇吧。其实，简单说来，这些文章讨论的主题更主要的是这个图标里所隐含的那些导航，而不是这个图标自身。

上面图片这样的设计对于设计师来说其实是很有吸引力的，而且简直太方便了。根本不用担心屏幕大小的限制，只需要这样一个图标，然后，把所有的导航全部塞进这个可以上下滚动的东西里，然后，让他默认隐藏。就这样，就这么简单。

但是，实验证明，与完全隐藏导航相比，适当的展示出一些导航能够更多的增加用户的依赖度和满意程度，甚至为你带来更多的收入。所以说，现在的好多大公司的播放器都抛弃了以前的汉堡图标，将最常用的一些导航一直显示给了用户。

如果说你的导航比较复杂，那么，请在考虑优先级的基础上适当地隐藏导航。

2、图标，随处可见的图标

由于移动端的屏幕大小限制，许多无脑的设计师为了节省空间，在任何只要能够使用图标替换的文本域，都使用了图标。大家都这样想，象形文字或者图标占的空间又少，不需要额外的转换，而且，人们都很熟悉这些图标，难道不是这样吗？所以，每一个APP都这样做了。

设计师们将上面的那种假设放在脑海里，于是，有的时候，他们将实用性的功能蕴含在了图标里面，但事实上，那个图标是难以识别的。比如，你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗？

或者说，假如你从来没用过谷歌翻译，那么，你会期待下图的这个图标实现什么样的功能呢？

你总是假设你的用户们非常熟悉那些抽象的图标，或者说，你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误，很多设计师都会犯这个错误。

Bloom.fm上让人觉得迷糊的标签栏

如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标，那么，即使你的用户们会不管怎么样都能了解它，你的这个做法也是错误的。

当然，并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标，这些图标中，有很大一部分都是能够代表普通的功能的，比如搜索，播放视频，邮件，设置等等。(但是，用户们可能不会很确定当他们点击一个心形图标的时候，会发生什么。)

一些能够被大多数用户所识别的图标并且被认为是通用的

对于复杂的和抽象的图标，在显示的时候，应该总是在旁边加上一个文本来进行说明。这样，你的图标才是真正有用的。同时，还能够提高菜单的可发现性，也能够为你的APP添加漂亮的触感和个性。

Pixelmator的导航

对于基本的功能，可以使用图标来展现；但是，对于复杂的功能，就需要使用文本来说明了。(如果你要使用图标的话，要时常性的做可用性测试)

3、基于手势的导航操作

当苹果公司在2007年发布了iPhone的时候，多指触控技术就成为了人们关注的主流技术，用户们发现他们不仅可以在屏幕上进行点击，还可以进行放大，缩小和左右轻扫。

手势在设计们的圈子中流行了起来，许多的APP都围绕着手势操作来进行设计。

Clear里的手势操作

就像隐藏的导航栏和使用图标代替文本一样，手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在，人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)

关于手势，你首先需要知道的是，手势是不可见的。人们需要记住它们，就像汉堡菜单的例子一样。如果你隐藏了一个选项，那么，用到那个选项的人就会越少。

另外，手势存在着与图标相同的问题：众所周知的手势有点击，放大，上下滚动，同时，每个APP也有那些需要慢慢发现和学习的手势。

不幸的是，触屏界面的设计仍然是一个新的领域，在各个APP中，大多数手势还不标准和统一。一个很简单的手势，比如左右轻扫，在各种各样的邮件APP中可能都会大相径庭。

在Apple的Mail APP中，向右轻扫，显示出了“标记为未读”的选项

同样的手势，在Mail Box中，就表示将邮件存档

或者说，想一想，摇晃你的手机，在两个APP中，也会有两种不同的含义。在iOS中表示撤销，在Google Maps中表示发送反馈信息。

永远都要记住，手势是隐藏的操作，人们不得不去记住它们。对于你的用户，这需要大量的努力。如果你是一个发起人，也许你可以让全世界的向右轻扫的含义都一样——但是，只有当它是你APP的概念设计里必不可少的一个部分的时候。

4、新手引导

新手引导，最近很火的一个话题，适用于用户第一次与APP打交道的时候。在很多情况下，这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。

dcovery APP里的新手引导

为什么说这是一个很烂的解决方案呢？因为许多用户都会跳过你的介绍，他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记，当他们把这个关掉的时候，这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的，在你的屏幕上添加这些引导的标记，并不会提高APP的易用性，记住下面这句话：

原图翻译：用户界面就和讲笑话一样，如果这个笑话还需要解释才能明白的话，那么，这也不是一个好笑话。

对于你的用户来说，新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP，使用第一屏来创建一个用户场景。简单的介绍一下他们自己，着重于利益而不是屏幕上的功能。

留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo，他没有向用户们解释这个APP是如何工作的，而是促使人们做一个指定语言的快速测试(甚至不需要登录)，因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时，这也是展示这个APP的价值的一个更有影响力的方法。

记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗？看看他们的逐步引导是如何做的：用户们在开始使用APP之前，必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。

在你准备在一个半透明的覆盖层上设计你的引导标记的时候，停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境，通常情况下，有更好的方法来欢迎你的用户们。

5、充满了创造力，但是并不直观的空白状态

很多没有经验的设计师很容易忽略APP的空白状态。但是，从一个APP的整体用户体验上来说，这是一个很重要的方面。

有的时候，设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。

比如下面这张Google Photo的空白状态界面：

第一眼看去，简直太棒了不是吗？一个漂亮的矢量图加上完全符合设计规范的布局。

但是，再看一下，就会觉得有写奇怪的东西了：

・这块屏幕里什么收藏也没有，但为什么这里会有一个那么显眼的搜索按钮呢？难道是想让用户在什么都没有的界面里搜索什么？

・第二个很显眼的元素就是这个矢量图，很明显不可以点击(虽说会有很多人去尝试点击)。

・屏幕上的提示说，我应该找到在顶部的那个超级不起眼的“＋”标志。为什么这个提示自己不包含一个添加按钮呢？就像是在说“点击继续按钮来继续”

总而言之，上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境：

・什么是收藏？他们为什么有用呢？

・为什么我什么都没有呢？

・我可以做些什么吗？(我应该做什么？)

当需要创造力时，越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)

在Lootsy里的空白状态屏

记住，空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上，他们更为重要。要让空白状态更为直观。

多问多想

不要说我是错的：设计模式和最佳的实践仍然是你的好伙伴。但是要知道，APP和用户是不一样的：在一个APP里能够适用的方案，在你自己的APP里，也许就一点不适用。这不是一个通用方案就能解决的事情。另外，你永远不可能知道为什么一个APP会以某种方式来设计。

自己要多想想，多设计，多研究。

衡量，测试，验证——如果能够做得更好，就不要害怕打破设计规范。

作者： 郑小小莊

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

交互输出文档的作用

文档这个东西，我们又爱又恨，爱的是它能够记录并且在工作中让大家高效的协调合作，恨的就是很多人对文档嗤之以鼻非常敷衍，以至于文档不但没有起到它应有的作用，反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色：交互、产品、开发、UI

交互

首先优秀的交互文档必须在交互组内部进行过审核，包括一致的撰写标准和模式的使用，一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的，以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明，那么你的交互输出文档就必须满足团队设定的规范。

其次对于其他交互设计师来说，你的设计方案中是否会出现其他人负责的模块，那么在评审的时候需要同步，虽然交互输出文档对于其他交互来说不是直接受益人，但是在团队同步过程中也是非常重要的。

产品

每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位，那么可能产品连prd文档也没有，仅仅只是一个简易的需求说明文档，就更不用说针对交互规则的说明文档了。

很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的，一共在项目中会有多少文档产生。

通常产品经理会在项目初期做一份prd文档（Product-RequirementDocument，需求说明文档），这个prd文档主要是给业务方、交互和开发看的，在这个文档中需要包含一些业务规则以及交互规则，所以交互的输出文档是需要和产品的prd文档合并的。

当然如果你是一位很有自驱力的人，那么你可以自己推进需求并落地，一个人就可以完成prd文档的撰写和需求的落地了。

开发

特别想给各位提个醒，在开发需求评审的过程中，请一定记住你们评审的目的，开发同学也要注意，请把重点放在需求是否能实现以及开发相关的地方即可，请不要考虑为什么要这样做，或者你觉得应该怎么设计，一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧，可以私下讨论但不要在评审会上各抒己见。

交互输出文档对于开发的作用就是，开发可以更好的还原该功能中交互的跳转以及逻辑，所以我们尽量把交互规则写明白写详细，比如按钮在press和default时候是否样式会有变化，或者页面转场的方向，这都是一些细节，减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则，就是因为文档中没有描述准确，所以开发和交互都需要花时间去同步这个细节。

所以这个也非常考验交互设计师对需求文档撰写的功底，并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计，你把文档写好了，开发看起来也舒服，满意度也高。如果是一堆文案，连基本的对齐都没做到的话，谁来看都会看不下去。

UI

交互输出文档对于UI来说，作用就非常简单了，但是这里也会碰到问题，那就是交互同学只需要把信息的层次表示出来即可，千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火，就是因为交互和UI其实重合度是很高的，只要有智能化组件库和工具做支撑，那么在交互和UI的设计流程中，时间就会大大降低。

交互输出文档的内容

在这里，我们就将整个prd文档的内容给大家分享一下，不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同，大家做参考即可。

一份基础的prd文档主要由这几部分组成（其实就是这个需求的来源以及推导过程和如何落地的说明）：

1.项目概要

a.需求背景

这个是一个项目最重要的部分，可以说背景没有搞清楚，后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方（运营）需要做一个扫一扫功能，那么这个功能首先我们就从业务价值和用户价值两个方面去评估，根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码，让用户进行扫码参与活动这样的玩法。

所以这个需求对于业务方来说是一个转化手段，通过扫码参与活动-领券-消费，确实是一个不错的玩法，但是大家如果只盯着眼前的问题或许就不够了，比如当周年庆结束之后这个功能还有什么用，他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。

其次，对于用户来说，扫一扫并不是帮助他们解决了某个问题，而是我做了一个东西，同时搭配着这个功能让你们去使用，对用户来说是一个很可有可无的功能，如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述，既然要做一个临时的活动用其他的方式会不会更好？

所以在这个文档中的第一步，首先就是要确定需求的背景、价值，也就是说，你这个需求是怎么来的，比如再来讲我们一个店铺的优化项目，在这个项目中，首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版，一定是出现了或者我们定义到了某个比较严重的问题，这边大家对我们app业务可能不是很了解我就简单说了，就是个人中心和店铺营销场景重合过多，并且卖家的同时可以买和卖两个场景存在，所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点，以及我们必须突出一个核心场景让用户有明确的分辨。

另外就是背景的描述也可以带上你的调研结果和分析，比如之前我们做首页优化，我们观察了近5个月的数据，都呈现下降的趋势，所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。

b.需求目标

目标很好理解，就是我们希望通过这次需求迭代达到一个什么成果，比如我们之前做过一次整体的体验优化改版，那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率，其中我们做了一个商品关注的功能，由于是限时特价商品所以是限量的，在规定时间进行抢购，为了让用户的使用场景统一我们打算在应用内做一个商品关注功能，所以在这个需求的初期，我们对这个功能的目标和预期是提升xx百分比的转化，提高x%比的gmv，提高用户对关注商品下单的效率和满意度，之前很多用户想要购买商品需要自己在手机端设置闹钟，不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后，就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。

可以用一句话来描述：针对什么用户在什么场景下解决用户的什么问题，达到什么目的？

c.需求范围

需求范围也相当于范围层，指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子，之前说的扫一扫功能，不同的产品定位对于扫一扫功能的要求也是不同的，比如说微信在扫一扫功能中承载了：扫一扫、相册、封面、街景、翻译、手电筒等诸多功能，再比如淘宝，有扫一扫（ar、拍立淘）、相册、历史、帮助、手电，这说明了不同产品对扫一扫功能有不一样的要求，所以在需求范围内我们需要把本次需要做的功能进行描述，并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分，在表格中编辑。

d.调研分析

调研分析其实就是为我们第一步背景和价值做准备，由于汇报方案和评审，或者在项目推进时，我们需要有相应的论据来支撑我们方案的客观性，所以在这一板块中输出的结论就非常重要，比如之前的首页改版，经过用户研究小组的访谈和数据分析得出相关的结论，通过埋点找到相应板块的点击数据和异常点，然后再进行一系列的问卷和访谈研究，找到结果，都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。

e.版本日志

日志是一个非常重要的组成部分，做过开发的同学都知道log 的重要性，当我们跑不通的时候我们都会去检查log，然后多测试几遍可能就找到问题所在了，其实我们的版本日志的作用也是这样，但是一个是对自己来说可以记录自己的工作过程，还有思路的变化，第二就是对外，包括和需求方的讨论，会议的纪要等。

要注意的是会议纪要在备注中需要详细说明，以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录，比如各部门负责人对方案和需求的建议，业务方和技术负责人的一些建议也会放在项目概要中，而这个prd文档也可通过内部服务器进行实时更新和保存，如svn。方便大家对需求的进度和迭代有一个直观的追踪。

f.项目成员

这个就不用多说了，产品、运营、交互、视觉、开发各司其职，照相馆人员即可，就不至于当项目开始进行了人员分配还没到位就尴尬了。

2.需求方案设计

a.业务、任务、界面流程图

有些同学不是特别明白业务流程图和任务流程图的区别，这边给大家简单介绍一下

业务流程图：

意思就是在这个需求系统中，相关利益者的业务关系，任务信息的流向的一个图标。比如这个简单的例子，用户在点外卖这个场景中，相关的利益者有用户、店家、外卖员三者，那么当用户开始触发流程后，这3者在这个流程中就会各司其职，而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。

任务流程图：

用户在具体执行某一个任务时候的工作流程，以及其核心任务的操作步骤，比如在登录注册这个任务中，用户需要进行一系列的操作，在这个流程中用户的操作引发的系统判断需要详细说明。

界面流程图：

界面之间的跳转关系和路径，在这个流程图中，我们不需要吧详细的说明写上，只需要将需求中涉及到的页面跳转进行叙述即可。

b.相关说明和规则

接下来就要开始我们交互文档最为关键的部分了，如何书写交互说明，以及交互说明应该包含的内容。

1.全局思考

在做交互方案也就是我们画原型的时候会思考一些问题：

a.整体思考

1.信息架构是否容易理解，信息分类是否合理，比如我们的信息架构是否采用了用户容易理解的，市面上常用的信息架构。

2.信息层级和路径是否合理，不一定要最简，但是要高效，信息的优先级是否放置准确，信息组织是否具有相关性、逻辑性。

3.主题是否清晰，3秒内告诉“我”在哪里，并且可以做什么

4.方案的延展和后续功能规划的可扩展性

b.用户权限

根据不同用户的权限对该需求进行检查，比如普通用户、vip用户、内外网用户、游客用户，在登录未登录时候对需求内功能的使用是否有影响

c.登录方式

用户登录和注册、终端的兼容，不同方式注册的用户是否需要补填相关信息等等

d.流程

1.该需求中的功能流程是否和其他类似或者相同功能流程保持一致性；

2.逆向流程和非正常流程的思考有没有完全；

3.流程的闭环有没有做好；页面跳转的方式是否合理；

4.中断后的恢复状态如何呈现；

5是否保留原信息等等

2.内容、状态和显示

a.内容的获取来源

例如下方的图片为例，banner的图片来源和发现feed流的图片来源肯定是不同的，那么就要写清楚，图片或者数据的来源是来自于用户的上传还是系统后台的配置获取；并且获取的方式是如何的，是需要手动下啦刷新还是切换页面自动刷新，还是设定时间自动刷新。

字段、图标是从接口获取还是前端写死，以及气泡展示的规则等等。另外一张图片可能用在多个地方，而可能呈现的尺寸不同，所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。

b.缓存机制

图片以及一些资源通常我们需要对其进行缓存，有些同学不清楚什么是缓存，缓存是在计算机上的一个原始数据的复制集，一般来说需要缓存的内容是通过浏览产生的，包括图片以及cookie等，浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同，无网络那肯定只能读取缓存文件，wifi环境下缓存时间可设置的短一些，而流量环境下时间就可以设置的偏长。

c.状态

状态大家都应该都会写，主要包含的就是初始状态（冷启动无缓存第一次进入）、空状态（无任何内容比如空的购物车）、常规状态、异常状态（网络中断、接口报错）还有过期状态等

d.显示

数据和内容的极限值，最大和最小，比如粉丝和关注的数量，小于1万人则显示完整的数量，大于等于1万小于11000则显示1万，大于11000小于12000则显示1.1万，这样的方式。另外包括标题极限为一行显示，超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元，小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等

3.反馈、提示、手势

反馈和提示的样式有很多种，一般反馈指的是用户对某一个控件进行触发后获得的反馈，比如按钮按下的反馈，以及之后收到的反馈，是进行跳转还是给用户提示，采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功，比如退出某个图文编辑会二次确认是否退出，再比如抖音长按后出现的3个操作反馈，还有支付成功后的动效提示、恶意多次操作后的提示等等

如果有手势交互也需要说明，比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等

4.加载

使用模态还是非模态，如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态，根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容，再加载图片，可以先将图片模糊化粗渲染给用户呈现，包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载，例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。

加载的全局方式在方案中需要考虑，页面加载、下啦刷新等等，需要统一。

5.环境、设备与场景

a.不同设备、厂商的不同版本

都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好，但是小屏幕的时候这个交互控件显得就很难受，所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。

b.白天和晚上是否需要做不同的风格设计，以及在是否需要给用户遮挡隐私的功能。

6.文案

文案这点很多设计师都忽略了，你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的，就好比我们说产品有它自己的性格一样，另外文案的使用直接就影响用户对该信息的理解，比如一个对话框的文案是：确定退出吗？下面会有两种不同的选择，一个确定，一个是退出，大家觉得哪个比较好？还有就是不加“吗”，就变成了：确定退出？这样描述出来的语言给人感觉很冰冷，甚至有一些威胁。

所以首先我们的文案是否有温度，和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂，比如你告诉程序员一句话，帮我去菜市场买西瓜，如果有西红柿，帮我买两个，你会带什么东西回家？程序员版：if（看到西红柿）西瓜等于2；else 西瓜=1。buy 西瓜。条件：看见西红柿 执行命令：买两个西瓜一语道破版：其实吧，看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜，看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化，也说明了一句话没有表述清楚所带来的问题是很大的。

另外就是文案用语的一致性，在整个产品同样的场景中，我们需要统一文案用语。

7.常见控件

具体见下方列表

8.撰写方式

作为一个设计师，不管是否在做视觉，我们都需要对文档有一个美化意识，如果你的文档非常凌乱，那么在别人眼里就会觉得你是一个比较粗心大意，不够负责任的人，所以我们尽量在做交互输出文档的时候也画的美观一些。

目录

首先在目录的撰写时候要进行分类，通常我做的时候会对该需求以页面父子集关系进行创建，父集为核心页面，子集为其下的相关子页面，这样页面的流转和归属关系就不会搞错。

说明

在撰写规则与说明时可以通过标签法进行标签说明的撰写方式，同样在视觉上保持美观，对比与对齐的运用，具体该写什么东西上面已经说明就不赘述了。除了交互规则以外，高阶的交互设计或者产品经理还需要补充业务规则，比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。

总结

文档的形式有非常多种，针对不同的公司和产品也需要作出相应的调整，能够满足需求和方便协作，目的就达到了，我们并不希望过多的时间花在文档的撰写上，而是希望大家在做设计时多思考业务，本次分享就到这里啦～

作者： 应骏

转载请注明：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司