廣州網(wǎng)站建設走在互聯(lián)網(wǎng)行業(yè)的前列。網(wǎng)絡商務需求，網(wǎng)站產(chǎn)品需求，網(wǎng)站建設者網(wǎng)站建設需求，都體現(xiàn)了互聯(lián)網(wǎng)商務的重要性。本期主要介紹網(wǎng)站設計的視覺沖擊和功能設計，從適應功能開發(fā)、無障礙設計、移動端移動設備測試的效果來引導和描述網(wǎng)頁的功能。這個問題將包括移動端的適配、無障礙設計、頁面測試和開發(fā)移交。

　　第三，移動終端被適配

　　3.1響應性設計

　　3.2手勢操作

　　第四，無障礙設計

　　4.1弱視用戶

　　4.2色盲用戶

　　4.3盲人用戶

　　4.4鍵盤適配

　　動詞（verb的縮寫）測試

　　5.1連續(xù)測試

　　5.2頁面加載測試

　　5.3甲乙測試

　　不及物動詞開發(fā)移交

　　七.總結

　　第三，移動終端被適配

　　如今，大約50%的網(wǎng)站用戶通過移動設備訪問。這對網(wǎng)頁設計師意味著什么？這意味著移動網(wǎng)站的建設需求很大，因此我們必須為網(wǎng)站設計移動適配。

　　3.1響應性設計

　　PC和手機屏幕分辨率不同，優(yōu)化適配尤為重要。

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

　　使用優(yōu)先導航模式。優(yōu)先級由Michael  Scharnagl提出，顯示重要的導航選項，不重要的導航選項聚集在“更多”按鈕。它可以充分利用可用的屏幕空間。隨著屏幕的增加，導航選項也增加了，可以提高可視性和吸引力。這種模式對于有很多不同模塊和頁面的網(wǎng)站特別有用，比如新聞網(wǎng)站或者電子商務網(wǎng)站。

　　確保圖像適合PC和手機。網(wǎng)站必須適應所有不同的設備和分辨率，每英寸像素和方向。圖像適配是建立一個響應性網(wǎng)站的主要挑戰(zhàn)之一。為了簡化此任務，可以使用響應圖像斷點生成器等工具來處理圖像。

　　3.2手勢操作

　　移動終端的交互是通過手指完成的，而不是鼠標點擊。這意味著在設計交互時應用不同的規(guī)則。

　　交互元素的大小要合適。所有交互元素(如鏈接、按鈕和菜單)都應該是手勢可操作的。PC端網(wǎng)站適合小而精準的交互區(qū)域(點擊)，而移動網(wǎng)頁需要大的觸發(fā)區(qū)域，用拇指就可以輕松完成。當網(wǎng)站經(jīng)常需要用戶操作時，請參考麻省理工觸摸實驗室的研究，為你的按鈕選擇合適的尺寸。發(fā)現(xiàn)手指表面平均尺寸在10 ~ 14mm之間，指尖在8 ~ 10mm之間，1010 mm是較好的尺寸。畫

　　交互需要更明顯的視覺表現(xiàn)。在PC端，當鼠標懸停在一個元素上時，用戶可以提供額外的視覺反饋(如顯示下拉菜單)；在移動端，沒有懸停狀態(tài)，移動用戶將必須點擊才能查看響應。所以要保證用戶能夠正確預測界面元素所代表的意義。

　　第四，無障礙設計

　　產(chǎn)品必須能被任何人使用。為有生理缺陷的用戶設計，是設計師練習共情、體驗世界的一種方式。

　　4.1弱視用戶

　　很多網(wǎng)站的文字采用低對比模式。雖然低對比度可能很時尚，但很難識別。低對比度對視力低、對比度敏感的用戶不友好。

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

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

　　小字號文字的對比度至少要達到4.5: 1。最好的對比是7: 1。

