adobe xd

在本教程中，您将学习如何在Adobe XD中创建财务应用程序设计，以及（更重要的是）如何轻松对其UI的各个部分进行动画处理。

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

• 如何在Adobe XD中创建财务应用程序模型
• 如何创建和导入图标
• 如何设置网格
• 如何保存Adobe XD组件
• 如何创建重复网格
• 如何创建交互式原型

有关如何调整或改进最终财务UI设计的更多启发，您可以在GraphicRiver中找到大量资源。

您将要创造的

我们将设计此UI的深色和浅色变体。 智能手机应用程序通常根据用户的喜好来适应暗或亮模式，因此这是一个有用的考虑。 这是一个视频，演示我们将要创建的动画（深色UI）：

在稍后的过程中，我将向您展示light模式。

您将需要什么

您将需要以下资源才能完成此财务应用程序UI设计：

• San Francisco Compact Display字体
• 金融与银行业图标

1.如何将UI模式添加到XD

第1步

让我们从纸上的基本草图开始此金融应用程序设计。 在纸上，您可以轻松地建立应用程序设计的主要组成部分以及主要功能的整体比例和位置。 纸质草图是数字线框的理想起点。

第2步

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

第三步

现在让我们开始在线框上的工作。 查看您的纸质草图，并从应用程序设计的四个主要部分（或模式）开始。

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

在此初始阶段，不要浪费时间对对象进行样式化或添加太多文本内容。 目前，您唯一需要担心的是应用程序UI设计的总体结构。 确定各部分之间的比例和间距。

第4步

确保“ 矩形”工具（R）仍处于活动状态，并创建414 x 150像素的形状。 如第一张图所示放置它。

使用相同的工具，创建一个414 x 83 px的形状并将其放置在第二个图像中，并创建一个414 x 446 px的形状并将其放置在第二个图像中。

第5步

这些将是您的财务UI设计的主要组成部分。

在顶部，您拥有经典的导航栏，您将在其中添加应用程序的控制按钮。 在导航栏下方，您具有卡片栏，您将在其中添加可用的卡片以及每张卡片的相关信息。 在类别栏中，您将添加一行交易类别，而交易栏中将用于列出所选卡的交易历史记录。

2.如何将控件添加到财务应用程序设计中

第1步

重新查看您的纸本草图，然后将控件添加到此应用程序UI设计中。 让我们从导航栏开始。 选择矩形工具（R）并按住Shift键，轻松创建一个20像素的正方形。 如下图所示放置它，禁用边框并将填充颜色设置为＃646E83 。 对于将用作控件的其余对象，请使用相同的外观属性。

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

第2步

向下移动到卡片栏的左上角。 选择矩形工具（R），并记得按住Shift键以轻松创建30像素的正方形。 如第一张图所示放置它。

使用相同的工具，创建一个240 x 150 px的形状并将其放置在第二个图像中所示的位置。

第三步

专注于该类别栏的左侧。 使用矩形工具（R）创建一个60像素的正方形并将其放置在第一个图像中。

向下移动到交易栏的右侧。 使用相同的工具，创建一个30像素的正方形并将其放置，如第二个图像所示。

第4步

继续关注交易栏，并确保“ 矩形”工具（R）仍处于活动状态。 创建一个80 x 30像素的形状并将其放置在第一个图像中，然后创建一个60像素的正方形并将其放置在第二个图像中。

第5步

您的应用程序模型已完成。 这些形状中的一些将被样式化，并在最终的应用程序UI设计中使用，一些将仅用作要添加的按钮和图标的指南，而一些将被删除。

3.如何样式化此金融应用程序设计的导航栏

第1步

我们将为整个应用程序设计选择深色样式，并且仅对最重要的功能使用鲜艳的颜色。 主要组件将使用不同的黑色阴影来巧妙地分隔最重要的部分，而不会太过费力。 我们将所有图标和文本都使用白色，以形成良好的对比，并使每个元素尽可能清晰。 最后，您将获得此应用程序设计的黑暗模式。 在最后的步骤中，您将学习如何轻松调整应用程序设计并将整体设计从暗模式切换到亮模式。

让我们从更改画板的颜色开始。 单击画板上方的名称，然后转到属性检查器。 单击“ 填满颜色”，然后将颜色更改为＃0A0E17 。

第2步

