Adobe Xd教你轻松做原型图文教程（3）

软件安装与交流QQ群：522097667

前两节课向大家介绍了Adobe Experience Design（Xd）软件的安装、界面、工具，以及如何设计图标与界面。本课程将来讲讲Xd在交互原型上面的一些功能。以实际案例，来详细讲解如何用该软件轻松做原型。为了让大家更好的理解，首先从两个非常简单的界面开始入手。

1、以iPhone 6尺寸大小创建一个文档，然后使用快捷键A，插入一个相同尺寸的画板，界面上有两个iPhone 6尺寸画板了，如下图所示。

2、将第一个画板填充为黄色，第二个画板填充为蓝色，如下图所示。

3、选择Protype板块，任意选中一个画板，可以看到被选中的画板左上角有一个房子的图标，单击该图标，图标变成蓝色，则表示将该画板设置为封面，这个的功能在后文中效果预览和分享中会介绍到。然后在选中画板的右侧有个蓝色小箭头。如下图所示。

4、按住此处的蓝色小箭头，并拖动鼠标，可以看到会产生一条带箭头的曲线，用于连接跳转到的界面，释放鼠标，则会创建两个界面间的连接线，并弹出对话框，如下图所示。

5、对话框可以设置跳转的属性，第一个是Taget，用于设置跳转到的目标图层。第二个是Segue用于设置跳转的方式，如下图所示，可以设置从左滑、右滑、上滑、下滑和溶解效果。第三个是Easing可以设置缓动曲线类型，最后一个是Duration，用于设置跳转时间，根据被人的经验，交互动效的时间一般最长不应超过1秒钟。

6、设置好第一个后，然后选中第二个画板，按住右侧的曲线并拖动到第一个，这样就形成了一个交互的闭环，进行交互设计很重要的一点就是让界面的跳转形成闭环，用户必须可以从任何界面跳转到任意界面并能跳回到任何界面。如下图所示。

设置好界面之间的跳转，一般需要实时进行预览，一方面看看设置的跳转效果和时间是否合理，另外一方面也是为了检查跳转的设置是否已经闭环。Xd提供了非常方便的预览功能，大家可以看到在Xd的共更能选择栏的右侧，有一个播放按钮，单击该按钮即可打开预览界面，如下图所示。

此时我们看到预览打开后默认界面是蓝色画板，如果我们需要将默认界面设置为黄色画板，只需要选中黄色画板，然后单击左上角的房子图标，即可。这也是前面提到的这个图标的功能。如下图所示。

在预览界面可以看到右上角有个Record的按钮，单击该按钮即可录下交互过程，此时Record变成时间，鼠标指针变成触摸样式，要结束录制只需要再次单击右上角，会弹出对话框，选择保存的位置，即可将刚才的操作过程录制为MOV格式视频。如下图所示。

在设计完成后，往往需要将交互原型移交给其他同事，最常见的移交方法是讲Xd文档保存后发给对方，但是这种方法要求对方电脑上也装有Xd软件。除了这种方法，Xd提供了更为便利的方式进行分享。在预览按钮的右侧，可以找到分享的图标，单击该按钮，弹出如下图所示对话框。

可以看到这种方式是上传到网络后生成网址进行分享。其中Tittle处设置改文档的标题，下方的正方形虚线处可以设置一个图像，直接从Finder处拖入图片即可，用于设置头像。然后下方的Start at这里取决于设置的首页的画板名。设置完成后，单击Create Link，即可上传并生成链接，如下图所示。

上传成功后界面上会显示一个网址，将该网址发给同事，同事即可通过该网址查看到原型，并且点击进行交互。因为是上传到互联网，所以对方也无需跟你在同一个局域网内。单击左下角的Copy Link即可对链接进行复制，通过网址访问到的界面如下图所示。

可以看到使用Xd做简单的交互原型是非常方便的，但是目前Xd做复杂的交互动效还有相当大的难度，Xd要真正成为有PS那样影响力的软件还需要走很长的路。在Xd提供的示范文档里，也同样可以看到该文档进行的交互设计指南，大家可以根据上面的指南进行测试。如下图所示，在此不做展开。

关于Xd的急速入门教程就为大家介绍到这里，随着Xd软件后续的升级，本教程可能会同步进行更多更能的介绍，在此感谢大家对本教程的关注。

如果对该软件有更多兴趣的话，大家可以加入QQ群522097667参与讨论，也能看到讲师为该软件录制的更为详细的视频教程。