手機網頁設計技巧

導語：如果你希望你的網頁更好地適配移動裝置，那麼你必須解決網頁在所有移動裝置上的相容性問題。下面是一些改進方法，歡迎參考！

　　1. 把搜尋欄放在醒目的位置

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

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

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

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

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

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

由於沒有實體商品，所以你的照片、視訊跟其他內容就是你呈現給使用者的商品。因此，它們必須是高質量的`，這樣才能在使用者瀏覽網頁時，吸引他們的眼球，使其點選網頁檢視更多資訊。

　　4. 設計手指友好操作的圖示

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

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

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

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

　　5. 讓使用者探索完你的產品後，再讓他們登入賬戶

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

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

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

不登入狀態下，可瀏覽網頁資訊

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