應(yīng)用結(jié)構(gòu)

你的應(yīng)用程序結(jié)構(gòu)應(yīng)該會受到你想展現(xiàn)給用戶的內(nèi)容和任務(wù)的影響。比如，你的應(yīng)用程序可能：

• 專注于一個單一的活動（比如一個計(jì)算器或者游戲程序）
• 包含有限的導(dǎo)航（比如一個手機(jī)聯(lián)系人撥號程序）
• 包含復(fù)雜數(shù)據(jù)視圖和深度導(dǎo)航（比如一個含有文件夾的郵件應(yīng)用程序）

啟動頁面

頂層導(dǎo)航策略

混合導(dǎo)航策略

啟動頁面

啟動頁面是在人們開啟你的應(yīng)用時所看到的第一個頁面，它對于新訪客以及老訪客來講都必須是友好的。在構(gòu)建這一模塊的體驗(yàn)時要根據(jù)典型用戶的需求來做。

• 突出顯示內(nèi)容。將內(nèi)容置于你啟動頁面的中心位置。使用視覺上動人并且有響應(yīng)的布局。
• 錨導(dǎo)航和動作。要考慮應(yīng)用條如何顯示導(dǎo)航控制的問題，包括布置標(biāo)簽切換和檢索框。
• 專注于功能。突出顯示那些重要的導(dǎo)航目標(biāo)和不常用的導(dǎo)航目標(biāo)。使用浮動操作按鈕來觸發(fā)主要的動作。

頂層導(dǎo)航策略

頂層導(dǎo)航包含的是你應(yīng)用中的主要功能。將你應(yīng)用的導(dǎo)航與你頁面的復(fù)雜度或簡易度相匹配。

單頁面的嵌入式導(dǎo)航

簡單結(jié)構(gòu)的應(yīng)用能夠在內(nèi)容中嵌入導(dǎo)航。然而，這樣做會減少用于顯示內(nèi)容的空間。

推薦：

• 具有非常直觀主界面的應(yīng)用，同時很少有間隔
• 完整的通用任務(wù)
• 不常用的功能

標(biāo)簽

標(biāo)簽在少部分具有同等重要性的頁面之間轉(zhuǎn)化。這些標(biāo)簽可以增加那些具有較少功能或簡單層級結(jié)構(gòu)應(yīng)用的頂層視圖的認(rèn)知度。由于標(biāo)簽占據(jù)了某一較小視圖的重要位置，因此應(yīng)該盡量使用短標(biāo)簽。

推薦：

• 頻繁的視圖轉(zhuǎn)換
• 有限數(shù)量的頂層視圖
• 提升對可切換視圖的意識

手機(jī)

對于那些只有一層導(dǎo)航的應(yīng)用，基于文本的標(biāo)簽可以被貫穿用于整個頂層。

四分之三的水平標(biāo)簽具有推薦大小并通過使用短字符串來避免在小型設(shè)備上發(fā)生卷曲顯示。

http://wiki.jikexueyuan.com/project/material-design/images/10_1.png" alt="" /> 有兩個標(biāo)簽的移動端實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_2.png" alt="" /> 有三個標(biāo)簽的移動端實(shí)例

平板和桌面電腦

屏幕尺寸、方位以及模塊的數(shù)量決定了標(biāo)簽是否應(yīng)該是：

• 全排或固定的
• 向左、中或右對齊

http://wiki.jikexueyuan.com/project/material-design/images/10_3.png" alt="" /> 具有四節(jié)全排標(biāo)簽的平板

http://wiki.jikexueyuan.com/project/material-design/images/10_4.png" alt="" /> 左對齊固定并包含標(biāo)題和拓展題頭標(biāo)簽的平板

http://wiki.jikexueyuan.com/project/material-design/images/10_5.png" alt="" /> 具有中部固定標(biāo)簽的桌面電腦

側(cè)面導(dǎo)航與導(dǎo)航抽屜

