Material Design學(xué)習(xí)筆記

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)該讓用戶做不必要的等待。

正確:動效應(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)的。

動效的意義

正確? ? ? ?


錯誤? ? ? ? ? ? ? ? ?
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奢讨,一起剝皮案震驚了整個濱河市稚叹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拿诸,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件塞茅,死亡現(xiàn)場離奇詭異亩码,居然都是意外死亡,警方通過查閱死者的電腦和手機野瘦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門描沟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來飒泻,“玉大人,你說我怎么就攤上這事吏廉∨⒁牛” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵席覆,是天一觀的道長史辙。 經(jīng)常有香客問我,道長佩伤,這世上最難降的妖魔是什么聊倔? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮生巡,結(jié)果婚禮上耙蔑,老公的妹妹穿的比我還像新娘。我一直安慰自己孤荣,他們只是感情好甸陌,可當(dāng)我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著盐股,像睡著了一般邀层。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上遂庄,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天寥院,我揣著相機與錄音,去河邊找鬼涛目。 笑死秸谢,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的霹肝。 我是一名探鬼主播估蹄,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼沫换!你這毒婦竟也來了臭蚁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤讯赏,失蹤者是張志新(化名)和其女友劉穎垮兑,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體漱挎,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡系枪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了磕谅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片私爷。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡雾棺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出衬浑,到底是詐尸還是另有隱情捌浩,我是刑警寧澤,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布工秩,位于F島的核電站尸饺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏拓诸。R本人自食惡果不足惜侵佃,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望奠支。 院中可真熱鬧馋辈,春花似錦、人聲如沸倍谜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尔崔。三九已至答毫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間季春,已是汗流浹背洗搂。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留载弄,地道東北人耘拇。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像宇攻,于是被迫代替她去往敵國和親惫叛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,969評論 2 355

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