熱文推薦
- 網(wǎng)站pr值如何提高--深圳網(wǎng)站分享p…
- 建設(shè)金融網(wǎng)站建設(shè)需要多少費用?
- 深圳網(wǎng)站建設(shè):定制網(wǎng)站開發(fā)的網(wǎng)頁…
- 站長必看:四個決定網(wǎng)站生死的重要…
- 深圳福田網(wǎng)站建設(shè)與維護(hù),網(wǎng)站建設(shè)…
- 2016年春節(jié)放假通知
- 如何利用網(wǎng)頁設(shè)計提高電商營銷率
- 如何設(shè)計網(wǎng)站才能夠在搜索引擎當(dāng)中…
- 網(wǎng)站建設(shè)費用受哪些因素影響?
- 產(chǎn)品或服務(wù)的營銷計劃是什么
![](/assets/images/zhaoshang.png)
移動端用戶體驗:底部導(dǎo)航
設(shè)計不只是為了好看。設(shè)計也決定用戶如何融入一個產(chǎn)品,無論是網(wǎng)站還是app。這是一種交談。導(dǎo)航就是一種交談。因為如果用戶不明白使用方式,你的網(wǎng)站或app再漂亮都沒用。
為什么底部導(dǎo)航如此重要?
Steven Hoober在他的關(guān)于移動設(shè)備使用狀況的研究中發(fā)現(xiàn),49%的人依靠一根手指完成手機(jī)上的操作。在下圖中,手機(jī)屏幕上的畫面表示大致的觸摸范圍,不同顏色表示用戶能用拇指在屏幕上觸及的區(qū)域。綠色表示輕易觸及;黃色表示需要伸長手指;紅色表示需要用戶改變持握方式。
把重要常用的操作放在屏幕底部非常重要,因為它們能用一只手指輕松觸及。
標(biāo)簽欄
許多應(yīng)用遵循這一規(guī)律,將底部導(dǎo)航(又稱作標(biāo)簽欄)作為重要的app功能。Facebook的核心功能一觸即達(dá),能夠在不同功能中迅速切換。
底部導(dǎo)航設(shè)計的3個關(guān)鍵
導(dǎo)航通常是搭載用戶的交通工具。底部導(dǎo)航應(yīng)該承載重要性等同的頂級目的地。這些目的地需要在app的任何地方留有直接的入口。
優(yōu)秀的底部導(dǎo)航設(shè)計遵循以下3條定律:
1.只顯示重要的目的地
在底部導(dǎo)航中使用3到5個頂級目的地。如果少于3個,請考慮使用標(biāo)簽代替。
底部導(dǎo)航避免使用5個以上,因為點擊目標(biāo)相互會過于接近。在標(biāo)簽欄放置過多的項目,讓人們難以點中他們的目標(biāo)。每多展示一個標(biāo)簽,app的復(fù)雜性就增加一分。
如果頂級目的地確實有5個以上,不要用底部導(dǎo)航來承載這些入口,請考慮放在其他位置。
避免內(nèi)容滾動
小屏幕上顯而易見的解決方式,就是部分隱藏式的導(dǎo)航——不必?fù)?dān)心屏幕空間的局限,把標(biāo)簽項放入滾動的標(biāo)簽欄即可。但是滾動的內(nèi)容效率低下,因為你得滑動一下才能看到想要的選項。
2.表達(dá)出當(dāng)前位置
沒有表達(dá)當(dāng)前位置,可能是app菜單中普遍的錯誤。“我在哪里?”是用戶需要回答的基本問題之一,這是順利操作的前提。
用戶應(yīng)該在沒有任何外部引導(dǎo)的情況下,一眼就看出如何從A前往B。應(yīng)該提供適當(dāng)?shù)囊曈X線索(圖標(biāo)、標(biāo)簽和顏色),操作就不需要任何說明了。
圖標(biāo)
正因為底部導(dǎo)航操作以圖標(biāo)方式展現(xiàn),它們所表達(dá)的內(nèi)容應(yīng)該要適合通過圖標(biāo)來表達(dá)。有些用戶熟知的通用圖標(biāo),通常這些都表示搜索、郵件、打印等功能。不幸的是,“通用”圖標(biāo)很少。app的設(shè)計師常常用圖標(biāo)來代表一些非常難以分辨的功能。
總結(jié)
底部導(dǎo)航應(yīng)該:
可見且結(jié)構(gòu)合理(使用3到5個頂級目的地,并且避免可滾動內(nèi)容)
清晰(導(dǎo)航欄元素要易于瀏覽,點擊區(qū)域要足夠大,方便操作)
簡單(保證每個導(dǎo)航圖標(biāo)都通向合適的目的地,而且通過底部導(dǎo)航要能夠觸達(dá)所有元素)
http://m.ezekroy.com/jianzhanzhishi/7098.html 移動端用戶體驗:底部導(dǎo)航