最近在读谷歌的material design设计指南,根据自己的理解将其整理下来,方便之后查阅。
material design,可称为材质化设计,是谷歌创造的一种新的视觉语言,主要目标有两个,一是希望将科技创新与传统设计进行融合,从而打通物理世界和虚拟世界;二是希望能在不同的平台和设备之间构造一致的体验。这两点在整个设计规范中得到了很好的体现。
基本构成:
材质是核心,传统的设计准则是框架,动画是灵魂
1、 材质:
材质,是真实世界的隐喻。基于物理世界的触感,启发于纸张和墨水的表现形式,发展于科技以及想象力。
基于物理世界能让用户快速地理解其功能可用性,当然,除了物理世界的简单映射外,还创造了一些新的功能可用性,巧妙地取代了物理世界但是又没有打破其基本的规律。下面会对材质做详细的介绍。
2、设计:
传统印刷设计中的文字排版、网格、尺寸、颜色、图像等,搭建了材质化设计的基本框架。这些不只是为了好看,更重要的是能够组织信息并对用户做出引导。通过创造层级关系,获取视觉焦点,有意识地突出某些元素等,提高用户体验。
3、运动:
动态能够赋予设计更多的意义,更好地表现元素自身以及元素之间的关系,更好地提高用户的关注度,从而提升用户体验。
运动多数是由用户发起的,能够提高用户对应用的掌控感。
运动的前提是尽量不打断用户体验的持续性,特别是在变换和重新组织内容时。
材质详细介绍
从三个方面介绍:环境、物理属性、运动属性
下面的物体或者材质都是同一个意思。
1、环境
这是一个三维的空间,材质、光线、投影是这个空间最基本的东西。
在这个三维空间中,X轴水平,Y轴竖直向上,Z轴是垂直于屏幕。
光源分为两种,主光源和环境光。
主光源有一定的方向,会在物体上产生定向的阴影,环境光没有方向,会在物体四周造成较为柔和的阴影。
2、物理属性(基础的、高度、阴影、相对关系)
- 材质的长宽可以任意设置,但是厚度不变,都为1dp。
- 材质的形状和颜色都可以改变,以承载不同的内容,这些内容不会对材质的厚度造成影响。内容可以在材质内自由变换,行为独立于材质。
- 材质是固体的,意味着不能穿过其他材质,不能与其他材质发生重叠,输入事件不能穿过材质,比如各种手势,只能影响位于前面的材质。
- 高度:
指两个物体在z轴上的距离,单位是dp,因为材质是有厚度的,所以测量是从一个材质的顶部到另一个材质的顶部。
1)静止高度:
或者称为默认高度。所有的物体都有静止高度。当高度发生变化后,应尽快回到静止高度。桌面端的静止高度比表格中列出的要低2dp,这样更适用于鼠标以及其他非触摸式环境。
2)控件高度:
控件在不同的app之间有一致的静止高度,在不同的平台和设备之间会有所不同。组件有动态补偿高度,指的是当组件响应用户的输入时,发生的高度上的改变,同样的,每种组件的动态补偿高度也是一致的。
在输入事件完成或者取消之后,组件要回到原来的静止高度。
3)避免干扰:
由于动态补偿高度的存在,组件会离开原来的位置,有时会与其他组件相互干扰。这是需要避免的,思路如下:1、在组件层面上,在发生干扰之前,相应的组件移开进行避让,在事件完成后回到原位。2、在框架层面上,尽量将有可能产生干扰的组件分开,避免干扰的发生。
- 阴影
阴影取决于物体的高度,物体越高,阴影越大。反之,阴影也可以反映物体的高度,除此之外,还能表示物体之间的关系,区分不同的物体,也可以用来辨别同个物体前后的变化。需要注意一点的是,阴影是与位置紧密联系了,不要单纯为了改变阴影而改变。
因为高度决定了阴影,而且控件都有默认的高度,因此也有了默认的阴影。控件也有动态补偿高度,相应的也有对应的阴影大小。下面是一些例子,具体可以在官方文档中查看。https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
- 物体关系
1、父子关系:每个物体都有一个父级,每个物体都有多个子级,子级从父级继承了其变换属性,就是说子级会跟父级一起运动。
2、同胞关系:拥有同一个父级的称为同胞关系。
子级在的位移受到父级的限制。物体不能插入别的父子级之中
3、运动属性(变换属性加移动属性)
- 物体可以动态地改变形状,可以在所处的平面上放大缩小,甚至凭空地消失和出现。
- 物体不能弯曲和折叠
- 多个物体可以连接在一起,也可以拆分开来形成多个独立的物体。
- 材质可以同时沿多个轴移动,不用局限于简单的单向移动。
(这里好像不能附gif图,有兴趣的可以直接到官网上看相应的演示)https://material.google.com/what-is-material/material-properties.html#material-properties-transforming-material