没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记
编者按:这一年就快完了,你还没搞懂Material design吗?是嫌文档太长,还是觉得自己英文不好?都没关
系,我们善良热情的@十萬個為什麽 帮同学们通读了一遍官方的设计指南,去糙取精,整理出这篇干货超多
的学习笔记,打包票学完基本就掌握90%了,别错过咯!
自从Material design发布以来,可乐橙就在一直收集相关素材与资源,研究别人的作品。这套设计风格非常鲜
明,带有浓郁的Google式严谨和理性哲学,深得我心。实际上,光是研究素材和别人作品,就能发现一些明显
的规律,做出几分相似的设计。这样半吊子的状态一直保持到现在,最近有时间通读一遍官方的设计指南,终
于有了深入的理解。在朋友的项目(http://lydiabox.com )中实践了一番,虽然很抱歉拿朋友开刀,不过他
对整体效果似乎还算满意。
Material design的 设计规范 细致入微,需要消化好一阵子。越读越感受到它的妙处,假如每个细节都严格遵照
Material design的思想来设计,哪怕你不是设计人员,你的产品也一定不会难用和难看。当然,作为设计师,
要求就更高了。设计文档本身,就提供了一种很好的方式,帮你从各个角度思考和构建自己产品的规范。但在
这之前,先要好好整理一下学习笔记。要打破规矩,必先掌握规矩。
由于只是笔记,我会写得尽量简单。并且省略掉一些可乐橙认为设计师都已经掌握的信息。想要深入了解
Material design,还是建议有空通读一遍官方文档。不过,牢记以下要点,基本能做到90%了。实际上,
Google官方的应用也有不遵照规范的地方,不能太拘泥于条条框框。
一、核心思想
,aterial design的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净
的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效
果。
Material design是最重视跨平台体验的一套设计语言。由于规范严格细致,保证它在各个平台使用体验高度一
致。不过目前还只有Google自家的服务这么做,毕竟其他平台有自己的规范与风格。
二、材质与空间
材质
Material design中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反
馈,同时拥有液体的一些特性,能够自由伸展变形。
这些是纸片的魔法特性,真实纸片所不具备的能力:
纸片可以伸缩、改变形状
纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分
多张纸片可以拼接成一张
一张纸片可以分裂成多张
纸片可以在任何位置凭空出现
不过,魔法纸片有些效果是禁止的:
一项操作不能同时触发两张纸片的反馈
层叠的纸片,海报高度不能相同
纸片不能互相穿透
纸片不能弯折
纸片不能产生透视,必须平行于屏幕
空间
Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离
界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。
所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。
同一种元素,同样的操作,抬升的高度是一致的。
注意:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。
三、动画
Material design重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关
系,具备功能上的作用。
easing
动画要贴近真实世界,就要重视easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然
停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。
水波反馈
剩余108页未读,继续阅读
资源评论
- TT_RJB2022-05-12没有代码demo
ai_ma_ai
- 粉丝: 737
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功