[譯]網站設計綜合指南

08-21

[譯]網站設計綜合指南

來自專欄掘金翻譯計劃8 人贊了文章

原文地址：A Comprehensive Guide To Web Design
原文作者：Nick Babich
譯文出自：掘金翻譯計劃
本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/TODO/comprehensive-guide-web-design.md
譯者：horizon13th

校對者：pot-code

A Comprehensive Guide To Web Design

網站設計綜合指南

摘要

網站設計往往是個棘手的問題。在設計網站時，設計師和開發者往往需要考慮很多要素，從視覺表現（網頁看起來如何）到功能設計（網站用起來如何）。為了細化網站設計任務，我們為讀者呈上此文。

本文將著重講述設計主旨，設計啟發，設計方法，為你的網站打造更好的用戶體驗。我們從大方向著手，例如用戶旅程（怎樣定義網站「骨架」），細化到單一頁面（網頁設計需要考慮什麼）。同時我們也會提及其他的設計要素，例如移動端支持與測試。

Designing The User Journey 設計用戶旅程

Information Architecture 信息架構

「信息架構」（IA）這個術語通常被誤用來表示網站的目錄結構。但其實這是不正確的，儘管網站菜單是信息架構的一部分，但它也僅僅是一個方面。

信息架構指，將信息以清晰邏輯的方式組織。這種結果遵循一個目標：幫助用戶在複雜信息集合中導航。好的信息架構提供了與用戶預期一致的層級結構。然而優秀的層級結構，直觀的導航都不是偶然出現的，而是用戶調研和用戶測試的結果。

調研用戶需求的方法眾多。通常來說，信息架構多用於用戶調研（如用戶訪談，卡片分類法）：調研人員傾聽用戶期望，觀察潛在用戶如何將複雜的信息組進行歸類。信息架構同樣需要可用性測試的結果，來看用戶是否可以方便地導航。

卡片分類法簡單實操，志於幫設計人員弄清：如何最優地基於用戶輸入將內容組織分類。信息架構與卡片分類法相似，都能典型地呈現出清晰的模式。（圖片來源： FosterMilo）

在設計網頁界面前，往往要進行例行步驟：設計者基於用戶訪談設計網站導航結構，用卡片分類法測試該結構是否符合用戶的思維模式，用戶體驗研究者用「樹形測試法」對導航結構進行驗證。

樹形測試法能夠可靠地驗證，用戶能否根據現有目錄結構進行導航。

（圖片來源: Nielsen Norman Group) (點擊查看大圖)

Global Navigation 全局導航

導航是可用性的基石。如果用戶在網站中難以定位，無所適從，網站再怎麼好也沒用。網站導航設計需要遵從下列原則：

簡易性 導航應以這樣的方式設計，訪問者到達目的地點擊次數越少越好。
清晰性 用戶不需要猜測導航選項的含義，每一個菜單項對於來訪者來說不言自明。
一致性 對於整個網站的所有頁面，導航體系必須統一。

設計導航時需要考慮如下幾點：

根據用戶需求選擇導航模式 導航設計必須遵循主流用戶的需求。目標用戶群期望某種特定類型的網站交互，那就以你獨到的方式，讓用戶滿足預期吧～例如：如果大部分用戶都不知道漢堡包圖標是啥意思，就避免使用該圖標展示導航。
將導航選項區分優先次序 有一種簡單的方法來區分導航選項優先順序：將用戶行為任務按照不同優先順序排序（高級，中級，低級），然後在布局中突出顯示高優先順序的用戶行為路徑，以及被頻繁訪問的節點。
使重要選項可見 正如 Jakob Nielsen 所言，識別出某事比回憶起某事容易。為了減小用戶記憶負擔，將所有重要菜單項設為一直可見。這些最重要的菜單項應該一直可用，而不僅在我們預期用戶需要的時候展現。
傳達當前位置信息 「我在哪」是用戶進行有效導航時需要回答的最基本問題。許多網站有此常見錯誤：不顯示用戶的當前位置，因而如何定位的問題也值得深究。

Links and Navigation Options 鏈接與菜單項

鏈接、菜單項是導航過程中的要素，直接作用於用戶旅程，這些交互元素遵循下列規律：

區別站內鏈接與外部鏈接 用戶期望站內鏈接和外部鏈接為不同的交互行為。所有內部鏈接應當在當前標籤頁打開，這樣用戶便可以在當前窗口使用「後退」按鈕。如果決定在新窗口打開外部鏈接，應當在自動打開新標籤頁／新窗口前提醒用戶。這可能需要聲明（在新窗口打開），將其以文本的形式添加到鏈接文本中。
標記已經訪問過的頁面 如果訪問過的鏈接沒有修改顏色標記，用戶很可能無意中重複訪問。

