Material Design学习笔记——信息量太大了....

这次学习的是极客学院翻译的中文版Material Design手册，

翻译流畅，加上图片演示确实很赞，

下面看过一遍之后对印象深刻的地方记的脑图——》点我看脑图

立体空间

在Material design中引入了Z轴高度差的概念，利用阴影来区分高度。

高度差用以划分信息的层级从属关系。

同一高度上只能有一个级别的信息，这有点类似地理中对于大气层什么平流层飞机航线的分布

其中每个阴影都是有散射光线与直射光线共同作用叠加产生的。

字体

这里面太繁杂了，官方给出了一个大概，我这里仔细的做个整理

英文字体用Roboto  中文用Noto

这里还有一个尺寸单位的问题，

这里使用的单位为DP

原话为：
“

   1dp 和 160 dpi 屏幕的一个物理像素相等计算 dp 的方法：

   *dp =(宽度像素 160)/ dpi**

                                                      ”

至于SP，文中言曰可扩展像素，不太理解

原话为：

“   
   在为安卓系统开发程序时，可扩展的像素（SP）提供和DP一样的功能，但只是在字体上。一个 SP 的默认值
   和 DP 上的默认值一样。

   
   SP 和 DP 之间的主要区别在于 SP 保留着用户的字体设置。具有较大文本设置的用户可以看到字体大小与
   文本大小的偏好匹配。

                                                                                               ”

下面是我做的一个汇总的字体层级对照表

动画

水波涟漪效果——可以给用户以“我们点了哪里”的反馈

点击会使卡片提升空间层级，这符合逻辑上当前处理为最高级

多个动画响应时，要有先后次序，因为人脑需要单线程排队处理，

其实这和z轴类似，时间轴便是那是第四空间不是么

其次，多个动画响应时，应该流畅符合逻辑，没有阻塞感

色彩

谷歌给出了一系列的色相色板，每个色相有一个基础色

饱和度500（我是不太懂什么叫饱和度500，还有那个A100~A700是什么呢，

而且他给出的色值在PS中颜色并不相符）

谷歌对色相控制在两个以内，然后再从同一色相里选出三个色度来使用

关于黑白色阶也有规定

图标

图标分为产品图标和系统图标两种

产品图标便是APP的外观图标

尺寸为48x48dp

系统图标便是app进来之后，各菜单代替文字的icon图标

24x24dp,呈几何线性，原则是能简化就尽可能的简化，尽可能减少对细节的描画

图标网格系统

图像图片

谷歌要求所有图片要尽可能能表达出与内容相契合的意义

类似要有语义化

其次在图像上添加文字需要添加一层暗纱的渐变，提高文字可识别度

暗纱(dark scrims)理想的透明度应当在 20％-40％ 之间,亮纱(light scrims)理想的透明度应当在 40％-60％ 之间，都要视具体内容来定。

不要过度保护文字而影响图像的识别

控件

空间这边工具栏、菜单栏我还是不大分得清，应该总结出个图示说明图来

按钮

Material Design中按钮一共有三种

悬浮响应按钮——小圆点（FAB-Floating Action Button）

浮动按钮——就是正常的凸起按钮(Raised Button)

扁平按钮——就是类似超链接的（Flat Button）

优先级为：悬浮响应（FAB）>浮动按钮（Raised Button）>扁平按钮（Flat button）

最后是按钮、表单的响应状态总结

最后那些详细到可怕的各种间距标注我实在有点消化不了，

真不知道是不是将来如果专做UI是不是一定要出这样的视觉规范来，好可怕！