Adobe XD使用心得及简单使用技巧

关于Adobe XD

Adobe XD，全称Adobe Experience Design。

这是一款集原型、设计和交互于一体的小清新时代风格的设计软件。

虽然传言中，Adobe XD将会是skech的劲敌。然而在windows系统当中，Adobe XD的确是产品原型设计领域最趁手的设计软件。它使用简单，界面整洁，虽然之前博主一直使用的是Axure 8.0，但在博主看来，Adobe XD在界面、素材以及设计操作上的确甩了Axure好几条街，至少它成功的吸引到了我。

使用介绍

点开Adobe XD，一个Material Design风格的弹窗映入眼帘。四个不同尺寸的画框选择很人性化，这让我们不需要像在使用Axure时候手动去调整宽高，或者是导入一个手机外壳素材，让我们在设计原型时与实际尺寸更贴近，也让我们能更加专心于内容与排版的思考。

这里以第一个iphone6/7的底框为例制作一个原型。

相信对于熟悉PhotoShop的同学来说，这个界面以及左侧的工具栏都是非常熟悉的，这里为了方便不熟悉PhotoShop的朋友对Adobe XD的使用，简单介绍一下每个工具的具体用途。

鼠标图案就是鼠标点击的基础功能，用于选中与点击的作用；

绘制方框的工具既是字面的意思，可以绘制方形，这里提一个小细节：按住键盘的ctrl键后，再行拖住鼠标在画框中绘制即可得到一个完美的正方形；

绘制圆形工具与绘制方框工具使用方式类似，按住ctrl同样可以绘制一个完美的圆形；

画线工具可以绘制一根直线，它同样可以使用按住ctrl的方式绘制，绘制出的线会以绘制原点偏转（N*45°）的形式出现，而如果不按住ctrl可以自由绘制；

钢笔工具可以绘制自由曲线的线条甚至组成一个自由度极高的图形，相信对于PhotoShop的大触驾驭起来相当easy，但是对于新手而言还是有一定的难度的，博主也没有熟练掌握，像类似于一些可视化的图表基本上博主基本也都是使用网友大触们做好的素材再行调整的；

文字工具顾名思义，可以在画框中添加文字；

创建画框工具可以在当前的画板中在创建一个新鲜的画框，所谓的画板就是我们ctrl+s保存后生成的xd文件，而每个文件（画板）中理论上可以有无数个画框，然而经博主的Surface Pro 3测试，太多画满原型的画框会导致该画板越来越卡，恩，估计也和我的本子有很大关系；

局部界面放大与缩小工具的使用场景，比如说这个画板中有30多个画框，那么我们想要将其中某一个画框正确的停留在可视界面上且保持最适宜调整的尺寸是相当难的一件事，因为windows版的Adobe XD没有横线滚动条（没有使用过mac版，所以不清楚mac版的现状），那么我们点击一下工具栏上的放大镜按钮并在我们需要调整的画框上逐渐的点击，而这时除了点击和选择适合的尺寸外，你可以提前想好需要做何种调整了，因为接下来你的修改时间即将来临，这里在提一个小细节：因为没有缩放的工具，所以可以使用ctrl+-与局部放大工具组合使用；

项目画框管理工具，假如我们的画框过多的时候就需要一个类似于PhotoShop的图层管理的工具去对它的整体尺寸或是其他进行整体的调整，而项目画框管理工具就类似于这样一个工具。

Adobe XD共分为两大功能部分，Design（界面原型设计）与Prototype（界面关联与交互）两个部分，刚刚说到的工具是属于Design功能的，而Prototype的使用是与Axure完全不同的。

Axure的交互操作也并非不舒服，但是它缺少了更具互动性质的可视化操作。在Adobe XD中，只是将需要交互的两端拉上一条线就可以完成的操作，Axure上却是更多的操作步骤与繁杂的选项按钮。

我属于那种特别偏重于视觉性与操作性的人，所以如果时间允许我基本都是绘制高保真原型的，所以对于Axure本就为了方便使用而产出的事物却没有为我带来应有的便捷，那么我也只好做出了更优的选择。Axure的价值在于它如同“随手涂鸦”般的绘制体验，而这种体验在我看来更适合去绘制简单的或是低保真的线框图，Adobe XD则是一个中等偏高保真级别的原型首选软件。

Adobe XD的弊端一个是windows版还无法汉化，另一个则是一些诸如没有横向滚动条、画框过多卡顿、任务栏划水时间长之后出现的秒退等一些细节的问题，不过这些相对于它给我带来的便捷则是小巫见大巫，毕竟对于一款喜爱的软件，都会希望它变得越来越好，不是么？

下载安装

这里提供Adobe XD和Axure 8.0两个原型设计软件的下载链接，方便朋友们选择最适合自己的：

Adobe XD：https://pan.baidu.com/s/1qYBHP9q

Axure 8.0：https://pan.baidu.com/s/1skQYC7z

相关推荐

Axure中文社区

Adobe XD中文网

想要了解更多，可以关注我的个人博客：http://derien.me