交互设计的首要原则（上）

无论是对于传统的GUI环境、网络、移动机械设备、可穿戴设备、或者联网的智能设备，接下来的介绍都是在设计中简单又快速起作用的原则。

这个新的修改提供了许多涉及到移动设备、可穿戴设备、以及联网智能设备的范例和争议。虽然这些在命名和组织上都是相同的，但仍然有三个改变。我将其中一个原则的名称缩短为“色盲”，色盲现在所蕴含的意思并不仅仅用于形容人对色彩的感知，我加了一个新的原则——美感，并重提了两个旧的原则——可发现性和简洁性。十几年前我将不是研究问题的他们从列表中撤柜，如今，他们随着新的发现带来的问题，卷土重来。

真正发生了巨大变化的是更深入的细节，你会在每一个类别中发现更多新的小原则，更多的解释、案例分析和例子。

引文

高效的界面大多在视觉上色彩分明并且可变性较高，能够让用户轻易地掌控。用户能够很快地看到每一个选项的功能，掌握如何实现他们的目标，并很快开始着手做事。它不需要用户提供内部系统的工作原理，用户只需下简单的指令，每一个步骤就都会被认真清楚地保留下来，并随时撤销任何活动，同时开启并执行多项应用工作。

因为在互联网或者移动设备上，应用程序或服务不会被改变，那么这些设施的原则就会变得更加重要。

我喜欢苹果，但它并不完美

我在这篇文章中写了许多关于苹果产品的例子，特别是它的界面常坏这一方面。苹果在交互设计上有着许多革命性地突破，我深信这一个局面将一直持续下去。他们也存在缺陷，相对其他品牌较少，但由于我用的几乎都是苹果，我天天都会遇到面对和遭受这些缺陷。在我编写这篇文章的时候，我用的是苹果，那就很自然而然地我会用它来举例了。

请不要因为这篇文章而觉得我是一个讨厌苹果的人。1978年，在我被乔布斯招募之后，我设计了苹果公司第一个人机界面，我在苹果公司待了14年，每一个苹果新产品发布的第一天都能看到我排队购买的身影，我的大部分退休资金也用于投资苹果的股票。我爱苹果，支持苹果，希望它能做得更好。

美感

►原则：美感设计最好就是留给那些对软件驾轻就熟的图形/视觉设计师

►原则：一切以实用性为前提

长久以来时尚都是一个淘汰产品的元素，从衣服到车，皆无例外。一个新的时尚元素不应该也不需要偏离用户性能，大视觉效果或者大的行为程序改变有时还可以促进生产力显著增长。

►原则：用户能够通过已被视觉设计出来的界面进行相对的“视觉设计”

在用户设计好自己的页面后，与呈现出来的界面效果如果能够相互切合，又不会影响原有设计程序和规划的功能性，能让用户满意，那么这个设计就算是在一定程度上取得了成功。如果不是的话，那么设计师们就要重新考虑新加入的美感的问题了。

预期

►原则：为用户考虑每一个过程中所需要的所有的信息和工具

软件与硬件系统应该尝试去预测及迎合用户所需。不要等着让用户离开眼前的屏幕去搜寻他所需要的信息。他所需要的信息应该是已经被安置放在他眼前，能够随手用的。

预期设置要求设计师能深入地了解他任务关键所在和用户所需，洞察出用户的欲求。同时也要求足够的测试去确保目标是否真正地实现。如果一个工具或者信息来源就在屏幕上，但用户却找不到，那么它就没有存在的价值了。

失败来临前不会提前通知你，它总是突袭并且久久不愿离去。特别是如果你没有一个受你俘虏的用户，正如公共网址和一些应用程序，用户开始使用后通常都不会停止使用它们。但即使你有一个受俘虏的用户，你没有受你俘虏的客户，而这个客户的员工在花费时间去找新的资源，那么你的竞争对手将有机会扳得一局。

自主性

