UI设计师非学不可的十大易用性原则

　　编者按：为什么说「非学不可」呢?@Akane_Lee ：这篇文虽然说是「十大易用性原则」，也可以说得上是：「教工程师如何捅 UI 」，看完整篇文章，简直是刀刀必中…UI设计师们赶紧学起来，记得不要给身边的工程师同学看到呦。

　　@Akane_Lee ：身为 RD 的你受过太多 UI 的气吗?老是发现逻辑不通需要打掉重练被延误时程吗?常被 UI 嫌念理工的没有美感都不懂吗?报仇的时间到了。这篇文虽然说是「十大易用性原则」，也可以说得上是：「教你如何捅 UI 」。RD 最擅长讲理，就来跟 UI 讲理!从易用性下手找 UI 麻烦，没有几位 UI 不中刀的…

　　易用性(Usability)指的是使用者能够使用某样工具来达到某个特定目标的容易程度，常见的中文翻译有优使性、使用性、易用度、易用性、好用性、可用性等等，其中较常见的为优使性和可用性。优使性感觉上像是优越的使用、还是优化过的使用，在词汇上模棱两可有模糊地带;可用性的说法则像是仅分成可以用和不能用两种状况。Usability 翻译成易用性，清楚指出「容易使用」的特点较为贴切。易用性毕竟是个较抽象的名词，因此 Jakob Nielsen 提出十大易用性原则，详细说明所谓「易用」需要符合易于学习、快速使用、相对无错这三个部分。

　　一、系统状态的能见度( Visibility of system status)

　　软件应该保持相同的模式，透过适当的反应，在合理的时间内通知使用者，让使用者了解正在发生的事情。

　　最常见的就是按钮状态。在计算机上浏览网页时常常会发现某些地方在光标移过去时颜色会有所改变，提示你这里可以被点击。在 iPhone 上没有光标，所以会以更浅显易懂的方式告诉你这里可以被操作，像是更立体的按钮、或是仿真实体开关的图象。(App：Money Book，选中的项目底色变成鲜艳的蓝色。)

　　用户点击按钮，会出现按钮被按下去的凹陷感，提示你已经点击到了。(App：Reach，拟真的开关设计与下方明显凹陷可点击的 TabBar。)

　　另一种常见的系统状态响应就是需要用户等一下，现在正「读取中」、「下载中」。在等待时如果没有任何提示，就会产生「自从点了这个按钮后画面就不动了，我的操作到底有没有被执行呢?不晓得要等多久…」的感受。

　　进度条就是为了降低使用者的不耐感、告诉用户现在处理进度如何、大约还需要多少时间而存在。透过进度条，用户可以知道他的操作正在执行中，现在完成多少部份，再等多久就可以结束。(App：Evernote，同步时右上角的 icon 会转动，在所有记事标题下方有目前进度百分比。)

　　二、系统与真实世界的关联性(Match between system and the real world)

　　系统应该要运用用户的语言，使用他们熟悉的词句、短语、概念，而不是专业术语。

　　因应该族群的习惯进行开发，像 iOS 用户会觉得左上角的按钮通常是「回前页」一样，若你将「回前页」放到右上角，会增加他们操作错误的机会。 试着将 Android 手机给 iOS 惯用者操作，会发现他们不晓得怎么样回到上一页，也不知道回到主画面的 Home 键在哪里，对于实体按键的功能一无所知。

　　举个我家发生的真实的例子：女儿教父亲怎么操作家庭计算机，当她说「请把鼠标移到开始」时，父亲拿起手上的鼠标左右翻看了一下，便将整只鼠标对准屏幕上的「开始」敲下去，屏幕被鼠标撞击发出抠抠抠的声音……女儿问父亲，为什么会把鼠标拿起来敲屏幕，明明只要在桌上移动鼠标就可以操作，父亲说：「妳叫我把鼠标移到开始的啊!」

　　女儿的认知里，拿鼠标敲屏幕无法完成任何操作，鼠标只是为了控制光标而存在，所以将鼠标移到开始同等于「操作鼠标以控制屏幕上的光标、并将光标移到开始」。但对父亲而言，因为不熟悉计算机操作，他尚未建立鼠标等于光标的概念，光标是光标、鼠标是鼠标，所以会发生拿鼠标敲屏幕的爆笑情况。

　　你觉得大家都应该要知道的事情，其实不一定都会晓得。虽说这种说词对「父亲」很失礼，但请把所有使用者都当成是「父亲」那类型的人物。什么样的用语才能让第一次接触 App 的人没有误会的快速上手呢?(App：Weightbot，用于记录每日体重，仿真现实生活中的体重计刻度。)

　　三、使用者的操控自由(User control and freedom)

　　用户时常以「尝试错误」来选择系统功能，他们需要一个明显的「离开」来结束使用者不需要的状态。并且支持复原步骤与重复步骤。

