阴影
阴影为物体的深度和移动方向提供了重要视觉线索。阴影是区分不同表面的位移视觉线索。一个物体的高度决定了其阴影的形态。
不正确1：完全没有阴影，完全没将漂浮按钮从背景的表面中区分出来
不正确2：清晰的阴影表明，漂浮按钮和蓝色页是独立的元素。但是两者的阴影太相似，看起来两者处在同一高度上。
正确：漂浮按钮的阴影更柔和，扩散更大，表明其处在更高的高度上；而蓝色页是阴影边缘更清晰。
在运动中，依据阴影提供的重要视觉线索，用户能分辨物体的运动方向，以及不同表面之间的距离是增大还是减小了。
元素的参考阴影
下面元素阴影应被用作标准参考。
应用条阴影4dp
悬浮按钮： 停留状态阴影：2dp； 按下状态阴影：8dp
在笔记本中，悬浮按钮的高度可以是：
停留状态阴影：0dp
按下状态阴影：2dp
漂浮按钮：停留状态阴影：6dp； 按下状态阴影：12dp
卡片：停留状态阴影：2dp； 选中状态阴影：8dp
菜单和子菜单：菜单阴影：8dp； 子菜单阴影：9dp （每个分一级子菜单，阴影就增加1dp）
对话框：阴影：24dp
导航栏和右拉栏：阴影16dp
刷新按钮：阴影3dp
快速输入/搜索栏：停留状态阴影：2dp； 下拉状态阴影：3dp
单行元件栏： 阴影6dp
切换按钮：阴影1dp
物体关系
物体的层级
如何组织物体，或者说物体的收纳，在app应用中决定了物体相对其他物体运动的方式。物体可以独立于其他物体运动，也可能在层级中受制于其他物体。
所有物体在层级关系中都能用父级和子级来描述。“子”元素在层级中归属于“父”元素。所有物体都是系统或其他物体的“子”元素。
父-子 具体规则
- 每个物体都有一个父级
- 每个物体可能有若干个子级
- 子级物体从父级物体遗传外观特性，如位置、旋转、缩放和高度
- 同层级的物体互为兄弟
例外情况
- 归属于系统的子级物体，如重要UI元素，可独立于其他物体运动。例如，漂浮操作按钮不随着内容滚动而移动。其他类似元素包括：
- 应用的侧边导航栏
- 操作条
- 对话框
交互
物体在层级关系中的位置决定了其与其他物体交互的方式
例如：
- 子级物体与父级物体在Z轴上的距离为最小，其他物体无法位于两者之间
- 在滚动卡片集合中，所有卡片互为兄弟，串联移动。卡片集合控制了这些卡片的运动。
卡片随着卡片集合上下滚动。漂浮操作按钮保持不动，因为他的父级没有滚动。
高度
如何规定物体在Z轴上的高度，取决于你想表达的内容层级，也取决于某个物体是否要独立于其他物体运动。
网友评论