設計師都知道,設計不僅是爲了好看。設計也決定用戶如何融入一個產品,不管是網站仍是app。這是一種交談。導航菜單就是一種交談。由於若是用戶不明白使用方式,你的網站或app再漂亮都沒用。app
圖片來源:Behance工具
爲何底部導航如此重要?動畫
Steven Hoober在他的關於移動設備使用情況的研究中發現,49%的人依靠一根手指完成手機上的操做。在下圖中,手機屏幕上的畫面表示大體的觸摸範圍,不一樣顏色表示用戶能用拇指在屏幕上觸及的區域。綠色表示輕易觸及;黃色表示須要伸長手指;紅色表示須要用戶改變持握方式。網站
圖片表示單手操做智能手機的溫馨程度。圖片來源:uxmatters設計
把最重要最經常使用的操做放在屏幕底部很是重要,由於它們能用一隻手指輕鬆觸及。3d
標籤欄blog
許多應用遵循這一規律,將底部導航(又稱做標籤欄)做爲最重要的app功能。Facebook的核心功能一觸即達,可以在不一樣功能中迅速切換。圖片
Facebook 的 iOS 底部標籤欄。get
底部導航設計的3個關鍵產品
導航一般是搭載用戶的交通工具。底部導航應該承載重要性等同的頂級目的地。這些目的地須要在app的任何地方留有直接的入口。
優秀的底部導航設計遵循如下3條定律:
1. 只顯示最重要的目的地
在底部導航中使用3到5個頂級目的地。若是少於3個,請考慮使用標籤代替。
底部設計導航避免使用5個以上,由於點擊目標相互會過於接近。在標籤欄放置過多的項目,讓人們難以點中他們的目標。每多展現一個標籤,app的複雜性就增長一分。
若是頂級目的地確實有5個以上,不要用底部導航來承載這些入口,請考慮放在其餘位置。
避免內容滾動
小屏幕上顯而易見的解決方式,就是部分隱藏式的導航——沒必要擔憂屏幕空間的侷限,把標籤項放入滾動的標籤欄便可。可是滾動的內容效率低下,由於你得滑動一下才能看到想要的選項。
iOS版 Rookie Cam app中就存在「看不見就想不到」的問題。
2. 表達出當前位置
沒有表達當前位置,多是app菜單中最廣泛的錯誤。「我在哪裏?」是用戶須要回答的基本問題之一,這是順利操做的前提。
用戶應該在沒有任何外部引導的狀況下,一眼就看出如何從A前往B。應該提供適當的視覺線索(圖標、標籤和顏色),操做就不須要任何說明了。
圖標
正由於底部導航操做以圖標方式展示,它們所表達的內容應該要適合經過圖標來表達。有些用戶熟知的通用圖標,一般這些都表示搜索、郵件、打印等功能。不幸的是,「通用」圖標不多。app的設計師經常用圖標來表明一些很是難以分辨的功能。
老版本的Bloom.fm應用Android版。真是至關難理解用戶當前所處位置。
我在這篇文章《圖標是優秀用戶體驗的一部分》中強調了這個問題。
顏色
避免在底部標籤欄使用不一樣顏色的圖標和文字標籤。應當使用app的主色來表示視覺焦點。
左圖:不一樣顏色的圖標讓app看起來像是聖誕樹。右圖:應該只用主色。
遵循一條簡單的法則——用app的主色來提亮當前的底部導航項(包括圖標和文字標籤)。
iOS版Twitter的底部菜單欄。Messages是當前選中項。
若是底部導航欄有背景色,就要用黑白的圖標和文字標籤。
左圖:避免使用彩色圖標和彩色背景的組合。右圖:使用黑白圖形。
文字標籤
文字標籤要爲導航圖標提供簡短有意義的描述。不要用太長的標籤,由於它們不能截斷或換行。
避免換行、截斷和縮小文字標籤。
菜單元素要易於瀏覽。用戶要能理解他點擊某個元素時會發生什麼。
點擊尺寸
目標區域足夠大,才易於點擊。將界面寬度按操做項的數量等分,計算每一個底部導航操做項的寬度。或者,把全部底部導航項的寬度設爲最寬。
Android規範建議按照下圖的尺寸設計移動端的底部導航欄。
移動端的固定導航欄。單位是邏輯像素(dp)。來源:Material Design。
標籤欄的小紅點
能夠在標籤欄顯示小紅點,表示有相關的新信息。
能夠用低調的方式給標籤欄圖標加上小紅點。
3. 讓導航不言自明
優秀的導航應該感受像一隻隱形的手,在操做途中指引用戶。畢竟,若是用戶都沒法找到,那最酷的功能和最有吸引人的內容都沒用。
表現
每一個底部導航圖標都要通向某個目的地。而不能是打開菜單或其餘彈出窗口。點按底部導航圖標應該直接通向相應界面,或者刷新當前激活的界面。
不要用標籤欄提供控制項,用來操做當前界面或app模式中的元素。若是須要提供操做項,請改用工具欄。
iOS的工具欄
保持統一
儘量在每種狀況下都顯示標籤欄。這樣能給用戶一種視覺上可靠的感受。
不要由於功能不可用就移除某個標籤。若是你在某些狀況下移除一個標籤,其餘狀況確保留,就會讓你的app界面感受不可靠、難以預料。最佳解決方案是保證全部標籤都是可用的,而後解釋爲何某個標籤沒有內容。例如,若是用戶沒有離線文件,Dropbox裏的Offline標籤會顯示一個界面,教你如何添加。這個功能就是空狀態。
Dropbox應用的空狀態界面。
隱藏標籤欄
若是界面裏是滾動的信息流,標籤欄能夠在滾動查看更多內容時隱藏,向下滑動嘗試回頂部時再顯示。
底部導航欄能夠根據滾動,動態顯示和隱藏。
視覺愉悅
避免使用橫向滑動的動效來切換界面。激活和未激活的界面,切換過渡效果應該使用疊加漸隱效果。
疊加漸隱動畫。來源:郯城生活圈 http://www.0539g.com
總結
底部導航應該:
可見且結構合理(使用3到5個頂級目的地,而且避免可滾動內容)
清晰(導航欄元素要易於瀏覽,點擊區域要足夠大,方便操做)
簡單(保證每一個導航圖標都通向合適的目的地,並且經過底部導航要可以觸達全部元素)