交互设计原则

一. 尼尔森十大交互设计原则

1. 状态可见原则

系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解本身处于何种状态、对过去发生、当前目标、以及对将来去向有所了解，通常的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。
案例二：
好比安心记加班中关注和取消圈子功能：当用户点击关注按钮以后，页面中间会出现一个「关注成功」的提示，停留2S以后消失。相似这种，操做以后的提示也是状态可见原则的一种，以下图：

2. 环境贴切原则

网页的一切表现和表述，应该尽量贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外，还应该使用易懂和约定俗成的表达。

△ 使用用户熟悉的表述和名词

3. 用户可控原则

为了不用户的误用和误击，网页应提供撤销和重作功能。

撤销也要保存用户曾经的信息

3. 一致性原则

对于用户来讲，一样的文字、状态、按钮，都应该触发相同的事情，听从通用的平台惯例。也就是，同一用语、功能、操做保持一致。

1.结构一致性

保持一种相似的结构，新的结构变化会让用户思考，规则的排列顺序能减轻用户的思考负担。

案例：

例如微信每一个模块的条目布局：微信中每一个模块的条目都有统一的「图标+文字信息」的结构样式，能让用户快速了解朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、漂流瓶、购物、游戏及小程序等功能都是作什么的，这就是结构一致性的体现，以下图：

2.色彩一致性

产品所使用的主要色调应该是统一的，而不是换一个页面，颜色就不一样。

案例：

例如网易云音乐的颜色：网易云音乐的图标颜色与界面的主色均为红色，也包括其中一些标签和强调的文字颜色都是红色。整个界面除了图片的有效信息外，都经过灰、白、红色来呈现，界面保持了很好的一致性，这就是色彩一致性原则，以下图：

3c.操做一致性

能在产品更新换代时仍然让用户保持对原产品的认知，减少用户的学习成本。

案例：

好比安卓版微信、支付宝和钉钉APP中左上角的返回操做：它们三个安卓版的应用内返回上一级操做，都是经过顶部左侧的返回按钮进行的，固然也能够经过安卓的物理返回键，这就是操做一致性的体现，以下图：

4.反馈一致性

用户在操做按钮或者条目的时候，点击的反馈效果应该是一致的。

案例：

好比安卓版手机QQ信息列表的打开方式：它的信息都是列表式结构，无论你点击哪一行条目，下一级界面都是由右往左滑出，点击顶部左上角的返回按钮会从左往右滑回，体验至关一致。这就是反馈一致性的体现，以下动图：

5.文字一致性

产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的。

案例：

例如微信几个关键界面的字体：下图我用红色框框起来的条目部分的文字，三个主界面不尽相同，可是，字体大小、颜色、布局的样式都同样，这样让整个APP视觉上看起来很舒服，这就是字体一致性。所以，咱们在作视觉设计的时候尽可能使用同一风格的文字。

4. 防错原则

经过网页的设计、重组或特别安排，防止用户出错。

5. 易取原则

好记性不如烂笔头。尽量减小用户回忆负担，把须要记忆的内容摆上台面。动做和选项应该是可见的。

6. 灵活高效原则

汽车油门，新手用户经常看不见，而对于高手来讲，能够经过它快速与汽车互动。这样的系统能够同时知足有经验和无经验的用户。容许用户定制经常使用功能。

案例一：

好比安卓版本支付宝中的编辑应用功能：支付宝首页的应用是能够根据自身喜爱自定义的，包括定义经常使用应用、排序、删除、新增等等。这样用户能够根据本身的我的兴趣定制本身适合的应用分布方式，这就叫作用户定制经常使用功能，也就是灵活高效原则的一种体现，以下图：

7. 优美且简约原则

对话中的内容应该去除不相关的信息或几乎不须要的信息。任何不相关的信息都会让本来重要的信息更难被用户察觉。

案例一：