将焦点放在导航栏的左方，然后创建一个小箭头图标。 首先，您需要设置网格以使其更易于创建像素完美的对象。 单击画板的名称，然后转到“ 属性”检查器。

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

选择钢笔工具（P）并创建下图所示的箭头路径。 确保它保持选中状态，然后转到“ 属性”检查器。 禁用“填充”，将“ 边框”颜色更改为白色，将“ 大小”增加到4，并且不要忘记检查“ 圆形帽”和“ 圆形连接”按钮。

第三步

从导航栏移到右侧的正方形。 选择“ 矩形”工具（R） ，创建一个20 x 4 px的形状并将其放置在第一个图像中。 确保它保持选中状态，并集中在“ 属性”检查器上。 禁用边框 ，将填充颜色更改为白色（ #FFFFFF ），并将“ 转角半径”设置为2 。

按住Option键和Shift键，然后简单地将此圆角矩形的副本拖到原始形状下方，如第二幅图所示。 在两个圆角矩形之间添加第三个副本，将其宽度减小一半并将其放置，如第三个图像所示。

第4步

选择位于导航栏按钮后面的黑色方块，然后将其删除。

选择“ 文字”工具（T） ，在画板上单击并添加“帐户”文字。 如下图所示放置它，确保它保持选中状态，然后转到“ 属性”检查器。 将颜色设置为白色。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“ 粗体” ，将“ 对齐方式”更改为“ 居中” ，然后将“ 大小”设置为20 。

我们将在Apple的所有文本中使用这种系统字体，因为它提供了广泛的样式和语言，使您可以在每个点大小上获得最佳的可读性，或在需要时轻松调整文本内容。

4.如何样式化此金融应用程序设计的卡片栏

第1步

选择用于划分卡片栏的矩形，然后将其删除。

移至用于划分导航栏的形状，然后选择它。 将其高度增加到190 px ，将其放置在第二个图像中，并将“ 填充”颜色更改为＃1C2230 。

第2步

从卡片栏中选择30像素的正方形。 转到属性检查器，将“ 填充”颜色更改为黑色（ ＃000000 ）并将“ 角半径”设置为10 。

第三步

继续关注您的黑色圆角正方形。 选择矩形工具（R） ，创建一个2 x 14 px的形状并将其放置在第一个图像中。

确保选择了该细矩形并复制它（ Command-D ）。 选择副本，转到“ 属性”检查器，然后将“ 旋转角度”设置为90度 。

第4步

从卡片栏中选择矩形，然后转到“ 属性”检查器。 将“ 转角半径”设置为10 ，然后单击“ 填充颜色”。 将填充类型从纯色更改为线性渐变 ，然后将焦点放在渐变滑块上。

选择左侧的颜色并将其更改为＃2E64F8 ，然后选择右侧的颜色并将其更改为＃0C23AC 。 返回画板并移动渐变滑块，如第一幅图所示。

第5步

选择文本工具（T），然后添加“借记卡”文本。 如下图所示放置它，确保它保持选中状态，然后转到“ 属性”检查器。 将颜色设置为白色。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“ 浅” ，将“ 路线”更改为“ 左” ，然后将“ 大小”设置为10 。

使用相同的工具，添加下面显示的其余文本，并使用下图所示的文本属性。

第6步

选择一个蓝色的圆角矩形及其上方的所有文本。 使用Command-G键盘快捷键将这些选定的对象分组。

转到“ 图层”面板，并将这个新创建的组重命名为“ Card Blue” 。

步骤7

确保已选择“ Card Blue”组，然后将其复制（ Command-D ）。 移至“ 层”面板，然后将此新组重命名为“ Card Purple” 。

从这个新组中选择圆角矩形，然后将现有的线性渐变替换为下图所示的矩形。

步骤8

继续关注“紫色卡片”组，并调整文本内容，如第一个图像所示。 完成后，按住Shift键，然后将“紫色卡片”组拖到右侧，如第二幅图像所示。

5.如何样式化此金融应用程序设计的类别栏

第1步

下载这些“ 财务和银行业务”图标 ，并将以下所示的四个图标拖到您的应用程序用户界面设计中。 将这些形状缩放为20 px，然后将“ 填充颜色”更改为白色。

逐个选择每个图标，打开“ 资产”面板，然后将图标保存在“ 组件”面板中。 命名这些组件，如下图所示。

第2步

