【UXRen译#62】交互设计基本原则（第一部分）

美观（Aesthetics）

• 原则：美观设计应该交给那些在相应领域受过训练、经验丰富的人：图形和视觉设计师

• 原则：时尚（fashion）永远不能损害可用性

  无论销售任何东西，从服装到汽车，借助时尚来产生人工废弃（artificial obsolescence）都是一种确立已久、行之有效的手段。一种新的时尚不应该也没有必要以用户效率为代价：虽然可能有大量视觉甚至行为上的改变，但既不一定会损害生产力，也不会使之明显地提高。

• 原则：对视觉设计做用户测试应该像对行为设计做用户测试一样彻底。

  当发生美学上的改变之后进行用户测试。在适用的情况下，以新设计为基准来对比旧设计。确保可学习性、满意度和有效性可以得到提高，或至少维持在原有水平。如果没有，产生问题的新增美观设计就需要重新考量了。

 

预期（anticipation）

• 原则：在整个过程的各个步骤给到用户需要的所有信息和工具。

  软件和硬件系统应该尝试对用户的要求和需要做出预期。不要想着用户会离开当前的屏幕去寻找和收集必要的信息。信息必须放在适当的位置，必要的工具必须提供且可见。
  预期原则要求设计者对任务范围和用户都有深入的理解，这样才能对需要什么做出预期。它同时要求进行足够的可用性测试，来确保目标已经得到满足：如果工具和信息源就在屏幕上，但用户没有发现，那和没提供没有什么区别。
  没有主动对用户预期的害处通常是迅速且持久的，特别是在你的用户可以自由选择时，例如，一些公共网站或APP就是这种情况。这些用户很可能再也不会从他们的搜索中回来。即便你垄断了一些用户，你一般也不会有垄断的客户，如果你客户的雇员在找需要的资源时都会浪费大量的时间，你的竞争对手在下一次游说时就有好故事可以讲了。

 

自主（autonomy）

• 原则：计算机、界面和任务环境都“属于”用户，但用户自主并不意味着我们要完全放弃规则给用户一些喘息的空间。

  当用户可以“主宰”时，他们可以快速学习并获得控制感。但讽刺的是，在没有任何限制的情况下，人们并不会觉得自由（Yallum, 1980）。无论是被限制在一个狭小的空间还是在一个巨大而空旷的仓库里游荡，小孩都会嚎啕大哭。同样，成年人在一个限制小又不是漫无边际，或可供探索又没有很大风险的环境中最为舒适。

• 原则：让用户自己做决定，哪怕他们审美有一点点不足、行为一点点低效

  自主意味着用户可以决定自己使用什么样的键盘、如何布置桌面（哪怕他们喜欢乱七八糟）、使用什么样的应用。如果开发者把这些都剥夺了，用户会变得沮丧甚至愤怒。

• 原则：实行有责任的控制

  允许用户有选择的自由并不意味着开发者应该放弃所有控制。相反，开发者必须实施必要的控制。不要给用户太多的绳子绑住自己的手脚。但是，当今的一些开发者不仅过度控制，而且在这一过程了犯下了严重的人机交互错误，比如限制文本的字体和大小导致有着正常视力的人都阅读不了。他们提供的编辑方案需要用户动用他们肥大的手指去定位像素级别精确度的文本光标。这样仅仅是为了避免增加必要的箭头键来达到审美上完美的键盘(软键盘)，但却严重损害了功能。
  对于判断用户是否在有意点击一个链接，他们也是随意设置时间和动作阈值，比如说用户在一个上滑操作开始的时候停顿了片刻也会被判定为点击链接（举例）。用户对这个真是无能为力，每天都有大量的用户误点了链接、去到了不想去的页面。这是一种不负责任的对控制的应用。我们在30年前就知道用户对于鼠标可以用滑动条调节双击的时间间隔。触屏的用户对于链接的计时也需要同样的东西。

 

每次都能做到完美的链接触发

在思考像意外触发链接这样的问题的解决方案时，你必须考虑到用户意外触发一个链接和想要触发一个链接之间的不同。

当你思考其间的差异时，答案很明显：当我想要触发一个链接时，我会看着它。当我是意外触发时，我不在看它。打开摄像头或使用一个内嵌的专用眼动追踪器来查看用户的眼睛。如果它盯着这个链接足够长的时间，在心里等待着页面的加载，那么他就是在点击它，他正在跟着这个链接走。如果他没在看它，那他就是意外地点击到了。当你确定用户是有意识的点击时，那就触发这个链接。如果不是，那就忽略用户点击它的事实。

为了节省电量，实施这一方法时，如果用户不是经过或点击一个链接，摄像头或眼动追踪器就不要打开。这一方法和算法在时间上需要做微调，但它应该被证明是相当准确的。

这个方法可能已经发明出来了，但如果没有，那就叫它“基于眼动追踪的意外链接触发错误降低方法”，然后就可以把它应用到公众领域了。

• 原则：使用状态机制来让用户保持觉知

  自主不能在没有控制的条件下存在，控制也不能在缺乏足够信息的条件下存在。状态机制对于提供必要的信息来让用户对改变的状态做出适当的反应非常重要。

