學習Material design之前舰始,你至少要了解這些

本文對Material design做一個整體的概覽,后續(xù)將在個人的公眾號上陸續(xù)推出官方文檔的翻譯版峻堰,一方面想督促自己完成對整篇文檔的通讀讹开,另外便于自己以后查閱。
文中主要參考了Rich Fulcher的Paper and Ink: The Materials that Matter視頻的相關內(nèi)容

Material design的設計思路來源于紙和墨捐名,從現(xiàn)實世界中獲得靈感旦万,大部分的元素都具有一定的物理性質,但是又不完全遵循擬物設計镶蹋。Material是整個設計理念的核心概念成艘,是重要的信息載體,可以理解為【紙張】贺归,它可以包含一個或多個元素淆两,擁有厚度、邊緣牧氮、陰影和接縫等一些真實的物質屬性琼腔,但是又擁有自由變形這樣真實紙片不具備的特殊能力。

定義

Material Design是一種新的設計語言踱葛,通過排版丹莲、范圍、顏色尸诽、位置等來創(chuàng)造出大膽新奇的圖形界面甥材。物質(material)通過用戶的手指或鼠標的點擊碰撞吸收能量,將力量轉化為有生命力的運動性含。Material Design主要討論紙墨理論上的虛擬物質如何超越現(xiàn)實實體而大放異彩洲赵。

紙墨

一款應用的每個像素點就像一張紙上的一個油墨點,紙本身是無色的,但油墨有各種顏色叠萍,而正是油墨的顏色才可以讓內(nèi)容正確的顯示出來芝发。不管你應用的屬性是圖片還是視頻。

油墨沒有任何限制苛谷,它的大小任意辅鲸,適合于任何紙張。

紙張有1dp的絕對厚度限制腹殿,相當于一張重35磅的紙独悴,一疊輕卡片的重量。當你增加油墨時锣尉,紙片的厚度不會改變刻炒,不同于我們想象中像涂料一樣一層層的壘上去。這種紙本身厚度永遠是1dp自沧,但不要把它想象成虛擬概念坟奥,而是物質的。這是一種對于系統(tǒng)來說很重要的觸感暂幼。

就形狀而言筏勒,紙張沒有過多限制,你可以得到任何你所期望的形狀旺嬉。

Z軸

手持設備的Z深度指的就是設備的正面和背面之間的距離管行,這個深度的控制限制了紙張的變化,紙張需要配合設備深度而產(chǎn)生變化邪媳。


Material Design設計的環(huán)境是設備內(nèi)部捐顷,設想一下當紙張翻頁時就會撞到設備的前屏或者后蓋上,所以紙張不能折疊雨效。紙張會投影迅涮,陰影的效果取決于它在Z軸的位置。它的移動方式可以想象成你的手掌在屏幕正前方前前后移動徽龟。
兩張紙不完全重疊時叮姑,前面的紙有光源,后面的紙未能完全接收到据悔,便會在后面投射上陰影传透,因為在光照模型下它們存在這樣的物理關系,所以陰影不應該像油墨畫上去的感覺极颓。

利用陰影表現(xiàn)紙張的不同高度朱盐,可以避免多個紙張相交
利用陰影表現(xiàn)紙張的不同高度,可以避免多個紙張相交

動作

假設我們有張立體的紙菠隆,當我們伸手去觸碰時是無法透過屏幕接觸到它并從中穿過兵琳。這時便需要建立一種聯(lián)系狂秘,讓紙和我們的操作產(chǎn)生互動。

回應方式:用戶接近紙張的時候躯肌,紙張就會主動接觸用戶者春,(當你接觸屏幕的時候,會感覺元素向前與你產(chǎn)生接觸完成你的請求)想象手指慢慢向下接觸水面羡榴,當你的手指和倒影相遇的時候碧查,你碰到了水面,產(chǎn)生了回應校仑,水面產(chǎn)生了漣漪,與油墨元素的交流都可以這樣處理传惠。

這就是我們經(jīng)称看到的Button所產(chǎn)生的漣漪效果的原因,同時也解釋了為什么在我們點擊Button的時候卦方,它的Z軸高度不降反升羊瘩,因為我們無法隔著屏幕真正接觸到紙片。



