大家好，今天我來給大家介紹 100 余種網頁優化案例。
靈感來源於一個外國網站，有很多案例，是一個設計師憑借經驗和查閱大量書籍總結而成，基本覆蓋了網頁 UI 設計的所有領域，發現它時正好我也在關注網頁設計類的內容，於是就收藏了起來。
本文的這些案例一共分 5 大類，分別是注意力、操作引導、簡化用戶的腦力勞作、適合更多人、幫助用戶解決錯誤。每大類有若干小節。
一、注意力。
1.有一個明顯的目光入口點
每個頁面都要有一個視線上的入口，讓用戶第一眼就知道要看哪兒，而不是整個屏幕花里胡哨，爭相奪芬，讓用戶陷入混亂。
比如這是一個標准的博客頁面，標題和文章一定要有明顯的區分，哪怕很誇張也行。
2.設計好用戶的目光走向
簡而言之，就是讓用戶知道，第一該看哪里，第二該看哪里，第三該看哪里
不要在頁面中留下沒有意義的留白區域
若非必要，盡量使用一列布局
以及使用元素重疊的方法，給用戶一種連續感
3.格式塔原則布局設計
世界充滿了廢品，格式塔心理學告訴大家，我們的大腦會時刻試圖簡化世界，克服生活中混亂感，比如我們往往會運用一些原則來將事物分類、整體化，這些原則有相似、靠近、閉合、連接、連續的圖形和背景。
這些也可以運用在 UI 設計上，
比如我們可以對功能類似的菜單項分組化。
將文章中的小節標題放在更接近相關部分的地方。
以及標題不要越界。
4.適當加些界面變化
適當加些界面變化，可以讓網頁有更良好的交互感，但一定要注意，不要干擾用戶。
我們可以用動畫告訴用戶發生了什么，
也可以使用一些明顯的變色提示，讓用戶快速理解錯誤原因。
5.抹除不必要的信息
我們要盡可能讓用戶不消耗更多的注意力放在沒用的東西上
彈出彈出框后，我們可以選擇暗化模糊背景，
以及在圖表上加深重要數據的顏色
刪除界面上無意義的邊框和不言自明的說明
隱藏不常用的功能
6.提示用戶有內容在屏幕區域外
瀏覽器可能會在某些時刻隱藏滾動條，所以為防止用戶不知道滾動后還會出現更多內容，所以我們可以在這里做些優化。
調整顯示布局，提示用戶去滾動
適當加些陰影，表示深度關系
直接使用文字或圖標來告訴用戶
二、 引導用戶實現最終目標
既然您已經吸引並引導了用戶的注意力，就可以幫助他們實現目標。
1. 讓常用功能和重要數據更靠近用戶
預測用戶的意圖。然后將目標定位在盡可能近的位置。
s1.過濾或跳轉到用戶正在搜索的項目
s2.根據經常選擇的輸入創建智能默認值
s3.在產品列表頁面上包含重要數據
通常，用戶會使用 pogo 棒。他們點擊一個項目來查找信息。然后他們將返回上一頁以對另一個項目重復該過程。那就是可用性差。通過在主要頁面上放置重要信息來最大限度地減少 pogo-sticking。
如果您不喜歡額外的混亂，您可以在懸停時包含該信息（請參閱下一個策略）。
s4.提供有關懸停的有用信息
s5.公開常用功能
s6.在儀表板中顯示主要數據或狀態
s7.將常見答案置於下拉列表頂部
2. 交流交互狀態
通過傳達所有相關信息來減少不確定性。
s1.顯示機器驅動任務的當前進度和剩余時間
s2.溝通復雜或冗長交互的當前階段
s3.顯示序列中的步驟數
s4.顯示類別中的項目數
3. 提供多種方式來完成同一任務
用戶喜歡不同的工作流程。為每個目標創建不同的路徑，讓用戶為他們的工作流程選擇最合適的路徑。
s1.讓用戶通過用戶名或電子郵件登錄
s2.為重復功能提供鍵盤快捷鍵
s3.讓用戶拖放元素
s4.讓用戶直接編輯數據
4. 傳達交互的要求或參數
讓用戶為每次交互做好准備。他們需要什么？他們如何進行？
s1.描述您要求用戶提供的輸入
s2.提供實時密碼要求和反饋
s3.使用通用參數預填充表單元素
s4.指示必需和可選的表單元素
5. 傳達交互的預期結果
在用戶與元素交互之前，他們應該了解預期的結果。
s1.使用描述性按鈕標簽
s2.根據當前輸入顯示輸出預覽
s3.指示或預覽序列中的下一個項目
s4.使用智能菜單項來明確操作
6. 在用戶取得進步時獎勵或讓他們放心
用戶有進步嗎？他們的互動成功了嗎？讓他們知道。並誘使他們繼續。
s1.保持鏈接和目標頁面之間的一致性
s2.在入職期間提供快速勝利
s3.啟動進度條高於 0%
7.解決用戶的核心意圖
通常，我們解決表面級的需求。更深入。總是集思廣益為什么用戶需要某些功能或信息。然后解決潛在的意圖。
s1.表明您的辦公室是開放的還是關閉的
s2.指出事件的新近程度
三、減少腦力勞動並保持心流
除了引導用戶，減少他們的認知工作流程。這樣，你就可以延長他們的“心流”狀態。
1. 最小化用戶計算
永遠不要讓用戶執行數學運算。讓電腦來處理。
s1.指出剩余的項目數
2.在界面內傳達用戶的當前位置
接口就像機場。如果沒有“你在這里”標記，用戶可能會迷路。所以創建這些標記。
s1.突出顯示導航菜單中的部分
s2.在復雜界面中提供面包屑或序列圖
s3.在頁面標題的開頭放置描述性或有用的信息
3.簡化選擇任務
選擇需要努力。通過簡化這些任務來減少工作量。
s1.指出大多數用戶選擇的選項
s2.提供常用搜索詞的精選列表
s3.在導航菜單中創建嚴格的類別
4.使用傳統的網頁設計界面
創意很棒。但不要偏離傳統設計。用戶習慣於某些布局和結構。那些傳統的設計很受歡迎， 因為它們很有效。
s1.使用傳統的導航菜單
s2.將實用程序放在右上角
5.每次互動后提供反饋
當用戶與您的界面交互時，他們應該體驗到實時反饋。有什么成功的嗎？它不成功嗎？發生了什么變化？
s1.重要交互后顯示成功消息
s2.指示光標懸停在哪些項目上
6.盡量減少等待期的負面影響
消除所有不必要的等待期。如果用戶需要等待，那么盡量減少這些負面影響。
s1.在加載動畫時使用冷色來減少喚醒
藍色減少喚醒（並增加放松）。使用藍色加載元素，用戶會感知到更快的加載時間（Gorn 等人，2004 年）。有關更多詳細信息，請參閱我關於顏色的文章。
s2.在漫長的等待期間保持用戶參與
s3.防止用戶上傳不兼容的文件
s4.顯示正在發生的任務的運行列表
7.最小化用戶對內存的依賴
不要強迫用戶記住任何東西。公開所有相關信息。
s1.保持表單標簽始終可見
避免當用戶在元素內部單擊時消失的內聯標簽。
s2.將占位符文本放置在表單元素之外
s3.將復制按鈕添加到可移動輸入
8.最小化鋸齒形眼圖
減少來回眼球運動的數量。將所有補充數據保持在近距離內。
s1.合並一致數據以幫助用戶比較項目
s2.將表單標簽與元素直接相鄰對齊
9.溝通哪些項目是可點擊或交互的
用戶應該確定哪些元素是交互的（以及如何與它們交互）。如果您熟悉 UX/UI，那么您可能知道 由 Don Norman 在The Design of Everyday Things 中推廣的能指和可供性。
s1.使用 3D 特征設計按鈕
s2.將虛線紋理添加到拖放元素
s3.使用圖標和符號來傳達交互的含義
您可以使用 PowerPoint 或 Keynote 中的各種形狀創建這些圖標中的大多數。
10.使用熟悉的詞語和符號進行交流
在大多數情況下，清晰勝過創造力或行話。
s1.說用戶的語言，而不是系統的語言
s2.出現外語時提供翻譯按鈕
s3.選擇語義一致的顏色
當顏色不一致時，用戶在處理信息時會遇到更多麻煩。目前，meetup.com 具有很好的可用性。但是，他們使用紅色來確認出席情況（當他們應該使用綠色時）：
11.最大化界面的可掃描性
大多數用戶會通過掃描來處理您的內容。你不應該與之抗爭。擁抱它。讓你的界面更有利於掃描。
s1.保持段落簡短並突出關鍵術語
s2.將重要信息放在列表項的開頭
s3.將行條紋添加到您的表格中
s4.編寫獨立的副標題
s5.用視覺多樣性分解文本
12.最大化文本的可讀性
顯然，文本應該是可讀的。但是這里有一些技巧可以使它更具可讀性。
s1.在文本和背景之間創建強烈的對比
小心在背景上顯示文本。您可能需要通過疊加或模糊來添加對比度。讓我們在我美麗的臉龐上添加文字……
s2.左對齊大部分正文文本
13.在整個界面中使用一致的模式
如果模式不一致，用戶將需要更多時間來學習您的界面。通過保持一致的布局和外觀來簡化它。
s1.創建前端樣式指南
創建一個文檔，總結界面中每個元素的設計規范。
其他元素包括：
-
顏色
-
網格和布局
-
放置和定位
-
尺寸和形狀
-
標簽和語言
-
導航
-
表
-
列表
-
鏈接
-
語音和音調
需要靈感嗎？查看 Mailchimp 的風格指南。
s2.保持導航菜單在同一位置
14.用視覺平衡創造美麗的設計
當設計在美學上令人愉悅時，它們更有用——這一原則稱為美學可用性效應（Kurosu 和 Kashimura，1995 年）。
s1.使用數學原理構建設計
s2.選擇對比字體
當一些人選擇匹配的字體時，他們會搜索一種看起來與現有字體相似的字體。但這是錯誤的做法。通常，相似性看起來像是一個錯誤。
相反，要慎重。選擇對比度明顯的字體。如果您是新手設計師，您可以選擇襯線與無襯線組合（襯線是字母末端的“樹枝”）。
四、最大化所有用戶和場景的兼容性
您的用戶是具有不同目標的不同人。設計您的界面，使其適合所有人。
1.最大限度地兼容用戶的知識和技能水平
您的用戶將是新手、專家或混合型。相應地設計您的界面。
s1.使用適當數量的入職培訓
有四種主要的入職策略：
這四種方法在 2 x 2 矩陣中很好地對齊。使用下圖為您的界面選擇最佳方法。
s2.在不干擾專家用戶的情況下為新手用戶添加工具提示
s3.使用卡片分類構建信息架構
-
如果您想了解用戶如何確定或概念化菜單類別，請使用開放式卡片排序。
-
如果您想了解用戶如何將現有元素組織到預先確定的類別中，請使用封閉式卡片排序。
2.最大限度地兼容用戶的工作流程
用戶會有不同的需求。針對這些不同的工作流程自定義您的界面。
s1.讓用戶控制數據的外觀
s2.讓用戶控制數據的順序
其他排序標准包括：
-
按字母順序
-
可用性
-
斷然
-
日期
-
距離
-
人氣
-
價格
-
關聯
-
尺寸
s3.讓用戶控制數據量
s4.構建角色以識別特定的工作流程
s5.讓用戶在新標簽頁中打開頁面
很多用戶都會頁面停放。他們將打開標簽以供稍后閱讀。
3.最大化界面的可訪問性
讓殘障人士可以訪問您的界面。這不僅是最佳實踐，而且您還可能面臨法律后果（取決於您的產品）。
s1.在 HTML5 中使用語義標簽
s2.使用多種提示來傳達信息
大約 8% 的男性是色盲（Chan、Goh 和 Tan，2014 年）。永遠不要僅通過顏色來傳達意義。總是提供額外的提示。
4.最大限度地兼容所有輸入和極端情況
用戶應該能夠輸入范圍廣泛的輸入而不會產生任何后果。
s1.解決自動生成的消息中的不利結果
s2.使用接受各種輸入格式的表單元素
s3.顯示滿足搜索者需求的結果
s4.使用處理拼寫錯誤、同義詞和變體的搜索字段
5.最大限度地兼容所有介質
您的界面應該適用於所有環境（例如，設備、瀏覽器等）。
s1.自定義用戶瀏覽器的說明
s2.在小型設備上使用單窗口向下鑽取
五、幫助用戶最小化和克服潛在錯誤
在大多數界面中，錯誤是不可避免的。如果確實發生了，請幫助用戶快速輕松地克服它們。
1.防止出錯的可能性
在設計界面時，不要立即關注解決方案。相反，嘗試使錯誤不可能發生（稱為poka-yoke）。
s1.當用戶單擊按鈕時刪除、禁用或替換按鈕
不要告訴用戶單擊“提交”一次。如果他們可以多次點擊，他們會。相反，當用戶單擊它們時禁用按鈕。這樣一來，重復提交是不可能的。
s2.只提供可接受的輸入
s3.在表單元素中使用響應式啟用或披露
s4.構造文本字段以匹配所需的輸入
2.監控典型錯誤信號
您的界面中常見的錯誤是什么？識別這些錯誤中固有的信號。然后監視這些信號何時出現。
s1.搜索與用戶意圖相矛盾的措辭
s2.提醒用戶是否已經購買過商品
3.區分強大的功能以最大程度地減少滑動
用戶將失去焦點。你無法阻止它。但是，您應該在視覺上區分強大的功能，以便將破壞性錯誤的可能性降到最低。
s1.按空間或顏色分隔強大的功能
s2.為重大的不可逆變化添加約束
4.提供簡單的方法來恢復或逃避
始終為用戶提供返回上一頁或安全/可識別區域的選項。
s1.使用撤消而不是確認
s2.在所有頁面和功能上提供逃生艙口
例如，一些下拉菜單不提供逃生艙口。當用戶單擊一個選項時，他們不能再將其留空。
s1.在彈出窗口和模態框上提供可見的關閉
5.最小化離開序列的負面影響
用戶應該能夠使用相同的數據返回到相同位置的序列。
s1.保存用戶輸入的數據
s2.讓用戶返回到序列中的相同位置
6.擴展可移動路徑和可點擊區域
用戶並不完美。他們用光標出錯。創建靈活且寬容的界面。
s1.為小按鈕添加透明邊框
s2.為懸停彈出窗口和下拉菜單添加輕微延遲
s3.超鏈接整個菜單選項容器
s4.超鏈接主菜單、列表項和補充圖標
通常，用戶點擊不可點擊的項目。不要與那些錯誤作斗爭。相反，將可點擊功能添加到這些公共區域。
7.提供有用和支持性的錯誤消息
永遠不要給出標准的“出現錯誤”信息。解釋錯誤的原因——最好是解決方案。
s1.解釋驗證錯誤的原因
s2.將用戶指向文檔或對復雜錯誤的支持
s3.避免在錯誤消息中說“你”
8.記錄用戶之前的操作
在您的界面中提醒用戶他們過去的操作。
s1.顯示用戶最近的搜索
s2.為訪問的鏈接使用不同的顏色
s3.指出用戶已經查看過哪些項目
9.分析用戶行為以發現界面問題
始終迭代和改進您的界面。使用這些策略開始。
s1.在適當的地方收集用戶反饋
s2.為 404 錯誤增加創建警報
s3.識別用戶彈跳的頁面
如果一個頁面獲得了很多瀏覽量（但很少有獨特的瀏覽量），那么仔細檢查用戶是否在該頁面上粘住了 pogo
參考資料
【1】User Experience https://www.nickkolenda.com/user-experience/