茂趣有话说：Adobe XD推出后迅速配备教学资源，令人欣喜，特别感谢IXDC的杰出贡献者黄方闻先生。苹果系统的用户已经率先尝试，而微软系统的用户预计今年岁末也能获得使用权限。

首先来看看Xd如何绘制一个图标。

启动Xd程序，进入初始界面，挑选尺寸选项，键入500×500的规格，参照下图示例。

当前Xd的功能尚显粗浅，可用于绘制图标的工具仅限于本教材第一部分提及的几种工具以及布尔运算工具，不过借助这些工具依然能够制作出一些美观的图标，具体效果请参考下图。

在画布上按下快捷键E，调出椭圆工具sketch 图标打组，同时按住shift键，在画板上画出圆形，参照下图的样子。

键盘同时按下功能和D键，完成当前图层的复制，接着按住shift和某个键，鼠标向内拖拽，使复制生成的圆形缩小，调整至符合要求的大小，可以参照下图提供的尺寸数据。

按下P键sketch 图标打组，选用画笔工具，将画笔工具移至小圆底部同水平线，但需位于大圆轮廓上，此时软件会自动生成一条蓝色辅助线，具体位置参考下图。由于截图未能展示鼠标形态，为方便理解，特别添加了指示箭头。

点击鼠标左键，接着在圆形下方位置再点一下，随后移动到右侧那个较大圆形的轮廓线上，当光标与起始锚点处于同一直线上时，系统会自动显示辅助线，继续点击确认，最后在第一个锚点位置完成图形的闭合，这样就能画出一个三角形，具体形状参照下图展示。

当前三角形最下方的那个固定点没有和大圆正对，可以用钢笔工具点选这个固定点，再配合键盘左右键调整它的位置。如果三角形的两边和大圆存在交叉而不是接触，那么应当用上下方向键来移动这个固定点，直到两边和圆面相接。Xd这个软件目前还存在不少缺陷，想要让三角形和大圆完全重合需要花费极大的细心。另外，大家也可以参考右侧检查器里各个固定点的坐标值，通过计算来精确调整位置。具体的计算方法如下：

调整好后效果如下图所示。

按下热键V，运用选取工具框选所有图层，接着把图层的填充色彩调整为红色，参照下图进行操作。

选定大圆与小圆图层，点击右侧检查器里布尔运算选项中的第二个功能——顶层移除功能，参照下图指示。若需调整大小圆的相互位置或小圆的尺寸，再次选用布尔运算工具便可取消运算，随后即可对图层进行修改。

选定圆形和三角形的图层，应用布尔运算中的组合功能将两者整合在一起。大体上，图形的绘制过程到此结束，接下来从美观角度出发，去掉轮廓线，点击旁边的显示标记即可。参照下图展示效果。

TIPS：

绘制图标时未填充颜色，是因为用线条更便于我们准确排列。

想要图标达到最佳对齐效果，最好在绘制时把画布放大，以便观察对齐状况，在苹果电脑上，可以用双指在触控板上进行画布的缩放操作。

Xd现在不能调整线段末端的形态，画出来的线段必须以90度角结束。

Xd目前仅能生成借助布尔运算生成的简易图形，对于结构复杂的图形，建议借助人工智能工具处理，或者先绘制好再导入Xd，具体导入流程将在后续章节说明。

Adobe CC 应用界面的设计

开始设计界面之前，可以点击欢迎页面的UI KITS区域，预览程序自带的各类系统界面，例如下图展示的是iOS的相关界面，这些界面中的所有元素都可以进行修改和复制操作。

Xd目前的构造功能比较有限,不太适合大家完全用它来制作UI界面,关于界面这部分,我仅简单介绍一下Xd里一个相当厉害的网格系统特性。

在引导页面上，选取示范文件，拷贝里面“ - 首页”这行文字，快捷键是C键，接着切换到刚建立的图标文件，按V键完成粘贴操作，具体效果参照下图。

选中那个图层组合,点击检查面板里的网格按钮,发现图层组合的选中形态,已经从原先由八个定位点构成的框,变成了图中展示的模样。

移动白色带圆角的框，就能察觉到它会自动克隆那个图层集合，不仅能够往下挪，还能往右移，参照下图的样子。

当光标移至图层集合的缝隙处缝隙会变为紫红色，点击并拖拽能够改变图层之间的距离，参照下图。

选择一个图层，比如文字图层，然后更改任意一个文字图层的格式，可以注意到，通过这种方式产生的所有图层组中的文字格式都跟着一起改变了，具体效果见图示。

按下Shift键，同时选取图层组内所有图像，接着从中识别出需更换的图片，选中该图片并拖拽至Xd软件中，便能实现批量替换操作，具体效果参照下图展示。

按下A键，创建一个新画布，接着按E键，画出一个圆形，参照下图。

在众多文件里搜寻图像文档，将其拽入圆形轮廓内，便会看到该圆形立即采用此图像来装饰，具体情况参照下图展示。

按下R键，选用方形画具，画出正方形，涂上浅金，接着把一张照片拉进来，参照图示进行操作。

选定那两个图层，接着按住加号和Shift键再按M键，或者点击顶部菜单栏的蒙版选项，选择锐利蒙版功能，就能把这个正方形变成剪贴蒙版，具体效果参照下图。

在这个蒙版图层上单击两次，就能切换到可编辑状态，此时可以自由改变图层的形状大小以及摆放位置，设置好之后，将鼠标移动到界面任意空白处即可结束编辑，具体效果参照下图展示。

按下T键键入任何字符，接着按下加号八号键，或者点击菜单项-Path- to Path，就能把文字变成轮廓形状，参照下图展示的效果。

TIPS：

现阶段Xd的用途相当狭窄，当前看来可以把它看作是草图绘制工具，但若论及界面设计软件，则尚有较大差距。不过可以预见，随着时间发展，Xd的功能必将不断扩充，未来或许会拥有极为出色的设计能力。

现阶段界面的设计还是建议大家使用或PS等其他软件完成。

如有侵权请联系删除！