►原则：计算机、界面设备和任务环境都“属于”用户，但追求用户的自主性并不意味着我们放弃了我们的原则

给用户自主选择的空间。让用户能够快速学习并掌握设备，能感觉自己在掌控设备。但要相对地给予自由和界限。小孩会在封闭的小房间哭泣，也会在空大的房间里哭泣。成年人也同样如此。成年人感觉最舒适的，是既不封闭又不会过于空大的环境，他们喜欢在环境里自由探索，但又不危险。

►原则：让用户自己做决定，即使效果可能会差强人意，失去审美和效率

自主意味着让用户决定他们想要什么键盘就用什么键盘，想要桌面设计成怎么样就设计成怎么样（即使他们喜欢混乱），又或者喜欢什么应用程序就要什么应用程序。如果开发人员将这种控制权带走了，那么用户就会感到沮丧和生气。

►原则：练习负责控制

给用户自主并不意味着开发人员应该放弃所有的控制。与此相反，开发人员必须掌控必要的控制，给用户过多的选择会造成适得其反，无法选择的结果。然而，就在今天，不少开发商不仅过度地控制设备设计，还在过程中造成巨大的人机交互上的一些错误。例如，文章中的字体及其大小收到限制，但人的普通视力无法正常的进行阅读。在设计程序时提供的编辑文案并没有考虑实际，单纯地考虑到用户用他的的胖手指用文本光标去移动编辑修改文字，以符合审美需求，却没有考虑到功能的已经受损缺失。

比如，他们还会随意设置时间界限来决定一个用户是否是有意按压一个链接的，而非只要用户触碰一下并向上滑动屏幕就开始滚动了。他们也不会给用户改变这个时间界限的机会，于是很多用户因误触屏幕进入本不想打开的页面，这样的情况每天都会发生很多次。这就是一个不负责任的控制设计。30年前，我们学习到用户要通过双击打开一个文件。触屏设备的用户也需要同样的东西来控制打开链接所需要的停留时间。

眼动追踪

分分钟的完美链接触发口

在解决这种意外链接触发时，你需要考虑用户之间的区别，即用户是不小心触发了链接和用户想要触发链接两者之间的区别。

想想看这两者之间的区别其实很简单。当我尝试触发一个链接时我会看着它。如果是意外触发的链接我不会看着它。打开相机或者使用一个内置的专用眼动跟踪器去查看用户的眼睛，如果他看着链接的时间足够长到他的脑海里已经有了链接的印象并且发现他正触碰它，那么就说明用户正在主动去触发链接。如果他并没有看着链接，那么就是意外地触碰到了的链接了。即如果你有目的有动机时，你就是想要触发链接。但当你认为用户不是在故意触碰到链接时，你可能忽略了一个事实，那就是——用户正在触碰它。

为了节约能量，实施这种方法，在用户点击链接前相机或者眼动跟踪器不需要打开，这种方法还需要微调时间进行发展，但还待考究是否准确。

这可能已经被发明出来了，但如果没有，我把它叫做“眼动跟踪法——降低意外触发链接行为”，并在此将其放置于共有的公共文化财产中。

►原则：用状态机制让用户时刻都能知道和了解信息

没有自主是能在缺乏控制的情况下存在的，同时控制也不能在缺乏信息下存在。状态机制是为用户提供必要条件并让用户时刻能够应变不断改变的环境的重要条件。

►原则：时刻保持用简单的视图来更新状态

如果等着用户来找状态信息，那样就太迟了。相反，他们应该能够看一眼他们的工作环境就能很快地收集到第一手资料信息和状态。

►原则：确保状态信息的准确性

状态信息的更新有时并不准确。我在撰写这篇文章时，遇到一个状况，一个用户更新iPhone或iPad的新一代系统软件时，进度指示器显示它大约需要五分钟来完成这个任务。但实际上，它通常需要一个小时或更多的时间。（新系统本身自我审计需要五分钟，但紧接而至的几百兆几万兆的信息都需要被转载）。果断被骗了，但又只能带着不自在的感觉拿回她的设备。

