Study - Material Design 浅析
Material Design???
- 考虑事物本质的设计，将电子屏幕里的UI元素看成是一种不存在于现实世界的新的材质，并赋予它物理特性
- 不是去拟物化的设计
纸的形态模拟
| 纸 | 电子屏幕 |
|---|---|
| 3D的空间关系 | 完全平面化 |
虽然电子屏幕没有空间感，但信息内容是有空间层级的关系
Material Design的解决方式：
- 把现实世界中纸张的特性挪到电子屏幕里，把信息内容呈现在这个虚拟的纸上
- 纸（信息内容）跟纸之间有上下层级关系，用投影模拟纸张的空间感
Material Design的投影
- 并不是过去我们常用的使用图片或者样式代码实现的投影
- 而是系统根据
纸张层级所在位置实时渲染的，投影会随着纸张的空间关系而改变大小
空间
-
z轴垂直于屏幕，用来表现元素的层叠关系 - 所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度
- 同一种元素，同样的操作，抬升的高度是一致的
Google几年前推行的Card设计就是模拟纸张物理形态的一种设计方式，但Material Design把它提升到了
系统信息架构层面的高度。
材质
-
魔法纸片（
最重要的信息载体）
纸片层叠、合并、分离，拥有现实中的厚度、惯性和反馈，同时拥有液体的一些特性，能够*伸展变形 -
Can
- 纸片可以伸缩、改变形状
- 纸片变形时可以裁剪内容，比如纸片缩小时，内容大小不变，而是隐藏超出部分
- 多张纸片可以拼接成一张
- 一张纸片可以分裂成多张
- 纸片可以在任何位置凭空出现
-
Can’t
- 一项操作不能同时触发两张纸片的反馈
- 层叠的纸片，海报高度不能相同
- 纸片不能互相穿透
- 纸片不能弯折
- 纸片不能产生透视，必须平行于屏幕
易用性
- 无障碍设计
material design很重视用户的广度，应该尽量照顾到残障人士的体验。设计时考虑以下使用场景：- 没有声音
- 没有色彩
- 手机开启了高对比度模式
- 手机画面放大
- 没有视觉信息，使用屏幕阅读器
- 只能通过语音控制
- 以上多项结合
- 需注意：
- 无鼠标、纯键盘操作。鼠标悬停显示信息，也要通过其他方式展现
- 考虑大字号情况下的使用体验
- 不要只通过颜色表达某些信息
- 音频信息也要提供文字或其他视觉呈现
- 为图片和视频提供备用的文字信息