【Material Design视觉设计语言】Material Design设计概述
2015-08-23 14:45
381 查看
作者:郭孝星
微博:郭孝星的新浪微博
邮箱:allenwells@163.com
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计(一):按钮
【Material Design视觉设计语言】UI组件设计(二):卡片
【Material Design视觉设计语言】UI组件设计(三):纸片
【Material Design视觉设计语言】UI组件设计(四):表格
【Material Design视觉设计语言】UI组件设计(五):提示框
【Material Design视觉设计语言】UI组件设计(六):分隔线
【Material Design视觉设计语言】UI组件设计(七):网格
【Material Design视觉设计语言】UI组件设计(八):列表
【Material Design视觉设计语言】UI组件设计(九):菜单
【Material Design视觉设计语言】UI组件设计(十):选择器
【Material Design视觉设计语言】UI组件设计(十一):进度条
【Material Design视觉设计语言】UI组件设计(十二):滑块
【Material Design视觉设计语言】UI组件设计(十三):Toast
【Material Design视觉设计语言】UI组件设计(十四):Tabs
【Material Design视觉设计语言】UI组件设计(十五):文本框
x和y有轴模拟显示平面
z轴垂直于显示平面,每个应用组件元素占据一定位置并且有一个1dp的厚度标准。
阴影有两部分组成:
顶端表达深度的阴影
底端表达边界的阴影
下面我们先来直观地看一下不同阴影的效果。
直射光产生的投影
散射光产生的投影
直射光和散射光混合产生的投影
高度的单位是dp
子组件的高度依赖于父组件的高度
组件的静止高度在我们的应用中同城是一个常量。
同一组件的静止高度在不同平台可能不一样,比如组件在电视上就比手机上的静止高度大一些。
下面我们来看一下常见组件的静止高度和动态高度的偏移,如下表所示:
上述表格对应的图表描述如下所示:
下面我们来看一个带有多种组件的应用界面的布局是如何处理不同组件的高度的。
举例1
包含卡片和FAB应用布局的实例与它在Z轴上元素高度的横截面图表
举例2
包含开放导航抽屉的应用布局实例与它在Z轴上元素高度的横截面图表
确定某些对象的高度(即它们在Z空间的位置)取决于我们想描述的内容层次以及某一个对象是否需要相对于其他对象自主移动。
举例
随着父表的移动,升高的按钮(它的子元素)会伴随着它移出屏幕。
随着卡片集合卷出了屏幕,它的子卡片也会随之卷出屏幕。浮动动作按钮保留在某一地点因为它的父元素没有被卷动。
下面列举下常用应用组件的参考高度:
敲击状态:8dp
敲击状态:12dp
选中状态:8dp
子菜单:9dp(每个子菜单增加1dp)
滚动状态:3dp
材料的高度和宽度是可变的。
材料会因为材料元件之间的相对高度(即Z 轴位置)的变化而自然的产生阴影。
内容可以任何形式显示在材料上,但内容不会额外增加材料的厚度
材料可以自由的组合和拆分
材料可以在各个轴上自由移动
微博:郭孝星的新浪微博
邮箱:allenwells@163.com
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells
【Material Design视觉设计语言】章节列表
【Material Design视觉设计语言】开篇【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计(一):按钮
【Material Design视觉设计语言】UI组件设计(二):卡片
【Material Design视觉设计语言】UI组件设计(三):纸片
【Material Design视觉设计语言】UI组件设计(四):表格
【Material Design视觉设计语言】UI组件设计(五):提示框
【Material Design视觉设计语言】UI组件设计(六):分隔线
【Material Design视觉设计语言】UI组件设计(七):网格
【Material Design视觉设计语言】UI组件设计(八):列表
【Material Design视觉设计语言】UI组件设计(九):菜单
【Material Design视觉设计语言】UI组件设计(十):选择器
【Material Design视觉设计语言】UI组件设计(十一):进度条
【Material Design视觉设计语言】UI组件设计(十二):滑块
【Material Design视觉设计语言】UI组件设计(十三):Toast
【Material Design视觉设计语言】UI组件设计(十四):Tabs
【Material Design视觉设计语言】UI组件设计(十五):文本框
一 Material Design的环境
Material Design的环境模拟的是现实世界,它是一个三维立体空间,有x、y、z三个坐标轴,如下所示:x和y有轴模拟显示平面
z轴垂直于显示平面,每个应用组件元素占据一定位置并且有一个1dp的厚度标准。
1.1 光影关系
光影关系是虚拟的光线照射使得场景中的对象投射出阴影。阴影有两部分组成:
顶端表达深度的阴影
底端表达边界的阴影
下面我们先来直观地看一下不同阴影的效果。
1.1.1 光影关系的产生
光影关系由两种投射产生,如下所示:直射光产生的投影
散射光产生的投影
直射光和散射光混合产生的投影
1.1.2 光影关系的作用
光影关系标示了不同平面之间分离程度的视觉线索。1.2 组件高度
组件高度是z轴上两个不同平面之间的一种相对深度或距离。高度的单位是dp
子组件的高度依赖于父组件的高度
1.2.1 静止高度
静止高度即默认高度它是不会变化的,当一个组件的高度发生变化时,它会尽快恢复静止高度。组件的静止高度在我们的应用中同城是一个常量。
同一组件的静止高度在不同平台可能不一样,比如组件在电视上就比手机上的静止高度大一些。
1.2.2 感应高度
感应高度是应用组件根据用户的输入或系统事件来改变高度,这些高度的变化是通过动态高度的偏移生产的,一旦输入事件完成或取消,组件会自动回到静止高度。1.2.3 高度冲突
处于感应高度的元素在静止高度与动态高度的偏移之间移动的时候可能会遇到其他的元素,从而产生组件的高度冲突。下面我们来看一下常见组件的静止高度和动态高度的偏移,如下表所示:
上述表格对应的图表描述如下所示:
下面我们来看一个带有多种组件的应用界面的布局是如何处理不同组件的高度的。
举例1
包含卡片和FAB应用布局的实例与它在Z轴上元素高度的横截面图表
举例2
包含开放导航抽屉的应用布局实例与它在Z轴上元素高度的横截面图表
1.2.4 计算高度
在做应用组件的布局中,我们如何确定每个组件的高度呢?确定某些对象的高度(即它们在Z空间的位置)取决于我们想描述的内容层次以及某一个对象是否需要相对于其他对象自主移动。
举例
随着父表的移动,升高的按钮(它的子元素)会伴随着它移出屏幕。
随着卡片集合卷出了屏幕,它的子卡片也会随之卷出屏幕。浮动动作按钮保留在某一地点因为它的父元素没有被卷动。
下面列举下常用应用组件的参考高度:
应用条
4dp浮动按钮
静止状态:2dp敲击状态:8dp
浮动动作按钮
静止状态:6dp敲击状态:12dp
卡片
静止状态:2dp选中状态:8dp
菜单和子菜单
菜单:8dp子菜单:9dp(每个子菜单增加1dp)
对话框
24dp导航抽屉和右抽屉
16dp底部单页
16dp刷新按钮
3dp快速查询/搜索框
静止状态:2dp滚动状态:3dp
SnakeBar
6dp切换按钮
1dp二 Material Design的属性
2.1 材料的物理属性
材料具有变化的长度尺寸和均匀的的厚度。材料的高度和宽度是可变的。
材料会因为材料元件之间的相对高度(即Z 轴位置)的变化而自然的产生阴影。
内容可以任何形式显示在材料上,但内容不会额外增加材料的厚度
2.2 材料的形状变化
材料可以选择它的水平面增长和收缩,但是不能弯曲或折叠材料可以自由的组合和拆分
2.3 材料的位置变化
材料能在环境中的任何位置自动产生和消失材料可以在各个轴上自由移动
相关文章推荐
- Spring JdbcTemplate batchUpdate() example
- 使用DBCP进行数据源配置
- UIControl
- 机器学习与人工智能学习资源导引(转自刘未鹏)
- 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATI
- 华为OJ(按字节截取字符串)
- linux shell中的管道执行(作业控制有关的shell)
- leetCode 116.Populating Next Right Pointers in Each Node (为节点填充右指针) 解题思路和方法
- 预编译相关详解
- org.apache.jasper.JasperException: Unable to compile class for JSP.JSP文件过大,导致文件编译出错
- Linux设备驱动开发——环境搭建
- 正则之邮箱,QQ,网址的写法
- Spring JdbcTemplate Querying examples
- oracle学习笔记——存储过程
- 数据结构之队列的顺序实现
- MinHashing基本原理
- java学习个人笔记---Java内存管理之java对象内存中的状态
- Vim学习笔记3---命令辨析
- Websphere系统hang原因调查
- 安卓开发自己写的刻度尺测量,精确到mm.