移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

2018-4-10    藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

設(shè)計(jì)師都知道,設(shè)計(jì)不只是為了好看。設(shè)計(jì)也決定用戶如何融入一個(gè)產(chǎn)品,無論是網(wǎng)站還是app。這是一種交談。導(dǎo)航就是一種交談。因?yàn)槿绻脩舨幻靼资褂梅绞?,你的網(wǎng)站或app再漂亮都沒用。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

為什么底部導(dǎo)航如此重要?

Steven Hoober在他的關(guān)于移動(dòng)設(shè)備使用狀況的研究中發(fā)現(xiàn),49%的人依靠一根手指完成手機(jī)上的操作。在下圖中,手機(jī)屏幕上的畫面表示大致的觸摸范圍,不同顏色表示用戶能用拇指在屏幕上觸及的區(qū)域。綠色表示輕易觸及;黃色表示需要伸長(zhǎng)手指;紅色表示需要用戶改變持握方式。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

圖片來源:uxmatters

圖片表示單手操作智能手機(jī)的舒適程度。

把最重要最常用的操作放在屏幕底部非常重要,因?yàn)樗鼈兡苡靡恢皇种篙p松觸及。

標(biāo)簽欄

許多應(yīng)用遵循這一規(guī)律,將底部導(dǎo)航(又稱作標(biāo)簽欄)作為最重要的app功能。Facebook的核心功能一觸即達(dá),能夠在不同功能中迅速切換。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

Facebook的iOS底部標(biāo)簽欄。

底部導(dǎo)航設(shè)計(jì)的3個(gè)關(guān)鍵

導(dǎo)航通常是搭載用戶的交通工具。底部導(dǎo)航應(yīng)該承載重要性等同的目的地。這些目的地需要在app的任何地方留有直接的入口。

優(yōu)秀的底部導(dǎo)航設(shè)計(jì)遵循以下3條定律:

1. 只顯示最重要的目的地

在底部導(dǎo)航中使用3到5個(gè)目的地。如果少于3個(gè),請(qǐng)考慮使用標(biāo)簽代替。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

底部導(dǎo)航避免使用5個(gè)以上,因?yàn)辄c(diǎn)擊目標(biāo)相互會(huì)過于接近。在標(biāo)簽欄放置過多的項(xiàng)目,讓人們難以點(diǎn)中他們的目標(biāo)。每多展示一個(gè)標(biāo)簽,app的復(fù)雜性就增加一分。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

如果目的地確實(shí)有5個(gè)以上,不要用底部導(dǎo)航來承載這些入口,請(qǐng)考慮放在其他位置。

避免內(nèi)容滾動(dòng)

小屏幕上顯而易見的解決方式,就是部分隱藏式的導(dǎo)航——不必?fù)?dān)心屏幕空間的局限,把標(biāo)簽項(xiàng)放入滾動(dòng)的標(biāo)簽欄即可。但是滾動(dòng)的內(nèi)容效率低下,因?yàn)槟愕没瑒?dòng)一下才能看到想要的選項(xiàng)。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

iOS版Rookie Camapp中就存在“看不見就想不到”的問題。

2. 表達(dá)出當(dāng)前位置

沒有表達(dá)當(dāng)前位置,可能是app菜單中最普遍的錯(cuò)誤?!拔以谀睦铩笔怯脩粜枰卮鸬幕締栴}之一,這是順利操作的前提。

用戶應(yīng)該在沒有任何外部引導(dǎo)的情況下,一眼就看出如何從A前往B。應(yīng)該提供適當(dāng)?shù)囊曈X線索(圖標(biāo)、標(biāo)簽和顏色),操作就不需要任何說明了。

(1)圖標(biāo)

正因?yàn)榈撞繉?dǎo)航操作以圖標(biāo)方式展現(xiàn),它們所表達(dá)的內(nèi)容應(yīng)該要適合通過圖標(biāo)來表達(dá)。有些用戶熟知的通用圖標(biāo),通常這些都表示搜索、郵件、打印等功能。不幸的是,“通用”圖標(biāo)很少。app的設(shè)計(jì)師常常用圖標(biāo)來代表一些非常難以分辨的功能。

老版本的Bloom.fm應(yīng)用Android版。真是相當(dāng)難理解用戶當(dāng)前所處位置。

(2)顏色

避免在底部標(biāo)簽欄使用不同顏色的圖標(biāo)和文字標(biāo)簽。應(yīng)當(dāng)使用app的主色來表示視覺焦點(diǎn)。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

左圖:不同顏色的圖標(biāo)讓app看起來像是圣誕樹;右圖:應(yīng)該只用主色。

遵循一條簡(jiǎn)單的法則——用app的主色來提亮當(dāng)前的底部導(dǎo)航項(xiàng)(包括圖標(biāo)和文字標(biāo)簽)。

iOS版Twitter的底部菜單欄。Messages是當(dāng)前選中項(xiàng)。

如果底部導(dǎo)航欄有背景色,就要用黑白的圖標(biāo)和文字標(biāo)簽。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

左圖:避免使用彩色圖標(biāo)和彩色背景的組合;右圖:使用黑白圖形。

(3)文字標(biāo)簽

文字標(biāo)簽要為導(dǎo)航圖標(biāo)提供簡(jiǎn)短有意義的描述。不要用太長(zhǎng)的標(biāo)簽,因?yàn)樗鼈儾荒芙財(cái)嗷驌Q行。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航

避免換行、截?cái)嗪涂s小文字標(biāo)簽。

菜單元素要易于瀏覽。用戶要能理解他點(diǎn)擊某個(gè)元素時(shí)會(huì)發(fā)生什么。

(4)點(diǎn)擊尺寸

目標(biāo)區(qū)域足夠大,才易于點(diǎn)擊。將界面寬度按操作項(xiàng)的數(shù)量等分,計(jì)算每個(gè)底部導(dǎo)航操作項(xiàng)的寬度?;蛘撸阉械撞繉?dǎo)航項(xiàng)的寬度設(shè)為最寬。

Android規(guī)范建議按照下圖的尺寸設(shè)計(jì)移動(dòng)端的底部導(dǎo)航欄。

移動(dòng)端用戶體驗(yàn):底部導(dǎo)航


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