移动网页设计9大原则——第1部分
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
【編者按】本文作者為來自 Mainstreethost 的站內(nèi)營銷專家 Kim Speier，主要介紹移動網(wǎng)頁設(shè)計的九個原則，每個原則都配有生動的實例。文章系國內(nèi) ITOM 管理平臺 OneAPM 編譯呈現(xiàn)，以下為正文的第一部分。
如今，移動設(shè)備已占據(jù)優(yōu)勢地位，谷歌2015年發(fā)布的報告中顯示，52%的搜索流量和幾乎50%的購物流量來自移動設(shè)備。因此，具有移動端兼容性的網(wǎng)頁設(shè)計已從奢談變成了必需品。2015年4月“Mobilegeddon”轉(zhuǎn)變了眾人熟悉的市場營銷模式，將適應(yīng)性設(shè)計和移動網(wǎng)站理念放在了首位。
有了谷歌的移動友好算法，你或許以為當(dāng)代的所有網(wǎng)頁都具備移動兼容性。但實際情況卻是：近50%的市場營銷者沒有將網(wǎng)頁優(yōu)化使之兼容移動設(shè)備，雖然這些網(wǎng)站的搜索流量和排名都在增長。導(dǎo)致這種現(xiàn)象的原因是什么呢？是因為移動友好算法的影響不足以促進網(wǎng)頁重新設(shè)計？還是移動網(wǎng)頁并沒有給這些網(wǎng)站帶來用戶？
值得重視的是，盡管移動設(shè)備的使用率越來越高，我們也不應(yīng)該忽視電腦端的用戶。現(xiàn)如今，用戶在電腦網(wǎng)頁上的停留時間和瀏覽頁數(shù)是移動設(shè)備端的三倍，人們更喜歡通過電腦閱讀新聞和觀看視頻。
這些數(shù)據(jù)對于我們了解移動用戶的行為十分重要，不容小覷。因為移動設(shè)備的屏幕較小，而用戶通常在忙碌的情況下使用移動設(shè)備，所以他們更偏向于完整清晰顯示的網(wǎng)站。如果用戶無法快速從某個網(wǎng)站上獲取所需信息，他們就會轉(zhuǎn)向另一個網(wǎng)站。這就意味著，網(wǎng)站必須迅速向用戶提供他們所查找的信息，一刻也不能耽誤。
基于這一點，許多網(wǎng)頁設(shè)計者在搭建網(wǎng)站時，會遵循移動第一的原則，確保網(wǎng)頁加載時間短，圖表數(shù)量少，或者內(nèi)容大小適中，不需要用戶去放大縮小。如果你的網(wǎng)頁還不兼容移動設(shè)備，別驚慌，改造網(wǎng)頁使其符合響應(yīng)性設(shè)計，或另外設(shè)計移動版網(wǎng)頁并沒有你想的那么復(fù)雜。現(xiàn)在已經(jīng)有許多網(wǎng)站搭建平臺可供使用，而且他們與舊網(wǎng)站使用的搭建平臺類似。
無論你是否已經(jīng)完全采用移動策略，還是仍然在尋找最佳方案，在設(shè)計移動網(wǎng)頁時，請牢記以下原則：
##1）菜單簡潔明了 一般情況下，移動設(shè)備或平板電腦用戶不會滾動大型的菜單欄或點擊數(shù)量眾多的子菜單，因為屏幕大小有限，無法顯示太多內(nèi)容。菜單中必須包含簡練的產(chǎn)品和服務(wù)概述，用戶才能縮小他們的查找范圍，這一點很重要。這樣，用戶才能從簡潔明了的菜單欄中點擊某個類別或利用搜索功能進一步篩選。
在理想的菜單欄中，選項數(shù)量應(yīng)該控制在5到6個，并且這些選項能給用戶提供足夠的信息以方便查找。同時，如果情況允許，主菜單中包含的子菜單不應(yīng)多于兩個。至于菜單樣式，“漢堡式”菜單已被廣泛采用，因此網(wǎng)頁上并不需要標(biāo)注出“菜單”字樣。有些公司在傳統(tǒng)的菜單式樣中加入了自己的風(fēng)格，例如意大利燒烤餐廳Carrabba’s的網(wǎng)站。
在這家餐廳的移動網(wǎng)頁上，企業(yè)標(biāo)志下方有一個簡單的下拉式列表，展開后有5個選項。因為 “菜單”和“位置”按鈕已經(jīng)在頁眉顯示，所以就不需要再放入列表。這樣的菜單欄雖然簡單，卻在網(wǎng)站前端和中心位置顯示了最重要的信息。
當(dāng)用戶訪問餐廳的網(wǎng)站時，可能會查看菜單、尋找餐廳位置，或者在線下單。Carrabba’s的網(wǎng)站能讓用戶迅速快捷地完成以上所有事情，而不至于陷入滿是開胃菜、意大利面以及歡樂時光特惠的子菜單中。
##2）表單簡短貼心 當(dāng)需要在網(wǎng)頁上填寫聯(lián)系信息時，用戶可不想沒完沒了地填很多內(nèi)容。他們往往傾向于臺式電腦或筆記本，而不是移動設(shè)備來完成此類操作。因此，在設(shè)計用戶信息表單時，請省略掉不必要的字段。
如果聯(lián)系表單只是用來訂閱電子報，那么僅需登記用戶姓名和郵箱即可。即使是支付表單，也請將字段數(shù)減到最少。用戶明白在線購物需要填寫更多的信息，但網(wǎng)頁設(shè)計者必須體諒用戶的時間，尤其是當(dāng)網(wǎng)站的移動流量不斷增加時。
我們可以用A/B測試來決定表單的理想字段數(shù)，即每次改變或移除表單中的一個字段，然后評估表單的完成比例。比如，用戶更愿意填寫無需登記電話號碼的表格，所以在測試時，比較一下有無該字段以及該字段為可選或必填項時的不同效果，然后將這些結(jié)果與實際獲得的投資回報率做對比，決定是否在表單中保留該字段。
萬事達卡（MasterCard）在設(shè)計聯(lián)系表單時，就十分周到地考慮到了移動端用戶的時間。用戶在他們的網(wǎng)站上只需填寫姓名、郵箱、主題和評論，就能與卡片的支持團隊取得聯(lián)系。這些信息足以讓工作人員查詢到用戶的賬戶信息，然后將用戶的需求轉(zhuǎn)給合適的支持部門，整個過程并不需要耗費太多時間。
同時，表格中諸如電話號碼、卡片類型和發(fā)卡機構(gòu)是可選項，用戶可根據(jù)自身情況選擇填寫。即使用戶不提供這些信息，也不影響問題的解決和需求的滿足。用戶對于自己的財務(wù)信息的保護意識非常強，所以請給他們一些空間，不僅要滿足用戶的需求，還要建立起他們對網(wǎng)站的信任。
##3）簡化表單字段 除了要考慮到表單的字段數(shù)，還需要減少用戶輸入的字?jǐn)?shù)。表單字段可以采用多種類型，如下拉式、復(fù)選框式以及日歷式。當(dāng)用戶輸入支付信息、物流信息以及預(yù)訂行程時，這些類型的字段就能派得上用場。
同時，盡量將表單做得清晰明了，使必填項和可選項一目了然。讓回頭用戶更便捷地應(yīng)用自動填寫功能，縮短購物的過程，并為那些不愿注冊賬號的新用戶提供訪客支付選項。
對于旅游公司而言，利用簡潔的表單為潛在客戶提供便捷的搜索是關(guān)鍵。全球最大的網(wǎng)絡(luò)旅游公司Expedia在這方面堪稱完美典范——網(wǎng)站上的按鈕一目了然，用戶搜索時也只需填寫很少的字段。
當(dāng)用戶在Expedia的網(wǎng)站上查詢航班時，點擊“出發(fā)城市”或“到達城市”按鈕，無需輸入完整的城市或機場名稱，只需填寫城市或機場代碼，下拉框中就會出現(xiàn)建議地址以供選擇。而且網(wǎng)站上的日歷功能也比其它網(wǎng)站便捷許多——用戶可以在同一頁面上查看日歷并選擇出發(fā)及到達日期。
##4）通過行為召喚組件（CTAs）吸引用戶眼球 行為召喚組件對任何網(wǎng)站設(shè)計而言都是必要的，在移動網(wǎng)頁中尤為重要。和電腦端用戶相比，移動端用戶訪問網(wǎng)站的目的更加明確。所以在設(shè)計移動網(wǎng)頁時，盡可能將行為召喚組件放在最顯眼的黃金位置。
理想情況下，將行為召喚組件放置在頁眉上方，用突出的顏色或字體顯示，在合理的范圍內(nèi)讓它們更加醒目，并清晰地表達其內(nèi)容。后續(xù)的操作步驟則需要非常清晰，這樣用戶就不用花時間去考慮接下來應(yīng)該做什么。
棒約翰披薩（Papa John’s）將假日促銷信息放在網(wǎng)站上最有利的位置，鼓勵用戶在線訂餐時為家人或朋友挑選一份禮物。他們加粗了促銷信息的文字部分，使其更加醒目，同時也與網(wǎng)站的整體色調(diào)及品牌風(fēng)格相搭配。最重要的是，用戶明白點擊行為召喚組件后將看到什么。商家并沒有用華麗的辭藻和圖片來迷惑用戶，用戶只需迅速登入網(wǎng)站然后登出，就能立刻買到他們最愛的披薩。
以上為移動網(wǎng)頁設(shè)計的前四個原則，欲知后續(xù)內(nèi)容，敬請關(guān)注 OneAPM 官方技術(shù)博客。
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
轉(zhuǎn)載于:https://my.oschina.net/oneapmofficial/blog/677042
總結(jié)
以上是生活随笔為你收集整理的移动网页设计9大原则——第1部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【其他】配置JIRA
- 下一篇： Windows 下使用 SNMP 来管理