2019獨角獸企業重金招聘Python工程師標準>>>

【編者按】本文作者為來自 Mainstreethost 的站內營銷專家 Kim Speier，主要介紹移動網頁設計的九個原則，每個原則都配有生動的實例。文章系國內 ITOM 管理平臺 OneAPM 編譯呈現，以下為正文的第一部分。

如今，移動設備已占據優勢地位，谷歌2015年發布的報告中顯示，52%的搜索流量和幾乎50%的購物流量來自移動設備。因此，具有移動端兼容性的網頁設計已從奢談變成了必需品。2015年4月“Mobilegeddon”轉變了眾人熟悉的市場營銷模式，將適應性設計和移動網站理念放在了首位。

有了谷歌的移動友好算法，你或許以為當代的所有網頁都具備移動兼容性。但實際情況卻是：近50%的市場營銷者沒有將網頁優化使之兼容移動設備，雖然這些網站的搜索流量和排名都在增長。導致這種現象的原因是什么呢？是因為移動友好算法的影響不足以促進網頁重新設計？還是移動網頁并沒有給這些網站帶來用戶？

值得重視的是，盡管移動設備的使用率越來越高，我們也不應該忽視電腦端的用戶。現如今，用戶在電腦網頁上的停留時間和瀏覽頁數是移動設備端的三倍，人們更喜歡通過電腦閱讀新聞和觀看視頻。

這些數據對于我們了解移動用戶的行為十分重要，不容小覷。因為移動設備的屏幕較小，而用戶通常在忙碌的情況下使用移動設備，所以他們更偏向于完整清晰顯示的網站。如果用戶無法快速從某個網站上獲取所需信息，他們就會轉向另一個網站。這就意味著，網站必須迅速向用戶提供他們所查找的信息，一刻也不能耽誤。

基于這一點，許多網頁設計者在搭建網站時，會遵循移動第一的原則，確保網頁加載時間短，圖表數量少，或者內容大小適中，不需要用戶去放大縮小。如果你的網頁還不兼容移動設備，別驚慌，改造網頁使其符合響應性設計，或另外設計移動版網頁并沒有你想的那么復雜。現在已經有許多網站搭建平臺可供使用，而且他們與舊網站使用的搭建平臺類似。

無論你是否已經完全采用移動策略，還是仍然在尋找最佳方案，在設計移動網頁時，請牢記以下原則：

##1）菜單簡潔明了 一般情況下，移動設備或平板電腦用戶不會滾動大型的菜單欄或點擊數量眾多的子菜單，因為屏幕大小有限，無法顯示太多內容。菜單中必須包含簡練的產品和服務概述，用戶才能縮小他們的查找范圍，這一點很重要。這樣，用戶才能從簡潔明了的菜單欄中點擊某個類別或利用搜索功能進一步篩選。

在理想的菜單欄中，選項數量應該控制在5到6個，并且這些選項能給用戶提供足夠的信息以方便查找。同時，如果情況允許，主菜單中包含的子菜單不應多于兩個。至于菜單樣式，“漢堡式”菜單已被廣泛采用，因此網頁上并不需要標注出“菜單”字樣。有些公司在傳統的菜單式樣中加入了自己的風格，例如意大利燒烤餐廳Carrabba’s的網站。

在這家餐廳的移動網頁上，企業標志下方有一個簡單的下拉式列表，展開后有5個選項。因為 “菜單”和“位置”按鈕已經在頁眉顯示，所以就不需要再放入列表。這樣的菜單欄雖然簡單，卻在網站前端和中心位置顯示了最重要的信息。

當用戶訪問餐廳的網站時，可能會查看菜單、尋找餐廳位置，或者在線下單。Carrabba’s的網站能讓用戶迅速快捷地完成以上所有事情，而不至于陷入滿是開胃菜、意大利面以及歡樂時光特惠的子菜單中。

##2）表單簡短貼心 當需要在網頁上填寫聯系信息時，用戶可不想沒完沒了地填很多內容。他們往往傾向于臺式電腦或筆記本，而不是移動設備來完成此類操作。因此，在設計用戶信息表單時，請省略掉不必要的字段。

