第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）。
如果你喜歡它，那麼再訂一份送給任何你知道的作家、編輯，以及與建立數字内容有關的人。他們會在内心深深地感激你。