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

不过，有的设计师则会认为，过于遵守设计规范，而且，经常性的从他人的作品中获取灵感的话，自己本身的创造能力就会下降，这就导致了这样一个结果——一天下来，你的所有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咨询、用户体验公司、软件界面设计公司

      在数据可视化的分析过程中，用户是所有行为的主体，通过获取的可视信息形成认知，在交互分析过程中获取解决问题的方法。

     在这个过程中，感知和认知能力直接影响着信息的获取和处理进程，进而影响用户对外在世界环境做出的反应，这也是设计数据可视化产品服务蓝图的基础逻辑。

     从数据到知识有两个途径:交互的可视化方法和自动的数据挖掘方法。

     我们可以看到，下图展示的便是一个典型的可视分析流程图和每个步骤中的过渡形式。这个流水线的起点是输入的数据，终点是提炼的知识。

     可视化的首要任务是准确地展示和传达数据所包含的信息。根据预期和需求，提供有效辅助手段以方便用户理解数据，从而完成有效的可视化。

     但是当出现数据尺寸大、结构复杂的情况时，有限的空间大大限制了静态可视化的效果，有限的可视化空间和数据过载之间的处理是非常复杂的。有时我们会通过物理环境的变化来改变服务模型，但是更多时候我们需要通过交互设计来完成对复杂信息的处理，提升用户对数据解读的便捷性。

     那么当我们在设计一张数据大屏时，我们该如何通过交互提升用户获取有效数据的效能呢，下面我们一起来探讨如何完善大屏设计中的交互设计：

一、信息架构

1、清晰易理解、可拓展的信息架构

2、清晰易理解的导航关系

3、清晰易理解的层级关系

案例分析：

在我们收到原型图时，首先我们需要梳理清楚大屏的信息架构，比如整个大屏的模块比例是按照1:1:1还是1:3:1的结构。又或者是如何设计重要功能的入口，比如整屏的导航tab选项，在布局设计上用户是否可以明晰它是是否是全屏筛选，在交互逻辑上用户是否可以通过最短的路径快速筛选抵达内容。那么当用户进行了导航的切换后又返回到上一页面，整个行为是可以形成路径闭环的。

二、流程设计

1、可下钻的模块需给用户以引导

2、相同功能的用户体验路径需保持一致

3、逆向流程的功能设计能形成闭环

案例分析：

我们经常会在大屏中间设计地图的样式来展示某个省的数据情况，比如，如图所示，当业务侧需要从湖北省跳转至武汉市，查看武汉市的详细数据，那么我们可以在省级地图轮播的数据气泡上给予用户以提示，用户可以清楚获取到跳转市级大屏的路径方法。

三、界面展示

1、一致可控的图表组件

可视化大屏中最核心的数据展示形式就是图表模块，我们需要正确地展示图表组件外观与组件关系，把控好相似功能的横向一致性，我们可以细分为以下几点。

（1）选择正确清晰的图表组件

（2）正确表达组件元素之间的关系

（3）一致性的组件样式和交互行为

（4）不要忽视组件的不可用状态（按钮）

（5）删减影响用户视线和注意力的冗余元素

案例分析：

当一个模块内需要展示数据的多个维度，我们如何将该模块设计得更加清晰呢。如下图，根据人从左往右的阅读习惯，在左边展示数据1和数据2的总指标数，在右边展示数据1和数据2的详细走势，右上角我们还可以添加tab选项，用户可以进行tab切换查看更多维度的数据内容。

所以，我们可以将用户使用习惯和交互行为很好地结合起来，不仅免去了图表多乱杂的场景，用户也可以更快地查看到想要获取的数据信息。

2、清晰的数据展示

配合图表展示的就是我们的“数据数字”内容了，在我们将设计稿传递给前端同事后，填充真实数据后的视觉效果可能看起来没有效果图规整，一方面在进行绘制效果图之前，可以与产品业务侧共同探讨数据内容，尽量给视觉设计师提供真实的数据，另一方面，在我们作图搬砖的时候，也要注意一下几点：

（1）不要遗漏了“无数据”的缺省空界面，当无法获取到数据时，我们需要给前端提供这样的缺省图；

