2016年03月14日，官方正式发布了这款UX设计新晋工具Adobe Experience Design CC，简称Adobe Xd， 也就是以前的Adobe Project Comet，该软件将UI设计和UX设计合二为一，旨在成为UX设计师的终极解决方案。

此次放出的是Xd的预览版，版本号为0.5，目前只有Mac版本。下面就一步步带大家来看看这款新晋“神器”吧！

软件安装

要安装Adobe Xd，目前唯一的办法是从官网下载安装，因为现在Xd是试用版，所以下载安装和使用都是免费的。若Mac上事先已经安装Adobe Creative Cloud桌面端，可直接跳到第5步。

进入QQ群：522097667，即可获取Adobe Creative Cloud安装文件，请叫我们雷锋。

1、访问官网，确保是Mac系统访问，如下图所示。

2、单击首页右上角的蓝色“Download for Mac”按钮，跳转到一个登录注册界面，在该界面需要回答几个简单的问题，直接下拉选项选择即可，回答完成后单击登录，输入Adobe ID，然后即可下载。如下图所示

3、双击下载到的安装文件，打开后双击“Creative Cloud Installer”，即可自动进行下载安装，注意此处安装的并非Xd软件，而是Adobe Creative Cloud桌面端，Xd需要从该处下载。

4、安装完成后，在顶部菜单栏的右侧，可以看到Creative Cloud图标，单击即可看到Adobe Creative Cloud的主界面，如下图所示。

5、在Apps选项卡中，找到Experience Design CC（Preview），单击右侧的安装按钮，等待片刻即可完成安装。如下图所示。

软件速览

Adobe Experience Design安装完成后，可以在应用程序中找到Xd的图标，单击该图标会打开Mac软件中非常常见的欢迎界面，如下图所示。

大家可以看到该界面分成了四个部分，为了方便说明我用红色的数字进行标注。

界面1，可以快速创建需要设计设备的文档，系统内置了iPhone 6、iPad和1080p的尺寸，大家也可以在第四个Custom Size处自定义设备尺寸。

界面2，可以打开范例文档。

界面3，可以打开各种UIKit，即官方的模板，包括iOS、Material和Windows，这里类似于Sketch的“New from template”，右侧是各种帮助支持的链接。

界面4，显示最近打开的文档，如第一次使用，则里面是空的，单击下面的按钮可以打开Xd文档。

为了方便说明，我们单击界面2，打开范例文档，看到Xd主界面如下图所示。同样为了说明用数字进行标注。

区域1：Xd的菜单栏，包括文档、编辑、项目、视图、窗口和帮助。

区域2：Xd的功能选择栏，前面说到Xd是一个UI、UX合二为一的软件，在这里选择Design时是UI功能，选择Prototype时是UX功能。右侧是画布的缩放比率、UX模拟和分享。其中UX模拟和分享功能非常有用，后续教程会介绍到。

区域3：Xd的工具栏，使用Adobe软件的朋友对这种布局肯定不会陌生，从上往下分别是选择工具（V）、矩形工具（R）、椭圆工具（E）、线条工具（L）、钢笔工具（P）、文本工具（T）和画板工具（A），括号内字母是快捷键，关于工具在后文详细介绍。

区域4：画布区域。

区域5：检查器面板区域。用来设置个图层和画板的属性，从上往下是对齐工具、复制工具和布尔运算工具、位置数值、尺寸数值、填充（描边、阴影）等，该面板根据选择图层的类型不同会有所区别，后文会详细介绍。

当把功能选择栏中选项卡选择为Prototype时界面如下图所示，工具栏中只有选择工具，右侧的检查器面板也隐藏，该界面下大部分操作是在画布区域内完成，现在Xd可以设置的交互效果还非常简单，但是相信以后会越来越完善。

Adobe Experience Design CC的工具和检查器

矩形工具

了解完了整体界面再来看看各工具如何使用。为了方便讲解，新建一个以iPhone 6为默认画板的文档，并使用快捷键R，选择矩形工具。在画板上按下并拖动即可绘制矩形，拖动时按住shift键可以绘制正方形，按住option键可以以中心点开始绘制矩形。绘制完矩形如下图左侧所示。

