內(nèi)嵌式導航（Anchor navigation）和操作。正如任何的工具欄，應用程序欄把重要的操作組合起來。屏幕上方這樣一個位置使它非常理想地去呈現(xiàn)出導航控制操作，如切換標簽頁（tab）或者打開左側的邊選欄。如果應用的內(nèi)容是可以搜索的，在選單上增加搜索操作，這樣能讓用戶直接訪問他們想看的內(nèi)容。

堅持應用的功能性。當你的應用有大量的內(nèi)容或者功能時，引導用戶的注意力到產(chǎn)品最為重要的方面。在內(nèi)容部分，高亮那些有重要目標的導向。把最有特色的操作變?yōu)閼腋〔僮靼粹o以凸顯其重要性。減少在應用里不常用的操作的路徑。

頂層視圖策略
頂層的視圖結構可以通過向用戶展示主要功能區(qū)域來傳達這款應用的能力。有些應用只有一個視圖，只需要少量的操作。而其他應用的頂層會包含多個視圖，你必須保證用戶能夠有效地在這些不同的視圖之間操作。

選擇最適合你應用操作需要的方法。

集中注意力于嵌入式導航欄的單一視圖。把應用的其他內(nèi)容直接線性地放置到相應的導航欄選項上，這樣使得應用對于用戶來更加直觀，一目了然。當應用的導航模型非常簡單地時候，這個方法是非常合適的。不過，用這方式去呈現(xiàn)大量導航路徑的話，可以用來現(xiàn)實內(nèi)容的空間就會減少。并且，這些路徑會分散在屏幕，而不是集中放置在一個可預測并且方便的位置。

若使用內(nèi)嵌導航：

你的應??用有一個風格強烈，鮮明的主要視圖，而且沒有或者很少可以替代主視圖的視圖。
在主要視圖內(nèi)，用戶可以便捷地執(zhí)行大部分常用的任務。
潛在用戶并非經(jīng)常使用你的應用，他們更喜歡直接的訪問路徑。

使用標簽欄在少量同等重要的視圖之間切換。如果你的應用只擁有少量功能區(qū)域，并且每個都是低的等級，使用標簽欄會增加用戶對這些同等頂層視圖的意識。這樣也能使他們之間更加快速切換，只需要點擊或者側滑就可以看到。但是，標簽欄對于小屏幕來說擠占了重要的空間，因此它只適合少量具有簡潔標記的頂層視圖。

若使用欄標：

使用你應用的用戶將會頻繁切換這些視圖。
應用有數(shù)量有限的頂層視圖。
你需要用戶高度關注每一個欄標的視圖。

通過左側導航抽屜管理更加復雜的結構。左側的導航面板可以同時顯示大量導航目標。這特別適用于你的應用有單一而且自然的主頁面，而這個抽屜的作用類似于一些較少訪問的一些目的地的目錄。如果你的應用需要有由底層視圖切換到應用中其他重要部分的交叉導航，在任意地方都可以滑動出左邊導航選欄能夠讓用戶高效地在內(nèi)容之間切換。但是，因為邊選欄的功能可見性不強，用戶可能需要時間去讓自己熟悉整個應用的內(nèi)容。

若使用邊選欄：

你的應??用擁有大量的頂層視圖。
你希望沒有相互聯(lián)系的視圖之間可以實現(xiàn)快速的交叉導航。
你有特別的深度導航的分支，并且希望可快速回到應用的頂層視圖。
你想減少應用中的不經(jīng)常訪問內(nèi)容的可見性和用戶的察覺性。

無論選擇哪個頂層視圖策略，情景導航依然是訪問相關數(shù)據(jù)的有力方式。例如直接關聯(lián)：一首歌曲和另外一首來做相同作者的歌曲、最近使用項和整個使用歷史，或者某個用戶的一個貼子和他們的完整資料。這些直接的路徑使得從一個主要任務拓展到其他相關的任務顯得自然。

手機

這個結構包含一個固定的應用欄 (app bar)和一個浮動操作按鈕。有一個可選實現(xiàn)的底欄(bottom bar)用于添加額外功能和更多操作。當左右兩側的導航菜單需要使用時，可以覆蓋其他所有的結構元素。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-01_large_mdpi.png" alt="" />

平板電腦

這個結構包含一個固定的應用欄和一個浮動操作按鈕。這個應用欄擁有與平板電腦和手機的底欄的元素。有一個可選實現(xiàn)的底欄用于添加額外功能和更多操作。當左側的導航菜單需要使用時，可以覆蓋其他所有的結構元素。而右側的導航菜單可以臨時使用，也可以固定起來一直顯示。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-02_large_mdpi.png" alt="" />

桌面電腦

這個結構包含一個固定的應用欄和一個浮動操作按鈕。這個應用欄擁有與平板電腦和手機的底欄的元素。在允許的情況下，應用欄可以把窗口控制吸收進來。而側邊的導航菜單可以臨時使用，也可以固定起來一直顯示。側邊導航欄可以和內(nèi)容畫布（content canvas)可以擁有他們自己二級標簽欄或調(diào)色板的工具欄（toolbars)，或者是一些二姐的操作。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-03_large_mdpi.png" alt="" />

用戶界面指南

定義基本的水平或垂直的分割線

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-04_large_mdpi.png" alt="" />

不要把界面分割成太多的區(qū)域，產(chǎn)生L的形狀（L shapes)。相反，利用空白的地方勾勒出二級空間。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-05_large_mdpi.png" alt="" />

