【Material Design視覺設計語言】章節清單
【Material Design視覺設計語言】開篇
【Material Design視覺設計語言】Material Design設計概述
【Material Design視覺設計語言】應用布局設計
【Material Design視覺設計語言】應用自适應布局
【Material Design視覺設計語言】應用樣式設計
【Material Design視覺設計語言】應用動畫設計
【Material Design視覺設計語言】UI元件設計（一）：button
【Material Design視覺設計語言】UI元件設計（二）：卡片
【Material Design視覺設計語言】UI元件設計（三）：紙片
【Material Design視覺設計語言】UI元件設計（四）：表格
【Material Design視覺設計語言】UI元件設計（五）：提示框
【Material Design視覺設計語言】UI元件設計（六）：分隔線
【Material Design視覺設計語言】UI元件設計（七）：網格
【Material Design視覺設計語言】UI元件設計（八）：清單
【Material Design視覺設計語言】UI元件設計（九）：菜單
【Material Design視覺設計語言】UI元件設計（十）：選擇器
【Material Design視覺設計語言】UI元件設計（十一）：進度條
【Material Design視覺設計語言】UI元件設計（十二）：滑塊
【Material Design視覺設計語言】UI元件設計（十三）：Toast
【Material Design視覺設計語言】UI元件設計（十四）：Tabs
【Material Design視覺設計語言】UI元件設計（十五）：文本框
Material Design的布局設計旨在通過過使用同樣的視覺元素，結構網格，和通用的行距規則，讓應用不同平台與螢幕尺寸上擁有一緻的外觀和感覺。提供高度的熟悉感和舒适性的使用者體驗。
一 應用布局機關
像素密度（即dpi）指的是每英寸的像素點數。
像素密度的計算公式例如以下所看到的：
高密度的螢幕比低密度的螢幕更像素更高。
是以使用者界面元素（如button）在低密度螢幕上顯示較大而在高密度螢幕上顯示較小。
高密度螢幕
低密度螢幕
密度獨立像素（即dp）是一種基于螢幕密度的抽象機關。
密度獨立像素能夠在螢幕上用不同的密度來顯示統一的元素。
在每英寸160像素點的顯示器上：1 dp = 1 px，dp的計算公式例如以下所看到的：
密度獨立像素常常能夠用來處理圖像的縮放，通過這=合适的比例。圖像能夠縮放到不同的螢幕分辨率的螢幕上而且看起來效果都一樣。相關比比例如以下所看到的：
舉例
在320 dpi的分辨率一個200×200像素的圖示為100 x 100dp
可擴充像素（即sp）主要用來處理字型大小，能夠依據使用者字型大小首選項進行縮放。
講完了布局中常見的尺寸機關。我們來看幾個常見的元件尺寸。
最小的觸摸目标尺寸是 48dp
在布局中，當為圖示（24dp）或者頭像（40dp）設定邊距時。觸摸目标不能重疊。
二 應用布局邊距
關于邊框與間距這一塊。Google官方給出了手機、平台和電視等各大平台的布局模闆，這些模闆具體地描寫叙述了邊框與間距怎樣應用于螢幕邊界和元素。
Android手機裝置布局模闆
Android平闆裝置布局模闆
Android桌面應用布局模闆
手機作為最常常使用的移動裝置。我們先來看幾個關于手機布局邊框與間距的處理的樣例。很多其它内容能夠參見上方列舉的幾個模闆檔案。
舉例1
該布局示範圖示、頭像和一個 2 行文本的清單怎樣左對齊，以及一個 56dp 的浮動動作button和文本怎樣右對齊。
水準邊距例如以下所看到的：
左右各有 16dp 的垂直邊框。
帶有圖示或者頭像的内容有72dp的左邊距。
垂直邊距例如以下所看到的：
① 24dp
② 56dp
③ 48dp
④ 72dp
舉例2
該布局示範圖示、頭像、2 行文本清單、子标題和40dp的浮動動作button怎樣左對齊。小圖示右對齊。
圖示（大小圖示）有16dp的左右垂直邊框。
帶有圖示或者頭像的内容有 72dp 的左邊距。
③ 72dp
④ 48dp
⑤ 8dp
舉例3
該布局示範圖示怎樣左對齊。以及圖示和一個56dp的浮動動作button怎樣右對齊。
圖示有16dp的左垂直邊框。
帶有圖示或頭像的内容有72dp的左邊距。32dp 的右邊距（考慮到 56dp 的圓形浮動動作button）。這樣圓形浮動動作button下的圖示也對齊了。
③ 8dp
該布局示範圖示、頭像和文本怎樣左對齊。浮動動作button、圖示和文本怎樣右對齊。
圖示有16dp的左右垂直邊框。帶有圖示或頭像的内容區域左對齊，距左邊界72dp。
④ 8dp
舉例4
該布局示範了側邊導航菜單的寬度，以及圖示、頭像和文本怎樣左對齊，小圖示怎樣右對齊。
水準間距例如以下所看到的：
圖示距側邊導航菜單的左右邊界分别有 16dp 的垂直邊框。
帶有圖示或者頭像的内容距側邊導航菜單的左邊界 72dp。側邊導航菜單的寬度等于螢幕的寬度減去動作條的高度。即在本例中距螢幕右側 56dp 的寬。
垂直間距例如以下所看到的：
① 48dp
③ 56dp
比率邊框應用于移動裝置螢幕的寬度和移動裝置、平闆裝置以及桌面應用程式中 UI 元素的寬度。
增量邊框定義了一個增量，比方動作條的高度，然後使用幾倍于這個增量的數字來決定應用中其它元素的尺寸和位置。
增量邊框大多數應用于桌面應用程式。有些也适用于平闆裝置，非常少應用在移動裝置中。增量的數量會依據窗體的尺寸來改變。
三 布局結構
應用的啟動頁面是我們的應用為使用者呈現的第一個内容，所謂先入為主。第一印象非常重要，在設計啟動頁面的時候，我們應該去考慮使用者希望從我們的應用中看到什麼，進而為使用者做出積極的引導。
内容是應用的核心。我們應該避免應用内容僅僅是簡單的螢幕堆砌，讓内容成為啟動頁面的中心，讓使用者能夠第一時間被我應用的核心内容所吸引。
應用核心的操作能夠通過導航實作。螢幕上方是擺放導航的最佳位置，另外，某些重要的有特色的操作能夠通過懸浮button實作以凸顯其重要性。
在設計應用操作時有哪些常常使用的設計手法呢？
内嵌導航适合于導航模型非常easy的情況，我們能夠把應用的其它内容直接線性地放置到對應的導航欄選項上。
内嵌導航的适用情景例如以下所看到的：
應用有一個風格強烈。鮮明的主要視圖。而且沒有或者非常少能夠替代主視圖的視圖。
在主要視圖内，使用者能夠便捷地運作大部分常常使用的任務。
潛在使用者并不是常常使用你的應用。他們更喜歡直接的訪問路徑。
标簽欄導航适用于僅僅擁有少量功能區域，而且每個功能區域都是同等重要的情況。
标簽欄導航的适用情景例如以下所看到的：
應用的使用者将會頻繁切換這些視圖。
應用有數量有限的頂層視圖。
應用須要使用者高度關注每個欄标的視圖。
抽屜導航能夠同一時候顯示大量導航目标，它适用于管理複雜的操作設計。
抽屜導航的适用情景例如以下所看到的：
應用擁有大量的頂層視圖。
沒有互相聯系的視圖之間能夠實作高速的交叉導航。
應用有特别的深度導航的分支。而且希望可高速回到應用的頂層視圖。
想降低應用中的不常常訪問内容的可見性和使用者的察覺性。
定義主要的水準或垂直的切割線
不要把界面切割成太多的區域，産生L的形狀（L shapes)。
相反，利用空白的地方勾勒出二級空間。
使用卡片和浮動操作button越界
當須要特定操作，又或者資訊群須要更好的區分。而空白地方。或者切割線不能提供這樣的區分，應該用卡片來組織起資訊。
工具欄具有多功能性，它能夠被用在應用非常多地方。
以下舉例說明一下工具欄能夠被用在哪些地方。
全寬度，預設高度的工具欄。
全寬度，工具欄拉高，标題欄下移。
靈活的工具欄和卡片工具欄
浮動工具欄
舉例5
分離的工具欄和調色闆
舉例6
放置于架（shelf)上而且附在軟鍵盤或者其它底部元素頂部的底部工具欄
舉例7
底部工具欄架
應用欄是用來顯示應用的辨別。應用導航，内容搜尋以及其它操作。
以下的圖示都是應用本身相關的操作。菜單圖示（Menu Icon）打開的是一個溢出菜單。裡面包含的菜單内容有幫助。設定和回報等。
這樣的應用欄通常能夠設計成四種風格，例如以下所看到的：
淺色
深色
彩色
透明
應用欄的預設高度例如以下所看到的：
手機橫屏（Landscape）: 48 dp
手機豎屏（Portrait）: 56 dp
平闆電腦/電腦桌面（Tablet/Desktop）: 64 dp
對于拉高了的選單。它的高度等于預設高度加上内容高度。
豎屏尺寸
橫屏尺寸
菜單相似于暫時出現的一張紙，這張紙常常覆寫到應用欄（app bar)。而不是表現的像應用欄的拓展。
導航抽屜（nav drawer）能夠被固定一直顯示或者暫時的浮動顯示。
導航抽屜分為左邊導航抽屜和右邊導航抽屜兩種：
左邊的導航欄的内容應該是主要是導航或者識别類型的。
右邊導航欄的内容應該主要是更深層次的資訊，該頁主要内容的次級資訊。
暫時的導航抽屜能夠覆寫内容畫布。而固定的導航抽屜應該放置在内容畫布的側邊或者下方。
預設尺寸例如以下所看到的：
手機：側邊導航欄寬度 = 螢幕寬度 - 應用欄高度
電腦桌面：左邊選欄最大寬度為400 dp, 右側則按内容而定。
電腦桌面或平闆電腦：固定的，寬度與列對齊。
浮動的最大寬度：304 dp
手機裝置
左邊選欄的桌面電腦
右邊選欄的桌面電腦