你将要创建的内容

多亏了由 Google 开发的视觉语言 Material Design，为android平台设计用户界面比以往任何时候都容易。一旦你花几分钟浏览它的规范，它不时更新，你就可以开始设计与最近 Android 版本的原生外观和感觉相匹配的 Android 应用程序，包括 Marshmallow 和 Nougat。此外，为了帮助您节省时间和精力，Google 还发布了Material Design 的贴纸。

在本教程中，我将向您展示如何使用 adobe photoshop 的贴纸快速设计 Android 应用程序的用户界面。

为什么要使用贴纸？

符合 Material Design 规范的用户界面大部分由简单的形状、纯色和一些阴影组成。因此，与拟物化用户界面不同，它们变化不大。事实上，除了颜色、大小和高度，UI 小部件在几乎所有 Material Design 应用程序中看起来都是一样的。Material Design 贴纸包含这些小部件的图像，通过使用它，您可以有效地遵循拖放方法进行用户界面设计。

拖放式 UI 设计

虽然我们将在本教程中使用 Adobe Photoshop，但值得注意的是，贴纸也可用于草图、Adobe illustrator和 After Effects。

先决条件

为了能够跟进，您需要：

• Adobe Photoshop CC
  

• Adobe Photoshop的最新Material Design 贴纸表
  

1.打开贴纸

启动 Adobe Photoshop 并转到文件 > 打开...打开您下载的贴纸。除非您已经在计算机上安装了Roboto字体，否则您会看到一个对话框，提示您从 Adobe Typekit 同步它，或者从其他来源（例如Google fonts）下载它。

如果您使用 Typekit，请按Resolve Fonts按钮继续。当然，您必须登录 Creative Cloud 帐户才能完成同步。

打开贴纸后，您会看到它是一个非常大的文档——它的尺寸为5688×6790 像素——有几个图层和图层组。我建议你花几分钟看看它提供的一切。

2.创建全局元素

状态栏、导航栏和应用栏通常一起被称为应用的“全局元素”。通过首先创建它们，我们定义了将放置其余UI 小部件的区域。

在贴纸表中，所有全局元素都存在于名为Global elements的图层组内。它还包含用于移动、平板电脑和桌面用户界面的全局元素。然而，现在，我们只关注MOBILE图层组，选择它并按住 Alt 键单击它的眼睛图标。

如您所见，图层组包含我们需要的所有元素，以及一些帮助我们精确定位其他 UI 小部件的指南。转到Layer > Duplicate Group...在名为MyMaterialApp的新文档中创建它的副本。

在本教程中，我们将创建一个用作卡路里计数器的 Android 应用程序的用户界面。因此，在新创建的文档中，展开应用栏图层组并使用水平文字工具 (T)将应用的标题更改为“卡路里”。

此外，我们的设计将在应用栏区域中有一个图表。为了腾出空间，选择关键阴影和环境阴影层，按Ctrl+T，使它们都高 250 像素。不要忘记按Enter提交转换。

3.添加列表

切换回贴纸标签并查找LISTS图层组。它里面有八种不同类型的列表可用。然而，我们将只使用第七种类型。因此，选择名为List7的图层组并转到图层 > 复制组...以在MyMaterialApp文档中创建其副本。

返回MyMaterialApp选项卡，确保将List7图层放置在App bar图层的正下方。一旦你这样做了，你会看到指南和列表的内容完美地对齐。

为图层组赋予有意义的名称总是一个好主意。因此，将列表的图层组重命名为“食物列表”。

4.修改列表

现在让我们更改列表，使其显示食物及其份量。这样做很容易。选择适当的文字图层并使用水平文字工具 (T)更改其内容。我建议您还将食物的字体粗细更改为“粗体”。

如果卡路里计数器应用程序不显示卡路里，它就不会很有用。然而，我们的列表目前没有更多文字的空间。因此，从名为list_01、list_02和list_03的图层组中删除名为“square”的图层。

您现在可以使用水平文字工具 (T)添加显示卡路里的新文字图层。将图层的字体大小更改为24px，将其字体名称更改为Roboto Regular，并将其颜色更改为#333333.

5.添加材料设计图标

我们可以通过向其添加 Material Design 图标来使我们的用户界面更具吸引力。现在，让我们为界面的三个列表项下载三个不同的图标。

进入Material Icons页面，首先选择名为local Pizza的图标。在弹出的底部表格中，将其大小更改为36dp，然后单击PNGS按钮下载包含该图标的 ZIP 文件。

解压 ZIP 文件并转到文件夹android/drawable-mdpi以找到实际的图像文件。将其拖放到Adobe Photoshop 窗口的MyMaterialApp选项卡中。

