[譯] UX 設計實踐：如何設計可掃描的 Web 介面

• 原文地址：UX Design Practices: How to Make Web Interface Scannable
• 原文作者：Tubik Studio
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：Ivocin
• 校對者：生糸, Junkai Liu

我們每天被大量的線上或線下的資訊流壓的不堪重負。由於新技術的發展和快速的網際網路連線，人們生成的內容比他們能夠接受的更多。面對眾多網站和應用程式時，使用者不會逐字逐句地閱讀所有內容 —— 他們會首先掃描頁面，看一下這些內容對他們是否有用。因此，可掃描性是當今網站可用性的重要因素之一。本文探究了這一現象，並且提供瞭如何使數字產品可掃描的技巧。

什麼是可掃描性？

對於頁面或螢幕，動詞“掃描”意味著匆匆一瞥或匆匆閱讀。因此，可掃描性是將內容和導航元素呈現為可被輕鬆掃描的佈局的方式。尤其是首次與網站互動時，使用者一般都是快速檢視內容，然後分析這些內容是不是他們所需要的。任何以下內容都可能成為這個過程的一個障礙：單詞、句子、影像或動畫。

順便說一句，這種行為並不是什麼新鮮事。幾十年來，人們經常在新的雜誌或報紙上做著相同的事情：在開始仔細閱讀文章之前先瀏覽一遍。另外，從螢幕上閱讀比在紙上閱讀更累，因此使用者會更具選擇性地閱讀，當他們開始厭煩的時候就會放棄閱讀。

為什麼可掃描性很重要？大約十年前，Jacob Nielsen 回答了“人們如何在網上閱讀？”的問題。他的回答非常簡單：“他們沒有。人們很少逐字閱讀網頁；相反，他們掃描頁面，挑選個別的單詞和句子閱讀”。從那時起沒有太大變化的是：當我們不確定一個網站是否滿足我們的需求時，我們不太會花時間和精力去瀏覽它。因此，如果沒有在第一分鐘抓住使用者的眼球，那麼使用者離開網頁的風險會很高。無論網站的型別是什麼，可掃描性都是其使用者友好性的重要因素之一。

如何檢查網頁是否可掃描？可以嘗試將自己視為首次使用者並回答如下兩個問題：

• 你在前幾分鐘看到的內容是否符合目標受眾對此頁面的期望？

• 你能在前兩分鐘瞭解頁面上的資訊型別嗎？

如果這兩個答案不都是正面的，也許是時候考慮如何加強網站的可掃描性了。加強網站可掃描性是值得投入時間的，因為掃描性好的頁面在以下方面會變得更加高效：

• 使用者更快速地完成任務並實現目標
• 使用者在搜尋他們需要的內容時會更少出錯
• 使用者可以更快地瞭解網站的結構和導航
• 跳出率降低
• 保留使用者的水平越來越高
• 網站看起來更可信
• SEO 率受到積極影響

流行的掃描模式

介面設計師必須考慮的重要事項是眼睛掃描模式，它表明使用者在最初的幾秒內與網頁互動的方式。當你瞭解了人們如何掃描頁面或螢幕時，就可以將內容進行優先順序排序，並將使用者需要的內容放入最明顯的區域。這個使用者研究領域得到了 Nielsen Norman 集團的支援，幫助設計師和可用性專家更好地理解使用者行為和互動。

收集使用者眼動追蹤資料的不同實驗表明，通常訪客掃描網站會使用幾種典型的模型。

Z 模式 對於具有統一資訊呈現和弱視覺層次的網頁而言是非常典型的。

另一種模式具有 Z 字形圖案，該模式通常用於具有視覺上分割內容塊的頁面。同樣，讀者的眼睛從左上角開始從左到右移動，並在整個頁面上移動到右上角，掃描這個初始互動區域中的資訊。

另一個模型是 Nielsen Norman 集團探索發現的 F 模式，表明使用者經常會經歷以下互動流程：

• 使用者首先水平移動閱讀，通常跨越內容區域的上部。這個初始元素構成了 F 的頂部欄。
• 接下來，使用者稍微向下移動頁面，然後在第二個水平移動中讀取，該移動通常覆蓋比先前移動更短的區域。這個額外的元素形成了 F 的下欄。
• 最後，使用者以垂直移動掃描內容的左側。有時這是一個相當緩慢和系統的過程，在眼動追蹤熱圖上顯示為實心條紋。有時使用者掃描得更快，會建立一個帶有斑點的熱力圖。最後構成了字母 F 的主幹。

提高可掃描性的技巧

1. 使用視覺層次對內容進行優先順序排序

基本上，視覺層次是按照人類感知最自然的方式，在頁面上排列和組織內容的方式。其背後的主要目標是讓使用者瞭解每塊內容的重要性級別。因此，如果應用了視覺層次，使用者將會首先看到關鍵內容。

例如，當我們在部落格中閱讀文章時，我們首先會看到標題，然後是副標題，然後才是副本塊。這是否意味著副本塊中的資訊不重要？其實不是這樣，但通過這種方式使用者就可以掃描標題和副標題，以瞭解文章是否對他們有吸引力，而不用閱讀全文。如果標題和副標題起的恰當，它們能夠告知使用者文章的結構和內容，這會是說服使用者去閱讀更多的因素。另一方面，如果使用者看到又大又長的沒有分塊的文字，他們會感到很害怕，因為無法得知閱讀這篇文章需要多長時間，以及是否值得投入時間和精力。

有助於建立視覺層次的幾個主要因素：

• 尺寸
• 顏色
• 對比
• 相近性
• 負空間
• 重複