苹果手机中自带的软件（iOS11设计规范）：在新版本的苹果手机自带的软件中标题都属于字体放大，界面简洁的设计风格。还有苹果自带的音乐软件中，段落中的标题和正文区别是很明显的，标题明显很大，而正文部分相对较小，这就是优美简约原则的体现，以下图：

8. 容错原则

帮助用户从错误中恢复，将损失降到最低。若是没法自动挽回，则提供详尽的说明文字和指导方向，而非代码，好比404。、

9. 人性化帮助原则

帮助性提示最好的方式是：一、无需提示；二、一次性提示；三、常驻提示；4；帮助文档。

△ 对用户容易产生困惑的敏感信息进行提醒

二. 审美可用效应

• 用户常常会将在美学上使人愉悦的设计，视为更加有用的设计

三. 多尔蒂门槛

• 当使用者与电脑之间的交互速度愈来愈快（小于400毫秒），将会大幅提高生产力

四. 费茨定律

• 快速移动到目标区域所需的时间是目标区域的距离和目标区域的大小的函数

• MT=a+b*log2（D/W+1)

MT标识完成移动所需时间
ab是根据回归分析得出的两个常量
D表明从起点到目标中心的距离
W目标宽度大小（按照移动方向为水平方向计算）

五. 席克定律

• 决策所需的时间随着选择的数量和复杂性而增长
• RT=a+b log2（n）

RT是反应时间
a是与作决定无关的时间（前期认知和观察时间）
b是根据对选项认识的处理时间（从经验衍生出的常数，对人来讲约0.155s）
n是选项数量

keep的跑步功能。跑步时手机做为记录器，通常状况下，手机绑在手臂是最为准确，无论是跑步机仍是户外跑步，用户都身处在一个时刻运动不稳定的场景之中，很容易形成误操做，所以界面中有太多选项是很是不明智的。再来看keep的界面，「开始跑步」做为最重要的按钮，面积最大，颜色为鲜艳的品牌绿，按钮所处位置最容易操做（费茨定律能够解释），这样的设计在跑步中很容易进行操做。

首次在蚂蚁财富理财时，金融机构都会强制要求用户作一次风险测评，这时候希克定律就不适用了，由于每道题都须要仔细的阅读和思考才能做答，希克定律不适用于这类须要高度阅读与解答问题的工做。可是设计师仍是有办法让风险测评看起来更友好，设计师将每道试题拆分红一个界面，这样就会让用户在一个页面上的目标更加专一，选择更少。头部的进度条让用户时刻了解本身所处的位置。

希克定律适用于任何要从多重选项作出简单决定的系统设计或程序。若是想减小用户的反应时间和错误几率，请减小选项。若是状况复杂，须要大量阅读和思考判断，那么，请抛弃希克定律，根据当下场景和目标用户进行设计。

六. 米勒定律

• 人类头脑最好的状态能记忆含有7（±2）项信息块，超出后人类的头脑就开始出错

七. 帕累托原则——二八法则

• 大多数事件，大约80%的影响来自20%的缘由
• 80/20 Rule / Pareto principle

在整个产品中，大部分效果由少数几项关键因素决定。

80/20法则又名二八定律、帕累托法则（定律），也叫巴莱特定律、最省力的法则、不平衡原则等。是19世纪末20世纪初意大利经济学家巴莱多发现的。他认为，在任何一组东西中，最重要的只占其中一小部分，约20%，其他80%尽管是多数，倒是次要的。80/20法则被普遍应用于社会学、经济、用户体验设计、企业管理等。

通用设计法则的定义：在整个产品中，80%的效果是由20%的关键元素决定的。确切的百分比并非重点，在实际状况中，关键变量所占比例是10%~30%不等。

△ QQ同步助手需求场景分析表（图片来自于《腾讯产品法》）

咱们来假设一个场景：两个产品经理各提出一个需求，产品经理A的项目用户量占比为90%，产品经理B的项目用户量占比5%。若是资源紧张，咱们该如何排期？在一般状况下，我相信每一个人的答案都是一致的。

