29第五章9AdobeXD应用基础与联动技巧

adobeXD应用基础数字媒体交互设计天津电子信息职业技术学院联动技巧与知识要点用途与特征基础工具与操作AdobeXD和AI以及PS的设计联动AdobeXD中的设计技巧用途与特征重点掌握：第一部分次要掌握：√简介adobeXDAdobeXD是一款轻便的矢量+原型绘制软件，集框线图设计、视觉设计、交互设计、原型设计功能为一体，它可以非常便捷地将设计概念转化为可交互原型，并支持Windows10和MacOS平台。作为主打交互的AdobeXD，其本身的硬实力确实不容小视，还在于以下几点：•与其他Adobe产品无缝协作。•一键生成惊艳的动效。•原型的语音控制。•MacOS和Windows的本地应用程序。•与开发人员轻松协作。基础工具与操作重点掌握：√第二部分次要掌握：选择工具选择另一种方法“选择”工具是AdobeXD工具栏中的第1个工具，也是绝大多数情况下默认选中的工具，可以通过单击工具栏中的指针图标，或者直接按键盘上的V键激活。激活“选择”工具，用鼠标左键直接在画布上单击任意元素即可选中该元素，可对选中的元素进行拖曳、缩放和旋转等操作，如图所示。另一种方法是按住键盘上的command键（macOS）或Ctrl键（Windows），然后用鼠标左键单击该图层，即可直接选中，如图所示。选择工具注意事项选择图层组中的图层时需要注意以下两点:第1点：按住键盘上的command键（macOS）或者Ctrl键（Windows）直接选中单个图层是在画布上进行选择，并不是在图层面板中进行选择。第2点：无论是采用双击的方法还是采用按住键盘上command键（macOS）或者Ctrl键（Windows）的方法进入图层组以后，都可以直接单击鼠标左键选择需要的图层。补充如果需要选中多个图层，可以按住键盘上的Shift键，然后选择需要选中的多个图层，如图所示。选择工具注意事项名称选择如果需要选中整个画板，可以直接单击画布上面的画板名称，如图所示。被选中的画板名称变成蓝色，且画板四周出现选中框。消隐选择如果一个图层既没有填充又没有描边，该图层在画布上是不可见的，此时需要把鼠标移动到该图层所在的位置，当画布上出现该图层的轮廓线时单击鼠标左键，即可选中该图层，如图所示。选择工具快捷键矩形工具工具的位置“矩形”工具是AdobeXD工具栏中的第2个工具，可以通过单击工具栏中的矩形工具图标，或者直接按键盘上的R键激活。激活“矩形”工具后，在画板上单击鼠标左键并拖曳，即可绘制一个矩形，如图所示。因为在AdobeXD中默认的填充色为纯白色，所以大家在画板上看到的是一个白色矩形，而非只是一个轮廓。补充激活“矩形”工具后，按住键盘上的Shift键，同时拖曳鼠标即可绘制正方形，如图所示。圆角矩形工具的位置绘制矩形后四个角上分别会出现一个圆点符号，可以通过拖曳任意一个角的圆点符号，设置矩形的圆角半径，如图所示补充如果只想改变其中一个角的圆角半径，可以按住option键（macOS系统）或者Alt键（Windows系统）并拖曳与该角对应的圆点符号。矩形图层的属性检查器工具的位置该部分能设置图层的对齐属性，从左到右一共有8种对齐方式，分别是“顶对齐”“居中对齐（垂直）”“底对齐”“水平分布对齐”“左对齐”“居中对齐（水平）”“右对齐”和“垂直分布对齐”，如图所示。！注意，图中的“水平分布对齐”和“垂直分布对齐”的图标是未激活状态，这是因为需要选中3个或3个以上的图层才可以执行分布对齐的操作。如果只选中一个图层，那么该图层对齐的参考为画板本身。补充绘制好矩形后，可以通过属性检查器设置其属性，如图所示。属性检查器通过横线分成4部分。椭圆工具椭圆“椭圆”工具是AdobeXD工具栏中的第3个工具，可以通过直接单击工具栏中的椭圆工具图标，或者直接按键盘上的E键激活。“椭圆”工具是AdobeXD中的第2种绘图工具，用于绘制圆形。激活“椭圆”工具后，在画布上单击鼠标左键并拖曳鼠标，即可绘制椭圆，如图所示。如果在绘制椭圆之前，按住键盘上的Shift键，则可以绘制一个圆。绘制完椭圆后，可以在右侧的属性检查器中设置椭圆的属性，因椭圆图层的属性检查器与矩形图层的属性检查器完全相同，所以在此不作重复说明。直线工具直线“直线”工具是AdobeXD工具栏中的第4个工具，可以用来绘制直线。要使用该工具，只需单击工具栏上的直线工具图标，或者直接按键盘上的L键将其激活。使用“直线”工具绘制直线时，首先在画布上单击鼠标确定直线的起点，然后按住并拖曳鼠标，再在终点处释放鼠标，即可绘制出一条直线如果在绘制直线的同时按住Shift键，则可以以固定的角度绘制直线；如果鼠标从左往右拖曳，则在水平方向绘制；如果是上下拖曳，则绘制出一条垂直线；如果是往左上、右上、左下、右下等方向拖曳，则会以45°角的方向绘制直线钢笔工具工具位置“钢笔”工具是AdobeXD工具栏中的第5个工具，可以用该工具绘制各种路径。要使用该工具，只需单击工具栏上的钢笔工具图标，或者直接按键盘上的P键将其激活。用“钢笔”工具绘制直线路径的方法非常简单。首先激活“钢笔”工具，在画板上单击鼠标左键，创建一个锚点，然后将鼠标移动到另一个位置并单击鼠标左键，创建另一个锚点，这时两个锚点之间会自动出现一条直线路径。此时可以再移动鼠标添加第3个锚点，则第3个锚点和第2个锚点之间也会出现一条直线路径，如图所示。钢笔工具锚点在一个路径上可以添加无数个锚点。如果要结束路径的绘制，可以按下键盘上的Esc键，此时，鼠标便会被释放，并且默认选中第一个锚点，工具会自动变为“选择”工具，如图所示。补充如果继续选择“钢笔”工具，然后单击上述路径两端的任意锚点，则可以继续在该路径上绘制线条。如果用“钢笔”工具把两个端点连接起来，形成一个闭合图形后，会自动退出路径的绘制，工具也自动变为“选择”工具钢笔工具曲柄选择“选择”工具，用鼠标左键双击路径上的锚点，可以把直线路径变为曲线路径，如图所示，路径左右会出现曲柄，拖曳曲柄可以对曲线进行调整。如果再次双击锚点，则会变为直线路径。补充激活“钢笔”工具后，在起点处单击鼠标左键，然后将鼠标移动至需要的位置，再单击鼠标左键并拖曳，即可绘制两个锚点之间的曲线；如果再次单击鼠标左键时不拖曳，则会绘制出一条直线。文本工具文本选择“文本”工具，再画板中点击即可创建文本，默认情况下是单行文本，不会换行。如果想强制换行需要按回车健进行强制换行。补充创建区域文本需要再选择文本工具后按住鼠标拖动创建一个文本区域框，这时当文本达到了区域框的宽度后会自动换行。按住esc键退出文本编辑。画板工具画板工具在新建页面中可以创建包含一个画板的xd文件，进入xd项目之后单击左侧面板的画板工具，或者单机快捷键A切换到画板工具，补充可以创建多个画板，同时可以修改画板名称以及尺寸。在画板边缘拖动即可调整画板的尺寸。图层面板图层面板单机左下角的图层按钮，可以查看所有的图层面板。补充点击任意画板中的对象，会显示所选画板中所有元素的图层。图层的显示顺序时从上到下排列的，可以通过鼠标拖拽更改元素的图层顺序。资源面板资源面板单机左下角的库，可以展示文件中的所有资源。包括颜色，字符样式和组件，在资源面板的各个资源可以在文件各个位置进行使用。大大提高设计效率。补充点击任意画板中的对象，然后再左侧资源面板中，点击资源分类中的加号按钮，即可把画板中对应的资源属性添加到资源面板中。删除资源需要右键需要删除的资源然后选择删除即可把该资源删除。AdobeXD和AI以及PS的设计联动重点掌握：√第三部分次要掌握：

