如何在Adob​​e XD中创建音乐播放器及UI设计教程

在本 adobe XD 教程中，您将学习如何创建音乐播放器 UI 设计。

您将在此 Adobe XD UI 教程中学到什么

• 如何在 Adobe XD 中创建音乐应用程序模型

• 如何在 Adobe XD中创建图标

• 如何在 Adobe XD 中设置网格

• 如何在 Adobe XD 中保存组件

• 如何在 Adobe XD 中创建重复网格

有关如何调整或改进最终Adobe XD 应用程序 UI 套件的更多灵感，您可以在GraphicRiver找到大量资源。

你需要什么

您需要以下资源才能完成此 Adobe XD 音乐播放器 UI 套件：

• San Francisco Compact Display字体

• 音乐播放器图标

音乐播放器图标

1.如何将 UI 模式添加到 Music App Mockup

从纸上的基本草图开始您的音乐应用程序界面总是一个好主意。您可以轻松确定音乐播放器 UI 设计的主要组件以及粗略的位置和比例。 

纸质草图是数字线框图的完美开始。一旦您进入 Adobe XD 中的设计过程，记住音乐界面的整体外观会让事情变得容易得多。

线框图 线框图初学者指南 Winnie Lim

第2步

让我们打开 Adobe XD 并选择iphone XR/XS Max/11 (414 x 896)模板来创建一个414 x 896的画板。

第 3 步

现在，让我们创建数字音乐应用程序模型。查看纸质草图，您会注意到音乐播放器 UI 设计的三个主要部分（或模式）。让我们从这些开始。

选择矩形工具 (R)并创建一个414 x 70 像素的形状。使用智能指南轻松放置您的形状，如下图所示，然后转到属性检查器。使用该复选框禁用现有边框，然后单击填充颜色井并将颜色更改为#646E83。

在处理线框时，请确保不要浪费时间为对象设置样式或添加过多的文本内容。您唯一担心的应该是设计的结构。

第4步

确保矩形工具 (R)仍然处于活动状态并创建一个414 x 204 像素的形状。如下图所示放置。

第 5 步

使用相同的工具，创建一个374 x 50 像素的形状并将其放置如下图所示。

第 6 步

选择上一步中制作的矩形。按住Option和Shift键，只需将所选内容的副本拖动到原始形状下方，如第一张图像所示。确保在原始形状和副本之间留出10 px的间隙。 

重复这个技巧，直到你有一列九个矩形，如第三张图所示。

第 7 步

这些将是您的音乐播放器 UI 套件的主要组件。

在顶部，您有经典的导航栏，您将在其中为您的应用添加控制按钮。底部是播放器栏，您将在其中集成音乐播放器的所有基本控件。在两个栏之间，您有歌曲列表，您将在其中添加歌曲信息和每首歌曲的控制按钮

2.如何将控件添加到音乐应用模型

步骤1

基于该纸质草图，让我们将控件添加到此音乐应用程序模型中。让我们从导航栏开始。选择矩形工具 (R)并按住Shift键轻松创建一个40 像素的正方形。如下图所示放置它，禁用边框并将填充颜色设置为白色（#FFFFFF）。

确保该方块保持选中状态。按住Option和Shift键，然后将选择的副本向右拖动，如第二张图像所示。使用智能指南完美对齐这个新形状。

第2步

选择文本工具 (T)，在画板内部单击并添加标题 文本。如下图所示放置它，但暂时不要编辑字体及其属性。

第 3 步

从歌曲列表中向下移动到顶部矩形。选择矩形工具 (R)并按住Shift键轻松创建一个30 像素的正方形。如第一张图所示放置。添加此形状的副本并将其放置在第二张图像中。

第4步

选择矩形工具 (R)，创建一个38 x 24 像素的形状并将其放置在第一张图片中。

切换到文本工具 (T)并添加艺术家姓名 和歌曲名称 的文本，如第二张图像所示。

第 5 步

专注于播放器栏。选择矩形工具 (R)并创建一个374 x 20 像素的形状。用白色填充它并按照第一张图片所示放置。

