【干货知识】最全面的交互设计原则和理论汇总（下）

【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】

---

防错原则:

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的，但在交互设计也十分适用。如在硬件设计上的 USB 插槽；而在界面交互设计中也是可以经常看到，如当使用条件没有满足时，常常通过使功能失效来表示（一般按钮会变为灰色无法点击），以避免勿按。

如上图所示极客公园的评论功能快，在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的，只有两者都满足了才可以。

Occam’s Razor 奥卡姆剃刀原理（简单有效原理）

这个原理被称为“如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。在极客公开课・走进 UC 中 UC 浏览器产品经理苏剑南在“UC 浏览器 For Android 产品设计思考”演讲中也有讲到该原理的应用，“如果 UC 手机浏览器要发布第一个版本 UC 1.0，你会选择哪五个功能？”

功能可见性

1.在视觉感知上，某些元素适用于某些功能，这些元素便符合功能可见性。

2.如果设计中的元素的功能可见性与人们的感官预期相符，那这种设计会有很高的接纳率和使用率，也被认为容易操作。所以在设计时，需要尽可能的符合人们的心理预期，界面设计要模拟人们熟悉的物品或环境，暗示提醒使用者的新系统中的各部件的使用方法和功能。

3.应用例子：生活中门和门把手功能抵触，有推的标语，就不要设计有门把手。可以去掉文字提示，需要推的一面，设置无把手，需要拉的一面设置有把手，这样，用户在进行“推或拉”的动作，根据门把手的功能可见性，就可以准确的操作。再比如电脑屏幕的按钮设计，电脑桌面的垃圾桶图标、文件夹等等，都是模拟生活中的物品设计的，符合用户在生活中的认知，用来提示使用者，这些图标在软件中的功能。

图示：这些图标设计符合生活中的相关事物，能够使软件功能明显~

无障碍使用

1.好的设计不需要特别调整或修改就能很好的服务各种需要的人，此法则适用于所有大众。四大要素：易读性，易操作、简易性、包容性。

（1）易读性：不论感官功能差异，都可以理解的设计。

提升易读性方法：a.多种标注方式呈现信息，文字图像触觉等；b.辅助性感官设计  c.合理合适的方式呈现操控装置和操控信息。

（2）易操作：不论身体状况如何都可以使用。

提升易操作方法：a.最大限度减少使用者重复操作和不必要的体力消耗  b.运用完善和简单的功能指导准则，使操作装置容易使用。 c.辅助人体活动，提供方便的操作环境（残疾人专用道） d.合理合适的方式呈现操控装置和操控信息。

（3）简易性：不论经验背景、文化程度、注意力等，都易操控。

提高简易性方法：a.减不必要的复杂装饰  b.采用清楚明了，持续统一的提示符号和操作信息。 c.循序渐进展开说明、标注相关信息和操作装置。d.所有指令应该提供清楚的提示和反馈，确保信息简单易懂，适合不同文化程度的使用者。

（4）包容性：操作错误及导致后果最小化。

提高包容性方法：a.利用健全的功能可见性和可操作性（只标注正确的使用方法）预防错误。  b.利用确认与警告预防错误（删除时：确认是否删除）。  c.加入设计自正性的操作功能和安全网（自我调整与修正），减轻避免因错误造成的后果。

2.应用例子：大型电梯比小型电梯功能健全，两套操作板适用站着与坐着的人，操作板多种符号（数字图像盲点）。

成本效益

1.设计中，用来评估新功能/新元素出现的新增成本的最后财务回收状况。 如果与设计的互动成本>收益，则是不良设计，反之是优秀设计。

2.成本效益可以衡量设计的品质。如：网页下载的时间常见说法不超过十秒，但是，接受下载时间的长短，更多与网页提供的效益有关，如果网页具有合理效益，其实可以抵消超过十秒的下载成本。所以，可以通过改进设计品质来降低互动成本（设计能够提供效益）。

3.让产品继续进行应该效益>=成本，让产品更好，应该让效益尽可能的大于成本。应该从效益与成本两个方面工作：成本限制 或者 效益增加。所以不能仅仅考虑成本限制范围，也应该考虑互动效益成本。

4.应用例子：loading页设计：用成本效益来考虑，为什么loading页设计多样，不只是因为“有趣”这么简单的理由，有趣只是用户的直观感受。这种设计的应用实质可以用成本效益解释，等待的时间可以当做是成本，在技术无法缩短合理的等待时间时，成本就相当于无法降低，那么想要产品更好，需要从效益入手，设计可以带来效益，那么就需要改进等待页的设计。所以现在的loading页、进度条、错误页等等设计都体现能带来效益的创意互动。

图示：

8020法则

1.定义：在所有大系统中，高达80%的效果是由仅占20%的关键因素决定，在实际操作中发现，关键变量占10-30%不等。适用范围普遍，适用互不相关的事物影响。

2.8020法则有助于资源整合，可以帮助提升设计最大化。比如：客户用80%的时间集中于产品20%的功能时，那设计与检测应该集中于那20%，剩余80%应该重新评估，确认他们的价值。设计师可以利用此法则，对设计中的所有元素进行重新评估，划定重新设计与优化的范围，有效决定优势资源进行再设计，80%非关键能减则减，时间与资源有限时，不要试图改进与优化那80%。