…………软件文档之间的互通性互通、兼容

PS和AI两个软件的文档都可以直接通过XD打开（反过来不适用，XD的图层可以复制到两个软件中）。并且图层属性与XD完美兼容。如果你在PS和Ai中已经配置了画板，那么在XD中打开也是不会错乱的。

软件文档之间的互通性具有一定的共性在XD中的图片编辑工作可以切换到PS进行在设计过程中我们会用到一些图片素材，为了更好地贴合设计，我们可以在XD中点击图片选择在PS中对图片进行编辑后保存其结果会自动同步到XD中，这类似于PS的智能对象

字体与图标字体互通图标设计logo设计特别是运营类的视觉设计，我们会用到许多字体设计内容，这些在AI中完成会更加地高效，所以我们可以在AI中设计完字体，然后直接复制粘贴入XD继续完成设计稿。SVG图标我们一般使用AI进行绘制，我们可以在AI中完成图标的制作，然后无缝粘贴到XD文档中。UI设计过程中，会用到品牌的logo元素，AI对矢量图形的强大灵活编辑可以高效地完成logo设计，我们可以在AI中设计完logo直接复制粘贴到XD文档中使用。独特功能特性软件的独特功能特性XD在UI设计中的高效率布局小技巧、背景模糊功能以及交互功能XD仍然是UI设计的主体软件，我们要善于利用他的样式、组件和高效布局技巧来提高我们工作效率。毛玻璃效果流行的当下，XD的背景模糊功能快速实现效果。XD的交互演示功能现在也已经十分完善，我们最终可以XD中制作交互稿。AI中对矢量图形的灵活编辑和多点渐变XD中对图形的编辑效果是有限的，并且渐变只有线性和径向渐变两种模式，使用AI可以补充在矢量图形设计上的需要。PS的笔刷和图像编辑功能我们在绘制插画过程中，如果添加一些笔刷效果这些可以使用PS进行绘制，PS强大的图像编辑功能也可以为你的设计加持。另外如果你购买了官方的软件产品，可以使用官方的CClibrary，这在几个软件中也是云联动的，可以将设计元素导入到library在各个软件中调用。AdobeXD中的设计技巧重点掌握：√第四部分次要掌握：…………技巧一多边形上有个控制点，可以直接调整星形比。当然，多边形上还有另外一组控制点用来调整圆角。组或组件开启边缘填充量后，当内容的宽或高发生变化后，背景会自动适应内容，边缘填充量的值不变。…………技巧二双击区域文本的文本框下方中间的控制点，可以调整区域文本框的高度以适应内容的高度。使用快捷键Command+D或者Ctrl+D可以快速复制画板。当然也能快速复制任何内容，除画板外快速复制的内容都会在原来的位置叠放。…………技巧三选择任意元素之后，直接按下数字键可以快速调整所选对象的不透明度，比如按下8键可以调整所选对象的不透明度为80%，快速且连续按下3和5键可以直接设置所选对象的不透明度为35%。属性检查器中能输入数字的地方基本都支持加减乘除数学计算。…………技巧四设计/原型/共享3个工作区的切换也有快捷键，通过Ctrl+Tab键就能切换。云文档功能即使你不联网也能在本地保存、修改、删除。本课内容结束

祝学习顺利天津电子信息职业技术学院调用库CreativeCloud在AdobeXD中也能直接调用CreativeCloud库，也就是你在