（2）清晰的数据排序规则，比如环形图中，总起始点到终点，数据对应的数值量应该是递减的排序规则；

（3）考虑数据的极值情况，比如在搜索列表中学校名称文字的极限字数是多少，超出多少字用省略号显示，这些我们都需要考虑到；

（4）是否需要标明数据的更新时间节点，有的大屏强调数据实时性，我们经常会在右上角增加数据截止更新时间来来引导用户；

（5）特定的数值按照特定的格式和单位显示，比如羊字符能让用户第一时间识别到是人民币，而如果金额数字过长后面再加元会降低识别效率。

案例分析：

3、选择与输入的信息反馈

（1）展示合适的首选项或默认值

（2）输入前有效的文本提示

（3）输入完成后需及时反馈

案例分析：

4、用动效进行有效的交互引导

     利用动效进行交互引导，即使大屏操作链路过长，也可以让用户快速上手操作，减少流程学习时间。进入下一场景后，又会有对应的区域提示用户返回全局或查看其他场景；当做到层层有响应，就能减少用户在每一步操作上的困惑时间，帮助用户快速上手操作流程，并且大大提升工作效率。

     但是我们需要注意的是，不要为了酷炫而做太多无用的动效，不仅会让页面加载速度慢，也会让用户觉得杂乱无重点。

     总结：

     交互可提高可视化系统的效率，帮助用户处理更多的数据，完成更复杂的任务。然而，实现交互本身也有额外成本。互动的系统可以使用户能探索更大的信息空间，但随之而来的成本是用户需要花费更多的时间与精力去浏览和探索数据。

     因此，可视化系统应当采用数据挖掘算法自动发现用户可能会关心的数据或者模式；并通过可视化呈现给用户，用户在这个基础上通过互动进行更深入的挖掘。设计师的设计决定了系统的可理解性，一旦掌握了这个逻辑，再复杂的页面也会变得有条不紊。

     我们仍需在数据可视化的道路上不断探索挖掘数据价值，给决策者提供有效的数据分析支撑，让设计驱动数据价值最大化。

一、什么是格式塔原理？

        格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。

       格式塔学派主张人脑的运作原理属于整体论，“整体不同于其部件的总和”。例如，我们对一朵花的感知，并非纯粹单单从对花的形状、颜色、大小等感官资讯而来，还包括我们对花过去的经验和印象，加起来才是我们对一朵花的感知。

       格式塔心理学家认为这些原则之所以存在，是因为头脑具有天生的倾向，可以根据某些规则感知刺激中的模式。（是不是觉得hin神奇）

       比如，这是著名的“人脸花瓶幻觉”图。如果以黑色为背景，白色为图形，则是一个花瓶；如果以黑色为图形，白色为背景，则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。

二、格式塔原理分析

1、接近性原理
接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近（相对于其它物体）的物体看起来属于一组，而那些距离较远的则自动划为组外。             

接近性原理的应用1--将相关元素彼此靠近放置

使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如，在Ant Design的标题区域中，“ 搜索”功能与站点的主要导航位于同一行。但是，主导航和搜索之间的多余空格表示它们属于不同的组，因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出，此空格至关重要。

但是，在较小的屏幕上，无法保持此间距。为了避免将这些区域视为一个整体，页面收缩宽度的时候，搜索后的文字隐藏了。

接近性原理的应用2--构建清晰的结构

应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益，从而有效地将标题与下面滚动的页面内容区分开。此外，大页脚的单一统一背景色  可有效地表示该区域中的所有链接都属于一个组。

创建清晰的边界是一种强大的视觉提示，可以压倒其他分组原则，例如接近性或相似性。因此，当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时，它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分，那么我们可以用线框画出边界来达到目的。

2、相似性原理

如果其它因素相同，那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理，这也就是我们平时做视觉设计时的原理，比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状？为什么这里用这个颜色？为什么这两个尺寸不一致？等等，细细体会这个相似性原理就会给我们答案，让我们在画设计稿时能够有理有据。

A相似性原理之形状：

在上图中，我们头脑中自然而然的会分成“四列”，也就是圆形一列，三角形一列，然后再圆形一列，三角形一列，而不会看成“三行”

B相似性原理之颜色：

