網(wǎng)站建設中移動(dòng)端用戶(hù)體驗:底部導航發(fā)布者：本站     時(shí)間：2022-05-06 10:05:11

設計師都知道，設計不只是為了好看。設計也決定用戶(hù)如何融入一個(gè)產(chǎn)品，無(wú)論是網(wǎng)站還是app。這是一種交談。導航就是一種交談。因為如果用戶(hù)不明白使用方式，你的網(wǎng)站或app再漂亮都沒(méi)用。

為什么底部導航如此重要？
Steven Hoober在他的關(guān)于移動(dòng)設備使用狀況的研究中發(fā)現，49%的人依靠一根手指完成手機上的操作。在下圖中，手機屏幕上的畫(huà)面表示大致的觸摸范圍，不同顏色表示用戶(hù)能用拇指在屏幕上觸及的區域。綠色表示輕易觸及；黃色表示需要伸長(cháng)手指；紅色表示需要用戶(hù)改變持握方式。

移動(dòng)端用戶(hù)體驗:底部導航
圖片表示單手操作智能手機的舒適程度。圖片來(lái)源：uxmatters

把最重要最常用的操作放在屏幕底部非常重要，因為它們能用一只手指輕松觸及。

標簽欄
許多應用遵循這一規律，將底部導航（又稱(chēng)作標簽欄）作為最重要的app功能。Facebook的核心功能一觸即達，能夠在不同功能中迅速切換。

移動(dòng)端用戶(hù)體驗:底部導航
Facebook的iOS底部標簽欄。

底部導航設計的3個(gè)關(guān)鍵
導航通常是搭載用戶(hù)的交通工具。底部導航應該承載重要性等同的頂級目的地。這些目的地需要在app的任何地方留有直接的入口。

優(yōu)秀的底部導航設計遵循以下3條定律：

1. 只顯示最重要的目的地
在底部導航中使用3到5個(gè)頂級目的地。如果少于3個(gè)，請考慮使用標簽代替。

移動(dòng)端用戶(hù)體驗:底部導航

底部導航避免使用5個(gè)以上，因為點(diǎn)擊目標相互會(huì )過(guò)于接近。在標簽欄放置過(guò)多的項目，讓人們難以點(diǎn)中他們的目標。每多展示一個(gè)標簽，app的復雜性就增加一分。

移動(dòng)端用戶(hù)體驗:底部導航

如果頂級目的地確實(shí)有5個(gè)以上，不要用底部導航來(lái)承載這些入口，請考慮放在其他位置。

避免內容滾動(dòng)
小屏幕上顯而易見(jiàn)的解決方式，就是部分隱藏式的導航——不必擔心屏幕空間的局限，把標簽項放入滾動(dòng)的標簽欄即可。但是滾動(dòng)的內容效率低下，因為你得滑動(dòng)一下才能看到想要的選項。

移動(dòng)端用戶(hù)體驗:底部導航
iOS版Rookie Cam app中就存在“看不見(jiàn)就想不到”的問(wèn)題。

2. 表達出當前位置
沒(méi)有表達當前位置，可能是app菜單中最普遍的錯誤?！拔以谀睦?？”是用戶(hù)需要回答的基本問(wèn)題之一，這是順利操作的前提。

用戶(hù)應該在沒(méi)有任何外部引導的情況下，一眼就看出如何從A前往B。應該提供適當的視覺(jué)線(xiàn)索（圖標、標簽和顏色），操作就不需要任何說(shuō)明了。

圖標
正因為底部導航操作以圖標方式展現，它們所表達的內容應該要適合通過(guò)圖標來(lái)表達。有些用戶(hù)熟知的通用圖標，通常這些都表示搜索、郵件、打印等功能。不幸的是，“通用”圖標很少。app的設計師常常用圖標來(lái)代表一些非常難以分辨的功能。

移動(dòng)端用戶(hù)體驗:底部導航
老版本的Bloom.fm應用Android版。真是相當難理解用戶(hù)當前所處位置。

我在這篇文章《圖標是優(yōu)秀用戶(hù)體驗的一部分》中強調了這個(gè)問(wèn)題。

