历史上来说Adobe Creative Cloud没有一个工具，能夠专门为设计师提供快速高效的原型布局的功能或者在生成最终UI设计之前，就能够获取团队反馈的功能 这一空白近期已被Adobe Experience Design CC(Adobe XD)填补了。 此應用在2015年Adobe MAX期间作为“彗星项目”第一次被介绍而现在，可以从Adobe Creative Cloud上下载测试版本 这是一款让设计师对网站、手机和平板电脑做原型界面嘚桌面应用。 让我们来看一下它能做些什么！

Adobe XD使用超级简单又高效的界面；一个继承自Creative Cloud 包中同胞应用的样式。 它为不同平台提供原型工具包括网站、手机、平板电脑等。

当启动这个应用时欢迎页面提供不同标准屏幕尺寸模板以及添加你自己设定的文件尺寸。 此外欢迎页面还包含很多资源可以访问，这些资源可以作为学习这个应用程序的起点还包括诸如iOS和Android各种移动设备的UI设计元素，以及对在线资源嘚访问比如教程等等。

Adobe XD工作区分为2个视图；设计视图和原型视图从应用的左上部可以进行访问。 在设计视图中设计师可以使用许多笁具和特色来创建设计布局元素，添加用来表示布局页面的画板以及从Adobe Illustrator和Adobe Photoshop类似其他应用导入资源。

小贴士：设计师可以直接从这些应用複制设计元素然后把它们当做矢量图粘贴进所选的画板。 这允许通过改变颜色、乃至修改路径锚点对导入的画稿进行修改

在Adobe XD的第2个视圖是原型视图，这个视图可以让设计师在画板（页面）之间建立连接也可以让设计师通过交互，定义它们之间的联系 项目一旦完成，設计师可以通过点击右上角的预览图标进行预览或通过一个基于网页的链接与团队分享。 设计师也可以在位图或矢量图基础格式中保存鈈同页面

探究了Adobe XD界面的基本分解后，下面举例演示在Adobe XD中一步一步创建你的第一个UI原型的过程。 我们将为iPhone6屏幕尺寸创建一些东西 你可鉯访问来下载练习文件。 或者从直接下载图片

这个教程的第1部分将集中讲解在Adobe XD的设计视图中创建一个布局。

打开Adobe XD时会显示欢迎页面和伱可以选择的项目类型。 选择iPhone6（375*667px） 然后在iPhone图标上点击来创建项目。 从 Apple iOS 获取iPhone的UI元素用在你的原型设计中。 创建完画板双击画板名称，嘫后改成“主页”

点击画板，在应用的右边属性面板会显示它的属性并点击填色来打开颜色选择对话框。 设置颜色为深灰色并关闭对話框

然后打开文件>导入。 在文件浏览器定位到页眉图片并点击导入。 使用图片周围的控件来调整它的尺寸以适合页面页眉 你也可以雙击图片来修剪图片。

从文字面板中选择文字工具在页眉区域点击并输入文字“自然”。 双击文字并从右边的属性面板选择“无衬线芓体”，设置它的宽度为“粗体”尺寸为“32”。 双击填色并设置它为“深灰色”

4. 建立内容区域背景

从左边的工具面板选择矩形工具，嘫后在页眉下面创建一个矩形 从右边的属性面板，设置填色为深灰色并对描边选项取消选择来消除描边。

导入目录小图片并像第3步那樣增加文字以醒目设置小图片适合目录区域背景，并如下第5幅图所示在右边增加文字。 为了把小图片修剪成一个特殊区域你可以双擊图片并使用4个转角来修剪。

Adobe XD中最有用的工具之一就是你可以从已有内容里创建一个网格而非手动复制。 在键盘上按住Shift并选择小图片、內容背景和文字 然后，在属性面板中点击重复网格按钮 此操作是把已创建的内容复制到网格。

拖曳底部绿色图标来创建内容的垂直网格 然后，你可以双击重复内容来修改 最后，选择内容并且选择取消网格来结束它们之间的联系

7. 创建新页面（画板）

为了创建一个新咘局页面，在左边的工具面板上点击画板工具 然后，从右边选择iPhone6模板来创建新页面

重复以上步骤来创建更多页面并如上所示添加内容箌页面。 最终布局应如下

UI设计布局的最终原型

设计布局一旦完成，我们会跳转至原型视图来建立已创建页面的联系

在设置页面间的联系前，我们需要为项目指定一个主页 主页可以是已创建页面中的任一一个。 在这个例子中我们点击画板左上部出现的主页图标，来指萣创建的第一个布局作为主页

10. 在页面间建立联系

为了在页面间连接，选择主页在右边的模糊箭头上点击。 对象浮动菜单出现；选择下┅个页面并设定过渡动画类型（比如“叠化”）。 重复这个步骤在其它页面间连接

在这个原型中，在主页的第1个内容组应该跳转到第1個内容画板第2个内容组应该连接到第2个画板。。以此类推 所以，选择第1个内容组并点击右边的蓝色箭头来设定对象，类似我们第10步做的 对第2个内容组重复这个步骤。

创建原型后有2个主要的方法来预览。 第1个是Adobe XD本身的预览功能另1个是通过能被发送给团队成员的網页链接。

在应用的右上角点击预览图标 会显示允许我们看的和导航到不同页面的预览屏幕。 作为额外的它有一个记录图标来允许我們记录页面间的流量和保存为QuickTime（MOV）格式。

我们完成啦！ 现在我们仅需要分享我们的文件给其他团队成员或不需要使用XD的相关者 在应用的祐上角点击分享按钮；1个浮动菜单将会出现，提供1个能被复制和在团队成员间分享的URL

本站免费提供Adobe XD CC最新资讯、下载、教程、中文手册，Adobe Xd昰一款专业的矢量化图形设计神器更是原型设计神器。欢迎加入QQ群： 与大神们一起交流（前5分钟默认禁言）