adobe xd_如何在Adobe XD中创建Music Player App UI设计

adobe xd

在此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设计的主要组成部分以及大致的位置和比例。

第2步

让我们打开Adobe XD，然后选择iPhone XR / XS Max / 11（414 x 896）模板来创建414 x 896画板。

第三步

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

选择矩形工具（R），然后创建414 x 70像素的形状。 使用智能向导，轻松放置您的形状，如下图所示，然后转到“ 属性”检查器。 使用该复选框禁用现有的边框 ，然后单击“很好地填充颜色”并将颜色更改为＃646E83 。

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

第4步

确保“ 矩形”工具（R）仍处于活动状态，并创建414 x 204 px的形状。 如下图所示放置它。

第5步

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

第6步

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

重复此技术，直到您有九个矩形的列，如第三幅图像所示。

步骤7

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

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

2.如何将控件添加到Music App Mockup

第1步

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

确保此正方形保持选中状态。 按住Option键和Shift键，然后将所选内容的副本向右拖动，如第二幅图像所示。 使用智能导向器可以完美对齐此新形状。

第2步

选择“ 文字”工具（T） ，在画板上单击并添加“ 标题 ”文字。 如下图所示放置它，但是现在不必费心编辑字体及其属性。

第三步

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

第4步

选择“ 矩形”工具（R） ，创建一个38 x 24 px的形状并将其放置在第一个图像中。

切换到“ 文本”工具（T），然后添加“ 艺术家名称”和“ 歌曲名称 ”文本，如第二幅图像所示。

第5步

专注于播放器栏。 选择矩形工具（R），然后创建374 x 20像素的形状。 用白色填充它，然后将其放置在第一个图像中。

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

第6步

选择矩形工具（R）并创建一个50像素的正方形。 用白色填充它，然后将其放置在第一个图像中。 复制此新形状，然后将副本拖到左侧，如第二幅图像所示。

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

步骤7

音乐应用程序样机已完成。 这些形状中的一些将被样式化，并在最终的音乐播放器UI套件中使用，某些将仅用作您将要添加的按钮和图标的指南，而一些将被删除。

3.如何设置此音乐播放器UI设计的导航栏的样式

第1步

我们将为整个Adobe XD音乐播放器UI套件选择深色和简洁的样式。 主要组件将具有不同的黑色阴影，以便在视觉上将各部分分开，而不会太费力。 导航栏不会使用其他颜色，但是我们将确保突出显示位于其上的两个主要按钮。 我们将仅对所有图标和文本使用白色，以创建良好的对比度并使每个元素尽可能清晰。 最后，我们将使用较亮的颜色来引起人们对Adobe XD app UI套件最重要元素的注意。

首先，让我们更改画板的颜色。 只需单击画板上方的名称，然后转到属性检查器。 单击“ 填满颜色”，然后将颜色更改为＃191A1F 。

第2步

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

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

确保仍选择此形状，然后按Command-C 。 从导航栏中选择另一个正方形，然后单击Option-Command-V以添加轻松地将外观属性从一种形状复制并粘贴到另一种形状。

第三步

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

专注于“ 网格”部分，然后单击该复选框以启用网格。 从下拉菜单中选择正方形 ，在输入框中输入1 ，然后单击颜色。 将颜色更改为＃C7C7C7 ，不要忘记将不透明度降低到50％ 。

选择椭圆工具（E ）并创建一个10像素的圆圈。 禁用“填充”，将“ 边框”颜色更改为白色，将“ 大小”增加到2，然后选中“ 内部描边”按钮。

第4步

选取“ 线条”工具（L ） ，创建一条小的倾斜路径并将其放置，如第一个图像所示。 禁用填充，将边框颜色更改为白色，并确保将大小设置为2 。

选择该新路径以及圆并对其进行分组 （ Command-G ），可以轻松地一次选择并移动两个形状。

第5步

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

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

第6步

选择上一步中制作的两个图标，然后将它们放置，如下图所示。 这些将是您的导航栏按钮。

步骤7

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

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

4.如何样式化音乐播放器UI设计的歌曲控件

第1步

专注于文本。 选择顶部的一个，然后转到“ 属性”检查器。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“半粗体”，并将“ 大小”降低到16 。

选择另一段文本，使用相同的字体，但将“ 样式”更改为“ 浅”，然后将“ 大小”减小到12 。

第2步

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

第三步

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

第4步

选择“ 文本”工具（T） ，添加4:08文本，将颜色设置为白色，然后将其放置，如下图所示。 使用San Francisco Compact Display字体 ，将“ 样式”更改为“ 浅”，并将“ 大小”降低到12 。

第5步

将焦点放在歌曲栏的右方。 选择“ 矩形”工具（R） ，创建一个4像素的正方形，用黑色填充并将其放置在第一个图像中。 添加此微小形状的两个副本，并将其放置，如下图所示。

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

第6步

选择组成顶部歌曲栏的矩形，然后转到“ 属性”检查器。 将拐角半径设置为10并将“ 填充颜色”更改为＃232429 。

步骤7

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

确保您的组保持选中状态，切换到“ 资产”面板（ Shift-Command-Y ），然后单击“ 组件”部分中的加号按钮。 或者，您可以使用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 ）。

第三步

使用矩形工具（R）创建一个20像素的正方形并将其放置，如下图所示。 将拐角半径设置为7 ，并将“ 填充颜色”更改为白色。

第4步

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

选择“ 文字”工具（T），然后添加第二张图像中显示的白色文字。 使用相同的San Francisco Compact Display字体 ，将“ 样式”更改为“ 浅” ，并将“ 大小”设置为12 。

第5步

从播放器栏中选择最大的白色正方形，然后将焦点放在“ 属性”检查器上。 将“ 填充”颜色更改为紫色（ ＃785BFC ），并将拐角半径设置为25 。

第6步

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

步骤7

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

步骤8

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

音乐应用程序界面已完成！

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

随意调整最终设计，并根据自己的喜好进行下一步的添加运动和过渡。 您可以在GraphicRiver上找到灵感 ，并提供有趣的解决方案来创建惊人的Adobe XD音乐播放器UI套件。

了解有关Adobe XD中UI设计的更多信息

翻译自: https://webdesign.tutsplus.com/tutorials/music-player-app-ui-design-adobe-xd--cms-34793

adobe xd