Material Design 是 Google 提出的一套新的 UX/UI 设计规范。随着移动设备和响应式 Web 的普及，它成为了越来越多的前端设计师和开发者们使用的首选设计规范。字体大小和间距是设计中非常重要的一个方面，而在 Material Design 中，其设置方式非常合理和灵活。
字体大小的设置
Material Design 中，字体大小一般分为主标题、副标题、标题、正文和辅助字体等五个等级。
主标题
主标题是页面或者区块的重要标志。一般设定为最大字号，通常为 48dp 或者以 34pt 为基准。
-- - ---------- ----- -
副标题
副标题是与主标题相对应的辅助标志。字号一般小于主标题，但要保证与主标题的视觉效果协调。通常设定为 20sp。
-- - ---------- ----- -
标题
标题一般用于标识页面、区块或者部分内容。字号一般小于副标题，但要比正文大。通常设定为 16sp 或者以 18pt 为基准。
-- - ---------- ----- -
正文
正文是页面或者区块主要内容的表现形式。字号一般比标题小，但要保证视觉效果的舒适度。通常设定为 14sp 或者以 16pt 为基准。
- - ---------- ----- -
辅助字体
辅助字体一般用于辅助说明，如标签、日期等。字号一般比正文小，但要保证视觉效果的清晰可辨。通常设定为 12sp 或者以 14pt 为基准。
---- - ---------- ----- -
间距的设置
Material Design 中，间距的设置也非常合理和清晰。主要分为以下几个方面。
文本之间的间距
不同字体之间应采用适合的行高，确保视觉效果合理并提高可读性。
- - ------------ ---- -
元素之间的间距
在 Material Design 中，元素之间的间距一般用于区分不同元素之间的关系。通常是垂直和水平两个方面。
垂直间距
在 Material Design 中，垂直间距必须符合一定的视觉比例，例如：8dp、16dp、24dp、32dp 等。
-------- - ----------- ----- -
水平间距
在 Material Design 中，视觉效果的平衡性非常重要。水平间距应该根据设计要求为元素之间提供足够的空间，并确保各个元素之间的空间均匀分配。
-------- - ------------- ----- -
元素与边缘之间的间距
元素与边缘之间的间距是应用 Material Design 设计规范的一个重要方面，应根据设计需要合理设置。
---------- - -------- ----- -
总结
在 Material Design 中，字体大小和间距的设置是非常透明、合理和灵活的。前端设计师和开发者应该根据设计规范的要求，合理设置字体大小和间距，并最大程度地保证视觉效果的舒适度和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b5bffeadd4f0e0ffe7ec62