1.3 颜色值
Android 定义颜色color时有6位或8位值的区别,6位(如:#0470C4)就是RGB,值8位(如:#1E000000)头两位是透明度,后6位是RGB值,00是完全透明,FF是完全不透明,比较适中的透明度值是 1E。
不透明度16进制值
格式如#00FFFFFF,前两位代表不透明度的十六进制。00表示完全透明,FF就是全不透明。依次递增。
16进制值
1.4 标注
Android 设计规范中间距单位是
dp
,dp 在 Android 机上不同的密度转换后的 px 是不一样的,所以按照设计图的 px 转换成 dp 也是不一样的。
现在,多数标注工具都支持 dp 标注功能,比如 MarkMan,如果UI设计者是按照1280*720的尺寸设计的效果图,在标注时选择xhdpi即可:
想要深入了解 Material Design,还是建议有空通读一遍官方文档。不过,牢记以下要点,基本能做到90%了。实际上,Google 官方的应用也有不遵照规范的地方,不能太拘泥于条条框框。
Material Design 中文版文档
2.1 核心思想
Material Design 的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。
Material Design 中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。
这些是纸片的魔法特性,真实纸片所不具备的能力:
纸片可以伸缩、改变形状
纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分
多张纸片可以拼接成一张
一张纸片可以分裂成多张
纸片可以在任何位置凭空出现
不过,魔法纸片有些效果是禁止的:
一项操作不能同时触发两张纸片的反馈
层叠的纸片,海报高度不能相同
纸片不能互相穿透
纸片不能弯折
纸片不能产生透视,必须平行于屏幕
Material Design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。
所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。
注意
:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。
2.3 动画
Material Design 重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。
** easing **
动画要贴近真实世界,就要重视 easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。
** 水波反馈 **
黑色
:[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]
白色
:[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]
** 桌面图标 **
另外注意56dp这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按56的整数倍来设计。
还有非常多规范,不详细列举,遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多,距离与尺寸要相应增大。
2.9 组件(Components)
底部导航(Bottom navigation)
悬浮响应按钮(Floating action button)
, 点击后会产生墨水扩散效果的圆形按钮。
浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。
扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。
最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适合用在简单的界面,例如对话框中。
使用悬浮按钮要遵循以下规则:
建议只用一个悬浮按钮
悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘
悬浮按钮不能被其他元素盖住,也不能挡住其他按钮
列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项
悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线
纸片是一种小块的用来呈现复杂实体的块,比如说日历的事件或联系人。它可以包含一张图片,一个短字符串(必要时可能被截取的字符串),或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。
狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。
Dialogs 用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 Dialog 可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 。
一些复杂的操作,尤其是每个决策都需要相关解释说明的情况下是不适合使用 Dialog 形式的。
列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。
列表由单一连续的列构成,该列又等分成相同宽度称为行(rows)的子部分。行是瓦片(tiles)的容器。瓦片中存放内容,并且在列表中可以改变高度。
如果列表项内容文字超过3行,请改用卡片。如果列表项的主要区别在于图片,请改用网格。
Components sticker sheet for Sketch
- 23.51 MB (.sketch)
Components sticker sheet for Adobe After Effects
- 136.72 MB (.zip)
Components sticker sheet for Adobe Photoshop
- 94.86 MB (.psd)
Components sticker sheet for Adobe Illustrator
- 50.07 MB (.ai)