用戶通過顏色標記，識別出曾訪問過的頁面，避免無意重複訪問同一頁面。

認真核實所有鏈接 當用戶點擊鏈接卻返回 404 錯誤時，會極其不爽。當訪問者瀏覽內容時，期望所有的鏈接都指向鏈接所指，而不是其它不相關頁面，更不能容忍 404 頁面。

「Back」 Button in Browser 瀏覽器的「後退」按鈕

後退按鈕是瀏覽器上第二重要的界面控制（僅次於最最重要的 URL 地址欄），要確認「後退」按鈕符合用戶預期。當用戶跟著鏈接來到某頁面，然後點擊「後退」鍵時，他們期望恰好返回到前一網頁的離開的位置。尤其要避免點擊「後退」按鈕卻回到了原頁面頂端的情況。失去用戶原先的焦點會使用戶被迫重複瀏覽已讀內容。由於沒有恰好「後退」原位，用戶會迅速失去耐心。

Breadcrumbs 麵包屑導航

麵包屑導航是系列鏈接的集合，用於索引網站的當前位置。它是一種次級定位規則，常用於顯示用戶當前在網站的位置。

雖然該元素不需要過多解釋，有幾點還是值得注意：

不要使用麵包屑作為主導航的替代品 主導航是引導用戶的主導元素，然而麵包屑只是支持元素。使用麵包屑而非其他元素作為主導航，通常意味著導航設計較差。
使用箭頭作為分隔符，而非斜杠。清晰分離導航層級 推薦使用大於號（>）或右箭頭（→），因為此類符號包含方向信息。不推薦在電商網站中使用左斜杠（／）作為分隔符。如果你非要用的話，請確保商品類別不包含斜杠。

此麵包屑的層級關係簡直難以分辨 (點擊查看大圖)

Search 搜索欄

有些用戶為了某特定目標訪問網站，他們並不想使用導航功能。此時用戶只想在搜索欄輸入文字，提交搜索查詢，返回他們尋找的頁面。

設計搜索欄時考慮下列基本規則：

將搜索欄放在用戶所期望的地方 下圖是基於 A. Dawn Shaikh 和 Keisi Lenz 的研究，通過對 142 名參與者的問卷調查，畫出的用戶對於搜索欄的期望位置。這一研究發現，搜索欄的最佳擺放位置是網站的左上角和右上角。這樣用戶通過"F-型"瀏覽模式可以輕易找到搜索欄。

富文本網站中突出顯示搜索功能
如果搜索功能是你的網站重要功能，顯著地顯示出來，因為這可以是用戶探索的最快路徑。
合理設計輸入欄尺寸
輸入框太窄是設計者的常犯錯誤。誠然，用戶可以在短文本框中輸入長文字，但是一次只能顯示部分文字。這固然是不好的設計，因為不能同一時刻顯示整個查詢條件。實際上，當搜索欄很短時，用戶被迫使用短小，模糊的查詢條件，因為搜索條件太長看不到。Nielsen Norman Group 推薦使用 27-字元輸入框，適用於 90% 的查詢。

在所有頁面放置搜索欄
在所有頁面放置搜索欄的好處是，當用戶不能定位他們想要查看的內容時，便會嘗試搜索功能，無論他們當時在頁面哪個地方。

Designing Individual Pages 設計獨立頁面

Content Strategy 內容策略

內容策略的重點在於頁面對象的設計。理解頁面目標，根據目標定位繪製頁面。

我們提出如下提高頁面內容理解的實踐技巧：

避免信息過載 信息過載是非常嚴重的問題，它阻礙了用戶交互和用戶決策，這是由於用戶感到信息量多到難以消化。減小信息過載有一些簡單的方法。最常用的方法便是組塊演算法 —— 分解內容為更小的內容塊，這有助於用戶更好地理解整個流程。結賬表單便是一個很好的例子。在同一時刻最多顯示五到七個輸入框，將整個結賬流程分解在不同頁面，漸進地按需展示欄位。

(圖片來源: Witteia) (點擊查看大圖)

避免生僻詞和專業術語 頁面上任意一個生僻難懂的術語都會激增用戶的認知負載。最安全的策略是將受眾定位所有階段用戶，選擇清晰易懂的詞語以適應不同類組的用戶。
長段落細分 對於信息過載這一點，除非網站定位主打內容消費，否則在設計時要盡量避免長段文字。舉例說明，如果你想寫個服務介紹或產品介紹，盡量一步一步來，慢慢展開細節。使用短小、視野內可見的模塊以讓用戶逐步探索。根據 Robert Gunning 的《看透商業評論編寫》，一句話字數最好在 20 個字以內。