颜色

色盲

►原则：无论何时当你在交流中使用颜色去传达信息时，你应该使用清晰地，次要的线索去传达信息给那些无法看到呈现出来的颜色的人群。

当下，大多数人有着彩色的显示器。然而，大约10%的男性和少于1%的女性都有着某种形式的色盲。

►原则：现场测试一下，看你到底是什么颜色的色盲

在Google上搜索模拟工具。例如，对于网站，你应该尝试一下http://enably.com/chrometric/

对于图像，则是http://www.colblindor.com/coblis-color-blindness-simulator/

左图为红色盲，右图为蓝色盲

颜色是一种重要的对接元素

►原则：不要在交流中回避颜色，因为并不是所有的使用者都能看到所有的颜色

颜色是度量我们有限的沟通能力的重要尺度。比起一个完全不能看到、被关闭了整个画面的人，一个只是被剥离了颜色的色盲可以做的其实还有很多。对于那些人来说，一个备用线索的存在是很重要的。

►原则：不要因为一个过去的图像设计风尚而在交流中剥离或者忽略颜色的暗示

通过时尚产生人工的报废是一种传统有效地方法来完成从衣服到车这些产品的转变。然而，一种新的时尚不应该也不需要从用户性能上进行减损。在完成了审美上的改变之后的用户测试，会成为新旧设计之间衡量的标杆。要确保易学性、满意度和生产率已经得到提高或者至少保持不变的水平。如果无法达到，那么会导致新问题的这些新添加进去的审美元素将会被重新考虑。

一致性

如果那些对用户来说最重要的一致性领域没有受到严重的扰乱，接下来的这四个放到一起的一致性原则，给交互设计师在产品的演变上提供了巨大的跨度。

一致性的级别

以下清单是根据那些需要最忠实的一致性努力的界面元素来排列给那些最需要的人。（有些人假设这些项目1至6的顺序应该被准确的逆转。这会导致当用户面对那些看起来相似但实际上表现完全不同的页面时会产生确实的混乱。）

1.最高级的一致性

平台的一致性：通常带有一致的法律上和事实上的标准。

内部的一致性：在你的产品或者服务上维持一个正常的外观和感觉。

要联系商标并且使你的其他产品和服务上更容易、迅速的得到采纳。

2.一套产品上的一致性，如：微软办公工具

通常外观和感觉要和所有的系列的产品联系在一起。

3.一个单一的应用程序、介绍或者服务启动画面、设计元素等的整体外观和感觉

一个视觉性的产品应该被有目的性的建立并且经过对视觉语言的深思熟虑，最后形成于可用性测试。

4.小型的可见的结构，例如：图标、符号、按钮、滚动条等。

如果人们没有花费一半的时间来尝试弄清楚怎么去滚动或者打印，那么这些对象的外观就需要被严格的控制。他们的位置相比于他们的外观仅略显次要。如果在哪里规范它的位置是有意义的，那么就这样做吧。

5.隐形结构

隐形结构是指像微软WORD里的那个巧妙地有着多种神奇的性能的小型左边框，只要你能发现他的存在。它有可能会或可能不会出现在你这个版本的WORD里面。如果没有，那么因为他的不可见性，你可能永远都不会确切的知道他是否真的在那里。如果你坚持使用他们，那么你就会清楚的了解到隐形结构的问题所在，和为什么严格的一致性会尤为重要。

苹果明显的想到了这是个很好的注意，并且开始通过到处在产品中加入从滚动条到按钮这些隐形结构来复制微软的做法。这样的一种情况在Mac上却显得很糟糕。在21世纪早期，用户发现使用电脑许多最基础功能的唯一方法就是使用Google寻求帮助。

