交互设计基本原则+七大定律

一个页面只做一件事

去除杂乱

用户的注意力非常珍贵，我们也要根据用户的注意力进行设计。杂乱的界面展示了过多的信息，让你的用户非常的累：每一个加进去的按钮、图片、文字都会使界面更加复杂。

一屏一个主要操作。对于使用者，你设计的每一个页面应该仅提供一个具有真正价值的单一操作。这会让你的应用更易上手，更易使用，必要时也更容易添加功能。100个清晰的屏幕比1个杂乱的屏幕更好。

让导航更加明显、不言自明

导航确保用户在跳转时不迷路，告诉用户当前在哪，可以去哪，如何回去等问题。

全局导航需要使用清晰明了的视觉图形，无须解释

所有导航必须一致，不要再不通过页面内隐藏或移动导航

对手指友好的点击目标

让你的触碰点7-10mm大，这样他们可以用手指准确的点击到。这样大小的目标对于用户手指来说非常舒适，在点击时，目标的边缘也是可见的。这可以让用户在点击目标之后得到清晰的视觉反馈。

文字内容应易读

移动端设计的规则之一：文字至少要有11pt，这样才能保证他们不需要放大就可以在移动距离内看清。

通过行高或字间距来提高可读性。大一些的空白有时可以让最杂乱的界面看起来具有吸引力和简洁。

让界面元素清晰可见

你需要借助颜色和对比来帮助用户理解你的内容。为了支撑可用性，你可以选定主要、次要、强调颜色。确保元素间有足够的颜色对比度，这样低视力的用户也可以看见和使用你的APP。

文字颜色和背景颜色必须拥有足够的对比度，这样文字才具有可读性。W3C对主体文字和图片文字提供了如下对比度建议：

小字需要与背景有至少4.5：1的对比度；

大字（粗体14pt/18pt，甚至更大）需要与背景至少有3：1的对比度；

界面拥有足够的对比度对于移动端是非常重要的：用户在户外时，手机可能因为光线而只拥有较低对比度。

图标或其他关键元素也应当采用上述建议的对比度。

根据手的位置设计控制点

Steven Hoober在他的移动设备使用调查中发现，49%的用户只依赖一个手指去完成所有的手机操作。下图中的图样大致是移动手机屏幕的可达区域示意图，各颜色代表了用户可以触及的与手机屏幕交互的点。

绿色代表用户可以轻松触及的区域；黄色代表用户需要一点稍微伸展一点；红色代表用户可能需要调整手持方式才能达到的点。因此，手的位置应该影响着移动端设计时各控制元素的摆放问题：

一级菜单、高频按键和常用操作应该放置在绿色区域内，因为这样子单手很容易交互。

反向操作（例如删除和消除）应该放在单手难触及的红色区域，因为你可不想误点击到它们。

减少输入

移动端打字是很缓慢且易错的过程。因此，使用一款移动APP时应尽量减少打字输入的需求：

让表单短且简单，去除一切不需要的内容；

适当时使用自动填充

利用各种智能传感器，摄像头、麦克风、陀螺仪，以及私人数据地理位置、账户信息

这样用户只需要输入最少的信息。

减少等待

减少等待、稳定快捷，才能帮你留住用户。许多研究都表明，用户能够忍受的最长等待时间的中位数，在 6～8 秒之间。这就是说，8 秒是一个临界值，如果你的页面打开速度过慢，等待 8 秒以上，大部分用户会离你而去。

在等待过程中转移注意力

instagram在点击上传照片后，会回到首页的位置，同时告诉你照片正在提交，而不是显示一个上传进度的界面，让用户看百分比。

减少点击

产品在使用过程中经常会有一些多余的点击，对于用户而言，这些不必要的操作都是附加工作。附加工作消耗用户的精力，但是不直接实现用户的目标。消除附加工作，可以提升操作效率，改善产品的可用性。交互设计师应该对产品中附加工作高度敏感，才能把产品设计得更高效。

反馈明确

及时恰当的反馈能告诉用户下一步该做什么，帮助用户做出判断和决定，让用户知道系统运行良好稳定。所以，要营造和谐的人机对话环境，我们必须做到适时明确的反馈。

非模态的反馈，不打断任务流

减少使用alertbox，使用list notification,toast list等方式来提醒用户。

Gmail是第一个把删除的模态弹框设计成List

Notification这种方式的，提醒用户撤销刚才的删除操作，这种非模态的处理，让删除的流程更加顺畅和轻松自如。

自动保存用户的输入成果

移动端输入的环境复杂，容易出错。再输入后要离开时要二次确认

断网或网络不稳定时，仍然可以发布但是显示叹号提醒稍后重试。

交互设计七大定律

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

定律内容：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小。

菲茨定律的启示：

1.按钮等可点击对象需要合理的大小尺寸。

2.屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。

3.出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。

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

定律内容：一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为反应时间 T=a+blog2（n）。

在人机交互中界面中选项越多，意味着用户做出决定的时间越长。

例如比起 2 个菜单，每个菜单有 5 项，用户会更快得从有 10 项的 1 个菜单中做出选择。

神奇数字7±2法则

1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，如应用的选项卡不会超过 5 个。

The Law Of Proximity 接近法则

根据格式塔（Gestalt）心理学：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，因此当相互靠近的功能块是不相关的话，就说明交互设计可能是有问题的。

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

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

对于这个定律的理解

事情的复杂性是肯定存在的，人趋于简单这个事实也是存在的。

如果复杂是针对一个任务流而言：看是非常复杂的任务，而使用者在具体使用过程中往往关注或聚焦其中的一部分，所以可以通过将任务进行拆分完成，也可以分割成各个独立的简单任务，这是一种简化，当然也是一种复杂，因为拆分、分割本身就会更为复杂，这一点需要平衡，而我所在的团队中平衡者往往是交互设计师。当然这取决于交互设计师的经验和能力。

如果复杂是针对功能操作或信息传递，交互设计中的四个策略的组合使用可以解决这个问题，如将信息组织更便于理解、识别，将次要并繁琐的转移或隐藏，将没有必要的信息删除等，交互中有化繁为简之说，其实是规繁为简、删繁未间。规繁为简更多应该是组织，转移，隐藏。删繁为简则为删除，移除不必要的说明，不必要的考虑。我之前的理解是尽量不要删繁为简（因为删除的往往是别人的辛苦工作成果），而我现在的理解是从删除并删的合理才是真的产品设计过程中正确的减法，这一点往往是不易的。

还有一种复杂变得简化的方法就是“破”，打破、改变现在的实现方式，利用新的规则、方式、硬件设备、技术让复杂直接的简单化，也就是创新。现实视觉中有很多创新，留意即可发现。身边最为直接的信息传递的方式信件-电报-电话-手机等。

复杂确实是存在的，复杂度确实也是守恒的，但是我们至少可以做一些事情，让消费者、浏览者（这里不说用户）的感觉（视觉、触觉、知觉）变得简单。

防错原则

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的，但在交互设计也十分适用。如在硬件设计上的 USB 插槽；而在界面交互设计中也是可以经常看到，如当使用条件没有满足时，常常通过使功能失效来表示（一般按钮会变为灰色无法点击），以避免勿按。如上图所示我们的评论功能快，在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的，只有两者都满足了才可以。

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

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

奥卡姆剃刀的原则不是求真，而是求简。因为我们可以对本体世界做出无数多个可能的论述，这些论述都有可能是对的，但都不一定是对的，甚至这些论述在使用起来的时候得到的结果会是一样的。而为了方便，我们只能选择最简单的那个。

注：非原创