設(shè)計(jì)師和開發(fā)人員在構(gòu)建網(wǎng)站時(shí)，需要考慮很多事情，從視覺外觀到功能設(shè)計(jì)。為了簡(jiǎn)化這個(gè)過程，我們準(zhǔn)備了這個(gè)指南。限于篇幅限制，將這一指南分為三部分，此為第三部分內(nèi)容。

本篇包含內(nèi)容

三、移動(dòng)端適配

• 3.1 響應(yīng)式設(shè)計(jì)
• 3.2 手勢(shì)操作

四、無障礙設(shè)計(jì)

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

五、測(cè)試

• 5.1 持續(xù)測(cè)試
• 5.2 頁面加載測(cè)試
• 5.3 A/B測(cè)試

六、開發(fā)交接

七、總結(jié)

三、移動(dòng)端適配

如今，網(wǎng)站用戶中有50％左右的用戶通過移動(dòng)設(shè)備訪問。這對(duì)網(wǎng)頁設(shè)計(jì)師意味著什么？意味著我們必須為網(wǎng)站進(jìn)行移動(dòng)端適配設(shè)計(jì)。

3.1 響應(yīng)式設(shè)計(jì)

PC端和移動(dòng)端有著不同的屏幕分辨率，進(jìn)行適配優(yōu)化尤為重要。

• 采用單列布局。手機(jī)屏幕上單列布局基本效果都不錯(cuò)。單列不僅可以管理小屏幕上的有限空間，還可以輕松地在不同屏幕分辨率之間以及縱橫比之間進(jìn)行縮放。

• 使用 Priority+ 導(dǎo)航模式。Priority+是Michael Scharnagl提出的，展示重要的導(dǎo)航選項(xiàng)， 不重要的導(dǎo)航選項(xiàng)集合在“更多”按鈕。它能充分利用可用的屏幕空間。隨著屏幕的增加，展示的導(dǎo)航選項(xiàng)也隨之增加，從而可以提高可視性和吸引力。這種模式對(duì)于有很多不同的模塊和頁面的網(wǎng)站（如新聞網(wǎng)站或電商網(wǎng)站）特別有用。
• 確保圖像適合PC端和移動(dòng)端。網(wǎng)站必須適應(yīng)所有不同的設(shè)備和分辨率，像素密度和方向。圖像適配是構(gòu)建響應(yīng)式網(wǎng)站時(shí)面臨的主要挑戰(zhàn)之一。為了簡(jiǎn)化這個(gè)任務(wù)，您可以使用諸如Responsive Image Breakpoints Generator這樣的工具地處理圖像。

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

3.2 手勢(shì)操作

移動(dòng)端的交互是通過手指完成的，而不是鼠標(biāo)點(diǎn)擊。這意味著當(dāng)您設(shè)計(jì)交互時(shí)要應(yīng)用不同的規(guī)則。

• 交互元素的大小要合適。所有的交互元素（如鏈接，按鈕和菜單）應(yīng)該都是可以手勢(shì)操作的。PC端網(wǎng)站適合交互區(qū)域（點(diǎn)擊）較小且精確的方式，但移動(dòng)網(wǎng)頁需要較大的觸發(fā)區(qū)，可以用拇指輕松完成。當(dāng)網(wǎng)站經(jīng)常需要用戶操作時(shí)，請(qǐng)參考MIT Touch Lab的研究為您的按鈕選擇合適的尺寸。研究發(fā)現(xiàn)，手指面的平均尺寸在10到14毫米之間，指尖在8到10毫米之間，10×10毫米是一個(gè)很好的尺寸。

按鈕越大，點(diǎn)擊越輕松。(Image credit: Apple)

• 交互需要更明顯的視覺表達(dá)。PC端，用戶將鼠標(biāo)懸停在某個(gè)元素上（如顯示下拉菜單）時(shí)，可以提供額外的視覺反饋；移動(dòng)端，沒有懸停狀態(tài)，移動(dòng)用戶將不得不點(diǎn)擊以查看該響應(yīng)。因此，應(yīng)該確保用戶能夠正確預(yù)測(cè)界面元素代表的含義。

四、無障礙設(shè)計(jì)

產(chǎn)品必須能夠被任何人使用。針對(duì)有生理缺陷的用戶進(jìn)行設(shè)計(jì)是設(shè)計(jì)師去實(shí)踐同理心和體驗(yàn)世界的一種方式。

