bottomnavigation 底部導(dǎo)航欄 (轉(zhuǎn)載)

針對底部狀態(tài)欄有比較好的三方庫:

https://github.com/roughike/BottomBar

效果可以。


下面內(nèi)容轉(zhuǎn)載自:http://blog.csdn.net/wds1181977/article/details/50922093 ?王亟亟的大牛之路

眾所周知Android之前一直提倡者”Bar”一系列的東西盡量是在“上面”,而蘋果的設(shè)計一般在下面

像這樣

而蘋果的一般在下面像這樣(拿我的微信做例子,圈掉的部分無視)

而現(xiàn)在Material Design設(shè)計規(guī)范中加入底部導(dǎo)航欄也就是我們今天文章的主角Bottom navigation

來看看官方是怎么形容他的(接下來的翻譯全是 我人工翻譯,如有不準(zhǔn)確可請原諒,暫時還沒找到字幕組或者什么機(jī)構(gòu)去解釋這部分)

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

底部導(dǎo)航欄讓我們可以更輕松的在幾個頂層的視圖間進(jìn)行選擇和查看

這是一個給與我們選擇和切換試圖組用的。(就像上面微信,聯(lián)系人,發(fā)現(xiàn),我這系列做功能卡片切換,TMD怎么拿微信做例子了)

知道了這是一個干什么用的東西之后我們來看看他的一些要點

Three to five top-level destinations of similar importance (Alternative: A persistent navigation drawer accessible from anywhere in the app)

比較推崇3-5個頁面的切換,如果過多就不推薦使用Bottom navigation

那如果過少,只有2個這種也是不太推薦的。

推薦

不推薦

不推薦

注意點:

在與標(biāo)簽相結(jié)合的底部導(dǎo)航時要小心,因為在用戶使用應(yīng)用程序時可能會引起混淆。

Style

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

因為底部的導(dǎo)航行為是作為圖標(biāo)的,所以它們應(yīng)該被用于內(nèi)容,可以與圖標(biāo)進(jìn)行適當(dāng)?shù)臏贤?至少要讓用戶簡單的理解這個圖標(biāo)代表了什么。

顏色不要五顏六色的,只要讓用戶清楚的理解他選擇的是哪個就行了

推薦

不推薦

If the bottom navigation bar is colored, make the icon and text label of the current action black or white.

如果Bottom navigation本身是彩色的,那么圖標(biāo)和文字盡量用黑色或者白色

推薦

不推薦

Text labels provide short, meaningfully definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

文字部分不要太長盡量精簡,表達(dá)意思就行

推薦

不推薦

那如果一定要很長的描述文字,請把多余部分隱藏掉,不要換行或者縮小字體大小

推薦

不推薦

注意點:

標(biāo)簽真的多了,就別貼字了,如果只有三個就請字+圖標(biāo)都放上去

被選中的一定要高亮,高亮,高亮重要的事情說三遍

Behavior

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.

上拉列表時,隱藏Bottom navigation,下拉列表時,顯示Bottom navigation

這個和我之前寫過的一個解放用戶操作空間差不多概念(我好66 哈哈哈哈,傳送門:http://blog.csdn.net/ddwhan0123/article/details/50352662

像這樣

推薦點擊切換,而不是類似于viewpager形式的滑動切換

推薦

不推薦

Specs

和其他控件一樣也有他的尺寸規(guī)格,這邊就不詳細(xì)解釋了,看看就行。

在不同的屏幕大小下也有著不同的規(guī)格體現(xiàn)

在平板里,又是這樣

最后貼一下視圖厚度分布

原文地址:https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容