前言
在设计 UI 时，图形元素是不可缺少的一部分。Material Design 带来了更加直观、连贯和有意义的设计语言，并提供了一系列的设计准则，以协助设计师更好的选用图形元素。
在本篇文章中，我们将讨论 Material Design 中图形的选用原则和调整技巧，并举例介绍如何将不同类型的图形和布局搭配使用。
图形的选择
Material Design 中推荐使用以下类型的图形：
基础形状（Basic Shapes）：如圆形、矩形等，是最基本的图形类型，用于呈现元素的基本框架和轮廓。
图标（Icons）：特定的符号或者图形，用于传达一个概念或者表达一个功能。
插图（Illustrations）：用于构图和情感表达，可以是图案、扁平化的角色或者场景。
图片（Images）：用于传递感性体验或者反应字面意思。
字体（Typography）：字体和文本是在 Material Design 中反映信息等级和对话结构的重要组成部分。
在选择图形时，要先考虑元素的用途和表达目的，然后选择合适的图形类型。例如，如果要表达一个主角或者一个产品的特点，可以使用插图或者图标；如果需要展示某个地方的实景，就要使用图片。
图形的调整
在使用图形元素时，如何调整使其符合 Material Design 的准则？
颜色调整：使用 Material Design 中推荐的颜色系统，并根据不同的设计需求变化色调和亮度。
大小调整：调整图形大小，以使其符合 Material Design 中的基础度量单位建议（dp 或 sp）。
边距调整：调整图形与当前 UI 元素和视图边框的距离。
动画调整：使用合适的动画来突出显示图形元素，并根据动画的情感表达强化信息的消费和交互。
图形的搭配
在使用图形的同时，如何将它们有机地组合和搭配呢？以下是一些技巧：
颜色协调：在选择不同图形元素时，应将它们的颜色设置为彼此协调的色调。
层次观察：决定图形放置在什么位置，并采取什么样的尺寸和边距。
对齐调整：确保不同元素对齐，以获得更好的视觉平衡。
对话交互：根据元素之间的关系和交互模式，使用恰当的图形元素和交互模式。
布局设计：结合材料设计中的基础布局和网格体系进行设计，以便使用不同的元素实现统一的整体设计效果。
代码示例
HTML 代码：
-- -------------------- ---- -------
---- -------------
---- --------------------------------------------------------------- -------------
---- ---------------------
----- ----------------------- ------------
------- -- - ----------- -- --- ---------
------
---- ---------------------
------- ---------- ------------------- ----------
------- ------------------ ----------
------
------CSS 代码：
-- -------------------- ---- -------
----- -
----------- --------
------ ------
----------- --- --- --- ------- -- -- -----
--- --- --- ------- -- -- -----
----------- -----------
-------------- ----
--------- -------
------------ --------- -----------
------ --------
------- -----
-------- -------------
-
----- --- -
------ -----
------- ------
----------- ------
-------------- --- --- - --
-
------------- -
-------- -----
-
----------- -
-------- ------
---------- -------
------- - - ---- --
------------ ----
-
------------- -
-------- ---- -----
----------- ------
----------------- --------
----------- --- ----- -----
-
---- -
-------- -------------
-------- ---- -----
------------- -----
---------- -----
--------------- ----------
------- -----
-------------- ----
------ -----
----------------- --------
------- --------
----------- ---------- ---- ------------
-
---------- -
----------- --- --- --- ------- -- -- -----
--- --- --- ------- -- -- -----
-
------------ -
----------------- --------
-结论
在 Material Design 中，图形元素是非常重要的一部分。设计师应该在使用它们时遵循材料设计原则，以确保达到一致的设计效果。本文介绍了选择、调整和组合不同类型的图形元素的技巧，并提供了一个示例代码，以说明如何将这些技巧与实际应用结合。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67181999ad1e889fe22717c2