(圖片來源： The Daily Rind)

避免所有字母大寫 英文內容中，全字母大寫的模式，僅適用於短小文字如縮略語或 Logo。避免對長單詞使用全大寫模式：段落、表格標註、錯誤提示、通知信息等。正如 Miles Tinker 的《字體的可讀性》所說，全字母大寫會使閱讀速度驟減，且多數讀者會感到全字母大寫的可讀性較低。

英文全大寫使讀者感到閱讀困難。

Page Structure 頁面結構

一個結構恰當的頁面會使用戶界面布局上的元素清晰。儘管我們沒有適用於所有場景的統一的尺寸標準，遵循下列幾個指導方針有助於設計一個靠譜的頁面結構：

使結構具有可預見性 設計要與用戶預期保持一致，在設計時考慮相似類型的網站，看看它們都使用了什麼元素，擺放在哪裡。盡量使用目標受眾熟悉的視覺模式。
使用網格布局 網格布局將頁面分割成幾個主要區塊，根據元素大小、位置定義元素之間的關係。使用網格布局，可以輕鬆的將眾多元素組合成高內聚型的布局。

網格和布局系統是設計屆的傳統，Adobe XD 的網格布局幫助設計稿適用於多種屏幕尺寸的設備並保持一致性，定製化網格系統以調整元素間比例。

使用低保真的線框稿圖避免雜亂 亂七八糟的雜項使界面超負荷難以理清。每個新增的按鈕，圖片，甚至文字都會增加頁面的複雜度。在使用真實元素構造頁面前，先畫簡單的線框原型並分析，刪除所有非必須元素。

使用 Adobe XD 繪製的低保真原型圖 (圖片來源： Tim Hykes) (點擊查看大圖)

Visual Hierarchy 視覺層級

人們通常更喜歡快速瀏覽頁面，而不是細細品味每一個細節。因此，當來訪者想找某個內容或者完成某個任務時，往往會掃視頁面尋找目標。此時，設計師對視覺層級關係的良好呈現就幫用戶了一個大忙。視覺層級特指：元素的展示方式能夠表現其重要程度。簡單來說就是，用戶第一眼該看哪兒，第二眼該看哪。一個好的視覺層級使頁面瀏覽更加便捷。

遵循本能的瀏覽布局 作為設計師，我們可以在很多方面操控用戶瀏覽頁面的焦點。為訪客的眼動設定正確的瀏覽路徑，我們可以遵循兩類本能的瀏覽布局：「F-形」布局和「Z-形」布局. 對於富文本頁面，如文章、搜索結果，「F-形」布局效果更好；「Z-形」布局更適用於非文本式頁面。

CNN 使用的「F-形」布局 (點擊查看大圖)

Basecamp 使用的「Z-形」布局 (點擊查看大圖)

重要元素視覺優先 使頁面標題、登錄表單、導航欄、這類重要內容成為焦點，供用戶更好地使用。

圖中 Learn More About Brains 按鈕（了解更多關於大腦產品）突出吸引用戶行為，突出顯示。(點擊查看大圖)

畫原型使視覺層級更清晰 原型設計（Mockup）幫助設計師通覽整個布局，看到頁面填充真實數據之後可能的樣子。而且，在原型中重組元素比開發過程中再重新排列要簡單得多。

使用 Adobe XD 設計原型。 (圖片來源： Coursetro) (點擊查看大圖)

Scrolling Behavior 滾動行為

很多網頁設計者有個固執的錯誤觀念：用戶不會使用滾動條。我再重申一次：如今，人人都會用滾動條!

提高網頁滾動體驗可以通過以下幾點：

鼓勵用戶的滾動行為 儘管用戶實際在頁面載入時就開始滾動滑輪，頁面頂端的內容同樣非常重要。頂端的內容限定了用戶對網站的印象和期望。用戶的確會向下拉滾動條，但僅僅會發生在非隱藏內容足夠吸引人。因而，記得將最引人注目的內容放在頁面頂端：
展示好的網站介紹. 優秀的網站簡介創造了良好的內容場景，回答用戶最初的疑問「這是幹什麼的網站？」
使用吸引人的影像 用戶會對相關的圖片影像特別感興趣。
固定導航欄 當你需要建一個長頁面時，記住：用戶需要有定位感（當前位置）和方向感（訪問其他路徑）。長頁面會使用戶有定位困難。當頁面很深時，如果下滑時頂部導航消失，用戶必須持續向上滑動返回頂端。顯然，粘性導航欄既可以顯示當前位置，又可以使屏幕長時間保持一致性。

