一.What is Material Design

<p>
核心思想

Material design的核心思想含末，就是把物理世界的體驗帶進(jìn)屏幕署辉。去掉現(xiàn)實中的雜質(zhì)和隨機性榜轿，保留其最原始純凈的形態(tài)、空間關(guān)系卤档、變化與過渡逃贝，配合虛擬世界的靈活特性炎码，還原最貼近真實的體驗，達(dá)到簡潔與直觀的效果秋泳。

Material design是最重視跨平臺體驗的一套設(shè)計語言。由于規(guī)范嚴(yán)格細(xì)致攒菠，保證它在各個平臺使用體驗高度一致迫皱。

Material Design是扁平化嗎？

首先我們看下在移動端當(dāng)下或者曾經(jīng)出現(xiàn)過的設(shè)計風(fēng)格

擬物化風(fēng)格 – IOS6及以前與Smartisan OS
扁平風(fēng)格 – IOS6以后 與WindowsPhone
擬真風(fēng)格 – 安卓（ Material Design 出現(xiàn)以前）（ “擬真”的本意是辖众，保留控件本身的“立體”屬性和光影效果卓起，而去掉了對材質(zhì)和樣式的模仿）

而Material Design則不屬于其中的任何一種，如果說擬物化與扁平化是兩種極端的話凹炸，那么Material Design則是處于擬物化與扁平化之間（更偏向于扁平化）的某個平衡點

圖1 Material Design描述圖

在我的理解中戏阅，Material Design更多的是偏向于只扁不平，為什么這么說啤它，后面我會給出詳細(xì)的說明與解釋

Material 顧名思義奕筐，材質(zhì)，材料的意思变骡，那么首先我們說明下Material design中的材料問題
<p>

二.材料

<p>
Material design中的材料總結(jié)成一句話就是：魔法紙片(紙的形態(tài)模擬)

圖2 魔法紙片

紙片層疊离赫、合并、分離塌碌，擁有現(xiàn)實中的厚度渊胸、慣性和反饋，同時擁有液體的一些特性台妆，能夠自由伸展變形翎猛。
<p>
這些是紙片的魔法特性胖翰，真實紙片所不具備的能力：
紙片可以伸縮、改變形狀
紙片變形時可以裁剪內(nèi)容切厘，比如紙片縮小時萨咳，內(nèi)容大小不變，而是隱藏超出部分
多張紙片可以拼接成一張
一張紙片可以分裂成多張
紙片可以在任何位置憑空出現(xiàn)

不過迂卢，魔法紙片有些效果是禁止的：
一項操作不能同時觸發(fā)兩張紙片的反饋
層疊的紙片某弦，海報高度不能相同
紙片不能互相穿透
紙片不能彎折
紙片不能產(chǎn)生透視，必須平行于屏幕
<p>
前面提到了我對Material Design理解為只扁不平而克，接下來就解釋下為什么
<p>

三.空間

<p>
Material 環(huán)境是一個三維的空間靶壮，這意味著每個對象都有 x ， y 员萍， z 三維坐標(biāo)屬性腾降，z 軸垂直于顯示平面，并延伸向用戶視角,每個 material 元素在 z 軸上占據(jù)一定的位置并且有一個 1dp 厚度的標(biāo)準(zhǔn)碎绎。

圖3 Material 三維的空間環(huán)境

只扁不平螃壤？

<p>
扁：每個 material 元素在 z 軸上占據(jù)一定的位置并且有一個 1dp 厚度的標(biāo)準(zhǔn)

不平：如圖所示的Z軸，Z軸維度代表著什么筋帖？高度奸晴。

Material 對象都有一個默認(rèn)高度（靜止高度）

圖4 Material對象默認(rèn)高度

對應(yīng)的Material 某些對象也有一個動態(tài)高度，如下：

圖5 Material對象高度改變

當(dāng)一個對象的高度產(chǎn)生變化時日麸，它將會盡快恢復(fù)到自身的靜止高度
所以高度其實也代表了層次關(guān)系

