《網頁設計綜合指南》(三):網頁設計看這篇文章就夠了

設計師和開發人員在構建網站時，需要考慮很多事情，從視覺外觀到功能設計。為了簡化這個過程，我們準備了這個指南。限於篇幅限制，將這一指南分為三部分，此為第三部分內容。

本篇包含內容

三、移動端適配

四、無障礙設計

• 4.1 弱視用戶
• 4.2 色盲用戶
• 4.3 盲人用戶
• 4.4 鍵盤適配

五、測試

• 5.1 持續測試
• 5.2 頁面加載測試
• 5.3 A/B測試

六、開發交接

七、總結

三、移動端適配

如今，網站用戶中有50％左右的用戶通過行動裝置訪問。這對網頁設計師意味著什麼？意味著我們必須為網站進行移動端適配設計。

3.1 響應式設計

PC端和移動端有著不同的屏幕解析度，進行適配優化尤為重要。

• 採用單列布局。手機屏幕上單列布局基本效果都不錯。單列不僅可以管理小屏幕上的有限空間，還可以輕鬆地在不同屏幕解析度之間以及縱橫比之間進行縮放。

• 使用 Priority+ 導航模式。Priority+是Michael Scharnagl提出的，展示重要的導航選項， 不重要的導航選項集合在「更多」按鈕。它能充分利用可用的屏幕空間。隨著屏幕的增加，展示的導航選項也隨之增加，從而可以提高可視性和吸引力。這種模式對於有很多不同的模塊和頁面的網站（如新聞網站或電商網站）特別有用。
• 確保圖像適合PC端和移動端。網站必須適應所有不同的設備和解析度，像素密度和方向。圖像適配是構建響應式網站時面臨的主要挑戰之一。為了簡化這個任務，您可以使用諸如Responsive Image Breakpoints Generator這樣的工具地處理圖像。

Responsive Image Breakpoints Generator 可幫助您生成及管理圖像的不同尺寸。

3.2 手勢操作

移動端的交互是通過手指完成的，而不是滑鼠點擊。這意味著當您設計交互時要應用不同的規則。

• 交互元素的大小要合適。所有的交互元素（如連結，按鈕和菜單）應該都是可以手勢操作的。PC端網站適合交互區域（點擊）較小且精確的方式，但移動網頁需要較大的觸發區，可以用拇指輕鬆完成。當網站經常需要用戶操作時，請參考MIT Touch Lab的研究為您的按鈕選擇合適的尺寸。研究發現，手指面的平均尺寸在10到14毫米之間，指尖在8到10毫米之間，10×10毫米是一個很好的尺寸。

按鈕越大，點擊越輕鬆。(Image credit: Apple)

• 交互需要更明顯的視覺表達。PC端，用戶將滑鼠懸停在某個元素上（如顯示下拉菜單）時，可以提供額外的視覺反饋；移動端，沒有懸停狀態，移動用戶將不得不點擊以查看該響應。因此，應該確保用戶能夠正確預測界面元素代表的含義。

四、無障礙設計

產品必須能夠被任何人使用。針對有生理缺陷的用戶進行設計是設計師去實踐同理心和體驗世界的一種方式。

4.1 弱視用戶

許多網站的文本採用低對比度模式。雖然低對比度可能比較新潮的，但是難以識別。低對比度對於視力低下和對比度敏感的用戶不友好。

淺灰色背景上的灰色文字很難閱讀。體驗會很不好，或者說設計的毫無意義。

低對比度文本在PC端很難閱讀，在行動裝置上變得更加困難。想像一下，你在明亮的陽光下行走時，需要在行動裝置上閱讀低對比度的文本。這提醒我們，設計要確保信息能傳遞給用戶。

永遠不要為了美觀犧牲可用性。網站上的文本和其他重要元素的最重要的是可讀（用）性。可讀性要求文本和背景之間有足夠的對比。為確保視覺障礙人士能夠閱讀文本，W3C的網頁內容無障礙設計指南（WCAG）有一個[對比度建議]（https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual- audio-to-對比contrast.html）。對於正文文本和圖像文本，建議使用以下對比度比率：

• 小字號的文本對比度至少要 4.5：1。最好的對比度是7：1。
• 字號較大的文本（14號粗體、18號字體以上）應該至少有3：1的對比度。

不好：這些文本行不符合對比度的建議，難以閱讀。

 好：這些文本行遵循對比度的建議，清晰可辨。

你可以使用WebAIM的[色彩對比度檢測器]（http://webaim.org/resources/contrastchecker/）來確定是否處於最佳範圍內。

4.2 色盲用戶

據估計，全球人口中有4.5％出現色盲（12名男性中有1名，200名女性中有1名），4％患有低視（ 30人中有1名），0.6％是盲人（188人中有1人）。我們很容易忘記為這個用戶群設計，因為大多數設計師都沒有遇到這樣的問題。

為了讓用戶可以正常訪問，請避免僅使用顏色來傳達意義。 正如W3C聲明，不應該使用顏色「作為唯一可視的傳輸方式 信息，指示行動，提示回應，或區分視覺元素。「

表單中僅使用顏色表達提示信息是常見的方式。成功和錯誤消息分別以綠色和紅色顯示。但是紅色盲和綠色盲是色盲群體中最多的。大多數情況下，你能接收到錯誤信息，比如「這段文字被標紅」。看起來沒什麼問題，但是對色盲用戶在這種形式下無法接收到錯誤信息。顏色應該是突出或補充已經看得見的信息。