滾動觸發的粘性導航欄 (圖片: Zenman)

載入新內容時提供視覺反饋 當網頁是動態載入時，視覺反饋異常重要（比如新聞流）。由於滾動時內容需要很快載入（不能超過 10 秒），你可以使用載入中動畫表示系統正在處理。

細節動畫（例：Tumblr的載入提示）告訴用戶更多內容正在載入。

不要綁架用戶的滾動行為 對滾動行為進行綁架最煩人了，由於這種行為從用戶手裡搶奪了控制權，使其對滾動行為無法預知。設計網站時，請讓用戶能夠主動控制瀏覽和滾動行為。

Tumbler 的註冊頁對用戶的滾動條進行綁架 (點擊查看大圖)

Content Loading 內容載入

內容載入得多說幾句才講得清楚些。儘管立即響應是最好的，但在某些場景下你的網站需要多點時間來為訪客傳遞內容。網路鏈接差會減慢反應速度，或者有些操作需要多點時間來完成。但是不論這些行為是由什麼原因造成的，網站必須看起來是快速響應的。

確保常態載入不需要過多時間 網站訪客的注意力範圍和耐心都較低。根據 Nielsen Norman Group 的研究，10 秒大概是用戶在同一任務上集中注意力的極限了。當訪客不得不等待網站載入時，他們會非常沮喪，如果響應速度不夠快用戶很可能馬上關窗口走人。
載入時顯示網頁骨架 許多網站使用進度條顯示數據載入進度。進度條背後的動機很好（提供視覺反饋），但有時適得其反。正如 Luke Wroblewski 提到的，「進度條從定義上就提示用戶一個事實：給我等著。就好像看著鐘錶滴答倒數 —— 當你等待時會感到時間過得更慢。進度條有一個很棒的替代元素：頁面框架。這些容器在本質上可看作是網站空白頁面的臨時版本，信息可以逐漸載入進容器。使用頁面框架替代進度條，設計師能聚焦用戶的注意力於實際的頁面載入，為之後將要載入的頁面搭建用戶的心理預期。而且這種方式給用戶創造了一種事件發生的很快的幻覺。因為信息是逐步載入顯示的，用戶在等待過程中能切身感到，網站正在一步步處理頁面並顯示。

Facebook 使用網站骨架，填充頁面時內容逐步載入。(點擊查看大圖)

Buttons 按鈕

按鈕在創建流暢的交互體驗中至關重要。基本實踐中值得注意以下幾點：

確保可點擊的元素看起來可以點擊 使用按鈕和其他交互元素時，需要考慮設計如何傳遞可用性信息。用戶如何將設計元素理解為按鈕？表單應當遵循如下功能：對象的表現形式反映了其使用方式。視覺元素看起來像鏈接或者按鈕，但實際上不能點擊（例如：下劃線文字不是鏈接、方形按鈕形狀但是不能點擊）諸如此類情況會困擾到用戶。

左上角的橙色框是按鈕嗎？不是，但其形狀和標籤讓它看起來像一個按鈕。 (點擊查看大圖)

基於實際用途命名按鈕 可交互的界面元素命名應該和它的實際用途一致，以符合用戶的期望。當用戶知道這個按鈕的作用時，會用起來更舒適。含糊的標籤例如「提交」，或者抽象的標籤例如下圖中的例子，都無法給用戶提供交互的有效信息。

別讓用戶對界面元素產生疑惑 (圖片來源： UX Matters)

設計按鈕時保持一致性 不論是否是下意識地，用戶都會記住網站的細節。當瀏覽網站時，他們會將特定形狀和功能聯繫到一起。因此，一致性不僅有利於設計美觀，且增強了用戶的熟悉感。下圖完美例證了這一點。在應用的同一模塊（例如系統工具欄）使用三種不同的形狀不僅很迷惑用戶，而且看起來很不專業。

Imagery 圖像化

俗話說得好，一張圖片勝過千言萬語。人類都是視覺動物，幾乎能夠瞬間處理視覺信息；我們所感知的 90% 的信息都是通過視覺傳達給大腦。圖像是捕捉用戶注意力以區分產品的最有力方式。相比於一段精心設計的文本，一張圖片能夠傳遞給讀者更多信息。而且，圖像能跨語言障礙，表達文字所不能表述的內容。

下列原則可以幫助你在網站設計中融入圖像元素：

確保圖像相關性 設計中最怕傳遞錯誤信息的圖像。選擇最符合你產品目標的圖像，確保它與上下文相關。

與主題無關的圖像引起用戶的困惑 (點擊查看大圖)