严格来说，一些可见的对象像是并没有被操控过，因此对于自己的设备，使用者可能从来都没有发现他们被操控后的作用。如果你非常坚持伪装控制，那么秘密的法则就会爽快的出现。例如：你可以点击和拖动当前的Macintosh 窗口来调整他们的大小。或者有时候你可以点击和拖动不同的东西，但不是其他东西其他时候。要多尝试各种东西，并看看会有什么会发生。

如果有的话，比起被用于产生信息的对象，包含信息的对象应该很少被隐藏起来。苹果在隐形的Macintosh 上制作滚动条时已经违反了这个原则，直到被另一个使用者超越了他们。

6.用户行为的解释

改变你对使用者习惯性行为的解释是你对使用者所做的其中一个最糟糕的事情。快捷键必须要维持他们的意义。一个习惯的手势必须以标准的方式进行解释。如果一个用来带使用者去下一页或者下一幕的按钮在过去30年里一直是位于右下方，那么就不要把它移动到右上方。改变一个需要使用者忘掉下意识的动作并且学习新的动作的按钮的位置，对使用者来说是会令他极其的挫败的。使用者甚至很可能会没有意识到发生了什么，并假设是他们的硬件或者是软件出现了问题。

如果你想要去吸引其他产品现有的用户到你的产品中，你应该尝试着通过同样的方式去解读你的新用户的命令。例如：允许他们去重复使用那些他们已经习惯了的相同的快捷键。

案例分析：苹果“命令”（Command）键的修改

几年前，苹果最终为了他们键盘的快捷键而让windows 用户能以一个简单的方式来继续使用控制键，而不是为了命令键。那些新接触Mac的windows 用户在忘却或重新学习这样一个根深蒂固的习惯时面临着巨大的困难。随着在办公室和家里之间移动而不得不在2种操作系统之间转换，用户不得不每天两次的进行忘却和重新学习，并且最终会不断地持续犯错和在每一次想要利用那些不在快捷的快捷键的时候，不得不抛开他们的任务来有意识的考虑要按什么修饰键。转换和使用双操作系统大部分的难度由于这一个功能的缺失，并且这从一开始就是一个完全没有必要的障碍。

感应的不一致性

►原则：当事情作用不同时，视觉上不一致是很重要的。因为当事情作用相同，它在视觉上保持一致性。

要使作用不同的对象看起来不同。例如，垃圾桶是使用者可能会把垃圾放进去并且会在之后拉回来的对象。如果你想跳过这个“把它拉回来”的功能，那也没问题。只要使它看起来像焚化炉或碎纸机或者其他除了垃圾桶以外的东西。

使更改过的网页看起来更改过。如果有人在一个更新过的网站或修订过的应用系统里遇到了不熟悉的页面，他们能知道去环顾并且找到不同的是什么。如果没有这样一个隐射，他们会尝试去使用这个页面确切来说就像他们一直做的那样，并且这将会失败。

持续性

►原则：随着时间的推移，争取持续性而不是一致性

如果你拿出你的产品重新加工的地方或者甚至拿出一个全新的产品，让人们即刻辨识出某些发生过的巨大变化。否则，他们将会跳进试图使用的，准确来说是他们总是用的那个方法而那个方法将不会有效。“均匀性”将意味着你的下一个产品建辉和你最后一个产品相同，这显然是错误的。但“一致性”在一个会有很多发展出现的领域中会相对好一点。我们的目标是连续性，有一条贯穿我们各种各样的产品的线。还有就是解放，指引着我们的用户，而非捆绑着我们的过去。

与用户期待的一致

►原则：最重要的一致就是和用户期待的一致——威廉·巴克斯顿

能为事物怎样运转而做出一个多么精彩的逻辑论证都不要紧。如果用户期待它以一个不同的方式运转，那么想要改变这些期望的你将要面对的将是一个上坡和常常无法取胜的斗争。如果你的方法并没有提供一个明显的优势，那么就像你的用户所期望的方向进发吧。

施乐1981年推出的图形界面操作系统：Xerox 8010 Star，据说这个界面是苹果图形界面灵感的来由