应用共享的颜色来表示某些项目是相关的，因此可能具有相似的功能，这很有效。通用颜色往往比其他特征（例如形状）更加突出，因此可以用于组合不同类型的元素并传达它们确实相关。        

在用户界面设计中，颜色通常用于指示常用功能。例如，使用单个链接颜色作为与用户交流可点击内容，链接颜色应仅保留给交互式文本和其他可单击元素，因为用户会意识到所有具有此特征的项目都是相关的，并且以相同的方式工作。因此，链接颜色不应用于关键字，不可点击的标题或实际上不可点击的附近图标。

如上图，就是一个用色的反面例子，“ 消息中心”中的所有按钮均为绿色，因此用户必须花时间确定哪个是提交表单的主要按钮。（此外，“ 提交”按钮离消息区域很远，并且根据Fitts的定律，这种缺乏接近性也会降低用户的速    度。）

相同颜色的按钮将被视为具有相同的重要性级别。因此，应为主要操作性按钮保留单独的颜色，以帮助它们在辅助按钮中脱颖而出。

C相似性原理之大小：大小也可以用来表示关系。大小相似的对象可能被认为是相关的，通常具有相同的重要性。

在用户界面中，我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度，并且在所有其他条件相同的情况下，将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构，并使页面易于扫描，因为人们可以立即看到并理解这些类型分组。

例如，在产品列表页面中，每个单独的产品列表都以相同的大小（和相同的形状）显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时，就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。

下面是我最开始尝试的招聘系统首页的改版：

根据上面的相似性原理和接近性原理就可以很容易看出来，这个页面结构和逻辑不清晰：

1.待处理和招聘日程两个模块之间的区分不够清晰：因为这两个模块右侧应用了同样的形状和颜色的按钮（相似性原理），让用户在心理上产生联想，同时这两个模块之间只靠间距来区分，区分的太弱了（接近性原理）

2.招聘日程头部日期与下面的面试安排卡片联系太弱：因为面试卡片用了非常强的边界区分的线条（接近性原理-构建清晰的结构）确实在面试模块之间构建了清晰的结构，与此同时卡片与头部的日期之间看起来没有什么关联。

3.首页的选中效果太弱，分析这个页面的层级，左侧首页选中才应该是最重的，能让用户第一眼就知道在系统中的位置，很显然目前来看很容易忽视首页这个位置，关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。

根据格式塔原理中的相似性原理和接近性原理，对页面的结构进行了调整，就看起来清晰多了。

所以，我们在制作完设计稿后，可以应用格式塔原理，分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。

3.连续性原理

视觉倾向于感知连续的形式而不是离散的碎片。

连续理解起来是很简单的，但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。

    

 4、封闭性原理

视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

闭合可以实现统一整体，这不难理解。但是有一个非常有趣的现象值得我们去观察和思考，就是不闭合时候也会实现统一的整体，更确切的说，这种现象是一种不完全的关闭。这些图形与设计给人以简单，轻松、自由的感觉。所以，完全的闭合是没有必要的。最著名的应用便是苹果公司的logo，咬掉的缺口唤起人们的好奇、疑问，给人巨大想象空间。

5、对称性原理

我们倾向于分解复杂的场景来降低复杂度。

6、主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。这个原理经常会在海报设计中应用，这也是为什么我们做海报，做平面时，一定要制作好背景，背景的氛围很重要。

前两篇，探讨了个人对交互设计价值观的理解，以及其对从业者和用户的价值。

这一篇，我们就来探讨一下，如何做到之前提到的 4 点价值观。

先从“周到“开始。

仅为一家之言。欢迎留言交流，说出你的看法。

01 怎样算是周到？

本着严谨的态度，先捋一捋概念。

常言道，金杯银杯，不如百姓口碑。

同理，周不周到，最终还是用户说了算。那用户是怎么评判的呢？通常是凭主观感受。

拿上篇文章中网易号文章编辑页面的例子来说，因为“保存”和“存草稿”功能做的不够好，所以给笔者留下了不够周到的印象。

翻译过来，就是，一些体验细节，影响了用户的印象。

《设计师要懂心理学》这本书中有条原则，叫“整体认知主要依靠周边视觉而非中央视觉”。

