《点石成金：访客至上的Web和移动可用性设计秘笈（原书第3版）》 —3 广告牌设计101法则

第3章

广告牌设计101法则

为扫描设计，不为阅读设计

如果你/不知道/这是/谁的标志

你开得/还不够远/Burma-Shave

—一种剃须膏的广告牌顺序，1935年左右

如果用户们都是疾驰而过，那么，下面有几个重要方面你要注意，以保证他们尽可能地看到并理解了你的网站：

尽量利用习惯用法

建立有效的视觉层次

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

明显标识可以点击的地方

最小化干扰

为内容创建清楚的格式，以便扫描

习惯用法是你的好帮手

任何东西要让人能瞬间理解，一种最好的方法就是遵循习惯和惯例——那些已经广为采纳或者已经标准化的设计模式，例如：

停止标志。鉴于它至关重要，司机们需要快速看到和识别这个标记，有时候是瞥一眼，有时候是从很远的地方，有时候处在恶劣的天气和光线条件下，那么，让所有的停止标志看起来一模一样是一件好事。（在细节上可能每个国家都不一样，不过总的来说，它们在全世界范围内惊人地一致。）

停止标志的设计标准包括独特的外观（八边形）、表示停止的文字、鲜明的颜色（可以和周围绝大多数天然环境形成高度对比），还有标准化的尺寸、高度和安放位置。

车内的控制装置。试想如果你租了一辆车，试驾的时候发现它的油门不是在刹车踏板右边，或者喇叭没有在方向盘的中间，情况会怎么样？

在过去的20年里，已经进化出了很多网页设计的习惯用法。作为用户，我们现在已经在很大程度上对下面几点充满了期待：

页面上的什么内容在什么位置。例如，用户通常会期望标志性的站点图标（Logo）出现在左上角（至少在那些阅读方向从左到右的国家如此），网站的主导航横跨在页面顶部或者纵向放置在页面左边。

服务将如何运作。例如，几乎所有的购物网站都会提供购物车，也都会使用一系列类似的表单让你填写一些细节，如支付方式、配送地址等。

视觉元素的外观。很多视觉元素都会有标准化的外观，例如表示视频链接的图标、搜索图标、社交网站的分享方式等。

不同的网站也演化出了各种不同的习惯用法——电子商务、大学、博客、餐馆、电影，以及其他很多网站，因为这些相同类别的网站都需要解决相同的问题。

这些习惯用法不是凭空出现的：它们都是从某个人灵光一现的想法开始，如果这个想法相当不错，其他站点就会模仿它，最终，有足够多的人在足够多的地方见到它，让它变得不言而喻。

如果应用良好，Web习惯用法会给用户带来很大方便，因为他们在访问不同的网站时，不需要付出额外的努力来得出背后的运行原理。

不过，习惯用法也有一个问题，那就是：设计师们经常不想利用它们。

与使用习惯用法相比，设计师们会面临极大的诱惑—想要重新发明轮子，很大程度上是因为他们觉得（这样觉得并没有错）网站是请他们来做一些崭新的、与众不同的设计，而不是套用那些固有的东西。（更不用说来自同行们的赞扬，各种奖励和高级职位很少会因为“习惯用法用得最好”而获得。）

有时候，用在重新发明轮子上的时间足以制造一种全新的滚动设备，但有时候这只会让用在重新发明轮子上的时间又增加了。

如果准备创新，那么必须理解你想要取代的设计的价值（参考迪伦说过的，“如果不要法律，你就必须诚实”），而且人们也很容易低估习惯用法的价值。最经典的例子就是自定义滚动条。无论什么时候，设计师打算从头开始自己创建滚动条的时候（通常是为了好看），结果往往如出一辙，他们从来没想过只是为了做出一个标准操作系统的滚动条升级版本，就需要花费成百上千个小时进行微调。

如果不打算使用一种已有的Web习惯用法，你必须确认你在使用一种：1）同样清楚，同样不言而喻，没有学习曲线的方法——这样就跟习惯用法一样好了；2）带来很大的价值，因此值得用户付出一点努力来学习的方法。

我的推荐：在你清楚自己有一个更好的想法时进行创新，如果没有，那么请尽量利用习惯用法。

别误会：我没有任何打击创新的意思，对于原创的、有新意的Web设计，我再欣赏不过了。

这方面我最喜欢的一个例子是Harlem.org。整个网站是以Art Kane那张著名的57位爵士音乐家的合影建成的，这张照片于1957年在纽约哈莱姆区褐沙石台阶上拍摄。它的导航系统不是基于文本链接，也不是菜单，而是这张照片。

这样的设计不但新颖好玩，而且很容易理解和使用。何况创建者们还非常聪明，知道这种新鲜劲儿可能会很快过去，所以他们还提供了一份传统的基于分类的导航系统。

通常来说，你可以（也应该）尽可能地富有创造性，进行创新；尽可能进行美化，让设计富有吸引力。不过别忘了，你要确定它仍然可用。