使用邊導(dǎo)航來達(dá)到一次性顯示多導(dǎo)航目標(biāo)的目的。它既可以顯示也可以不顯示導(dǎo)航抽屜。抽屜是一種實(shí)現(xiàn)內(nèi)容從較低層級頁面跳轉(zhuǎn)的有效方式，并且它在用戶請求之前一直保持隱藏狀態(tài)。具有單一“主頁”（home）的應(yīng)用應(yīng)該將那些訪問最頻繁的目的頁面置于導(dǎo)航抽屜的最上部。

推薦：

• 具有許多高層級視圖的應(yīng)用
• 在不相關(guān)視圖之間的快速導(dǎo)航
• 深度導(dǎo)航結(jié)構(gòu)
• 減少不頻繁訪問目標(biāo)導(dǎo)航的顯示

手機(jī)與平板

導(dǎo)航抽屜是默認(rèn)被關(guān)閉的，只有在某一節(jié)被選中的時候才能臨時開啟。

http://wiki.jikexueyuan.com/project/material-design/images/10_6.png" alt="" /> 一個關(guān)閉側(cè)導(dǎo)航的移動端實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_7.png" alt="" /> 一個開啟側(cè)導(dǎo)航的移動端實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_8.png" alt="" /> 一個關(guān)閉側(cè)導(dǎo)航的平板實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_9.png" alt="" /> 一個開啟側(cè)導(dǎo)航的平板實(shí)例

桌面電腦

導(dǎo)航可以直接出現(xiàn)在頁面上，而不是在抽屜里。

http://wiki.jikexueyuan.com/project/material-design/images/10_10.png" alt="" /> 一個側(cè)導(dǎo)航的桌面電腦實(shí)例

混合導(dǎo)航策略

文本內(nèi)導(dǎo)航

在使用標(biāo)簽或?qū)Ш匠閷蠒r，文本內(nèi)導(dǎo)航可以使相關(guān)數(shù)據(jù)集合之間形成快速轉(zhuǎn)換。

將它應(yīng)用于：

• 將某一首歌鏈接到某一位歌手
• 在當(dāng)前項(xiàng)目與某一完整歷史之間的切換
• 將某一位用戶的郵件與他（她）的個人信息頁進(jìn)行連接

向上箭頭被用于返回前一層級

http://wiki.jikexueyuan.com/project/material-design/images/10_11.png" alt="" /> 將導(dǎo)航與內(nèi)容進(jìn)行混合的一個移動端實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_12.png" alt="" /> 一個向上箭頭的移動端實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_13.png" alt="" /> 在內(nèi)容中嵌入導(dǎo)航的一個平板實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_14.png" alt="" /> 一個向上箭頭的平板實(shí)例

側(cè)導(dǎo)航與標(biāo)簽的結(jié)合

具有雙層級導(dǎo)航的產(chǎn)品可能同時具有一個左側(cè)導(dǎo)航抽屜和標(biāo)簽。

http://wiki.jikexueyuan.com/project/material-design/images/10_15.png" alt="" /> 使用雙層級導(dǎo)航的移動端實(shí)例：一個導(dǎo)航抽屜和標(biāo)簽

http://wiki.jikexueyuan.com/project/material-design/images/10_16.png" alt="" /> 開啟左側(cè)導(dǎo)航的一個移動端實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_17.png" alt="" /> 使用雙層級導(dǎo)航的平板實(shí)例：一個導(dǎo)航抽屜和標(biāo)簽

http://wiki.jikexueyuan.com/project/material-design/images/10_18.png" alt="" /> 在標(biāo)簽前開啟左側(cè)導(dǎo)航的一個平板實(shí)例

http://wiki.jikexueyuan.com/project/material-design/images/10_19.png" alt="" /> 使用雙層級導(dǎo)航的桌面實(shí)例：一個導(dǎo)航抽屜和標(biāo)簽