- 相關(guān)推薦
移動(dòng)網(wǎng)頁(yè)設計原則
導語(yǔ)：如果你希望你的網(wǎng)頁(yè)更好地適配移動(dòng)設備，那么你必須解決網(wǎng)頁(yè)在所有移動(dòng)設備上的兼容性問(wèn)題。以下是改進(jìn)措施，你可以參照著(zhù)來(lái)確保你的網(wǎng)頁(yè)能適配移動(dòng)設備，并給用戶(hù)帶來(lái)愉悅的體驗。
1. 讓你的整個(gè)網(wǎng)頁(yè)都適合在移動(dòng)端上瀏覽
相比在移動(dòng)端上直接操作桌面版網(wǎng)頁(yè)，經(jīng)過(guò)適配的移動(dòng)網(wǎng)頁(yè)會(huì )大大方便用戶(hù)的操作使用。舉個(gè)例子，下圖是手機端 Domino 披薩官網(wǎng)的兩個(gè)版本，一個(gè)是桌面版網(wǎng)頁(yè)，另一個(gè)是已適配手機端的網(wǎng)頁(yè)。
桌面版網(wǎng)頁(yè)手機的小屏幕里顯得窄而小，并且很難操作。經(jīng)過(guò)對比，手機版的網(wǎng)頁(yè)主要由方便操作的大按鈕組成，顯得簡(jiǎn)潔。
如果你的網(wǎng)頁(yè)適配了手機，你的網(wǎng)頁(yè)在手機上將會(huì )更加地易用。以下是網(wǎng)頁(yè)適配手機的 3 個(gè)小技巧。
只允許垂直滾動(dòng)。不應該通過(guò)水平滑動(dòng)頁(yè)面來(lái)查看主要內容。你要確保你的網(wǎng)頁(yè)使用了相對應的寬度與位置值，圖片縮放后也能正常顯示。你還要把網(wǎng)頁(yè)的主目錄放在顯目位置并剔除那些會(huì )干擾用戶(hù)操作的元素。
限制橫欄按鈕的數量——最好是僅有一列的頁(yè)面布局。
不要將桌面版的網(wǎng)頁(yè)與手機版的網(wǎng)頁(yè)互混。因為這樣的網(wǎng)頁(yè)會(huì )比桌面版的更加難用。
2. 將主操作按鈕設計得更友好
手機用戶(hù)很容易忽視手機界面上的元素，所以主操作按鈕要放在顯要位置。手機頁(yè)面的主操作按鈕(Calls-To-Action Buttons)可能會(huì )跟桌面版的有所不同，所以你要從在用戶(hù)的角度考慮，來(lái)決定你要把主操作按鈕放在什么位置。
主操作按鈕要容易點(diǎn)擊，且在頁(yè)面中不要被其他的元素干擾。
3. 菜單欄要簡(jiǎn)短而中肯
桌面版網(wǎng)頁(yè)里有豐富的菜單欄可能會(huì )很方便用戶(hù)使用，但手機用戶(hù)不會(huì )有耐心滑動(dòng)長(cháng)長(cháng)的選項欄，找他們想要的東西。
你需要考慮如何盡可能地減少菜單欄選項。例如，只留下主要產(chǎn)品的目錄。根據「拇指原則」，盡量不要使用超過(guò) 7 條不同分類(lèi)的條目。
簡(jiǎn)短且區分明顯的目錄更方便用戶(hù)操作
還有，你的分類(lèi)列表應該是符合你用戶(hù)的需求的：
它應該是根據用戶(hù)的使用頻率與給用戶(hù)帶來(lái)的價(jià)值來(lái)排列。
它不應該使用晦澀難懂的措辭。菜單欄的設定需要具備商業(yè)素養，不然你會(huì )混淆菜單欄的類(lèi)別。如使用文縐縐、比喻性的措辭可能會(huì )迷惑用戶(hù)，致使更多用戶(hù)離開(kāi)。
【移動(dòng)網(wǎng)頁(yè)設計原則】相關(guān)文章：
簡(jiǎn)潔的網(wǎng)頁(yè)設計原則04-23
網(wǎng)頁(yè)設計黃金配色原則08-07
移動(dòng)端網(wǎng)頁(yè)設計方法03-14
移動(dòng)端網(wǎng)頁(yè)設計的技巧07-29
移動(dòng)端網(wǎng)頁(yè)設計技巧01-03
網(wǎng)頁(yè)設計的原則是什么11-28