最后，关于一致性，还有一点要说的。

经常有人说，一致性绝对是好事。很多时候，出现设计争论的时候，人们只要说一句“我们不能那么做，那样会破坏一致性”，他们就赢了。

在网站或应用内部保持良好的一致性往往是件好事，例如，如果导航总是在固定的位置，我们就不用去思考，或者浪费时间寻找。不过有些时候，稍稍打破一致性，可以获得更清楚的效果。

这里有一条要记住的原则：

简洁胜过一致

如果能通过在某种程度上打破一致性而得到高度简洁清楚的效果，那么果断选择简洁。

建立有效的视觉层次

让页面在一瞬间明白易懂的一个好办法是确保页面上所有内容的外观（所有的视觉线索）能准确地表述内容之间的关系：哪些是最重要的，哪些是类似的，哪些是另一些的组成部分，换句话说，每个页面都应该有清楚的视觉层次。

一个视觉层次清楚的页面有三个特点：

越重要的部分越突出。例如，最重要的标题要么字体更大、更粗，颜色更特别，旁边留有更多空白，要么更接近页面的顶部——或者，以上几点的综合。

逻辑上相关的部分也在视觉上相关。例如，可以把相近的内容分成一组，放在同一个标题之下，采用类似的显示样式，或者把它们全部放在一个定义明确的区域之内。

逻辑上包含的部分在视觉上进行嵌套。例如，一个分类的标题（“计算机书籍”）出现在某本具体书籍标题的上面，在视觉上包括书籍区域，因为具体书籍属于这个标题，而且接下来，书籍的标题也要横向覆盖描述这本书的元素。

对于视觉层次，没有什么特别的，例如，在我们开始阅读之前，每张报纸都用突出、分组和嵌套为我们提供关于报纸内容的有用信息。这张图片和这个新闻故事是一起的，因为它们位于同一个标题的覆盖范围之下。这个新闻故事最重要，因为它采用了最大的标题、最宽的栏目，并占用页面上最突出的位置。

我们每天都会对视觉层次进行分解——不管是在网络上还是在报纸上，但是这种分解发生得太快了，因此我们经常只有在不能这么做的时候才能模模糊糊地感觉到它，也就是，当这些可视信息线索（或可视信息线索的缺乏）迫使我们思考的时候。

好的可视层次通过预先处理页面，用一种我们能快速理解的方式对页面的内容进行组织和区分优先级，减少了我们的工作。

但是，如果一个页面没有清楚的视觉层次——例如，如果所有内容看起来都一样重要——我们将降低扫描页面的速度，寻找关键的文字和短语，然后努力拼凑出我们感觉重要的内容和内容的组织方式。这样就增加了很多工作。

分解一个在视觉层次上有问题的页面——例如，一个标题涵盖了不属于它的内容——就像读一个病句一样（“比尔把猫在桌上放了一会儿，因为它有点摇摇晃晃”）。

即使我们通常能猜出这个句子的意思，但它也让我们花了一点时间，迫使我们不得不进行一些不必要的思考。

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

理想情况下，用户应该能在任何良好设计的网页上玩Dick Clark的25000美元金字塔游戏。在网页上四处扫视之后，他们应该能指着页面上的不同区域说出：“这是我在这个网站能进行的活动”“这是到今日头条的链接”“这是这个公司销售的产品”“网站正在向我推销的东西”“到网站其他部分的导航”。

把页面划分成明确定义的区域很重要，因为这可以让用户很快决定关注页面的哪些区域，或者放心地跳过哪些区域。对网页扫描所进行的几项初始眼动研究表明，用户很快就会确定页面哪些部分包含有用信息，然后对其他部分看都不看——就像他们根本不曾来过一样。（其中，广告盲点（Banner Blindness）——用户发展出的一种能力，可以完全忽略那些他们认为包含广告的区域，就是一个非常极端的例子。）

明显标识可以点击的地方

因为人们在网络上所做的大多数事情就是找到下一个地方点击，所以要明确地标识哪些地方可以点击，哪些地方不能点击，这很重要。

扫描页面的时候，我们会寻找各种视觉线索，看哪些地方可以点击（如果是触摸屏，就是哪些地方可以触碰），例如某种形状（按钮、选择卡等）、某些位置（菜单条之类的），以及某些格式（例如文字颜色、下划线等）。

查看事物的外观，去寻找如何使用它们的线索，这个过程并不限于网络。正如Don Norman先生在最近更新的可用性经典书籍《日常事物设计心理学》（The Design of Everyday Things）中开心地跟我们解释的那样，我们其实一直在解析我们的环境（例如，门把手）来寻找这些线索（决定到底是拉还是推），去看看吧。看了这本书以后，你再也不会用以前的方式来看待门把手了。

从一开始，容易识别网页上哪些地方可以点击就时不时地作为问题浮出水面。

当然，现在它又回来了，变成了移动设计上的一个问题，我们会在第10章进一步讨论。