• 原则：状态信息要实时且容易察觉

  用户不应该不得不去寻找状态信息。相反，他们应该可以瞥一眼工作环境，并至少能够收集到对状态和工作负荷的粗略估计。

• 原则：状态信息要准确

  状态信息可能实时但不准确。在写这个的时候，有用户升级了iPhone或iPad的操作系统，进度指示器显示大概会花5分钟的时间完成更新。实际上，它平均花了一个小时甚至更多的时间（新系统自己会在5分钟内更新，但之后在手机上成百上千兆字节的信息需要再次上传）。被欺骗的用户没法预测她什么时候可以真正地拿回她的设备。这样的一个用户就没有感受到自主。

 

颜色（color）

色盲（color blindness）

• 原则：任何时候你使用颜色在界面上传达信息，都应该辅助使用清晰、次级的线索给那些看不到颜色的用户传达信息。

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

• 原则：测试你的网站，看看哪种颜色的色盲可以看见

  Google搜索模拟工具。例如，对于网站，你可以尝试http://enably.com/chrometric/。对于图片，可以尝试http://www.colblindor.com/coblis-color-blindness-simulator/。

 

色彩是界面的关键元素

• 原则：不要因为不是每个用户都能看到每种颜色就并不在界面中使用颜色

  色彩也是我们有效的沟通能力中的关键维度。去掉一个色盲看不见的颜色相当于对一个盲人关掉整幅画面，二者间没有什么区别。对那个人群来说，呈现可代替的系列线索才是重要的。

• 原则：不要因为一时的图形设计风尚就将界面上的颜色线索去掉或弱化。

  无论销售任何东西，从服装到汽车，借助时尚来制造“人为过时”（artificial obsolescence）都是一种确立已久、行之有效的行销手段。然而，一种新的时尚不应该也没有必要损害用户绩效。在审美风格改变后进行用户测试，以旧设计为基准来对比新设计。确保可学习性、满意度和有效性得到改善或至少维持原有的水平。如果没有，产生问题的新审美就需要重新考量。

 

一致性

在产品进化的过程中，下面的4个一致性原则可以帮助交互设计在不严重损害对用户最为重要的一致性的前提下，提供他们大量的选择余地。

1. 一致性的几个层面

• 原则：严格确保一致性的重要性依水平而定。
  以下列表从一致性要求最低到最高来排列界面元素。（大部分人都以为1到6的顺序恰恰相反。这会给用户造成困惑，因为他们会遇到熟悉的页面，但却需要完全不同的行为。）

1.1 首层一致性

• 平台一致性：在整体上与de jure&de facto标准保持一致
• 内部一致性：你的产品或服务要保持基本一致的外观和感觉

传递品牌形象，并让你其他的产品和服务更容易、更快地识别

1.2 一套产品的一致性，比如Microsoft office

基本一致的外观和感觉表明了产品属于同一系列

1.3 单个app、应用或服务屏幕、设计元素等大体一致的外观和感觉

一个视觉设计师应该建立一套有目的、经过慎重考虑的视觉语言。这套语言在可用性测试的基础上建立。在整个产品中，用户行为应该可以完全无碍地迁移。

1.4 小的视觉结构，比如图标、符号、按钮和滚动条等

这些要素的呈现需要得到严格的把控，如果人们不准备花大半的时间去弄清楚如何滚动或打印的话。相比于它们的视觉呈现，它们的位置也是相当重要。当统一它们的位置比较符合逻辑时，一定要这样做。

1.5 不可见的结构

不可见的结构是指一些不可见的对象，如果你细心，就会发现比如微软word的智能小巧的左边框就有各种各样强大的属性。它不一定存在于你使用的那个word版本中。如果没有，你可能永远无法确切地知道它是不是在那儿，因为它是不可见的。这就是不可见的对象会出现问题的地方，如果你一定要用不可见对象，那么对它保持严格的一致性就非常重要。

显然，Apple过去很认可微软的这种做法，并各种添加不可见的控件（从滚动条到各个地方的按钮）来复制微软的做法。在Mac上，这一局面变得很糟糕（一直延续到21世纪10年代早期），以致于一个用户学习如何使用许多最基本功能的唯一方式就是，使用Google搜索帮助（更多介绍参见：可发现性）。

严格来讲，一些要素尽管可见，但看起来并不像控件。放任用户自己去发现发掘最后的结果可能就是（left to their own devices）永远发现不了这些控件。如果你一定要隐藏控件，秘诀是应该是直接和清晰，例如，“你可以点击并拖动Mac当前窗口的边缘来重新调整它的大小，”而不是，“你有时可以点击并拖动各种东西，有时又只能控制部分东西，所以你要尝试各种东西，看看会发生什么。”

就算有的话，传递信息（而不是用来产生信息）的实体也应该尽量少的设置为不可见的。除非用户在上面悬停，Mac上的滚动条都是不可见的，这就违反了这一原则。

1.6 对用户行为的解释

