手機用戶(hù)越來(lái)越希望能夠便捷有效地在移動(dòng)網(wǎng)頁(yè)端處理事情。無(wú)論是購買(mǎi)商品，查看商品價(jià)格或是添加內容到郵件列表，網(wǎng)頁(yè)操作的用戶(hù)體驗要盡可能地無(wú)縫自然。
這篇文章將會(huì )根據移動(dòng)端網(wǎng)頁(yè)的設計要素和特別的用戶(hù)需求，來(lái)討論如何設計移動(dòng)端網(wǎng)頁(yè)。
Google 最近的研究表明，移動(dòng)設備的用戶(hù)更樂(lè )于再次訪(fǎng)問(wèn)適配了移動(dòng)設備的網(wǎng)頁(yè)。這意味著(zhù)，你的網(wǎng)頁(yè)在移動(dòng)端也同樣要做到界面友好。但究竟怎樣才能使移動(dòng)端網(wǎng)頁(yè)有良好的用戶(hù)體驗呢？
實(shí)際上，有大量的重要細節需要你在設計移動(dòng)網(wǎng)頁(yè)的時(shí)候考慮。請看下圖：
移動(dòng)設備用戶(hù)將會(huì )注意到你們這些增強用戶(hù)體驗的設計并會(huì )為此感到愉悅的。圖片來(lái)源：business2community
如果你希望你的網(wǎng)頁(yè)更好地適配移動(dòng)設備，那么你必須解決網(wǎng)頁(yè)在所有移動(dòng)設備上的兼容性問(wèn)題。
以下是 12 條改進(jìn)措施，你可以參照著(zhù)來(lái)確保你的網(wǎng)頁(yè)能適配移動(dòng)設備，并給用戶(hù)帶來(lái)愉悅的體驗。
相比在移動(dòng)端上直接操作桌面版網(wǎng)頁(yè)，經(jīng)過(guò)適配的移動(dòng)網(wǎng)頁(yè)會(huì )大大方便用戶(hù)的操作使用。舉個(gè)例子，下圖是手機端 Domino 披薩官網(wǎng)的兩個(gè)版本，一個(gè)是桌面版網(wǎng)頁(yè)，另一個(gè)是已適配手機端的網(wǎng)頁(yè)。
桌面版網(wǎng)頁(yè)手機的小屏幕里顯得窄而小，并且很難操作。經(jīng)過(guò)對比，手機版的網(wǎng)頁(yè)主要由方便操作的大按鈕組成，顯得簡(jiǎn)潔。
如果你的網(wǎng)頁(yè)適配了手機，你的網(wǎng)頁(yè)在手機上將會(huì )更加地易用。以下是網(wǎng)頁(yè)適配手機的 3 個(gè)小技巧。
只允許垂直滾動(dòng)。不應該通過(guò)水平滑動(dòng)頁(yè)面來(lái)查看主要內容。你要確保你的網(wǎng)頁(yè)使用了相對應的寬度與位置值，圖片縮放后也能正常顯示。你還要把網(wǎng)頁(yè)的主目錄放在顯目位置并剔除那些會(huì )干擾用戶(hù)操作的元素。
限制橫欄按鈕的數量——最好是僅有一列的頁(yè)面布局。
圖片來(lái)源：Google
不要將桌面版的網(wǎng)頁(yè)與手機版的網(wǎng)頁(yè)互混。因為這樣的網(wǎng)頁(yè)會(huì )比桌面版的更加難用。
手機用戶(hù)很容易忽視手機界面上的元素，所以主操作按鈕要放在顯要位置。手機頁(yè)面的主操作按鈕（Calls-To-Action Buttons）可能會(huì )跟桌面版的有所不同，所以你要從在用戶(hù)的角度考慮，來(lái)決定你要把主操作按鈕放在什么位置。
主操作按鈕要容易點(diǎn)擊，且在頁(yè)面中不要被其他的元素干擾。圖片來(lái)源：constantcontact
桌面版網(wǎng)頁(yè)里有豐富的菜單欄可能會(huì )很方便用戶(hù)使用，但手機用戶(hù)不會(huì )有耐心滑動(dòng)長(cháng)長(cháng)的選項欄，找他們想要的東西。
你需要考慮如何盡可能地減少菜單欄選項。例如，只留下主要產(chǎn)品的目錄。根據「拇指原則」，盡量不要使用超過(guò) 7 條不同分類(lèi)的條目。
簡(jiǎn)短且區分明顯的目錄更方便用戶(hù)操作
還有，你的分類(lèi)列表應該是符合你用戶(hù)的需求的：
它應該是根據用戶(hù)的使用頻率與給用戶(hù)帶來(lái)的價(jià)值來(lái)排列。
它不應該使用晦澀難懂的措辭。菜單欄的設定需要具備商業(yè)素養，不然你會(huì )混淆菜單欄的類(lèi)別。如使用文縐縐、比喻性的措辭可能會(huì )迷惑用戶(hù)，致使更多用戶(hù)離開(kāi)。
如果搜索是你網(wǎng)頁(yè)里的一個(gè)主要的功能，那么就把它放在網(wǎng)頁(yè)的主要位置，因為這是讓有明確目的的用戶(hù)找到他們想要東西的最快途徑。用戶(hù)在查找特定消息時(shí)，通常會(huì )選擇搜索。
所以，搜索欄應該是放在手機用戶(hù)一下子就能看到的地方。你可以把你的網(wǎng)頁(yè)搜索欄放置在接近主頁(yè)頂部的位置，并附上搜索說(shuō)明文字。
搜索欄要放在網(wǎng)頁(yè)的顯目位置（如屏幕頂部）就像 MACY 的網(wǎng)站
通過(guò)捏拉網(wǎng)頁(yè)來(lái)查看文本或照片時(shí)，常常會(huì )使用戶(hù)感到心累。如果用戶(hù)不得不通過(guò)捏拉來(lái)查看網(wǎng)頁(yè)，很可能會(huì )錯過(guò)一些重要的細節信息。因此，你設計的網(wǎng)頁(yè)應該是不需要調整大小才能使用的。
ASOS 使用了合適的照片尺寸，但字體卻不夠大。在小而亮的屏幕中看這些小字體實(shí)在是會(huì )令用戶(hù)頭疼：
由于沒(méi)有實(shí)體商品，所以你的照片、視頻跟其他內容就是你呈現給用戶(hù)的商品。因此，它們必須是高質(zhì)量的，這樣才能在用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)，吸引他們的眼球，使其點(diǎn)擊網(wǎng)頁(yè)查看更多信息。
圖片來(lái)源：Yoox
如果你在設計一個(gè)手指操作友好的界面，那么你網(wǎng)頁(yè)按鈕的大小是要按恰當的尺寸設計的。
據 MIT 觸擊實(shí)驗室研究結果顯示，人們手指指頭的平均大小在 10~14mm 之間，指尖的大小在 8~10mm 之間，所以 10mm X 10mm 大小的圖標是最佳的最小尺寸圖標。
圖片來(lái)源：uxmag
還有重要的一點(diǎn)是，你要考慮可點(diǎn)擊元素間的相對距離。如果按鈕間靠得太近，手機用戶(hù)可能會(huì )不時(shí)按錯按鈕。
為了處理這些錯誤并防止用戶(hù)誤操作，你必須確保按鈕有恰當的尺寸和空間位置，這樣才更好地適合手機用戶(hù)操作。下圖是手機網(wǎng)頁(yè)中，按鈕間最佳的最小距離。
如果在用戶(hù)沒(méi)有看到你的網(wǎng)頁(yè)內容前，就要求他們登錄或注冊的話(huà)，會(huì )有非常高的交互成本，并且也違反了互惠原則。過(guò)早地要求用戶(hù)注冊，可以導致超過(guò) 85% 的用戶(hù)流失。
Netflix 提供了一個(gè)月的免費使用，但用戶(hù)只有登錄賬戶(hù)才能瀏覽網(wǎng)頁(yè)內容。
用戶(hù)在登入個(gè)人信息前，通常會(huì )先瀏覽網(wǎng)站的內容，看看這個(gè)網(wǎng)站是干什么的（用戶(hù)對于陌生的網(wǎng)站更會(huì )如此）。為了給用戶(hù)提供一個(gè)無(wú)障礙瀏覽的體驗，移動(dòng)網(wǎng)頁(yè)應該這樣設計:
不登錄狀態(tài)下，可瀏覽網(wǎng)頁(yè)信息
不登錄狀態(tài)下，可購買(mǎi)商品。
當用戶(hù)需要瀏覽更多的內容時(shí)，要求用戶(hù)登錄，不然只能看到有限的內容。
想為提供更好的注冊體驗？在微信號 appsolution 后臺回復「注冊」可獲取本文作者 Nick 和蘋(píng)果年度十佳應用得主「方片收集」創(chuàng )始人的心得分享，以及知名協(xié)作溝通軟件 Slack 的實(shí)例。
如果網(wǎng)頁(yè)有適配手機橫屏與豎屏的瀏覽，那么要提醒用戶(hù)切換成最佳的屏幕方向。因為除非你提示用戶(hù)要旋轉屏幕（比如彈出一個(gè)會(huì )話(huà)框），不然他們只會(huì )照常瀏覽網(wǎng)頁(yè)。
圖片來(lái)源：Google
顧客總會(huì )想看要購買(mǎi)的商品照片。在網(wǎng)上商城，顧客總是希望瀏覽高清特寫(xiě)圖片來(lái)了解商品（尤其是衣服）細節，不然用戶(hù)便會(huì )感到不快。
用戶(hù)要可通過(guò)雙擊圖片或點(diǎn)擊圖片變焦按鈕，輕松地放大商品照片來(lái)查看更多的細節。此外，圖片放大的部分也應該是高分辨率的。
既包含有商品的概覽圖，也能讓顧客自由地放大照片來(lái)查看商品的細節。圖片來(lái)源：thinkwithGoogle
并不是所有的用戶(hù)都喜歡用手機來(lái)購買(mǎi)商品，他們中有部分人僅僅是用手機來(lái)搜索產(chǎn)品信息。
你得讓用戶(hù)能簡(jiǎn)便地在不同設備間保存或共享頁(yè)面，這樣才能收獲更多的忠實(shí)用戶(hù)。用戶(hù)可以從智能手機轉換到其他設備或瀏覽器來(lái)繼續搜索、購買(mǎi)或預訂商品。
用戶(hù)能夠通過(guò)郵箱或社交媒介分享頁(yè)面內容來(lái)征求購買(mǎi)意見(jiàn)。
用戶(hù)可以同步賬戶(hù)里愿望清單，收藏以及購物車(chē)里的內容。
MR.PORTER 提供了一系列的分享選項
在手機上，切換不同的窗口瀏覽網(wǎng)頁(yè)是很麻煩的事，用戶(hù)也會(huì )有更大的機率返回不到之前的網(wǎng)頁(yè)。所以，盡量讓用戶(hù)只待在一個(gè)頁(yè)面里，避免彈出新的窗口。此外，也要確保主操作按鈕都在同一個(gè)窗口中。
附贈提示：避免出現「完整網(wǎng)頁(yè)」的標簽
當訪(fǎng)客看見(jiàn)「完整網(wǎng)頁(yè)」的選項時(shí)，他們會(huì )認為移動(dòng)端網(wǎng)頁(yè)是精簡(jiǎn)版的，轉而會(huì )去切換成完整網(wǎng)頁(yè)版。
使用「桌面」代替「完整」可以減少這些認知偏差。讓用戶(hù)能夠在不同版本網(wǎng)頁(yè)間便捷切換，且把「完整版」替換成「桌面/電腦端」，以便清楚地表達兩者都能帶來(lái)完整的體驗。
就像其他的設計原理一樣，以上詳細的小技巧僅僅是一個(gè)開(kāi)始。你要能融會(huì )貫通地使用這些技巧，來(lái)產(chǎn)出最好的產(chǎn)品。你要記住，設計不僅僅是為設計師本人設計，更是為用戶(hù)設計的。
你的設計要在不增加用戶(hù)學(xué)習成本的前提下滿(mǎn)足用戶(hù)的需求。
