“我之所以能看到它,是因为我正在有意找它。”——福尔摩斯

插图:一双眼睛注视一个放大镜,其下又是一个放大镜,如此反复多次。表示认真寻找注视。

插图:一双眼睛注视一个放大镜,其下又是一个放大镜,如此反复多次。表示认真寻找注视。

如果我不告诉你,你能知道自己忽略了多少信息吗?答案:几乎全部!您的注意力只有一点点,只能集中一小会儿,就这一点点的注意力,您只能集中在移动的、 彩色的、大片的东西上——举个例子,上班的路上,您也许只注意到广告了。但是当你需要时,所有之前被忽略的信息都到了眼前:你手机没电时,发现沙发边上有电源插座;选酒时,酒瓶上标有酒精度和年份;搬行李上地铁时,过去视而不见的直升电梯像戏法一样变在眼前了。

讲这里的道理,最好的例子出自柯南道尔的小说。在《银色马》一幕中经典的台词:

“我在周围一百码之内都仔细检查过了。不能想象,我怎么会把它忽略了。” 警长神情懊恼地说道。

“它埋在泥土里,是不容易发现的,我之所以能看到它,是因为我正在有意找它。”福尔摩斯说道。

交互的学问适于生活,也适于网站。我们网站上的信息,有些是想给用户看的,有些则是供用户寻找的。我们要使前一类信息易于看到,后一类信息易于找到。

nyt_slideshow

网页快照,2011年1月30日的纽约时报,正中是一张新闻照片,下方有灰色的新闻图片说明文字。

我们先用好的设计做例子。在我解说之前,先看看图,回答问题:为什么照片下的文字要用灰色,不如正文明显?

考虑访客看到这张网页,注意力应该在大标题和照片上,因为它大、彩色。这时候访客对照片说明有兴趣。

访客看完照片,有印象,有困惑,不免要想知道详情。这时候,他开始寻找信息。他由“浏览”,转换为“扫描”。信息就在照片下面,很好找,不需要再强调了。用灰色使它变得不明显,这样照片更容易获得最初的注意力。

照片描述文字这样处理,显示网站编辑团队独具匠心,知道访客与内容的交互顺序,先看哪里、后看哪里;也知道网站的交互需求:先是浏览,后是扫描。

迷底揭开了似乎很简单。可我们国内的网站上只见强调,从来不见弱化1 ,很遗憾。

第二个例子中的网站是锐业软服的网站。

网址是www.realss.com,内容是锐业软服北京信息技术有限公司主页。主页上方有语言选择区域,其文字和背景颜色都和浏览器本身一样,使人很难区分这是浏览器提供的语言选择功能,还是网站提供的。

这张网页有什么特别吗?请仔细观察一下,网页上方选择语言的区域,好像位于浏览器上,其实不是浏览器的一部分,而是网页的一部分。¹

如果访客习惯阅读英文,看到这张网页,会忽略掉“语言选择”²,认为网页是从其下开头的。“语言选择”不会干扰他,他甚至可能不知道“语言选择”就在那里。如果访客习惯阅读中文,他会在页面上方寻找语言选择功能,当然会找到。这项创新其实来自Drupal,不是我发明的。

这种创新效果如何?它还太年轻,还没有经历足够考验。不过,江河日进,守成一样会失败,宁可创新而失败,还更有意义一些。


  1. 显然,要这个功能正常工作,需要事先知道浏览器的默认背景颜色。这里用的灰色是最常见的背景颜色。数十年前,浏览器诞生不久时,页面默认背景颜色就是浏览器的默认背景颜色,这样,制做这种特殊效果,只需要对“语言选择”不指定其背景颜色即可。坏风气使自IE,它的浏览器默认背景色和页面默认背景色不一样,为了兼容它,网页作者这里就需要猜测浏览器默认背景色。
  2. 精通技术的人会指出使用内容协商。本站已经使用内容协商了,上述是精进的措施。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s