## ##

Adobe Xd教你轻松做原型图文教程(3)

1 课时 时长:02:29

分享至:
收藏

免费

软件安装与交流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参与讨论,也能看到讲师为该软件录制的更为详细的视频教程。

免费

0人打赏

机构简介

黄方闻

黄方闻

高级交互设计师

sketch设计书作者

高级交互设计师,国内最早的一批Sketch使用者,并致力于最新交互软件的推广与研究。从07年iPhone诞生起便专注与移动交互设计领域的研究,对移动交互设计领域有深刻的思考与独到的见解,倡导设计师的全栈化与工作效率的最大化,并多次翻译并分享国外最前沿设计文档及交互说明。已出版《动静之美——Sketch移动UI与交互动效设计详解》一书。

Adobe全新的桌面端UX原型工具Project Comet,现更名为Experience Design。这是新一代网页与移动应用的UX设计工具。这里集结了Adobe XD的官方手册与系列教程。帮助你快速掌握交互设计新工具。当前Adobe XD仅有英文支持,而且只支持Mac平台。交流分享QQ群:522097667

联系客服

故障反馈