圖6 Material對象動態(tài)高度

那么我們接下來看看不同高度控件在一起的顯示效果

圖7 顯示效果

好像并沒有高度的顯示寄啼，所以接下來就要介紹到Material Design中的陰影了

四.陰影

<p>
在 material 環(huán)境中代箭，虛擬的光線照射使場景中的對象投射出陰影，主光源投射出一個定向的陰影乙帮，而環(huán)境光從各個角度投射出連貫又柔和的陰影

“陰影”提供了對象深度和方向性移動的重要視覺線索。它們是唯一一種標(biāo)示不同平面之間分離程度的視覺線索极景。

某一對象的“高度”決定了其具體“陰影”的表現(xiàn)形式。

看看加上了陰影后的上圖的顯示效果

圖8 顯示效果帶陰影

在傳統(tǒng)的Android控件加入高度和陰影后會發(fā)現(xiàn)很神奇的化學(xué)效果

比如說Button加入高度和陰影后盼樟，會衍生出不同的幾種Button,而且在不同的情況下使用不同的Button

懸浮響應(yīng)按鈕(Floating action button): 點擊后會產(chǎn)生墨水?dāng)U散效果的圓形按鈕。

圖9 懸浮響應(yīng)按鈕

浮動按鈕(Raised button): 常見的方形紙片按鈕恤批，點擊后會產(chǎn)生墨水?dāng)U散效果异吻。

圖10 浮動按鈕

扁平按鈕(Flat button):點擊后產(chǎn)生墨水?dāng)U散效果，和浮動按鈕的區(qū)別是沒有浮起的效果诀浪。

圖11 扁平按鈕

五.動畫

<p>
在Material Design的世界中雷猪，動效不僅僅因為美學(xué)意義而存才，同時是為了構(gòu)建有意義的空間關(guān)系求摇、凸顯功能、維系整個系統(tǒng)的一致性验夯。

1摔刁、迅捷響應(yīng)交互行為

<p>
當(dāng)用戶與應(yīng)用交互時，所反饋的動效不但極具美感绑谣，符合物理邏輯拗引，而且能夠愉悅用戶。反饋動效的設(shè)計必須深思熟慮且具有目的性矾削，而不能隨性設(shè)計怔软，反饋動效應(yīng)溫和 择镇，不讓用戶分心。鼓勵用戶進(jìn)一步探索應(yīng)用
<p>
如下的示例圖

圖12 迅捷響應(yīng)交互行為

圖13 迅捷響應(yīng)交互行為

圖14 迅捷響應(yīng)交互行為

圖15 迅捷響應(yīng)交互行為

圖16 迅捷響應(yīng)交互行為

2、真實的動效

<p>
理解物質(zhì)是有形的吝梅，物理形體具有質(zhì)量苏携，當(dāng)受到外力驅(qū)使時能夠運動

物理世界中的運動和變化都是有加速和減速過程的，忽然開始、忽然停止的勻速動畫顯得機械而不真實著拭‰怪悖考慮動畫的easing，要先考慮它在現(xiàn)實世界中的運動規(guī)律暗赶。

圖17 真實的動效

3蹂随、有意義的轉(zhuǎn)場效果

<p>
(1).富有層次的時間感

在構(gòu)建轉(zhuǎn)場效果時十嘿，要考慮哪些元素需要運動糙及，他們的運動的持續(xù)時間又是多久，從何時開始唇聘，何時結(jié)束柱搜？確保動效能夠表達(dá)出信息層級。這樣用戶便可知道哪些元素最為重要聪蘸，并且創(chuàng)建視覺軌跡

最重要的元素最先出現(xiàn)健爬，最次要的最后出現(xiàn)，但是這并不是定式娜遵。轉(zhuǎn)場元素的運動要具備分明的時間感，整體流暢而不雜亂慨仿。

圖17 沒有層次的時間感

圖18 富有層次的時間感

（2）.編排一致

