產(chǎn)品設(shè)計(jì)：Material Design 學(xué)習(xí)筆記一
自從Material Design發(fā)布以來，我就在一直收集相關(guān)素材與資源，研究別人的作品。這套設(shè)計(jì)風(fēng)格非常鮮明，帶有濃郁的Google式嚴(yán)謹(jǐn)和理性哲學(xué)，深得我心。實(shí)際上，光是研究素材和別人作品，就能發(fā)現(xiàn)一些明顯的規(guī)律，做出幾分相似的設(shè)計(jì)。這樣半吊子的狀態(tài)一直保持到現(xiàn)在，最近有時(shí)間通讀一遍官方的設(shè)計(jì)指南，終于有了深入的理解。
Material Design的設(shè)計(jì)規(guī)范細(xì)致入微，需要消化好一陣子。越讀越感受到它的妙處，假如每個(gè)細(xì)節(jié)都嚴(yán)格遵照Material Design的思想來設(shè)計(jì)，哪怕你不是設(shè)計(jì)人員，你的產(chǎn)品也一定不會(huì)難用和難看。當(dāng)然，作為設(shè)計(jì)師，要求就更高了。設(shè)計(jì)文檔本身，就提供了一種很好的方式，幫你從各個(gè)角度思考和構(gòu)建自己產(chǎn)品的規(guī)范。但在這之前，先要好好整理一下學(xué)習(xí)筆記。要打破規(guī)矩，必先掌握規(guī)矩。
1、核心思想
Material Design的核心思想，就是把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗(yàn)，達(dá)到簡(jiǎn)潔與直觀的效果。
Material Design是最重視跨平臺(tái)體驗(yàn)的一套設(shè)計(jì)語言。由于規(guī)范嚴(yán)格細(xì)致，保證它在各個(gè)平臺(tái)使用體驗(yàn)高度一致。不過目前還只有Google自家的服務(wù)這么做，畢竟其他平臺(tái)有自己的規(guī)范與風(fēng)格。
2、材質(zhì)與空間
材質(zhì)
material design中，最重要的信息載體就是魔法紙片。紙片層疊、合并、分離，擁有現(xiàn)實(shí)中的厚度、慣性和反饋，同時(shí)擁有液體的一些特性，能夠自由伸展變形。
這些是紙片的魔法特性，真實(shí)紙片所不具備的能力：
①紙片可以伸縮、改變形狀
②紙片變形時(shí)可以裁剪內(nèi)容，比如紙片縮小時(shí)，內(nèi)容大小不變，而是隱藏超出部分
③多張紙片可以拼接成一張
④一張紙片可以分裂成多張
⑤紙片可以在任何位置憑空出現(xiàn)
不過，魔法紙片有些效果是禁止的：
①一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋
②層疊的紙片，海報(bào)高度不能相同
③紙片不能互相穿透
④紙片不能彎折
⑤紙片不能產(chǎn)生透視，必須平行于屏幕
空間
Material Design引入了z軸的概念，z軸垂直于屏幕，用來表現(xiàn)元素的層疊關(guān)系。z值（海拔高度）越高，元素離界面底層（水平面）越遠(yuǎn)，投影越重。這里有一個(gè)前提，所有的元素的厚度都是1dp。
所有元素都有默認(rèn)的海拔高度，對(duì)它進(jìn)行操作會(huì)抬升它的海拔高度，操作結(jié)束后，它應(yīng)該落回默認(rèn)海拔高度。同一種元素，同樣的操作，抬升的高度是一致的。
注意：這不止是設(shè)計(jì)中的概念，開發(fā)人員確實(shí)可以通過一個(gè)值來控制元素的海拔高度和投影。
3、動(dòng)畫
Material Design重視動(dòng)畫效果，它反復(fù)強(qiáng)調(diào)一點(diǎn)：動(dòng)畫不只是裝飾，它有含義，能表達(dá)元素、界面之間的關(guān)系，具備功能上的作用。
easing
動(dòng)畫要貼近真實(shí)世界，就要重視easing。物理世界中的運(yùn)動(dòng)和變化都是有加速和減速過程的，忽然開始、忽然停止的勻速動(dòng)畫顯得機(jī)械而不真實(shí)?？紤]動(dòng)畫的easing，要先考慮它在現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律。
水波反饋
所有可點(diǎn)擊的元素，都應(yīng)該有這樣的反饋效果。通過這個(gè)動(dòng)畫，將點(diǎn)擊的位置與所操作的元素關(guān)聯(lián)起來，體現(xiàn)了material design動(dòng)畫的功能性。
轉(zhuǎn)場(chǎng)效果
通過過渡動(dòng)畫，表達(dá)界面之間的空間與層級(jí)關(guān)系，并且跨界面?zhèn)鬟f信息。
從父界面進(jìn)入子界面，需要抬升子元素的海拔高度，并展開至整個(gè)屏幕，反之亦然。
多個(gè)相似元素，動(dòng)畫的設(shè)計(jì)要有先后次序，起到引導(dǎo)視線的作用。
相似元素的運(yùn)動(dòng)，要符合統(tǒng)一的規(guī)律。
細(xì)節(jié)動(dòng)畫
通過圖標(biāo)的變化和一些細(xì)節(jié)來達(dá)到令人愉悅的效果。
4、顏色
顏色不宜過多。選取一種主色、一種輔助色（非必需），在此基礎(chǔ)上進(jìn)行明度、飽和度變化，構(gòu)成配色方案。
Appbar背景使用主色，狀態(tài)欄背景使用深一級(jí)的主色或20%透明度的純黑。
小面積需要高亮顯示的地方使用輔助色。
其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(xiàn)（包括圖標(biāo)和分隔線），而且透明度限定了幾個(gè)值。
黑色：[87% 普通文字] [54% 減淡文字][26% 禁用狀態(tài)/提示文字] [12% 分隔線]
白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態(tài)/提示文字][12% 分隔線]
轉(zhuǎn)自：可樂橙
