在Affinity Designer中创建健身应用程序设计

在本教程中，我将引导您完成为iOS Fitness应用程序设计欢迎屏幕的过程。 我们将使用Affinity Designer （一种由Serif开发的有前途的新工具），以及一款用于UI设计的出色应用程序。

您不需要任何使用该应用程序的经验。 在本教程结束时，您将获得有关Affinity Designer工作流程的基本知识。 我们将使用字体，矢量，图像以及图层样式。

创建工作空间

第1步

让我们开始创建一个新文档。

打开Affinity Designer之后，从主菜单转到“ 文件”>“新建 ”。 在出现的弹出窗口中，您可以指定最适合您的文件参数。 现在，让我们关注两个选项： Type和Page Preset 。 我们将设计一个iPhone App，因此最好的方法是选择Type：设备和预设：iPhone 5（Retina） 。 Affinity Designer将为我们自动设置其他选项。

第2步

接下来，我们需要准备一个可以工作的环境。我非常喜欢在设计中使用网格。 我们现在不会深入探讨这个问题，但是我们将建立一个非常简单的布局网格。

此设计将基于基本的Apple人机界面指南 ，这意味着要遵循特定的层次结构。 我们需要为状态栏分配一个空间（20磅）。 然后，尽管透明，但在其下方将有一个简单的导航栏 （44磅）。

接下来，是有关用户性能的主要信息的空间，以及用于开始锻炼的按钮的位置。

转到“ 视图”>“参考线管理器” ，将出现一个弹出窗口，其中包含水平和垂直参考线（现在为空白）。 单击“ 水平参考线”部分下方的空白小页图标。 这样做将添加新的水平向导。 然后双击出现在列表中的值，并将其更改为20 pt。 使用属性添加其他指南，如下所示。

应用背景

第1步

现在，我们将创建我们的应用程序背景。 从左侧的工具菜单中选择一个矩形工具 （M），然后绘制一个覆盖整个工作区域的矩形。 在左侧面板上有一个“ 转换”部分。 您可以在此处检查矩形尺寸及其起点（您应该具有X：0，Y：0和W：320 pt，H：568 pt）。

第2步

现在，我们将更改背景色。 转到主工具栏正下方的上下文工具栏（如果看不到，请进入主菜单中的查看>显示上下文工具栏 ）。 在上下文工具栏的左侧，您将看到与我们刚创建的形状相关的属性。 单击描述为填充的白色小矩形（具有选定的形状）。 从选择列表中选择RGB十六进制滑块，然后在HEX参数输入字段中输入＃151515，然后按Enter 。

第三步

转到“ 图层”面板。 双击包含我们形状的图层，并将其名称更改为“ BG”。 接下来，单击小挂锁图标以锁定BG层。 这样，在处理其他元素时，您就不会偶然弄乱它。

状态和导航栏

第1步

将注意力集中在状态栏上。 我们不会为重塑圆圈而烦恼，而是下载本教程附带的源文件以找到stat-bar文件。 然后在Affinity Designer主菜单中转到“ 文件”>“导入 ”，选择stat-bar.afdesign文件，然后在设计上的任意位置单击。

选择组并将其放在应用程序屏幕的顶部。

第2步

是时候创建我们的汉堡菜单了。 首先，打开“主工具栏”中的网格，像素和辅助线。 在应用程序窗口的左上方，将您的主要颜色更改为“白色”。 从左侧的“ 工具”面板中选择“ 矩形工具” ，并绘制一个18 x 2 pt的矩形。 按住Alt + Shift按钮，然后单击并拖动原始矩形下方的矩形（我们只是在复制矩形）。 再做一次，您将获得一个汉堡菜单图标。

选择所有三个形状（ Shift +单击 ），然后单击Affinity Designer右上角的“ 添加”按钮以将其合并为一个。 在“ 层”窗格中找到您的图标，并将其重命名为“ hamburger-menu-icon”。

第三步

从工具面板中选择艺术文字工具 （T），然后在我们设计的导航栏空间内的某个位置单击。 输入文字“ Running App”，然后选择全部。

单击“ 字符”按钮，如下所示更改文本属性，然后丢失弹出窗口。

现在，将文本居中在导航栏区域中。 它会自动捕捉。 如果没有，请确保打开顶部主工具栏上的捕捉选项。

现在该在“图层”面板中进行清理了。 单击“ 图层”面板底部的“ 添加新图层”按钮，并将汉堡包图标，应用程序标题和状态栏拖到其中。 将应用程序标题和菜单图标层分组在一起（选择两者并单击Cmd + G ），然后重命名该层，如下所示：

进度表

第1步

从工具面板中选择“ 圆”工具 （M）并绘制一个圆。 选择新形状后，打开左上角的“ 描边属性”面板，并如下所示更改参数。

从我们最初创建的中心参考线开始绘制，然后在绘制时按住Cmd （从中心点绘制）和Shift （绘制圆形，而不是椭圆形）。 您的圈子应该是200x200点左右。

选择圆，然后按工具栏菜单上的“ 转换为曲线”按钮。 选择节点工具 （A），然后单击“ 断裂曲线”按钮。 在仍选择“ 节点工具”的情况下 ，在曲线的大约3/4高度处创建两个点。

注意 ：您可以创建其他指南以更好地对齐这些新节点。 按Cmd + R显示标尺 ，然后单击并按住上方标尺，然后向下拖动光标以创建参考线。

选择圆的顶部节点，然后在键盘上单击“ 删除 ”将其删除。 现在，您应该有一个良好的空心圆图基础。

第2步