避免使用通用的人像 在設計中使用人臉是吸引用戶的有效方式。看到人臉能讓用戶感覺與他們聯繫在一起，而不僅僅是在銷售產品。然而，許多企業網站使用通用的照片來建立信任感是非常糟糕的。可用性測試表明這樣的照片很難增加設計的價值，反倒會使用戶體驗變差。

不真實的圖像給用戶帶來一種虛偽的感覺。 (點擊查看大圖)

使用高質量不失焦的圖片資源 網站使用資源質量很大程度上影響著用戶印象和對服務的期望。確保圖像大小在各平台合比例顯示。圖像不能出現像素化，因而要測試各種比例、各種解析度的設備。以原始的長寬比例顯示圖像。

低質量的照片 VS 高質量不失焦的圖片 (圖片來源： Adobe) (點擊查看大圖)

Video 視頻

隨著網速的提快，視頻越來越流行，尤其考慮到視頻延長了用戶停留時長. 如今視頻無處不在：PC 端，平板端，移動端。將視頻有效利用起來，它能最有效的吸引用戶 —— 視頻傳遞更多情感，更用心的帶給用戶產品服務體驗。

將視頻設置為默認靜音，用戶可以選擇性開啟音量 當用戶訪問一個頁面時，並沒有對聲音的預期。而且大多數用戶並不會使用耳機，這時他們會緊張的想要快點關閉聲音。甚至在大多數情況下，一聽到聲音立即關閉網站。

Facebook 的視頻會在用戶訪問時自動播放，除非用戶主動打開聲音，否則會默認靜音。(點擊查看大圖)

廣告視頻越短越好 根據 D-Mak Productions 的研究，短視頻對大多數用戶更有吸引力。因此，最好將商業視頻保持在兩到三分鐘的範圍內。

(圖片來源： Dmakproductions)

提供內容的其它展示方式 如果視頻是內容的唯一消費方式，這會限制到那些看不懂，聽不懂的用戶。建議提供字幕、完整的視頻文字版作為輔助選項。

字幕使用戶更易獲取視頻內容。 (圖片來源： TED) (點擊查看大圖)

Call-to-Action Buttons CTA 按鈕

召喚行動 Calls to action (CTA) 指的是引導用戶實現轉化率的按鈕。CTA 重點在於引導用戶執行我們期望的行為。常見的CTA的例如：

開始試用
立即下載查看
立即註冊獲取最新資訊
開始諮詢

設計 CTA 按鈕時需要考慮以下幾點：

尺寸 CTA 按鈕應該足夠大，稍遠距離也能看見；但又不能太大，會影響到用戶對其它內容的關注。想要確認 CTA 按鈕是該頁面上最顯著的元素，試一下五秒鐘測試法：瀏覽網頁五秒鐘，然後記錄下你還記得的內容。如果 CTA 被你記下來了，那它的大小合適~
視覺優先 CTA 按鈕的顏色很大程度上影響著用戶的注意力。通過顏色增加視覺衝擊力，可以讓某些按鈕比其他按鈕更突出。對比色非常適合用於 CTA，使其特別醒目。

火狐頁面上綠色的 CTA 按鈕非常醒目，立馬抓住用戶眼球。(點擊查看大圖)

對比空間 CTA 按鈕周圍的空間大小也很重要。白色（或對比色）的空間為按鈕創建了留白區域，將按鈕與界面中其他元素分割開。

舊版本的 Dropbox 主頁是使用對比空間來突出 CTA 的很好例證。深藍色的「免費註冊」CTA 按鈕與淡藍色的背景形成對比反差。(點擊查看大圖)

基於行為的文案 編寫吸引用戶行動的文案。以「開始」，「獲取」或「加入」這類動詞開頭。

Evernote 的 CTA 雖然常見但也最有效得傳達了行動。 (點擊查看大圖)

提示： 你可以通過模糊效果快速測試 CTA。模糊測試是判斷用戶的眼神是否會落在想要位置的最便捷方法。將網頁截圖在 Adobe XD 中應用模糊效果（參考下圖示例）。看看頁面的模糊版本，哪些元素會突出顯示？如果這不是你想要的效果，再次修改。

模糊測試是一種檢驗設計焦點和視覺層次的技術。(點擊查看大圖)

Web Forms 網頁表單

表單填寫是網頁最重要的互動類型之一。事實上，表單通常被認為是完成目標的最後一步。確保用戶可以快速填寫表單，不會出現疑問。表單就像是一個對話框：用戶和網站雙方之間應該有邏輯的溝通。