对标有local cafe和local Dining的图标重复相同的步骤。

我们现在可以用图标替换列表项中的圆圈。让我们从当地的披萨图标开始。选择它的图层和名为circle的图层，该图层位于list_01图层组内。转到图层>对齐>垂直中心以垂直对齐它们的中心。同样，转到图层>对齐>水平中心以水平对齐它们的中心。

此时，您可以删除list_01中的“circle”图层。

对其他两个图标重复相同的步骤。

6.添加颜色

现在让我们添加一些颜色，因为 Material Design 用户界面往往是明亮多彩的。

选择名为“ic_local_pizza_black_36dp”的图层，右键单击它，然后选择混合选项...。在弹出的对话框中，转到Color Overlay部分并选择颜色，在 Material Design调色板#ffc107中称为Amber 500。

对名为“ic_local_cafe_black_36dp”和“ic_local_dining_black_36dp”的图层重复相同的步骤。确保每次选择不同的颜色。

现在让我们为全局元素着色。要更改背景颜色，请选择名为“background”的图层，按A选择其中的矩形，然后将填充颜色更改为白色。

要更改状态栏的颜色，打开“状态栏”图层组，选择名为“栏”的图层，按A，将填充颜色更改为红色 900，其十六进制值为#b71c1c。

同样，要更改应用栏的颜色，打开“应用栏”图层组，选择名为“key shadow”的图层，按A，并将填充颜色设置为Red 500或#f44336。

7.添加浮动操作按钮

浮动操作按钮是 Material Design 用户界面中最突出的小部件之一。您可以通过复制贴纸的“浮动操作按钮”图层组来获得它。如果您找不到它，请在“指标和关键线”图层组中查找它。

在您的文档中，将“浮动操作按钮”图层组放在“食物列表”图层组上方。

接下来，使用移动工具 (V)并将浮动操作按钮放置在用户界面的右下角。

浮动操作按钮必须具有强调色。因此，在其图层组组内选择“关键阴影”图层，按A选择其中的圆圈，并将填充颜色更改为Red Accent 700或#d50000。

同样，将包含加号的“ic_add”图层的颜色更改为白色。此外，打开它的Blending Options...并将其Opacity的值更改为100%。

8.修剪文档

您可能已经注意到我们的文档非常大，而设计只占其中的一小块区域。要更改文档的大小以使其与设计的大小相匹配，请转到图像 > 修剪。在弹出的对话框中，继续使用默认值并按OK。

9.添加图表

正如我之前提到的，我们用户界面中的应用栏区域将有一个图表。因为贴纸表没有任何图表贴纸，我们必须手动创建它。

首先打开网格。为此，请转到View > Show > Grid。

按Shift+Ctrl+N在应用栏图层组内创建一个新图层，并使用铅笔工具 (B)在应用标题下方绘制四条白色且1 px厚的水平线。

使用水平文字工具 (T)在最后一条水平线下方添加三个日期。日期的字体大小可以是13px。

您现在可以通过再次转到“查看”>“显示”>“网格”来关闭网格。

选择您在此步骤中创建的所有图层，然后按Ctrl+G为它们创建一个新图层组。将图层组命名为“图表”。

接下来，在“图表”图层组中，创建一个新图层并将其命名为“数据”。在图层内部，使用钢笔工具 (P)绘制闭合路径。路径的形状不是很重要，只要它看起来像一条平滑的曲线即可。

要使用前景色填充路径，请转到“路径”面板，右键单击“工作路径”并选择“填充路径...”。在弹出的对话框中，选择默认值并按OK。

为了让图表看起来不那么霸道，将“图表”图层组的不透明度降低到75%。

最后，使用水平类型工具 (T)在图表下方显示消耗的卡路里总数。设数字的字体大小为24px，标签的字体大小为14px。

我们的设计现已完成。继续隐藏“Guides”图层组，因为我们不再需要它了。

10.生成设备艺术

将您的设计包裹在真实设备的框架中并为其添加屏幕眩光往往会使它看起来更加精美和逼真。尽管您可以使用 Adobe Photoshop 来执行此操作，但使用 Google 的Device Art Generator会容易得多。

首先，通过转到File > Save As...将您的设计导出为 PNG 文件。

您现在可以将 PNG 文件拖到您在设备艺术生成器中看到的任何设备上。请注意，您必须将图像缩放到至少 1080×1920 像素才能使用最新设备的帧。

生成设备艺术后，您可以将其拖到计算机上的任何文件夹中进行保存。

结论

在本教程中，您学习了如何使用 Material Design 贴纸和 Adobe Photoshop 来设计 Android 应用程序的用户界面。随意添加更多小部件，更改其颜色，并尝试其布局。