跳到主要内容

如何使用Adobe XD对移动应用程序进行原型设计

本教程将向您展示如何在Adobe XD中制作移动应用程序原型Adobe XD CC(2017 beta)在2016年新推出的Adobe XD CC有一些调整,使它更容易使用。

如果您是为移动应用程序或网站创建用户体验的设计人员,您可能习惯于在何时使用多个工具执行不同的任务原型

你从研究开始。然后,您在笔和纸上绘制想法,然后将您的想法转移到设计工具。为了获得最佳流程,您可以导出所有资产并将它们带入另一个工具来构建原型。从那里,您可以共享或测试原型,收集反馈,然后返回循环的中间进行迭代,在您优化设计时从工具切换到工具。

几个设计工具分别解决了问题的不同部分。但是,不要让你的设计生活更轻松,在所有这些工具之间切换只会降低你的步伐。

如果有一个工具意味着您可以享受完全连接的工作流程怎么办?您可以在几分钟内设计和制作您的体验原型,在网上分享它们以获取反馈,然后轻松编辑而不会突破您的步伐? Adobe Experience Design CC的目标 - 或者,我们称之为Adobe XD--就是这样做的。

在本教程中,我们将通过设计,原型设计和共享一个简单的“满足团队”移动应用程序向您展示Adobe XD的主要领域。

我们将创建一个列出产品团队成员的内容页面,然后用户可以单击要进入更深入的biog页面的各个条目。您将学习如何创建高保真设计,原型并共享它们以收集反馈。

观看上面的视频,并按照下面的书面步骤学习如何使用Adobe XD进行原型设计。我们不仅会向您展示如何制作它,我们还将向您展示如何测试它,记录它的预览视频,以及如何共享和导出它。

请注意,在较新版本的Adobe XD中,某些进程可能略有改变。

01.安装Adobe XD并开始新设计

从模板选项中选择iPhone画板,开始设计

首先,确保Adobe XD安装在您的计算机上。启动它,查看欢迎屏幕并使用iPhone画板模板启动新设计。

02.创建第二个画板

使用画板工具(一个)创建第二个画板,然后将其标题(通过双击它们)更改为“iPhone - 团队页面”和“iPhone - 详细信息页面”。使用右侧的属性检查器将画板的背景颜色更改为黑色。使用“选择”工具(V)选中后,您可以随时按空格键以平移设计。

03.下载教程资产

我整理了一个资源文件夹,我将在本教程中使用它。你可以下载它们这里。从Finder中,将“iphone-status-bar.svg”拖到Artboard 1的顶部(X:8,y:5)。然后将其复制并粘贴到Artboard 2中,这样两个画板顶部都有状态栏。击中CMD + L在两个画板中锁定这些状态栏,以便无法修改其属性。要解锁它们,您可以再次使用快捷方式或单击“锁定”图标。

04.绘制一个矩形并设置尺寸