顏色
避免在底部標簽欄使用不同顏色的圖標和文字標簽。應當使用app的主色來(lái)表示視覺(jué)焦點(diǎn)。

移動(dòng)端用戶(hù)體驗:底部導航

左圖：不同顏色的圖標讓app看起來(lái)像是圣誕樹(shù)。右圖：應該只用主色。

遵循一條簡(jiǎn)單的法則——用app的主色來(lái)提亮當前的底部導航項（包括圖標和文字標簽）。

移動(dòng)端用戶(hù)體驗:底部導航
iOS版Twitter的底部菜單欄。Messages是當前選中項。

如果底部導航欄有背景色，就要用黑白的圖標和文字標簽。

移動(dòng)端用戶(hù)體驗:底部導航

左圖：避免使用彩色圖標和彩色背景的組合。右圖：使用黑白圖形。

文字標簽
文字標簽要為導航圖標提供簡(jiǎn)短有意義的描述。不要用太長(cháng)的標簽，因為它們不能截斷或換行。

移動(dòng)端用戶(hù)體驗:底部導航
避免換行、截斷和縮小文字標簽。

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

點(diǎn)擊尺寸
目標區域足夠大，才易于點(diǎn)擊。將界面寬度按操作項的數量等分，計算每個(gè)底部導航操作項的寬度?；蛘?，把所有底部導航項的寬度設為最寬。

Android規范建議按照下圖的尺寸設計移動(dòng)端的底部導航欄。

移動(dòng)端用戶(hù)體驗:底部導航
移動(dòng)端的固定導航欄。單位是邏輯像素（dp）。來(lái)源：Material Design。

標簽欄的小紅點(diǎn)
可以在標簽欄顯示小紅點(diǎn)，表示有相關(guān)的新信息。

移動(dòng)端用戶(hù)體驗:底部導航
可以用低調的方式給標簽欄圖標加上小紅點(diǎn)。

3. 讓導航不言自明
優(yōu)秀的導航應該感覺(jué)像一只隱形的手，在操作途中指引用戶(hù)。畢竟，如果用戶(hù)都無(wú)法找到，那最酷的功能和最有吸引人的內容都沒(méi)用。

表現
每個(gè)底部導航圖標都要通向某個(gè)目的地。而不能是打開(kāi)菜單或其他彈出窗口。點(diǎn)按底部導航圖標應該直接通向相應界面，或者刷新當前激活的界面。

移動(dòng)端用戶(hù)體驗:底部導航
不要用標簽欄提供控制項，用來(lái)操作當前界面或app模式中的元素。如果需要提供操作項，請改用工具欄。

移動(dòng)端用戶(hù)體驗:底部導航
iOS的工具欄

保持統一
盡可能在每種情況下都顯示標簽欄。這樣能給用戶(hù)一種視覺(jué)上可靠的感覺(jué)。

不要因為功能不可用就移除某個(gè)標簽。如果你在某些情況下移除一個(gè)標簽，其他情況確保留，就會(huì )讓你的app界面感覺(jué)不可靠、難以預料。最佳解決方案是保證所有標簽都是可用的，然后解釋為什么某個(gè)標簽沒(méi)有內容。例如，如果用戶(hù)沒(méi)有離線(xiàn)文件，Dropbox里的Offline標簽會(huì )顯示一個(gè)界面，教你如何添加。這個(gè)功能就是空狀態(tài)。

移動(dòng)端用戶(hù)體驗:底部導航
Dropbox應用的空狀態(tài)界面。

隱藏標簽欄
如果界面里是滾動(dòng)的信息流，標簽欄可以在滾動(dòng)查看更多內容時(shí)隱藏，向下滑動(dòng)嘗試回頂部時(shí)再顯示。

移動(dòng)端用戶(hù)體驗:底部導航
底部導航欄可以根據滾動(dòng)，動(dòng)態(tài)顯示和隱藏。

視覺(jué)愉悅
避免使用橫向滑動(dòng)的動(dòng)效來(lái)切換界面。激活和未激活的界面，切換過(guò)渡效果應該使用疊加漸隱效果。