《點石成金：訪客至上的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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。