4.1 弱視用戶

許多網(wǎng)站的文本采用低對(duì)比度模式。雖然低對(duì)比度可能比較新潮的，但是難以識(shí)別。低對(duì)比度對(duì)于視力低下和對(duì)比度敏感的用戶不友好。

淺灰色背景上的灰色文字很難閱讀。體驗(yàn)會(huì)很不好，或者說設(shè)計(jì)的毫無意義。

低對(duì)比度文本在PC端很難閱讀，在移動(dòng)設(shè)備上變得更加困難。想象一下，你在明亮的陽光下行走時(shí)，需要在移動(dòng)設(shè)備上閱讀低對(duì)比度的文本。這提醒我們，設(shè)計(jì)要確保信息能傳遞給用戶。

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

• 小字號(hào)的文本對(duì)比度至少要 4.5：1。最好的對(duì)比度是7：1。
• 字號(hào)較大的文本（14號(hào)粗體、18號(hào)字體以上）應(yīng)該至少有3：1的對(duì)比度。

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

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

你可以使用WebAIM的[色彩對(duì)比度檢測(cè)器]（http://webaim.org/resources/contrastchecker/）來確定是否處于最佳范圍內(nèi)。

4.2 色盲用戶

據(jù)估計(jì)，全球人口中有4.5％出現(xiàn)色盲（12名男性中有1名，200名女性中有1名），4％患有低視（ 30人中有1名），0.6％是盲人（188人中有1人）。我們很容易忘記為這個(gè)用戶群設(shè)計(jì)，因?yàn)榇蠖鄶?shù)設(shè)計(jì)師都沒有遇到這樣的問題。

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

表單中僅使用顏色表達(dá)提示信息是常見的方式。成功和錯(cuò)誤消息分別以綠色和紅色顯示。但是紅色盲和綠色盲是色盲群體中最多的。大多數(shù)情況下，你能接收到錯(cuò)誤信息，比如“這段文字被標(biāo)紅”。看起來沒什么問題，但是對(duì)色盲用戶在這種形式下無法接收到錯(cuò)誤信息。顏色應(yīng)該是突出或補(bǔ)充已經(jīng)看得見的信息。

不好：這種形式僅僅依靠紅色和綠色來表示字段有沒有錯(cuò)誤。色盲用戶是無法識(shí)別的。

在上面的表格中，設(shè)計(jì)師應(yīng)該給出更具體的說明，比如“您輸入的電子郵件地址無效”或者在需要注意的地方顯示圖標(biāo)。

好：圖標(biāo)和標(biāo)簽顯示哪些字段無效，更好地將信息傳遞給色盲用戶。

4.3 盲人用戶

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

考慮兩個(gè)例子 – 第一，Threadless，一個(gè)流行的T恤店。這個(gè)頁面并沒有多少關(guān)于正在銷售的商品的信息 。唯一可用的文本信息是價(jià)格和大小的組合。

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

為圖像創(chuàng)建替代文本時(shí)，請(qǐng)遵循以下指南：

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

4.4 鍵盤適配

某些用戶使用鍵盤而不是鼠標(biāo)瀏覽網(wǎng)站。例如，運(yùn)動(dòng)障礙的人在使用鼠標(biāo)這類精細(xì)的運(yùn)動(dòng)時(shí)有困難。通過將交互式元素適配Tab鍵，并顯示鍵盤指示符，使交互式和導(dǎo)航元素可以被這類用戶輕松訪問。

鍵盤導(dǎo)航的基本規(guī)則：

• 檢查鍵盤指示符是否可見和明顯。 一些網(wǎng)頁設(shè)計(jì)師會(huì)刪除鍵盤指示符，因?yàn)樗麄冋J(rèn)為不美觀。但這阻礙了鍵盤用戶正確地與網(wǎng)站交互。如果您不喜歡瀏覽器提供的默認(rèn)指示符，請(qǐng)不要全刪了它; 相反，設(shè)計(jì)它來滿足你。
• 所有的交互元素都應(yīng)該可以通過鍵盤訪問，而不僅僅是主要的導(dǎo)航選項(xiàng)或主要的CTA。

您可以在W3C的“WAI-ARIA Authoring Practices”的文件中“設(shè)計(jì)模式和小工具”部分中找到有關(guān)鍵盤交互的詳細(xì)要求。

