Material Design 概念,环境和基本属性
Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面.
设计概念
Material Design的灵感来自于对纸和墨水的研究,基于触觉现实感.并且它还在继续地发展扩充,有很大的想象空间.
基于现实,让材料的表面和边缘提供视觉线索. 熟悉的触觉属性可以帮助用户快速地明白正在发生什么.
光,表面和运动的一些基本规则是很关键性的因素,它们可以传达物体在空间如何存在,运动和交互.
运动是很关键的因素,可以吸引注意力和保持连续性. 反馈需要微小但是清晰, 转换需要有效率但是还要保持连贯.
Material Environment
Material环境是一个3D环境:
新添加的Z轴垂直于手机平面,指向屏幕正面之外(指向用户).
每一片材料都占据了Z轴上的一个地方,默认有1dp的厚度.
光和影
在material环境中是有光照的,主要的光线创建了有方向的影子,同时环境光创造了全方向的软阴影.
Material properties
物理属性:
材料有各种X和Y轴尺寸(dp单位), 但是有统一的Z轴尺寸,也就是厚度,都是1dp.
材料会投出影子. 影子是由于材料元素之间Z轴的相对位置自然导致的. 不要给相同Z轴位置的材料元素之间加上影子,这样会导致误解.
材料可以展示shape和colour的内容,各种图像视频, 内容不会给材料增加厚度.
内容的行为是与材料独立的,但是它不能超出材料的边界. 比如内容可以在材料限定的框里独立运动和缩放.
材料是实心的(solid). 输入事件不能穿过材料去影响下层的材料.
多种材料元素不能同时占据同一维度空间,可以改变它们的高度.
材料不能穿过其他材料,因为它们都被认为是实心的.
材料转换:
材料可以改变形状,大小,但是它的生长和缩小都只能局限在它的平面.
材料不能弯曲或者折叠.
多片材料可以组合到一起变成一片材料.
材料也可以分割,再合成一片等等.
材料的运动:
材料可以自然地生成或者销毁.(缩放动画).
材料可以以任意的轴向运动.(比如任意轴旋转).
Z轴向的运动通常是因为用户和材料的交互.
3D空间中的物体
Material Design中的物体和真实世界的物体有类似的特质.
在真实的物理世界中,物体可以堆积或者附着在一起,但是不能穿过去, 物体也会投射出影子,发射光线.
这些特性组成了一个用户熟悉的空间模型,可以跨应用一致应用.
Elevation (Android)
高度(Elevation)指的是两个表面之间的Z轴相对距离. child的高度是相对于它的parent的.
高度测量的单位和X轴Y轴相同,通常用dp. (density-independent pixels).
由于材料有一个标准的1dp厚度,所有的高度都是测量两个表面顶部之间的距离.
Resting elevation: 静止高度
每一个材料物体都有一个静止高度(默认高度), 称作resting elevation.
物体的默认高度一般是不会改变的,即便要改变自己的高度,也应该尽快回到自己的默认高度.
比如一个材料,正常的高度是2dp,当它被点击时,它的高度变为6dp,当点击结束,它应该回到默认的2dp.
一个组件的默认高度在各个app中应该是一致的.
但是跨平台的情况,高度可以不同,比如,TV比移动和PC端的深度更大.
Responsive elevation and dynamic elevation offsets
响应式的高度和动态高度偏移
一些组件类型有响应式的高度,也即,有的组件会用高度变化来响应用户的输入(比如,正常,获得焦点,点击)或者系统的事件. 这些高度变化用动态高度偏移来统一实现.
动态高度偏移(Dynamic elevation offsets)是组件相对于它的静止高度来说,要移动的目标高度(goal elevation). 它们保证了无论动作和组件类型, 高度变化是一致的. 比如,所有在点击时需要提高高度的组件,它们提高的程度是相等的.
比如,虽然floating action button的静止高度比其他button高,但是它点击后也是跟其他button一样在自身的静止高度上提高6dp (Dynamic elevation offset).
一旦输入事件完成或者取消,组件都会回到自己的静止高度.
有用的Shadow
阴影提供了非常重要的视觉线索,显示出对象的深度和有方向的运动.
它们是唯一可以显示界面之间分离程度的视觉线索.
(如果没有阴影,就显示不出来floating action bar和下方界面是分离的).
一个对象的高度决定了它的阴影.
更模糊的阴影一般显示出了更高的高度.
运动过程中,阴影也可以为我们提供运动方向的线索,各个表面之间的距离到底是增大还是缩小.
有阴影的变化,我们能判断出有高度的变化.
高度高的物体投射出更大更模糊的阴影.
如果阴影没有变化而大小变化,说明是物体被放大了(尺寸改变),而不是高度变化了.
Object relationships: 物体关系
物体的继承关系
你在一个应用中如何组织物体或者物体的集合,决定了它们相对于彼此如何运动.
物体可以独立运动,也可以被它们继承关系中更高级的物体所限制.
所有的物体都处在一个继承体系中,有着parent-child的关系,一个元素可以是另一个元素的child,也可以是系统的child.
Parent-child规范:
(1)每一个对象都有一个parent;
(2)每一个对象都可以有若干个children;
(3)child继承了parent的转变属性,比如位置,缩放,旋转和高度.(parent移动的时候上面的child也一起动);
(4)兄弟(siblings)指在继承体系中处于同一级的对象.
几个特例:
Items parented to the root, 比如基本UI元素, 运动是和其他元素独立的.
比如, floating action bar不随着内容滚动.
还有其他元素包括: 应用的边界导航抽屉菜单; action bar, Dialogs.
交互:
物体在继承体系中的parent-child地位决定了它们之间如何交互.
比如:
1.children和parent之间的z轴距离是最小的,其他不在这个继承体系中的对象是不能介入到parent和children之间的.
2.在一个滚动的card集合中,所有的card都是兄弟,所以它们一起运动,它们的运动由它们的容器(集合对象)控制.
高度:
物体的高度取决于你想表达的内容体系,也取决于一个对象是否需要独立于其他对象来运动.
参考资料:
Material Design: http://www.google.com/design/spec/material-design/introduction.html