Material Design核心思想
就是把物理世界的體驗帶到屏幕,去掉現(xiàn)實中的雜質(zhì)和隨機性,保留其最原始純凈的形態(tài)蹄梢、空間關(guān)系、變化和過度富俄,配合虛擬世界的靈活特性禁炒,還原最貼近真實的體驗,達到簡潔與直觀的效果蛙酪。
環(huán)境
Material 環(huán)境是一個三維的空間齐苛,這意味著每個對象都有 x , y 桂塞, z 三維坐標屬性凹蜂,z 軸垂直于顯示平
面,并延伸向用戶視角,每個 material 元素在 z 軸上占據(jù)一定的位置并且有一個 1dp 厚度的標準。 在網(wǎng)頁
上玛痊,z 軸被用來分層而不是為了視角汰瘫。3D 空間通過操縱 y 軸進行仿真。
光影關(guān)系(Light and shadow) 在 material 環(huán)境中擂煞,虛擬的光線照射使場景中的對象投射出陰影混弥,主光源投射
出一個定向的陰影,而環(huán)境光從各個角度投射出連貫又柔和的陰影对省。
material 環(huán)境中的所有陰影都是由這兩種光投射產(chǎn)生的蝗拿,陰影是光線照射不到的地方,因為各個元素在z軸上占據(jù)
了不同大小的位置遮擋住了這些光線。
物理特性
材料具有變化的長寬尺寸 變化的長寬尺寸(以 dp 為計)和均勻的厚度 均勻的厚度(1dp)
高度和陰影
Material design中的對象與現(xiàn)實生活中的對象具有相似的性質(zhì)蒿涎。在現(xiàn)實生活中哀托,不用對象可以被堆積或粘貼起來,但是不能彼此交叉劳秋。對象自身塑造了自己的陰影并返回自己的光影仓手。
依據(jù)這些性質(zhì)所構(gòu)造出來的空間模型對于用戶來說是非常熟悉的,這一模型也可以被長期應(yīng)用于移動應(yīng)用當(dāng)中玻淑。支撐這一空間模型的正是“高度”(Elevation)和“光影”(Shadows)這兩個概念嗽冒。
圖標
注意:
不要給彩色元素加投影,層疊不超過兩層
折角不要放在左上角补履,帶投影的元素要完整展現(xiàn)
文字
12sp 小字提示
14sp (桌面端13sp) 正文/按鈕文字
16sp (桌面端15sp) 小標題
20sp Appbar文字
24sp 大標題
34sp/45sp/56sp/112sp 超大號文字
布局
最小點擊區(qū)域尺寸:48dp*48dp
柵格最小單位:8dp.一切距離大小是8dp倍數(shù)
頂部狀態(tài)高度:24dp
Appbar最小高度:56dp
底部導(dǎo)航欄高度:48dp
懸浮按鈕尺寸:56*56dp/40*40dp
用戶頭像尺寸:64*64dp/40*40dp
小圖標點擊區(qū)域:48*48dp
屏幕左右對齊基線:16dp
文字左側(cè)對齊基線:72dp
組件
懸浮按鈕有兩種尺寸:56dp*56dp/40*40dp
卡片統(tǒng)一由2dp的圓角
Dialog中取消類操作放在左邊添坊,引起變化的操作項放在右邊
菜單的當(dāng)前選項始終與當(dāng)前選項水平對齊
靠近屏幕邊緣時,位置可適當(dāng)錯開
菜單過長時干像,需要顯示滾動條
菜單從當(dāng)前選項固定位置展開帅腌,不要隨點擊位置變化
菜單到上下留出8dp距離
tab只用來展示不同類型的內(nèi)容驰弄,tab至少2項麻汰,至多6項,超出6項需要變?yōu)闈L動式戚篙,左右翻頁
tab文字要顯示完整五鲫,字號保持一致,不能折合岔擂,文字和圖標不能混用位喂,tab選中項的下劃線高度是2dp
動畫
感知一個物體有形的部分可以幫助我們理解如何去控制它。觀察一個物理的運動可以告訴我們它輕還是重乱灵,柔性
還是剛性塑崖,小還是大。在 material design 設(shè)計規(guī)范中痛倚,動作不止是呈現(xiàn)著它美麗的一面规婆,它還意味著在空間
中的關(guān)系、功能以及在整個系統(tǒng)中的趨勢。
動畫可以做到:
不同視圖之間的焦點引導(dǎo)抒蚜。
當(dāng)用戶完成了一個手勢后掘鄙,提示用戶將會發(fā)生什么
明確元素之間的層級和空間關(guān)系
當(dāng)程序在后臺運行時,分散用戶的注意力(例如獲取內(nèi)容或載入下一個視圖)
潤色整個app:個性化嗡髓、令人愉悅
重視動畫效果操漠,考慮它在現(xiàn)實世界中的運動規(guī)律
動畫的設(shè)計要有先后順序,起引導(dǎo)視線的作用
相似元素的運動饿这,要符合統(tǒng)一的規(guī)律
材料設(shè)計的運動吸取了一些真實世界的力學(xué)元素浊伙,例如重力和摩擦力。這些力反應(yīng)的是长捧,用戶對屏幕操作的影響吧黄,以及這些元素是如何相互反饋的。
材料設(shè)計的運動具有以下幾個特征:
1. 響應(yīng)式的
材料設(shè)計的動效是充滿活力的唆姐。它能迅速精確響應(yīng)用戶用戶所觸發(fā)的內(nèi)容拗慨。
在移動設(shè)備上的長動畫大約是300-400ms,短動畫大概是150-200ms奉芦。過長的動畫讓人感覺遲鈍赵抢,過短的動畫讓人覺得難以看明白。
用戶觸摸屏幕時声功,通過漪漣動畫能使用戶確認輸入烦却。卡片上升表示該卡片處于激活狀態(tài)先巴。
2. 自然的
材料設(shè)計的動效通過模仿真實世界的力其爵,而展現(xiàn)了自然的運動過程。
在真實的世界中伸蚯,一個物體可以被重量摩渺、表面摩擦力影響很快的加速或減速。同樣的剂邮,材料設(shè)計的動效也是不會發(fā)生突然停止摇幻,或者突然啟動,都是會有一個加速度或者減速度挥萌。(紅色沒緩動绰姻,藍色有緩動)
真實世界中的力,例如重力引瀑,能使一個元素沿曲線運動而非直線運動狂芋。
材料設(shè)計的動效轉(zhuǎn)場是沿著一個弧線的。
3.?可察覺的
材料設(shè)計的動效是可以被周圍環(huán)境察覺的憨栽,包括用戶和周圍其他的元素帜矾。它可以被物體吸引辆影,并且恰當(dāng)?shù)幕貞?yīng)用戶的意圖。
作為過渡元素黍特,他們和他們周圍元素的運動是精心安排的蛙讥,可以通過這個過程看出他們之間的關(guān)系。
卡片可以推動其他卡片灭衷,讓他們給自己讓開路次慢。
元素可能會吸引其他元素加入,當(dāng)他們相互接近時合為一體翔曲。
4. 有引導(dǎo)意向的
材料設(shè)計的動效能使焦點在對的時間聚焦在對的點迫像。
場動畫有助于引導(dǎo)用戶進行下一步的交互。
運動可以傳遞不同的信號瞳遍,例如闻妓,一個操作是否不可用。
動畫能使用戶關(guān)注特定對象掠械。
如何設(shè)計一個好的轉(zhuǎn)場動畫由缆?
好的動效設(shè)計應(yīng)該遵從以下幾點:
1. 動效是很快的
一個交互動作不應(yīng)該讓用戶做不必要的等待。
2. 動效是明確的
轉(zhuǎn)場動畫應(yīng)該明確,簡單肚菠,一致舔箭。應(yīng)該避免一次有太多的元素動效。
3. 動效是統(tǒng)一的
材料設(shè)計的動效是由速度蚊逢、響應(yīng)性层扶、和意向所統(tǒng)一的。在App 中的任何自定義動效體驗都應(yīng)該貫穿整一個App烙荷。
即使這些app有著不同的功能镜会,但是他們相似的動畫體驗讓人感覺他們是有關(guān)聯(lián)的。
動效的意義