将焦点放在类别栏上，选择一个黑色正方形，然后转到“ 属性”检查器。 将“ 转角半径”设置为10并将“ 填充”颜色更改为＃1C2230 。

选择“ 文本”工具（T），然后添加“全部”文本。 如下图所示放置它，确保它保持选中状态，然后转到“ 属性”检查器。 将颜色设置为白色。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“ 浅” ，将“ 路线”更改为“ 居中” ，然后将“ 大小”设置为12 。

第三步

选择矩形工具（R）并创建一个9像素的正方形。 将其填充为白色，并将“ 转角半径”设置为2 。 将此形状的副本拖到右侧，并在副本和原始副本之间留出2 px的间隙，如第二幅图像所示。 复制这两个形状，将副本向下拖动，并记住在副本和原件之间留出2 px的间隙。

一旦您完成后，选择所有四个形状和从属性检查器中单击联盟按钮。 放置新对象，如第三张图片所示。

第4步

选择第一个图像中突出显示的三个对象，转到“ 资产”面板，然后将选择另存为新组件。 将其命名为“ Category” 。

第5步

确保仍然选择了新保存的组件，然后从“ 属性”检查器中单击“ 重复网格”按钮。 单击该右手柄并将其拖动到右侧，以添加组件的四个副本，如第一幅图像所示。

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

第6步

专注于重复网格中的第二个组件。 双击图标两次以将其隔离，然后将其删除。 从“ 资产”面板中拖动“家庭”组件，然后将其精确放置在第二个图像中所示的位置。 对重复网格中的下一个组件重复此技术。

步骤7

继续专注于重复网格并调整文本，如第一幅图像所示。 完成后，选择用于划分类别栏的矩形并将其删除。

6.如何样式化此Finance App Design的交易栏

第1步

选择“ 文本”工具（T），然后添加“ TRANSACTIONS”文本。 如下图所示放置它，确保它保持选中状态，然后转到“ 属性”检查器。 将颜色设置为白色。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“半粗体” ，将“ 对齐方式”更改为“ 左” ，然后将“ 大小”设置为15 。

第2步

将焦点放在交易栏的右上角，然后选择该正方形。 转到属性检查器，将“ 转角半径”设置为5并将“ 填充”颜色更改为＃1C2230 。

第三步

继续关注上一步中编辑的形状。 选择矩形工具（R） ，创建一个10 x 2 px的形状，并用白色填充。 添加此矩形的两个副本，并将其拖动到原始矩形下方，如第二幅图像所示。

第4步

从交易栏中选择另一个正方形，将“ 转角半径”设置为10并将“ 填充颜色”更改为＃1C2230 。

从交易栏中选择矩形，将“ 转角半径”设置为15并将“ 填充颜色”更改为＃FD7074 。

第5步

选择“ 文本”工具（T） ，添加“电”文本并将其放置在第一张图像中。 将颜色设置为白色。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“ 中” ，将“ 对齐方式”更改为“ 左” ，然后将“ 大小”设置为20 。

使用相同的工具，添加文本“ 13 Jan 08:45 PM” ，并将其放置在第二个图像中。 将颜色设置为白色，并将不透明度降低到50％。 选择San Francisco Compact Display字体 ，将“ 样式”更改为“ 浅” ，将“ 路线”更改为“ 左” ，然后将“ 大小”设置为14 。

最后，添加“ $ 29.99”文本并将其放置在第三张图片中。 将颜色设置为＃1C2230 。 选择San Francisco Mono字体 ，将样式更改为粗体 ，将对齐方式更改为居中 ，然后将大小设置为14 。

第6步

添加家庭组件的一个实例并将其放置，如第一个图像所示。 选择第二个图像中突出显示的对象，并将其另存为新组件。 将其命名为“交易” 。

步骤7

确保仍然选择了新保存的组件，然后从“ 属性”检查器中单击“ 重复网格”按钮。 单击该底部手柄并将其向下拖动以添加组件的四个副本。 如图所示，将组件之间的间距减小到20 px 。

从每个组件副本中隔离图标，然后将其替换为第二个图像中显示的图标。

步骤8

从底部红色形状中选择第二个，并将其“ 填充”颜色更改为＃00b980 。 调整文本信息，如下图所示。

步骤9

选择用于划分交易栏的矩形，然后将“ 填充”颜色更改为＃0A0E17 。 选择此形状以及组成交易栏的其余对象并将其分组（ Command-G ）。 转到“ 图层”面板，然后将此组命名为“ Transactions Blue” 。

