更新时间:2021-09-12 19:54:31
广告牌设计101法则
为扫描设计,不为阅读设计
如果你/不知道/这是/谁的标志
你开得/还不够远/Burma-Shave
—一种剃须膏的广告牌顺序,1935年左右
如果用户们都是疾驰而过,那么,下面有几个重要方面你要注意,以保证他们尽可能地看到并理解了你的网站:
任何东西要让人能瞬间理解,一种***的方法就是遵循习惯和惯例——那些已经广为采纳或者已经标准化的设计模式,例如:
在过去的20年里,已经进化出了很多网页设计的习惯用法。作为用户,我们现在已经在很大程度上对下面几点充满了期待:
不同的网站也演化出了各种不同的习惯用法——电子商务、大学、博客、餐馆、电影,以及其他很多网站,因为这些相同类别的网站都需要解决相同的问题。
这些习惯用法不是凭空出现的:它们都是从某个人灵光一现的想法开始,如果这个想法相当不错,其他站点就会模仿它,最终,有足够多的人在足够多的地方见到它,让它变得不言而喻。
如果应用良好,Web习惯用法会给用户带来很大方便,因为他们在访问不同的网站时,不需要付出额外的努力来得出背后的运行原理。
不过,习惯用法也有一个问题,那就是:设计师们经常不想利用它们。
与使用习惯用法相比,设计师们会面临极大的诱惑—想要重新发明***,很大程度上是因为他们觉得(这样觉得并没有错)网站是请他们来做一些崭新的、与众不同的设计,而不是套用那些固有的东西。(更不用说来自同行们的赞扬,各种奖励和高级职位很少会因为“习惯用法用得***”而获得。)
有时候,用在重新发明***上的时间足以制造一种全新的滚动设备,但有时候这只会让用在重新发明***上的时间又增加了。
如果准备创新,那么必须理解你想要取代的设计的价值(参考迪伦说过的,“如果不要法律,你就必须诚实”),而且人们也很容易低估习惯用法的价值。最经典的例子就是自定义滚动条。无论什么时候,设计师打算从头开始自己创建滚动条的时候(通常是为了好看),结果往往如出一辙,他们从来没想过只是为了做出一个标准操作系统的滚动条升级版本,就需要花费成百上千个小时进行微调。
如果不打算使用一种已有的Web习惯用法,你必须确认你在使用一种:1)同样清楚,同样不言而喻,没有学习曲线的方法——这样就跟习惯用法一样好了;2)带来很大的价值,因此值得用户付出一点努力来学习的方法。
我的推荐:在你清楚自己有一个更好的想法时进行创新,如果没有,那么请尽量利用习惯用法。
别误会:我没有任何打击创新的意思,对于原创的、有新意的Web设计,我再欣赏不过了。
这方面我最喜欢的一个例子是Harlem.org。整个网站是以Art Kane那张著名的57位爵士音乐家的合影建成的,这张照片于1957年在纽约哈莱姆区褐沙石台阶上拍摄。它的导航系统不是基于文本链接,也不是菜单,而是这张照片。
这样的设计不但新颖好玩,而且很容易理解和使用。何况创建者们还非常聪明,知道这种新鲜劲儿可能会很快过去,所以他们还提供了一份传统的基于分类的导航系统。
通常来说,你可以(也应该)尽可能地富有创造性,进行创新;尽可能进行美化,让设计富有吸引力。不过别忘了,你要确定它仍然可用。
最后,关于一致性,还有一点要说的。
经常有人说,一致性绝对是好事。很多时候,出现设计争论的时候,人们只要说一句“我们不能那么做,那样会破坏一致性”,他们就赢了。
在网站或应用内部保持良好的一致性往往是件好事,例如,如果导航总是在固定的位置,我们就不用去思考,或者浪费时间寻找。不过有些时候,稍稍打破一致性,可以获得更清楚的效果。
这里有一条要记住的原则:
简洁胜过一致
如果能通过在某种程度上打破一致性而得到高度简洁清楚的效果,那么果断选择简洁。
让页面在一瞬间明白易懂的一个好办法是确保页面上所有内容的外观(所有的视觉线索)能准确地表述内容之间的关系:哪些是最重要的,哪些是类似的,哪些是另一些的组成部分,换句话说,每个页面都应该有清楚的视觉层次。
一个视觉层次清楚的页面有三个特点:
对于视觉层次,没有什么特别的,例如,在我们开始阅读之前,每张报纸都用突出、分组和嵌套为我们提供关于报纸内容的有用信息。这张图片和这个新闻故事是一起的,因为它们位于同一个标题的覆盖范围之下。这个新闻故事最重要,因为它采用了最大的标题、最宽的栏目,并占用页面上最突出的位置。
我们每天都会对视觉层次进行分解——不管是在网络上还是在报纸上,但是这种分解发生得太快了,因此我们经常只有在不能这么做的时候才能模模糊糊地感觉到它,也就是,当这些可视信息线索(或可视信息线索的缺乏)迫使我们思考的时候。
好的可视层次通过预先处理页面,用一种我们能快速理解的方式对页面的内容进行组织和区分优先级,减少了我们的工作。
但是,如果一个页面没有清楚的视觉层次——例如,如果所有内容看起来都一样重要——我们将降低扫描页面的速度,寻找关键的文字和短语,然后努力拼凑出我们感觉重要的内容和内容的组织方式。这样就增加了很多工作。
分解一个在视觉层次上有问题的页面——例如,一个标题涵盖了不属于它的内容——就像读一个病句一样(“比尔把猫在桌上放了一会儿,因为它有点摇摇晃晃”)。
即使我们通常能猜出这个句子的意思,但它也让我们花了一点时间,迫使我们不得不进行一些不必要的思考。
理想情况下,用户应该能在任何良好设计的网页上玩Dick Clark的25000美元金字塔游戏。在网页上四处扫视之后,他们应该能指着页面上的不同区域说出:“这是我在这个网站能进行的活动”“这是到今日头条的链接”“这是这个公司销售的产品”“网站正在向我推销的东西”“到网站其他部分的导航”。
把页面划分成明确定义的区域很重要,因为这可以让用户很快决定关注页面的哪些区域,或者放心地跳过哪些区域。对网页扫描所进行的几项初始眼动研究表明,用户很快就会确定页面哪些部分包含有用信息,然后对其他部分看都不看——就像他们根本不曾来过一样。(其中,广告盲点(Banner Blindness)——用户发展出的一种能力,可以完全忽略那些他们认为包含广告的区域,就是一个非常极端的例子。)
因为人们在网络上所做的大多数事情就是找到下一个地方点击,所以要明确地标识哪些地方可以点击,哪些地方不能点击,这很重要。
扫描页面的时候,我们会寻找各种视觉线索,看哪些地方可以点击(如果是触摸屏,就是哪些地方可以触碰),例如某种形状(按钮、选择卡等)、某些位置(菜单条之类的),以及某些格式(例如文字颜色、下划线等)。
查看事物的外观,去寻找如何使用它们的线索,这个过程并不限于网络。正如Don Norman先生在最近更新的可用性经典书籍《日常事物设计心理学》(The Design of Everyday Things)中开心地跟我们解释的那样,我们其实一直在解析我们的环境(例如,门把手)来寻找这些线索(决定到底是拉还是推),去看看吧。看了这本书以后,你再也不会用以前的方式来看待门把手了。
从一开始,容易识别网页上哪些地方可以点击就时不时地作为问题浮出水面。
当然,现在它又回来了,变成了移动设计上的一个问题,我们会在第10章进一步讨论。
总体来说,如果能坚持只用一种字体颜色来表示文字链接,或者通过它们的外观和位置能识别它们是可以点击的,那就没事了。不要犯那些低级错误就可以了,例如使用同一种颜色表示文字链接和不可点击的标题。
让页面不易理解的一个最大原因是视觉噪声。
用户对复杂度和干扰的容忍度不一样,一些人不在乎眼花缭乱的页面和背景噪声,但很多人在乎。甚至有人发现用户会用即时贴贴在他们的屏幕上,就是为了在阅读时避免动画干扰他们的注意力。
实际上有三类视觉噪声:
这样做的事实就是,没有什么东西会显得重要。页面眼花缭乱往往是没法决策什么内容真正重要的结果,因为那样就没法创建合适的视觉层次结构,把用户首先吸引到最重要的地方。
当你在设计页面的时候,这样做可能是一个好办法:先假定所有内容都是视觉噪声(也就是“有罪推定”的方法),并去除任何对页面没有帮助的内容。我们的时间和注意力都很有限,把无谓的部分通通去掉。
很多时间,或者说绝大部分时间,用户都在你的网页上扫描文本,想要找到一些东西。
而你的文本格式可以帮助他们,让他们扫描起来更容易。
下面是一些最重要的方法,可以让你的页面方便扫描:
一般来说,你总是需要更多的标题,所以多花点时间来构思吧。
还有,别忘了给标题设置正确的格式。下面是设置标题格式时非常重要但常常忽视的两点:
如果你使用的是多级标题,那么请确认在不同级别的标题之间有着非常明显、不可能混淆的视觉区分。可以通过让每个更高级别的标题字体更大或者给它周围留更多的空白来做到这一点。
更重要的是,不要让你的标题“浮在空中”。确保它们更靠近由它们引导的内容,而不是之前的内容。这两种方式在位置上可能只差了一点点,效果却大不一样。
可能有人告诉过你,每个段落都要包含一个中心句,一些细节句,还有一个结论句,但是网页上的段落有所不同。哪怕一段话里只有一个句子也没关系。
如果仔细查看那些长长的段落,你总是能找到一个合理的地方把它们分成两半。养成这种习惯。
此外,为了优化可读性,在列表的不同项目之间应该留出一点点额外的空白。
如果你确实想要学习怎样让内容更好扫描(或者说想学习关于为屏幕显示而写作的相关知识),那么,请立刻跑步前进,不要慢慢悠悠踱步,去找一台能上网的设备,订购一本Ginny Redish的书《消除文字》(Letting Go of the Words)。
如果你喜欢它,那么再订一份送给任何你知道的作家、编辑,以及与创建数字内容有关的人。他们会在内心深深地感激你。