如果聯系表單只是用來訂閱電子報，那么僅需登記用戶姓名和郵箱即可。即使是支付表單，也請將字段數減到最少。用戶明白在線購物需要填寫更多的信息，但網頁設計者必須體諒用戶的時間，尤其是當網站的移動流量不斷增加時。

我們可以用A/B測試來決定表單的理想字段數，即每次改變或移除表單中的一個字段，然后評估表單的完成比例。比如，用戶更愿意填寫無需登記電話號碼的表格，所以在測試時，比較一下有無該字段以及該字段為可選或必填項時的不同效果，然后將這些結果與實際獲得的投資回報率做對比，決定是否在表單中保留該字段。

萬事達卡（MasterCard）在設計聯系表單時，就十分周到地考慮到了移動端用戶的時間。用戶在他們的網站上只需填寫姓名、郵箱、主題和評論，就能與卡片的支持團隊取得聯系。這些信息足以讓工作人員查詢到用戶的賬戶信息，然后將用戶的需求轉給合適的支持部門，整個過程并不需要耗費太多時間。

同時，表格中諸如電話號碼、卡片類型和發卡機構是可選項，用戶可根據自身情況選擇填寫。即使用戶不提供這些信息，也不影響問題的解決和需求的滿足。用戶對于自己的財務信息的保護意識非常強，所以請給他們一些空間，不僅要滿足用戶的需求，還要建立起他們對網站的信任。

##3）簡化表單字段 除了要考慮到表單的字段數，還需要減少用戶輸入的字數。表單字段可以采用多種類型，如下拉式、復選框式以及日歷式。當用戶輸入支付信息、物流信息以及預訂行程時，這些類型的字段就能派得上用場。

同時，盡量將表單做得清晰明了，使必填項和可選項一目了然。讓回頭用戶更便捷地應用自動填寫功能，縮短購物的過程，并為那些不愿注冊賬號的新用戶提供訪客支付選項。

對于旅游公司而言，利用簡潔的表單為潛在客戶提供便捷的搜索是關鍵。全球最大的網絡旅游公司Expedia在這方面堪稱完美典范——網站上的按鈕一目了然，用戶搜索時也只需填寫很少的字段。

當用戶在Expedia的網站上查詢航班時，點擊“出發城市”或“到達城市”按鈕，無需輸入完整的城市或機場名稱，只需填寫城市或機場代碼，下拉框中就會出現建議地址以供選擇。而且網站上的日歷功能也比其它網站便捷許多——用戶可以在同一頁面上查看日歷并選擇出發及到達日期。

##4）通過行為召喚組件（CTAs）吸引用戶眼球 行為召喚組件對任何網站設計而言都是必要的，在移動網頁中尤為重要。和電腦端用戶相比，移動端用戶訪問網站的目的更加明確。所以在設計移動網頁時，盡可能將行為召喚組件放在最顯眼的黃金位置。

理想情況下，將行為召喚組件放置在頁眉上方，用突出的顏色或字體顯示，在合理的范圍內讓它們更加醒目，并清晰地表達其內容。后續的操作步驟則需要非常清晰，這樣用戶就不用花時間去考慮接下來應該做什么。

棒約翰披薩（Papa John’s）將假日促銷信息放在網站上最有利的位置，鼓勵用戶在線訂餐時為家人或朋友挑選一份禮物。他們加粗了促銷信息的文字部分，使其更加醒目，同時也與網站的整體色調及品牌風格相搭配。最重要的是，用戶明白點擊行為召喚組件后將看到什么。商家并沒有用華麗的辭藻和圖片來迷惑用戶，用戶只需迅速登入網站然后登出，就能立刻買到他們最愛的披薩。

以上為移動網頁設計的前四個原則，欲知后續內容，敬請關注 OneAPM 官方技術博客。

OneAPM Browser Insight 是一個基于真實用戶的 Web 前端性能監控平臺，能幫助大家定位網站性能瓶頸，實現網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想技術文章，請訪問 OneAPM 官方技術博客。

本文轉自 OneAPM 官方博客

原文地址：http://blog.hubspot.com/marketing/9-mobile-web-design-principles

轉載于:https://my.oschina.net/oneapmofficial/blog/677042

總結

以上是生活随笔為你收集整理的移动网页设计9大原则——第1部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。