所有在屏幕中進(jìn)行轉(zhuǎn)場動效的元素纳胧，都必須要精心編排。所有元素的運動路徑必須富有運動感万皿，并且要有序。 雜亂的動效會讓人感到分心慰于。

避免線性運動，除非是沿軸線的運動婆赠，或者多個元素一致朝某個點運動時

確保元素的運動要和整體轉(zhuǎn)場效果在物理規(guī)律上契合佳励。多個元素運動時避免雜亂的運動感和重疊的運動軌跡。

考慮深度妙黍、層級關(guān)系

要保證進(jìn)場元素和退場元素空間感的一致性瞧剖。

圖19 編排不一致

圖20 編排一致

（3）.視覺連貫性

兩種不同視覺狀態(tài)的轉(zhuǎn)場應(yīng)該平滑抓于、看起來毫不費力做粤，除此之外，要讓用戶感到明晰而不混淆怕品。

在兩個界面跳轉(zhuǎn)時候要注意其中的元素：

進(jìn)場元素：無論是新生成的元素巾遭，或者是變換進(jìn)入屏幕的元素，設(shè)計者需著重筆墨介紹一番新進(jìn)場的元素吼和。

退場元素：指的是在新場景下不復(fù)存在的元素骑素，退場元素必須溫和、不突兀的退場厢岂。

共享元素：指的是從轉(zhuǎn)場開始到轉(zhuǎn)場結(jié)束都存在的元素阳距，可以是一個圖標(biāo)结借，也可以是點擊后放大的圖像。

圖21 視覺連貫性

圖22 視覺連貫性

圖23 視覺連貫性

4圃酵、細(xì)節(jié)愉悅用戶(icon動畫)

圖24 icon動畫

圖25 icon動畫

五.為什么Material Design沒有大行其道

<p>
1馍管、Android 的控制力不如 iOS 确沸。雖然谷歌已經(jīng)推到 Android 6.0，但很多第三方 ROM 還停留在 Android 4.4罗捎。其中更深層次的原因是國內(nèi) Android 生態(tài)圈受谷歌的影響很小豁状；

2倒得、App 的界面交互大改，用戶需要花費一定時間和精力進(jìn)行學(xué)習(xí)跟適應(yīng)承桥。作為跟隨規(guī)范的先驅(qū)根悼，你會得到呼聲，也有可能會失去用戶剩彬；不理規(guī)范保守審慎矿卑，你會留住用戶，也可能會招來嘲笑和指責(zé)轻黑。而是否選擇在第一時間帶頭遵守規(guī)范琴昆，取決于這個公司是誰以及它的老板是誰；

3业舍、很多公司都將動力都用在了如何搶占移動端入口。Material Design 作為一種信息密度非常低的設(shè)計風(fēng)格态罪，深受那些只需考慮自己部門利益、對產(chǎn)品有自主權(quán)绩聘、沒有亂七八糟功能需要展示的團隊喜愛耗啦，如果你的產(chǎn)品改成了 Material Design 會損害其他 10 個團隊的利益，那么就變成了一個政治博弈蓄髓、比產(chǎn)品復(fù)雜 10 倍的游戲舒帮。

4、不僅是 UI/UE 的設(shè)計問題肢执，還是現(xiàn)實產(chǎn)品決策的結(jié)果译红，也是在有限資源下，是公司各利益集團博弈妥協(xié)的結(jié)果耻陕。我就說說我以前在推動其他產(chǎn)品 Redesign 時刨沦，遇到的、見過的原因：開發(fā)成本高召庞，很多界面代碼需要重寫来破；設(shè)計成本高，很多設(shè)計細(xì)節(jié)需要變更诅诱；用戶審美晌坤，能在電視上播放的都是大眾審美。我們可以去感受一下真正的用戶它改，他們的審美觀如何商乎。

Reference

<p>
1.Material Design 中文版
2.重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記
3.谷歌設(shè)計師講述Material Design的一些設(shè)計性思考