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套件:
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