移動網頁設計9大原則——第2部分

【編者按】本文做者爲來自 Mainstreethost 的站內營銷專家 Kim Speier，主要介紹移動網頁設計的九個原則，每一個原則都配有生動的實例。文章系國內 ITOM 管理平臺 OneAPM 編譯呈現，點此查看文章的第一部分，如下爲第二部分，主要介紹移動網頁設計的另5個重要原則。

##5）提供用戶所需的搜索結果 一些移動用戶在訪問網頁時目的十分明確，他們不多在模糊的菜單或一頁又一頁的商品間徘徊。搜索功能對於這類用戶而言很是重要。而這也是要在搜索結果的第一頁就提供精確結果的重要緣由。搜索完成後，請爲用戶提供一些篩選條件，如價格、相關度、暢銷商品等，以便篩選出最適合的結果。

除此以外，爲每件商品配上圖片、價格及簡短介紹也十分重要，這樣搜索頁面就不至於全是文字，用戶也能更容易找到合適的商品。圖片應該具備可點擊性，而且能夠在同一窗口放大，這樣用戶不須要打開單獨的頁面，就能更好地觀察商品。而當用戶找到本身須要的商品時，他們能夠點擊這件商品，瞭解更多信息，而後下單購買。

在美國體育運動裝備品牌Under Armour的網站上，搜索「帽衫」，頁面上將顯示371個搜索結果，並提供一些篩選條件來縮小搜索範圍。用戶在頁面頂端能夠根據不一樣類別進行選擇，經過價格、尺碼篩選出評價最高或價格最低的商品。

在搜索時，用戶但願有更多的選項，以便更加直接地搜索想要的商品，而且他們只願意花時間查看與搜索結果最相關的商品。而UnderArmour的搜索頁面爲用戶提供了充足的搜索條件，並且十分簡潔，適合移動設備。

##6）聯繫信息一目瞭然 對任何電子商務網站而言，能讓用戶快速聯繫到商家都十分重要。當用戶對訂單有疑問時，都但願能儘快獲得答覆或解決。這就意味着移動頁面上須要突出標示「在線呼叫」功能，同時提供聯繫表格或郵箱，讓用戶根據自身狀況或問題的緊急程度選擇適合的聯繫方式。

「常見問題解答」頁面對用戶也頗有幫助。用戶不須要聯繫商家，就能自行在網站上查找解決問題的方法。大部分用戶表示更願意本身解決問題。

適合移動網站提供聯繫信息的另外一種方式，是在網站中嵌入谷歌地圖，容許用戶點擊地圖、放大或縮小、查找路線，讓用戶確信可以找到網站的實體地址。

鞋類零售網站Zappos很是瞭解讓用戶快速與他們取得聯繫，諮詢訂單、退貨及促銷信息的重要性，因此他們在網站首頁的頁眉上方放置了客服電話和在線呼叫功能。當用戶須要即時幫助，只要一步便能直接聯繫到他們，而不用翻遍整個網站找出「聯繫咱們」的頁面了。

##7）謹記「拇指」原則 目前爲止，對那些不適合移動設備的網站，用戶最廣泛的投訴是「按鈕過小，文字也難以認清」。移動或響應式網頁設計的基本原則是：用戶不須要將內容或連接放大縮小，就可以閱讀或點擊。因此在網頁設計過程當中，請確保每個按鈕大小合適，而且與其它按鈕或連接的間隔適中，便於點擊。

其次，在設計移動網站中的連接或頁面時，確保用戶只需將其放大縮小就能點擊，而不須要按壓屏幕。按照拇指原則，適應拇指點擊屏幕的最小面積是44px x 44px。要讓網頁適合全部智能手機的屏幕尺寸可能比較難，但一般建議在設計網頁時儘量以老式手機爲模型，由於老式手機的屏幕通常都比較小。這樣才能保證網頁內容在不一樣的移動平臺上都能清晰顯示。

美國西南航空公司（Southwest Airlines）移動網頁上的按鈕至關易於點擊，而且按鈕顯示的文本也很清晰。他們的頁面幾乎能兼容全部尺寸的屏幕，而且爲用戶提供了數量有限的搜索條件。用戶不會由於多餘的內容或不斷涌現的行爲召喚組件而忘記訪問網站的最初目的——搜索航班或處理現有訂單。

##8）縮短（加載）時間 現在的用戶已愈來愈沒有耐心，而移動用戶更甚。許多用戶都是在忙碌的狀態下打開網站，因此別讓他們等候頁面加載。頁面加載速度需兼容WiFi環境和非WiFi環境，加載時間不超過4秒鐘最爲理想。

50%以上的移動用戶但願頁面在4秒鐘或更短期內加載完畢，80%的用戶對智能手機現有的網頁瀏覽速度不滿意。許多潛在用戶因爲一些可控的緣由（除信號不佳外）而退出網站。網頁設計者必須記住：將整個網頁的大小控制在1MB之內，而且理智地使用圖片和視頻。要知道，網頁上多媒體內容越多，它的加載速度就越慢。

用戶但願快速找到所需信息，新聞或出版行業的企業對這一點很是瞭解。紐約時報（New York Times）的移動網站即便在非WiFi環境下，也能幾乎瞬間加載。許多移動用戶會在忙碌中抽出僅有的一兩分鐘在本身喜歡的新聞平臺上瀏覽信息，或者只想知道一天之中世界上發生的事情，而紐約時報網站就能作到迅速加載各類新聞信息。

##9) 避免彈出窗口 通常狀況下，用戶並不熱衷於網頁上的彈出廣告或問卷，就更別提那些使用移動設備的用戶了。這些彈出窗口的關閉按鈕一般都過小，用戶須要將它們放大才能點擊，有時候會由於手誤打開彈出廣告。移動設備用戶的時間是很寶貴的，而彈出窗口會耽誤他們的時間。

出版行業網站或那些容許用戶訂閱內容的網站更須要注意這一點。這些網頁在設計時，可能會包含彈出窗口，以便於用戶註冊電郵提醒或訂閱電子報，但實際上移動用戶並不須要這些。若是移動用戶想註冊，他們會根據狀況自行在網站上找到相似的登記表格。

美國網絡新聞媒體BuzzFeed電腦端和移動端的網站都提供新聞和廣告，但他們並無使用任何彈出窗口讓用戶點擊或訂閱電子報。

在下面的截圖中，能夠看到該網站上由世界著名朗姆酒品牌摩根船長（Captain Morgan）發佈的「15 Tiny Ways to Take Yourself Less Seriously」。點擊文章，用戶不會受到彈出窗口的干擾。若是用戶想點擊摩根船長網站的超連接，儘管點擊就是了，不會彈出沒必要要的窗口。BuzzFeed對訂閱電子報的促銷也採用相同方式。他們給予用戶自由選擇的權利，而不是強迫用戶閱讀本身不喜歡的內容。

##你的網頁設計適應移動模式嗎？ 由於移動搜索的突出優點，以及更多的用戶試圖經過移動客戶端下單，網頁移動模式已然成爲趨勢，任何人都沒法置身事外。移動用戶對於市場影響及購買行爲的影響愈來愈大，並且沒有放緩的跡象。若是你決定從新設計電腦端網頁，就必須經過響應性設計優化網頁在不一樣客戶端上的兼容性，或者另外設計移動版網頁。做爲市場營銷人員，咱們必須秉承移動優先的理念，否則面臨的不只是搜索排名的下滑，在消費者心中的地位也會受到影響。

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

本文轉自 OneAPM 官方博客

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