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