下载掌阅APP，畅读海量书库
立即打开
知道为什么Microsoft Windows的选单列放置在视窗上，而Apple Mac OS X的选单列放在屏幕的最上方吗？其实这是费兹定律（Fitts’Law）在界面设计上的妙用所在。
再比如，你的注意力和鼠标指针正停留在某个网站的LOGO上，而被告知要去点击页面中的某个按钮，于是你需要将注意力焦点及鼠标指针都移动到那个按钮上。这个移动过程当中的效率问题就是费兹定律所关注的。如图2-1所示。
图2-1 注意力在网页上移动
费兹定律（Fitts’Law）是心理学家Paul Fitts所提出的人机界面设计法则，主要定义了游标移动到目标之间的距离、目标物的大小和所花费的时间之间的关系。费兹定律目前广泛应用在许多使用者界面设计上，以提高界面的使用性、操作度和效能。
定律内容是从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（图2-2中的D与W），用数学公式表达为时间T：
T = a+blog 2 (D/W+1)
图2-2 用图来解释费兹定律
用图来解释，就是D（起始点到目标之间的距离）越长，使用者所花费的时间越多；而W（目标物平行于运动轨迹的长度）越长，则花费的时间越少，使用效能也比较好。
来对比一下Windows与Mac（OS X Lion之前的版本）中的滚动条。在Windows中，纵向滚动条上下两端各有一个按钮，里面的图标分别是向上和向下的箭头；横向滚动条也是类似。这种模式确实更符合用户的心智模型，因为触发左右移动的交互对象分别处于左右两端，到左边寻找向左移动的方法时会看到左箭头按钮，向右侧也是一样；而Mac系统则将左右按钮并列在同一侧，使左右导航的点击操作所需跨越的距离大大地缩短，提高了操作效率。如图2-3所示。
图2-3 Windows 与 Mac中滚
在交互设计的世界中，目标用户群的特征是我们需要时刻牢记在心的，对于费兹定律的运用也是同样的道理。对于目标用户中包含了儿童、老人甚至是残障人士的产品来说，界面交互元素的尺寸需要更大，以便这类相对特殊的用户可以很容易地点击操作。
下面我们来看看费兹定律在界面设计中的运用。
在设计任何一个可交互的UI元素时，我们都需要考虑它的尺寸以及与其他元素之间的相对距离关系。市面上有各种各样的设计规范，其中多数都会提到按钮最小尺寸以及与其他交互元素之间排布距离方面的问题。尽量将多个常用的功能元素放置在距离较近的位置；另外需要考虑的是，对于那些会产生高风险的交互元素，在很多时候设计师不希望用户能够很轻松地点击到它们，这种情况下要尽量将这些元素与那些较为常用的界面元素放置在相对距离较远的位置上。如图2-4所示，这里的危险操作（删除按钮）与常用的下载按钮之间的距离就过近了。
图2-4 删除按钮与常用的下载按钮之间的
① 角落 对应着费兹公式中的“W”，处于界面角落上的元素可以被看做是具有无限大尺寸的，因为当鼠标指针处于屏幕边缘时，它就会停下移动，无论怎样继续向“外”挪动鼠标，指针的位置都不会改变。用户可以很轻松地点击到处于角落的交互元素，只要将鼠标向角落的方向猛地划过去就行，屏幕边缘会自动将指针限定在角落的位置上。这也正是Windows的开始按钮以及Mac的系统菜单被放置在左下角或左上角的原因之一。如图2-5所示。
图2-5 用户可以很轻松地点击到处于角落
② 顶部和底部 与“角落”类似，由于屏幕边缘的限制，界面顶部和底部也是容易定位和点击的位置，不过确实没有角落更容易，因为这两个位置只在纵向上受到了约束，在横向上依然需要用户手动定位；但怎样都比边缘以内的元素更容易点击。出于这个原因，苹果将菜单放置在了整个屏幕的顶部，也就是最顶端的位置，而不是像Windows那样只将菜单放在了当前活跃窗口自身的顶部。如图2-6所示。
图2-6 苹果将菜单放置在了整个屏幕的顶
让弹出菜单呈现在鼠标指针旁边，可以减少下一步操作所需要的移动距离，进而降低操作时间的消耗。如图2-7所示。
图2-7 弹出菜单与鼠标指针的相对位置
费兹定律可以在不同的平台中以不同的形式发生作用，要打造上乘的产品体验，我们就需要了解这些作用形式。特别是在移动设备上，我们会面临很多在传统桌面设备中不曾遇到的挑战与变数。当然，费兹定律绝不是唯一需要考虑的设计原理，但绝对是非常常用的、几乎会在界面设计过程中时时处处体现出来的一个设计定律。
先来看看下面的一张漫画（见图2-8），是不是觉得在日常的生活工作娱乐中自己患上了选择困难症？也许这并不是你的错，而是对方给予的选项太多。
图2-8 质疑自己患上了选择困难症
Hick’s Law（席克法则）中说道：一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。用数学公式表达为：
RT=a+blog 2 n
式中 RT——反应所需时间：
a——与做决定无关的总时间（比如说前期认知和观察时间、阅读文字、移动鼠标去按钮等）；
b——根据对选项认识的处理时间（从经验衍生出的常数，对人来说约是0.155s）；
n——具有可能性的相似答案总数。
数学公式象限图如图2-9所示。
图2-9 数学公式象限图
转换成我们听得懂的语言就是：当选项增加时，我们做决定的时间就会相应增加。
听起来深奥，但它们其实就藏在我们每一天的生活之中，一点也不难懂。请看下面的三幅图（图2-10～图2-12）。
图2-10 路标越多，驾驶员要根据目的地
图2-11 当选项增加时，使用者从简单选
图2-12 控制按键越多，使用者花在做出
以上这三张图有没有唤起你心中某些痛苦的记忆呢？过多功能和选项的罗列会让人苦恼，这时就可以利用席克定律来改变它。
如果在流程、服务或产品中“时间就是关键”，那么请把与做决定有关的选项减到最少，以减少所需的反应时间，降低犯错的概率；也可以对选项进行同类分组和多层级分布，这样用户使用的效率会更高，时间会更短。
除了前面的范例之外，席克定律另外一个要点，就是适用于必须快速作出反应的紧急状况处理。在设计障碍排除或是紧急意外处理界面时，必须删除一切不是绝对必要的选项。例如飞机的逃生门、火车的紧急停驶装置或是大楼的灭火设备等，在这些有关生命安全的危机处理过程之中，选项并不是使用者的朋友，而是他们必须克服的障碍。如图2-13所示。
图2-13 紧急逃生装置的操作方式必须绝对简洁
但席克法则只适合于“刺激——回应”类型的简单决定，当任务的复杂性增加时，席克法则的适用性就会降低。如果设计包含复杂的互动，请不要依靠“席克定律”做出设计结论，而应该根据实际的具体情况，在目标群体中测试设计。
如果单纯从费兹定律的角度来看，按鼠标右键就可弹跳出来的快捷选单（contextual menu），似乎此固定的选项便利许多。因为不管游标到哪里，只要按下右键，快捷选单就可以出现在那里，这似乎缩短了游标与目标物件之间的距离。但在讨论快捷选单的使用时，还必须注意到另外一个被称为操纵定律（steering law）的概念。操纵定律所研究的，是使用者以鼠标或其他装置来操控游标，在经过一个狭窄通道时所需要的时间。操纵定律的结论显示，通道的宽度对于所需时间有决定性的影响，通道愈窄，使用的困难度就愈高，时间也就会相对延长。
操纵定律的公式为：
T=a+b A/W
式中 T——时间；
a——预设设备的起始时间常数；
b——预设设备移动速度常数；
A——在通道内移动的距离；
W——通道的宽度。
在通道宽度很宽的情况下，操纵定律几乎对所需时间没有任何影响，以快捷选单为例，通常选单的宽度都非常足够，因此如果只需要在其中做上下的移动，并不会有任何可用性的问题。可是一旦使用者须横向移动进入到下一个副选单，这个时候的通道就只剩下该选项的高度而已，因此在操作上就会相对变得困难，这个问题在多层次的级联选单（hierarchical cascading menu）中经常出现，因为使用者必须连续通过好几个狭窄的通道才能点选需要的选项，因此就算移动的距离并不长，使用上仍不一定便利。如图2-14～图2-16所示。
图2-14 在通道很宽的情况下，使用者还
图2-15 在级联选单中横向移动则必须小
图2-16 在多层次的级联选单中操控鼠标
为了克服级联选单的弊病，Windows XP操作系统特别设计了一个短暂的延迟机制，让使用者就算不小心滑出了预设的通道，副选单也不致于立刻消失。这个机制可以说是有效的，但这种延迟却也让操作系统感觉上反应有些迟缓，在此值得特别提出来讨论的，是Mac OS操作系统在级联选单设计上的巧思。
Apple公司在使用性方面的创意举世闻名，与费兹定律相关的实例，就是早期iPod的同心圆的控制键排列方式，它颠覆了传统直线式的排列，让所有选项都与拇指位置接近以方便操作，面对操纵定律的挑战，Apple则与Microsoft采取了不同的策略。Apple的操作系统，并不会一视同仁地进行延迟，而是预设了两个让副选单维持开放的条件：其一是使用者的游标，必须朝着副选单的方向行进；其二是游标的移动速度，必须维持在特定的最低速限之上。如此一来，使用者只要不是朝副选单方向移动，副单就会迅速地关闭；但如果光标正在朝正确方向移动，用户就算抄近路跨出默认通道，也一样可以抵达想点选的选项位置。如图2-17所示。
图2-17 Apple的快捷键只允许使用
这个设定成功的关键，在于速限的设定。设计者必须能成功地估算，一般使用者要朝复选单移动的时候，大约会采取什么样的速度。而Apple公司成功的关键，其实就是这种使用经验细节上的贴心和巧思。
本节所要介绍的下一个定律“泰思勒定律”，又被称为“复杂不灭定律”（the law of conservation of complexity）。赖瑞·泰思勒（Larry Testler）是著名的人机交互设计师，曾任职于Xerox PARC、Apple、Amazon和Yahoo等著名的科技公司。他所提出的这个定律没有任何方程式，也与数学无关，它是对于互动设计精神的一种阐述。
泰思勒定律全文为：“每一个程序都必然有其与生俱来、无法缩简的复杂度。唯一的问题，就是谁来处理它。”意思是：与物质不灭相同，“复杂度”这个东西也不会凭空消失，如果设计者在设计时不花心思去处理它，使用者在使用的过程中便需要花时间去处理。以先前所提的操纵定律为例，如果Apple公司的设计师不花时间让级联选单变得简便，那么Apple计算机的使用者，就必须在操作时多花时间和精力去面对这个问题。
该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计，收件人地址是不能再简化的，而对于发件人却可以通过客户端的集成来转移它的复杂性。图2-18为泰思勒示意图。
图2-18 泰思勒定律示意图
针对这个观念，泰思勒在访谈中曾经进一步阐释：“如果工程师少花了一个礼拜的时间去处理软件复杂的部分，可能会有一百万名使用者，每个人每天都因此而浪费一分钟的时间。你等于是为了简化工程师的工作而去惩罚使用者。到底谁的时间对你的企业比较重要呢？对于大众市场的应用软件而言，除非你已经有了决定性的市场独占位置，否则的话，客户的时间绝对比你的时间珍贵。”这一番话，就是泰思勒当年在Apple公司，刚刚开始推动图像化使用界面设计时所提出的一个理念。图像化界面的设计和程序撰写，增加了工程师的工作负担，却也因此提升了使用者的便利，成功地促成了数字科技的普及化。
我们可以延续泰思勒定律的讨论，进一步讨论复杂度这个概念。事实上泰思勒所提的“决定性市场独占位置”，一样不能完全保障产品或企业的成功，以排版软件QuarkXPress为例，在1998年，QuarkXPress已经叱咤风云将近十年，并且以80%的市占率雄霸纸本出版界，但该公司却因此沉溺在成就之中，忽略了使用者的需求与要求。在Adobe公司于1999年推出InDesign之后，QuarkXPress市场逐渐流失，在2005年前后，InDesign的销售量已经远远超越QuarkXPress。
一般而言，使用者对于复杂的容忍度，与专业需求成正比。非专业的互动产品没有复杂的本钱，因为使用者总是会去选择最为便利的产品。为了专业上的需要，人们愿意花时间去学习使用专业性的互动软硬件产品。就像设计师可以花时间去学习使用QuarkXPress，甚至于多年来忍受它的诸多不便。但使用者对于复杂的容忍度，却和等质的竞争产品成反比。因此InDesign软件的出现，让平面设计师有了一个新的选择，许多人便毅然决然放弃了熟悉的QuarlXPress。所以我们其实可以将这个结论，归纳成为本节所介绍的最后一个定律：“复杂的容受度=专业需求／等质竞争产品数量。”这是值得我们从事互动设计工作时谨记于心的一个教训。
奥卡姆剃刀原理（见图2-19）也被称为“简单有效原理”，由14世纪世纪哲学家、圣方济各会修士奥卡姆的威廉（William of Occam，约1285—1349年）提出。这个原理是告诫人们“不要浪费较多东西去做用较少的东西同样可以做好的事情。”后来以一种更为广泛的形式为人们所知——即“如无必要，勿增实体。”也就是说：如果有两个功能相等的设计，那么我们选择最简单的那个。
图2-19 奥卡姆剃刀原理
一个简洁的网页能让用户快速地找到他们所要找的东西，当在销售商品时这尤为重要。如果网页充斥着各种没用的文章、小工具和无关的商品，浏览者会觉得头晕、烦躁、愤怒……并迅速地关闭浏览器。简单页面的优势有很多：
简单的页面让用户一眼就能找到他们自己感兴趣的内容，让他们看起来更舒服，更能专心于你要表达的内容上。而复杂的页面会让访客一时找不到信息的重点，也分散了访客的注意力。如果我们要用一个页面来展示产品，采用三竖栏的结构就会显得很复杂；若采用两竖栏来展示，宽的竖栏做图片展示和性能介绍，窄的做次要的介绍或图片导航，这样能带给访客更好的阅读效果，顾客更有耐心阅读，设计师所要通过网站表达的内容也就能更好地传递到用户眼前。如图2-20、图2-21所示。
图2-20 美国大型服装销售网站6pm.com
图2-21 Ashford是美国最早的网
精明的广告商们有充足的经验去选择广告的投放，他们看中的是广告的点击率、转化率，而不仅仅是网站的流量。虽然复杂的网站会有很多被展示的机会，但是因为网站复杂而且内容多，顾客点击网站广告的概率就会比较小，广告效果可能还不如那些展示次数较少的简单页面。所以简单的网站可能会更加吸引那些广告商们，一个屏幕只有那么大，网站的东西越简单那么放置广告的地方就越明显，越容易吸引他人注意和点击。如图2-22所示。
图2-22 最右边的“最会玩音乐节的小站
相信很多朋友在寻找网页的时候采取的观点是实用第一，美观第二，何况简约型的网站不一定就不美观。对比百度和搜狐这两个网站，如果大家想使用搜索引擎功能，相信大部分人会选择简单高效的百度搜索，这是为什么呢？在技术上这两个搜索引擎不分伯仲，而最主要的差距就在于网站的页面设计风格。从一个巨大的页面里找到那一点点所要用的搜索引擎框是很痛苦的，相信很多朋友都有类似的感觉。所以简洁的网站页面能给访客带来更好的用户体验。如图2-23所示。
图2-23 百度搜索界面
与那些复杂网站页面相比，简单的页面能够更为快速地打开。现如今，什么都讲求效率、速度，若网站没有及时打开，用户就会失去打开网站的兴趣而选择其他网站了。搜索引擎的结果如此之多，用户首先看到的是最先打开的页面。这样如果将网站页面设计得过于复杂，可能就会失去潜在的访客了。
现在想必大家已经了解到简单页面的重要性了，那么该如何科学地设计一个简单的页面呢？
简洁网页最重要的一个方面是只展示有作用的东西，其他的都不展示。这并不意味着不能提供给用户很多的信息，而可以用“更多信息”的链接来实现这些。
让用户通过很少的点击就能找到他们想要的东西，不要让他们找一个内容找得很累。
如果你的外婆（或其他年老点的人）也能轻松地使用你的页面，你就成功了。
每当网页增加一段，页面中主要的内容就会被挤到一个更小的空间。那些段落并没有起到什么好的作用，而是让顾客们知道更多他们不想了解的东西。
做过多的决定也是一种压力，总体来说，用户希望在浏览网页的时候思考的少一点。我们在展示内容的时候要努力减少用户的思维负担，这样就会使浏览者使用更顺畅，心态更平和。
在这些方面，苹果的官方网站都做得很好。苹果公司用一种很有效和非常有礼貌的方式提供了足够多的信息，所有的文字、链接和图片都很集中，并没有一些使用户分心的广告和其他商品不需要的信息。如图2-24所示。
图2-24 苹果官方网站界面设计
正如爱因斯坦所说：万事万物应该最简单（Make everything as simple as possible， but not simpler）。搞懂了奥卡姆剃刀原理，不仅设计会变得更简单实用，也许还能从中悟出简单生活的哲学。
1956 年乔治·米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5～9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，如应用的选项卡不会超过 5 个。如图2-25所示。
图2-25 神奇数字 7±2 法则
根据格式塔（Gestalt）心理学：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，因此当相互靠近的功能块是不相关的，就说明交互设计可能是有问题的（格式塔心理学相关定律会在后面的章节阐述）。如图2-26所示。
图2-26 接近法则