如何使用Adobe XD原型移动应用程序

本教程向您展示了如何在Adobe XD中制作移动应用程序原型，并使用Adobe XD CC (2017 beta版)在2016年。的新发布的Adobe XD CC做了一些调整，让它更容易使用。

在这里获得Adobe Creative Cloud 15%的折扣

如果你是一名为手机应用或网站创造用户体验的设计师，你可能习惯于使用多种工具来完成不同的任务原型设计。

你从研究开始。然后你在笔和纸上绘制想法，后来将你的想法转移到设计工具。要提出最佳流程，请导出所有资产并将其带入另一个构建原型的工具。从那里，您分享或测试您的原型，收集反馈，并返回周期中间，以迭代，从工具切换到工具，然后优化您的设计。

有几种设计工具分别处理问题的不同部分。但这并不能让你作为设计师的生活更轻松，相反，在所有这些工具之间切换只会降低你的节奏。

如果有一个工具意味着您可以享受完全连接的工作流程？您可以在几分钟内设计和原型的体验，在网上分享它们以捕获反馈，然后轻松地进行编辑而不打破您的步幅？与Adobe体验设计CC的目标 - 或者，正如我们所说，Adobe XD - 就是这样做。

在本教程中，我们将通过设计、原型化和分享一个简单的“meet the team”移动应用程序向您展示Adobe XD的主要领域。

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

观看上面的视频并按照下面编写的步骤学习如何使用Adobe XD原型。我们不仅会告诉你如何制作它，我们还会告诉你如何测试它，录制它的预览视频，以及如何分享和导出它。

请注意，在新版本的Adobe XD中，有些过程可能略有变化。

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

首先，确保Adobe XD是安装在您的计算机上。启动它，看看欢迎屏幕，然后用iPhone画板模板开始一个新的设计。

02.创建第二个画板

使用艺术板工具（一个)创建第二个画板，然后将标题(通过双击)更改为“iPhone - Team Page”和“iPhone - Detail Page”。使用右边的属性检查器将两个画板的背景色都更改为黑色。使用选择工具(V)选中后，您可以在任何时候按空格键来平移您的设计。

03.下载教程资产

我已经把我将在整个教程中使用的资产文件夹放在一起。你可以下载这里。从Finder，将“iPhone-status-bar.svg”拖动到画板1的顶部（X: 8 y: 5)。然后复制并粘贴到画板2，所以两个画板都有状态栏在顶部。打击CMD + L.锁定两个画板中的状态栏，使其属性不能被修改。要解锁它们，你可以再次使用快捷方式或点击“锁定”图标。

04.绘制矩形并设置尺寸

让我们着眼于美术板1(团队页面)。使用矩形工具(R)，在画板1中绘制一个粉色矩形(#FF2BC2，没有边框)，使用右边的属性检查面板设置其尺寸为375 x 230。

05.重新排序的对象

要转动边框或填写，请单击右侧的“眼睛”图标。打击shift + cmd + [把它送到最后面，或者去对象>安排>发送回。如果要使用十六进制值更改颜色，请单击颜色图标，然后弹出本机拾音器时，选择顶部的第二个选项卡，然后将下拉列表更改为“RGB滑块”。

06.创建一个标题

使用文字工具(T)，单击以创建球队页面的标题。我的字体是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.创造一个变暗的效果

让我们跳转到画板2(细节页面)。同样，我们将从一个占位符矩形(375 x 444, x: 0, y: 0， #FFFFFF，没有边界)开始，然后拖动一个头像来填充它。我们将通过改变图像的不透明度为60%并将其发送到背面(shift + cmd + [)。

14.添加另一个箭头

然后锁定爆头道具(CMD + L.)，并添加另一个箭头('back-arrow.svg')来指示用户可以返回到团队列表。这个应该在x: 20 y: 40处。首先锁定图像是很重要的，因为否则SVG将替换头像。

15.添加联系人信息栏

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

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

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

17.创建名称和生物框

要完成设计，请创建一个白色框（360 x 214，x：8，y：445），包括团队成员的名称和生物。首先使用占位符“人称名称”添加文本元素。对于保存BIOG的文本元素，我们要使用区域文本。要执行此操作，请选择文本工具（T)，然后单击并拖动以定义副本的区域。再次，键入一些占位符文本，并调整其样式属性。

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

现在让我们为其他团队成员制作一些新的画板。首先解锁主图像(CMD + L.)，然后点击画板2的标题选择它，并点击CMD + C.复制它。缩小（CMD + -或使用触控板捏到缩放），然后点击CMD + V.粘贴三个新的画板。添加一些个人信息到每个页面。更新名字和头像，并在画布上安排画板。太酷了!我们的设计已经完成了。