使用相同的工具，创建一个80 像素的正方形并将其放置在第二张图像中。

第 6 步

选择矩形工具 (R)并创建一个50 px的正方形。用白色填充它并按照第一张图片所示放置。复制这个新形状并将副本拖到左侧，如第二张图所示。

使用相同的工具，创建两个20 x 16 像素的形状。用白色填充两个矩形并将它们放置在第三个图像中。

第 7 步

音乐应用模型已完成。其中一些形状将被风格化并用于最终的音乐播放器 UI 工具包中，一些仅用作您要添加的按钮和图标的指南，还有一些将被删除。

3.如何设计这个音乐播放器的导航栏UI设计

步骤1

我们将为整个 Adobe XD 音乐播放器 UI 工具包采用深色和干净的风格。主要组件将具有不同深浅的黑色，以在视觉上将每个部分分开，而不会太刺眼。我们不会为导航栏使用不同的颜色，但我们会确保突出显示其上的两个主要按钮。我们只会对所有图标和文本使用白色，以创建良好的对比度并使每个元素尽可能清晰。最后，我们将使用更亮的颜色来引起对 Adobe XD 应用程序 UI 工具包中最重要元素的注意。

首先，让我们更改画板的颜色。只需单击画板上方的名称并转到属性检查器。单击该Fill color well 并将颜色更改为#191A1F。

第2步

选择构成导航栏的矩形并将其删除。当我们对齐和建立组件和按钮之间的间距时，拥有它很重要，但现在它不再有用了。这将使更多的注意力集中在导航栏中的按钮和文本上。

从导航栏中选择左侧方块并转到属性检查器。将混合模式更改为叠加，将角半径设置为15，然后单击填充颜色并将不透明度降低到50%。

确保该形状仍处于选中状态并按下Command-C。从导航栏中选择另一个方块，然后点击Option-Command-V以添加从一个形状轻松复制和粘贴外观属性到另一个形状。

第 3 步

让我们创建一个简单的放大镜图标。首先，您需要设置网格以更轻松快捷地创建和对齐所需的形状。单击画板的名称并转到属性检查器。

专注于网格部分并单击该复选框以启用网格。从下拉菜单中选择Square ，在输入框中输入1，然后单击颜色井。将颜色更改为#C7C7C7并且不要忘记将不透明度降低到50%。

选择椭圆工具 (E )并创建一个10 px的圆圈。禁用填充，将边框颜色更改为白色，将大小增加到2并检查内部描边按钮。

第4步

选择直线工具（L ），创建一个小的倾斜路径并将其放置在第一张图片中。禁用填充，将边框颜色更改为白色，并确保将大小设置为2。

选择这个新路径以及圆圈并将它们分组（Command-G）以轻松选择和移动两个形状。

第 5 步

现在放大镜图标已经完成，让我们创建一个经典的菜单图标。选择矩形工具 (R)，创建一个12 x 2 px的形状并用白色填充。添加此矩形的两个副本并将它们拖动到原始下方，如第二个图像所示。

选择在此步骤中制作的所有三个矩形，转到属性检查器并单击添加按钮。

第 6 步

选择前面步骤中制作的两个图标，如下图所示放置。这些将是您的导航栏按钮。

第 7 步

对于文本样式，我们将使用Apple 的San Francisco Compact Display 字体。它提供了广泛的样式和语言，使您可以在每个点大小上实现最佳易读性或在需要时轻松调整文本内容。

选择标题 文本并将其替换为90 年代的嘻哈。 转到属性检查器，选择San Francisco Compact Display font，将Style更改为Semibold并将Size设置为20。 

4.如何对音乐播放器 UI 设计的歌曲控件进行风格化

步骤1

专注于文本片段。选择最上面的一个并转到属性检查器。选择San Francisco Compact Display 字体，将Style更改为Semibold并将Size降低到16。

选择另一段文本，使用相同的字体，但将Style更改为Light并将Size降低到12。

第2步

从歌曲栏中选择左侧方块，转到属性检查器并将角半径设置为10。

第 3 步

