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