手機網頁設計注意事項：小心這十個重要事項

　　使用手機上網的人越來越多，這疑問著企業除了設計電腦版網頁外，還需要進行手機版網頁設計。很多網頁設計師在設計手機版網站時，都會先認真研究一番手機網頁及電腦網頁的不同之處。那么，與電腦網頁相比，手機網頁設計需要注意什么呢？

　　網頁設計注意事項

　　手機網頁設計需要注意什么？

　　1.確定網頁設計內容、方向及類型

　　設計手機網頁之前，首先需要確定一下網頁設計的大致方向，如：

　　全新網頁設計——是為某產品或品牌重新設計網頁嗎？是否包括電腦網頁及手機網頁都要設計，還是選其一？

　　網頁設計改版——是否從舊網頁中取材，重新設計電腦網頁及手機網頁？

　　只增加手機網頁——原有電腦網頁不改變，是否只需要增加手機網頁即可？

　　以上不同情況都有不同的設計策略，網頁設計師進行手機網頁設計前，一定要厘清到底處于哪種情況設計手機網頁。

　　2.確定網站形象

　　設計企業網站前，首先要注意公司的形象以及產品的特色，若該企業的主營產品是汽車，網站形象就要給消費者鮮明的汽車形象，讓大家知道它的汽車與其他牌子汽車的不同之處。

　　確定好電腦網頁形象后，就需要確定手機網頁形象，一般來說兩者所表達的內容其實大同小異。不同的是，手機網頁無需太多復雜的元素，僅僅突出公司形象，吸引用戶眼球。

　　3.設計手機版網頁前需預測網站流量

　　如果以舊有電腦版網站為藍本，設計手機版網頁前建議先使用GA(GoogleAnalytics)或其他工具對用戶進行背景調查(通常，掌握用戶的數據越多，對電腦版網站制作的效果越好)。

　　了解各種數據，在設計手機網站時就可清晰知道，根據不同裝置的需求，對網站部分內容進行額外的加強。

　　4.使用響應式網頁設計

　　每年各大手機品牌商都會推出不同型號的手機，網頁設計要適應每種手機或瀏覽器，是一份量大且難度極高的工作。但使用響應式網頁設計，就能完美地解決這種事情。

　　5.設計簡單但不簡陋

　　設計手機版網頁的關鍵就是簡單，畢竟手機屏幕不可能比電腦螢幕大，且處理器也不會比電腦好，所以手機網頁設計一定要簡單化，檔案要越小越好，網頁加載時間也要越短越好。

　　不過，簡單不代表手機網頁就要健腦，嘗試減少對圖片或Javascript的依賴，可輕松完成多背景、圓角、3D動畫、文字陰影等設計特色。

　　6.采用單欄式設計

　　手機網頁采用單欄式設計，能在有限的行動裝置畫面上閱讀并操作網頁。手機網頁出現太多欄位，對部分用戶而言是難以操作的，再者個別欄位的字體變小也不好閱讀。

　　7.善用漢堡包菜單

　　網頁欄目太多，可選擇使用「漢堡包菜單」，將多余的標簽隱藏在重點/主題選項下，方便用戶選取想要的資訊。設計漢堡包菜單時，盡量采用直式設計，不要讓用戶左右劃動頁面，才能看完一行字。

　　8.按鍵要明顯易按

　　電腦網頁在選取功能時，可透過滑鼠移動按鍵上方，但不一定按下(hover)，另外，滑鼠可以按左鍵、右鍵以及滑動軸選取功能。但手機網頁只有「點擊」這一特性，所以設計手機網頁時，一定要留意這個按鍵特性。

　　9.提供視覺反饋按鍵

　　電腦網頁點擊按鈕時，按鈕顏色會出現變化，告知用戶已成功點擊該按鈕。同樣，手機網頁也建議這種設計方式，方便用戶了了解網頁瀏覽情況。

　　另外，網頁載入時，用戶點擊或選取按鈕后，網頁都會開始Loading，這是可設計一些代表企業形象的圖案或動畫，讓用戶知道網頁正在加載，避免用戶重復點擊按鈕，延長載入時間。

　　10.測試網頁性能

　　網頁完成后，就需要對網頁進行各項性能的測試，確保網頁所有功能都能正常運作。雖然市面有很多不同型號的手機，都每臺手機都進行測試，似乎太浪費精力和時間。

　　這是可通過測試軟體或網頁版模擬器的輔助，對手機網頁進行測試并修改各種Bug。

　　事實上，手機網頁設計和電腦網頁設計確實存在很多不同點，這也需要網頁設計師在設計網站過程中，不斷發掘并參考目前用戶的使用體驗，才能設計出受人歡迎的手機網頁設計。