這篇文章將會根據移動端網頁的設計要素和特別的用戶需求，來討論如何設計移動端網頁。

一個好的移動網頁是怎么設計的?

Google 最近的研究表明，移動設備的用戶更樂于再次訪問適配了移動設備的網頁。這意味著，你的網頁在移動端也同樣要做到界面友好。但究竟怎樣才能使移動端網頁有良好的用戶體驗呢?

實際上，有大量的重要細節需要你在設計移動網頁的時候考慮。請看下圖：

圖片來源：business2community

移動設備用戶將會注意到你們這些增強用戶體驗的設計并會為此感到愉悅的。

如果你希望你的網頁更好地適配移動設備，那么你必須解決網頁在所有移動設備上的兼容性問題。以下是 12 條改進措施，你可以參照著來確保你的網頁能適配移動設備，并給用戶帶來愉悅的體驗。

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

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

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

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

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

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

圖片來源：Google

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

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

手機用戶很容易忽視手機界面上的元素，所以主操作按鈕要放在顯要位置。手機頁面的主操作按鈕(Calls-To-Action Buttons)可能會跟桌面版的有所不同，所以你要從在用戶的角度考慮，來決定你要把主操作按鈕放在什么位置。(微信號 appsolution 后臺回復「按鈕」獲取 app 按鈕設計的指南)

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

3. 菜單欄要簡短而中肯

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

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

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

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

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

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

4. 把搜索欄放在醒目的位置

如果搜索是你網頁里的一個主要的功能，那么就把它放在網頁的主要位置，因為這是讓有明確目的的用戶找到他們想要東西的最快途徑。用戶在查找特定消息時，通常會選擇搜索。

所以，搜索欄應該是放在手機用戶一下子就能看到的地方。你可以把你的網頁搜索欄放置在接近主頁頂部的位置，并附上搜索說明文字。

搜索欄要放在網頁的顯目位置(比如，屏幕頂部)就像 MACY 的網站

5. 設計好你的網頁，不要讓用戶通過捏拉來縮放網頁

通過捏拉網頁來查看文本或照片時，常常會使用戶感到心累。如果用戶不得不通過捏拉來查看網頁，很可能會錯過一些重要的細節信息。因此，你設計的網頁應該是不需要調整大小才能使用的。

Asos 使用了合適的照片尺寸，但字體卻不夠大。在小而亮的屏幕中看這些小字體實在是會令用戶頭疼：

6. 只使用高質量的網頁素材

由于沒有實體商品，所以你的照片、視頻跟其他內容就是你呈現給用戶的商品。因此，它們必須是高質量的，這樣才能在用戶瀏覽網頁時，吸引他們的眼球，使其點擊網頁查看更多信息。

圖片來源：Yoox

7. 設計手指友好操作的圖標

如果你在設計一個手指操作友好的界面，那么你網頁按鈕的大小是要按恰當的尺寸設計的。

據 MIT 觸擊實驗室研究結果顯示，人們手指指頭的平均大小在 10~14mm 之間，指尖的大小在 8~10mm 之間，所以 10mm X 10mm 大小的圖標是最佳的最小尺寸圖標。

圖片來源：uxmag

還有重要的一點是，你要考慮可點擊元素間的相對距離。如果按鈕間靠得太近，手機用戶可能會不時按錯按鈕。

為了處理這些錯誤并防止用戶誤操作，你必須確保按鈕有恰當的尺寸和空間位置，這樣才更好地適合手機用戶操作。下圖是手機網頁中，按鈕間最佳的最小距離。

8. 讓用戶探索完你的產品后，再讓他們登入賬戶

如果在用戶沒有看到你的網頁內容前，就要求他們登錄或注冊的話，會有非常高的交互成本，并且也違反了互惠原則。過早地要求用戶注冊，可以導致超過 85% 的用戶流失。

Netflix 提供了一個月的免費使用，但用戶只有登錄賬戶才能瀏覽網頁內容。

用戶在登入個人信息前，通常會先瀏覽網站的內容，看看這個網站是干什么的(用戶對于陌生的網站更會如此)。為了給用戶提供一個無障礙瀏覽的體驗，移動網頁應該這樣設計:

不登錄狀態下，可瀏覽網頁信息

不登錄狀態下，可購買商品。

當用戶需要瀏覽更多的內容時，要求用戶登錄，不然只能看到有限的內容。

想為提供更好的注冊體驗?在微信號 appsolution 后臺回復「注冊」可獲取本文作者 Nick 和蘋果年度十佳應用得主「方片收集」創始人的心得分享，以及知名協作溝通軟件 Slack 的實例。

9. 告訴用戶最適合的屏幕方向

如果網頁有適配手機橫屏與豎屏的瀏覽，那么要提醒用戶切換成最佳的屏幕方向。因為除非你提示用戶要旋轉屏幕(比如彈出一個會話框)，不然他們只會照常瀏覽網頁。

圖片來源：Google

10. 產品圖片可放大

顧客總會想看要購買的商品照片。在網上商城，顧客總是希望瀏覽高清特寫圖片來了解商品(尤其是衣服)細節，不然用戶便會感到不快。

用戶要可通過雙擊圖片或點擊圖片變焦按鈕，輕松地放大商品照片來查看更多的細節。此外，圖片放大的部分也應該是高分辨率的。

既包含有商品的概覽圖，也能讓顧客自由地放大照片來查看商品的細節。圖片來源：thinkwithGoogle

11. 在其他設備上能同步切換

并不是所有的用戶都喜歡用手機來購買商品，他們中有部分人僅僅是用手機來搜索產品信息。

你得讓用戶能簡便地在不同設備間保存或共享頁面，這樣才能收獲更多的忠實用戶。用戶可以從智能手機轉換到其他設備或瀏覽器來繼續搜索、購買或預訂商品。

用戶能夠通過郵箱或社交媒介分享頁面內容來征求購買意見。

用戶可以同步賬戶里愿望清單，收藏以及購物車里的內容。

MR.PORTER 提供了一系列的分享選項

12. 讓用戶在一個頁面里操作

在手機上，切換不同的窗口瀏覽網頁是很麻煩的事，用戶也會有更大的機率返回不到之前的網頁。所以，盡量讓用戶只待在一個頁面里，避免彈出新的窗口。此外，也要確保主操作按鈕都在同一個窗口中。

附贈提示：避免出現「完整網頁」的標簽

當訪客看見「完整網頁」的選項時，他們會認為移動端網頁是精簡版的，轉而會去切換成完整網頁版。

使用「桌面」代替「完整」可以減少這些認知偏差。讓用戶能夠在不同版本網頁間便捷切換，且把「完整版」替換成「桌面/電腦端」，以便清楚地表達兩者都能帶來完整的體驗。

總結

就像其他的設計原理一樣，以上詳細的小技巧僅僅是一個開始。你要能融會貫通地使用這些技巧，來產出最好的產品。你要記住，設計不僅僅是為設計師本人設計，更是為用戶設計的。

你的設計要在不增加用戶學習成本的前提下滿足用戶的需求。