[譯]網(wǎng)站設(shè)計綜合指南
時間：2022-08-14 20:27:01 | 來源：網(wǎng)站運營
時間：2022-08-14 20:27:01 來源：網(wǎng)站運營
原文地址：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
網(wǎng)站設(shè)計綜合指南
摘要網(wǎng)站設(shè)計往往是個棘手的問題。在設(shè)計網(wǎng)站時，設(shè)計師和開發(fā)者往往需要考慮很多要素，從視覺表現(xiàn)（網(wǎng)頁看起來如何）到功能設(shè)計（網(wǎng)站用起來如何）。為了細化網(wǎng)站設(shè)計任務(wù)，我們?yōu)樽x者呈上此文。
本文將著重講述設(shè)計主旨，設(shè)計啟發(fā)，設(shè)計方法，為你的網(wǎng)站打造更好的用戶體驗。我們從大方向著手，例如用戶旅程（怎樣定義網(wǎng)站“骨架”），細化到單一頁面（網(wǎng)頁設(shè)計需要考慮什么）。同時我們也會提及其他的設(shè)計要素，例如移動端支持與測試。
目錄
設(shè)計用戶旅程 Designing The User Journey- 信息架構(gòu) Information Architecture
- 全局導(dǎo)航 Global Navigation
- 鏈接與菜單項 Links and Navigation Options
- 瀏覽器的“后退”按鈕 “Back” Button in Browser
- 面包屑導(dǎo)航 Breadcrumbs
- 搜索欄 Search
設(shè)計獨立頁面 Designing Individual Pages- 內(nèi)容策略 Content Strategy
- 頁面結(jié)構(gòu) Page Structure
- 視覺層級 Visual Hierarchy
- 滾動行為 Scrolling Behavior
- 內(nèi)容加載 Content Loading
- 按鈕 Buttons
- 圖像 Imagery
- 視頻 Video
- CTA 按鈕 Call-to-Action Buttons
- 網(wǎng)頁表單 Web Forms
- 動畫 Animation
移動端支持 Mobile Considerations- 響應(yīng)式網(wǎng)頁設(shè)計 Practice Responsive Web Design
- 從鼠標點擊到手勢 Going From Clickable to Tappable
無障礙設(shè)計 Accessibility- 弱視用戶 Users With Poor Eyesight
- 色盲用戶 Color Blind Users
- 盲人用戶 Blind Users
- 鍵盤流用戶體驗 Keyboard-Friendly Experience
測試 Testing- 迭代測試 Iterative Testing
- 網(wǎng)頁加載時間測試 Test Page-Loading Time
- A/B 測試 A/B Testing
開發(fā)者交接結(jié)語Designing The User Journey 設(shè)計用戶旅程
Information Architecture 信息架構(gòu)
“信息架構(gòu)”（IA）這個術(shù)語通常被誤用來表示網(wǎng)站的目錄結(jié)構(gòu)。但其實這是不正確的，盡管網(wǎng)站菜單是信息架構(gòu)的一部分，但它也僅僅是一個方面。
信息架構(gòu)指，將信息以清晰邏輯的方式組織。這種結(jié)果遵循一個目標：
幫助用戶在復(fù)雜信息集合中導(dǎo)航。好的信息架構(gòu)提供了與用戶預(yù)期一致的層級結(jié)構(gòu)。然而優(yōu)秀的層級結(jié)構(gòu)，直觀的導(dǎo)航都不是偶然出現(xiàn)的，而是用戶調(diào)研和用戶測試的結(jié)果。
調(diào)研用戶需求的方法眾多。通常來說，信息架構(gòu)多用于用戶調(diào)研（如用戶訪談，卡片分類法）：調(diào)研人員傾聽用戶期望，觀察潛在用戶如何將復(fù)雜的信息組進行歸類。信息架構(gòu)同樣需要可用性測試的結(jié)果，來看用戶是否可以方便地導(dǎo)航。
卡片分類法簡單實操，志于幫設(shè)計人員弄清：如何最優(yōu)地基于用戶輸入將內(nèi)容組織分類。信息架構(gòu)與卡片分類法相似，都能典型地呈現(xiàn)出清晰的模式。（圖片來源： FosterMilo）
在設(shè)計網(wǎng)頁界面前，往往要進行例行步驟：設(shè)計者基于用戶訪談設(shè)計網(wǎng)站導(dǎo)航結(jié)構(gòu)，用卡片分類法測試該結(jié)構(gòu)是否符合用戶的思維模式，用戶體驗研究者用“樹形測試法”對導(dǎo)航結(jié)構(gòu)進行驗證。
樹形測試法能夠可靠地驗證，用戶能否根據(jù)現(xiàn)有目錄結(jié)構(gòu)進行導(dǎo)航。
（圖片來源: Nielsen Norman Group) (點擊查看大圖)
Global Navigation 全局導(dǎo)航
導(dǎo)航是可用性的基石。如果用戶在網(wǎng)站中難以定位，無所適從，網(wǎng)站再怎么好也沒用。網(wǎng)站導(dǎo)航設(shè)計需要遵從下列原則：
- 簡易性 導(dǎo)航應(yīng)以這樣的方式設(shè)計，訪問者到達目的地點擊次數(shù)越少越好。
- 清晰性 用戶不需要猜測導(dǎo)航選項的含義，每一個菜單項對于來訪者來說不言自明。
- 一致性 對于整個網(wǎng)站的所有頁面，導(dǎo)航體系必須統(tǒng)一。
設(shè)計導(dǎo)航時需要考慮如下幾點：
- 根據(jù)用戶需求選擇導(dǎo)航模式 導(dǎo)航設(shè)計必須遵循主流用戶的需求。目標用戶群期望某種特定類型的網(wǎng)站交互，那就以你獨到的方式，讓用戶滿足預(yù)期吧～例如：如果大部分用戶都不知道漢堡包圖標是啥意思，就避免使用該圖標展示導(dǎo)航。
- 將導(dǎo)航選項區(qū)分優(yōu)先次序 有一種簡單的方法來區(qū)分導(dǎo)航選項優(yōu)先級：將用戶行為任務(wù)按照不同優(yōu)先級排序（高級，中級，低級），然后在布局中突出顯示高優(yōu)先級的用戶行為路徑，以及被頻繁訪問的節(jié)點。
- 使重要選項可見 正如 Jakob Nielsen 所言，識別出某事比回憶起某事容易。為了減小用戶記憶負擔(dān)，將所有重要菜單項設(shè)為一直可見。這些最重要的菜單項應(yīng)該一直可用，而不僅在我們預(yù)期用戶需要的時候展現(xiàn)。
- 傳達當(dāng)前位置信息 “我在哪”是用戶進行有效導(dǎo)航時需要回答的最基本問題。許多網(wǎng)站有此常見錯誤：不顯示用戶的當(dāng)前位置，因而如何定位的問題也值得深究。
Links and Navigation Options 鏈接與菜單項
鏈接、菜單項是導(dǎo)航過程中的要素，直接作用于用戶旅程，這些交互元素遵循下列規(guī)律：
- 區(qū)別站內(nèi)鏈接與外部鏈接 用戶期望站內(nèi)鏈接和外部鏈接為不同的交互行為。所有內(nèi)部鏈接應(yīng)當(dāng)在當(dāng)前標簽頁打開，這樣用戶便可以在當(dāng)前窗口使用“后退”按鈕。如果決定在新窗口打開外部鏈接，應(yīng)當(dāng)在自動打開新標簽頁／新窗口前提醒用戶。這可能需要聲明（在新窗口打開），將其以文本的形式添加到鏈接文本中。
- 標記已經(jīng)訪問過的頁面 如果訪問過的鏈接沒有修改顏色標記，用戶很可能無意中重復(fù)訪問。
用戶通過顏色標記，識別出曾訪問過的頁面，避免無意重復(fù)訪問同一頁面。
- 認真核實所有鏈接 當(dāng)用戶點擊鏈接卻返回 404 錯誤時，會極其不爽。當(dāng)訪問者瀏覽內(nèi)容時，期望所有的鏈接都指向鏈接所指，而不是其它不相關(guān)頁面，更不能容忍 404 頁面。
“Back” Button in Browser 瀏覽器的“后退”按鈕
后退按鈕是瀏覽器上第二重要的界面控制（僅次于最最重要的 URL 地址欄），要確認“后退”按鈕符合用戶預(yù)期。當(dāng)用戶跟著鏈接來到某頁面，然后點擊“后退”鍵時，他們期望恰好返回到前一網(wǎng)頁的離開的位置。
尤其要避免點擊“后退”按鈕卻回到了原頁面頂端的情況。失去用戶原先的焦點會使用戶被迫重復(fù)瀏覽已讀內(nèi)容。由于沒有恰好“后退”原位，用戶會迅速失去耐心。
Breadcrumbs 面包屑導(dǎo)航
面包屑導(dǎo)航是系列鏈接的集合，用于索引網(wǎng)站的當(dāng)前位置。它是一種次級定位規(guī)則，常用于顯示用戶當(dāng)前在網(wǎng)站的位置。
雖然該元素不需要過多解釋，有幾點還是值得注意：
- 不要使用面包屑作為主導(dǎo)航的替代品 主導(dǎo)航是引導(dǎo)用戶的主導(dǎo)元素，然而面包屑只是支持元素。使用面包屑而非其他元素作為主導(dǎo)航，通常意味著導(dǎo)航設(shè)計較差。
- 使用箭頭作為分隔符，而非斜杠。清晰分離導(dǎo)航層級 推薦使用大于號（>）或右箭頭（→），因為此類符號包含方向信息。不推薦在電商網(wǎng)站中使用左斜杠（／）作為分隔符。如果你非要用的話，請確保商品類別不包含斜杠。
此面包屑的層級關(guān)系簡直難以分辨 (點擊查看大圖)
Search 搜索欄
有些用戶為了某特定目標訪問網(wǎng)站，他們并不想使用導(dǎo)航功能。此時用戶只想在搜索欄輸入文字，提交搜索查詢，返回他們尋找的頁面。
設(shè)計搜索欄時考慮下列基本規(guī)則：
- 將搜索欄放在用戶所期望的地方 下圖是基于 A. Dawn Shaikh 和 Keisi Lenz 的研究，通過對 142 名參與者的問卷調(diào)查，畫出的用戶對于搜索欄的期望位置。這一研究發(fā)現(xiàn)，搜索欄的最佳擺放位置是網(wǎng)站的左上角和右上角。這樣用戶通過"F-型"瀏覽模式可以輕易找到搜索欄。
- 富文本網(wǎng)站中突出顯示搜索功能
如果搜索功能是你的網(wǎng)站重要功能，顯著地顯示出來，因為這可以是用戶探索的最快路徑。 - 合理設(shè)計輸入欄尺寸
輸入框太窄是設(shè)計者的常犯錯誤。誠然，用戶可以在短文本框中輸入長文字，但是一次只能顯示部分文字。這固然是不好的設(shè)計，因為不能同一時刻顯示整個查詢條件。實際上，當(dāng)搜索欄很短時，用戶被迫使用短小，模糊的查詢條件，因為搜索條件太長看不到。Nielsen Norman Group 推薦使用 27-字符輸入框 ，適用于 90% 的查詢。
- 在所有頁面放置搜索欄
在所有頁面放置搜索欄的好處是，當(dāng)用戶不能定位他們想要查看的內(nèi)容時，便會嘗試搜索功能，無論他們當(dāng)時在頁面哪個地方。
Designing Individual Pages 設(shè)計獨立頁面
Content Strategy 內(nèi)容策略
內(nèi)容策略的重點在于頁面對象的設(shè)計。理解頁面目標，根據(jù)目標定位繪制頁面。
我們提出如下提高頁面內(nèi)容理解的實踐技巧：
- 避免信息過載 信息過載是非常嚴重的問題，它阻礙了用戶交互和用戶決策，這是由于用戶感到信息量多到難以消化。減小信息過載有一些簡單的方法。最常用的方法便是組塊算法 —— 分解內(nèi)容為更小的內(nèi)容塊，這有助于用戶更好地理解整個流程。結(jié)賬表單便是一個很好的例子。在同一時刻最多顯示五到七個輸入框，將整個結(jié)賬流程分解在不同頁面，漸進地按需展示字段。
(圖片來源: Witteia) (點擊查看大圖)
- 避免生僻詞和專業(yè)術(shù)語 頁面上任意一個生僻難懂的術(shù)語都會激增用戶的認知負載。最安全的策略是將受眾定位所有階段用戶，選擇清晰易懂的詞語以適應(yīng)不同類組的用戶。
- 長段落細分 對于信息過載這一點，除非網(wǎng)站定位主打內(nèi)容消費，否則在設(shè)計時要盡量避免長段文字。舉例說明，如果你想寫個服務(wù)介紹或產(chǎn)品介紹，盡量一步一步來，慢慢展開細節(jié)。使用短小、視野內(nèi)可見的模塊以讓用戶逐步探索。根據(jù) Robert Gunning 的《看透商業(yè)評論編寫》，一句話字數(shù)最好在 20 個字以內(nèi)。
(圖片來源： The Daily Rind)
- 避免所有字母大寫 英文內(nèi)容中，全字母大寫的模式，僅適用于短小文字如縮略語或 Logo。避免對長單詞使用全大寫模式：段落、表格標注、錯誤提示、通知信息等。正如 Miles Tinker 的 《字體的可讀性》所說，全字母大寫會使閱讀速度驟減，且多數(shù)讀者會感到全字母大寫的可讀性較低。
英文全大寫使讀者感到閱讀困難。
Page Structure 頁面結(jié)構(gòu)
一個結(jié)構(gòu)恰當(dāng)?shù)捻撁鏁褂脩艚缑娌季稚系脑厍逦?。盡管我們沒有適用于所有場景的統(tǒng)一的尺寸標準，遵循下列幾個指導(dǎo)方針有助于設(shè)計一個靠譜的頁面結(jié)構(gòu)：
- 使結(jié)構(gòu)具有可預(yù)見性 設(shè)計要與用戶預(yù)期保持一致，在設(shè)計時考慮相似類型的網(wǎng)站，看看它們都使用了什么元素，擺放在哪里。盡量使用目標受眾熟悉的視覺模式。
- 使用網(wǎng)格布局 網(wǎng)格布局將頁面分割成幾個主要區(qū)塊，根據(jù)元素大小、位置定義元素之間的關(guān)系。使用網(wǎng)格布局，可以輕松的將眾多元素組合成高內(nèi)聚型的布局。
網(wǎng)格和布局系統(tǒng)是設(shè)計屆的傳統(tǒng)，Adobe XD 的網(wǎng)格布局幫助設(shè)計稿適用于多種屏幕尺寸的設(shè)備并保持一致性，定制化網(wǎng)格系統(tǒng)以調(diào)整元素間比例。
- 使用低保真的線框稿圖避免雜亂 亂七八糟的雜項使界面超負荷難以理清。每個新增的按鈕，圖片，甚至文字都會增加頁面的復(fù)雜度。在使用真實元素構(gòu)造頁面前，先畫簡單的線框原型并分析，刪除所有非必須元素。
使用 Adobe XD 繪制的低保真原型圖 (圖片來源： Tim Hykes) (點擊查看大圖)
Visual Hierarchy 視覺層級
人們通常更喜歡快速瀏覽頁面，而不是細細品味每一個細節(jié)。因此，當(dāng)來訪者想找某個內(nèi)容或者完成某個任務(wù)時，往往會掃視頁面尋找目標。此時，設(shè)計師對視覺層級關(guān)系的良好呈現(xiàn)就幫用戶了一個大忙。視覺層級特指：元素的展示方式能夠表現(xiàn)其重要程度。簡單來說就是，用戶第一眼該看哪兒，第二眼該看哪。一個好的視覺層級使頁面瀏覽更加便捷。
- 遵循本能的瀏覽布局 作為設(shè)計師，我們可以在很多方面操控用戶瀏覽頁面的焦點。為訪客的眼動設(shè)定正確的瀏覽路徑，我們可以遵循兩類本能的瀏覽布局：“F-形”布局 和 “Z-形”布局. 對于富文本頁面，如文章、搜索結(jié)果，“F-形”布局效果更好；“Z-形”布局更適用于非文本式頁面。
CNN 使用的“F-形”布局 (點擊查看大圖)
Basecamp 使用的“Z-形”布局 (點擊查看大圖)
- 重要元素視覺優(yōu)先 使頁面標題、登錄表單、導(dǎo)航欄、這類重要內(nèi)容成為焦點，供用戶更好地使用。
圖中 Learn More About Brains 按鈕（了解更多關(guān)于大腦產(chǎn)品）突出吸引用戶行為，突出顯示。(點擊查看大圖)
- 畫原型使視覺層級更清晰 原型設(shè)計（Mockup）幫助設(shè)計師通覽整個布局，看到頁面填充真實數(shù)據(jù)之后可能的樣子。而且，在原型中重組元素比開發(fā)過程中再重新排列要簡單得多。
使用 Adobe XD 設(shè)計原型。 (圖片來源： Coursetro) (點擊查看大圖)
Scrolling Behavior 滾動行為
很多網(wǎng)頁設(shè)計者有個固執(zhí)的錯誤觀念：用戶不會使用滾動條。我再重申一次：如今，人人都會用滾動條!
提高網(wǎng)頁滾動體驗可以通過以下幾點：
- 鼓勵用戶的滾動行為 盡管用戶實際在頁面加載時就開始滾動滑輪，頁面頂端的內(nèi)容同樣非常重要。頂端的內(nèi)容限定了用戶對網(wǎng)站的印象和期望。用戶的確會向下拉滾動條，但僅僅會發(fā)生在非隱藏內(nèi)容足夠吸引人。因而，記得將最引人注目的內(nèi)容放在頁面頂端：
- 展示好的網(wǎng)站介紹. 優(yōu)秀的網(wǎng)站簡介創(chuàng)造了良好的內(nèi)容場景，回答用戶最初的疑問“這是干什么的網(wǎng)站？”
- 使用吸引人的影像 用戶會對相關(guān)的圖片影像特別感興趣。
- 固定導(dǎo)航欄 當(dāng)你需要建一個長頁面時，記?。河脩粜枰卸ㄎ桓校ó?dāng)前位置）和方向感（訪問其他路徑）。長頁面會使用戶有定位困難。當(dāng)頁面很深時，如果下滑時頂部導(dǎo)航消失，用戶必須持續(xù)向上滑動返回頂端。 顯然， 粘性導(dǎo)航欄 既可以顯示當(dāng)前位置，又可以使屏幕長時間保持一致性。
滾動觸發(fā)的粘性導(dǎo)航欄 (圖片: Zenman)
- 加載新內(nèi)容時提供視覺反饋 當(dāng)網(wǎng)頁是動態(tài)加載時，視覺反饋異常重要（比如新聞流）。由于滾動時內(nèi)容需要很快加載（不能超過 10 秒 ），你可以使用加載中動畫表示系統(tǒng)正在處理。
細節(jié)動畫（例：Tumblr的加載提示）告訴用戶更多內(nèi)容正在加載。
- 不要綁架用戶的滾動行為 對滾動行為進行綁架最煩人了，由于這種行為從用戶手里搶奪了控制權(quán)，使其對滾動行為無法預(yù)知。設(shè)計網(wǎng)站時，請讓用戶能夠主動控制瀏覽和滾動行為。
Tumbler 的注冊頁對用戶的滾動條進行綁架 (點擊查看大圖)
Content Loading 內(nèi)容加載
內(nèi)容加載得多說幾句才講得清楚些。盡管立即響應(yīng)是最好的，但在某些場景下你的網(wǎng)站需要多點時間來為訪客傳遞內(nèi)容。網(wǎng)絡(luò)鏈接差會減慢反應(yīng)速度，或者有些操作需要多點時間來完成。但是不論這些行為是由什么原因造成的，網(wǎng)站必須看起來是快速響應(yīng)的。
- 確保常態(tài)加載不需要過多時間 網(wǎng)站訪客的注意力范圍和耐心都較低。根據(jù) Nielsen Norman Group 的研究，10 秒大概是用戶在同一任務(wù)上集中注意力的極限了。當(dāng)訪客不得不等待網(wǎng)站加載時，他們會非常沮喪，如果響應(yīng)速度不夠快用戶很可能馬上關(guān)窗口走人。
- 加載時顯示網(wǎng)頁骨架 許多網(wǎng)站使用進度條顯示數(shù)據(jù)加載進度。進度條背后的動機很好（提供視覺反饋），但有時適得其反。正如 Luke Wroblewski 提到的，“進度條從定義上就提示用戶一個事實：給我等著。就好像看著鐘表滴答倒數(shù) —— 當(dāng)你等待時會感到時間過得更慢。進度條有一個很棒的替代元素：頁面框架。這些容器在本質(zhì)上可看作是網(wǎng)站空白頁面的臨時版本，信息可以逐漸加載進容器。使用頁面框架替代進度條，設(shè)計師能聚焦用戶的注意力于實際的頁面加載，為之后將要加載的頁面搭建用戶的心理預(yù)期。而且這種方式給用戶創(chuàng)造了一種事件發(fā)生的很快的幻覺。因為信息是逐步加載顯示的，用戶在等待過程中能切身感到，網(wǎng)站正在一步步處理頁面并顯示。
Facebook 使用網(wǎng)站骨架，填充頁面時內(nèi)容逐步加載。(點擊查看大圖)
Buttons 按鈕
按鈕在創(chuàng)建流暢的交互體驗中至關(guān)重要?；緦嵺`中值得注意以下幾點：
- 確?？牲c擊的元素看起來可以點擊 使用按鈕和其他交互元素時，需要考慮設(shè)計如何傳遞可用性信息。用戶如何將設(shè)計元素理解為按鈕？表單應(yīng)當(dāng)遵循如下功能：對象的表現(xiàn)形式反映了其使用方式。視覺元素看起來像鏈接或者按鈕，但實際上不能點擊（例如：下劃線文字不是鏈接、方形按鈕形狀但是不能點擊）諸如此類情況會困擾到用戶。
左上角的橙色框是按鈕嗎？ 不是，但其形狀和標簽讓它看起來像一個按鈕。 (點擊查看大圖)
- 基于實際用途命名按鈕 可交互的界面元素命名應(yīng)該和它的實際用途一致，以符合用戶的期望。當(dāng)用戶知道這個按鈕的作用時，會用起來更舒適。含糊的標簽例如“提交”，或者抽象的標簽例如下圖中的例子，都無法給用戶提供交互的有效信息。
別讓用戶對界面元素產(chǎn)生疑惑 (圖片來源： UX Matters)
- 設(shè)計按鈕時保持一致性 不論是否是下意識地，用戶都會記住網(wǎng)站的細節(jié)。當(dāng)瀏覽網(wǎng)站時，他們會將特定形狀和功能聯(lián)系到一起。因此，一致性不僅有利于設(shè)計美觀，且增強了用戶的熟悉感。下圖完美例證了這一點。在應(yīng)用的同一模塊（例如系統(tǒng)工具欄）使用三種不同的形狀不僅很迷惑用戶，而且看起來很不專業(yè)。
Imagery 圖像化
俗話說得好，一張圖片勝過千言萬語。人類都是視覺動物，幾乎能夠瞬間處理視覺信息；我們所感知的 90% 的信息 都是通過視覺傳達給大腦。圖像是捕捉用戶注意力以區(qū)分產(chǎn)品的最有力方式。相比于一段精心設(shè)計的文本，一張圖片能夠傳遞給讀者更多信息。而且，圖像能跨語言障礙，表達文字所不能表述的內(nèi)容。
下列原則可以幫助你在網(wǎng)站設(shè)計中融入圖像元素：
- 確保圖像相關(guān)性 設(shè)計中最怕傳遞錯誤信息的圖像。選擇最符合你產(chǎn)品目標的圖像，確保它與上下文相關(guān)。
與主題無關(guān)的圖像引起用戶的困惑 (點擊查看大圖)
- 避免使用通用的人像 在設(shè)計中使用人臉是吸引用戶的有效方式?？吹饺四樐茏層脩舾杏X與他們聯(lián)系在一起，而不僅僅是在銷售產(chǎn)品。然而，許多企業(yè)網(wǎng)站使用通用的照片來建立信任感是非常糟糕的。可用性測試表明這樣的照片很難增加設(shè)計的價值，反倒會使用戶體驗變差。
不真實的圖像給用戶帶來一種虛偽的感覺。 (點擊查看大圖)
- 使用高質(zhì)量不失焦的圖片資源 網(wǎng)站使用資源質(zhì)量很大程度上影響著用戶印象和對服務(wù)的期望。確保圖像大小在各平臺合比例顯示。圖像不能出現(xiàn)像素化，因而要測試各種比例、各種分辨率的設(shè)備。以原始的長寬比例顯示圖像。
低質(zhì)量的照片 VS 高質(zhì)量不失焦的圖片 (圖片來源： Adobe) (點擊查看大圖)
Video 視頻
隨著網(wǎng)速的提快，視頻越來越流行，尤其考慮到視頻延長了用戶停留時長. 如今視頻無處不在：PC 端，平板端，移動端。將視頻有效利用起來，它能最有效的吸引用戶 —— 視頻傳遞更多情感，更用心的帶給用戶產(chǎn)品服務(wù)體驗。
- 將視頻設(shè)置為默認靜音，用戶可以選擇性開啟音量 當(dāng)用戶訪問一個頁面時，并沒有對聲音的預(yù)期。而且大多數(shù)用戶并不會使用耳機，這時他們會緊張的想要快點關(guān)閉聲音。甚至在大多數(shù)情況下，一聽到聲音立即關(guān)閉網(wǎng)站。
Facebook 的視頻會在用戶訪問時自動播放，除非用戶主動打開聲音，否則會默認靜音。(點擊查看大圖)
- 廣告視頻越短越好 根據(jù) D-Mak Productions 的研究，短視頻對大多數(shù)用戶更有吸引力。因此，最好將商業(yè)視頻保持在兩到三分鐘的范圍內(nèi)。
(圖片來源： Dmakproductions)
- 提供內(nèi)容的其它展示方式 如果視頻是內(nèi)容的唯一消費方式，這會限制到那些看不懂，聽不懂的用戶。建議提供字幕、完整的視頻文字版作為輔助選項。
字幕使用戶更易獲取視頻內(nèi)容。 (圖片來源： TED) (點擊查看大圖)
Call-to-Action Buttons CTA 按鈕
召喚行動 Calls to action (CTA) 指的是引導(dǎo)用戶實現(xiàn)轉(zhuǎn)化率的按鈕。CTA 重點在于引導(dǎo)用戶執(zhí)行我們期望的行為。 常見的CTA的例如：
設(shè)計 CTA 按鈕時需要考慮以下幾點：
- 尺寸 CTA 按鈕應(yīng)該足夠大，稍遠距離也能看見；但又不能太大，會影響到用戶對其它內(nèi)容的關(guān)注。想要確認 CTA 按鈕是該頁面上最顯著的元素，試一下五秒鐘測試法：瀏覽網(wǎng)頁五秒鐘，然后記錄下你還記得的內(nèi)容。 如果 CTA 被你記下來了，那它的大小合適~
- 視覺優(yōu)先 CTA 按鈕的顏色很大程度上影響著用戶的注意力。通過顏色增加視覺沖擊力，可以讓某些按鈕比其他按鈕更突出。對比色非常適合用于 CTA，使其特別醒目。
火狐頁面上綠色的 CTA 按鈕非常醒目，立馬抓住用戶眼球。(點擊查看大圖)
- 對比空間 CTA 按鈕周圍的空間大小也很重要。白色（或?qū)Ρ壬┑目臻g為按鈕創(chuàng)建了留白區(qū)域，將按鈕與界面中其他元素分割開。
舊版本的 Dropbox 主頁是使用對比空間來突出 CTA 的很好例證。深藍色的“免費注冊”CTA 按鈕與淡藍色的背景形成對比反差。(點擊查看大圖)
- 基于行為的文案 編寫吸引用戶行動的文案。以“開始”，“獲取”或“加入”這類動詞開頭。
Evernote 的 CTA 雖然常見但也最有效得傳達了行動。 (點擊查看大圖)
提示： 你可以通過模糊效果快速測試 CTA。模糊測試是判斷用戶的眼神是否會落在想要位置的最便捷方法。將網(wǎng)頁截圖在 Adobe XD 中應(yīng)用模糊效果（參考下圖示例）?？纯错撁娴哪：姹?，哪些元素會突出顯示？如果這不是你想要的效果，再次修改。
模糊測試是一種檢驗設(shè)計焦點和視覺層次的技術(shù)。(點擊查看大圖)
Web Forms 網(wǎng)頁表單
表單填寫是網(wǎng)頁最重要的互動類型之一。事實上，表單通常被認為是完成目標的最后一步。確保用戶可以快速填寫表單，不會出現(xiàn)疑問。表單就像是一個對話框：用戶和網(wǎng)站雙方之間應(yīng)該有邏輯的溝通。
- 只問必須問的問題 只要求用戶填寫真正需要的內(nèi)容。表單的任意一個額外字段都會影響轉(zhuǎn)換率。每次都想清楚你為什么需要這些信息，你將如何使用這些信息。
- 合理排列表單問題 表單上的問題應(yīng)該從用戶視角出發(fā)，符合用戶邏輯。例如，在填寫名字之前先填寫地址就不合邏輯。
- 整合相關(guān)聯(lián)的字段 將相關(guān)的字段信息整理在同一個邏輯單元中。從一系列問題到下一系列問題的流程更像是一個對話。將相關(guān)字段整合分組更有助于用戶理解信息。
將相關(guān)字段整合在一起 (圖片來源: Nielsen Norman Group)
Animation 動畫
越來越多的設(shè)計師提倡 動畫即功能 來提升用戶體驗。動畫不再僅僅為了有趣，它是提高交互效率的重要工具之一。然而，動畫只有在合適的時間和場景下才能提升用戶體驗。好的交互動畫有這樣的目標：它是有意義的、功能性的。
以下是動畫提升用戶體驗的一些場景：
- 對用戶行為的視覺反饋 好的交互設(shè)計提供了視覺反饋。當(dāng)你需要告知用戶操作的結(jié)果時，視覺反饋非常有效。如果操作執(zhí)行失敗，動畫可以簡捷地為用戶提供反饋。例如，輸入密碼錯誤時可以使用搖動效果。這很好理解，搖動效果作為常用體勢，在人際溝通中普遍意味著“不”。
用戶看到動畫后，秒懂問題出在哪 (圖片來源： The Kinetic UI)
- 系統(tǒng)狀態(tài)的可見性Jakob Nielsen 的十大啟發(fā)式可用性中，系統(tǒng)狀態(tài)的可見性是用戶界面設(shè)計最重要的原則之一。用戶隨時隨地都想知道當(dāng)前的位置，而不能讓他們一直猜測 —— 應(yīng)用應(yīng)該通過適當(dāng)?shù)囊曈X反饋告訴用戶現(xiàn)在的狀態(tài)。數(shù)據(jù)上傳和下載操作是功能性動畫的常見場景。例如，加載動畫顯示了任務(wù)的進度、處理的速度，并在用戶心中奠定了后續(xù)可能的處理速度。
(圖片來源： xjw)
- 導(dǎo)航式動畫 導(dǎo)航式動畫是指網(wǎng)站上各個狀態(tài)間的切換 —— 例如，從概述視圖到詳細視圖。狀態(tài)切換往往涉及到大面積場景更換，有時候用戶思維難以跟上。功能性動畫能簡化用戶對場景轉(zhuǎn)變過程的適應(yīng)，在場景切換之間平滑過渡，并通過在場景的狀態(tài)變化中插入視覺連接來凸出變化所在。
(圖片來源： Ramotion)
- 品牌推廣 假設(shè)你有十幾個相同功能的網(wǎng)站，幫用戶完成相同任務(wù)。它們都能提供良好的用戶體驗，但用戶最喜歡的不僅僅是良好的用戶體驗。網(wǎng)站應(yīng)該與用戶建立情感聯(lián)系。此時品牌動畫在吸引用戶方面起著決定性作用。它會形成公司的品牌價值，突出產(chǎn)品優(yōu)勢，使用戶真正感到愉悅，令人難忘。
(圖片來源： Heco)
移動端支持
如今，將近 50% 的用戶通過移動設(shè)備訪問網(wǎng)頁。這對網(wǎng)站設(shè)計師意味著什么？這意味著我們設(shè)計的每一個頁面都必須支持移動端。
響應(yīng)式網(wǎng)頁設(shè)計
針對不同的桌面瀏覽器、移動瀏覽器優(yōu)化你的網(wǎng)站，每一平臺的瀏覽器都有不同的屏幕分辨率，技術(shù)支持和用戶基礎(chǔ)。
- 單欄布局目標 單欄布局通常在移動設(shè)備上效果很好。單欄布局不僅能有效應(yīng)對小屏幕的有限空間，而且在不同分辨率的設(shè)備上、橫豎屏模式中自如伸縮。
- 使用 Priority+ 模式優(yōu)化斷點式導(dǎo)航欄 Priority+ 是 Michael Scharnagl 提出的術(shù)語，用來描述導(dǎo)航欄展示重要的導(dǎo)航選項，隱藏次要的導(dǎo)航選項于“更多”按鈕中。這種模式充分利用了可用的屏幕空間。當(dāng)屏幕拉伸時，導(dǎo)航選項隨之增加，從而提高了網(wǎng)站的可視性和參與度。這種模式在多模塊富內(nèi)容的網(wǎng)站尤為有效（例如新聞網(wǎng)站、大型電商網(wǎng)站）。圖例中衛(wèi)報使用 Priority+ 模式進行模塊導(dǎo)航。次要選項僅在用戶點擊“All”按鈕時顯示。
衛(wèi)報使用 Priority+ 模式進行模塊導(dǎo)航(圖片來源： Brad Frost)
- 確保圖像在多個設(shè)備端適應(yīng)尺寸 網(wǎng)站必須完美適應(yīng)于所有設(shè)備，適應(yīng)不同分辨率的屏幕、像素密度、放置方向。在設(shè)計者構(gòu)建響應(yīng)式網(wǎng)站時，主要挑戰(zhàn)之一便是圖像的管理適配與呈現(xiàn)。為了簡化這個任務(wù)，可以使用 響應(yīng)式圖片斷點生成器 這類工具處理圖像。
響應(yīng)式圖片斷點生成器可以管理適配多尺寸圖片，動態(tài)生成響應(yīng)式圖片斷點。 (點擊查看大圖)
從鼠標點擊到手勢
移動網(wǎng)頁端的交互是通過手指完成的，而非鼠標點擊。這意味著設(shè)計觸碰對象和交互時要應(yīng)對不同的規(guī)則。
- 合理設(shè)置交互對象尺寸 所有交互元素（鏈接、按鈕、菜單）都應(yīng)該是可用手勢點擊的。PC 端網(wǎng)頁的交互區(qū)域（可點擊區(qū)域）小而精確，而移動端網(wǎng)頁需要較大較寬的按鈕，方便手指交互。如果你的網(wǎng)站需要大量手勢操作進行輸入，參考 MIT Touch Lab 的研究來為你的按鈕選擇適當(dāng)?shù)某叽?。研究發(fā)現(xiàn)手指面的平均尺寸在 10 到 14 毫米間， 指尖在 8 到 10 毫米間，10 × 10 毫米是恰當(dāng)?shù)挠|點尺寸。
小按鈕比大按鈕難點擊 (圖片來源： Apple)
- 交互需要更強烈的視覺標記 在移動端的網(wǎng)頁上，不存在懸停態(tài)。而在 PC 端，用戶可以將鼠標懸浮在元素上獲得額外的視覺反饋，比如懸停展開下拉菜單。移動端用戶不得不點擊得到反饋。因此，用戶應(yīng)該具有通過觀察來正確預(yù)判頁面元素行為的能力。
Accessibility 無障礙設(shè)計
如今的產(chǎn)品必須設(shè)計為可被所有人使用，無論用戶的是否有障礙。為障礙群體設(shè)計實際上是設(shè)計師培養(yǎng)同情心，試著以他人視角體驗世界的另一種方式。
Users With Poor Eyesight 弱視用戶
許多網(wǎng)站文本采用低對比度。雖然低對比度文本可能比較新潮，但也更加難閱讀難識別。低對比度內(nèi)容使視力較低的用戶、對比度敏感用戶產(chǎn)生閱讀困難，
灰色文字在淺灰色北京下難以閱讀。當(dāng)體驗很不好的時候，設(shè)計再好也毫無意義。(點擊查看大圖)
低對比度文字在 PC 端難以閱讀，移動端更是難上加難。想象下你走在烈日中，嘗試閱讀低對比度的文本。這提醒我們無障礙的視覺設(shè)計是能更好針對所有用戶的設(shè)計。
永遠不要為了美觀犧牲可用性。網(wǎng)站上文本和其他視覺元素最重要的特性就是可讀性?？勺x性要求文本與背景有足夠?qū)Ρ?。為了確保視覺障礙人士也能閱讀，W3C 網(wǎng)頁內(nèi)容無障礙設(shè)計指南（WCAG）提出了建議對比度。 建議對文本文字和圖像文字使用以下對比度：
- 字號較小的文本與背景的對比度至少為 4.5:1，最優(yōu)對比度為 7:1。
- 字號較大的文本（18號字體、14號粗體以上）與背景的對比度至少為 3:1。
差的例子： 這幾行字不符合顏色建議對比度，在該背景下難以閱讀。
好的例子： 這幾行字符合顏色建議對比度，在該背景下清晰易讀。
你可以使用 WebAIM 的色彩對比度檢測 快速得知是否在最佳視覺范圍內(nèi)。
(點擊查看大圖)
Color Blind Users 色盲用戶
據(jù)估，全球 4.5% 人口為色盲（每 12 名男性中就有 1 名，每 200 名女性中有 1 名）。4% 人口為低視力（每 30 人中有 1 人），0.6% 為盲人（每 188 人中有 1 人）。我們很容易忽視為這些用戶群設(shè)計，因為大多數(shù)設(shè)計師都沒有經(jīng)歷過這樣的問題。
為了讓這些用戶正常訪問，請避免使用顏色維度來傳達內(nèi)容。正如 W3C 聲明所說，不應(yīng)該使用顏色“作為唯一的視覺方式傳達信息，指定行為，提示回應(yīng)，或區(qū)分視覺元素。
一個常見的例子：表單中用顏色作為唯一方式傳達警告信息。成功和錯誤消息分別以綠色和紅色表示。但是紅綠色盲是最常見的色盲群體 —— 對他們來說這些顏色很難分辨。你可能經(jīng)常看到這樣的錯誤信息，比如“紅色標識區(qū)域為必填項”。雖然這看起來問題不大，但對色盲用戶來講，這種表單錯誤提示超煩。顏色應(yīng)該被用來突出顯示或補充顯示可見信息。
不好的例子： 這種表單僅靠紅色和綠色來表示字段是否有錯。色盲用戶是無法識別。
上表中，設(shè)計師應(yīng)該給出更具體的提示，比如“您輸入的電子郵件地址無效”或者至少在需要注意的地方顯示圖標。
好的例子 圖標和文字標簽顯示哪些字段無效，更好地將信息傳遞給色盲用戶。
Blind Users 盲人用戶
照片和插畫是網(wǎng)站用戶體驗的重要組成部分。但盲人用戶需要屏幕閱讀器等輔助技術(shù)來翻譯網(wǎng)站。屏幕閱讀器通過圖像的文本標注來“閱讀”圖片。如果沒有文本標注或者描述不夠清楚，他們將難以按照預(yù)期獲取信息。
考慮兩個例子 — 一個是 Threadless：一個流行 T 恤的電商網(wǎng)站。這個頁面并沒有太多在售商品的相關(guān)信息，唯一可見的文本信息是商品的價格和尺寸。
(點擊查看大圖)
第二個例子是 ASOS 網(wǎng)站。同樣是銷售T恤的網(wǎng)頁，它為商品提供了準確的文字表述。這有助于使用屏幕閱讀器的用戶想象商品的外觀。
為圖像創(chuàng)建解釋性文本時，請遵循以下指南：
- 所有“有含義的”圖像都需要描述性的替代文字。（“有含義的”圖片為信息傳達提供場景）
- 如果圖像僅僅是裝飾性效果，未提供幫助用戶理解頁面內(nèi)容的有用信息，則文本描述并非必要。
Keyboard-Friendly Experience 鍵盤流用戶體驗
一些用戶使用鍵盤而非鼠標瀏覽網(wǎng)站。例如，有運動障礙的用戶在使用鼠標這類精細運動工具時有困難?？梢詾榇祟愑脩艉喕换ズ途W(wǎng)頁定位，通過將交互元素適配 Tab 鍵，并顯示鍵盤指示符。
鍵盤導(dǎo)航的基本規(guī)則如下：
- 檢查鍵盤指示符是否明顯可見 有些網(wǎng)頁設(shè)計師會刪除鍵盤指示符，因為他們覺得礙眼。但這阻礙了鍵盤用戶與網(wǎng)站的正常交互。如果您不喜歡瀏覽器提供的默認指示符，請別直接刪除; 而是通過設(shè)計來滿足你的品味。
- 所有交互元素都應(yīng)該可以通過鍵盤訪問 鍵盤用戶應(yīng)當(dāng)可以訪問所有交互元素，而不是僅僅能使用導(dǎo)航欄和主要的 CTA 按鈕。
W3C 的 WAI-ARIA 創(chuàng)作實踐 “設(shè)計模式和工具” 章節(jié)，可以找到更多鍵盤交互的需求細節(jié)。
Testing 測試
Iterative Testing 迭代測試
測試是 UX 設(shè)計流 中的重要一步。
如同設(shè)計周期的其它步驟一樣，它是迭代的過程，從早期開始收集反饋，自始至終進行迭代。
(圖片來源： Extreme Uncertainty) (點擊查看大圖)
Test Page-Loading Time 網(wǎng)頁加載時間測試
用戶很討厭加載緩慢的網(wǎng)頁，正因如此，響應(yīng)時間是現(xiàn)代網(wǎng)站的關(guān)鍵因素。根據(jù) Nielsen Norman Group 的研究，主要有三大響應(yīng)時間界線：
- 0.1 秒 對用戶來說是瞬間。
- 1 秒 短短一秒對用戶認知流幾乎無縫，但還是會感到一絲延遲。
- 10 秒 這幾乎是用戶注意力的極限了，10 秒的延遲通常會逼走用戶馬上關(guān)閉頁面。
顯然，我們不能讓用戶為了任何事務(wù)等待 10 秒之久。但即便是幾秒的延遲（實際上經(jīng)常發(fā)生），也會降低用戶體驗。用戶會因為等待操作而惱怒。
通常是什么導(dǎo)致加載緩慢呢？
- 繁重的內(nèi)容對象（例如嵌入視頻或是幻燈片控件）
- 未經(jīng)優(yōu)化的后臺代碼
- 硬件問題（基礎(chǔ)設(shè)施不足以支持快速操作）
諸如 PageSpeed Insights 類的工具能幫助你找到加載速度過慢的原因。
A/B Testing A/B 測試
A/B 測試適用于：當(dāng)你糾結(jié)于兩個版本的設(shè)計（比如現(xiàn)有版本和重新設(shè)計的版本）。這種測試方法包含：對相同數(shù)量的兩類用戶隨機顯示兩個版本，然后對數(shù)據(jù)進行分析，查看哪個版本更有效地實現(xiàn)目標。
(圖片來源： VWO)
Developer Handoff 開發(fā)者交接
UX 設(shè)計流程 包含兩個重要的步驟：原型設(shè)計工作、解決方案的開發(fā)。兩步之間的銜接可以稱作為交接 （handoff）。當(dāng)設(shè)計到最后階段，準備投入開發(fā)時，設(shè)計師準備設(shè)計規(guī)范，也就是設(shè)計實現(xiàn)的文檔描述。設(shè)計規(guī)范確保設(shè)計稿會遵循原始意向進行開發(fā)工作。
設(shè)計規(guī)范的精度十分重要 如果存在不精準的設(shè)計規(guī)范，開發(fā)者在網(wǎng)站開發(fā)階段要么邊猜邊做，要么回來找設(shè)計師尋找答案。但是手工填寫設(shè)計規(guī)范非常頭疼，取決于設(shè)計的復(fù)雜性，這通常需要大量時間成本。
Adobe XD 的設(shè)計規(guī)格功能（測試版）可以發(fā)布公開訪問的 URL 供開發(fā)工程師檢查工作流。設(shè)計師不再需要花費大量時間創(chuàng)作設(shè)計規(guī)范，與程序員溝通元素位置，字體樣式。
Adobe XD 的設(shè)計規(guī)格功能（測試版）
結(jié)語
與任何方面的設(shè)計一樣，這里的建議都只是一個開始。將這些想法與你的實踐相結(jié)合以達到最好的效果。把你的網(wǎng)站看作是一個循序漸進的項目，使用分析手段和用戶反饋逐步改善體驗。記住：設(shè)計并不是為了設(shè)計師而設(shè)計 —— 為用戶而設(shè)計。
這篇文章是由 Adobe 贊助的 UX 設(shè)計系列其中一篇。Adobe XD 工具是志于 快速流暢的 UX 設(shè)計流，幫你快速由想法到實現(xiàn)原型。設(shè)計，原型，分享 —— 只需一個應(yīng)用。點擊Adobe XD on Behance查看更多使用 Adobe XD 創(chuàng)作出得靈性作品，注冊 Adobe experience design newsletter 接收最新 UX/UI 設(shè)計趨勢和靈感。
掘金翻譯計劃 是一個翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請持續(xù)關(guān)注 掘金翻譯計劃、官方微博、本站專欄。
在線咨詢