《網(wǎng)頁設(shè)計指南》(三):視覺沖擊及功能設(shè)計

廣州網(wǎng)站建設(shè)在互聯(lián)網(wǎng)行業(yè)中算是走在前端的，商業(yè)對網(wǎng)絡(luò)的需求、產(chǎn)品對網(wǎng)站的需求、網(wǎng)站建設(shè)對建站商的需求等都體現(xiàn)了互聯(lián)網(wǎng)商業(yè)的重要性，本期內(nèi)容主要介紹網(wǎng)站建設(shè)的網(wǎng)頁設(shè)計視覺沖擊及功能上的設(shè)計，從移動端的適配功能開發(fā)、無障礙設(shè)計、移動設(shè)備測試等效果對網(wǎng)頁頁面功能進行指導(dǎo)和描述，本期內(nèi)容中將會從移動端適配、無障礙設(shè)計、頁面測試、開發(fā)交接等幾個內(nèi)容上展開應(yīng)用。

三、移動端適配

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

3.2 手勢操作

四、無障礙設(shè)計

4.1 弱視用戶

4.2 色盲用戶

4.3 盲人用戶

4.4 鍵盤適配

五、測試

5.1 持續(xù)測試

5.2 頁面加載測試

5.3 A/B測試

六、開發(fā)交接

七、總結(jié)

三、移動端適配

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

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

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

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

使用 Priority 導(dǎo)航模式。Priority 是Michael Scharnagl提出的，展示重要的導(dǎo)航選項， 不重要的導(dǎo)航選項集合在“更多”按鈕。它能充分利用可用的屏幕空間。隨著屏幕的增加，展示的導(dǎo)航選項也隨之增加，從而可以提高可視性和吸引力。這種模式對于有很多不同的模塊和頁面的網(wǎng)站（如新聞網(wǎng)站或電商網(wǎng)站）特別有用。

確保圖像適合PC端和移動端。網(wǎng)站必須適應(yīng)所有不同的設(shè)備和分辨率，像素密度和方向。圖像適配是構(gòu)建響應(yīng)式網(wǎng)站時面臨的主要挑戰(zhàn)之一。為了簡化這個任務(wù)，您可以使用諸如Responsive Image Breakpoints Generator這樣的工具地處理圖像。

3.2 手勢操作

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

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

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

四、無障礙設(shè)計

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

4.1 弱視用戶

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

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

永遠不要為了美觀犧牲可用性。網(wǎng)站上的文本和其他重要元素的最重要的是可讀（用）性。可讀性要求文本和背景之間有足夠的對比。對于正文文本和圖像文本，建議使用以下對比度比率：

①小字號的文本對比度至少要 4.5：1。最好的對比度是7：1。

②字號較大的文本（14號粗體、18號字體以上）應(yīng)該至少有3：1的對比度。

4.2 色盲用戶

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

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

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

4.3 盲人用戶

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

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

所有“有意義”的圖像都需要描述性的替代文字。（“有意義”的照片指為上下文提供補充性信息）

如果圖像純粹是裝飾性的，沒有提供幫助用戶理解頁面內(nèi)容的有用信息，則不需要代替文本。

4.4 鍵盤適配

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

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

檢查鍵盤指示符是否可見和明顯。 一些網(wǎng)頁設(shè)計師會刪除鍵盤指示符，因為他們認為不美觀。但這阻礙了鍵盤用戶正確地與網(wǎng)站交互。如果您不喜歡瀏覽器提供的默認指示符，請不要全刪了它; 相反，設(shè)計它來滿足你。

五、測試

5.1 持續(xù)測試

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

5.2 頁面加載測試

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

①0.1秒對用戶來說是即時的。

②1秒能保存用戶的思想流暢，但是會感覺到輕微的延遲。

③10秒是用戶保持注意力集中在操作上的極限。10秒的延遲通常會讓用戶立即離開網(wǎng)站。

顯然，我們不應(yīng)該讓用戶在網(wǎng)站上等待10秒鐘。但是經(jīng)常發(fā)生幾秒鐘的延遲，也會讓人感覺不愉快。用戶將不得不等待操作完成，通常是什么導(dǎo)致加載緩慢？

①體量大的內(nèi)容（如嵌入的視頻和幻燈片小部件）

②后端代碼未進行優(yōu)化

③硬件問題（基礎(chǔ)設(shè)施性能有限）。

5.3 A/B測試

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

六、 開發(fā)交接

有兩個重要的步驟 ：設(shè)計原型和開發(fā)。設(shè)計完成并準(zhǔn)備好進入開發(fā)階段后，設(shè)計人員需要制定一份規(guī)范，該規(guī)范是描述設(shè)計應(yīng)如何實現(xiàn)的文檔。規(guī)范確保開發(fā)不會偏離初衷。

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

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

七、結(jié)論

網(wǎng)站建設(shè)是一個項目工程，網(wǎng)頁設(shè)計是其中的一個內(nèi)容，充分保證每個界面的可用性才能更好的保證網(wǎng)站的可視化發(fā)展，當(dāng)想法和做法相互融合的時候效果上才能得到體現(xiàn)，通過不斷的設(shè)計和測試分析用戶反饋的問題而不斷改進網(wǎng)站的缺點，從而為用戶帶來更加美觀而使用的網(wǎng)站內(nèi)容。

分享文章：《網(wǎng)頁設(shè)計指南》(三):視覺沖擊及功能設(shè)計
網(wǎng)址分享：http://muchs.cn/news32/154382.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、電子商務(wù)、App開發(fā)、企業(yè)建站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)