Material Design(一)認(rèn)識(shí)與了解

一.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)

圖1 Material Design描述圖

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

Material 顧名思義,材質(zhì),材料的意思,那么首先我們說(shuō)明下Material design中的材料問(wèn)題
<p>

二.材料

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

圖2 魔法紙片

紙片層疊、合并、分離,擁有現(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)。

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

只扁不平?

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

不平:如圖所示的Z軸,Z軸維度代表著什么?高度。

Material 對(duì)象都有一個(gè)默認(rèn)高度(靜止高度)

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

對(duì)應(yīng)的Material 某些對(duì)象也有一個(gè)動(dòng)態(tài)高度,如下:

圖5 Material對(duì)象高度改變

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

圖6 Material對(duì)象動(dòng)態(tài)高度

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

圖7 顯示效果

好像并沒(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)形式。

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

圖8 顯示效果帶陰影

在傳統(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散效果的圓形按鈕。

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

浮動(dòng)按鈕(Raised button): 常見(jiàn)的方形紙片按鈕,點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散效果。

圖10 浮動(dòng)按鈕

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

圖11 扁平按鈕

五.動(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>
如下的示例圖

圖12 迅捷響應(yīng)交互行為
圖13 迅捷響應(yīng)交互行為
圖14 迅捷響應(yīng)交互行為
圖15 迅捷響應(yīng)交互行為
圖16 迅捷響應(yīng)交互行為
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ī)律。

圖17 真實(shí)的動(dòng)效
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í)間感,整體流暢而不雜亂。

圖17 沒(méi)有層次的時(shí)間感
圖18 富有層次的時(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)元素空間感的一致性。

圖19 編排不一致
圖20 編排一致

(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)擊后放大的圖像。

圖21 視覺(jué)連貫性
圖22 視覺(jué)連貫性
圖23 視覺(jué)連貫性
4、細(xì)節(jié)愉悅用戶(hù)(icon動(dòng)畫(huà))
圖24 icon動(dòng)畫(huà)
圖25 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ì)性思考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容