　　字體較大的文字(14 #粗體，18 #字體以上)至少要有3: 1的對比度。

　　4.2色盲用戶

　　據(jù)估計，全球4.5%的人口是色盲(每12名男性中有1人，每200名女性中有1人)，4%的人口視力低下(每30人中有1人)，0.6%的人口是盲人(每188人中有1人)。很容易忘記為這個用戶群體設計，因為大部分設計師都沒有遇到過這樣的問題。

　　為了讓用戶有正常的訪問，請避免只用顏色來傳達意思。正如W3C所說，顏色“不應作為唯一的視覺傳遞信息，用于指示動作、提示響應或區(qū)分視覺元素?！薄?quot;

　　在表單中只通過顏色來表示提示信息是一種常見的方式。成功和錯誤消息分別以綠色和紅色顯示。然而，紅盲和綠盲是最常見的色盲群體。在大多數(shù)情況下，您可能會收到錯誤消息，如“此文本被標記為紅色”。好像沒什么問題，但是色盲的用戶是收不到這種形式的錯誤信息的。顏色應該突出或補充已經(jīng)可見的信息。

　　4.3盲人用戶

　　圖片和插圖是網(wǎng)頁的重要組成部分。但是盲人需要屏幕閱讀器等輔助技術來翻譯網(wǎng)站。屏幕閱讀器依靠圖像的替代文本來“閱讀”圖像。如果文本不存在或者描述不清楚，他們就不會得到預期的信息。

　　為圖像創(chuàng)建替代文本時，請遵循以下準則：所有“有意義”的圖像都需要描述性的替代詞。(“有意義的”照片指上下文的補充信息)

　　如果圖片純粹是裝飾性的，沒有提供有用的信息來幫助用戶理解頁面的內容，就不需要替換文字。

　　4.4鍵盤適配

　　有些用戶用鍵盤代替鼠標瀏覽網(wǎng)站。例如，運動障礙患者很難使用精細動作，如鼠標。通過使交互元素適應Tab鍵并顯示鍵盤指示器，這些用戶可以容易地訪問交互和導航元素。

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

　　檢查鍵盤指示器是否可見和明顯。有些網(wǎng)頁設計師會刪除鍵盤指示器，因為他們認為它不漂亮。但這妨礙了鍵盤用戶與網(wǎng)站的正確互動。如果不喜歡瀏覽器提供的默認指標，請不要全部刪除；而是設計成讓你滿意。

　　動詞（verb的縮寫）測試

　　5.1連續(xù)測試

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

　　5.2頁面加載測試

　　用戶討厭加載慢的網(wǎng)站。這就是為什么響應時間是網(wǎng)站的一個重要因素。根據(jù)尼爾森諾曼集團的說法，有三個響應時間限制：

　　(1) 0.1秒對用戶來說是即時的。

　　一秒鐘可以保持用戶的思維流暢，但會感覺到輕微的延遲。

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

　　顯然，我們不應該讓用戶在網(wǎng)站上等待10秒鐘。然而，往往會出現(xiàn)幾秒鐘的延遲，這也讓人感到不愉快。用戶將不得不等待操作完成。通常是什么原因導致加載緩慢？

　　大容量內容(如嵌入式視頻和幻燈片小部件)

　　后端代碼沒有優(yōu)化

　　硬件問題(基礎設施性能有限)。

　　5.3甲乙測試

　　當您在兩個版本之間進行選擇時，如現(xiàn)有版本和頁面的重新設計版本，A/B測試是一個理想的選擇。這種測試方法包括向相同數(shù)量的用戶隨機顯示兩個版本中的一個，然后分析哪個版本的用戶可以更有效地實現(xiàn)目標。

　　不及物動詞開發(fā)移交

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

　　規(guī)范的準確性非常重要，因為在規(guī)范不準確的情況下，開發(fā)人員不得不依靠猜測或者讓設計人員來回答他們的問題。但是手工編寫規(guī)范是一件令人頭疼的事情，通常需要很長時間。借助Adobe  XD的設計規(guī)范功能(beta)，設計師可以為開發(fā)者發(fā)布一個開放的鏈接。通過鏈接，開發(fā)人員可以檢查、測量和復制樣式。設計師不再需要花時間寫規(guī)范來向開發(fā)者解釋位置、文字樣式或字體。

　　七.結論

　　網(wǎng)站建設是一個工程，網(wǎng)頁設計是內容之一。只有充分保證每個界面的可用性，才能更好的保證網(wǎng)站的視覺開發(fā)。當思想和實踐結合起來，效果才能體現(xiàn)出來。通過不斷的設計和測試，我們可以不斷的改進網(wǎng)站的缺點，為用戶帶來更美觀、更有用的網(wǎng)站內容。