阿裡超實用的移動WEB六大設計心法

 　　相比App，移動Web成本少，實現難度低，數據追蹤更全面，還能快速調整。優點非常多，隨著全民寬帶的提高，未來也會是一大熱點，今天阿裡的師尹同學總結了超多超全面的移動Web六大設計心法，特別推薦閱讀收藏。

　　在這個移動互聯網時代，我們經常聽到這樣的話：

　　「我有個改變世界的點子，就差做個app了。」

　　「這是我們的商業計劃書，雖然還沒有開始推廣，但我們真的擊中了用戶的痛點。總之，先做個app吧。」

　　隨著移動互聯網思維的滲透，以及智能手機浪潮的影響，一波波app前僕後繼，截至2015年7月，App Store應用程序總數已達到150萬個，「先做個app」幾乎成為所有項目的第一步。

　　可以理解的是，大家傾心於app必定源於其獨特優勢，例如酷炫的交互效果、優質的用戶界面、支持離線模式消息推送，以及在用戶客戶端和各渠道的”存在感”等等。對於需要體驗性極強的大型手游、社交類應用、拍照類工具型應用、以及金融類功能復雜的平台應用，app無疑是目前最適合不過的載體。可是，所有項目都必須做成app嗎?對於那些無需做成app的項目，還有比app更適合的實現方式嗎?

　　答案是肯定的，有。那就是移動Web。

　　移動Web的最大特點，是用戶可以直接通過浏覽器訪問網絡上的應用程序。那麼，移動Web和app相比具備哪些優勢呢?

　　1. 節約成本

　　app：需要投入客戶端和服務端開發，以及耗費開銷支持多平台和多設備。

　　移動Web：僅需H5頁面開發，使用響應式設計的移動Web可到處運行。

　　2. 降低門檻

　　app：需要下載並等待安裝，占用手機容量，無Wi-Fi下流量耗費大。

　　移動Web：支持跨平台，無安裝成本，用戶門檻較低。

　　3. 追蹤數據

　　app：下載來源無法追蹤，對渠道細分統計能力有限。

　　移動Web：方便追蹤用戶來源，媲美PC浏覽器下常規站點統計。

　　4. 快速調整

　　app：傷不起的審核周期，遇到緊急問題無法快速處理。

　　移動Web：站點服務器自己可控，利於快速更新迭代。

　　盡管移動Web有如上諸多優勢，但不可否認的是，浏覽的體驗短期內還無法超越原生應用。那麼，對於生長在移動Web上的業務和服務，如何做好設計確提升用戶體驗將尤為重要。

　　移動Web並不是把PC端內容直接搬到手機上來顯示，而是需要結合移動端用戶的使用場景，突出最核心的功能給用戶，並保持界面簡潔。

　　我們簡單總結了一些重要的移動Web設計原則與大家分享。

　　一、針對首頁與網站浏覽方式

　　1. 快速取得用戶需要的內容：

　　PC首頁通常身兼迎賓、資訊中心和廣告推薦多重角色，但是移動Web首頁的主要用途應該是將用戶和他們所需要的內容快速連接，一個好的移動Web首頁能夠幫助用戶立即取得所需信息。

　　2. 網站下載速度越快越好：

　　手機用戶不耐於等待，網站內容顯示過慢會讓用戶果斷離開你的網頁。因此，網站的圖片大小、浏覽器的緩存、JavaScript、CSS、HTML、伺服器的回應時間，都是你可以優化的空間。

　　3. 將用戶直接導入移動Web：

　　確保用戶從搜索結果頁等站點自動導入手機版網頁是成功留住使用者的第一步。

　　4. 將行動點擺在顯眼的位置：

　　手機用戶很容易漏看菜單，因此一定要把主要的行動點放在用戶絕對看得到的地方，使用戶最容易完成你想讓他完成的事。

　　5. 保持菜單簡潔有力：

　　詳盡的菜單也許在PC端效果很好，但對手機用戶而言，可沒耐心在冗長的菜單尋找類目，所以想辦法盡量縮減菜單類目的數量。

　　6. 提供回到首頁的捷徑：

　　通常用戶預期只要按下網頁上方角落的logo就能回到首頁，否則覺得很不方便。

　　7. 別讓廣告喧賓奪主：

　　宣傳信息及廣告可能會遮蓋四周內容，或是吸引了眼球而妨礙用戶原本使用路徑。與大型插頁式廣告相比，用戶對於可以輕松關閉的橫幅廣告更有好感。

　　8. 把站內搜索功能放在顯眼位置：

　　用戶通過搜索來取得自己需要的特定咨詢，因此搜索功能必須擺放在網站的顯眼處，一眼就能看見。對於網頁上方顯眼處且允許自由輸入文字的搜索框，用戶的評價最好。

　　9. 在搜索框輸入關鍵字時自動列出熱搜：

　　10. 確保站內搜索結果符合用戶需求：

　　用戶不想花時間刷網頁查看多頁搜索結果，並且會根據站內搜索功能所傳回的前幾個結果來評斷搜索功能的好壞，因此搜索結果第一頁必須提供最精確的結果。用戶也可以使用自動即時查詢和錯字修正等智能搜索功能，讓用戶在小熒幕上搜索查詢時更輕松省力。

　　11. 提供篩選器更方便站內搜索：

　　用戶使用篩選器來縮小搜尋結果范圍，有些用戶發現無法縮減網站的搜尋結果數量後，就離開了網站。確保用戶的篩選結果不會落入死胡同，為避免用戶遇到這類問題，應該告知用戶在套用某篩選器後，系統能傳回幾個搜索結果。

