一.What is Material Design
<p>
核心思想
Material design的核心思想,就是把物理世界的體驗(yàn)帶進(jìn)屏幕。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性,保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過(guò)渡,配合虛擬世界的靈活特性,還原最貼近真實(shí)的體驗(yàn),達(dá)到簡(jiǎn)潔與直觀的效果。
Material design是最重視跨平臺(tái)體驗(yàn)的一套設(shè)計(jì)語(yǔ)言。由于規(guī)范嚴(yán)格細(xì)致,保證它在各個(gè)平臺(tái)使用體驗(yàn)高度一致。
Material Design是扁平化嗎?
首先我們看下在移動(dòng)端當(dāng)下或者曾經(jīng)出現(xiàn)過(guò)的設(shè)計(jì)風(fēng)格
擬物化風(fēng)格 – IOS6及以前與Smartisan OS
扁平風(fēng)格 – IOS6以后 與WindowsPhone
擬真風(fēng)格 – 安卓( Material Design 出現(xiàn)以前)( “擬真”的本意是,保留控件本身的“立體”屬性和光影效果,而去掉了對(duì)材質(zhì)和樣式的模仿)
而Material Design則不屬于其中的任何一種,如果說(shuō)擬物化與扁平化是兩種極端的話(huà),那么Material Design則是處于擬物化與扁平化之間(更偏向于扁平化)的某個(gè)平衡點(diǎn)
在我的理解中,Material Design更多的是偏向于只扁不平,為什么這么說(shuō),后面我會(huì)給出詳細(xì)的說(shuō)明與解釋
Material 顧名思義,材質(zhì),材料的意思,那么首先我們說(shuō)明下Material design中的材料問(wèn)題
<p>
二.材料
<p>
Material design中的材料總結(jié)成一句話(huà)就是:魔法紙片(紙的形態(tài)模擬)
紙片層疊、合并、分離,擁有現(xiàn)實(shí)中的厚度、慣性和反饋,同時(shí)擁有液體的一些特性,能夠自由伸展變形。
<p>
這些是紙片的魔法特性,真實(shí)紙片所不具備的能力:
紙片可以伸縮、改變形狀
紙片變形時(shí)可以裁剪內(nèi)容,比如紙片縮小時(shí),內(nèi)容大小不變,而是隱藏超出部分
多張紙片可以拼接成一張
一張紙片可以分裂成多張
紙片可以在任何位置憑空出現(xiàn)
不過(guò),魔法紙片有些效果是禁止的:
一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋
層疊的紙片,海報(bào)高度不能相同
紙片不能互相穿透
紙片不能彎折
紙片不能產(chǎn)生透視,必須平行于屏幕
<p>
前面提到了我對(duì)Material Design理解為只扁不平,接下來(lái)就解釋下為什么
<p>
三.空間
<p>
Material 環(huán)境是一個(gè)三維的空間,這意味著每個(gè)對(duì)象都有 x , y , z 三維坐標(biāo)屬性,z 軸垂直于顯示平面,并延伸向用戶(hù)視角,每個(gè) material 元素在 z 軸上占據(jù)一定的位置并且有一個(gè) 1dp 厚度的標(biāo)準(zhǔn)。
只扁不平?
<p>
扁:每個(gè) material 元素在 z 軸上占據(jù)一定的位置并且有一個(gè) 1dp 厚度的標(biāo)準(zhǔn)
不平:如圖所示的Z軸,Z軸維度代表著什么?高度。
Material 對(duì)象都有一個(gè)默認(rèn)高度(靜止高度)
對(duì)應(yīng)的Material 某些對(duì)象也有一個(gè)動(dòng)態(tài)高度,如下:
當(dāng)一個(gè)對(duì)象的高度產(chǎn)生變化時(shí),它將會(huì)盡快恢復(fù)到自身的靜止高度
所以高度其實(shí)也代表了層次關(guān)系
那么我們接下來(lái)看看不同高度控件在一起的顯示效果
好像并沒(méi)有高度的顯示,所以接下來(lái)就要介紹到Material Design中的陰影了
四.陰影
<p>
在 material 環(huán)境中,虛擬的光線照射使場(chǎng)景中的對(duì)象投射出陰影,主光源投射出一個(gè)定向的陰影,而環(huán)境光從各個(gè)角度投射出連貫又柔和的陰影
“陰影”提供了對(duì)象深度和方向性移動(dòng)的重要視覺(jué)線索。它們是唯一一種標(biāo)示不同平面之間分離程度的視覺(jué)線索。
某一對(duì)象的“高度”決定了其具體“陰影”的表現(xiàn)形式。
看看加上了陰影后的上圖的顯示效果
在傳統(tǒng)的Android控件加入高度和陰影后會(huì)發(fā)現(xiàn)很神奇的化學(xué)效果
比如說(shuō)Button加入高度和陰影后,會(huì)衍生出不同的幾種Button,而且在不同的情況下使用不同的Button
懸浮響應(yīng)按鈕(Floating action button): 點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散效果的圓形按鈕。
浮動(dòng)按鈕(Raised button): 常見(jiàn)的方形紙片按鈕,點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散效果。
扁平按鈕(Flat button):點(diǎn)擊后產(chǎn)生墨水?dāng)U散效果,和浮動(dòng)按鈕的區(qū)別是沒(méi)有浮起的效果。
五.動(dòng)畫(huà)
<p>
在Material Design的世界中,動(dòng)效不僅僅因?yàn)槊缹W(xué)意義而存才,同時(shí)是為了構(gòu)建有意義的空間關(guān)系、凸顯功能、維系整個(gè)系統(tǒng)的一致性。
1、迅捷響應(yīng)交互行為
<p>
當(dāng)用戶(hù)與應(yīng)用交互時(shí),所反饋的動(dòng)效不但極具美感,符合物理邏輯,而且能夠愉悅用戶(hù)。反饋動(dòng)效的設(shè)計(jì)必須深思熟慮且具有目的性,而不能隨性設(shè)計(jì),反饋動(dòng)效應(yīng)溫和 ,不讓用戶(hù)分心。鼓勵(lì)用戶(hù)進(jìn)一步探索應(yīng)用
<p>
如下的示例圖
2、真實(shí)的動(dòng)效
<p>
理解物質(zhì)是有形的,物理形體具有質(zhì)量,當(dāng)受到外力驅(qū)使時(shí)能夠運(yùn)動(dòng)
物理世界中的運(yùn)動(dòng)和變化都是有加速和減速過(guò)程的,忽然開(kāi)始、忽然停止的勻速動(dòng)畫(huà)顯得機(jī)械而不真實(shí)。考慮動(dòng)畫(huà)的easing,要先考慮它在現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律。
3、有意義的轉(zhuǎn)場(chǎng)效果
<p>
(1).富有層次的時(shí)間感
在構(gòu)建轉(zhuǎn)場(chǎng)效果時(shí),要考慮哪些元素需要運(yùn)動(dòng),他們的運(yùn)動(dòng)的持續(xù)時(shí)間又是多久,從何時(shí)開(kāi)始,何時(shí)結(jié)束?確保動(dòng)效能夠表達(dá)出信息層級(jí)。這樣用戶(hù)便可知道哪些元素最為重要,并且創(chuàng)建視覺(jué)軌跡
最重要的元素最先出現(xiàn),最次要的最后出現(xiàn),但是這并不是定式。轉(zhuǎn)場(chǎng)元素的運(yùn)動(dòng)要具備分明的時(shí)間感,整體流暢而不雜亂。
(2).編排一致
所有在屏幕中進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)效的元素,都必須要精心編排。所有元素的運(yùn)動(dòng)路徑必須富有運(yùn)動(dòng)感,并且要有序。 雜亂的動(dòng)效會(huì)讓人感到分心。
避免線性運(yùn)動(dòng),除非是沿軸線的運(yùn)動(dòng),或者多個(gè)元素一致朝某個(gè)點(diǎn)運(yùn)動(dòng)時(shí)
確保元素的運(yùn)動(dòng)要和整體轉(zhuǎn)場(chǎng)效果在物理規(guī)律上契合。多個(gè)元素運(yùn)動(dòng)時(shí)避免雜亂的運(yùn)動(dòng)感和重疊的運(yùn)動(dòng)軌跡。
考慮深度、層級(jí)關(guān)系
要保證進(jìn)場(chǎng)元素和退場(chǎng)元素空間感的一致性。
(3).視覺(jué)連貫性
兩種不同視覺(jué)狀態(tài)的轉(zhuǎn)場(chǎng)應(yīng)該平滑、看起來(lái)毫不費(fèi)力,除此之外,要讓用戶(hù)感到明晰而不混淆。
在兩個(gè)界面跳轉(zhuǎn)時(shí)候要注意其中的元素:
進(jìn)場(chǎng)元素:無(wú)論是新生成的元素,或者是變換進(jìn)入屏幕的元素,設(shè)計(jì)者需著重筆墨介紹一番新進(jìn)場(chǎng)的元素。
退場(chǎng)元素:指的是在新場(chǎng)景下不復(fù)存在的元素,退場(chǎng)元素必須溫和、不突兀的退場(chǎng)。
共享元素:指的是從轉(zhuǎn)場(chǎng)開(kāi)始到轉(zhuǎn)場(chǎng)結(jié)束都存在的元素,可以是一個(gè)圖標(biāo),也可以是點(diǎn)擊后放大的圖像。
4、細(xì)節(jié)愉悅用戶(hù)(icon動(dòng)畫(huà))
五.為什么Material Design沒(méi)有大行其道
<p>
1、Android 的控制力不如 iOS 。雖然谷歌已經(jīng)推到 Android 6.0,但很多第三方 ROM 還停留在 Android 4.4。其中更深層次的原因是國(guó)內(nèi) Android 生態(tài)圈受谷歌的影響很小;
2、App 的界面交互大改,用戶(hù)需要花費(fèi)一定時(shí)間和精力進(jìn)行學(xué)習(xí)跟適應(yīng)。作為跟隨規(guī)范的先驅(qū),你會(huì)得到呼聲,也有可能會(huì)失去用戶(hù);不理規(guī)范保守審慎,你會(huì)留住用戶(hù),也可能會(huì)招來(lái)嘲笑和指責(zé)。而是否選擇在第一時(shí)間帶頭遵守規(guī)范,取決于這個(gè)公司是誰(shuí)以及它的老板是誰(shuí);
3、很多公司都將動(dòng)力都用在了如何搶占移動(dòng)端入口。Material Design 作為一種信息密度非常低的設(shè)計(jì)風(fēng)格,深受那些只需考慮自己部門(mén)利益、對(duì)產(chǎn)品有自主權(quán)、沒(méi)有亂七八糟功能需要展示的團(tuán)隊(duì)喜愛(ài),如果你的產(chǎn)品改成了 Material Design 會(huì)損害其他 10 個(gè)團(tuán)隊(duì)的利益,那么就變成了一個(gè)政治博弈、比產(chǎn)品復(fù)雜 10 倍的游戲。
4、不僅是 UI/UE 的設(shè)計(jì)問(wèn)題,還是現(xiàn)實(shí)產(chǎn)品決策的結(jié)果,也是在有限資源下,是公司各利益集團(tuán)博弈妥協(xié)的結(jié)果。我就說(shuō)說(shuō)我以前在推動(dòng)其他產(chǎn)品 Redesign 時(shí),遇到的、見(jiàn)過(guò)的原因:開(kāi)發(fā)成本高,很多界面代碼需要重寫(xiě);設(shè)計(jì)成本高,很多設(shè)計(jì)細(xì)節(jié)需要變更;用戶(hù)審美,能在電視上播放的都是大眾審美。我們可以去感受一下真正的用戶(hù),他們的審美觀如何。
Reference
<p>
1.Material Design 中文版
2.重磅教程!幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記
3.谷歌設(shè)計(jì)師講述Material Design的一些設(shè)計(jì)性思考