使用卡片和浮動操作按鈕越界。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-06_large_mdpi.png" alt="" />

當需要特定操作，又或者信息群需要更好的區(qū)分，而空白地方，或者分割線不能提供這種區(qū)分，應該用卡片來組織起信息。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-uiregions-uiregions-07_large_mdpi.png" alt="" />

工具欄

工具欄具有多功能性，它可以被用在應用很多地方。以下的例子讓你知道哪些地方你可以使用工具欄：

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-01_large_mdpi.png" alt="" />
全寬度，默認高度的選單

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-02_large_mdpi.png" alt="" />
全寬度，拉高了的選單生成多列的寬度

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-03_large_mdpi.png" alt="" />
具有列寬的工具欄具有途同的層級

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-04_large_mdpi.png" alt="" />
靈活的工具欄和卡片工具欄

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-05_large_mdpi.png" alt="" />
浮動工具欄

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-06_large_mdpi.png" alt="" />
分離的工具欄調(diào)色板

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-07a_large_mdpi.png" alt="" />
放置于架（shelf)上并且附在軟鍵盤或者其他底部元素頂部的底部工具欄

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-toolbars-toolbars-08a_large_mdpi.png" alt="" />
底部工具欄架

應用欄

應用欄結構結構

應用欄在以前的安卓版本中被叫做操作欄，是用來顯示應用的標識，應用導航，內(nèi)容搜索以及其他操作。

假如你的應用使用導航抽屜（nav drawer)，導航的標志打開它，然后導航標志變成黑色的箭頭用于頁面導航。標題（Title）可以是應用的名字，頁面標題或者頁面過濾器。

下面的圖標都是應用本身相關的操作。菜單圖標（Menu Icon）打開的是一個溢出菜單，里面包括的菜單內(nèi)容有幫助，設定和反饋等。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-01_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-02_large_mdpi.png" alt="" />
淺色

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-03_large_mdpi.png" alt="" />
深色

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-04_large_mdpi.png" alt="" />
彩色

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-05_large_mdpi.png" alt="" />
透明

尺寸

默認高度:

手機橫屏（Landscape）: 48 dp

手機豎屏（Portrait）: 56 dp

平板電腦/電腦桌面（Tablet/Desktop）: 64 dp

對于拉高了的選單，它的高度等于默認高度加上內(nèi)容高度。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-06_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-07_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-08_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-09_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-10_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-11_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-12_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-13_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-14_large_mdpi.png" alt="" />

菜單

菜單類似于臨時的一張紙，這張紙經(jīng)常覆蓋到應用欄（app bar)，而不是表現(xiàn)的像應用欄的拓展。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-15_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-16_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-17_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-18_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-appbar-appbar-19_large_mdpi.png" alt="" />

側邊導航欄（side nav)

若側欄出現(xiàn)，左右邊的導航抽屜（nav drawer)可以被固定一直顯示或者浮動顯示臨時覆蓋上去。左邊的導航欄的內(nèi)容應該是主要是導航或者識別類型的。而右邊導航欄的內(nèi)容應該主要是更深層次的信息，該頁主要內(nèi)容的次級信息。

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-sidenav-sidenav-01_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-sidenav-sidenav-02_large_mdpi.png" alt="" />

結構

臨時的導航抽屜可以覆蓋內(nèi)容畫布。而固定的導航抽屜應該放置在內(nèi)容畫布的側邊或者下方。

尺寸：

手機：側邊導航欄寬度 = 屏幕寬度 - 應用欄高度

例子： Nexus 4: 304 dp

Nexus 5: 288 dp

iPhone: 264 dp

電腦桌面：左邊選欄最大寬度為400 dp, 右側則按內(nèi)容而定。

電腦桌面或平板電腦：固定的，寬度與列對齊。

浮動的最大寬度：304 dp

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-sidenav-sidenav-03_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-sidenav-sidenav-04_large_mdpi.png" alt="" />
移動設備

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-drive_chrome-04_large_mdpi.png" alt="" />
左邊選欄的桌面電腦

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-drive_chrome-02_large_mdpi.png" alt="" />
右邊選欄的桌面電腦

白框

在平面，分層和陰影上使用統(tǒng)一的規(guī)格的基礎上，白框可以提供不同的設計結構。

Whiteframes - 15 MB(.ai)

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_bigtop_large_mdpi.png" alt="" />
可拓展和折疊內(nèi)容卡片

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_calendar_large_mdpi.png" alt="" />
手機上覆蓋內(nèi)容的細節(jié)，突出應用欄

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_contacts_large_mdpi.png" alt="" />
手機上利用多種工具欄和背景圖片來和內(nèi)容卡片重疊

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_drive_large_mdpi.png" alt="" />
拓展應用欄（app bar)和右邊導航抽屜（nav drawer)

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_gallery_large_mdpi.png" alt="" />
手機上左邊導航抽屜，和單一組（1-up stream)

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_mail_large_mdpi.png" alt="" />
資源列表

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_maps_large_mdpi.png" alt="" />
擁有嵌入式的搜索區(qū)域和卡片化的搜索結果的全屏背景

http://wiki.jikexueyuan.com/project/material-design/images/layout-structure-whiteframe_music_large_mdpi.png" alt="" />
可伸展頁腳抽屜(footer drawer)

原文：Structure 翻譯：donlianggit 校對：miaoiyy

上一篇：數(shù)據(jù)格式下一篇：圖標