移動網頁設計原則

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

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

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

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

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

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

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

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

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

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

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

　　3. 選單欄要簡短而中肯

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

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

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

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

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

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