Material Design 的类型学与排版规则

阅读时长 4 分钟读完

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 要求的一些示例代码:

-- -------------------- ---- -------
-- --
----- ------------ - ----------
----- -------------- - ----------
----- ------------ - ----------

-- --
----- ----------- - ---------
----- ---------------- - ----------
----- ------------------ - ----------
展开代码

结论

类型学和排版规则是 Material Design 中非常重要的部分。设计人员使用这些规则可以帮助他们更加轻松地构建出符合 Material Design 标准的界面。设计人员在使用这些规则时一定要注意字体、字号、行高、颜色、布局等方面的准则,从而可以确保最终的设计符合 Material Design 的要求,获得更好的用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676f76b2e9a7045d0d733eb1

纠错
反馈

纠错反馈