Material Design学习笔记总结1

什么是Material Design?

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
(来源谷歌官方文档)
我们挑战自我,为用户创造了崭新的视觉设计语言。与此同时,新的设计语言除了遵循经典设计定则,还汲取了最新的科技,秉承了创新的设计理念。这就是原质化设计(Material Design)。这份文档是动态更新的,将会随着我们对 Material Design 的探索而不断迭代、升级。
(来源极客学院)
Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
(来源谷歌官方文档)
我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。
(来源极客学院)


1、核心思想

国人将Material Design翻译成 _质感设计_  或者 _原质化设计_,顾名思义,就是把物理世界的物料体验带进屏幕的虚拟世界中。

Material是一种隐喻,是一种类真实世界的反馈。通过基于物理世界的_光影_、_表面质感_、_运动感_的表现让用户快速地理解和认知。同时虚拟世界的灵活性又给设计带来了新的启发,但绝不会脱离客观的物理环境。


2、环境

· 三维世界(3D world):

Material 环境是一个三维的空间,这意味着每个物件都有 x , y , z  三个维度,z 轴垂直于显示平面,并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 标准的1dp 厚度。 在网页上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。如图。

具备 x,y 和 z 轴的 3D 空间

· 材料的高度特性:

  材料(Material)总是有着可变的长度和宽度(x、y-axix)和不可变的厚度(z-axix,1dp;内容会以不同形状与颜色展示在材料上,但不会增加材料的厚度),而且会有阴影。阴影根据z方向上的高度(我们称之为海报高度)来变化。海拔高度越高,其被投射的阴影范围越大;海拔高度越小,其被投射的阴影范围越小。通常,海拔高度是根据事件来触发的,当输入事件完成或被取消,元素将会恢复到自身的静态高度。

· 材料的变形:

       材料与材料之间不能彼此穿越,因为材料是实体。材料可以变大变小,但不能弯曲或折叠;几片材料能合在一起组成一片材料,而当一片材料被分割后,它也会自己复原成一个完整的材料;材料可以沿着任何一个轴移动。


3、动画

① 逼真的动画效果

       物理世界中物体拥有质量,所以只有当施加给它们力量的时候才会移动,因此物体没法在瞬间开始或者结束动作。动画突然开始或者停止,或者在运动时突兀的变化方向,都会使用户感到意外和不和谐的干扰。

动画要贴近真实世界,就要重视easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。(来源:优设:重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记)


② 响应式交互

       响应式交互给用户输入以反馈,使得APP不只是单纯展示信息,而是具有更强的交互性、能沟通的工具。

水波反馈

        当用户操作生成一个新元素时,元素的动画应该基于触控点展开,并形成一个像涟漪一样逐渐发散开的径向动效响应。如图。

③ 转场动画

       不同页面间的转场应当平滑、轻快,且应该体现页面间的空间与层级关系。转场动画应当去引导用户的注意力,让他们清楚地知道页面走向,同时保持视觉连贯性。

转场动画如图:

以触发点为中心过渡
用递次的动画引导用户注意力
相似元素的运动,要符合统一的规律。
细节动画

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

推荐阅读更多精彩内容