从歌曲栏中选择白色矩形并转到属性检查器。将混合模式更改为叠加，将角半径设置为8，然后单击填充颜色并将不透明度降低到35%。

第4步

选择文本工具 (T)，添加4:08 的文本，将颜色设置为白色并将其放置如下图所示。使用San Francisco Compact Display 字体，将Style更改为Light并将Size降低到12。

第 5 步

专注于歌曲栏的右侧方块。选择矩形工具 (R)，创建一个4 px的正方形，用黑色填充，然后按照第一张图片所示放置。添加这个小形状的两个副本并将它们放置如下图所示。

完成后，选择所有三个方块并单击属性检查器中的添加按钮。将此形状的填充颜色从黑色更改为白色，然后选择位于后面的白色方块并将其删除。

第 6 步

选择构成顶部歌曲栏的矩形并转到属性检查器。将圆角半径设置为10，并将填充颜色更改为#232429。

第 7 步

选择构成顶部歌曲栏的形状和文本并将它们分组（Command-G）。

确保您的组保持选中状态，切换到Assets面板 ( Shift-Command-Y ) 并单击Components部分的加号按钮。或者，您可以使用Command-K键盘快捷键。

第 8 步

确保您的组件仍处于选中状态，然后单击属性检查器中的重复网格按钮或按Control-R键盘快捷键。单击该底部手柄并将其向下拖动以添加组件的八个副本，如第二个图像所示。

将光标移动到组件之间的任意位置，然后单击并拖动以将组件之间的整体间距减小到10 px，如第三张图所示。

第 9 步

双击第四个组件将其选中，然后再次双击它以选中其中的圆角矩形。转到属性检查器并将填充颜色替换为#785BFC。我们将使用这种紫色来突出设计中最重要的元素。使用应用程序时应首先引起用户注意的内容。

第 10 步

一个一个地关注组件。双击每个组件以从网格中选择它，然后再次双击它以选择文本片段。将现有信息替换为下图中显示的信息。

5.如何设置音乐应用界面的播放器控件样式

步骤1

专注于播放器栏的顶部。选择矩形工具 (R)，创建一个280 x 4 px的形状并将其放置如下图所示。将圆角半径设置为2并将填充颜色更改为#232429

第2步

确保矩形工具 (R)仍然处于活动状态，创建一个98 x 4 px的形状并将其放置如下图所示。将圆角半径设置为2，并将填充颜色更改为紫色（#785BFC）。

第 3 步

使用矩形工具 (R)创建一个20 px的正方形并将其放置如下图所示。将圆角半径设置为7，并将填充颜色更改为白色。

第4步

选择构成播放器栏的主要形状并将其颜色更改为#0F0F0F。

选择文本工具 (T)并添加第二张图片中显示的白色文本。使用相同的 San Francisco Compact Display 字体，将Style更改为Light并将Size设置为12。

第 5 步

从播放器栏中选择最大的白色方块并专注于属性检查器。将填充颜色更改为紫色（#785BFC）并将角半径设置为25。

第 6 步

确保您的紫色按钮仍处于选中状态，继续关注属性检查器并启用阴影效果。输入下图中显示的属性，然后单击阴影颜色。将颜色更改为#785BFE并将不透明度降低到50%。

第 7 步

选择紫色按钮左右两侧的白色方块。将圆角半径设置为15，并将填充颜色更改为#232429。考虑到这个播放/暂停按钮是这个栏中最重要的元素，它应该具有最大的视觉权重。

第 8 步

下载这些音乐播放器图标并将它们拖到您的音乐播放器 UI 设计文档中。缩放这些形状并如下图所示放置它们。

恭喜！您的音乐应用界面已完成！

这是它的外观。我希望您喜欢本教程，并且可以在您未来的 Adobe XD 应用程序 UI 工具包项目中应用这些技术。不要犹豫，在评论部分分享您最终的音乐应用界面。

随意调整最终设计并使其成为您自己的 - 添加动作和过渡将是一个很好的下一步。您可以在 GraphicRiver找到一些很棒的灵感，使用有趣的解决方案来创建令人惊叹的 Adobe XD 音乐播放器 UI 套件。