Material Design 是由 Google 推出的一种设计语言，其目的是为了提供更加稳定、一致和美观的界面体验。其中，类型学和排版规则是 Material Design 中非常重要的一部分，可以帮助设计人员更加轻松地构建出符合 Material Design 标准的界面。
类型学
Material Design 中的类型学主要包括字体、字号、行高和颜色等方面。具体来说，这些特性的应用必须符合以下几个规则：
字体
Material Design 中选择的标准字体是 Roboto 字体，其具有优秀的可读性和易用性。对于中文用户来说，宋体和黑体都是比较好的选择。
在使用 Roboto 字体时，需要注意不同字重的用途。通常情况下，重在突出的文字使用 Bold 字重；正文使用 Regular 字重；辅助文字使用 Light 字重。
字号
Material Design 中规定了几种常用的字号，具体如下：
| 字号 | 显示尺寸 | 字重 |
|---|---|---|
| 12 | 微小 | Regular |
| 14 | 较小 | Regular |
| 16 | 正常 | Regular |
| 20 | 大 | Regular 或 Medium |
| 34 | 巨大 | Regular |
行高
在 Material Design 中，行高是根据目标介面的尺寸和设计要求而定的。通常情况下，行高和字号之间的关系为：
- 标题的行高为字号的 1.5 倍；
- 正文的行高为字号的 1.6 倍；
- 副标题的行高为字号的 1.8 倍。
颜色
在 Material Design 中，使用的颜色必须符合一定的标准。例如主色调为深色调，辅助色调为浅色调等等。具体来说，颜色应该是饱和度控制在 500；亮度控制在 500 到 900 之间的。在使用颜色时，要尽可能的使用其中的几种常用颜色，如红色、蓝色、黄色、绿色等等。
排版规则
排版规则是 Material Design 的另一个关键要素，它规定了设计师在网站、APP 或其他图形用户界面元素上如何使用字体、颜色和布局等方面的细节。在 Material Design 中，排版应该符合以下两个原则：
处理排版
Material Design 中要求排版应该易于处理，并且应该具有一致的规则。比如，网站上的文字排列应该包括：
- 段落；
- 首字母；
- 列表；
- 表格；
- 引用等等。
在处理排版时，要注意字体大小和样式的一致性。同时，还要注意段落之间的间距、行距、对齐等等。
处理布局
Material Design 还要求设计师在网站上使用布局时要符合一定的规则。布局主要包括：网站界面的尺寸、比例和方向。在设计布局时，要注意以下几点：
- 生成的布局应该易于处理；
- 布局应该符合视觉层次和结构；
- 布局应该易于使用和调整。
示例代码
以下是符合 Material Design 要求的一些示例代码：
<!--标题--> <h1 style="font-size: 24px; line-height: 36px; font-weight: bold;">这是标题</h1> <!--正文--> <p style="font-size: 16px; line-height: 25.6px; font-weight: regular;">这是正文</p> <!--副标题--> <h2 style="font-size: 14px; line-height: 25.2px; font-weight: regular;">这是副标题</h2>
/* 网页布局 */ .container { width: 100%; display: flex; justify-content: center; align-items: center; }
-- -------------------- ---- ------- -- -- ----- ------------ - ---------- ----- -------------- - ---------- ----- ------------ - ---------- -- -- ----- ----------- - --------- ----- ---------------- - ---------- ----- ------------------ - ----------展开代码
结论
类型学和排版规则是 Material Design 中非常重要的部分。设计人员使用这些规则可以帮助他们更加轻松地构建出符合 Material Design 标准的界面。设计人员在使用这些规则时一定要注意字体、字号、行高、颜色、布局等方面的准则，从而可以确保最终的设计符合 Material Design 的要求，获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f76b2e9a7045d0d733eb1