3.应用例子：图形用户界面把大部分功能隐藏在功能菜单（降低视觉复杂性），常用功能难以找到（增加操作复杂性），所以应把20%关键功能放在功能菜单中（工具条的使用）。

图示：在印象笔记这个软件里，上层是功能菜单，在主页面上方设有常用功能的工具条，这就是把20%的关键功能摆设出来，没有隐藏掉。

前卫与亲近（MAYA法则）

1.成功的设计可以从很多方面界定：功能、美学角度、适用性等，如果我们从商业绩效也就是销售量来定义设计的成功，可以从两个变量取得平衡：亲切熟悉+独一无二。MAYA法则就是帮助我们找到这两个变量的平衡契合点，所以一个设计如果可以结合让人感到熟悉+新奇的感受，就能够提升设计的成功。此法则应用于：面向大众对象的产品，用户是大众，而非专业设计师和艺术家。

2.用户喜欢熟悉的东西（曝光效应：物品或环境的吸引力会随着曝光次数的增加而增加），也喜欢新奇的设计。人们对新奇的关注与记忆大于典型性。此法则认为最理想的做法是：兼顾熟悉性和新奇性。 对用户来讲：最新奇但依旧可辨识的物品或环境，最富美学吸引力。

3.应用例子：设计的演变虽然一直有创意新奇的设计，但是都在从前被大众接受的设计渐渐演变而来，而非完全脱离重新创造，因此新奇的设计+过去设计的熟悉感，会使得用户具有吸引力和接受能力。图标、界面的演变。

图示：IOS不同版本的设计元素的对比，可以看出，虽然新版具有新奇性，但是仍然可以找到以前版本的熟悉感受。

区域对齐

1.该对齐适用于：元素形状不一，不对称时，元素可为图形或文字元素，如果是元素形式简单对称，就采用边线对齐的方式。

2.对齐方法：将要对齐的元素顺着中轴线摆放，让中轴线两边的视觉重心或者面积相等。区域对齐方法无法使边线对齐，如果想同时边线对齐，只能令元素边线在边线内或边线外。

图示：可以明显感受到右边对齐效果更好。

信噪比（常用于信息设计）

1.同一显示中，相关信息与无关信息的比例就是信噪比。在信息的创造、传达、接收过程中，信息的形式会递减，无关信息会增加。如何使得信噪比高，从而达到优秀的设计目标？可从两方面看：信号最大化或噪音最小化。

2.信号最大化：清楚的传达信息，高效率的呈现信息可以使得信号最大化。简单的设计可以带来极小的效能负荷，让用户专注于资料的意义。比如，没有用正确的图表呈现特定资料数据，基本会扭曲资料原意，所以正确的设计决策非常重要，必要时应进行测试。 还有一种方法，及时强调信息的关键方面，也可以减少信号递减的现象。比如：强调或备援识别，凸显产品的重要性。

3.噪音最小化：去除或减少不必要的元素，每一个不必要的数据项目、图标、线条、图案，都会让用户从重要元素上分心。每个设计元素的使用应该适当，一旦过多就是噪音。

4.应用：图表、表格设计的演变。

图示：左侧的图表无关信息元素比较多，图示的图案多样，表格的边框又粗又重，这会使得“噪音”增加。右侧是优化后的图表，减去了无关信息，用清楚明了的图示表示资料内容。

序列效应

1.在列举信息时，排在最前和最后的元素，比排在中间的更容易让人记住。

2.对排在开头的信息产生加强的回想效果，称为：初始效应，人们有时候会把最前面的信息储存在长期记忆中。排在结尾的信息产生加强的回想效果，称为：时近效应。时近效应适用于听觉刺激。初始效应适用于视觉刺激。

3.在列举信息元素时，如果列举信息属于视觉性，那么把重要的信息放在最前面；如果是听觉性，就放在最后面。如果是用户必须做决定，并且是最后一项出现后马上做决定，那么就将想要用户做决定的信息放置最后，以便增加获选概率，否则放在最前面。

4. 应用例子：比如在很多app产品设计时，个人账户与设置基本放在页面的最前面和最后面，这体现着产品信息的序列关系，重要次序，所以在进行设计时，可以在信息排序上遵循序列效应。 当然还有一些产品想对用户进行引导操作，也可以利用这个法则，将信息放置最前或最后。

图示：

古腾堡图表法