所有這些都有助於設計人員將元素、連結、影像和副本集轉換為由該頁面佈局組成的可掃描系統。

2. 將核心導航放入網站頭部

所有上文提到的眼動掃描模式都顯示，無論特定使用者遵循哪種模式，掃描過程都會從網頁的頂部水平區域開始。用它來展示互動和品牌的關鍵區域效果非常好。這也是 UI / UX 設計師、內容管理者和營銷專家都認為網站頭部設計是一個關鍵點的原因。

另一方面，標題不應該過長：太多的資訊使得無法集中注意力。將所有內容放入頁面頂部的嘗試會將佈局變得混亂不堪。因此，在每個特定情況下，必須分析核心目標受眾的目標，他們如何與網站背後的業務目標交叉，並以此為基礎 —— 哪些資訊或導航應該作為最重要頭部內容。例如，如果是大型電商網站，搜尋功能必須立即可見，並且通常可以在頭部找到，並能從任何互動點訪問到。對於小型企業網站而言，搜尋功能根本不需要，但是直接看到的投資組合的連結是至關重要的。

Gourmet 網站

3. 保持負空間的平衡

負空間 —— 或者通常稱為空白區域 —— 是佈局裡的空白區域，不僅在佈局中的物件周圍，而且在它們之間和內部。負空間是頁面或螢幕上所有物件的一種呼吸空間。它定義了物件的界限，根據 Gestalt 原則在它們之間創造了必要的聯絡，並建立了有效的視覺表現。在網站和移動應用程式的 UI 設計中，負空間是介面高可導航性的一個重要因素：沒有足夠的空氣，佈局元素沒有被正確看到，因此使用者可能會錯過他們真正需要的東西。這可能是眼睛和大腦緊張的一個強有力的原因，儘管許多使用者將無法明確表述這個問題。適量的負空間，特別是微空間，解決這個問題，並且使過程更自然。

4. 檢查能否立即看到 CTA

顯然，絕大多數網頁目的在於使用者必須完成的特定操作。包含號召性用語（CTA）的元素（通常是按鈕）應在幾秒鐘內顯示，以便使用者瞭解他們可以在此頁面上執行的操作。 在黑白和模糊模式下檢查頁面可以很好地測試這一點。如果在這兩種情況下都可以快速區分 CTA 元素，說明這一點做的不錯。例如，在下面顯示的麵包店網站的網頁上，可以很容易地在其他元素中看到將物品新增到列表中的 CTA 按鈕。

Vinny’s 的麵包店網站

5. 測試副本內容的可讀性

可讀性定義了人們閱讀單詞，短語和副本塊的容易程度。易讀性衡量使用者如何快速直觀地區分特定字型中的字母。應該仔細考慮這些特性，尤其是對於填充了大量文字的介面。背景色、副本塊周圍的空間量、字距，行距、字型型別和字型配對 —— 所有這些因素都會影響快速掃描文字和捕獲令使用者留下的內容的能力。為了防止這個問題，設計人員必須檢查是否遵循排版規則以及所選字型是否支援一般的視覺層次和可讀性。使用者測試將有助於檢查使用者能夠快速輕鬆地感知文字。

6. 使用數字，而不是單詞

這條建議是基於 Nielsen Norman 集團的另一項調查。他們分享了一個重要的發現：眼動追蹤研究表明，在掃描網頁的過程中，數字通常會阻止使用者徘徊並吸引注視，相反大量可以沒有數字的單詞會被使用者忽略。我們潛意識地將數字與事實、統計資料、大小和距離相關聯 —— 這些資料可能是有用的。因此，副本中的數字可以吸引使用者注意，而代表數字的單詞可能在大量副本中被遺漏。更重要的是，數字比文字數字更緊湊，因此它使內容更簡潔，更省時。

7. 一個段落，一個想法

在可掃描性方面處理副本內容，儘量不要使文字的內容太長。簡短的段落看起來更容易消化，如果資訊對讀者沒有價值，可以更容易跳過。因此，當你在一個段落中提出一個想法併為另一個段落開始另一個想法時，請遵循該規則。

Bjorn 設計工作室網站

8. 使用編號和專案符號列表

使文字更易於掃描的另一個好方法是使用帶有數字或專案符號的列表。它們有助於清晰地組織資料。此外，它們會引起使用者的注意，因此資訊不會在文字主體中丟失。

9. 突出顯示文字中的關鍵資訊

加粗、斜體和顏色高亮顯示雖然老派，但仍然有效。通過這種方式，你可以將注意力集中在段落中包含的重要想法、定義、引用或其他型別的特定資料上。更重要的是，文字的可點選部分（連結）必須在視覺上標註出來。我們習慣於看到它們加下劃線、但使用顏色高亮或加粗字型會更有效。

10. 使用影像和插圖

在 Web 使用者介面設計中，影像在表達情緒或傳遞訊息方面是非常有幫助的，它們飽含資訊和吸引力。原始插圖，突出的英雄橫幅，引人入勝的照片可以很容易地吸引使用者的注意力，並支援一般的風格概念。更重要的是，它們在構建視覺層次方面發揮了重要作用，並使副本內容與插圖或照片相結合，更容易消化。人們感知影像比理解文字更快，這是提高可掃描性的重要因素。

金融服務網站

提高網頁的可掃描性，是設計人員和內容建立者對網站使用者的真正尊重。這樣我們就可以節省使用者的時間和精力，為他們提供有組織，和諧的，有價值和有吸引力的內容。

---

最初為 tubikstudio.com 而寫

歡迎到 Dribbble 和 Behance 觀看 Tubik Studio 的設計。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。