[譯] 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。