移動網頁設計原則

導語：如果你希望你的網頁更好地適配移動設備，那麼你必須解決網頁在所有移動設備上的兼容性問題。以下是改進措施，你可以參照着來確保你的網頁能適配移動設備，並給用户帶來愉悦的體驗。

　　1. 讓你的整個網頁都適合在移動端上瀏覽

相比在移動端上直接操作桌面版網頁，經過適配的移動網頁會大大方便用户的操作使用。舉個例子，下圖是手機端 Domino 披薩官網的兩個版本，一個是桌面版網頁，另一個是已適配手機端的網頁。

桌面版網頁手機的小屏幕裏顯得窄而小，並且很難操作。經過對比，手機版的網頁主要由方便操作的大按鈕組成，顯得簡潔。

如果你的網頁適配了手機，你的網頁在手機上將會更加地易用。以下是網頁適配手機的 3 個小技巧。

只允許垂直滾動。不應該通過水平滑動頁面來查看主要內容。你要確保你的網頁使用了相對應的寬度與位置值，圖片縮放後也能正常顯示。你還要把網頁的主目錄放在顯目位置並剔除那些會干擾用户操作的元素。

限制橫欄按鈕的數量——最好是僅有一列的頁面佈局。

不要將桌面版的網頁與手機版的網頁互混。因為這樣的'網頁會比桌面版的更加難用。

　　2. 將主操作按鈕設計得更友好

手機用户很容易忽視手機界面上的元素，所以主操作按鈕要放在顯要位置。手機頁面的主操作按鈕(Calls-To-Action Buttons)可能會跟桌面版的有所不同，所以你要從在用户的角度考慮，來決定你要把主操作按鈕放在什麼位置。

主操作按鈕要容易點擊，且在頁面中不要被其他的元素干擾。

　　3. 菜單欄要簡短而中肯

桌面版網頁裏有豐富的菜單欄可能會很方便用户使用，但手機用户不會有耐心滑動長長的選項欄，找他們想要的東西。

你需要考慮如何儘可能地減少菜單欄選項。例如，只留下主要產品的目錄。根據「拇指原則」，儘量不要使用超過 7 條不同分類的條目。

簡短且區分明顯的目錄更方便用户操作

還有，你的分類列表應該是符合你用户的需求的：

它應該是根據用户的使用頻率與給用户帶來的價值來排列。

它不應該使用晦澀難懂的措辭。菜單欄的設定需要具備商業素養，不然你會混淆菜單欄的類別。如使用文縐縐、比喻性的措辭可能會迷惑用户，致使更多用户離開。