案例分析：施乐之星拖动规则

这个施乐之星提出的拖动图标的规则是一个优雅的典范：

建议规则：拖动一个文件的图标从一个对象（例如：文件夹或磁盘）到桌面上的另外一个对象将会移动文件。

很好学，也很好理解。逻辑的，受教的，糟糕的。这个规则，要公平，要在大多数时候都行之有效。在某些情况下，它甚至要比我们今天所使用的那些更复杂的规则要有效得多。例如，如果你从你桌面上的文件夹里拖动一个文件到一个软盘里，那么相比于复制到你的软盘上，移动文件会好得多。如果你在家里的文件上做了更改，那么使用那个现在在软盘上的文件，你可以第二天早上把文件放回你的桌面工作上，而不需要新版本和前天留下的过时了的旧版本。你只要有一个真实的版本。

直到打印施乐之星的时候才出了问题。在那时候，你将会抢那个文件，并把它拖进打印图标。那个文件被传输到打印机并且永久的从桌面擦除了。工程师和设计师之间的为期两周的战争爆发了。设计师赢了，把这个我们今天所拥有的规则放了进去：

最后的规则：在磁盘分区内拖动文件将会移动它。拖动文件从一个磁盘分区内到另一个磁盘分区内将会复制他。

99%以上的我们的使用者可能都不能够告诉你什么是磁盘分区，他们理解的是我们不必明确教导的规则。为什么？因为这是和用户的期望所一致的，部分的用户期望是非常强大的以至于开展例行活动将不会导致他们工作的失败。

默认值

►原则：字段中的默认值将会很容易被吹走。

当用户激活一个字段，当前的输入应该被自动选择，因此按退格/删除或者开始打字的时候将会消除当前输入。用户能够在字段内单击来取消整个字段的选择并在字段内落下文本指针，确切来说是用户单击的地方落下文本指针。选择输入的规则通常是跟随今天的。然而，草率的编码会导致文本光标落在不同的、不可预测的位置。

►原则：默认值应该是”智能的”，并且会响应的。

不是所有的东西都需要默认值。如果那里没有可预测的成功者，考虑不要提供任何的默认值。在观察一个覆盖25%的情况下的默认值并决定是否使用它需要一个珍贵的认知周期。同一时间能够花费进入实际需要的选择当中。

►原则：有一个更有意义和响应的词语来代替单词“默认”

用户很少有在任何特定情境下关于默认的意义的概念。（当然，他们确实知道它的字面意思，银行将会带走用户的房子。这确实会使他们感到喜悦）用“恢复标准设置”“恢复习惯设置”“恢复初始设置”或者用更多会实际发生的其他特别词语描述来代替“默认”。使用者尝试找到能够使你的用户准确的预测出你的软件能够实际做到的事情的词语。

►原则：你的视觉设计还有词汇必须能够和回复的眼界联系。

通过用户测试，要确信用户了解修复的范围：他们签署了一些最近本地化项目的良性恢复吗？或者他们将要花费接下来四天重新进入他们所拥有的应用程序的用户名和密码吗？

用户测试你的恢复选项来找到用户所认为的按下这个按钮将会导致的结果。如果你将要做一些良性的事情，但他们把它解释为潜在破坏性，他们将不会使用这个选项，并会留下他们和使他们认为是在第一个地方使用它的那些同样破碎或部分破碎的系统。同样，如果你消灭几个小时的精心定制而没有恰当的准备他们，他们可能不会几乎如你所预料的一样心存感激。（我有一次在印度有一个年轻的小伙子帮助我解决了我DVR上的一个小问题。当他解决的时候，他要求我重新初始化硬盘，擦除在机器上的每一个程序。这是比我一直在寻找的多了一点恢复。那之后，我能够开展我和他剩下的甚至不用电话的谈话。我从不知道我能够叫得那么大声。）