80/20法则有助于整合资源，能够提高设计的最大化。上面假设的场景就是一个真实的案例。《腾讯产品法》中例举出QQ同步助手需求场景分析案例（如上图所示），对于工具类的产品来讲，产品要解决的「问题」很清楚，用户在人口学、社会学方面的因素，如性别、年龄等对产品影响不大，因此能够选择按「使用场景」来划分用户模型。QQ同步助手中A类换机用户和B类备份防丢失用户的用户量占比分别是90%和80%，利用80%的时间集中该产品20%的主要功能时，那么咱们的设计就要集中发力在这些关键功能上面，因此此两类功能也被定义为了产品核心动线。

八. 伯斯塔尔法则

• 对本身严格，对他人宽容
  举个例子：来看金融理财平台产品，用户选择金融理财平台跟用户预期密切相关，只有在用户的心理有足够的安全感和信任感才会选择这个平台进行投资。腾讯理财通，首页用首屏1/3的位置来介绍腾讯理财通这个平台，而且强调了腾讯的背书。这些信息的目的就是打消用户的顾虑，从用户的心理预期中先开始信任这个平台。同理百度理财的首页布局也是相似。

△ 腾讯理财界面

△ 百度理财界面

九. 串行位置效应

• 通常来讲，用户更加容易记住系列中出现的第一个和最后一个元素
  例如：让咱们仔细看看每一个应用程序底部的导航。 第一个和最后一个基本上是“主页”和“我的中心”。 系列位置效应解释了为何最重要的用户操做首先或最后放置。。 （以上）

十. 特斯勒定律——复杂性守恒定律

• 每个过程都有其固有的复杂性，存在一个临界点，超过了这个点，过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方

十一. 冯·雷斯托夫效应

• 当多个类似的物体出现时，与周围元素不一样的物体最有可能被记住

使用了与总体 icon 彻底不相同的风格。因此用户记住这样独特、有特点的 icon 的可能性才会大增。特殊性能吸引注意，并且容易留下好的印象。

十九. 蔡格尼克记忆效应

• 人们对于还没有处理完的事情，笔已处理完成的事情音响更加深入

十二.尼尔森F型视觉设计

• 以F型视觉流浏览页面

十三.3次点击法则

• 用户在3次点击以内若是尚未找到他们想要的信息，或了解产品/网站的特点，他们就会离开

十四.0123简单法则

• 无需说明书
• 一看就会
• 两秒等待时间
• 三步之内的操做

十五.麦肯锡金字塔方法

• 任何事情都能概括出一个中心点，而从中心论点能够由数个一级论据支撑，而这些一级论据也能够被数个二级论据支撑，如此衍生，状如金字塔
• 当呈现资料的方式以阅读为主时，须要运用倒金字塔法则。先简要归纳资料的导语，而后描述简短信息模块，举个例子：

产品弹窗上面的文案大部分都是根据倒金字塔法则进行设计的，通常包含两部分，第一部分一般是直接的反馈（导语），这一部分的字体会较为醒目；第二部分是简短的信息模块。ios 系统在长按 App 图标删除时，会出现一个系统弹窗，这个弹窗上面的文案首先最为重要的导语：「要删除（ App 名称）吗？」第二句简短的信息模块：「删除此应用同时删除其数据」。

十六.格式塔原则

• 物体间的远近或形态的不一样对咱们的认知影响：

1. 接近性原理
   物体之间的相对距离会影响咱们感知他是否以及如何组织在一块儿。互相靠近（相对于其余物体）的物体看起来属于一组。接近性原则权重要大于类似性原理

2. 类似性原理
若是其余因素相同，那么类似的物体看起来归属于一组。颜色权重大于形状

3. 连续性原理
视觉倾向于感知连续的形式而不是离散的碎片

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