古腾堡图表法又称 Diagonal Balance(对角线平衡的和谐状态），设计理念缘自 Johannes Gutenburg（欧洲活字印刷术的发明者）应用于印刷的古腾堡图表。它指出：

人们在浏览页面或布局时视线趋于从左上角移动到右下角,具体如图

古腾堡图表法说明我们观看页面的视线并不是镜面对称的，我们需要在设计中避免出现此类错误但绝不是墨守成规，将页面的 Logo放置在左上角而主体向右下角延伸，左下和右上作为视觉的盲点可以添加辅助元素

其它一些简易法则：

2秒钟法则——用户在使用某类系统时的等待反映不应该超过2秒。

3次点击法则——用户在3次点击之内如果还没有找到他们想要的信息或了解产品/网站的特色，他们就会离开。

2/8法则——80%的结果由20%的原因产生 。

界面8黄金法则：

1）努力做到连贯；

例如网站首页需要和每一个下级页面保持一致的风格，导航都要放在屏幕的左上角，具有高度一致性的界面能给人清晰整洁的感觉。

2）允许频繁使用系统的用户使用快捷方式；

快捷键表示产品使用的灵活性和有效性，想想每次我们使用搜索引擎的时候是鼠标点击的搜索还是按的回车？

3）提供信息反馈；

出现错误时要明确说出错误的含义，而且需要考虑用户能否理解，比如我们基本上都遇到过HTTP404错误，但绝大多数人能看懂么？

4）为关闭这一动作设计对话框；

要在用户完成某项任务或操作后进行提示。如果他们在做了很多操作后却得不到反馈，他们就无法知道自己是否达成目标。

5）提供简单的设计处理；

例如把某些当前不能点击的按钮设置为灰色，在系统执行时让用户在确认一下

6）应该方便用户取消某个操作；

大多数的应用软件都有撤销和恢复的功能，如果用户总是惧怕一失足成千古恨，那样的用户体验可想而知

7）用户应掌握控制权；

一般而言用户希望自己去控制系统交互，在执行任务中，用户应该可以随时中止或退出，而不是无奈的看着系统继续

8）降低短期记忆载荷；

我们应该尽可能帮助用户避免要求他们记住各种信息，例如各个菜单项之间的逻辑关联，更好的分类就会帮助用户找出哪个功能按钮在什么地方。

Jakob Nielsen的10条可用性原则：

1. 系统状态的可见性——让用户知道系统在做什么；

2. 系统和现实世界的匹配——系统必须使用用户的语言；

3. 用户控制和自由——“紧急出口”来离开非预期的状态，支持撤销和重做；

4. 一致性和标准——遵循平台规范；

5. 错误预防——要么避免容易发生错误的情况，要么检查并在实际动作前确认选项提示用户；

6. 识别而不是回忆——将对象、动作和选项可视化以减少用户的记忆压力；

7. 使用的灵活性和效率——用户可以定制经常使用的动作；

8. 美学和最小设计——对话框不能包含无关或者几乎不需要的信息；

9. 帮助用户认识、诊断错误并恢复——错误消息必须通过普通语言表达（不包含代码）、准确指出问题并积极提示解决方法；

10. 帮助和文档——容易搜索、关注用户任务并列出需要执行的具体步骤，而不是大而全的说明。

KANO模型：

1. 魅力因素——提供用户想不到的需求会很大的提升用户满意度，不提供则满意度不变；

2. 期望因素——提供期望需求则满意度会上升，不提供则会下降；

3. 必备因素——优化此需求用户满意度不变，不优化则满意度大幅下降；

4. 无差异因素——用户根本不在意的功能需求；

5. 反向因素——无此需求满意度不变，有次需求则满意度下降。

包豪斯运动——形式追随功能，去除干扰和装饰。

Skeumorphic设计理念——花费很大的力气来指向或模仿真实世界的功能。

婴儿鸭综合症——用户习惯了以前的设计，对新的产品架构感到不舒服，他们必须找到自己的方式来使用产品。

自我参照效应——与我们个人观念相联系的事物要比那些和我们没有直接联系的事物记得更清楚。

0123简单法则——无需说明书，一看就会，两秒等待时间，三步以内的操作。

MVP法则（最简化可实行产品法则）——一开始就拿产品来接触用户，从很早就根据用户的回馈来改进你的产品。

麦肯锡金字塔方法——任何事情都能归纳出一个中心点，而从中心论点可以由数个一级论据支撑，而这些一级论据也可以被数个二级论据支撑，如此衍生，状如金字塔。

人机交互五大原则：

1. 可学习性

2. 效率

3. 可记忆性

4. 不易犯错

5. 满意度

认知心理学是一个呈现心理过程的状态

心流理论：人们全身心投入某件事中的一种心理状态、沉浸在忘我的境界中

1. 引导用户达到目标（提示下一步，完成目标）

2. 时刻明确当前状态（导航、转场动画、状态界面、认知心理学隐喻法）

3. 可行性的设计（使用过程中可自主性操作、有可逆性）

4. 防呆性设计（防止错误发生、限制操作、预见错误、跳出空白）

5. 站在消费者心理而设计：炫耀心理；趋近心理；占便宜心态；有后悔心理；价位心理。

色彩心理

1. 颜色常恒性

2. 颜色的错觉

3. 色彩的感知性

不超过三种色相的搭配

明快的颜色和明暗的色彩搭配能使画面更有层次感和朝气

主色决定了品牌方向

运用相似性来进行色彩呼应，画面更有节奏感和舒适性

运用颜色渐变穿插，让界面平衡在一个频率上

马斯洛需求层次理论：

---