只問必須問的問題 只要求用戶填寫真正需要的內容。表單的任意一個額外欄位都會影響轉換率。每次都想清楚你為什麼需要這些信息，你將如何使用這些信息。
合理排列表單問題 表單上的問題應該從用戶視角出發，符合用戶邏輯。例如，在填寫名字之前先填寫地址就不合邏輯。
整合相關聯的欄位 將相關的欄位信息整理在同一個邏輯單元中。從一系列問題到下一系列問題的流程更像是一個對話。將相關欄位整合分組更有助於用戶理解信息。

將相關欄位整合在一起 (圖片來源: Nielsen Norman Group)

Animation 動畫

越來越多的設計師提倡動畫即功能來提升用戶體驗。動畫不再僅僅為了有趣，它是提高交互效率的重要工具之一。然而，動畫只有在合適的時間和場景下才能提升用戶體驗。好的交互動畫有這樣的目標：它是有意義的、功能性的。

以下是動畫提升用戶體驗的一些場景：

對用戶行為的視覺反饋 好的交互設計提供了視覺反饋。當你需要告知用戶操作的結果時，視覺反饋非常有效。如果操作執行失敗，動畫可以簡捷地為用戶提供反饋。例如，輸入密碼錯誤時可以使用搖動效果。這很好理解，搖動效果作為常用體勢，在人際溝通中普遍意味著「不」。

用戶看到動畫後，秒懂問題出在哪 (圖片來源： The Kinetic UI)

系統狀態的可見性Jakob Nielsen 的十大啟發式可用性中，系統狀態的可見性是用戶界面設計最重要的原則之一。用戶隨時隨地都想知道當前的位置，而不能讓他們一直猜測 —— 應用應該通過適當的視覺反饋告訴用戶現在的狀態。數據上傳和下載操作是功能性動畫的常見場景。例如，載入動畫顯示了任務的進度、處理的速度，並在用戶心中奠定了後續可能的處理速度。

(圖片來源： xjw)

導航式動畫 導航式動畫是指網站上各個狀態間的切換 —— 例如，從概述視圖到詳細視圖。狀態切換往往涉及到大面積場景更換，有時候用戶思維難以跟上。功能性動畫能簡化用戶對場景轉變過程的適應，在場景切換之間平滑過渡，並通過在場景的狀態變化中插入視覺連接來凸出變化所在。

(圖片來源： Ramotion)

品牌推廣 假設你有十幾個相同功能的網站，幫用戶完成相同任務。它們都能提供良好的用戶體驗，但用戶最喜歡的不僅僅是良好的用戶體驗。網站應該與用戶建立情感聯繫。此時品牌動畫在吸引用戶方面起著決定性作用。它會形成公司的品牌價值，突出產品優勢，使用戶真正感到愉悅，令人難忘。

(圖片來源： Heco)

移動端支持

如今，將近 50% 的用戶通過移動設備訪問網頁。這對網站設計師意味著什麼？這意味著我們設計的每一個頁面都必須支持移動端。

響應式網頁設計

針對不同的桌面瀏覽器、移動瀏覽器優化你的網站，每一平台的瀏覽器都有不同的屏幕解析度，技術支持和用戶基礎。

單欄布局目標 單欄布局通常在移動設備上效果很好。單欄布局不僅能有效應對小屏幕的有限空間，而且在不同解析度的設備上、橫豎屏模式中自如伸縮。
使用 Priority+ 模式優化斷點式導航欄 Priority+ 是 Michael Scharnagl 提出的術語，用來描述導航欄展示重要的導航選項，隱藏次要的導航選項於「更多」按鈕中。這種模式充分利用了可用的屏幕空間。當屏幕拉伸時，導航選項隨之增加，從而提高了網站的可視性和參與度。這種模式在多模塊富內容的網站尤為有效（例如新聞網站、大型電商網站）。圖例中衛報使用 Priority+ 模式進行模塊導航。次要選項僅在用戶點擊「All」按鈕時顯示。

衛報使用 Priority+ 模式進行模塊導航(圖片來源： Brad Frost)

確保圖像在多個設備端適應尺寸 網站必須完美適應於所有設備，適應不同解析度的屏幕、像素密度、放置方向。在設計者構建響應式網站時，主要挑戰之一便是圖像的管理適配與呈現。為了簡化這個任務，可以使用響應式圖片斷點生成器這類工具處理圖像。

響應式圖片斷點生成器可以管理適配多尺寸圖片，動態生成響應式圖片斷點。 (點擊查看大圖)

從滑鼠點擊到手勢

移動網頁端的交互是通過手指完成的，而非滑鼠點擊。這意味著設計觸碰對象和交互時要應對不同的規則。

