【編者按】本文作者為來自 Mainstreethost 的站內(nèi)營銷專家 Kim Speier，主要介紹移動網(wǎng)頁設(shè)計的九個原則驹饺，每個原則都配有生動的實例。文章系國內(nèi) ITOM 管理平臺 OneAPM 編譯呈現(xiàn)窿给，點此查看文章的第一部分拳缠，以下為第二部分，主要介紹移動網(wǎng)頁設(shè)計的另5個重要原則马澈。
5）提供用戶所需的搜索結(jié)果
一些移動用戶在訪問網(wǎng)頁時目的十分明確瓢省，他們很少在模糊的菜單或一頁又一頁的商品間徘徊。搜索功能對于這類用戶而言非常重要痊班。而這也是要在搜索結(jié)果的第一頁就提供精確結(jié)果的重要原因勤婚。搜索完成后，請為用戶提供一些篩選條件涤伐，如價格馒胆、相關(guān)度、暢銷商品等凝果，以便篩選出最適合的結(jié)果祝迂。
除此之外，為每件商品配上圖片器净、價格及簡短介紹也十分重要型雳，這樣搜索頁面就不至于全是文字，用戶也能更容易找到合適的商品。圖片應(yīng)該具有可點擊性四啰，并且可以在同一窗口放大宁玫，這樣用戶不需要打開單獨的頁面，就能更好地觀察商品柑晒。而當(dāng)用戶找到自己需要的商品時欧瘪，他們可以點擊這件商品，了解更多信息匙赞，然后下單購買佛掖。
在美國體育運動裝備品牌Under Armour的網(wǎng)站上，搜索“帽衫”涌庭，頁面上將顯示371個搜索結(jié)果芥被，并提供一些篩選條件來縮小搜索范圍。用戶在頁面頂端可以根據(jù)不同類別進行選擇坐榆，通過價格拴魄、尺碼篩選出評價最高或價格最低的商品。
在搜索時席镀，用戶希望有更多的選項匹中，以便更加直接地搜索想要的商品，并且他們只愿意花時間查看與搜索結(jié)果最相關(guān)的商品豪诲。而UnderArmour的搜索頁面為用戶提供了充足的搜索條件顶捷，而且十分簡潔，適合移動設(shè)備屎篱。
6）聯(lián)系信息一目了然
對任何電子商務(wù)網(wǎng)站而言服赎，能讓用戶快速聯(lián)系到商家都十分重要。當(dāng)用戶對訂單有疑問時交播，都希望能盡快得到答復(fù)或解決重虑。這就意味著移動頁面上需要突出標(biāo)示“在線呼叫”功能，同時提供聯(lián)系表格或郵箱秦士，讓用戶根據(jù)自身情況或問題的緊急程度選擇適合的聯(lián)系方式嚎尤。
“常見問題解答”頁面對用戶也很有幫助。用戶不需要聯(lián)系商家伍宦，就能自行在網(wǎng)站上查找解決問題的方法。大部分用戶表示更愿意自己解決問題乏梁。
適合移動網(wǎng)站提供聯(lián)系信息的另一種方式次洼，是在網(wǎng)站中嵌入谷歌地圖，允許用戶點擊地圖遇骑、放大或縮小卖毁、查找路線，讓用戶確信能夠找到網(wǎng)站的實體地址。
鞋類零售網(wǎng)站Zappos非常了解讓用戶快速與他們?nèi)〉寐?lián)系亥啦，咨詢訂單炭剪、退貨及促銷信息的重要性，所以他們在網(wǎng)站首頁的頁眉上方放置了客服電話和在線呼叫功能翔脱。當(dāng)用戶需要即時幫助奴拦，只要一步便能直接聯(lián)系到他們，而不用翻遍整個網(wǎng)站找出“聯(lián)系我們”的頁面了届吁。
7）謹(jǐn)記“拇指”原則
目前為止错妖，對那些不適合移動設(shè)備的網(wǎng)站，用戶最普遍的投訴是“按鈕太小疚沐，文字也難以認(rèn)清”暂氯。移動或響應(yīng)式網(wǎng)頁設(shè)計的基本原則是：用戶不需要將內(nèi)容或鏈接放大縮小，就能夠閱讀或點擊亮蛔。所以在網(wǎng)頁設(shè)計過程中痴施，請確保每一個按鈕大小合適，并且與其它按鈕或鏈接的間隔適中究流，便于點擊辣吃。
其次，在設(shè)計移動網(wǎng)站中的鏈接或頁面時梯嗽，確保用戶只需將其放大縮小就能點擊齿尽，而不需要按壓屏幕。按照拇指原則灯节，適應(yīng)拇指點擊屏幕的最小面積是44px x 44px循头。要讓網(wǎng)頁適合所有智能手機的屏幕尺寸可能比較難，但通常建議在設(shè)計網(wǎng)頁時盡可能以老式手機為模型炎疆，因為老式手機的屏幕一般都比較小卡骂。這樣才能保證網(wǎng)頁內(nèi)容在不同的移動平臺上都能清晰顯示。
美國西南航空公司（Southwest Airlines）移動網(wǎng)頁上的按鈕相當(dāng)易于點擊形入，并且按鈕顯示的文本也很清晰全跨。他們的頁面幾乎能兼容所有尺寸的屏幕，并且為用戶提供了數(shù)量有限的搜索條件亿遂。用戶不會因為多余的內(nèi)容或不斷涌現(xiàn)的行為召喚組件而忘記訪問網(wǎng)站的最初目的——搜索航班或處理現(xiàn)有訂單浓若。
8）縮短（加載）時間
如今的用戶已越來越?jīng)]有耐心，而移動用戶更甚蛇数。許多用戶都是在忙碌的狀態(tài)下打開網(wǎng)站挪钓，所以別讓他們等候頁面加載。頁面加載速度需兼容WiFi環(huán)境和非WiFi環(huán)境耳舅，加載時間不超過4秒鐘最為理想碌上。
50%以上的移動用戶希望頁面在4秒鐘或更短時間內(nèi)加載完畢，80%的用戶對智能手機現(xiàn)有的網(wǎng)頁瀏覽速度不滿意。許多潛在用戶由于一些可控的原因（除信號不佳外）而退出網(wǎng)站馏予。網(wǎng)頁設(shè)計者必須記滋煳唷：將整個網(wǎng)頁的大小控制在1MB以內(nèi)，并且理智地使用圖片和視頻霞丧。要知道呢岗，網(wǎng)頁上多媒體內(nèi)容越多，它的加載速度就越慢蚯妇。
用戶希望快速找到所需信息敷燎，新聞或出版行業(yè)的企業(yè)對這一點非常了解。紐約時報（New York Times）的移動網(wǎng)站即使在非WiFi環(huán)境下箩言，也能幾乎瞬間加載硬贯。許多移動用戶會在忙碌中抽出僅有的一兩分鐘在自己喜歡的新聞平臺上瀏覽信息，或者只想知道一天之中世界上發(fā)生的事情陨收，而紐約時報網(wǎng)站就能做到迅速加載各種新聞信息饭豹。
9) 避免彈出窗口
一般情況下，用戶并不熱衷于網(wǎng)頁上的彈出廣告或問卷务漩，就更別提那些使用移動設(shè)備的用戶了拄衰。這些彈出窗口的關(guān)閉按鈕通常都太小，用戶需要將它們放大才能點擊饵骨，有時候會因為手誤打開彈出廣告翘悉。移動設(shè)備用戶的時間是很寶貴的，而彈出窗口會耽誤他們的時間居触。
出版行業(yè)網(wǎng)站或那些允許用戶訂閱內(nèi)容的網(wǎng)站更需要注意這一點妖混。這些網(wǎng)頁在設(shè)計時，可能會包含彈出窗口轮洋，以便于用戶注冊電郵提醒或訂閱電子報制市，但實際上移動用戶并不需要這些。如果移動用戶想注冊弊予，他們會根據(jù)情況自行在網(wǎng)站上找到類似的登記表格祥楣。
美國網(wǎng)絡(luò)新聞媒體BuzzFeed電腦端和移動端的網(wǎng)站都提供新聞和廣告，但他們并沒有使用任何彈出窗口讓用戶點擊或訂閱電子報汉柒。
在下面的截圖中误褪，可以看到該網(wǎng)站上由世界著名朗姆酒品牌摩根船長（Captain Morgan）發(fā)布的“15 Tiny Ways to Take Yourself Less Seriously”。點擊文章碾褂，用戶不會受到彈出窗口的干擾兽间。如果用戶想點擊摩根船長網(wǎng)站的超鏈接，盡管點擊就是了斋扰，不會彈出不必要的窗口。BuzzFeed對訂閱電子報的促銷也采用相同方式。他們給予用戶自由選擇的權(quán)利传货，而不是強迫用戶閱讀自己不喜歡的內(nèi)容屎鳍。
你的網(wǎng)頁設(shè)計適應(yīng)移動模式嗎？
因為移動搜索的突出優(yōu)勢问裕，以及更多的用戶試圖通過移動客戶端下單逮壁，網(wǎng)頁移動模式已然成為趨勢，任何人都無法置身事外粮宛。移動用戶對于市場影響及購買行為的影響越來越大窥淆，而且沒有放緩的跡象。如果你決定重新設(shè)計電腦端網(wǎng)頁巍杈，就必須通過響應(yīng)性設(shè)計優(yōu)化網(wǎng)頁在不同客戶端上的兼容性忧饭，或者另外設(shè)計移動版網(wǎng)頁。作為市場營銷人員筷畦，我們必須秉承移動優(yōu)先的理念词裤，不然面臨的不僅是搜索排名的下滑，在消費者心中的地位也會受到影響鳖宾。
OneAPM Browser Insight 是一個基于真實用戶的 Web 前端性能監(jiān)控平臺吼砂，能幫助大家定位網(wǎng)站性能瓶頸，實現(xiàn)網(wǎng)站加速效果可視化鼎文；支持瀏覽器渔肩、微信、App 瀏覽 HTML 和 HTML5 頁面拇惋。想閱讀更多技術(shù)文章周偎，請訪問 OneAPM 官方技術(shù)博客。
本文轉(zhuǎn)自 OneAPM 官方博客
原文地址：http://blog.hubspot.com/marketing/9-mobile-web-design-principles
