Material Design学习笔记

  Wiki->移动开发->Android->Material Design-原质化设计

(友情链接:)

(英文原版:https://material.google.com/#)

这里只记录了关于前端提高用户体验能力的部分,具体请参考原文。

一、概述

1.目标

  & 创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。

  & 创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。

2.设计原则

  & Material Design 设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。

二、什么是Material?

1.环境

  1)三维世界

   Material 环境是一个三维的空间,这意味着每个对象都有 x , y , z 三维坐标属性,z 轴垂直于显示平面,并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

  2)光影关系

  光影关系(Light and shadow) 在 material 环境中,虚拟的光线照射使场景中的对象投射出阴影,主光源投射出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。material 环境中的所有阴影都是由这两种光投射产生的,阴影是光线照射不到的地方,因为各个元素在z轴上占据了不同大小的位置遮挡住了这些光线。

            

Material Design学习笔记

2.Material 属性

(1)物理特性

  1)材料具有变化的长宽尺寸(以 dp 为计)和均匀的厚度(1dp)。

  2)材料会形成阴影。阴影是由于材料元件之间的相对高度(Z 轴位置)而自然产生的。阴影描述材料元件之间的相对高度。阴影随着材料高度的变化而产生变化。

  3)内容可被以任何形状和颜色显示在材料上。内容并不会增加材料的厚度。

  4)材料能展示任何形状和颜色。内容的展示能够独立于材料,但要被限制在材料的范围里。内容的行为能独立于材料的行为。材料是实物。输入事件不能穿过材料。

  5)输入事件只影响材料的前景。输入事件不能从材料下面穿过。多个材料元件不能同时占用相同的空间点。利用不同的高度区分材料元件是防止多个材料元件同时占用相同空间点的一个方法。材料不能穿过其他材料

(2)材料的变化

  1)材料能改变形状。

  2)材料仅沿着它的水平面增长和收缩。

  3)材料仅沿着它的水平面增长和收缩。

  4)几片材料能合在一起组成一片材料。当材料被割开时,它还能自己复原。

(3)材料的移动

  1)材料能在环境中的任何地方自动产生或消失。

  2)材料可以沿各个轴移动。Z轴产生运动一般都是用户与材料交互而产生的。

  3)Z 轴的运动是由于用户的交互而产生的提示。

3.高度和阴影

  Material design 中的对象与现实生活中的对象具有相似的性质。在现实生活中,不同对象可以被堆积或粘贴起来,但是不能彼此交叉。对象自身塑造了自己的阴影并返回自己的光影。依据这些性质所构造出来的空间模型对于用户来说是非常熟悉的,这一模型也可以被长期应用于移动应用当中。支撑这一空间模型的正是“高度”(Elevation)和“光影”(Shadows)这两个概念。

(1)高度(安卓)

  高度是在 Z 轴上两个不同平面之间的一种相对深度或距离。

  详述:

    *“高度”的度量单位与 XY 轴的度量单位相同,主要是 DP。由于所有 Material 元素都具有 1 单位 DP 的厚度,所以“高度”度量的是从一个平面顶部到另一个平面顶部的距离

    *一个子对象的高度与其父对象的高度相关。

(2)静止高度

  所有 Material 对象除去大小之外,还有一个“静止高度”,或者称“默认高度”,它是不会变化的。当一个对象的高度产生变化时,它将会尽快恢复到自身的静止高度。

  1)组件高度

某一元素类型的静止高度在移动应用中是一个常量。(比如,FAB 高度不会在某一个应用中是 6 dp 而在另一个应用中是 16 dp)

元素在某一平台中可能会存在多种静止高度,这取决于环境的深度。(比如,TV 相比于移动端和桌面来说就具有更深的层次) 

  2)感应高度与动态高度偏移

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgjyfs.html