不好：這種形式僅僅依靠紅色和綠色來表示欄位有沒有錯誤。色盲用戶是無法識別的。

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

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

4.3 盲人用戶

圖片和插圖是網頁的重要組成部分。但盲人需要屏幕閱讀器等輔助技術來翻譯網站。屏幕閱讀器依靠於圖像的替代文本來「讀取」圖像。如果該文本不存在或者描述不清晰，他們將無法按照預期獲取信息。

考慮兩個例子 – 第一，Threadless，一個流行的T恤店。這個頁面並沒有多少關於正在銷售的商品的信息 。唯一可用的文本信息是價格和大小的組合。

第二個例子來自ASOS。同樣銷售T恤的頁面為該商品提供了準確的替代文字。 這有助於使用屏幕閱讀器的人想像商品的外觀。

為圖像創建替代文本時，請遵循以下指南：

• 所有「有意義」的圖像都需要描述性的替代文字。（「有意義」的照片指為上下文提供補充性信息）
• 如果圖像純粹是裝飾性的，沒有提供幫助用戶理解頁面內容的有用信息，則不需要代替文本。

4.4 鍵盤適配

某些用戶使用鍵盤而不是滑鼠瀏覽網站。例如，運動障礙的人在使用滑鼠這類精細的運動時有困難。通過將交互式元素適配Tab鍵，並顯示鍵盤指示符，使交互式和導航元素可以被這類用戶輕鬆訪問。

鍵盤導航的基本規則：

• 檢查鍵盤指示符是否可見和明顯。 一些網頁設計師會刪除鍵盤指示符，因為他們認為不美觀。但這阻礙了鍵盤用戶正確地與網站交互。如果您不喜歡瀏覽器提供的默認指示符，請不要全刪了它; 相反，設計它來滿足你。
• 所有的交互元素都應該可以通過鍵盤訪問，而不僅僅是主要的導航選項或主要的CTA。

您可以在W3C的「WAI-ARIA Authoring Practices」的文件中「設計模式和小工具」部分中找到有關鍵盤交互的詳細要求。

五、測試

5.1 持續測試

測試是用戶體驗設計過程的重要組成部分。和設計周期的其他部分一樣，這是一個持續的過程。在早期收集信息開始，到整個過程都需要進行測試。

（Image credit: Extreme Uncertainty）

5.2 頁面加載測試

用戶討厭加載慢的網站。這就是為什麼響應時間是網站的重要因素。根據Nielsen Norman Group，有三個響應時間限制：

• 0.1秒對用戶來說是即時的。
• 1秒能保存用戶的思想流暢，但是會感覺到輕微的延遲。
• 10秒是用戶保持注意力集中在操作上的極限。10秒的延遲通常會讓用戶立即離開網站。

顯然，我們不應該讓用戶在網站上等待10秒鐘。但是經常發生幾秒鐘的延遲，也會讓人感覺不愉快。用戶將不得不等待操作完成。

通常是什麼導致加載緩慢？

• 體量大的內容（如嵌入的視頻和幻燈片小部件），
• 後端代碼未進行優化
• 硬體問題（基礎設施性能有限）。

像[PageSpeed Insights]（https://developers.google.com/speed/pagespeed/insights/）這樣的工具可以幫助您找出加載緩慢的原因。

5.3 A/B測試

當您在兩個版本（如現有版本和重新設計版本的頁面）之間進行選擇時，A/B測試是理想的選擇。這種測試方法包括將兩個版本中的一個隨機顯示給相同數量的用戶，然後分析哪個版本下用戶更有效地完成了目標。

（Image credit: VWO）

六、 開發交接

[UX設計流程]（https://blogs.adobe.com/creativecloud/ux-process-what-it-is-what-it-looks-like-and-why-its-important/）有兩個重要的步驟 ：設計原型和開發。設計完成並準備好進入開發階段後，設計人員需要制定一份規範，該規範是描述設計應如何實現的文檔。規範確保開發不會偏離初衷。

規範中的精確性是至關重要的，因為在規範不準確的情況下，開發人員在開發時不得不依賴猜測，或者讓設計人員解答他們的問題。但是人工編寫規範是一個頭痛的問題，通常需要很長的時間。

藉助Adobe XD的設計規範功能（測試版），設計人員可以為開發人員發布一個公開的連結。通過連結，開發人員可以檢查，測量和複製樣式。設計師不再需要花時間編寫規範來向開發者闡述位置，文本樣式或字體。

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

七、結論

這裡分享的技巧只是一個開始。將這些想法與您自己的想法融合，才能達到最佳效果。將您的網站視為一個不斷發展的項目，並分析用戶反饋來不斷改進體驗。請記住，設計不只是為了設計師 – 而是為了用戶。

相關閱讀

《網頁設計綜合指南》（一）：網頁設計看這篇文章就夠了

《網頁設計綜合指南》（二）：網頁設計看這篇文章就夠了

 

原文l連結：https://www.smashingmagazine.com/2017/11/comprehensive-guide-web-design/

本文系人人都是產品經理翻譯團隊@吉諾是比利 翻譯發布，未經本站允許，禁止轉載。

題圖來自unsplash，基於CC0協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}