Material Design 是 Google 推出的一种设计语言，旨在提供一种一致的设计体验，使用户可以轻松地在不同的设备和平台上使用应用程序。在 Material Design 中，界面元素的设计和排版都是非常重要的，因此，使用 Illustrator 这样的设计工具来设计 Material Design 风格的 App 是非常必要的。
本文将介绍如何使用 Adobe Illustrator 设计 Material Design 风格的 App，包括如何设置文档、如何使用基本形状、如何添加颜色和图标等。我们还将讲解一些 Material Design 的设计原则，并提供一些示例代码，帮助您更好地理解和应用这些原则。
准备工作
在开始设计之前，我们需要准备一些工作。
下载 Material Design 资源包
Google 提供了一个 Material Design 资源包，其中包含了一些颜色、图标、字体等资源，可以帮助我们更好地设计 Material Design 风格的 App。您可以从这里下载这个资源包。
设置文档
在 Illustrator 中创建一个新的文档时，我们需要设置一些参数，以确保我们的设计符合 Material Design 的要求。具体来说，我们需要设置：
- 画板大小为 360 x 640 像素，这是 Android 手机的标准分辨率之一。
- RGB 颜色模式，这是显示器上常用的颜色模式。
- 像素为单位，这是我们在设计 App 时使用的单位。
在设置完成后，我们可以开始设计我们的 App。
基本形状
在 Material Design 中，使用基本形状来构建界面元素是非常重要的。这些基本形状包括圆形、矩形、三角形等。在 Illustrator 中，我们可以使用矩形工具、圆形工具、多边形工具等来创建这些形状。
矩形
矩形是我们在设计 App 时使用最频繁的基本形状之一。在 Illustrator 中，我们可以使用矩形工具来创建矩形。
要创建一个矩形，我们可以按住鼠标左键并拖动矩形工具，然后松开鼠标左键。这将创建一个默认大小的矩形。
如果我们需要创建一个特定大小的矩形，我们可以单击矩形工具并输入所需的宽度和高度。
圆形
圆形是另一个常用的基本形状。在 Illustrator 中，我们可以使用圆形工具来创建圆形。
要创建一个圆形，我们可以按住鼠标左键并拖动圆形工具，然后松开鼠标左键。这将创建一个默认大小的圆形。
如果我们需要创建一个特定大小的圆形，我们可以单击圆形工具并输入所需的半径。
多边形
多边形是另一个常用的基本形状。在 Illustrator 中，我们可以使用多边形工具来创建多边形。
要创建一个多边形，我们可以单击多边形工具，然后在画布上单击并拖动鼠标。这将创建一个默认大小的六边形。
如果我们需要创建一个特定大小的多边形，我们可以单击多边形工具并输入所需的边数和半径。
颜色
颜色在 Material Design 中也是非常重要的。在 Material Design 中，使用颜色来区分不同的元素和状态是非常常见的。在 Illustrator 中，我们可以使用颜色面板来选择和管理颜色。
颜色面板
颜色面板是 Illustrator 中用于管理颜色的工具。在颜色面板中，我们可以选择预定义的颜色、创建新的颜色、调整颜色等。
要打开颜色面板，我们可以单击窗口菜单中的“颜色”。
预定义颜色
在颜色面板中，有一些预定义的颜色可供我们使用。这些颜色是符合 Material Design 的，可以帮助我们更好地设计 Material Design 风格的 App。
要选择预定义的颜色，我们可以单击颜色面板中的“颜色组合”下拉菜单，并选择“Material”。
自定义颜色
如果我们需要使用自定义颜色，我们可以在颜色面板中创建新的颜色。要创建新的颜色，我们可以单击颜色面板中的“新颜色”按钮，并输入所需的颜色值。
调整颜色
如果我们需要调整颜色，例如使其更亮或更暗，我们可以使用颜色面板中的滑块来调整颜色的亮度和饱和度。
图标
在 Material Design 中，使用图标来表示不同的元素和操作也是非常常见的。在 Illustrator 中，我们可以使用矢量图标来创建这些图标。
矢量图标
矢量图标是一种可缩放的图标，可以在不失真的情况下放大或缩小。在 Illustrator 中，我们可以使用形状工具和路径工具来创建矢量图标。
要创建一个矢量图标，我们可以使用形状工具和路径工具来绘制所需的形状和线条。然后，我们可以使用颜色面板来添加颜色。
IconJar
IconJar 是一款非常好用的图标管理工具，可以帮助我们更好地管理和使用图标。在 IconJar 中，我们可以搜索和选择不同的图标，然后将它们导入到 Illustrator 中使用。
要使用 IconJar，我们需要先下载并安装它。然后，我们可以在 IconJar 中搜索和选择所需的图标，并将它们导出为 SVG 文件。最后，我们可以将这些 SVG 文件导入到 Illustrator 中，并使用它们来创建我们的图标。
设计原则
在设计 Material Design 风格的 App 时，有一些设计原则需要遵循。这些原则包括：
- 材料：使用材料来表示界面元素和操作。
- 深度：使用阴影和高光来增加深度和层次感。
- 色彩：使用颜色来区分不同的元素和状态。
- 排版：使用明确的排版规则来提高可读性和可用性。
- 图标：使用图标来表示不同的元素和操作。
示例代码
以下是一个使用 Material Design 风格设计的登录界面的示例代码：
--------- -----
------
------
--------------------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------- ----------------------------------------------------------------------
-------
---- -
----------------- --------
------------ --------- -----------
---------- -----
------------ ----
------ --------
------- --
-------- --
-
---------- -
-------- -----
--------------- -------
------------ -------
---------------- -------
------- ------
-
----- -
----------------- -----
-------------- ----
----------- - --- --- ------- -- -- -----
-------- -----
------ ------
----------- -----------
-
----- -
-------- -----
------------ -------
-------------- -----
-
----- --- -
------------- -----
-
------ -
-------------- -----
-
------ ----- -
-------- ------
-------------- ----
-
------ ----- -
----------------- --------
------- -----
-------------- --- ----- --------
-------- ----
------ -----
----------- -----------
---------- -----
------ --------
-
------ ----------- -
-------- -----
-------------------- --------
-
------- -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
---------- -----
------- --------
----------- ---------------- ---- -----
-
------------- -
----------------- --------
-
--------
-------
------
---- ------------------
---- -------------
---- -------------
---- -------------- ---------- ---------- ------------
--------------
------
------
---- --------------
------ -------------------------------
------ ----------- ------------- ----------------
------
---- --------------
------ -------------------------------
------ --------------- ------------- ----------------
------
------- ------------- ------------------ -----------
-------
------
------
-------
-------总结
在本文中，我们介绍了如何使用 Adobe Illustrator 设计 Material Design 风格的 App，包括如何设置文档、如何使用基本形状、如何添加颜色和图标等。我们还讲解了一些 Material Design 的设计原则，并提供了一个使用 Material Design 风格设计的登录界面的示例代码。希望这些内容能够帮助您更好地设计 Material Design 风格的 App。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/661805c7d10417a22280a933