設(shè)計(jì)師都知道,設(shè)計(jì)不只是為了好看塔逃。設(shè)計(jì)也決定用戶(hù)如何融入一個(gè)產(chǎn)品讯壶,無(wú)論是網(wǎng)站還是app。這是一種交談患雏。導(dǎo)航菜單就是一種交談鹏溯。因?yàn)槿绻脩?hù)不明白使用方式,你的網(wǎng)站或app再漂亮都沒(méi)用淹仑。
圖片來(lái)源:Behance
為什么底部導(dǎo)航如此重要丙挽?
Steven Hoober在他的關(guān)于移動(dòng)設(shè)備使用狀況的研究中發(fā)現(xiàn)肺孵,49%的人依靠一根手指完成手機(jī)上的操作。在下圖中颜阐,手機(jī)屏幕上的畫(huà)面表示大致的觸摸范圍平窘,不同顏色表示用戶(hù)能用拇指在屏幕上觸及的區(qū)域。綠色表示輕易觸及凳怨;黃色表示需要伸長(zhǎng)手指瑰艘;紅色表示需要用戶(hù)改變持握方式。
圖片表示單手操作智能手機(jī)的舒適程度肤舞。圖片來(lái)源:uxmatters
把最重要最常用的操作放在屏幕底部非常重要紫新,因?yàn)樗鼈兡苡靡恢皇种篙p松觸及。
標(biāo)簽欄
許多應(yīng)用遵循這一規(guī)律李剖,將底部導(dǎo)航(又稱(chēng)作標(biāo)簽欄)作為最重要的app功能芒率。Facebook的核心功能一觸即達(dá),能夠在不同功能中迅速切換篙顺。
Facebook 的 iOS 底部標(biāo)簽欄偶芍。
底部導(dǎo)航設(shè)計(jì)的3個(gè)關(guān)鍵
導(dǎo)航通常是搭載用戶(hù)的交通工具。底部導(dǎo)航應(yīng)該承載重要性等同的頂級(jí)目的地德玫。這些目的地需要在app的任何地方留有直接的入口匪蟀。
優(yōu)秀的底部導(dǎo)航設(shè)計(jì)遵循以下3條定律:
1. 只顯示最重要的目的地
在底部導(dǎo)航中使用3到5個(gè)頂級(jí)目的地。如果少于3個(gè)宰僧,請(qǐng)考慮使用標(biāo)簽代替材彪。
底部設(shè)計(jì)導(dǎo)航避免使用5個(gè)以上,因?yàn)辄c(diǎn)擊目標(biāo)相互會(huì)過(guò)于接近琴儿。在標(biāo)簽欄放置過(guò)多的項(xiàng)目查刻,讓人們難以點(diǎn)中他們的目標(biāo)。每多展示一個(gè)標(biāo)簽凤类,app的復(fù)雜性就增加一分穗泵。
如果頂級(jí)目的地確實(shí)有5個(gè)以上,不要用底部導(dǎo)航來(lái)承載這些入口谜疤,請(qǐng)考慮放在其他位置佃延。
避免內(nèi)容滾動(dòng)
小屏幕上顯而易見(jiàn)的解決方式,就是部分隱藏式的導(dǎo)航——不必?fù)?dān)心屏幕空間的局限夷磕,把標(biāo)簽項(xiàng)放入滾動(dòng)的標(biāo)簽欄即可履肃。但是滾動(dòng)的內(nèi)容效率低下,因?yàn)槟愕没瑒?dòng)一下才能看到想要的選項(xiàng)坐桩。
iOS版Rookie Camapp中就存在“看不見(jiàn)就想不到”的問(wèn)題尺棋。
2. 表達(dá)出當(dāng)前位置
沒(méi)有表達(dá)當(dāng)前位置,可能是app菜單中最普遍的錯(cuò)誤绵跷”烀“我在哪里成福?”是用戶(hù)需要回答的基本問(wèn)題之一,這是順利操作的前提荆残。
用戶(hù)應(yīng)該在沒(méi)有任何外部引導(dǎo)的情況下奴艾,一眼就看出如何從A前往B。應(yīng)該提供適當(dāng)?shù)囊曈X(jué)線索(圖標(biāo)内斯、標(biāo)簽和顏色)蕴潦,操作就不需要任何說(shuō)明了。
圖標(biāo)
正因?yàn)榈撞繉?dǎo)航操作以圖標(biāo)方式展現(xiàn)俘闯,它們所表達(dá)的內(nèi)容應(yīng)該要適合通過(guò)圖標(biāo)來(lái)表達(dá)潭苞。有些用戶(hù)熟知的通用圖標(biāo),通常這些都表示搜索真朗、郵件萄传、打印等功能。不幸的是蜜猾,“通用”圖標(biāo)很少。app的設(shè)計(jì)師常常用圖標(biāo)來(lái)代表一些非常難以分辨的功能振诬。
老版本的Bloom.fm應(yīng)用Android版蹭睡。真是相當(dāng)難理解用戶(hù)當(dāng)前所處位置。
我在這篇文章《圖標(biāo)是優(yōu)秀用戶(hù)體驗(yàn)的一部分》中強(qiáng)調(diào)了這個(gè)問(wèn)題赶么。
顏色
避免在底部標(biāo)簽欄使用不同顏色的圖標(biāo)和文字標(biāo)簽肩豁。應(yīng)當(dāng)使用app的主色來(lái)表示視覺(jué)焦點(diǎn)。
左圖:不同顏色的圖標(biāo)讓app看起來(lái)像是圣誕樹(shù)辫呻。右圖:應(yīng)該只用主色清钥。
遵循一條簡(jiǎn)單的法則——用app的主色來(lái)提亮當(dāng)前的底部導(dǎo)航項(xiàng)(包括圖標(biāo)和文字標(biāo)簽)。
iOS版Twitter的底部菜單欄放闺。Messages是當(dāng)前選中項(xiàng)祟昭。
如果底部導(dǎo)航欄有背景色,就要用黑白的圖標(biāo)和文字標(biāo)簽怖侦。
左圖:避免使用彩色圖標(biāo)和彩色背景的組合篡悟。右圖:使用黑白圖形。
文字標(biāo)簽
文字標(biāo)簽要為導(dǎo)航圖標(biāo)提供簡(jiǎn)短有意義的描述匾寝。不要用太長(zhǎng)的標(biāo)簽搬葬,因?yàn)樗鼈儾荒芙財(cái)嗷驌Q行。
避免換行艳悔、截?cái)嗪涂s小文字標(biāo)簽急凰。
菜單元素要易于瀏覽。用戶(hù)要能理解他點(diǎn)擊某個(gè)元素時(shí)會(huì)發(fā)生什么猜年。
點(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)端的固定導(dǎo)航欄。單位是邏輯像素(dp)补疑。來(lái)源:Material Design歧沪。
標(biāo)簽欄的小紅點(diǎn)
可以在標(biāo)簽欄顯示小紅點(diǎn),表示有相關(guān)的新信息莲组。
可以用低調(diào)的方式給標(biāo)簽欄圖標(biāo)加上小紅點(diǎn)诊胞。
3. 讓導(dǎo)航不言自明
優(yōu)秀的導(dǎo)航應(yīng)該感覺(jué)像一只隱形的手,在操作途中指引用戶(hù)锹杈。畢竟撵孤,如果用戶(hù)都無(wú)法找到,那最酷的功能和最有吸引人的內(nèi)容都沒(méi)用竭望。
表現(xiàn)
每個(gè)底部導(dǎo)航圖標(biāo)都要通向某個(gè)目的地邪码。而不能是打開(kāi)菜單或其他彈出窗口。點(diǎn)按底部導(dǎo)航圖標(biāo)應(yīng)該直接通向相應(yīng)界面咬清,或者刷新當(dāng)前激活的界面闭专。
不要用標(biāo)簽欄提供控制項(xiàng),用來(lái)操作當(dāng)前界面或app模式中的元素旧烧。如果需要提供操作項(xiàng)影钉,請(qǐng)改用工具欄。
iOS的工具欄
保持統(tǒng)一
盡可能在每種情況下都顯示標(biāo)簽欄掘剪。這樣能給用戶(hù)一種視覺(jué)上可靠的感覺(jué)平委。
不要因?yàn)楣δ懿豢捎镁鸵瞥硞€(gè)標(biāo)簽。如果你在某些情況下移除一個(gè)標(biāo)簽夺谁,其他情況確保留肆汹,就會(huì)讓你的app界面感覺(jué)不可靠、難以預(yù)料予权。最佳解決方案是保證所有標(biāo)簽都是可用的昂勉,然后解釋為什么某個(gè)標(biāo)簽沒(méi)有內(nèi)容。例如扫腺,如果用戶(hù)沒(méi)有離線文件岗照,Dropbox里的Offline標(biāo)簽會(huì)顯示一個(gè)界面,教你如何添加。這個(gè)功能就是空狀態(tài)攒至。
Dropbox應(yīng)用的空狀態(tài)界面厚者。
隱藏標(biāo)簽欄
如果界面里是滾動(dòng)的信息流,標(biāo)簽欄可以在滾動(dòng)查看更多內(nèi)容時(shí)隱藏迫吐,向下滑動(dòng)嘗試回頂部時(shí)再顯示库菲。
底部導(dǎo)航欄可以根據(jù)滾動(dòng),動(dòng)態(tài)顯示和隱藏志膀。
視覺(jué)愉悅
避免使用橫向滑動(dòng)的動(dòng)效來(lái)切換界面熙宇。激活和未激活的界面,切換過(guò)渡效果應(yīng)該使用疊加漸隱效果溉浙。
疊加漸隱動(dòng)畫(huà)烫止。來(lái)源:Material Design
總結(jié)
底部導(dǎo)航應(yīng)該:
可見(jiàn)且結(jié)構(gòu)合理(使用3到5個(gè)頂級(jí)目的地,并且避免可滾動(dòng)內(nèi)容)
清晰(導(dǎo)航欄元素要易于瀏覽戳稽,點(diǎn)擊區(qū)域要足夠大馆蠕,方便操作)
簡(jiǎn)單(保證每個(gè)導(dǎo)航圖標(biāo)都通向合適的目的地,而且通過(guò)底部導(dǎo)航要能夠觸達(dá)所有元素)
英文原文:https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.3z87f9p1s