讲的是视觉和 UI 层面的用户认知。就是说，用户会关注并不显眼的边边角角的设计，而且这些边边角角的设计会影响用户对整体设计的认知和印象。

举个例子。假如说，微博信息流页面的扫一扫图标，在风格、大小等方面和其它图标不统一，就会给用户留下比较糟糕的印象，用户很可能会觉得微博的设计不够专业。

这些是 UI 设计层面的。在交互设计层面，也是类似的道理：体验细节会影响用户的认知。

总的来说，至少在常用的交互细节上，不要给用户留下负面印象，也不要让用户产生负面情绪，避免所有的不周到，才算是周到。

02 如何做到周到？

个人觉得，最关键的地方，是满足好小需求。

啥是小需求？

个人观点，笼统的讲， 小需求是一种共性需求， 主要是一些体验细节。比如信息的分类与展示、衔接不同页面的各种弹窗与提示、对各种状态的提示、对各种情况的到位解释，等等。

有小需求，就有大需求。

所谓大需求，更多是一种个性需求， 不同的产品，会有不同的大需求。比如短视频产品，它的大需求会包含视频的拍摄、上传、播放等；资讯类产品，它的大需求则包含文章的撰写、编辑、发布、查看等。

工作经历，笔者见过一些交互设计不够周到的产品。它们的共同特点就是： 大需求基本上得到了很好的满足，小需求没有得到很好的满足。

这一大段，就围绕如何更好的满足小需求来展开。主要建议如下。

1 工欲善其事，必先利其器

笔者有个客户，是从事教育行业的，之前并没有接触过互联网行业的产品与设计工作。

这位客户找到笔者的时候，是想要设计一款小程序的界面。当时客户非常自豪的对笔者说，这个（原型）是我用墨刀画的，现学现做。

说起墨刀，本人也用过。和 Axure 相比，确实好用太多，在简洁性和智能性方面，感觉和 Sketch 有异曲同工之处。

关于墨刀如何好用，网上已经有太多溢美之词。笔者就结合自己的使用经历，简单总结一下：

1 好用，上手快。零基础，只要会操作常用办公软件，简单学一下就能上手

2 内置主流控件（iOS，安卓，WeUI等），非常方便

3 能在手机端预览。加入链接和动效后，会很酷

4 能查看页面之间的跳转逻辑。借助工作流功能，可实现这一点

以上主要是墨刀自身的优点。结合本段主题，我们再探讨一下，对于日常工作，墨刀这把利器有哪些优势。

1.1 可以把更多精力花在创作上

当我们不会用一款工具时，通常会有一些挫败感。如果必须要用，接着很可能就会有一点焦灼了。

而墨刀，基本上不会让我们体会到这些感觉。

我们也不用花无谓的时间去学习一些艰难的高深的技法，而是可以把更多的时间花在“创作”这件事上。

1.2 可以更好的去满足小需求

部分公司，可能面临如下情况。

公司没有专门的交互设计师，产品的原型由产品经理来画。产品经理本身还兼任项目经理。

如果项目又特别赶，客观上，产品经理确实没有太多时间去关注交互的体验细节。

主观上，如果产品经理对这些交互细节的兴趣或重视程度不足、同时产品经理上面的决策层也不去抓这些体验细节，最终的结果，就是产品的原型上可能会丢失很多体验细节。

笔者就有类似的经历。

一款 App，产品经理用 Axure 画的原型。评审或宣讲需求的时候，大家都是在电脑或会议室大屏幕上来看这个原型，同时所有人最先关注的是大需求。

理解完大需求，会有部分同学就大需求提出自己的看法或建议。最后，才会有部分同学就小需求指出不足并提出建议。

受限于职责、时间等各种因素，大家也不可能针对小需求提出太多建议。结果就是，仍然会有相当数量的小需求被遗漏，或者没有被很好的满足。

墨刀有两个功能，可以较好的规避这些问题。一个是工作流功能，一个是手机端预览功能。

工作流功能，类似流程图，即把所有页面以合乎逻辑的方式链接起来。客观上，会促使我们画出所有包含小需求的页面，包括弹窗、状态提示等。

支持多人的手机端预览功能，使得我们在手机上，可以通过点击等方式来模拟体验这款 App。这样的环境下，我们会更容易理解大需求，也更容易发现小需求存在的问题。