此时可以看到矩形的四个角内部有四个圆点，用鼠标拖动任意一个圆点可以发现可以设置该矩形的圆角半径，如下图中间图所示。

若在拖动四个角内部的圆点时，同时按住option键，则只会设置拖动的角的圆角半径，其他角不变，如下图右侧图所示。

矩形图层检查器

使用矩形工具绘制完矩形后，可以看到右侧检查器状态如下图所示。

顶部的对齐工具和Sketch相似，不展开介绍。而Repeat Grid是Xd中非常有用的功能，这个在后文实例中向大家介绍，右侧的布尔运算工具和Sketch中相似，在绘制图标时向大家介绍。

下方W表示矩形的宽，H表示矩形的高，X表示矩形所在画板的X轴位置，Y表示矩形所在画板的Y轴位置。最后面上方是角度，0度表示不旋转，可以直接输入数值。下方则是矩形圆角半径，0表示没有圆角半径。

再往下，100%处为矩形的不透明度，0%为完全透明。Border是描边，Fill是填充，Shadow是投影。

在描边等属性的左侧有个眼睛的图标，和其他软件不同，在Xd中需要点亮眼睛图标才表示激活当前设置。单击眼睛右侧的圆圈，则可以设置相关的颜色。最右侧是吸管工具。其中在描边吸管工具的左边的数字表示描边的宽度。投影处X表示投影的X轴，Y表示投影的Y轴，B表示投影的模糊度。如下图右侧所示。

椭圆工具和检查器

使用快捷键E，可以使用椭圆工具，在绘制椭圆时按住键盘上的shift键可以绘制正圆，按住option键可以从中心点开始绘制。椭圆图层的检查器和矩形图层的检查器相似，唯一的区别在于椭圆图层没有圆角半径属性。

直线工具和检查器

使用快捷键L，可以使用线条工具，按住shift键并拖动可以绘制水平、垂直和45度角的线条。在右侧检查器中Border的宽度可以调节绘制的线条的粗细。

钢笔工具和检查器

使用快捷键P，可以使用钢笔工具，钢笔工具的用法和PS相似，在画板上单击创建一个端点，然后再另一头单击即可绘制两点中间的线条。若在末端按住并拖动即可绘制出曲线。单击任意锚点可以调节曲柄，在线条上单击可以在单击处创建一个新的锚点。双击锚点可以转换锚点属性，拖动曲柄时按住option键可只修改一侧锚点，选中锚点后按delete键可以删除锚点。

文本工具和检查器

使用快捷键T，可以创建文本，在画板上单击即可输入文字，输入完文字后在文字之外的任意区域单击即可退出编辑模式。选中文本后右侧的检查器TEXT区域可以设置字体、字号、字重、文本对齐方式和字间距。

椭圆工具和检查器

使用快捷键A，可以新建画板， Xd系统内置了较多的画板预设，直接单击预设名即可在画布上新建画板。需要注意的是，插入完画板后一定记得单击快捷键V，退出新建画板工具，否则在画布上单击会继续创建上一个尺寸的画板。在Xd中，一个画布上可以创建任意数量的画板，且画板的尺寸可以是任意的。如下图所示。

选择工具

使用快捷键V，可以选中选择工具，选择工具的用法和Sketch中相似，在画板上按下并拖动，即可拖出一个选区范围，在该范围内的图层即可被选中。选中某一图层后按下option键并拖动鼠标，即可复制该图层。

画板检查器

使用选择工具对画板名单击，即可选中整个画板，对画板名双击即可对画板重命名。在检查器中WHXY处右侧可以选择画板的方向，默认竖立方向，单击横向图标即可将界面调整为横向状态。

（上）完

教程讲师：黄方闻

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

好了，Adobe Experience Design CC概览就介绍到这里，感兴趣的同学可以先去下载试用，因为现在Xd是试用版，下载安装和使用都是免费的哦！

关注教程请查看底部阅读原文吧！本期下一篇我们将为你带来Adobe XD教学第二篇“Adobe XD快速设计图标和界面”