选择图表形状并复制它（ CMD + J ）。 使用节点工具选择其左上角，然后将其删除。 打开“ 描边属性”面板并更改值，如下所示。 绿色为＃4DFA41，黄色为＃F7D203。

第三步

选择“ 艺术文字工具”并输入一些其他信息，然后如下所示放置和格式化它们。

现在，我们有了一个非常惊人的进度表，其中包含有关用户成就的其他信息！

开始运行按钮

第1步

从“ 工具”面板中选择“ 矩形”工具 （M），然后绘制一个大约290pt x 44 pt的矩形。 在“ iOS人机界面指南”中，苹果设计师建议44磅为轻松敲击的理想按钮高度。

按住Shift键并单击应用程序的背景和刚创建的矩形形状，然后单击屏幕左上方区域中的“ 水平对齐中心”按钮。 将其放在用户界面设计的底部。 您还可以选择矩形形状，然后在“ 变换”面板中将其X / Y设置更改为以下所示的形状：

第2步

选择刚创建的形状。 打开屏幕左上方的“ 颜色填充”面板，然后将填充颜色更改为透明。 比将笔画更改为＃4CFA41。 打开“ 笔画首选项”面板（颜色旁边），将笔画粗细设置为2pt，然后将其与形状的内部对齐。

第三步

现在为按钮标签。 选择“ 艺术文字工具”，然后使用它在刚创建的矩形的中心创建标签。 键入“开始运行”，然后通过单击顶部工具菜单上的“ 字符”按钮（选择了文本对象）打开“ 字符”窗口。 更改所有首选项以反映以下示例：

样本统计

我们将在进度图和“开始运行”按钮之间放置一个简单的统计视图。 我们将显示平均跑步速度，跑步总数和燃烧的卡路里。

第1步

访问Icons8网站并下载“正在运行”图标 ，“ 秒表”图标和“ 火元素”图标 。 Icons8是查找现代典雅图标的好地方。 您可以免费获得PNG（如果正在使用，请记住链接回到 Icons8网站）或购买矢量版本。

第2步

首先在设计中放置“正在运行”图标。 转到“ 文件”>“放置”并选择文件，或将文件拖到Affinity Designer中。 将其垂直放置在进度图下方的中心位置。

接下来转到“ 效果”面板（选中图标）并打开“ 颜色覆盖”选项卡。 将叠加层颜色更改为＃4CFA41。

然后切换到样式标签，并通过选择右侧的小下拉菜单图标，然后从选择中添加样式，从选择中创建自定义样式。 这样，以后重用我们的样式会更容易。

第三步

再次，选择“ 艺术文字工具”并创建两个文本对象。 输入样品编号和文本“ Total Runs”。 格式化它们，如下所示。 将其垂直居中，并将其放在“跑步者”图标下方。

第4步

将其他下载的图标放在UI设计中。 选择其中一项后，从“ 样式”面板中选择我们刚刚定义的样式 。 瞧！ 我们的样式已被重新应用，而无需再次指定它们。

在仍然选择图标的情况下，单击Cmd + C或转到编辑>复制 。 选择最后一个图标，然后单击Cmd + Shift + V或转到菜单>编辑>粘贴样式 。 这会将先前复制的对象的样式粘贴到新对象。 很方便吧？

画龙点睛

第1步

当我们将所有组件放置在画布上时，就该处理一些细节了。 首先，我们在设计的中间有一个丑陋的漏洞，让我们对此做些事情。

如果您将图层整理得井井有条，这将很容易。 在进度表中选择图层/组，并将其向下移动约50pts。 如果您没有使图层保持井井有条，那么此步骤将更加困难-它可以为您服务！

第2步

让我们也为背景增添趣味。 创建一个320x320pt的矩形并将其放置在设计之上。 选择它，然后从工具面板中选择“ 边角工具 （C）”。 单击矩形的锚点之一以使其可编辑，打开先前定义的辅助线 （ Cmd +; ），然后单击矩形底角的中心以创建节点。 选择它并向下移动40pts。 在这里，我们有了新的自定义形状的箭头。 转到“ 图层”面板并将其移至bg图层（将其放在顶部）。

第三步

抓取本教程附带的源文件，并查看巴黎一条漂亮的街道的照片。 这是我访问巴黎时拍摄的照片之一。 看起来令人愉快，它也是一个理想的跑步场所。 在Affinity Designer中将其打开并复制（ Cmd + C ）。

返回设计并选择我们先前制作的箭头形状（在“ 图层”面板中）。 然后单击Cmd + Alt + V将其粘贴到选定的形状中。 根据需要将其移动以进行裁剪。 选择箭头形状并将其变暗为40％不透明度。 单击Cmd + G将曲线放入组，并将其混合模式从法线更改为辉光 。

第4步

在仍然选择该组的情况下，从工具菜单中选取“ 透明度工具 （Y）”，然后从底部开始一直在该组上创建“ 线性混合渐变 ”（单击并拖动）。 您可以使用该工具来获得所需的结果。

第5步

现在，让我们在箭头下方添加一个阴影。 选择组，然后转到“ 效果”面板。 展开“ 外部阴影”选项卡，然后将其打开。 半径20pt和偏移15pt应该很好。

结论

你完成了！ 您刚刚使用Affinity Designer创建了第一个移动应用程序设计。 运气好的话，此过程中的重复步骤将教给您许多非常有用的Affinity Designer工作流程技术。 我期待看到您使用它进行其他设计！

翻译自: https://webdesign.tutsplus.com/tutorials/create-a-fitness-app-design-in-affinity-designer--cms-25311