　　易于犯错且修正错误代价高昂的高风险情形将导致使用者不愿意多研究这个软件。良好的设计能让使用者降低出错率，在提供取消和重做的功能前先减少用户出错的机会。

　　Ctrl+z(复原)是最容易被记住的快捷键，也因为有复原的存在，使用者才会大胆去尝试各种不熟悉的操作。他们心想：「反正做错了重来一遍就好了嘛!」如果一出错就表示要从新开始，使用者会感到迷惘并且觉得压力太大。(想看看 Diablo 的专家级模式，人物死亡不能重来。在这种模式下哪个玩家不是备感压力战战兢兢小心翼翼的?)

　　用户操作 App 是为了完成他预期的目标，根据八二法则，你的使用者有 80% 都是使用最初阶的操作，只有 20% 人会想要更专业进阶的功能。越轻松简单无压力越受大部份使用者青睐，不过是想透过 App 完成某项目的，用不着压力这么大的挑战自我极限吧?(App：Awesome Note 的设定页面，许多进阶功能都放在这里。)

　　初学者和RD很容易在这个原则犯下错误，不是所有的功能全部摊到第一层就代表丰富好用。

　　所有的功能都很重要就代表没有一个功能是重要的。就像期末考前把课本每个字句都划上荧光笔强调，根本没有重点，有划跟没划一样。凡事都有轻重缓急，就像一位血流不止、骨折又长期咳嗽的病人在眼前，是要先止血、先处理骨折、还是先治疗咳嗽一样。最重要的事情需标明出来，可以暂缓不急的事之后再说。

　　功能的优先级也是如此，最重要、最常用的功能放在最显眼易触碰的位置，较次级非必备的功能就摆到下一层或是干脆挪到某个进阶选单里去吧。(App：Gmail 的侧边栏，这种选单无论主要还是次要的功能，都能排序整理得很漂亮。)

　　四、一致性和标准(Consistency and standards)

　　使用者不应该猜测不同的字汇、状态、动作是不是代表同一件事。

　　考虑到浏览器的兼容性。App 必须采取用户的语言、并运用他们熟悉的单词、短语和概念，而不是程序语言或专有名词。接口中的控制组件、命令、设定的功能应该清晰明确。操作软件不应该需要透过排除法进行演绎推理。也不要让使用者所执行的操作和他们的目标没有明显的关连。(App：PRiority List，下方各个 icon 的含意要稍微想一下才能理解，且实际操作和预期的有落差。)

　　依现实生活常见的习惯，让讯息在自然且有逻辑顺序的情况下产生。为了达到这个目标，有时需开发一个词典。这个词典最好由团队的技术编写者来管理和实施、监视文件档案和软件中出现的术语一致性。支持目标工作领域中的问题该如何解决，它应该最大限度地减少或消除用户花费时间解决软件技术层面中的问题需求。

　　属性、参数、设定、设置、资源。或者是寻找、搜寻、搜索、搜查、寻求…等等，这些词指的都是同一个功能，对用户来说他不会知道 App 上写的「设定」和「属性」其实是同一件事。如果将所有的字词统一有困难，可以干脆直接使用图示代表。(App：My Wonderful Goals，简单易懂的 icon 设计，画面干净清爽。)

　　五、预防错误(Error prevention)

　　比起提供用户明确易懂的错误讯息，更重要的是如何防止使用者发生错误。

　　像是消除容易出错的条件或是自动检查确认选项。或是让使用者确认他们接下来要做的行动。越是让使用者自行输入的字段越容易出现错误，明明只能输入数字的地方就是有人会想打英文字母。摆明说了账号只能使用英文或数字，还是会有人用上特殊符号。比起使用者填完所有字段按了送出后再告诉他哪些地方有误，不如在输入错误时就挡住他、在输入正确数据前无法进入下个步骤。如果能在字段旁边实时反应验证状态是再好不过的。

　　在 iPhone 上最方便的就是内建数种键盘。在输入电话号码的字段时只跳出数字键盘、输入日期时使用 Picker。(App：联络信息，输入只有数字的字段时，就跳出数字键盘。)

　　在小小的手机屏幕上打字是非常辛苦的一件事，按钮小不好按、又容易出错，最好也最贴心的作法是连输入都简化了，最好点点手指就解决。像是 Google 的实时搜寻，打入第一个字时就将热门选项列出来供用户选择，但有可能不是使用者需要的。或像是 Facebook，输入一个关键词就将所有包含这个关键词的朋友列出。(App：App Store，在使用者边输入时实时搜寻有可能的关键词。)

　　六、辨识而非记忆(Recognition rather than recall)

　　尽量减少用户需要记忆的事情、行动以及可见的选项。

　　使用者没办法记住太多步骤。App 如果有使用说明介绍，应该放在显眼且可轻易使用的位置。如果软件把数据当作讯息，把数据都丢给用户，要用户自己查看数据代表他们的注意力会被分散，产生错误的机会就会增加。软件应该将用户的注意力集中到重要的数据上，并帮助用户从中取得讯息，而不是未经过筛选要使用者花时间思考。

