在Affinity Designer设计UI界面【百科全说】

Affinity Designer操作使用容易上手，比起功能强大的AI和PS来讲很适合初学者，本篇文章通过设计UI界面来带大家熟悉Affinity Designer常用的工具使用，其中我们重点设计图形的绘制和颜色的设置，在分享教程之余还会将工具使用注意事项重点提出。好了，下面我们开始Affinity Designer的学习之旅。

在本教程中, 我将引导您完成为 ios 健身应用程序欢迎屏幕的设计过程。我们将使用AD（为了以后方便就简称为AD）进行设计, 这是一个新的、有前途的工具, 也是一个用于 ui 设计的很好的应用程序。您不需要有任何使用该工具的。在本教程结束时, 您将获得AD的设计工作流的基本知识。

教程的源文件我以及为大家制作好了点击文末的下载就可以下载使用了

so开始我们的教程吧！

我们先来设置一下软件的一些基本设置吧！

步骤1

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

打开AD后, 从主菜单转到“文件” > “新建”。在出现的弹出窗口中, 您可以指定最适合您文件需要的参数。现在, 让我们重点介绍两个选项:“类型” 和 “页面预设”。

我们将设计一个 iphone 应用程序, 所以我们只需要在类型里面选择设备，然后页面预设里面选择iphone就可以了，AD会为我们自动设置其他参数。（当然你看见这篇文章是2018年末了，所以Ad已经更新了许多东西，所以你可以不按照教程的这个预设尺寸来）

步骤2

接下来, 我们需要准备一个工作环境。我是在设计中使用网格的忠实粉丝。我们现在不会深入讨论这个问题, 但我们会建立一个非常简单的布局网格。这种设计将依靠基本的苹果人机界面指南, 这就意味着需要坚持一个特定的层次结构。我们需要为状态栏分配一个空间 (20 pt)。然后, 虽然透明, 但下面会有一个简单的导航栏 (44 pt)。接下来, 一个关于用户主要信息的空间, 以及一个按钮的位置。

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

应用背景

第1步

现在, 我们要创建我们的应用程序背景。从左侧的工具菜单中选择矩形工具 (m), 并绘制覆盖整个工作区域的矩形。右侧面板上有一个变换面板。您可以在此处检查矩形尺寸以及它的起点 (您应该X:0, Y:0 and W: 320 pt, H: 568 pt)。

第2步

现在我们将更改背景色。转到主工具栏旁边的上下文工具栏 (在上下文工具栏的左侧, 您将看到与我们刚刚创建的形状相关的属性。单击被描述为 “填充” 的白色小矩形 )。从选择列表中选择 rgb 十六进制滑块, 然后在数值参数输入字段中输入 #151515, 然后按 enter。

第3步

转到 “图层” 面板。双击包含我们形状的图层, 并将其名称更改为 “bg”。接下来, 单击小挂锁图标锁定 bg 图层。这样, 你就不会在处理其他元素时选中bg。

状态栏与导航栏

第1步

状态栏这个地方我们可以在网上下载一下AD的源文件将其加载进来，

第2步

是时候制作我们的菜单了。将主颜色更改为应用程序窗口左上角的 “白色”。从左侧的 “工具” 面板中选择 “矩形工具”, 然后绘制一个 18 x 2 pt 矩形。按住 alt + shift 按钮, 然后单击并向下拖动原始矩形 (我们只是复制矩形)。再做一次, 你就会得到一个菜单图标。

选择这个三个形状 (shift + 单击), 然后单击AD右上角的 “添加” 按钮, 将其合并为一个形状。在 “图层”面板中找到您的图标, 并将其重命名为 “菜单图标”。（你也可以使用AI的打组命令来讲他们打组而不是合并）

第3步

从工具面板中选择 “艺术字体工具” (t), 然后单击我们设计的导航栏空间中的某个位置。输入文本（随意你输入什么）然后我们可以ctrl加t调出字符属性。这个字符属性有点和我们Adobe ID的有点像

现在, 将文本居中导航栏区域。它将自动捕捉。如果没有, 请务必打开顶部主工具栏上的捕捉选项。（一个红色的u型的红色图标后面点击三角形就可以设置吸附了）

是时候整理图层面板中的内容了。单击 “图层” 面板底部的 “添加新图层” 按钮, 然后将菜单图标、应用标题和状态栏拖入其中。然后CTRL+G打组，然后重命名图层, 如下所示:

进度图的绘制

第1步

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

