[譯] 網站設計綜合指南

horizon13th發表於2018-01-14

摘要

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

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

目錄

設計使用者旅程 Designing The User Journey

  1. 資訊架構 Information Architecture
  2. 全域性導航 Global Navigation
  3. 連結與選單項 Links and Navigation Options
  4. 瀏覽器的“後退”按鈕 “Back” Button in Browser
  5. 麵包屑導航 Breadcrumbs
  6. 搜尋欄 Search

設計獨立頁面 Designing Individual Pages

  1. 內容策略 Content Strategy
  2. 頁面結構 Page Structure
  3. 視覺層級 Visual Hierarchy
  4. 滾動行為 Scrolling Behavior
  5. 內容載入 Content Loading
  6. 按鈕 Buttons
  7. 影像 Imagery
  8. 視訊 Video
  9. CTA 按鈕 Call-to-Action Buttons
  10. 網頁表單 Web Forms
  11. 動畫 Animation

移動端支援 Mobile Considerations

  1. 響應式網頁設計 Practice Responsive Web Design
  2. 從滑鼠點選到手勢 Going From Clickable to Tappable

無障礙設計 Accessibility

  1. 弱視使用者 Users With Poor Eyesight
  2. 色盲使用者 Color Blind Users
  3. 盲人使用者 Blind Users
  4. 鍵盤流使用者體驗 Keyboard-Friendly Experience

測試 Testing

  1. 迭代測試 Iterative Testing
  2. 網頁載入時間測試 Test Page-Loading Time
  3. A/B 測試 A/B Testing

開發者交接

結語

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’s signup page uses scroll hijacking.

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 設計趨勢和靈感。


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

相關文章