[譯] 網站設計綜合指南

時間 2019-11-16

原文原文鏈接

原文地址：A Comprehensive Guide To Web Design

原文做者：Nick Babich

譯文出自：掘金翻譯計劃

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

譯者：horizon13th

校對者：pot-code

摘要php

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

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

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 中應用模糊效果（參考下圖示例）。看看頁面的模糊版本，哪些元素會突出顯示？若是這不是你想要的效果，再次修改。

模糊測試是一種檢驗設計焦點和視覺層次的技術。([點擊查看大圖](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 設計趨勢和靈感。