合理設置交互對象尺寸 所有交互元素（鏈接、按鈕、菜單）都應該是可用手勢點擊的。PC 端網頁的交互區域（可點擊區域）小而精確，而移動端網頁需要較大較寬的按鈕，方便手指交互。如果你的網站需要大量手勢操作進行輸入，參考 MIT Touch Lab 的研究來為你的按鈕選擇適當的尺寸。研究發現手指面的平均尺寸在 10 到 14 毫米間，指尖在 8 到 10 毫米間，10 × 10 毫米是恰當的觸點尺寸。

小按鈕比大按鈕難點擊 (圖片來源： Apple)

交互需要更強烈的視覺標記 在移動端的網頁上，不存在懸停態。而在 PC 端，用戶可以將滑鼠懸浮在元素上獲得額外的視覺反饋，比如懸停展開下拉菜單。移動端用戶不得不點擊得到反饋。因此，用戶應該具有通過觀察來正確預判頁面元素行為的能力。

Accessibility 無障礙設計

如今的產品必須設計為可被所有人使用，無論用戶的是否有障礙。為障礙群體設計實際上是設計師培養同情心，試著以他人視角體驗世界的另一種方式。

Users With Poor Eyesight 弱視用戶

許多網站文本採用低對比度。雖然低對比度文本可能比較新潮，但也更加難閱讀難識別。低對比度內容使視力較低的用戶、對比度敏感用戶產生閱讀困難，

灰色文字在淺灰色北京下難以閱讀。當體驗很不好的時候，設計再好也毫無意義。(點擊查看大圖)

低對比度文字在 PC 端難以閱讀，移動端更是難上加難。想像下你走在烈日中，嘗試閱讀低對比度的文本。這提醒我們無障礙的視覺設計是能更好針對所有用戶的設計。

永遠不要為了美觀犧牲可用性。網站上文本和其他視覺元素最重要的特性就是可讀性。可讀性要求文本與背景有足夠對比。為了確保視覺障礙人士也能閱讀，W3C 網頁內容無障礙設計指南（WCAG）提出了建議對比度。建議對文本文字和圖像文字使用以下對比度：

字型大小較小的文本與背景的對比度至少為 4.5:1，最優對比度為 7:1。
字型大小較大的文本（18號字體、14號粗體以上）與背景的對比度至少為 3:1。

差的例子： 這幾行字不符合顏色建議對比度，在該背景下難以閱讀。

好的例子： 這幾行字元合顏色建議對比度，在該背景下清晰易讀。

你可以使用 WebAIM 的色彩對比度檢測快速得知是否在最佳視覺範圍內。

(點擊查看大圖)

Color Blind Users 色盲用戶

據估，全球 4.5% 人口為色盲（每 12 名男性中就有 1 名，每 200 名女性中有 1 名）。4% 人口為低視力（每 30 人中有 1 人），0.6% 為盲人（每 188 人中有 1 人）。我們很容易忽視為這些用戶群設計，因為大多數設計師都沒有經歷過這樣的問題。

為了讓這些用戶正常訪問，請避免使用顏色維度來傳達內容。正如 W3C 聲明所說，不應該使用顏色「作為唯一的視覺方式傳達信息，指定行為，提示回應，或區分視覺元素。

一個常見的例子：表單中用顏色作為唯一方式傳達警告信息。成功和錯誤消息分別以綠色和紅色表示。但是紅綠色盲是最常見的色盲群體 —— 對他們來說這些顏色很難分辨。你可能經常看到這樣的錯誤信息，比如「紅色標識區域為必填項」。雖然這看起來問題不大，但對色盲用戶來講，這種表單錯誤提示超煩。顏色應該被用來突出顯示或補充顯示可見信息。

不好的例子： 這種表單僅靠紅色和綠色來表示欄位是否有錯。色盲用戶是無法識別。

上表中，設計師應該給出更具體的提示，比如「您輸入的電子郵件地址無效」或者至少在需要注意的地方顯示圖標。

好的例子 圖標和文字標籤顯示哪些欄位無效，更好地將信息傳遞給色盲用戶。

Blind Users 盲人用戶

照片和插畫是網站用戶體驗的重要組成部分。但盲人用戶需要屏幕閱讀器等輔助技術來翻譯網站。屏幕閱讀器通過圖像的文本標註來「閱讀」圖片。如果沒有文本標註或者描述不夠清楚，他們將難以按照預期獲取信息。

考慮兩個例子 — 一個是 Threadless：一個流行 T 恤的電商網站。這個頁面並沒有太多在售商品的相關信息，唯一可見的文本信息是商品的價格和尺寸。

(點擊查看大圖)

