Material Design——Bottom navigation

#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計(jì)共耍,借此加深各種組件的應(yīng)用~

Material Design鏈接:Bottom navigation

在底部導(dǎo)航欄可以導(dǎo)航應(yīng)用的主要功能并進(jìn)行功能之間的轉(zhuǎn)換。

一纫谅、使用

底部導(dǎo)航欄在屏幕底部顯示三到五個主要功能株旷。每個功能都由一個圖標(biāo)和一個可選的文本標(biāo)簽表示再登。當(dāng)點(diǎn)擊底部導(dǎo)航圖標(biāo)時,就會轉(zhuǎn)換到與該圖標(biāo)相關(guān)聯(lián)的頂級導(dǎo)航功能晾剖。

△ 原則

· 人體工程學(xué)? 手持移動設(shè)備時候便于操作底部導(dǎo)航欄

· 持續(xù)性? 當(dāng)使用移動設(shè)備時候锉矢,底部導(dǎo)航欄出現(xiàn)在每個屏幕的底部

· 相關(guān)性? 相關(guān)的底部導(dǎo)航欄功能,應(yīng)該具有相同的重要性

△ 使用場景

底部導(dǎo)航欄應(yīng)該用于:

· 在應(yīng)用程序的任何地方都可以點(diǎn)擊底部導(dǎo)航欄觸發(fā)主要功能

· 設(shè)置3-5個主要功能

· 僅限于移動手機(jī)或者平板

底部導(dǎo)航欄不應(yīng)該用于:

· 單個任務(wù)齿尽,例如查看單個電子郵件用戶

· 用戶首選項(xiàng)或設(shè)置

底部導(dǎo)航欄的主要功能不要少于三個(可使用選項(xiàng)卡代替)沽损。
不要超過五個主要功能。對于這些情況循头,請嘗試選項(xiàng)卡或?qū)Ш匠閷稀?/div>
組合底部導(dǎo)航和頂部標(biāo)簽可能會引起混淆绵估,因?yàn)樗鼈兣c內(nèi)容的關(guān)系可能產(chǎn)生干擾炎疆,選項(xiàng)卡使用相同主題,底層導(dǎo)航目的地是頂級的国裳,并且彼此之間關(guān)聯(lián)性不強(qiáng)形入。


二、分析

1.Container缝左;2.Inactive唯笙;3. iconInactive text label;4.Active icon盒使;5.Active text label

△ 當(dāng)前功能

展示主要功能的形式?jīng)Q定于涵蓋多少個主要功能:

· 三個主要功能:顯示所有功能的圖標(biāo)和文本標(biāo)簽

· 四個主要功能:處于當(dāng)前觸發(fā)功能界面時顯示一個圖標(biāo)和文本標(biāo)簽崩掘。建議未觸發(fā)功能時顯示圖標(biāo)和文本標(biāo)簽

· 五個主要功能:處于當(dāng)前觸發(fā)功能界面時顯示一個圖標(biāo)和文本標(biāo)簽。未觸發(fā)功能時使用圖標(biāo)少办,并謹(jǐn)慎使用文本標(biāo)簽(因?yàn)榭臻g可能不允許)

在這個底部的導(dǎo)航中有三個主要功能苞慢,每個個功能都有一個圖標(biāo)和文本標(biāo)簽。

△ Icons

底部導(dǎo)航功能始終包括一個圖標(biāo)英妓。最好將圖標(biāo)與文本標(biāo)簽配對挽放,防止圖標(biāo)沒有明顯的含義不能讓人識別。

底部導(dǎo)航中的圖標(biāo)與文本標(biāo)簽配對蔓纠。

△ 文本標(biāo)簽

文本標(biāo)簽提供了對底部導(dǎo)航主要功能的簡短辑畦、有意義的描述。

使用簡潔的文本標(biāo)簽腿倚。
不要截斷文本纯出,截斷可能會模糊重要的目標(biāo)信息。
不要將文本縮成一行敷燎。
避免包裝文字暂筝,核心在于簡潔,不要使用看似漂亮的語言硬贯。