总体来说，如果能坚持只用一种字体颜色来表示文字链接，或者通过它们的外观和位置能识别它们是可以点击的，那就没事了。不要犯那些低级错误就可以了，例如使用同一种颜色表示文字链接和不可点击的标题。

降低视觉噪声

让页面不易理解的一个最大原因是视觉噪声。

用户对复杂度和干扰的容忍度不一样，一些人不在乎眼花缭乱的页面和背景噪声，但很多人在乎。甚至有人发现用户会用即时贴贴在他们的屏幕上，就是为了在阅读时避免动画干扰他们的注意力。

实际上有三类视觉噪声：

眼花缭乱。如果页面上所有的内容都在希望得到你的注意，那么效果可能适得其反：大量促销信息！一大堆惊叹号，大量不同的字体和抢眼的颜色！自动播放的幻灯片，动画，弹出窗口，更不用说还有各种层出不穷的吸引用户注意的广告新花招！

这样做的事实就是，没有什么东西会显得重要。页面眼花缭乱往往是没法决策什么内容真正重要的结果，因为那样就没法创建合适的视觉层次结构，把用户首先吸引到最重要的地方。

组织不当。有些页面看起来就像被打劫过的房间一样：东西扔得乱七八糟。这是一个很明显的信号，表示设计师并没有理解使用表格来排列页面元素的重要性。

太过密集。我们见过一些页面，特别是主页，它们的问题就是内容太多了。这种感觉就像你偶尔给某个网站发了一封邮件，它就把你当成可以托付终身的朋友，给你的邮箱发来不计其数的邮件，让你的邮箱完全淹没在各类通知提醒中，然后，你就再也找不到真正重要的邮件了。最后，你得到了工程师们所谓的低信噪比状态：噪声很多，信息没多少，还被噪声掩盖了。

当你在设计页面的时候，这样做可能是一个好办法：先假定所有内容都是视觉噪声（也就是“有罪推定”的方法），并去除任何对页面没有帮助的内容。我们的时间和注意力都很有限，把无谓的部分通通去掉。

为文本设置格式，以便扫描

很多时间，或者说绝大部分时间，用户都在你的网页上扫描文本，想要找到一些东西。

而你的文本格式可以帮助他们，让他们扫描起来更容易。

下面是一些最重要的方法，可以让你的页面方便扫描：

充分使用标题。对于页面来说，穿插在文本中的那些仔细构思、精心制作的标题就如同非正式的大纲和内容列表一样。它们会告诉你每个部分的大意，或者，如果不是字面上的意思，它们会激起你的兴趣。不管怎样，它们可以帮你决定哪些地方需要阅读、扫描，或者直接跳过去。

一般来说，你总是需要更多的标题，所以多花点时间来构思吧。

还有，别忘了给标题设置正确的格式。下面是设置标题格式时非常重要但常常忽视的两点：

如果你使用的是多级标题，那么请确认在不同级别的标题之间有着非常明显、不可能混淆的视觉区分。可以通过让每个更高级别的标题字体更大或者给它周围留更多的空白来做到这一点。

更重要的是，不要让你的标题“浮在空中”。确保它们更靠近由它们引导的内容，而不是之前的内容。这两种方式在位置上可能只差了一点点，效果却大不一样。

保持段落简短。如果段落篇幅很长，那么它们就会像Caroline Jarrett和Ginny Redish所说的那样，像一堵墙一样挡在读者面前，让读者们失去（继续阅读和扫描的）勇气。遇到长段落，读者很难记住他们已经读到的位置，而且，比起一系列短小精悍的段落来说，它们更难扫描。

可能有人告诉过你，每个段落都要包含一个中心句，一些细节句，还有一个结论句，但是网页上的段落有所不同。哪怕一段话里只有一个句子也没关系。

如果仔细查看那些长长的段落，你总是能找到一个合理的地方把它们分成两半。养成这种习惯。

使用符号列表。这样来看：几乎任何可以变成符号列表的内容也许都应该变成符号列表。看一眼你的段落，如果有任何由逗号或分号分隔的几个项目，那就是可能的符号列表。

此外，为了优化可读性，在列表的不同项目之间应该留出一点点额外的空白。

突出关键词语。大部分的页面扫描动作是在寻找关键字和关键短语。所以，可以把最重要的关键词语在文本中第一次出现的地方进行加粗，让它们容易找到（如果它们已经是可以点击的文本链接，那么显然不需要再加粗了）。不过，不要突出显示太多的关键词语，因为那样它们又被自己淹没了。

如果你确实想要学习怎样让内容更好扫描（或者说想学习关于为屏幕显示而写作的相关知识），那么，请立刻跑步前进，不要慢慢悠悠踱步，去找一台能上网的设备，订购一本Ginny Redish的书《消除文字》（Letting Go of the Words）。

如果你喜欢它，那么再订一份送给任何你知道的作家、编辑，以及与创建数字内容有关的人。他们会在内心深深地感激你。

机器视觉 web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。