運動用來確立并強調重要元素的整體連貫性盼砍。紙張可以沿X尘吗、Y、Z軸任意移動浇坐,不拘泥于枯燥的物理定律睬捶,它有更多的可變性。紙張可以改變它在X軸和Y軸的尺寸近刘,墨水則是完全自由擒贸,可以任意改變。當你滴一滴墨水在紙上時觉渴,它可以隨意擴散介劫。

紙張的形狀可以改變,可以撕開案淋、粘合座韵,制造還是銷毀紙取決于它的運動形式,紙張之間的運動相互獨立踢京,進入和退出的方式也可不同:

  • 在合適的某位置直接創(chuàng)建或者銷毀一張紙
  • 一種方式進誉碴,另一種方式出
  • 復制一張紙,兩張還可以接縫在一起成為一張新的紙

紙張之間的粘合主要有兩種:
縫合線漱挚,兩張紙有相同的邊距及Z軸高

粘合之前
粘合之前

粘合之后
粘合之后

階梯狀:兩張紙Z軸不相同翔烁,相互獨立,最常見的代表是工具欄或者導航欄


實際應用

Android 6.0代表壁紙
Android 6.0代表壁紙

很有質感對不對旨涝?
但是 ——

這不是一張電腦合成圖蹬屹,而是通過不同類型的紙張配合準確的光源侣背、色彩來營造出紋理和色調的層次感而拍攝出的照片!

The main thing to note is that these aren’t digitally made – each one is constructed out of different types of paper and photographed very carefully with the correct amount of lighting.

現(xiàn)在慨默,有沒有感受到一丟丟紙墨的神奇之處贩耐?


如果你也熱愛設計,歡迎通過公眾號與我交流

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厦取,一起剝皮案震驚了整個濱河市潮太,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌虾攻,老刑警劉巖铡买,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異霎箍,居然都是意外死亡奇钞,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門漂坏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來景埃,“玉大人,你說我怎么就攤上這事顶别」柔悖” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵驯绎,是天一觀的道長完慧。 經(jīng)常有香客問我,道長条篷,這世上最難降的妖魔是什么骗随? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮赴叹,結果婚禮上鸿染,老公的妹妹穿的比我還像新娘。我一直安慰自己乞巧,他們只是感情好涨椒,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著绽媒,像睡著了一般蚕冬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上是辕,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天囤热,我揣著相機與錄音,去河邊找鬼获三。 笑死旁蔼,一個胖子當著我的面吹牛锨苏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播棺聊,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼伞租,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了限佩?” 一聲冷哼從身側響起葵诈,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祟同,沒想到半個月后作喘,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡耐亏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年徊都,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片广辰。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖主之,靈堂內(nèi)的尸體忽然破棺而出择吊,到底是詐尸還是另有隱情,我是刑警寧澤槽奕,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布几睛,位于F島的核電站,受9級特大地震影響粤攒,放射性物質發(fā)生泄漏所森。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一夯接、第九天 我趴在偏房一處隱蔽的房頂上張望焕济。 院中可真熱鬧,春花似錦盔几、人聲如沸晴弃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽上鞠。三九已至,卻和暖如春芯丧,著一層夾襖步出監(jiān)牢的瞬間芍阎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工缨恒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谴咸,地道東北人轮听。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像寿冕,于是被迫代替她去往敵國和親蕊程。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

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

  • 第一章節(jié)《Material design》 一驼唱、介紹(Introduction) 譯者注:關于“Material”...
    D27閱讀 3,563評論 0 30
  • 1.Introduction - 介紹 We challenged ourselves to create a v...
    兩個朋友指甲閱讀 1,345評論 0 5
  • Material Design藻茂,中文名:材質設計,是由Google推出的全新設計語言玫恳,旨在為手機辨赐、平板電腦、臺式機...
    何小有閱讀 3,083評論 0 8
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,162評論 25 707
  • 今天我的第一個徒弟京办,也是第一個徒弟來公司掀序,我們快九個月沒見面了,在樓下見到她我主動與她打招呼惭婿,這要在以前我不會的不恭,...
    徐愷嶸閱讀 126評論 0 0