让我们关注Artboard 1(团队页面)。使用矩形工具([R),在画板1中绘制一个粉红色矩形(#FF2BC2,没有边框),并使用右侧的属性检查器面板将其尺寸设置为375 X 230。

05.重新排序对象

要打开边框或填充和关闭边框,请单击右侧的“眼睛”图标。击中移+ CMD + [将它一直发送到后面,或者去对象>排列>发送回。如果要使用十六进制值更改颜色,请单击颜色图标,弹出本机颜色选择器时,选择顶部的第二个选项卡,然后将下拉菜单更改为“RGB滑块”。

06.创建标题

使用文字工具(Ť),单击以为您的团队页面创建标题。我的是Helvetica Bold,20,#FFFFFF,x:18,y:123。让我们开始整理我们的团队成员名单。绘制一个灰色方块,团队成员的照片将位于此处(100 x 100,x:8,y:238,#D0D0D0,没有边框)。

07.添加另一个矩形

在此右侧,我们需要一个白色矩形(260 x 100,x:108,y:238,没有边框的#FFFFFF),我们将在其中包含团队成员的名称作为标题和作业标题作为子标题。现在,使用占位符文本,并根据需要设置样式。

08.添加箭头图标

要显示此框将是一个可点击的区域,我们将包含一个箭头图标。将“path.svg”从Finder拖到XD画布上,直到画板上的一个点。然后将其重新定位到x:330,y:279。

09.摆出你的爆头

从Finder中,将爆头拖到灰色方块上。

10.创建列表

使用强大的重复网格功能来创建团队成员列表

现在我们可以创建我们的列表。此时,您通常会复制并粘贴顶部项目,向下移动复制的版本并调整边距。您可以对新项目执行相同操作,如果要更改边距,则必须逐个手动执行。

好吧,不是使用Adobe XD - 您可以使用重复网格功能。选择要重复的项目,单击右侧属性检查器上的“重复网格”按钮(CMD + R)并使用绿色手柄垂直重复项目。你也可以横向重复它们以获得平板电脑版本。

11.调整边距

通过将鼠标悬停在项目边缘,单击并拖动来调整重复网格的边距。让我们将边距设置为7.将重复网格拖动到画板的底部。我们现在有四行可供使用。

12.编辑文本字段

将所有爆头拖到网格上

虽然属性(颜色,x和y位置等)是全局的,但每个项目的内容可以是唯一的。编辑每个人的姓名和职位的文本字段。您可以双击以输入网格和组,或CMD +点击直接选择组或重复网格中的任何元素。现在我们只需要立即抓住所有爆头并将它们拖到网格上,我们就完成了这个屏幕。

13.创建一个黑暗的效果

让我们跳转到Artboard 2(详情页面)。再次,我们将从一个占位符矩形(375 x 444,x:0,y:0,没有边框的#FFFFFF)开始并拖动一个爆头来填充它。我们将通过将图像的不透明度更改为60%并将其发送到背面来创建暗影效果(移+ CMD + [)。

14.添加另一个箭头

然后锁定爆头项目(CMD + L)并添加另一个箭头('back-arrow.svg')以指示用户可以返回团队列表。这需要坐在x:20,y:40。首先锁定图像很重要,否则SVG将取代爆头。

15.添加联系信息栏

我们希望在每个页面上都包含一个粉红色条形图,其中列出了团队成员的联系方式(375 X 45,x:0,y:400)。使用文本工具(Ť)创建一个文本元素,读取“占位符链接”,居中,设置它,并将其放在x:169,y:416。

16.创建更多文本元素的实例

让我们使用重复网格工具创建此文本元素的另外两个实例。首先,将文本转换为重复网格(CMD + R),然后在水平扩展网格的同时按住选项键。美丽,不是吗?直接选择文字(CMD +点击)并将内容更改为“电子邮件”,“Twitter”和“LinkedIn”。

17.创建名称和生物框

要完成设计,请创建一个白色框(360 x 214,x:8,y:445),其中包含团队成员的姓名和biog。首先使用占位符“人名”添加文本元素。对于包含biog的文本元素,我们想要使用Area Text。为此,请选择“文本”工具(Ť)并单击并拖动以定义副本的区域。再次,现在键入一些占位符文本,并调整其样式属性。

18.为其他团队成员创建画板

复制您的详细信息页面,以便每个团队成员都有一个

现在让我们为其他团队成员制作一些新的画板。首先解锁主图像(CMD + L),然后单击Artboard 2的标题以选择它,然后点击CMD + C复制它。缩小 (CMD + -或使用触控板捏缩放),然后点击CMD + V粘贴三个新画板。为每个页面添加一些生物信息。更新名称和爆头图像,并在画布上排列画板。凉!我们的设计现在已经完成。

19.设置流程

是时候开始定义应用程序的流程了。一个原型可以值一千个会议,所以我们将创建一个来传达我们的设计意图。只需跳转到原型模式(左上角),选择将被用户点击的项目(按住CMD直接选择),并将电线拖到右画板。释放鼠标时,我们可以设置segue,easing和duration。简单。

20.连接起来

将列表中的每个项目连接到相应的详细信息页面

让我们浏览Artboard 1上列表中的每个项目,并将它们连接到各自的详细信息页面。对于其中的每一个,我们都希望将segue设置为Slide Left,并将缓动设置为Ease out。接下来,我们可以将每个细节页面上的后箭头连接回Artboard 1 - 记住这次将segue设置为Slide Right。繁荣 - 我们的原型准备就绪。

21.测试原型

您的设计的任何更改都将立即反映在预览中

要测试原型,请单击右上角的“播放”按钮(预览)。您无需关闭“预览”窗口即可更新设计或电线。只需开始进行更改,它们就会自动反映在“预览”窗口中。

22.制作视频

在测试原型时,很容易记录您的交互视频。打开“预览”窗口,单击“录制”按钮开始和停止录制。保存“.mov”文件并与利益相关者分享。

23.分享你的工作

在网上分享原型

要在Web上共享原型,请单击右上角的最后一个按钮(在线共享)。单击“创建链接”按钮。所有资产都将上传到Creative Cloud,并会创建一个链接。如果需要更改,您可以返回设计模式,进行更改并再次共享。整个流程才有效。

24.导出文件

您可以将设计导出为不同大小的Web,iOS和Android的PNG,或SVG

从XD,您可以导出不同大小的Web,iOS和Android的PNG,以及高度优化的SVG文件。

25.享受结果

恭喜!您已经掌握了Adobe Experience Design CC(预览版)的基础知识。随意在网络和社交媒体上分享您的原型 - 添加#adobexd所以我们可以看到你的工作。

这篇文章最初出现在网络杂志问题280。在这里订阅网

相关文章



翻译字数超限