从我们最初创建的中心参考线开始绘图, 然后在绘制时按住ctrl(从中心点绘制) 和 shift (绘制一个圆, 而不是椭圆)。你的圆圈应该在200×200 pt左右。

选择圆圈, 然后按工具栏菜单上的 “转换为曲线” 按钮。选择节点工具添加一些点，如上图所示，然后选择断开曲线，然后选择不要的点del。

第2步

选择进度形状并对其进行复制 (ctrl+ j)。打开 “描边属性” 面板, 并更改值, 如下所示。绿色是 #4DFA41 和黄色 #F7D203。我们需要删掉一些点。应为不可能是一开始就是满的。

第3步

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

我们现在有一个非常惊人的进展图表与更多关于用户成就的信息!

按钮的绘制

第1步

从 “工具” 面板中选择 “矩形工具 (m)”, 然后绘制一个矩形, 大约为 290pt x 44 pt。在《 ios 人机界面指南》中, 苹果设计师建议44pt是按钮完美的高度, 便于点击。按住 shift 键单击应用的背景和刚刚创建的矩形形状, 然后单击屏幕左侧区域上的 “水平对齐到中心” 按钮。将其放在界面的底部。

第2步

选择刚刚创建的形状。打开屏幕左上角的 “填充颜色” 面板, 并将填充颜色更改为透明。在将笔画更改为 #4CFA41。描边设置为2pt。

第3步

现在在按钮沙上添加文案。选择 “艺术字体工具”, 并使用它在刚创建的矩形中心创建。键入 “开始运行”, 然后通过单击顶部工具菜单上的 “字符” 按钮更改所有参数选项。

如果你到这里发现为什么没有进度条上面那个圆的步骤，我只能说原作者可能忘记了，不过这也没关系，就是2给圆改变一下填充和透明度而已，相信你完全知道怎么做。

个人统计信息

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

第1步

你可以去网上下载一些图标，当然你也可自己绘制，（教程绘制图标将在下期与大家见面）

第2步

如果你下载了png的图标放进来，我们只需要转到 “效果” 面板 (选中图标) 并打开 “颜色叠加” 选项卡. 将叠加颜色更改为 #4CFA41就可以了。

第3步

再次, 选择 “艺术字体工具” 并创建两个文本对象。键入示例编号和文本如下所示。垂直居中, 并将它们放在 “跑步者” 图标的下方。

第4步

将其他下载的图标放在 ui 设计中。选择其中一个样式后, 请选择我们刚刚从 “样式” 面板中定义的样式。瞧！我们的样式已被重新应用, 而无需再次指定它们。在仍选择图标的情况下, 单击 ctrl + c 或转到 “编辑” > “复制”。选择最后一个图标, 然后单击 ctrl+ shift + v, 或转到 “菜单” > “编辑粘贴样式”。这将把以前复制的对象的样式粘贴到新对象中。很方便, 对吧？

最后

我们发现这个界面还需要一些细节的添加，让我们为单调的背景。创建一个320x320pt 矩形, 并将其放置在bg的顶部。选择它, 然后从工具面板中选择拐角工具 (c)。单击矩形的一个定位点使其可编辑, 打开以前定义的参考线 (ctrl +;), 然后单击矩形底角的中心以创建一个节点。选择它并向下移动40pt左右把。

第2步

我们可以找一个合适主题的图片加载进来，然后使用剪切命令裁剪到适合形状的样式。这里的操作是将图片放置到形状的下面，然后选择形状，右击有一个叫蒙版至下面的命令。（图层面板中操作）

现在, 让我们在箭头形状的下面添加一个投影。选择组, 然后转到 “特效” 面板。打开外阴影，20px的半径和15px的偏移应该是很好的了。到此你完成了这个练习。

小知识：当你双击图层面板里面图层的缩略图时，画板将会把该对象放大到屏幕最大化。按住ctrl加鼠标滚轮是缩放试图。按住alt加鼠标滚动是画板上下滑动。输入需要修改的文字建立用框选工具，艺术字体工具一旦输入就自动转曲不可修改，而框选工具可以二次修改。输入文字后按下ctrl加enter就是转曲哦。这个文本工具可能需要熟悉一些。用过Id的人可能很熟悉。

人机交互指南

ICON8（提供win客户端离线下载使用他们的图标，en进去可能会慢，但是可以转到中国版）

UI中国

作者：米夏小雨

在Affinity Designer设计UI界面

步骤1

步骤2

应用背景

状态栏与导航栏

进度图的绘制

按钮的绘制

个人统计信息

最后

相关推荐