当涉及标签的对象，像是属性和偏好的Windows时，确信视觉设计使恢复按钮的范围明确。个人标签“卡”应该是视觉从周围窗体中分离以至于按钮可能会被放置在单个的卡上或者在周围区域内，推测按钮的行为将是仅适用于当前选项卡或所有选项卡。没有留下这样一个借口可以让你留下这样一个含糊不清的范围。这不是一个时尚的决定。

可发现性

网页页面和基于云计算的应用

当独立开发者在位于一个为简易浏览静态页面而设计的简单工具的简单窗口的限制下努力创建一个复杂的网站和app的时候，第一个“由内而外”的应用网页浏览器中出现了。甚至尽管1996年基本范例的不足被一直什么都没做的标准委员会为了解决开发商的需求而展示出来。工作于复杂网页和基于云计算应用的开发者获得了浏览器的菜单栏。这已经不是一个持续地丑闻了。想象你的老板告诉你，要去激起一个针对使用微软Word菜单栏的PS的竞争者。那么第一个从你口中说出的话肯定是：但这就意味着我不得不把我所有的菜单都放到用户的图像所需的窗口内容区域当中！疯了，对吗？而这就是当我们每一次创建一个网页页面时所要做的。

在笔记本电脑和台式电脑当中，控件，特别是隐形控件在内容区域中是不存在的。

案例分析：苹果的颠倒应用

在早期的21世纪，苹果开始了从他们Macintosh应用的内容区域周围的区域到控件内容区域本身的迁移。控件会突然出现在那个会隐藏那个用户企图去影响、很有内涵的内容的位置。用户经常不能够把控件移动的足够的远来看他们正在做什么。甚至当控制面板能够被移动到内容窗口之外的时候，它会恢复到原始的模糊位置直到下一次被调用。然而这一个方法在有些时候对于手机应用软件的设计来说是有必要的，它对基于传统电脑基础上的用于大屏幕的app设计是没有现实意义的。一些有影响力的app会占用少于10%或20%的用户屏幕空间，为控件突然被迫进入甚至更小的内容空间而提供大量的内存。它会导致用户满意度和生产力的严重下降。

►原则：传达你的手势词汇和可视化图表

要包括一个展示你的app能够理解的手势的帮助页面。当用户第一次打开这个app时要展示这个页面给他，并在之后让他清楚了解到哪里可以找到这个帮助页面。在手机app中，要使代表页面的图标持续地可视化或者让它形成当用户接触到触发区或者是用户屏幕时会出现在外围的这个标准设置的一部分。对于杂志或者相似的媒体对象，要让它首先打开的每一个问题的页面（封面之后）都要是在那里并且是可用的。

►原则：争取平衡

这不是1980年，当大多数的人们还没有看过一部电脑，并且我们很有必要把所有的东西都变得非常明显。你可以使用一个巧妙的设计：不要在页面中把一个信息图标放在每一个单个的项目旁边。反而要使用像这样的从会立刻解释每一个象征和手势的Google+ Snapseed的覆盖。要在这里看到覆盖是很难得。但开发商已经永久的加强了他们的取消和申请箭头，书写标签。你是怎么发现这样一个加强是否是有必要的呢？你是怎么发现是否用户能够找到要按什么（在这种情况下，一个始终可见的问号会出现在最右上角），以在开始时能获得帮助？跟随着下一个原则并得到结果。

►原则：可发现的用户测试

为了发现你需要的是什么样的交流和为了确认你成功的和她交流，你必须通过整个项目做一个常规可用性测试。要使用具有你的预期水平，带有系统和任务领域有经验的人来测试。看他们是否能定位，识别，学习并使用他们需要去执行的那个你所期望你的用户去执行的任务的工具。如果他们不能，要迭代设计直到他们可以为止。使用主动探索，经销商模式，所有你所需要的东西来确认你的用户能够发现并学习到你产品的特点。

以上所有的我所讨论那些将有可能使它永远的投入生产的错误，是用户体验组进行可用性研究并基于这些结果来改变那些设计。

source:特赞Tezign