　　像是为了酷炫而特别设计的操作接口，与众不同让人眼睛一亮，但使用者在初次接触后再度使用，要花多少时间才能找到上次操作过的功能?相信很多人都有边自言自语「我记得这个 App 有 xxx 功能啊，在哪里呢…」边将某个 App 所有按钮选单翻一遍的经验。(App：Yoritsuki，非常漂亮精致的 App，下方选单与上方提示一目了然。)

　　七、弹性与使用效率(Flexibility and efficiency of use)

　　功能与易用性之间通常存在一个平衡，对于软件中的每个特性、功能、或能力，都必须提供一种途径让使用者调用或控制。如果用户的目标是可预测而且常用的，使用者不应该为了实现这个目标而必须做很多工作。

　　做少量的工作、得到很多结果，才是使用者想要的。简单来说就是要思考「有多少用户」和「使用频率如何」的问题。越频繁使用的功能，需要点击的次数应该要越少。越多用户使用某功能，它就应该越明显。且要为核心情况设计，不要为「边缘」情况付出太多。

　　快捷键就是这个易用性准则的最佳代表，在 App 上没有快捷键的设计，可以透过手势来完成各式各样的操作。例如浏览列表页，已卷到最下方后想回到顶端不需要一直滑动手指、只需轻点一下 StatusBar，列表会自动卷回最顶端。(App：Day One，对撰写日记来说，拍照和新增是最常用的功能。)

　　八、美观与简化设计(Aesthetic and minimalist design)

　　为了防止用户出错，可以在软件设计上就尽量减少用户的记忆负担。将功能、操作及选项设计得显而易见。对于不相关或是很少需要的讯息或功能要隐藏起来，仅突出重点在软件设计上非常重要。

　　像是注册新会员，如果一开始就要使用者填写一长串的个人资料，相信许多人在这个阶段就打退堂鼓。简化注册流程就可以增加用户成为会员的意愿，最好只要一个按钮就能完成注册。有的 App 会串接 Facebook，使用者只要同意授权就完成注册手续。或者是只让用户填写必备的数据如账号密码等，其他非必备资料如生日、所在城市等，使用者可以在登入后去个人设定页自行填写。 (App：Pose，使用 Facebook 登入，或是输入账号密码。)

　　九、帮助使用者认识、侦错并从错误中恢复(Help users recognize, diagnose, and recover from errors)

　　帮助使用者识别、诊断、并从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非难以理解的代码。最好能在告知使用者发生错误的同时一并提供解决方法。

　　使用者不会想知道「404」代表什么意思，直接说明「找不到网页」比简短的错误代号更能理解。比起找不到网页的文字，如果能说明找不到网页的原因、并加上如何解决更能帮助使用者排除错误。就以网络断线这个例子来说，iOS 可以侦测用户目前对于网络的设定，是因为没有开启网络功能、还是网络联机质量不佳所以无法开启网页。前者可以请使用者去设定将 Wifi 或 3G 功能开启，后者能告知使用者换个联机环境或是稍后再试。(App：书报摊，删除数据时会提示将删除所有数据。)

　　十、帮助与说明文件(Help and documentation)

　　一个软件在完美的情形下不需要任何说明文件使用者就能够操作，但就算是最好的软件也需要提供帮助与说明文件。

　　当用户寻求帮助时，此类讯息应该容易被搜索查询。完美的接口即使没有任何说明提示下，使用者仍然能够流畅操作。为了预防还是有少数使用者搞不清楚状况，常见的作法除了设制说明页之外，初次开启 App 直接进入说明教学，强迫使用者阅读完毕后才可开始操作。(App：i Track My Time，永远出现在首页的操作方式说明。)

　　以上文章是我根据 Jakob Nielsen 的十大易用性原则翻译(不怎么精准)加上个人经验所写(其实写完很久了，截图有点旧。)，有兴趣的人建议去看原文。

　　这10条讲起来很简单，真要实行却非常困难。iOS 和 Android 平台特性不同，若很坚持要根据这10条原则将接口设计到好，Guideline 应该要熟到掰碎吃到肚子里的程度吧。像是第一条的「反应」，iOS 能透过 RD 设定按钮按下去时颜色会变得较黑，所以按钮切图出 1 张未点击时就好。Android 没有内建这种功能只好乖乖出 2 张图，诸如此类。偏偏 RD 对 Guideline 通常都比 UI 熟，科科。(理工生很习惯是字的厚砖书，念设计的有大半不喜欢看没几张图又生硬难啃的文章。)这 10 条原则都是 UI 在规划接口时应该考虑进去的部份，不只 UI 需要劳记，RD 多多少少心里有个底，如果看 UI 不顺眼，在讨论会议上慢条斯理把接口各个组件拆分出来一项项比对原则，捅死 UI 效果奇佳…