学习Material design之前,你至少要了解这些

本文对Material design做一个整体的概览,后续将在个人的公众号上陆续推出官方文档的翻译版,一方面想督促自己完成对整篇文档的通读,另外便于自己以后查阅。
文中主要参考了Rich Fulcher的Paper and Ink: The Materials that Matter视频的相关内容

Material design的设计思路来源于纸和墨,从现实世界中获得灵感,大部分的元素都具有一定的物理性质,但是又不完全遵循拟物设计。Material是整个设计理念的核心概念,是重要的信息载体,可以理解为【纸张】,它可以包含一个或多个元素,拥有厚度、边缘、阴影和接缝等一些真实的物质属性,但是又拥有自由变形这样真实纸片不具备的特殊能力。

定义

Material Design是一种新的设计语言,通过排版、范围、颜色、位置等来创造出大胆新奇的图形界面。物质(material)通过用户的手指或鼠标的点击碰撞吸收能量,将力量转化为有生命力的运动。Material Design主要讨论纸墨理论上的虚拟物质如何超越现实实体而大放异彩。

纸墨

一款应用的每个像素点就像一张纸上的一个油墨点,纸本身是无色的,但油墨有各种颜色,而正是油墨的颜色才可以让内容正确的显示出来。不管你应用的属性是图片还是视频。

油墨没有任何限制,它的大小任意,适合于任何纸张。

纸张有1dp的绝对厚度限制,相当于一张重35磅的纸,一叠轻卡片的重量。当你增加油墨时,纸片的厚度不会改变,不同于我们想象中像涂料一样一层层的垒上去。这种纸本身厚度永远是1dp,但不要把它想象成虚拟概念,而是物质的。这是一种对于系统来说很重要的触感。

就形状而言,纸张没有过多限制,你可以得到任何你所期望的形状。

Z轴

手持设备的Z深度指的就是设备的正面和背面之间的距离,这个深度的控制限制了纸张的变化,纸张需要配合设备深度而产生变化。


Material Design设计的环境是设备内部,设想一下当纸张翻页时就会撞到设备的前屏或者后盖上,所以纸张不能折叠。纸张会投影,阴影的效果取决于它在Z轴的位置。它的移动方式可以想象成你的手掌在屏幕正前方前前后移动。
两张纸不完全重叠时,前面的纸有光源,后面的纸未能完全接收到,便会在后面投射上阴影,因为在光照模型下它们存在这样的物理关系,所以阴影不应该像油墨画上去的感觉。

利用阴影表现纸张的不同高度,可以避免多个纸张相交
利用阴影表现纸张的不同高度,可以避免多个纸张相交

动作

假设我们有张立体的纸,当我们伸手去触碰时是无法透过屏幕接触到它并从中穿过。这时便需要建立一种联系,让纸和我们的操作产生互动。

回应方式:用户接近纸张的时候,纸张就会主动接触用户,(当你接触屏幕的时候,会感觉元素向前与你产生接触完成你的请求)想象手指慢慢向下接触水面,当你的手指和倒影相遇的时候,你碰到了水面,产生了回应,水面产生了涟漪,与油墨元素的交流都可以这样处理。

这就是我们经常看到的Button所产生的涟漪效果的原因,同时也解释了为什么在我们点击Button的时候,它的Z轴高度不降反升,因为我们无法隔着屏幕真正接触到纸片。



运动用来确立并强调重要元素的整体连贯性。纸张可以沿X、Y、Z轴任意移动,不拘泥于枯燥的物理定律,它有更多的可变性。纸张可以改变它在X轴和Y轴的尺寸,墨水则是完全自由,可以任意改变。当你滴一滴墨水在纸上时,它可以随意扩散。

纸张的形状可以改变,可以撕开、粘合,制造还是销毁纸取决于它的运动形式,纸张之间的运动相互独立,进入和退出的方式也可不同:

  • 在合适的某位置直接创建或者销毁一张纸
  • 一种方式进,另一种方式出
  • 复制一张纸,两张还可以接缝在一起成为一张新的纸

纸张之间的粘合主要有两种:
缝合线,两张纸有相同的边距及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.

现在,有没有感受到一丢丢纸墨的神奇之处?


如果你也热爱设计,欢迎通过公众号与我交流

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容