接著上一篇，在（一）中講了material design的三個基本構成，即材質、設計和動畫，材質已經介紹了，下面講講設計方面的。

材質化設計以印刷設計為指導，參照了其中的文字排版、網格、間距、尺寸、顏色和布局等概念，創造出層級、意義、以及焦點，以此提升用戶體驗。
在材質化設計中，紙張的物理特性被轉化到屏幕上，應用的背景就像是一張紙片，應用的行為也與紙片行為很相似，能夠改變大小，隨意移動，多個紙片可以連接在一起，也可以疊著。這一部分可以參考（一）中講到的材質的屬性。

1、單位：像素密度、密度獨立像素、可擴展像素

像素密度是指每英寸的范圍內有多少像素，像素越多，密度越大。對于一個像素固定的控件，比如一個30像素的按鈕，在高像素密度的屏幕上顯示出來比在低密度的屏幕上顯示出來要小。這樣一來，同樣像素大小的控件在不同屏幕上的顯示是不一樣的，這會給設計帶來很大麻煩，因此就有了密度獨立像素。

高像素密度

低像素密度

密度獨立像素，即dp，簡單地講，1dp的元素，不管在哪個屏幕上，看起來大小都是一樣的，不會受屏幕的特性的影響，所以稱為獨立像素。
公式如下：dp = (width in pixels * 160) / screen density
其中規定，1dp是1個像素在一個像素密度為160的屏幕的大小。
在安卓應用的設計中直接用dp就好，但是在CSS中不支持dp，所以要使用上面的公式將dp轉化為px。
與之相對應的是可拓展像素，即sp。跟dp是一個道理，只是sp用于文字，dp用于圖像。

2、基線網格

這里采用的是大小為8dp的基線網格，所有的設計元素都要和這個網格對其。文字和工具欄上的圖標的基線網格是4dp。關于基線網格布局，谷歌提供了很多排版的例子供參考，大家有興趣可以去看看。
https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing

基線網格

文字基線網格

3、比例線

比例指元素寬高比，一般有16：9、3：2、4：3、1：1、3：4、2：3這幾個尺寸，可以通過這些比例對頁面進行排版布局。例子如下：

4、增量尺寸

指定一個元素的尺寸為標準，一個增量就是這個標準值的一倍。
比如以工具欄的高度為標準，工具欄是56dp高，那么一個增量就是56dp，八個就是448dp。其他元素的使用增量作為基本單位，這樣其他元素都和工具欄的高度相關，每次修改時只要改工具欄的，其他會相應改變。

增量尺寸

那增量應該多少才合適，這里就涉及到一個最小尺寸的問題。為了平衡信息的密度以及可用性，觸摸目標的大小至少應該為48*48dp。從物理尺寸來講，應該在7-10mm之間。

5、頁面布局

頁面布局的基本元素包括工具欄，應用欄，導航欄，系統欄等，下面是幾個布局的例子：

具體的各個控件怎么選擇，相對位置應該怎么設置比較合適，在后面對控件的詳細介紹中會涉及。這里只是提一些大概的思路。

• 先定義一個主要的分隔方向，是左右排列還是上下排列。
• 在前面的主要分隔方向的基礎上，不要嵌套太多層，如果需要多個區域安排內容，可以多使用空格。
• 可以用卡片或者浮動按鈕來打破分隔線（卡片和浮動按鈕之后會有介紹）。
• 可以使用卡片來包含多種樣式的內容。
• 工具欄形式多種多樣，可以直接在應用欄上顯示，可以以一列的形式顯示，可以用于卡片上，可以浮動，可以用一個獨立的工具畫板，底部的工具欄可以隨著鍵盤或者其他元素的出現而升起，或者因為自身的展開而升起。

浮動工具欄

卡片工具欄

工具畫板

底部展開工具欄

• 應用欄
  應用欄有左中右三部分。
  位于左邊的導航圖標可以是以下這幾種形式：
  1）可以打開導航抽屜的控制器 2）可以返回到上一級的箭頭 3）如果此處不需要導航，則會隱藏。
  中間的標題可以表示目前的位置、可以是這個應用的名字、可以是這個頁面的名字、也可以是一個頁面篩選器。
  右邊的圖標一般是與應用相關的操作，菜單圖標可以打開一個溢出菜單，里面可以包含二級操作以及其他菜單項，如幫助、設置、反饋等。菜單應該蓋住應用欄，而不是作為應用欄的擴展表現出來。
  應用欄的中元素應該具有相同的顏色，不過如果需要，可以對標題進行強調，使用與背景差別比較明顯的顏色。

應用欄

• 側邊導航欄
  側邊導航欄可以永久地固定在側邊，也可以只在需要的時候彈出，使用完畢再收回去，主要取決于屏幕的空間。
  側邊導航欄可以位于左邊，也可以位于右邊。但是一般左邊是用于主導航，右邊是用于該頁面的次級導航。在之后的控件中會詳細講到。
  針對頁面布局這部分，谷歌提供了一些空白的布局可以供我們直接使用。可以在下面這個網址中下載ai或者sketch文件。
  https://material.google.com/resources/layout-templates.html#layout-templates-desktop

6、響應式UI

響應式UI指的是界面元素和布局能夠隨著設備和屏幕的變化而變化，能夠更好地在不同設備之間構造一致的用戶體驗。
響應式設計的基礎是網格和斷點。網格將頁面分為多個列和多個分隔線。如下圖所示，界面中的元素要和網格對齊，跟前面提到的基線網格設計是一樣的。

這里的不同之處在于網格是會動態變化的，包括列的數目，分隔線的寬度。斷點就是決定這些的機制。不同的屏幕尺寸，列的數目是不同的，比如在480dp以內是4列，480dp到840dp是8列。分隔線也是一樣，谷歌的文檔中也做出了規定，在不同的屏幕下分隔線的寬度不同。

斷點

由于只規定了列數和分隔寬度，所以列的寬度是會在一定范圍內變化的，這時相關的界面元素就會跟著變化。一旦變化到了斷點處，就會進行重新布局。重新布局要涉及到原先界面的寬度，元素的行為，可以針對不同軟件的特點進行設計。
谷歌官方給了一些參考的模式，具體見下圖：