導(dǎo)航

層級(jí)一 層級(jí)二 三層級(jí)或者更多

層級(jí)一

標(biāo)簽

只有單層導(dǎo)航的產(chǎn)品可以在頂層使用基于文本的標(biāo)簽。

為了避免滾動(dòng)，設(shè)置一個(gè)三到四的水平標(biāo)簽最大值。

http://wiki.jikexueyuan.com/project/material-design/images/15_1.png" alt="" /> 帶有兩個(gè)標(biāo)簽菜單的手機(jī)示例

http://wiki.jikexueyuan.com/project/material-design/images/15_2.png" alt="" /> 帶有三個(gè)標(biāo)簽菜單的手機(jī)示例

平板上，標(biāo)簽寬度和對(duì)齊方式由屏幕尺寸、方向以及菜單數(shù)量決定。標(biāo)簽可以全排也可以固定，可以居左、居中或者居右。

查看標(biāo)簽以獲取更多信息。

http://wiki.jikexueyuan.com/project/material-design/images/15_3.png" alt="" /> 平板上的帶有四個(gè)段落的全排標(biāo)簽示例

http://wiki.jikexueyuan.com/project/material-design/images/15_4.png" alt="" /> 平板上的帶有標(biāo)題和擴(kuò)展頭部的居左對(duì)齊固定標(biāo)簽的示例

http://wiki.jikexueyuan.com/project/material-design/images/15_5.png" alt="" /> 居中固定標(biāo)簽的桌面示例

導(dǎo)航抽屜

導(dǎo)航抽屜可以被用作導(dǎo)航。默認(rèn)關(guān)閉，只在一個(gè)段落被選中時(shí)暫時(shí)打開。

查看 UI Regions and Guidance 獲取關(guān)于頂層導(dǎo)航策略的更多信息。

http://wiki.jikexueyuan.com/project/material-design/images/15_6.png" alt="" /> 關(guān)閉狀態(tài)側(cè)邊導(dǎo)航的手機(jī)示例

http://wiki.jikexueyuan.com/project/material-design/images/15_7.png" alt="" /> 打開狀態(tài)側(cè)邊導(dǎo)航的手機(jī)示例

http://wiki.jikexueyuan.com/project/material-design/images/15_8.png" alt="" /> 關(guān)閉狀態(tài)側(cè)邊導(dǎo)航的平板示例

http://wiki.jikexueyuan.com/project/material-design/images/15_9.png" alt="" /> 關(guān)閉狀態(tài)側(cè)邊導(dǎo)航的平板示例

http://wiki.jikexueyuan.com/project/material-design/images/15_10.png" alt="" /> 側(cè)邊導(dǎo)航的桌面示例

層級(jí)二

導(dǎo)航抽屜以及標(biāo)簽

如果你的產(chǎn)品有兩層導(dǎo)航，讓左邊的導(dǎo)航抽屜帶有標(biāo)簽。

在手機(jī)和平板上，導(dǎo)航抽屜只支持單層級(jí)別的導(dǎo)航。

http://wiki.jikexueyuan.com/project/material-design/images/15_11.png" alt="" /> 手機(jī)使用導(dǎo)航抽屜以及標(biāo)簽的兩層示例

http://wiki.jikexueyuan.com/project/material-design/images/15_12.png" alt="" /> 帶有打開側(cè)邊導(dǎo)航的手機(jī)示例

http://wiki.jikexueyuan.com/project/material-design/images/15_13.png" alt="" /> 平板上使用導(dǎo)航抽屜以及標(biāo)簽的兩層級(jí)示例

http://wiki.jikexueyuan.com/project/material-design/images/15_14.png" alt="" /> 帶有打開側(cè)邊導(dǎo)航的平板示例

http://wiki.jikexueyuan.com/project/material-design/images/15_15.png" alt="" /> 桌面上使用導(dǎo)航抽屜以及標(biāo)簽的兩層級(jí)示例

導(dǎo)航抽屜

桌面上，二層導(dǎo)航可以被嵌套在導(dǎo)航抽屜里。

http://wiki.jikexueyuan.com/project/material-design/images/15_16.png" alt="" /> 一個(gè)嵌套側(cè)邊導(dǎo)航的桌面示例

三層級(jí)或者更多

導(dǎo)航內(nèi)容

如果你的產(chǎn)品有多層級(jí)的導(dǎo)航，導(dǎo)航抽屜應(yīng)該包含導(dǎo)航的主要層級(jí)。

手機(jī)和平板

順序?qū)Ш綄蛹?jí)可以被融合到內(nèi)容里，鏈接到單個(gè)頁面。向上箭頭被用作回到上層菜單。

http://wiki.jikexueyuan.com/project/material-design/images/15_17.png" alt="" /> 手機(jī)上的集成到內(nèi)容中的導(dǎo)航示例

http://wiki.jikexueyuan.com/project/material-design/images/15_18.png" alt="" /> 手機(jī)上的向上箭頭示例

http://wiki.jikexueyuan.com/project/material-design/images/15_19.png" alt="" /> 平板上的集成到內(nèi)容中的導(dǎo)航示例

http://wiki.jikexueyuan.com/project/material-design/images/15_20.png" alt="" /> 平板上的向上箭頭示例

嵌套導(dǎo)航抽屜以及標(biāo)簽（桌面）

如果你的產(chǎn)品有三層導(dǎo)航，使用嵌套導(dǎo)航抽屜和 tabs 兩者。

http://wiki.jikexueyuan.com/project/material-design/images/15_21.png" alt="" /> 桌面上帶有標(biāo)簽的嵌套側(cè)邊導(dǎo)航示例

擴(kuò)展導(dǎo)航抽屜（桌面）

如果你的產(chǎn)品擁有三層以上的導(dǎo)航，可以在導(dǎo)航抽屜中使用一個(gè)可伸展的層次結(jié)構(gòu)。被選中時(shí)，當(dāng)前層級(jí)收縮起來，展現(xiàn)下一層級(jí)的導(dǎo)航。點(diǎn)擊一個(gè)收縮起來的菜單，會(huì)在導(dǎo)航抽屜中伸展當(dāng)前層級(jí)，并把其他層級(jí)都收縮起來。

http://wiki.jikexueyuan.com/project/material-design/images/15_22.png" alt="" /> 桌面上一個(gè)伸展側(cè)邊導(dǎo)航的示例

http://wiki.jikexueyuan.com/project/material-design/images/15_23.png" alt="" /> 三層深度內(nèi)容的側(cè)邊導(dǎo)航

級(jí)聯(lián)導(dǎo)航抽屜（桌面）

如果你的產(chǎn)品有不止三層導(dǎo)航，可以使用級(jí)聯(lián)菜單來垂直伸展導(dǎo)航抽屜內(nèi)容。每個(gè)層級(jí)在自己的面板中顯示，當(dāng)一個(gè)子菜單被選中時(shí)，當(dāng)前層級(jí)關(guān)閉。

http://wiki.jikexueyuan.com/project/material-design/images/15_24.png" alt="" /> 級(jí)聯(lián)側(cè)邊導(dǎo)航的桌面示例

http://wiki.jikexueyuan.com/project/material-design/images/15_25.png" alt="" />