用户体验设计必备知识之— —交互设计原则 一份全面的交互设计原则打包带走

Why？为什么说是必备的，每位用户体验设计师都必须牢牢掌握的知识？

学习用户体验设计的基础之道莫非设计原则，就像我们小时候学习拼音一样，学好了拼音才能知道字怎么拼读，都是成长中必需好好学习的。所谓“站在巨人的肩膀上，让我们看得更远”，全面系统的学习交互设计原则，帮助我们在实战中更好的提升体验，避免大部分的出错，善于利用设计原则，一开始构思就考虑清楚，很好的体现我们的专业性。下面整理了简约版的交互设计原则整理。

下面是正文。。。

主要分为两个部分来介绍：

第一部分基础的交互设计原则，第二部分iOS10人机界面设计指南中的设计原则    

（题外话，推荐深入了解下查理.芒格介绍的100种思维模型，掌握各个学科最典型的思维模型，不仅可以运用在设计中，还可以帮我们更好的决策和更睿智的生活）

1.基础的交互设计原则

1.1尼尔森可用性原则

1.状态可见原则 Visibility of system status

用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。

简而言之：用户操作了就告诉他你做了什么，大概要等多久

2.环境贴切原则Match between system and the real world

网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。多使用易懂和约定俗成的表达。

大家都懂才是真的好。

3.撤销重做原则User Control and Freedom

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

让用户有反悔的机会，毕竟生活中可反悔的机会可不多，让用户在互联网体验当上帝的满足感。

4.一致性原则Consistency and Standards

同一用语、界面风格、布局、功能、操作保持一致。

5.防错原则Error prevention

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

6.易取原则Recognition rather than recall

好记性不如烂笔头。尽可能减少用户回忆负担，把需要记忆的内容摆上台面。

比如用户输入过的邮箱，输入第一个字就应该有关联出完整的邮箱，用户只需点击即可输入完成，从N步—2步简化操作。

7.灵活高效原则Flexibility and efficiency of use

中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。

为大多数中级用户设计的同时要兼顾其他用户，做到灵活高效。

8.易扫原则Aesthetics and minimalist design

互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。

9.容错原则Help users recognize, diagnose and recover from errors

帮助用户从错误中恢复，将损失降到最低。

如果无法自动挽回，则提供详尽的说明文字和指导方向。

10.人性化帮助原则Help and documentation

帮助性提示最好的方式是：无需提示>一次性提示>常驻提示>帮助文档

1.2格式塔原则

总的来说，就是物体间的远近或者形态的不同对我们的认知的影响。

主要是以下几个原理：接近性原理；相似性原理；连续性原理；封闭性原理；对称性原理；主体/背景原理；共同命运原理。

接近性原理

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

下面3个图，无论形状的不同或是颜色的不同，我们都会自然而然把相近的东西归为一组，可见接近性原理权重要大于相似性原理。

相似性原理

如果其它因素相同，那么相似的物体看起来归属于一组。长得像的容易被我们被归为一组。

下图可见，形状相似我们会归为一类，颜色相近的我们又会归为一类，并且颜色权重大于形状。

连续性原理

视觉倾向于感知连续的形式而不是离散的碎片。一个连续的图案，即使中件少了一段，也会被我们自己补脑出来是连续的。

封闭性原理

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

对称性原理

我们倾向于分解复杂的场景来降低复杂度。如此复杂的海报，我们自动会把它分为一个圆形和一个矩形来识别。

主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。当物体重叠时我们习惯把小的那个看成是背景之上的主体。

当我们聚焦于中心的小圆的时候，为了不影响我们的注意力，周边的其他物体会被模糊成背景。

共同命运

与接近性、相似永生原理相关，都影响我们感知的物体是否成组。指出一起运动的物体被感知为属于一组或者是彼此相关的。Path的动效，点击+弹出的功icon，会被感知为一组东西。

1.3尼尔森F型视觉模型

我们在第一次观看页面时，视线会呈 F的形状关注页面

先从顶部开始从左到右水平移动

目光再下移开始从左到右观察但是长度会相对短些

以较短的长度向下扫视，形成一个 F形状，此时我们的阅读速度较慢，更为系统和条理性

设计时，将重要的内容放在最左边，用户快速扫视时能第一眼看到。例如淘宝等电商APP类的商品列表，信息都是靠左对齐。

1.4菲茨定律Fitts’ Law（费茨法则）

在文章的最后，回顾一下费茨定律给我们的启示：

做点击按钮要大点，更易于点击。反相过来，不常用按钮做小点，可降低点击率。

将按钮放在离开始点较近的地方，更容易点击到。屏幕的四角与四边是「无限可选中」位置。

1.5神奇数字 7±2 法则

人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，如应用的选项卡不会超过 5 个。

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

这个原理被称为“如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。

1.7二八法则

例如：百分之20的功能决定产品的成败，重点要抓住那重要的20%

1.8泰思勒定律Tesler's Law（复杂性守恒定律）

该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计，收件人地址是不能再简化的，而对于发件人却可以通过客户端的集成来转移它的复杂性。

1.9席克定律Hick's Law（希克法则）

定律内容：一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为反应时间 T=a+b log2（n）。在人机交互中界面中选项越多，意味着用户做出决定的时间越长。例如比起 2 个菜单，每个菜单有 5项，用户会更快得从有 10 项的 1 个菜单中做出选择。

席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。

2.iOS10人机界面设计指南中的设计原则

三大原则

清晰Clarity

清晰易懂，突出重点，表达可交互性

遵从Deference

轻量化，突出内容

深度Depth

层次结构

其他原则

美学完整性Aesthetic Integrity

不易察觉且不引人注目的图形、标准化控件和可预知的交互行为从而让用户保持专注。

一致性(Consistency)

相同的标准和规范，应用所包含的特征和交互行为是符合用户心理预期的。

直接操作(Direct Manipulation)

能够提升用户的参与度并有助于理解。让用户获得及时可视的反馈

反馈(Feedback)

认证交互行为,呈现结果,并通知用户，临时高亮、进度指示器。动效和声音加强对结果的提示

隐喻(Metaphors)

使用来源于现实生活的用户体验，或已培养出来的习惯，能让用户快速学会使用应用

用户控制(User control)

用户主导，应用仅为用户行为提供建议，严重后果的发出警告，不提用户做决定。让用户可预知，可随时取消

遵从这些原则更好的帮助我们设计出来的产品好用易用，更加符合用户的心理预期。当然规则是死的，人是活的，如果我们有更好的解决问题的方式，能根本的解决设计中的问题，那也可以不用遵循设计原则。

注：仅做学习使用，上文部分内容来源于互联网，如有侵权请告知。