五、測(cè)試

5.1 持續(xù)測(cè)試

測(cè)試是用戶體驗(yàn)設(shè)計(jì)過程的重要組成部分。和設(shè)計(jì)周期的其他部分一樣，這是一個(gè)持續(xù)的過程。在早期收集信息開始，到整個(gè)過程都需要進(jìn)行測(cè)試。

（Image credit: Extreme Uncertainty）

5.2 頁面加載測(cè)試

用戶討厭加載慢的網(wǎng)站。這就是為什么響應(yīng)時(shí)間是網(wǎng)站的重要因素。根據(jù)Nielsen Norman Group，有三個(gè)響應(yīng)時(shí)間限制：

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

顯然，我們不應(yīng)該讓用戶在網(wǎng)站上等待10秒鐘。但是經(jīng)常發(fā)生幾秒鐘的延遲，也會(huì)讓人感覺不愉快。用戶將不得不等待操作完成。

通常是什么導(dǎo)致加載緩慢？

• 體量大的內(nèi)容（如嵌入的視頻和幻燈片小部件），
• 后端代碼未進(jìn)行優(yōu)化
• 硬件問題（基礎(chǔ)設(shè)施性能有限）。

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

5.3 A/B測(cè)試

當(dāng)您在兩個(gè)版本（如現(xiàn)有版本和重新設(shè)計(jì)版本的頁面）之間進(jìn)行選擇時(shí)，A/B測(cè)試是理想的選擇。這種測(cè)試方法包括將兩個(gè)版本中的一個(gè)隨機(jī)顯示給相同數(shù)量的用戶，然后分析哪個(gè)版本下用戶更有效地完成了目標(biāo)。

（Image credit: VWO）

六、 開發(fā)交接

[UX設(shè)計(jì)流程]（https://blogs.adobe.com/creativecloud/ux-process-what-it-is-what-it-looks-like-and-why-its-important/）有兩個(gè)重要的步驟 ：設(shè)計(jì)原型和開發(fā)。設(shè)計(jì)完成并準(zhǔn)備好進(jìn)入開發(fā)階段后，設(shè)計(jì)人員需要制定一份規(guī)范，該規(guī)范是描述設(shè)計(jì)應(yīng)如何實(shí)現(xiàn)的文檔。規(guī)范確保開發(fā)不會(huì)偏離初衷。

規(guī)范中的精確性是至關(guān)重要的，因?yàn)樵谝?guī)范不準(zhǔn)確的情況下，開發(fā)人員在開發(fā)時(shí)不得不依賴猜測(cè)，或者讓設(shè)計(jì)人員解答他們的問題。但是人工編寫規(guī)范是一個(gè)頭痛的問題，通常需要很長(zhǎng)的時(shí)間。

借助Adobe XD的設(shè)計(jì)規(guī)范功能（測(cè)試版），設(shè)計(jì)人員可以為開發(fā)人員發(fā)布一個(gè)公開的鏈接。通過鏈接，開發(fā)人員可以檢查，測(cè)量和復(fù)制樣式。設(shè)計(jì)師不再需要花時(shí)間編寫規(guī)范來向開發(fā)者闡述位置，文本樣式或字體。

Adobe XD的設(shè)計(jì)規(guī)范功能（測(cè)試版）

七、結(jié)論

這里分享的技巧只是一個(gè)開始。將這些想法與您自己的想法融合，才能達(dá)到最佳效果。將您的網(wǎng)站視為一個(gè)不斷發(fā)展的項(xiàng)目，并分析用戶反饋來不斷改進(jìn)體驗(yàn)。請(qǐng)記住，設(shè)計(jì)不只是為了設(shè)計(jì)師 – 而是為了用戶。

相關(guān)閱讀

《網(wǎng)頁設(shè)計(jì)綜合指南》（一）：網(wǎng)頁設(shè)計(jì)看這篇文章就夠了

《網(wǎng)頁設(shè)計(jì)綜合指南》（二）：網(wǎng)頁設(shè)計(jì)看這篇文章就夠了

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

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì)@吉諾是比利 翻譯發(fā)布，未經(jīng)本站允許，禁止轉(zhuǎn)載。

題圖來自u(píng)nsplash，基于CC0協(xié)議