三焕襟、行為

底部導(dǎo)航動作

點(diǎn)擊底部導(dǎo)航主要功能將產(chǎn)生以下結(jié)果之一:

· 它幫助用戶轉(zhuǎn)換到相關(guān)功能

· 若之前訪問過A功能,當(dāng)從B功能回到A功能時饭豹,會跳轉(zhuǎn)到當(dāng)前的瀏覽位置

·?若此刻在A功能的界面鸵赖,當(dāng)再次點(diǎn)擊A功能的圖標(biāo),會返回頂部拄衰,并且刷新該界面

點(diǎn)擊底部導(dǎo)航主要功能不會以下結(jié)果之一:

· 打開菜單或?qū)υ捒?/b>

·?在Android上它褪,后退按鈕不會設(shè)置在底部導(dǎo)航中

左:點(diǎn)擊以前訪問過部分的功能將用戶返回到他們上次瀏覽的位置;右:點(diǎn)擊當(dāng)前的功能將用戶帶到屏幕的頂部肾砂,并在適用的情況下刷新內(nèi)容列赎。

△ 角標(biāo)(Badges)

底部導(dǎo)航圖標(biāo)可以包括其右上角的角標(biāo)。這些角標(biāo)可以包含動態(tài)信息镐确,例如一些請求包吝。

1.Badge;2.Badge with a number源葫;3.Badge with a maximum character count

△ 滾動(Scrolling)

在滾動時诗越,底部導(dǎo)航條可以出現(xiàn)或消失:

· 向下滾動隱藏

· 向上滾動的條形圖

左:在瀏覽信息流的時候會隱藏導(dǎo)航欄;右:當(dāng)瀏覽應(yīng)用程序的層次結(jié)構(gòu)時息堂,底部的導(dǎo)航欄仍然在視圖中嚷狞。

△ 轉(zhuǎn)換(Transitions)

滑動手勢不能在底部導(dǎo)航視圖之間導(dǎo)航。

左:使用交叉淡出動畫在活動視圖和非活動視圖之間進(jìn)行轉(zhuǎn)換荣堰;右:避免使用橫向(左和右)運(yùn)動來在視圖之間進(jìn)行轉(zhuǎn)換.橫向運(yùn)動保留用于導(dǎo)航相關(guān)內(nèi)容床未,如選項(xiàng)卡。

當(dāng)它們出現(xiàn)時振坚,這些項(xiàng)將顯示在底部導(dǎo)航欄的前面:

· Bottom sheets(底部表單)

· Navigation drawers(導(dǎo)航抽屜)

· Keyboards(鍵盤)


底部導(dǎo)航可以臨時覆蓋底部表單薇搁,導(dǎo)航抽屜和鍵盤。


△ 顏色

當(dāng)?shù)撞繉?dǎo)航目標(biāo)處于觸發(fā)狀態(tài)時渡八,將圖標(biāo)和文本標(biāo)簽填充上應(yīng)用程序的主顏色啃洋。

使用應(yīng)用程序的主顏色來指示觸發(fā)的功能狀態(tài)。

如果底部導(dǎo)航欄是彩色的屎鳍,則將當(dāng)前操作的圖標(biāo)和文本標(biāo)簽設(shè)置為黑色或白色宏娄。

如果底部導(dǎo)航欄是彩色的,則使用黑白圖標(biāo)逮壁。

四孵坚、位置

△ 固定導(dǎo)航條

底部導(dǎo)航欄的目的地有固定的位置。它們不會水平滾動或移動窥淆。

底部導(dǎo)航欄不可以滾動十饥。


△ 橫式視窗(Landscape view)

在移動(景觀模式)或平板電腦上,底部導(dǎo)航目的地可以保留縱向模式中使用的相同間距祖乳,而不是分布在底部的應(yīng)用程序欄上逗堵。
在移動(景觀模式)或平板電腦上,底部導(dǎo)航目的地可以水平定位眷昆,而不是堆疊蜒秤。在這種情況下,建議目的地在整個條形圖中均勻分布亚斋。


