2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

【編者按】本文作者為來自 Mainstreethost 的站內(nèi)營銷專家 Kim Speier，主要介紹移動(dòng)網(wǎng)頁設(shè)計(jì)的九個(gè)原則，每個(gè)原則都配有生動(dòng)的實(shí)例。文章系國內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)，以下為正文的第一部分。

如今，移動(dòng)設(shè)備已占據(jù)優(yōu)勢(shì)地位，谷歌2015年發(fā)布的報(bào)告中顯示，52%的搜索流量和幾乎50%的購物流量來自移動(dòng)設(shè)備。因此，具有移動(dòng)端兼容性的網(wǎng)頁設(shè)計(jì)已從奢談變成了必需品。2015年4月“Mobilegeddon”轉(zhuǎn)變了眾人熟悉的市場營銷模式，將適應(yīng)性設(shè)計(jì)和移動(dòng)網(wǎng)站理念放在了首位。

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

值得重視的是，盡管移動(dòng)設(shè)備的使用率越來越高，我們也不應(yīng)該忽視電腦端的用戶。現(xiàn)如今，用戶在電腦網(wǎng)頁上的停留時(shí)間和瀏覽頁數(shù)是移動(dòng)設(shè)備端的三倍，人們更喜歡通過電腦閱讀新聞和觀看視頻。

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

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

無論你是否已經(jīng)完全采用移動(dòng)策略，還是仍然在尋找最佳方案，在設(shè)計(jì)移動(dòng)網(wǎng)頁時(shí)，請(qǐng)牢記以下原則：

##1）菜單簡潔明了 一般情況下，移動(dòng)設(shè)備或平板電腦用戶不會(huì)滾動(dòng)大型的菜單欄或點(diǎn)擊數(shù)量眾多的子菜單，因?yàn)槠聊淮笮∮邢?#xff0c;無法顯示太多內(nèi)容。菜單中必須包含簡練的產(chǎn)品和服務(wù)概述，用戶才能縮小他們的查找范圍，這一點(diǎn)很重要。這樣，用戶才能從簡潔明了的菜單欄中點(diǎn)擊某個(gè)類別或利用搜索功能進(jìn)一步篩選。

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

在這家餐廳的移動(dòng)網(wǎng)頁上，企業(yè)標(biāo)志下方有一個(gè)簡單的下拉式列表，展開后有5個(gè)選項(xiàng)。因?yàn)?“菜單”和“位置”按鈕已經(jīng)在頁眉顯示，所以就不需要再放入列表。這樣的菜單欄雖然簡單，卻在網(wǎng)站前端和中心位置顯示了最重要的信息。

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

##2）表單簡短貼心 當(dāng)需要在網(wǎng)頁上填寫聯(lián)系信息時(shí)，用戶可不想沒完沒了地填很多內(nèi)容。他們往往傾向于臺(tái)式電腦或筆記本，而不是移動(dòng)設(shè)備來完成此類操作。因此，在設(shè)計(jì)用戶信息表單時(shí)，請(qǐng)省略掉不必要的字段。

如果聯(lián)系表單只是用來訂閱電子報(bào)，那么僅需登記用戶姓名和郵箱即可。即使是支付表單，也請(qǐng)將字段數(shù)減到最少。用戶明白在線購物需要填寫更多的信息，但網(wǎng)頁設(shè)計(jì)者必須體諒用戶的時(shí)間，尤其是當(dāng)網(wǎng)站的移動(dòng)流量不斷增加時(shí)。

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

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

同時(shí)，表格中諸如電話號(hào)碼、卡片類型和發(fā)卡機(jī)構(gòu)是可選項(xiàng)，用戶可根據(jù)自身情況選擇填寫。即使用戶不提供這些信息，也不影響問題的解決和需求的滿足。用戶對(duì)于自己的財(cái)務(wù)信息的保護(hù)意識(shí)非常強(qiáng)，所以請(qǐng)給他們一些空間，不僅要滿足用戶的需求，還要建立起他們對(duì)網(wǎng)站的信任。

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

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

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

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

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

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

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

以上為移動(dòng)網(wǎng)頁設(shè)計(jì)的前四個(gè)原則，欲知后續(xù)內(nèi)容，敬請(qǐng)關(guān)注 OneAPM 官方技術(shù)博客。

OneAPM Browser Insight 是一個(gè)基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺(tái)，能幫助大家定位網(wǎng)站性能瓶頸，實(shí)現(xiàn)網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想技術(shù)文章，請(qǐng)?jiān)L問 OneAPM 官方技術(shù)博客。

本文轉(zhuǎn)自 OneAPM 官方博客

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

轉(zhuǎn)載于:https://my.oschina.net/oneapmofficial/blog/677042

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。