改变用户习惯性操作的意义算得上是你对用户做过的最糟糕的事情了。快捷键必须保持原有的意义。一个习得的动作必须以标准化的方式得到解释。如果在过去的30年内，将用户带去下一页或下一屏的按钮一直都是放在右下角的，那么，就不要把它移到右上角。这样的改变会造成用户极大的挫败感，因为它需要用户抛弃下意识的动作，并学习一种新的的动作。用户甚至可能没有意识到发生了什么，误以为硬件或软件出了问题。

如果你想将其他产品的用户吸引过来使用你的产品，你应该以同样的方式解释新用户的指令，比如允许他们使用他们已经习惯的同样的快捷键。

案例研究：苹果的Command修改键

对于键盘的快捷键设置，苹果花了几年的时间才最终给Windows用户一种简单的方式继续使用control键而不是command键。对于曾经使用Windows的Mac新用户来说，改掉或重新学习一种根深蒂固的习惯是很艰难的。对于那些在家里和工作场所需要在两种操作系统间转换的用户来说，他们每天必须经历两次改掉和重新学习习惯的过程，这会导致不断的出错，甚至于每次当他们想要“快捷键”时，必须抛开他们当前任务，有意识地去思考需要按哪个修改键，快捷键不再快捷。在转换或使用双操作系统的过程中发生的大量困难都是因为这种缺少的功能，从一开始这就是一种完全没必要的障碍。

 

2. 有引导作用的不一致性

• 原则：正如同样操作方式的东西在视觉上也要保持一致一样，操作方式不同的东西在视觉上保持区分也是很重要的。
  让操作方式不同的东西看起来不一样。例如，对于“回收站”，用户会把“垃圾”放进去，然后不久后可能又会取出来。如果你想忽略“取出来”的功能，没有问题。但你要把它设计成“焚化炉”或“粉碎机”或任何跟回收站不同的东西。
  让已经改变的页面看起来已经改变过。如果一个人在一个更新过的网站或app上遇到一个不熟悉的页面，他知道到处看看、弄清楚不一样的地方。如果没有这样的线索，他们会尝试以他们惯常的方式来使用这个页面，而这可能让用户碰壁。

3. 连续性

• 原则：在长远考虑上要保持连续性，而不是一致性。
  如果你为你的产品想到了一个完全不同栏目，甚至想到了一个全新的产品，让用户马上知道发生了重大改变也是重要的。否则，他们会马上以他们惯常的方式使用，然后发现自己到处受挫。“统一”意味着你的下一个产品要与你的上一个产品保持完全一致。这种想法是完全错误的。“一致性”在一个发生了如此多变化的领域并不会让事情变得更好。我们的目标是连续性，也即是说，有一条串起我们不同产品和版本的线来引导用户，但并不是把我们牢牢系在过去。

4. 与用户预期保持一致

• 原则：“最重要的一致性是与用户预期保持一致。”——William Buxton
  你关于事物应该如何工作的逻辑论述多么巧妙并不重要。如果用户期望的是另一种截然不同的工作方式，你将陷入一场改变这些期望的斗争，艰难且通常是必败的。如果你的方式没有很明显的优势，遵循用户的期望吧。

 

案例研究：Xerox Star的拖动规则

在Xerox Star Finder上拖动图标的规则是优雅的范例：

• 初步规则：从一个对象（例如文件夹或磁盘）拖动文件到桌面上的另一个对象将会移动这个文件。

  易学、易懂、合理、可训练（teachable），但也糟糕透顶。公平的将，这一规则在大多数情况下都没有什么问题。在某些情况下，它甚至比我们今天采用的复杂的多的规则更好。例如，如果你从桌面文件夹中拖动一个文件到软盘，它会移动这个文件，而不是在软盘上复制一份。如果你在家里对这份文件进行了修改，第二天工作时又将文件从软盘移动到桌面上，你得到的不是一个新版本，你也不会将昨天的旧版本留在软盘。
  等到需要在Xerox Star上打印时，问题就来了。这时，你会按住文件，然后将它拖动至打印机图标上。文件被传送到打印机，并永久地从桌面删除。工程师与设计师之间为期2周的战争突然爆发。最终设计师胜利了，这才有了我们今天的规则：

• 最终规则：在同一磁盘分区内拖动文件的效果是移动它。而将它从一个磁盘分区拖动到另一个磁盘分区则是拷贝它。

  超过99%的用户可能并不知道“磁盘分区”是什么，但是他们理解这条规则，即便我们没有明确地告诉他们。为什么？因为它与用户预期一致，在用户从事常规操作的时候不会对他们的工作造成破坏。

 

 

版权所有：UXRen翻译组

除转载文章外，本站所有文章版权归13Tech及UXRen社区所有，转载请务必标明以上3条信息（来源、译者和审校者），如未标注，视为侵权，13Tech及UXRen社区保留随时追责的权利。

译者：阿东

审校：石头

 

原文作者：Bruce Tognazzini

发布日期：5 MAR 2014

原文链接：http://asktog.com/atc/principles-of-interaction-design/#readability

顶部图片来源：http://ivomynttinen.com