接著上一篇，在（一）中講了material design的三個(gè)基本構(gòu)成，即材質(zhì)、設(shè)計(jì)和動(dòng)畫(huà)，材質(zhì)已經(jīng)介紹了，下面講講設(shè)計(jì)方面的。
材質(zhì)化設(shè)計(jì)以印刷設(shè)計(jì)為指導(dǎo)，參照了其中的文字排版、網(wǎng)格、間距、尺寸、顏色和布局等概念，創(chuàng)造出層級(jí)、意義、以及焦點(diǎn)，以此提升用戶(hù)體驗(yàn)。
在材質(zhì)化設(shè)計(jì)中，紙張的物理特性被轉(zhuǎn)化到屏幕上，應(yīng)用的背景就像是一張紙片，應(yīng)用的行為也與紙片行為很相似，能夠改變大小，隨意移動(dòng)，多個(gè)紙片可以連接在一起，也可以疊著。這一部分可以參考（一）中講到的材質(zhì)的屬性。
1、單位：像素密度、密度獨(dú)立像素、可擴(kuò)展像素
像素密度是指每英寸的范圍內(nèi)有多少像素，像素越多，密度越大。對(duì)于一個(gè)像素固定的控件，比如一個(gè)30像素的按鈕，在高像素密度的屏幕上顯示出來(lái)比在低密度的屏幕上顯示出來(lái)要小。這樣一來(lái)，同樣像素大小的控件在不同屏幕上的顯示是不一樣的，這會(huì)給設(shè)計(jì)帶來(lái)很大麻煩，因此就有了密度獨(dú)立像素。
密度獨(dú)立像素，即dp，簡(jiǎn)單地講，1dp的元素，不管在哪個(gè)屏幕上，看起來(lái)大小都是一樣的，不會(huì)受屏幕的特性的影響，所以稱(chēng)為獨(dú)立像素。
公式如下：dp = (width in pixels * 160) / screen density
其中規(guī)定，1dp是1個(gè)像素在一個(gè)像素密度為160的屏幕的大小。
在安卓應(yīng)用的設(shè)計(jì)中直接用dp就好，但是在CSS中不支持dp，所以要使用上面的公式將dp轉(zhuǎn)化為px。
與之相對(duì)應(yīng)的是可拓展像素，即sp。跟dp是一個(gè)道理，只是sp用于文字，dp用于圖像。
2、基線(xiàn)網(wǎng)格
這里采用的是大小為8dp的基線(xiàn)網(wǎng)格，所有的設(shè)計(jì)元素都要和這個(gè)網(wǎng)格對(duì)其。文字和工具欄上的圖標(biāo)的基線(xiàn)網(wǎng)格是4dp。關(guān)于基線(xiàn)網(wǎng)格布局，谷歌提供了很多排版的例子供參考，大家有興趣可以去看看。
https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
3、比例線(xiàn)
比例指元素寬高比，一般有16：9、3：2、4：3、1：1、3：4、2：3這幾個(gè)尺寸，可以通過(guò)這些比例對(duì)頁(yè)面進(jìn)行排版布局。例子如下：
4、增量尺寸
指定一個(gè)元素的尺寸為標(biāo)準(zhǔn)，一個(gè)增量就是這個(gè)標(biāo)準(zhǔn)值的一倍。
比如以工具欄的高度為標(biāo)準(zhǔn)，工具欄是56dp高，那么一個(gè)增量就是56dp，八個(gè)就是448dp。其他元素的使用增量作為基本單位，這樣其他元素都和工具欄的高度相關(guān)，每次修改時(shí)只要改工具欄的，其他會(huì)相應(yīng)改變。
那增量應(yīng)該多少才合適，這里就涉及到一個(gè)最小尺寸的問(wèn)題。為了平衡信息的密度以及可用性，觸摸目標(biāo)的大小至少應(yīng)該為48*48dp。從物理尺寸來(lái)講，應(yīng)該在7-10mm之間。
5、頁(yè)面布局
頁(yè)面布局的基本元素包括工具欄，應(yīng)用欄，導(dǎo)航欄，系統(tǒng)欄等，下面是幾個(gè)布局的例子：
具體的各個(gè)控件怎么選擇，相對(duì)位置應(yīng)該怎么設(shè)置比較合適，在后面對(duì)控件的詳細(xì)介紹中會(huì)涉及。這里只是提一些大概的思路。
- 先定義一個(gè)主要的分隔方向，是左右排列還是上下排列。
- 在前面的主要分隔方向的基礎(chǔ)上，不要嵌套太多層，如果需要多個(gè)區(qū)域安排內(nèi)容，可以多使用空格。
- 可以用卡片或者浮動(dòng)按鈕來(lái)打破分隔線(xiàn)（卡片和浮動(dòng)按鈕之后會(huì)有介紹）。
- 可以使用卡片來(lái)包含多種樣式的內(nèi)容。
- 工具欄形式多種多樣，可以直接在應(yīng)用欄上顯示，可以以一列的形式顯示，可以用于卡片上，可以浮動(dòng)，可以用一個(gè)獨(dú)立的工具畫(huà)板，底部的工具欄可以隨著鍵盤(pán)或者其他元素的出現(xiàn)而升起，或者因?yàn)樽陨淼恼归_(kāi)而升起。
- 應(yīng)用欄
應(yīng)用欄有左中右三部分。
位于左邊的導(dǎo)航圖標(biāo)可以是以下這幾種形式：
1）可以打開(kāi)導(dǎo)航抽屜的控制器 2）可以返回到上一級(jí)的箭頭 3）如果此處不需要導(dǎo)航，則會(huì)隱藏。
中間的標(biāo)題可以表示目前的位置、可以是這個(gè)應(yīng)用的名字、可以是這個(gè)頁(yè)面的名字、也可以是一個(gè)頁(yè)面篩選器。
右邊的圖標(biāo)一般是與應(yīng)用相關(guān)的操作，菜單圖標(biāo)可以打開(kāi)一個(gè)溢出菜單，里面可以包含二級(jí)操作以及其他菜單項(xiàng)，如幫助、設(shè)置、反饋等。菜單應(yīng)該蓋住應(yīng)用欄，而不是作為應(yīng)用欄的擴(kuò)展表現(xiàn)出來(lái)。
應(yīng)用欄的中元素應(yīng)該具有相同的顏色，不過(guò)如果需要，可以對(duì)標(biāo)題進(jìn)行強(qiáng)調(diào)，使用與背景差別比較明顯的顏色。
- 側(cè)邊導(dǎo)航欄
側(cè)邊導(dǎo)航欄可以永久地固定在側(cè)邊，也可以只在需要的時(shí)候彈出，使用完畢再收回去，主要取決于屏幕的空間。
側(cè)邊導(dǎo)航欄可以位于左邊，也可以位于右邊。但是一般左邊是用于主導(dǎo)航，右邊是用于該頁(yè)面的次級(jí)導(dǎo)航。在之后的控件中會(huì)詳細(xì)講到。
針對(duì)頁(yè)面布局這部分，谷歌提供了一些空白的布局可以供我們直接使用?？梢栽谙旅孢@個(gè)網(wǎng)址中下載ai或者sketch文件。
https://material.google.com/resources/layout-templates.html#layout-templates-desktop
6、響應(yīng)式UI
響應(yīng)式UI指的是界面元素和布局能夠隨著設(shè)備和屏幕的變化而變化，能夠更好地在不同設(shè)備之間構(gòu)造一致的用戶(hù)體驗(yàn)。
響應(yīng)式設(shè)計(jì)的基礎(chǔ)是網(wǎng)格和斷點(diǎn)。網(wǎng)格將頁(yè)面分為多個(gè)列和多個(gè)分隔線(xiàn)。如下圖所示，界面中的元素要和網(wǎng)格對(duì)齊，跟前面提到的基線(xiàn)網(wǎng)格設(shè)計(jì)是一樣的。
這里的不同之處在于網(wǎng)格是會(huì)動(dòng)態(tài)變化的，包括列的數(shù)目，分隔線(xiàn)的寬度。斷點(diǎn)就是決定這些的機(jī)制。不同的屏幕尺寸，列的數(shù)目是不同的，比如在480dp以?xún)?nèi)是4列，480dp到840dp是8列。分隔線(xiàn)也是一樣，谷歌的文檔中也做出了規(guī)定，在不同的屏幕下分隔線(xiàn)的寬度不同。
由于只規(guī)定了列數(shù)和分隔寬度，所以列的寬度是會(huì)在一定范圍內(nèi)變化的，這時(shí)相關(guān)的界面元素就會(huì)跟著變化。一旦變化到了斷點(diǎn)處，就會(huì)進(jìn)行重新布局。重新布局要涉及到原先界面的寬度，元素的行為，可以針對(duì)不同軟件的特點(diǎn)進(jìn)行設(shè)計(jì)。
谷歌官方給了一些參考的模式，具體見(jiàn)下圖：
詳細(xì)介紹請(qǐng)查閱官方文檔
https://material.google.com/layout/responsive-ui.html#responsive-ui-patterns
