Material Design 是由 Google 推出的一套视觉设计语言，旨在提供一种直观、逼真、有层次感的设计风格，为用户体验带来一致性和连贯性。在 Material Design 的设计规范中，排版技术扮演着重要的角色，决定了用户与界面之间的互动。在这篇文章中，我们将深入探讨 Material Design 设计规范中的排版技术。
什么是 Material Design
Material Design 是一套全新的设计语言，旨在通过理解和肢体感的设计，为用户带来更连贯、更直观和更具有交互性的体验。Material Design 强调存在感、阴影、深度和颜色，为用户提供与物理世界相似的视觉效果。
Material Design 的设计原则包括：
- 材料：强调自然和客观性的外观、手感和交互性的这些创造性的组成部分。
- 动态：无论是在工具栏、拖动窗口、切换标签还是进入新页面，动画演示扮演着帮助用户理解布局和信息层次的角色。
- 深度：通过不同的形式 (阴影、层级、位置等) 强调某一物体在彼此之间与屏幕之间的多个平面上的位置
- 颜色：帮助用户理解哪些部分可以被操作，颜色以及配色方案在扩展 Material Design 的区域具有着很高的作用。
什么是排版
在设计中，文本内容的呈现是不可避免的，而排版就是指调整字体、字号、行距、字距等参数来优化文本的可读性和美观度的过程。排版的目的是让阅读体验更流畅、更愉悦地浏览文字，在 Material Design 的设计规范中，排版技术为用户提供更好的文本阅读体验。
Material Design 的排版技术
字体
在 Material Design 中，字体扮演着非常重要的角色。字体不仅仅是文字本身的载体，更是气息、声音与味道的感知器官，它让读者进入文字的空间，并引导读者感知文字的形态、语义和情感。 Material Design 排版中的字体分为 Display、Heading、Subheading、Body、Caption、Button 和 Overline 这七种，每种字体的作用不同，具体如下：
- Display：适用于标题，仅适用于少数重要文本的场景。
- Heading：适用于正文内容的大标题，呈现方式为粗体加粗直线。
- Subheading：适用于正文内容的副标题，呈现方式为轻薄体加粗曲线。
- Body：适用于正文，通常字号为 16px。
- Caption：适用于描述资料、图表和表格的文字说明，字号通常为 12px。
- Button：适用于主要操作按钮，字体为中等粗细。
- Overline：适用于表格和卡片的区域标题，字体字号较小。
如下代码展示了如何使用以 Design、Robio 和 Google Sans 为主体的几种字体：
-- -------------------- ---- -------
------- ------------------------------------------------------------------------------------------------------
---- -
------------ --------- -----------
---------- -----
-
--- --- --- --- --- -- -
------------ ------- ------ -----------
-
----- -
------------ --------- -------
-行高与行距
在 Material Design 的设计规范中，行高与行距的关系密不可分。合适的行高与行距可以使文本更易于阅读、舒适、美观。在 Material Design 排版中，行距不宜过小或过大。过小会降低阅读体验，而过大会导致阅读不连贯。一般来说，合理的文本行高应该是字体大小的 1.5-2.5 倍，行距与字体大小的对应比例为 0.5-0.7 倍。
如下代码展示了如何通过行高和行距进行配置：
-- -------------------- ---- -------
---- -
---------- -----
------------ ----
-
--- --- --- --- --- -- -
------------ ----
-
-- -- -
------------ ----
-
-------- -
---------- -----
------------ ----
-字距
字距指的是字符之间的距离，常常使用的字距是等宽字距和伸展字距。等宽字距指的是每个字母占据的宽度相同的字距，用于增强主题或人造风格的效果。伸展字距指的是每个字母占据的宽度不相同的字距，通常用于排印长段内容或小字号文本清晰度，增加了字符的对比度和可读性。
Material Design 的字距设置本着“尽量自然”的原则，以保证可读性和美观度。如下代码展示了如何通过字距进行配置：
-- -------------------- ---- -------
--- --- --- --- --- -- -
--------------- ----
-
------- -
--------------- ------
-
- -
--------------- -------
-对齐方式
在 Material Design 中，文本排版的对齐方式常常包括左对齐、居中、右对齐和两端对齐。不同的对齐方式适用于不同场景。例如，左对齐适用于段落、图表说明，居中适用于标题，右对齐适用于数字、表格中的小标题等，两端对齐则适用于对齐空间均衡的文本范围。
-- -------------------- ---- -------
-- -
----------- -------
-
- -
----------- --------
-
------- -
----------- ------
-列表
在 Material Design 排版中，列表通常是由符号或编号来构成的。阴影、颜色和文本细节可以进一步区分对象和信息标识。 Material Design 中，列表相对于其他内容所占的盒子通常比较小，因此也被称为“微件”。
-- -------------------- ---- -------
----
------- ------
------- ------
------- ------
-----
----
------ ------
------ ------
------ ------
-----表格
在 Material Design 排版中，表格通常被用于呈现集合数据、重点信息或用户行为。 Material Design 的表格可以在多个流程和设备之间保持一致且可靠的布局。
-- -------------------- ---- -------
-------
-------
----
---------
-----------
-----------
-----------
-----
--------
-------
----
---------- ---------------------
------ ------
------ ------
------ ------
-----
----
---------- ---------------------
------ ------
------ ------
------ ------
-----
----
---------- ---------------------
------ ------
------ ------
------ ------
-----
--------
--------结论
在 Material Design 的设计规范中，排版技术是一项非常重要的工作。通过合理的字体、行高、行距和对齐方式等设置，可以提高文本的可读性和美观度，同时也可以增加用户与界面之间的互动。在实际的开发工作中，开发者需要按照 Material Design 的设计规范来实现排版工作，以提升用户的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f0047eedcc8a97c8be89b