[譯] 網站設計綜合指南

horizon13th發表於2018-01-14

原文地址：A Comprehensive Guide To Web Design

原文作者：Nick Babich

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：horizon13th

校對者：pot-code

摘要

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

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

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 重點在於引導使用者執行我們期望的行為。常見的C他的例如：

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

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

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

火狐頁面上綠色的 CTA 按鈕非常醒目，立馬抓住使用者眼球。(點選檢視大圖)

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

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

基於行為的文案 編寫吸引使用者行動的文案。以“開始”，“獲取”或“加入”這類動詞開頭。

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

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

模糊測試是一種檢驗設計焦點和視覺層次的技術。([點選檢視大圖](https://www.smashingmagazine.com/wp-content/uploads/2017/11/02-A-Comprehensive-Guide-to-Web-Design-large-opt.png))

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

［譯］網站設計綜合指南
2018-01-14
網站
IT招聘網站（程式設計師跳槽指南）
2018-12-27
網站程式設計師
[譯] 網站優化初學者指南
2019-01-21
網站優化
想入門設計卷積神經網路？這是一份綜合設計指南
2018-05-13
卷積神經網路
新手網站建設指南（2）
2018-12-26
網站
網站綜合例項(轉)
2007-08-11
網站
網站綜合例項 (轉)
2008-03-07
網站
[譯] 設計師裝腔指南
2017-05-12
Fixel設計-贛州網站建設-贛州網站設計
2019-05-11
網站
[譯]一份開發寫給非設計師的網頁設計指南
2018-08-18
網頁
Joomla網站設計
2017-10-20
OOM網站
[譯] 快速原型設計的新手指南
2018-12-28
原型
嵌入式學習網站綜合
2012-03-20
學習網站
[譯] 設計作品集網站的真正角色是什麼？
2019-01-08
網站
品牌VI設計與網站設計
2017-07-28
網站
網站建設和網站設計有哪些關聯？
2021-01-07
網站
網站建設-如何才能設計好一個網站
2011-09-03
網站
網站設計要點
2020-04-07
網站
網站架構設計
2019-03-07
網站架構
Ic設計網站大全
2012-08-26
網站
綜合Twitter、Github等各大網站API設計經驗：RESTful API實用設計與最佳實踐 - Vinay Sahni
2019-12-15
Github網站APIREST
兩岸網站大全：程式設計網站大全
2010-09-22
網站程式設計
網站設計：600個經典網站... (轉)
2007-08-16
網站
photoshop網頁設計教程網站
2019-05-11
網頁網站
如何修改Dedecms網站，Dedecms網站修改指南
2024-11-07
網站
專業建站網站網站建設網站開發官網開發網頁設計網頁
2024-04-07
網站網頁
網站建設網頁設計小技巧分享
2020-12-28
網站網頁
[譯] iPhone X 網頁設計
2017-10-17
iPhone網頁
設計不錯的網站
2016-09-21
網站
設計師資源網站
2017-10-11
網站
程式設計師最佳網站
2018-06-13
程式設計師網站
網站互動設計模式
2012-07-30
網站設計模式
設計一個入口網站
2013-05-08
網站
ROI Media:反思網站設計
2012-02-22
網站
[譯] 色彩無障礙性產品設計指南
2019-01-02
公司網站建設設計基本技巧
2020-12-04
網站
網站建設前要注意這些網站設計誤區可能會毀了網站
2017-06-08
網站
[譯] HTTP/2 下提高網站載入速度的資源打包指南
2017-10-30
HTTP網站