第二個例子是 ASOS 網站。同樣是銷售T恤的網頁，它為商品提供了準確的文字表述。這有助於使用屏幕閱讀器的用戶想像商品的外觀。

為圖像創建解釋性文本時，請遵循以下指南：

所有「有含義的」圖像都需要描述性的替代文字。（「有含義的」圖片為信息傳達提供場景）
如果圖像僅僅是裝飾性效果，未提供幫助用戶理解頁面內容的有用信息，則文本描述並非必要。

Keyboard-Friendly Experience 鍵盤流用戶體驗

一些用戶使用鍵盤而非滑鼠瀏覽網站。例如，有運動障礙的用戶在使用滑鼠這類精細運動工具時有困難。可以為此類用戶簡化交互和網頁定位，通過將交互元素適配 Tab 鍵，並顯示鍵盤指示符。

鍵盤導航的基本規則如下：

檢查鍵盤指示符是否明顯可見 有些網頁設計師會刪除鍵盤指示符，因為他們覺得礙眼。但這阻礙了鍵盤用戶與網站的正常交互。如果您不喜歡瀏覽器提供的默認指示符，請別直接刪除; 而是通過設計來滿足你的品味。
所有交互元素都應該可以通過鍵盤訪問 鍵盤用戶應當可以訪問所有交互元素，而不是僅僅能使用導航欄和主要的 CTA 按鈕。

W3C 的 WAI-ARIA 創作實踐「設計模式和工具」章節，可以找到更多鍵盤交互的需求細節。

Testing 測試

Iterative Testing 迭代測試

測試是 UX 設計流中的重要一步。

如同設計周期的其它步驟一樣，它是迭代的過程，從早期開始收集反饋，自始至終進行迭代。

(圖片來源： Extreme Uncertainty) (點擊查看大圖)

Test Page-Loading Time 網頁載入時間測試

用戶很討厭載入緩慢的網頁，正因如此，響應時間是現代網站的關鍵因素。根據 Nielsen Norman Group 的研究，主要有三大響應時間界線：

0.1 秒 對用戶來說是瞬間。
1 秒 短短一秒對用戶認知流幾乎無縫，但還是會感到一絲延遲。
10 秒 這幾乎是用戶注意力的極限了，10 秒的延遲通常會逼走用戶馬上關閉頁面。

顯然，我們不能讓用戶為了任何事務等待 10 秒之久。但即便是幾秒的延遲（實際上經常發生），也會降低用戶體驗。用戶會因為等待操作而惱怒。

通常是什麼導致載入緩慢呢？

繁重的內容對象（例如嵌入視頻或是幻燈片控制項）
未經優化的後台代碼
硬體問題（基礎設施不足以支持快速操作）

諸如 PageSpeed Insights 類的工具能幫助你找到載入速度過慢的原因。

A/B Testing A/B 測試

A/B 測試適用於：當你糾結於兩個版本的設計（比如現有版本和重新設計的版本）。這種測試方法包含：對相同數量的兩類用戶隨機顯示兩個版本，然後對數據進行分析，查看哪個版本更有效地實現目標。

(圖片來源： VWO)

Developer Handoff 開發者交接

UX 設計流程包含兩個重要的步驟：原型設計工作、解決方案的開發。兩步之間的銜接可以稱作為交接（handoff）。當設計到最後階段，準備投入開發時，設計師準備設計規範，也就是設計實現的文檔描述。設計規範確保設計稿會遵循原始意向進行開發工作。

設計規範的精度十分重要 如果存在不精準的設計規範，開發者在網站開發階段要麼邊猜邊做，要麼回來找設計師尋找答案。但是手工填寫設計規範非常頭疼，取決於設計的複雜性，這通常需要大量時間成本。

Adobe XD 的設計規格功能（測試版）可以發布公開訪問的 URL 供開發工程師檢查工作流。設計師不再需要花費大量時間創作設計規範，與程序員溝通元素位置，字體樣式。

Adobe XD 的設計規格功能（測試版）

結語

與任何方面的設計一樣，這裡的建議都只是一個開始。將這些想法與你的實踐相結合以達到最好的效果。把你的網站看作是一個循序漸進的項目，使用分析手段和用戶反饋逐步改善體驗。記住：設計並不是為了設計師而設計 —— 為用戶而設計。

這篇文章是由 Adobe 贊助的 UX 設計系列其中一篇。Adobe XD 工具是志於快速流暢的 UX 設計流，幫你快速由想法到實現原型。設計，原型，分享 —— 只需一個應用。點擊Adobe XD on Behance查看更多使用 Adobe XD 創作出得靈性作品，註冊 Adobe experience design newsletter 接收最新 UX/UI 設計趨勢和靈感。

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