提高可掃描性的 UI 設計最佳實踐

產品設計師經常在短時間內傳達大量信息。 那些理解術語“可掃描性”、常見的眼動追踪模式和現代設計原則的人更有能力創建易於消費的內容和“粘性 UI”。

每天，互聯網都在擴展著新的應用程序、網站、文章等。 吸引信息過載用戶的注意力變得越來越困難，他們發現很難從不相關的內容中過濾相關信息。 營銷專家 David Zheng 發現，在超過60% 的情況下，訪問者會在 15 秒內放棄並離開網站。

研究表明，用戶實際上並沒有逐字閱讀他們看到的所有內容——他們會掃描然後確定這些材料是否值得他們花時間。 通過使適當的內容可立即掃描，產品設計師可以將短期訪問者轉變為長期用戶。 以下是一些 UI 設計最佳實踐，以幫助放大可用性設計中經常被忽視的重要因素：可掃描性。

什麼是可掃描性？

Nielsen Norman Group 的用戶體驗專家進行了研究以回答這個問題：人們如何在網絡上閱讀？ 他的發現很簡單。 他們沒有。

該小組發現，只有 16% 的網站首次訪問者可能會逐字閱讀。 其他 84% 的人會在決定深入挖掘材料之前快速掃描鉤子元素，例如標題、句子、圖像或動畫。 這種行為不僅限於數字接口。 例如，人們很少閱讀報紙上的每一個字。 相反，他們掃描相同的元素——標題、圖像等——以確定什麼是值得他們花時間的。

因此，可掃描性是一種佈局內容以便易於掃描的方法。 通常只有很短的時間才能在屏幕上以有價值的內容給訪問者留下深刻印象，因此針對用戶在網絡上的閱讀方式全面優化界面至關重要。 無論數字產品是網站、應用程序還是其他類型的用戶界面，可掃描性都是用戶友好設計的最重要因素之一。

可掃描界面的好處

確定數字產品可掃描性的理想方法是從用戶的角度觀察它並回答以下關鍵問題：

1. 頁面內容是否符合觀眾的期望？
2. 頁面的主要信息是否在短時間內易於理解？

儘管可掃描界面的製作需要付出努力，但從長遠來看，它通過創建粘性 UI 設計而獲得回報。 Nielsen Norman Group 的研究表明，針對可掃描性優化的頁面在以下方面變得更加有效：

• 用戶有更快的任務完成時間
• 用戶可以輕鬆定義內容是否適合他們
• 用戶在回憶中犯的錯誤更少
• 用戶可以更好地了解頁面結構
• 網站在可信度和內容質量方面獲得更有利的主觀評價
• 跳出率降低
• 回訪概率增加
• 搜索引擎優化 (SEO) 得到改進

用戶習慣在掃描模式中的力量

每個人消費內容的方式都不同。 然而，通過研究，已經出現了定義明確的眼動追踪模式。 在最初的幾秒鐘內了解用戶如何與界面交互可以幫助設計師優先考慮內容，將重要信息放置在主要可見區域，並建立強大的視覺層次結構。

根據 Nielsen Norman Group 的說法，用戶掃描界面有七種常見模式：

• 著名的 F 模式：發現 12 年後，這種模式仍然是最常見的掃描模式——即使在掃描移動界面時也是如此。 眼睛水平移動，這在閱讀時很典型，然後跳到下面的內容。 這可以通過斑點熱圖緩慢、系統地或快速地完成。
• Z 模式：之字形模型在網頁中是典型的，具有統一的信息表示和弱視覺層次結構。
• 分層蛋糕模式：用戶在掃描標題和副標題時遵循此模式，以快速確定他們正在尋找的信息的位置（以及是否）可以在頁面上找到。
• 斑點模式：創意人員通常遵循這種掃描模型，他們跳過大塊文本並掃描顏色、形狀和比例異常等視覺組件以查找特定信息。
• 標記模式：就像舞者在旋轉時固定在一個物體上以保持平衡一樣，用戶在滾動時將注意力集中在一個地方——這是移動用戶體驗中非常常見的模式。
• 繞過模式：當列表中的多行文本都以相同的單詞開頭時，用戶會故意跳過一行的第一個單詞。
• 承諾模式：這是一種罕見的模式，僅當用戶對內容高度感興趣並有動力消費所有內容時才會出現。

用戶採用的模式主要與訪問網頁的動機有關：他們在尋找什麼類型的信息？ 他們願意花多少時間去尋找它？ 是否有其他網站可以更快地提供此信息？

通過用戶研究和掃描模式提供價值

創造“以用戶為中心的設計”一詞的認知科學研究人員唐納德·諾曼博士寫道：“我們製造功能性、可理解和可用的產品是不夠的，我們還需要製造能夠帶來快樂和興奮的產品，快樂和樂趣，是的，人們生活的美麗。”

用戶研究是以用戶為中心的設計和 UI 設計最佳實踐的基石。 隨後，為了提高數字界面的可掃描性，設計人員必須了解最終用戶。 當從最終用戶的角度設計 UI 模式時，就會產生自然而直觀的體驗。

有影響力的解決方案不是由抽象構成的。 下面是一組美觀、實用、可持續的數碼產品。 每個設計團隊都定義了關鍵受眾，使用了眼球追踪模式，並設計了內容佈局以產生粘性 UI。

Instacart 通過其 UI 設計模式利用以用戶為中心的設計。 他們的受眾中有很大一部分是老年人和有視力障礙的用戶，因此這些項目以高對比度的網格列出，並明確強調主要的 CTA。 該設計允許使用 Spotted Pattern 掃描模式來適應長期訪問者。