　　12. 引導用戶取得更精確的站內搜索結果：

　　如果用戶目標人群非常多元，不妨考慮在用戶開始搜索前先問他們幾個問題，確保傳回的結果來自最符合用戶需求的內容區段。

　　13. 在首頁顯示用戶最近浏覽的商品：

　　二、針對產品頁面

　　1. 在商品頁面推薦類似的商品 ：

　　2. 顯示可展開產品特寫圖片：

　　3. 提供商品評論區供用戶浏覽並留下評論：

　　4. 提供Email或SNS分享產品信息的選項：

　　有些用戶不習慣在行動裝置上完成轉換, 方便用戶在各種裝置上儲存或公用資訊，可以留住他們的心。例如，曾經發現他們可以在某求職網站上通過電子郵件將職缺寄給自己，以便日後應聘。

　　三、針對網站登陸及賬戶信息

　　1. 讓用戶注冊會員，登入系統：

　　2. 讓用戶通過社交網站登入系統：

　　3. 商品可以被暫存在購物車供之後結賬使用：

　　4. 暫存購物車的商品, 在其他裝置下也可完成結賬：

　　四、針對交易與轉化

　　1. 讓用戶先浏覽，再決定：

　　2. 顯示所有結賬步驟，並讓用戶知道目前結賬進度：

　　3. 讓用戶以訪客身份購物：

　　4. 運用現有信息來提升便利性：

　　針對注冊會員，可以讓系統記住他們的偏好並預先填入這些資訊。如果是新顧客，可以提供他們可能已經用過的第三方結帳服務。現在網站能提供第三方付款服務的選項，這麼做不但能讓原本就使用這些付款服務的顧客輕松購物，網站也能預先填入出貨信息。

　　5. 提供點選通話按鈕來協助用戶完成復雜操作 ：

　　為轉化過程中需要輸入復雜或敏感信息的階段提供點選通話功能。

　　五、針對表單輸入方式

　　1. 簡化必須提供的信息以及輸入方式：

　　對用戶來說，網站如果能自動顯示數字鍵盤讓他們輸入郵編或生日等數字，他們會很開心。另外，他們也喜歡會隨著自己輸入信息自動換欄的表單。反過來說，不論是為了輸入信息而得重復按下小小的表單欄位，還是需要自行將手機鍵盤切換成數字模式，他們都覺得很麻煩。

　　2. 為每項操作選用用最簡單的輸入方式：

　　3. 顯示日歷，方便用戶選擇日期：

　　4. 善用標簽和即時驗證功能，盡可能減少表單錯誤：

　　清楚標示表單，並確認用戶在實際輸入信息時能看到標簽。同樣地，將標簽放進欄位中也會造成問題，用戶發現標簽在輸入信息時消失了，讓他們頓時少了指引。另外，信息輸入完畢後先立即確認是否有誤再送出，也能省下使用者重新送出資訊的麻煩。

　　六、針對便利性及裝置尺寸外觀

　　1. 為行動裝置制作完整的專用網站：

　　2. 避免讓用戶雙指收合縮放畫面：

　　用戶通常覺得用雙指收合縮放畫面很麻煩，有時還會因此漏看重要信息和號召性文字。因此，行動網站的設計應講求不需在浏覽時調整大小。有些行動網站甚至會停用雙指收合縮放畫面的功能，只要網站設計得恰到好處，用戶根本不會用到這項功能，也不會注意到這項功能消失了。

　　3. 讓用戶知道最適合浏覽網站的畫面方向：

　　用戶往往維持同一個畫面方向，直到有需要切換顯示方向為為止(例如看小字或影片)。可以讓網站隨著裝置畫面方向 (橫向和直向))自動調整，也可以提醒用戶切換到最合適的畫面方向。不論采用哪個方式，重要的號召性文字在用戶未切換到建議顯示方向的情況下，一定也要能完整顯示。

　　4. 讓用戶在同一個浏覽器視窗就能完成一切操作：

　　在智能手機上切換視窗除了不方便外，訪客也有可能無法順利返回網站，建議避免在用戶按下號召性文字時開啟新視窗，讓使用者留在原頁面。另外，用戶有時會開啟新視窗來搜索優惠券，不妨直接在網站上提供這類優惠，省下用戶到別處搜尋的麻煩。

　　5. 清楚說明為什麼網站需要用戶的位置信息：

　　無論如何，應該讓用戶了解他們需要提供所在地的原因。建議將所在地欄目預設為空白，並使用清楚的號召性文字讓用戶自行決定是否填寫所在地。

　　6. 避免使用完整版網站的字眼：

　　研究參與者發現可以選擇浏覽「完整版網站」或「移動版網站」時，他們會假設移動網站的內容是簡化版本，因此選擇浏覽完整版網站。某位研究參與者偏好電腦版網站，因為這版網站的「資訊更豐富」，但事實上移動和電腦版網站的內容完全相同。建議您使用「電腦版網站」這個字眼來代替「完整版網站」，避免使用者產生上述想法。

　　以上就是想要分享給大家的移動Web設計原則。隨著無線互聯網技術的發展，Web產品和app產品的界限很可能會變得模糊起來。也許通過浏覽器，也可以實現效果好、可推送。同一個服務之所以會有兩種不同呈現形式的存在，完全取決於用戶在不同使用場景下的體驗差異。