交互设计实用指南系列(5) – 突出重点，一目了然

链接：http://ued.taobao.org/blog/2010/01/the-practice-guidelines-of-interaction-design-emphasis-and-clarity/

看到这张照片，我们一眼能够看到天宏(图中这位UED俊男)的眼睛。我们能从他的表情里读出一些他的性格。一张好的摄影作品，最重要的一点，就是这个照片是否有焦点，照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法，其实就是在让一个照片能够有其焦点，并且利用这些艺术手法来烘托气氛，提升主题。 一个优秀的页面亦如此：应当突出重点，一目了然。相信大家也知道，一个用户在浏览网页的过程中，只是扫描页面，而不会像是在看书似的阅读每一处地方，每一行文字。一个网页呈现在用户面前的时候，应该在5秒之内，就能理解：这个页面是干什么的？我大致能通过这个页面做些什么？接下来我该去哪里？ 我们网站上的每个页面都可以是任务流上的一个点。这个点上包含着用户需要的信息，也许是继续找到任务流的下一个点的信息(例如导航)，也许是用户想找到的最终内容。而一个页面上存在着上百甚至上千个链接（淘宝的宝贝详情页面通常有700多个链接），要在这样茫茫大海中找到用户需要的链接，可见，“突出重点，一目了然”是多么重要。

测试您的页面

测试您的页面是否达到“突出重点，一目了然”，能够让用户在短时间内找到他们所需要的信息，其实可以是个低成本的小型测试。fivesecondtest.com 这个有趣网站是一个专门做5秒测试的站点。测试者上传一张站点的截图，然后被试观看截图5秒，然后说出刚才看到了哪些东西。另外一种方式是被试看到截图，在5秒的时间中，点击他所关注到的所有焦点，最后给出每个焦点他认为的描述。

下图是本文开篇的时候，8个用户的测试结果：

这种测试比起眼动议来说，测试的成本要低得多，而且能够明确得测试出你的页面的浏览者是否能在第一时间发现他们所需要的内容，并且可以比较出，这是否符合你的设计的初衷。

达到“突出重点，一目了然”

那么，如何达到这样的“突出重点，一目了然”呢？据鄙人不完全归纳，可以有以下方法：

为扫描而设计，不是阅读

你几乎需要把每个用户都想象成大忙人——他们没有时间停留在你精心设计的页面上，去阅读每一行你辛苦撰写的问题，去欣赏你精心设计的高光与圆角——他们想要的只是尽快地找到有用的信息。如果找不到，互联网上也许有很多替代品，可能是你的竞争对手，用户可以轻而易举地到其他网站上去寻找他们需要的信息。《点石成金》这本书也比较详尽地描述了这个要点。相信大家都应该阅读过了。《点石成金》里谈到关于“为扫描而设计，不是阅读”时，

给出了几种方法：

1. 尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必须的。
2. 在页面把越重要的东西越突出，建立清楚的视觉层次。
3. 可以点击的地方必须突出，让人明显知道可以点击。
4. 把页面划分成明确定义的区域
5. 省略多余的文字

Yahoo Small Bussiness的页面改版很具有代表性。 改版前：

两次改版后：

我们可以发现，改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮“Sign Up”，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的，使用列点和大图的方式传递了相同的信息。“Sign Up”显而易见，而且视觉上有突起的渐变效果也马上让人知道，那是个按钮。

将功能“藏起来”

部分产品经理有一个这样的通病，他们每每作出一个新功能，就爱向用户炫耀新的工作成果。看起来，这样挺好，一来让用户知道本网站还没死，而且还在为他们不断得制作新的功能，二来辛苦开发了数天甚至数月的功能要是没人用，那该多“杯具”啊！于是乎，你就会发现，长期“坚持”下来，界面上的元素越来越多。 假设某一天，这样的产品经理全部被谷歌挖走，那么谷歌的首页将会是一个放满“杯具”的餐桌：

还有一个例子来自于某BSP，它的博客顶端存在着一个工具栏，有30个左右的链接。而这个工具栏在4年前他的用户高速增长期其实并不存在。

如果你了解20-80原则，你应该知道：80%的用户只会使用20%的功能。所以，为什么要让那些少人使用的80%的功能总是放在显眼的位置，扰乱那些只需要20%的功能的大部分用户呢？(此句有些拗口，我承认，麻烦看官们可能要反复阅读几次。。)其实那些80%的功能大部分是专家用户所喜欢的，我们应当将这些功能“藏起来”，目的就是不影响新手和中间用户，并等着他们去发现，然后大叫：“哦，居然这个网站有这个功能，太棒了！”我们来看看Google Reader iPhone/Android 版本最近的小改版：

改版前：

改版后：

大家可以发现，原来占据垂直空间的New items/all items的切换、mark all as read等功能，全部藏匿在右上角的下拉按钮中。Refresh被替换成了一个可以容易理解的Refresh图标，顶端其他产品的链接也祛除了下划线。 关于将功能“藏起来”、功能肥胖症是个说不完的话题，《哈佛商业评论》早在06年的时候也详细探讨过这样的问题，这部分内容，我过段时间也整理整理，为大家奉上吧，本文中，就不作深入探讨。

关注于用户的主要任务流

关注于用户想要的，而不要强迫用户查看、理解与操作无关的事情，是关于“突出重点、一目了然”的UCD方法论的延伸。这个想法，解决了什么元素该被“突出重点”从而达到界面“一目了然”的问题。从用户角色到场景，到任务流，可以决定每个界面——也就是任务流上的节点最重要的元素是什么。加之融合商业目标，即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子： 这是个书籍的搜索结果页面。

我们能够发现，这个页面觉得凌乱不堪。各种大小，各种颜色，各种粗细的字体混杂在一起，眼花缭乱。就像《气球》这首歌唱的：

黑的白的红的黄的
紫的绿的蓝的灰的
你的我的他的她的
大的小的圆的扁的
好的坏的美的丑的
新的旧的各种款式各种花色任你选择

说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD（或者是其他方式）分析出，这个书籍的结果页，用户需要这些信息：

1. 书籍内容。这本书标题是什么，是关于什么的？
2. 书籍评价。这本书好吗？别人对它的评价如何，这些评论可信么？

根据这个目标，重新设计后的结果如下：

我们可以看到，这本书内容和评价都一目了然，信息结构利于扫描和比较。重要的信息大而具有色彩，次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结

本文描述了什么是“突出重点，一目了然”。如何测试页面是否“突出重点，一目了然”，以及如何达到“突出重点，一目了然”。 有句话我挺喜欢，作为结局吧。在《What’s Next in Web Design?》中说道的：

“Simplicity is when someone takes care of the details.”

“简单而不简陋！”(谢谢青云给出的翻译！)

我们所追求的界面或者功能做得简单，不是粗制滥造，而是需要把下在创造更多无用的功能的功夫转变到现有功能的细节上。做出来东西容易，但是把东西做好做精难啊！