第10步

选择矩形工具（R），然后创建414 x 5像素的形状。 用＃2E64F8填充此细矩形，并将其放置，如下图所示。

7.如何遮罩对象并乘以画板

第1步

转到“ 层”面板，选择“蓝色卡片”和“紫色卡片”组，然后将它们分组 （ Command-G ）。 将此新名称命名为“ Cards” 。

第2步

选择“ 矩形”工具 ，创建一个344 x 150 px的形状，并将其放置在第一个图像中所示的位置。 这种新形状的外观属性并不重要。 将其与“卡片”组一起选择，然后转到“ 对象”>“具有形状的蒙版（Shift-Command-M）” 。 这将掩盖您的“卡片”组，仅使掩膜矩形所覆盖的组的内容保持可见。

这不会改变您的设计外观，但是一旦我们采用了原型制作方式，您就会了解其用法。 一旦将此组变成水平滑动菜单，遮罩将使滑动效果仅在被遮罩的区域中可见。

第三步

选择您的画板（单击名称）并复制它（ Command-D ）。 在两个画板之间留出200像素的间距。 专注于新的画板。 选择该细小的蓝色矩形，然后将“ 填充颜色”更改为＃772CCB 。

转到“ 图层”面板并打开被遮罩的组。 选择该“卡片”组，然后移至画板。 按住Shift键，然后将您的选择拖到左侧。 确保在选择的右边缘和画板的右边缘之间留出20 px的间隙，如第二幅图所示。 返回到“层”面板，并将“事务蓝色”组重命名为“事务紫色” 。

8，如何将您的财务UI设计变成交互式原型

第1步

从设计模式切换到原型模式 。

转到“ 图层”面板，然后从第一个画板中选择“卡片”组。 返回您的画板，单击该蓝色箭头按钮，然后将其拖动到第二个画板上方即可连接两个画板。 转到属性检查器以设置交互行为。 将“ 拖动”设置为触发器，然后选择“ 自动动画” 类型，并将“ 缓动”设置为“ 无” 。

第2步

从第二层中选择“卡片”组，并将其与第一个画板连接。 保持与上一步相同的交互行为。

第三步

选择第一个artbaord，然后将焦点放在“ 图层”面板上。 从“卡片”组中仅选择“紫色 卡片”组，并将其与第二个画板连接。 转到属性检查器来设置此新交互的行为。 将Tap设置为触发器，然后选择Auto-Animate 对于类型，将“ 缓动”设置为“ 无” ，并将“ 持续时间”更改为0.4 。

选择第二个artbaord，然后将焦点放在“ 图层”面板上。 从“卡片”组中仅选择“卡片蓝色”组，并将其与第一个画板连接。

第4步

选择“蓝色交易”组，将其复制（ Command-C ），然后将副本粘贴到第二个画板内的“紫色交易”组顶部。 复制“紫色交易”组（可以从“ 图层”面板中轻松选择），然后将副本粘贴到“蓝色交易”组顶部的第一个Arboard中。

选择在此步骤中添加的两个组副本，并将它们拖动到artbards下方500 px 。 将这些组放在画板之外将为“ Transactions Blue”和“ Transactions Purple”组在屏幕动画中内外添加漂亮的幻灯片。

现在，您可以单击“ 预览”按钮来查看原型。

第5步

您可以轻松地将财务UI设计的样式从暗模式更改为亮模式。 您要做的就是更改用于文本，图标和空白区域的颜色。

从文本和图标开始，然后将白色替换为＃2A2B90 。 移至画板颜色并将其更改为白色。 对用作“事务”组的背景的矩形以及该加号图标后面的圆角正方形执行相同的操作。 最后，将导航栏的颜色更改为＃F0F3FD 。 对封装图标的圆角正方形执行相同的操作。

你完成了！

这是它在灯光模式下的外观。 我希望您喜欢本教程，并可以将这些技术应用到将来的应用程序UI设计项目中。 请不要在评论部分分享您的最终结果。

随意调整最终设计，使其成为您自己的。 您可以在GraphicRiver上找到一些灵感的重要来源，并提供有趣的解决方案来改善您的财务UI设计。

想了解更多？

翻译自: https://webdesign.tutsplus.com/articles/finance-app-ui-design-in-adobe-xd--cms-34554

adobe xd