Material Design学习笔记

Material Design核心思想

就是把物理世界的体验带到屏幕,去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化和过度,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

环境

Material 环境是一个三维的空间,这意味着每个对象都有 x , y , z 三维坐标属性,z 轴垂直于显示平

面,并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页

上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

光影关系(Light and shadow) 在 material 环境中,虚拟的光线照射使场景中的对象投射出阴影,主光源投射

出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。

material 环境中的所有阴影都是由这两种光投射产生的,阴影是光线照射不到的地方,因为各个元素在z轴上占据

了不同大小的位置遮挡住了这些光线。

物理特性

材料具有变化的长宽尺寸 变化的长宽尺寸(以 dp 为计)和均匀的厚度 均匀的厚度(1dp)

高度和阴影

Material design中的对象与现实生活中的对象具有相似的性质。在现实生活中,不用对象可以被堆积或粘贴起来,但是不能彼此交叉。对象自身塑造了自己的阴影并返回自己的光影。

依据这些性质所构造出来的空间模型对于用户来说是非常熟悉的,这一模型也可以被长期应用于移动应用当中。支撑这一空间模型的正是“高度”(Elevation)和“光影”(Shadows)这两个概念。

图标

注意:

不要给彩色元素加投影,层叠不超过两层

折角不要放在左上角,带投影的元素要完整展现

文字

12sp 小字提示

14sp (桌面端13sp) 正文/按钮文字

16sp (桌面端15sp) 小标题

20sp Appbar文字

24sp 大标题

34sp/45sp/56sp/112sp 超大号文字

布局

最小点击区域尺寸:48dp*48dp

栅格最小单位:8dp.一切距离大小是8dp倍数

顶部状态高度:24dp

Appbar最小高度:56dp

底部导航栏高度:48dp

悬浮按钮尺寸:56*56dp/40*40dp

用户头像尺寸:64*64dp/40*40dp

小图标点击区域:48*48dp

屏幕左右对齐基线:16dp

文字左侧对齐基线:72dp

组件

悬浮按钮有两种尺寸:56dp*56dp/40*40dp

卡片统一由2dp的圆角

Dialog中取消类操作放在左边,引起变化的操作项放在右边

菜单的当前选项始终与当前选项水平对齐

靠近屏幕边缘时,位置可适当错开

菜单过长时,需要显示滚动条

菜单从当前选项固定位置展开,不要随点击位置变化

菜单到上下留出8dp距离

tab只用来展示不同类型的内容,tab至少2项,至多6项,超出6项需要变为滚动式,左右翻页

tab文字要显示完整,字号保持一致,不能折合,文字和图标不能混用,tab选中项的下划线高度是2dp

动画

感知一个物体有形的部分可以帮助我们理解如何去控制它。观察一个物理的运动可以告诉我们它轻还是重,柔性

还是刚性,小还是大。在 material design 设计规范中,动作不止是呈现着它美丽的一面,它还意味着在空间

中的关系、功能以及在整个系统中的趋势。

动画可以做到:

不同视图之间的焦点引导。

当用户完成了一个手势后,提示用户将会发生什么

明确元素之间的层级和空间关系

当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图)

润色整个app:个性化、令人愉悦

重视动画效果,考虑它在现实世界中的运动规律

动画的设计要有先后顺序,起引导视线的作用

相似元素的运动,要符合统一的规律

材料设计的运动吸取了一些真实世界的力学元素,例如重力和摩擦力。这些力反应的是,用户对屏幕操作的影响,以及这些元素是如何相互反馈的。

材料设计的运动具有以下几个特征:

1. 响应式的

材料设计的动效是充满活力的。它能迅速精确响应用户用户所触发的内容。

在移动设备上的长动画大约是300-400ms,短动画大概是150-200ms。过长的动画让人感觉迟钝,过短的动画让人觉得难以看明白。

用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

2. 自然的

材料设计的动效通过模仿真实世界的力,而展现了自然的运动过程。

在真实的世界中,一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的,材料设计的动效也是不会发生突然停止,或者突然启动,都是会有一个加速度或者减速度。(红色没缓动,蓝色有缓动)

真实世界中的力,例如重力,能使一个元素沿曲线运动而非直线运动。

材料设计的动效转场是沿着一个弧线的。

3. 可察觉的

材料设计的动效是可以被周围环境察觉的,包括用户和周围其他的元素。它可以被物体吸引,并且恰当的回应用户的意图。

作为过渡元素,他们和他们周围元素的运动是精心安排的,可以通过这个过程看出他们之间的关系。

卡片可以推动其他卡片,让他们给自己让开路。

元素可能会吸引其他元素加入,当他们相互接近时合为一体。

4. 有引导意向的

材料设计的动效能使焦点在对的时间聚焦在对的点。

场动画有助于引导用户进行下一步的交互。

运动可以传递不同的信号,例如,一个操作是否不可用。

动画能使用户关注特定对象。

如何设计一个好的转场动画?

好的动效设计应该遵从以下几点:

1. 动效是很快的

一个交互动作不应该让用户做不必要的等待。

正确:动效应该足够快,让用户不用等待动画完成
 错误 :不要做无意义的拖延。
                         

2. 动效是明确的

转场动画应该明确,简单,一致。应该避免一次有太多的元素动效。

3. 动效是统一的

材料设计的动效是由速度、响应性、和意向所统一的。在App 中的任何自定义动效体验都应该贯穿整一个App。

即使这些app有着不同的功能,但是他们相似的动画体验让人感觉他们是有关联的。

动效的意义

正确       


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

推荐阅读更多精彩内容