所以，个人的建议，就是用墨刀来画原型，同时把工作流和多人手机端预览（针对 App、小程序）这两项，作为硬性标准。

2 去用去感受

一款产品，在体验或使用时，非常容易发现问题。

因为这时候，我们可以松弛下来，把自己切换成普通用户。忘掉所有费脑子的需求和设计原理，只依赖经验和直觉来用这款产品。我们的主观感受，会告诉我们，这款产品的交互，到底周不周到。

据陆树燊的《微信团队的实验室文化》一文显示，张小龙评审微信的功能，不看原型图，不看设计稿，也不看 Demo，而是体验前后台代码开发好后的产品。这就意味着，如果一个功能在给到用户前有 N 个方案，就会有 N 个方案对应的前后台代码。

一定程度上，微信团队就是通过这种在正式发布前反复试错、不断打磨的方式，最终给用户提供了优秀的交互体验。

估计，绝大部分团队和公司，都做不到微信这样，开发 N 个版本，并去一一体验和比较这 N 个版本。

无法体验已经开发好的 N 个版本。但是，在真实的设备上体验 N 个原型，我们还是可以做到的。

原型虽然没有开发好的产品那么顺畅和流畅，但是，如果用墨刀在手机端体验一款加了链接和动效的 App 原型，一样可以发现很多问题。

不过，根据经历和观察，笔者发现，我们人类，是不喜欢体验原型的。

想一想，平常工作中，我们可能会乐此不疲的去体验开发好的测试版产品。但对于原型，大部分时候，都是匆匆忙忙就过掉了。

个人有个猜测，就好像人类喜欢逗猫遛狗、却不太喜欢逗桌子上的模型猫和模型狗一样，我们人类是不太愿意花费太多时间和精力去和原型这种“假产品”互动的。

所以，某种程度上，体验原型，是一种反人性的行为。

但却是一种非常经济和高效的方法。

因为首先，大部分时候，我们都是先选中一个原型方案，然后去设计、去开发；其次，等到开发好进入测试环节，这时候，原型往往就成了测试的标准，依靠测试来优化原型是不现实的。

所以，结合现状，综合来看，小需求能不能得到很好的满足，很大程度上还是要依靠原型。

也就是说，很有必要对原型进行优化。具体方法，就是在真实的设备上体验原型、反复体验、多人体验，并进行相应优化。

3 参考设计规范

如前所述，用利器来创作原型，反复在原型里体验产品，这些强调的是内部力量，即自身的努力。

下面，再谈一谈外部力量，即外界海量的知识与经验。

说起外界知识，除了直接参考其他产品的设计以外，大家参考最多的，可能就是《iOS Human Interface Guidelines》和《Material Design》这些设计规范了。

根据笔者的实际经验，这两个来自苹果和谷歌的设计规范，很多时候，我们都是拿它们当字典用。即哪一点不会或不太确定的时候，去翻一翻查一查。

虽然这俩规范很优秀，但是却很难被我们“物尽其用”，因为它们的知识体系过于庞大，有点像一本字典。拿着“字典”里的每一条原则去检验我们的交互设计，这是很难做到的。

但是有一个设计规范，去非常适合拿来检验我们的交互设计，那就是尼尔森十大可用性原则。

太详细的就不赘述了，这里我们再简单回顾下这十条原则。

1) 状态可见

用户时刻清楚，正在发生什么

2) 环境贴切

营造一个用户熟悉的环境，比如语言、词语、图标等

3) 用户可控

控制权交给用户，并且多数时候，考虑支持撤销重做

4) 一致性

方方面面的统一，比如文案、视觉、操作等

5) 防错

尽最大可能，帮助用户，避免用户犯错

6) 易取：识别比记忆好

通过把组件、按钮等元素可见化，降低用户记忆负担

7) 灵活高效

优先考虑人数最多的中级用户，同时兼顾高级和初级用户

8) 易扫：优美且简约

阅读体验要好，扫视体验也要好；保持简约和美观

9) 容错

帮助用户识别、诊断，并从错误中恢复

10) 人性化帮助

日常的使用最好脱离帮助文档，但有必要提供帮助文档