Yelp 服務於搜索絕對最好的餐廳、購物、夜生活、美食等的用戶。人們可能會根據自己的個人標準和深入研究來評估評論，使 F 模式成為最適用的掃描模型。 因此，Yelp 以易於瀏覽的方式呈現內容，並強調特定元素，例如評分、圖像和地址。

Airbnb 可以說是最受歡迎的應用程序之一，這在很大程度上歸功於他們的用戶研究。 因為他們知道他們的用戶經常使用移動設備，所以他們設計以適應標記模式。 佈局乾淨直觀的界面是為了強調大的全寬公寓圖像。 他們有意將每個屏幕的封面圖片數量限制為兩個，以便用戶可以適當地投入時間並查看列表是否吸引他們的眼球。

在提高數字產品的可掃描性時要記住的一個因素是定義將在其上查看它的設備類型。 Airbnb 的移動平台獲得了大量流量。 從拇指使用熱圖可以看出，Airbnb 戰略性地將最常用的 UI 元素（例如“探索”和“保存的搜索”）放置在滾動和掃描時易於訪問的範圍內。

提高可掃描性的 UI 設計最佳實踐

創建適當的視覺層次結構

數字界面的視覺層次是指 UI 設計元素的排列和呈現，以傳達重要性級別，以便用戶可以快速瀏覽所需的信息。 設計具有適當視覺層次結構的佈局有幾個因素：

• 尺寸
• 顏色
• 對比
• 接近
• 結盟
• 負空間
• 重複

通過在創建 UI 佈局設計時考慮這些 UI 設計模式，設計師將確保最終產品具有美觀、和諧且直觀可掃描的佈局。

Google 的搜索結果頁面使用所有視覺層次結構因素來提高可掃描性。 標題通過使用顏色、大小以及隨後的對比度來強調。 每個標題周圍的負空間有助於它成為用戶首先瀏覽的內容。

當用戶找到相關標題時，他們可能會檢查鏈接的可信度——這是一個由於顏色和接近度而易於識別的元素。 接下來，為了更好地評估結果，他們將深入研究顏色、大小和接近度一致的內容副本。 除了這些因素之外，重複和對齊使 Google 搜索結果通常易於掃描。

利用負空間

才華橫溢的克勞德·德彪西曾說過：“音樂是音符之間的空間。” 可掃描性也是如此——元素之間的負空間是佈局成功的原因。 UI 元素周圍適當數量的負（白色）空間將焦點集中在元素本身上。 它強調內容並提供必要的喘息空間，以確保佈局不會混亂。 沒有呼吸空間，人腦不太可能掃描感興趣的點，更容易混淆。

使用副標題來總結內容

人們經常對大量文本做出負面反應。 如果段落不符合他們的興趣，這可能會引發他們將失去時間的假設。 UI 設計最佳實踐為這個問題提供了解決方案。 通過在長文章的開頭添加簡短的副標題，用戶可以最終了解該主題。

在編寫副標題時，保持重點至關重要。 只需傳達以下內容提供的關鍵信息。

創建項目符號和編號列表

人腦是非常系統的——它觀察內容，然後將其分組為有意義的單元。 因此，與合併到文本段落中的幾個點相比，用戶更有可能理解項目符號或編號列表。

列表創建的負空間使用戶更容易掃描，因此仔細尋找機會是有益的。 如果文本中有兩個以上的點相互平行，並且每個點都需要不超過兩個句子來描述，那麼這是列表的有力候選者。 Nielsen Norman Group 為創建項目符號數字內容提供了更深入的見解。

可視化內容

現代數字用戶天生是視覺的，並不總是可能對文本內容做出很好的反應（即使它結構完美並遵循所有 UI 設計技巧以獲得理想的可掃描性）。 外部環境永遠是一個因素。 因此，為了抵消文本繁重的佈局，圖像和圖形的使用提供了信息豐富且具有情感吸引力的視覺中斷。 俗話說，一圖抵千言！

原始視覺效果（插圖、引人入勝的照片等）可以輕鬆吸引用戶的注意力並支持總體風格概念。 更重要的是，它們可以改善視覺層次並使文本更易於消化。 但是，如果使用不當，圖形可能會產生反作用。 在將關鍵想法轉化為圖形之前，設計師完全理解他們正在設計的內容至關重要。

適當強調 CTA

大多數數字體驗旨在激髮用戶的特定行為。 儘管號召性用語 (CTA) 按鈕通常看起來很簡單，但它們的設計目的是幫助用戶完成一項操作——例如購買、添加到購物籃或只是轉到另一個頁面。

UI 設計最佳實踐建議將 CTA 放置在靠近描述動作的內容的位置，使其對用戶來說直觀。 測試 CTA 是否勻稱、著色和定位的有效方法是將最終設計臨時轉換為灰度。 如果 CTA 仍然清晰可見並被強調，則粘性 UI 做得很好。

可掃描性的重要性

有很多元素決定了 UI 佈局設計是否會受到人們的歡迎，例如內容相關性、競爭對手的解決方案和業務邏輯。 據福布斯報導，可掃描性可能是內容營銷中最容易被忽視的因素。 通過創建可掃描的內容，短期訪問者可以成為長期用戶。

可掃描的內容向最終用戶展示了他們的時間是寶貴的，並提供了通過簡單瀏覽佈局設計來理解核心信息的機會。 病毒博主和新聞學教授金凱勒向設計師指出，“你正在與你想要成為客戶的人開始對話。 這是一種關係，如果你不花時間在一起，任何關係都無法生存。 尊重他們的時間，讓它變得有價值。”

• • •

進一步閱讀 Toptal 設計博客：

• UI 設計最佳實踐和常見錯誤
• 空狀態——用戶體驗中最容易被忽視的方面
• 簡單是關鍵——探索最小的網頁設計
• 移動界面的啟發式原則
• 可讀性設計——網頁排版指南