交互设计案例:突出重点一目了然，简单而不简陋

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

测试您的页面

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

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

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

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

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

为扫描而设计，不是阅读

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

给出了几种方法：

尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必须的。

在页面把越重要的东西越突出，建立清楚的视觉层次。

可以点击的地方必须突出，让人明显知道可以点击。

把页面划分成明确定义的区域

省略多余的文字

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

两次改版后：

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