个人非常建议，在日常工作中，把尼尔森十大可用性原则作为一把标尺，来时时刻刻检验我们的交互设计。

结语

交互设计，在涉及体验细节的小需求上，避免所有的不周到，方才是周到。

用利器创作原型，要包含流程图；多体验原型或产品，以体验结果为准、而非讨论结果为准；参考优秀的设计规范，用尼尔森十大可用性原则来检验原型。

以上三点，可以帮助我们做到交互设计的周到。

其中，个人认为，最为核心的是第二点：多体验原型或产品，直到自己觉得周到为止。

因为，正如电影《霸王别姬》的一句台词所说：人，得自个儿成全自个儿。

最近有同学问老王，UI设计师是不是需要交互设计能力？

当然需要，不懂交互的UI不是好UI~

首先UI设计不仅仅需要把功能需求可视化，还需要注重用户体验。所谓用户体验，其实就是用户与页面的交互。而在交互设计中有很多的方法和理论，如格式塔心理学、尼尔森可用性原则、7+2法制、3次点击法制、功能可见性原则、菲茨定律等。他们大多的方法也是共同的。

所以呢，今天老王来说说交互设计用的最多的原则——尼尔森十大可用性原则。

1、预见性原则

很多情况用户是不知道当前状态的，所以在适当的时间内做出反馈很重要。不仅能让用户知道情况，还能防止用户发生错误操作。常见反馈有刷新提示、新页面加载提示、支付提示、下载提示。除了结果反馈提示外，对于进程中的页面会用进度条进行表现。

今日头条APP首页中，看过的文章标题变为了灰色、而没读过的文章标题依旧保留了黑色字体。

2、场景化原则

简单来说就是让软件看起来跟符合真实世界，还原现实认知。通过直观的视觉快速传达给用户。

音乐软件通过模拟现实唱片并结合旋转的播放动画，从而降低了学习成本，更轻松的理解界面。

3、可控性原则

说白了就是给用户发后悔药，当用户误操作时要给用户提供提供撤销、取消、重做等相关功能。买错商品可以无条件包邮退回。

拼多多凸显了“退货免运费”“7无理由退回”服务，解决了用户买到不满意产品的售后担心。减少了承担运费的成本，从而促使了用户快速下单。

4、一致性原则

一个好的产品从视觉上首先是统一的，色彩、字体、元素保持统一，能加强用户的记忆力。在交互中同样如此，页面结构、操作反馈都需要保持一致性。

QQ首页列表中不管你点击那一条目，下一级界面都是由右往左滑出。点击左上角返回按钮，会从左往右滑回，体验完全一致；几乎所有产品进入下一层级页面的交互方式都是如此。

5、防错原则

为了减少用户错误的可行性，进阶是给出错误反馈是不够的，用心一点的设计师其实会发现很多的产品是这样做的。为了防止错误的发生，会进行防错设计。

比如在发朋圈时，点击返回按钮出现的提示弹窗。弹出框方式会增加不可逆操作的难度，减少操作删除带来的顺势。更人性化的是，提示给出了保留和不保留按钮选择，选择保留退出还可以再次编辑。

6、协助记忆原则

通过把组件、按钮及选项可见化，减少用户的记忆负荷，让使用更轻松。在使用过程中不需要记住上一页面的信息就能完成当前页的操作。

通常更新完APP之后，会出现新功能引导。引导提示能告诉用户新功能所在的位置和作用。这也是协助记忆原则的体现。

7、灵活高效原则

好的产品不仅仅需要满足新用户，还需要满足深度用户。保证第一次使用者，能清晰明白功能。对于老用户需要提供更高效使用方式。

对用户重复使用的功能，提供便捷按钮。比如叮咚买菜的再次购买。

8、轻量化原则

适当的留白能让页面功能突出，也能让视觉更加舒服。精致的图形元素能给用户留下好的印象。

很多K12的产品会运用IP形象进行延展，不仅强化了品牌记忆力，更增强了互动感。

9、容错原则

10、人性化帮助原则

好了，以上就老王对尼尔森十大原则的解析。其实原理很简单，甚至很多都是很直观的废话，但如果不把它们一条条列出来，还是有很多人连这些废话都做不到。

关注细节，才能成就大事！