Material Design

时间 2020-11-30

标签前端 ios git github 工具字体 this 编码 spa 设计栏目 iOS 繁體版

原文原文链接

参考代码

拟真 vs. 扁平前端

在iso7以前，Apple采用的是拟真化设计语言，指望经过模拟现实世界的物体，给用户身临其境的感受。自metro和ios7开始的扁平化设计语言则相反，它着意去掉冗余的装饰效果（好比透视、纹理、渐变等等能作出3D效果的元素），让“信息”自己从新做为核心被凸显出来。ios

Material Designgit

若是说拟真表明设计语言的一个极端，而扁平表明设计语言的另外一个极端，那么Material Design则居于二者之间更偏右的位置。github

在Material Design中，屏幕里看上去平整的一个 App 界面，事实上不一样控件之间都拥有着层级关系。不一样控件之间的层级关系会使用阴影做为表示，而阴影的深浅，表明的正是这个控件在 Z 轴的高度：工具

Material Design 里的材料Material其实是一种虚构出来的材料，：厚度无限薄（1dp），面积无限大，能变换造型，也能按照规律移动 —— 你能够把它当作一张纸（事实上，Material Design 曾一度传说要更名为Quantum Paper - 量子纸）。字体

虽然每一块 Material 都是扁的，但他们所处的环境，实际上是一个 3D 空间，这意味着全部处于 Material Design 设置的这个三维环境里的控件，都拥有 XYZ 三个维度，Z轴垂直于屏幕，使用阴影表现材料的高度，阴影越重，Z值越高，距离用户越近。this

所以，Material Design 并非单纯的扁平化，它在保留了扁的控件的同时，采用了立体的虚拟空间，简言之，Material Design的核心是：扁而不平。编码

Material Design Litespa

MDL中定义了一组样式类mdl-shadow--Ndp，用于声明材料的阴影，N的有效取值为：2/3/4/6/8/16。设计

为元素应用阴影样式类很简单：

<!--为元素声明2dp的阴影-->
<any class="mdl-shadow--2dp">...</any>

Material Design中的色彩灵感来自于现代建筑、道路标识、路面标记及运动场等大胆运用色调、高光和阴影，充满动感的场景。

Material Design使用19个调色板（red、pink、purple等）用来约束设计中色彩的使用。在每一个调色板中，色调为500的颜色为基准色，其余颜色是基准色在不一样色调（50-900, A100-700）下的表现。

Material Design Lite

在MDL中，咱们能够使用样式类mdl-color--{palette}-{hue}来设置背景色，使用样式类 mdl-color-text--{palette}-{hue}来设置前景色：

<div class="mdl-color--red mdl-color-text--grey-50">
    this is a gray text on red background.
</div>

Material Design给出了一些色彩运用在一般条件下的约束：

1. 最多用两个调色板

在一个界面中最多使用两个调色板，从主调色板选择最多三个色调，从辅调色板选择一个强调色。下面的示例选择indigo调色板中的三个色调（100、500和700），从pink调色板中选择色调A200做为强调色：

2. 为文本、图标和分割线应用透明度

经过为文本设置透明度来表达文本的相对重要性：

对于深色背景的浅色文字，最重要的文本使用87%的透明度，次重要的文本使用54%的透明度。提示性文本，例如输入框、标签、被禁止的文字等使用26%的透明度。

对于浅色背景的深色文字，最重要的文本使用100%的透明度，次重要的文本使用70%的透明度，其余文本使用30%的透明度。

3. 工具栏和状态栏

工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择调色板中比基准色略深的色调为700的颜色。

4. 使用强调色

在大色块上绝对不要使用强调色，对动做按钮、开关或滑动条之类的组件应当使用强调色。

Google提供了适用于Material Design的图标字体，咱们能够直接在前端样式表中使用@font-face引用这些字体。

face用来指定要显示的图标，也能够使用其对应的数字编码：

<i class="material-icons">&#xE87C;</i>

Material Design提供了11种规格的文字样式供不一样场景下排版使用:

在MDL中，使用样式类mdl-typography--{name}声明文本的排版样式：

<h1 class="mdl-typography--title">Hello,Material Design</h1>
<p class="mdl-typography--body-2">this is a demo</p>