五作媚、規(guī)定

底部導(dǎo)航目的地可能是觸發(fā)的、未觸發(fā)的帅刊、聚焦的或按下的纸泡。

底部導(dǎo)航使用不透明度和文本來顯示目標(biāo)何時處于觸發(fā)狀態(tài)。

狀態(tài)用于顯示按下的赖瞒、聚焦的和未選擇的狀態(tài)女揭。

非活動的目標(biāo)狀態(tài)用減少的不透明表示蚤假;活動狀態(tài)具有完全的不透明度。

1.Inactive destinations吧兔;2.An active destination

當(dāng)文本標(biāo)簽沒有持續(xù)使用(在任何時候)時磷仰,只有活動的目的地才會有文本標(biāo)簽。

左:沒有文本標(biāo)簽的非活動目的地境蔼;右:一個帶有文本標(biāo)簽的活動目的地灶平。



END.THANKS FOR YOUR READING~

如有不當(dāng),還請多多指教~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末箍土,一起剝皮案震驚了整個濱河市逢享,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌吴藻,老刑警劉巖瞒爬,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異调缨,居然都是意外死亡疮鲫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進(jìn)店門弦叶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來俊犯,“玉大人,你說我怎么就攤上這事伤哺⊙嘞溃” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵立莉,是天一觀的道長绢彤。 經(jīng)常有香客問我,道長蜓耻,這世上最難降的妖魔是什么茫舶? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮刹淌,結(jié)果婚禮上饶氏,老公的妹妹穿的比我還像新娘。我一直安慰自己有勾,他們只是感情好疹启,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蔼卡,像睡著了一般喊崖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天荤懂,我揣著相機(jī)與錄音茁裙,去河邊找鬼。 笑死势誊,一個胖子當(dāng)著我的面吹牛呜达,可吹牛的內(nèi)容都是我干的谣蠢。 我是一名探鬼主播粟耻,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼眉踱!你這毒婦竟也來了挤忙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤谈喳,失蹤者是張志新(化名)和其女友劉穎册烈,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體婿禽,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡赏僧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了扭倾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淀零。...
    茶點(diǎn)故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖膛壹,靈堂內(nèi)的尸體忽然破棺而出驾中,到底是詐尸還是另有隱情,我是刑警寧澤模聋,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布肩民,位于F島的核電站,受9級特大地震影響链方,放射性物質(zhì)發(fā)生泄漏持痰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一祟蚀、第九天 我趴在偏房一處隱蔽的房頂上張望工窍。 院中可真熱鬧,春花似錦暂题、人聲如沸移剪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纵苛。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間攻人,已是汗流浹背取试。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留怀吻,地道東北人瞬浓。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像蓬坡,于是被迫代替她去往敵國和親猿棉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評論 2 348

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

  • 1屑咳、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,969評論 3 119
  • Pi Day之后看到MD官方文檔更新了就爬上去瞅了瞅萨赁。 主要更新了兩個 The March 2016 releas...
    灰_灰灰灰灰閱讀 1,411評論 1 21
  • “‘ 所謂父母子女一場,只不過意味著兆龙,你和他的緣分就是今生今世不斷地目送他的背影漸行漸遠(yuǎn)杖爽。你站立在小路的這一端,看...
    青青如竹筠閱讀 210評論 0 0
  • 進(jìn)入了四月紫皇, 一切似乎都變得不一樣慰安, 可又似乎仍然在原來的軌道上運(yùn)行。 可是聪铺,迷茫化焕,焦急,無助似乎注定要伴隨我度過...
    KolyaMa閱讀 224評論 13 0
  • 小時候的回憶计寇,記得第一次看是在三年級看名偵探柯南锣杂,小時候真的挺可愛的,看柯南的時候隱約的就會被那些東西吸引眼球番宁。想...
    蒹葭詩涵閱讀 461評論 5 4