5.9 备课笔记-AdobeXD应用基础与联动技巧

编号29-01【移动APP交互设计开发的制作】编号29-01学习任务九、AdobeXD应用基础与联动技巧一、课程说明与要求1.课程说明本阶段课程分为两个部分，第一部分为AdobeXD用途与特征，介绍AdobeXD原型工具的优点；第二部分为AdobeXD基础工具与操作，介绍AdobeXD工具栏各个工具的使用操作；第三部分为AdobeXD和AI以及PS的设计联动，介绍AdobeXD与PS以及AI软件之间联动；第四部分为AdobeXD中的设计技巧，介绍AdobeXD元素设置技巧；通过对AdobeXD工具属性以及使用技巧上进行讲解，学生可以全面、深入地掌握AdobeXD工具栏各个工具使用制作元素的操作，以及AdobeXD高效率绘制元素的技巧。2.工具材料准备说明本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。工具材料下载链接备注AdobeXD/zh-cn/products/download/creative-cloud每台电脑安装二、学情分析与课程导入1.学情分析本课程为软件基础工具介绍课程。在学习基础工具与操作时，需要学生在学习过程中，结合实际效果多动手进行操作练习，一定做到由眼入脑，手脑并用，从而熟系设计技巧对工具的实际操作有深刻体会。同时要理解AdobeXD相对于其他原型工具使用的优点。针对学生目前对AdobeXD工具的整体认知不深，实际操作水平不高，但学生对所学AdobeXD新技能感兴趣，有强烈获取知识的动力。2.课程导入我们之前学习了界面设计的辅助工具介绍，今天来学习一款可以和Photoshop软件联动的原型交互工具AdobeXD，大家可能对AdobeXD不是很熟系，AdobeXD与PS、AI、AE等软件均是由Adobe开发的，被标榜为来自未来的设计软件，AdobeXD是一款轻便的矢量+原型绘制软件，集框线图设计、视觉设计、交互设计、原型设计功能为一体，它可以非常便捷地将设计概念转化为可交互原型，并支持Windows10和MacOS平台。本节课将通过对AdobeXD工具栏基础工具进行详细讲解以及对AdobeXD软件文档之间的互通性和设计技巧对AdobeXD高效率制作原型案例进行充分讲解。三、理论知识讲解（一）用途与特征AdobeXD优点在于以下几点：•与其他Adobe产品无缝协作。•一键生成惊艳的动效。•原型的语音控制。•MacOS和Windows的本地应用程序。•与开发人员轻松协作。【思政融入（为达到既定目标所显现出来的资源共享和协同合作的精神，它可以调动团队成员的所有资源与才智，并且会自动地驱除所有不和谐、不公正的现象，同时对表现突出者及时予以奖励，从而使团队协作产生一股强大而持久的力量。）】（二）基础工具与操作………………【重点】1.选择工具“选择”工具是AdobeXD工具栏中的第1个工具，也是绝大多数情况下默认选中的工具，可以通过单击工具栏中的指针图标，或者直接按键盘上的V键激活。激活“选择”工具，用鼠标左键直接在画布上单击任意元素即可选中该元素，可对选中的元素进行拖曳、缩放和旋转等操作。另一种方法是按住键盘上的command键（macOS）或Ctrl键（Windows），然后用鼠标左键单击该图层，即可直接选中。编号29-02编号29-02激活“选择”工具，用鼠标左键直接在画布上单击任意元素即可选中该元素，可对选中的元素进行拖曳、缩放和旋转等操作。选择工具注意事项选择图层组中的图层时需要注意以下两点:第1点：按住键盘上的command键（macOS）或者Ctrl键（Windows）直接选中单个图层是在画布上进行选择，并不是在图层面板中进行选择。第2点：无论是采用双击的方法还是采用按住键盘上command键（macOS）或者Ctrl键（Windows）的方法进入图层组以后，都可以直接单击鼠标左键选择需要的图层。如果需要选中多个图层，可以按住键盘上的Shift键，然后选择需要选中的多个图层。名称选择如果需要选中整个画板，可以直接单击画布上面的画板名称。被选中的画板名称变成蓝色，且画板四周出现选中框。消隐选择如果一个图层既没有填充又没有描边，该图层在画布上是不可见的，此时需要把鼠标移动到该图层所在的位置，当画布上出现该图层的轮廓线时单击鼠标左键，即可选中该图层。编号29-03编号29-032.矩形工具“矩形”工具是AdobeXD工具栏中的第2个工具，可以通过单击工具栏中的矩形工具图标，或者直接按键盘上的R键激活。激活“矩形”工具后，在画板上单击鼠标左键并拖拽，即可绘制一个矩形，按住键盘上的【Shift】键，同时拖拽鼠标即可绘制正方形。圆角矩形绘制矩形后四个角上分别会出现一个圆点符号，可以通过拖拽任意一个角的圆点符号，设置矩形的圆角半径，可以只改变其中一个角的圆角半径，可以按住option键（macOS系统）或者Alt键（Windows系统）并拖拽与该角对应的圆点符号。矩形属性检查器编号29-04编号29-04绘制好矩形后，可以通过属性检查器设置其属性，如图所示。属性检查器通过横线分成4部分。注意：图中的“水平分布对齐”和“垂直分布对齐”的图标是未激活状态，这是因为需要选中3个或3个以上的图层才可以执行分布对齐的操作。如果只选中一个图层，那么该图层对齐的参考为画板本身。3.椭圆工具“椭圆”工具是AdobeXD工具栏中的第3个工具，可以通过直接单击工具栏中的椭圆工具图标，或者直接按键盘上的E键激活。激活“椭圆”工具后，在画布上单击鼠标左键并拖拽鼠标，即可绘制椭圆，按住键盘上的【Shift】键，则可以绘制一个圆。4.多边形工具“多边形”工具是AdobeXD工具栏中的第4个工具，可以通过直接单击工具栏中的多边形工具图标，或者直接按键盘上的Y键激活。激活“多边形”工具后，在画布上单击鼠标左键并拖拽鼠标，即可绘制一个多边形，按住键盘上的【Shift】键，则可绘制一个等边多边形。5.直线工具“直线”工具是AdobeXD工具栏中的第5个工具，可以单击工具栏上的直线工具图标，或者直接按键盘上的L键将其激活。使用“直线”工具绘制直线时。首先在画布上单击鼠标确定直线的起点，然后按住并拖曳鼠标，再在终点处释放鼠标，即可绘制出一条直线如果在绘制直线的同时按住Shift键，则可以以固定的角度绘制直线；如果鼠标从左往右拖曳，则在水平方向绘制；如果是上下拖曳，则绘制出一条垂直线；如果是往左上、右上、左下、右下等方向拖曳，则会以45°角的方向绘制直线编号29-05编号29-056.钢笔工具“钢笔”工具是AdobeXD工具栏中的第6个工具，可以用该工具绘制各种路径。可以单击工具栏上的钢笔工具图标，或者直接按键盘上的P键将其激活。用“钢笔”工具绘制直线路径的方法非常简单。激活“钢笔”工具，在画板上单击鼠标左键，创建一个锚点，然后将鼠标移动到另一个位置并单击鼠标左键，创建另一个锚点，这时两个锚点之间会自动出现一条直线路径.此时可以再移动鼠标添加第3个锚点，则第3个锚点和第2个锚点之间也会出现一条直线路径。或者在起点处单击鼠标左键，然后将鼠标移动至需要的位置，再单击鼠标左键并拖拽，即可绘制两个锚点之间的曲线。锚点：在一个路径上可以添加无数个锚点。如果要结束路径的绘制，可以按下键盘上的Esc键，此时，鼠标便会被释放，并且默认选中第一个锚点，工具会自动变为“选择”工具。如果继续选择“钢笔”工具，然后单击上述路径两端的任意锚点，则可以继续在该路径上绘制线条。如果用“钢笔”工具把两个端点连接起来，形成一个闭合图形后，会自动退出路径的绘制，工具也自动变为“选择”工具曲柄：选择“选择”工具，用鼠标左键双击路径上的锚点，可以把直线路径变为曲线路径，如图所示，路径左右会出现曲柄，拖曳曲柄可以对曲线进行调整。如果再次双击锚点，则会变为直线路径。激活“钢笔”工具后，在起点处单击鼠标左键，然后将鼠标移动至需要的位置，再单击鼠标左键并拖曳，即可绘制两个锚点之间的曲线；如果再次单击鼠标左键时不拖曳，则会绘制出一条直线。编号29-06编号29-067.文本工具“文本”工具是AdobeXD工具栏中的第7个工具，在画板中点击即可创建文本。可以单击工具栏上的文本工具图标，或者直接按键盘上的T键将其激活。选择“文本”工具，默认情况下是单行文本，不会换行。如果想强制换行需要按回车健进行强制换行。创建区域文本需要在选择文本工具后按住鼠标拖动创建一个文本区域框。这时当文本达到了区域框的宽度后会自动换行。按住esc键退出文本编辑。文本“属性”面板8.画板工具单击左侧面板的画板工具，或者单机快捷键A切换到画板工具，可以创建多个画板，同时可以修改画板名称以及尺寸。在画板边缘拖动即可调整画板的尺寸。编号29-07编号29-079.图层面板图层面板可以查看所有的图层面板。点击任意画板中的对象，会显示所选画板中所有元素的图层。图层的显示顺序时从上到下排列的，可以可以通过鼠标拖拽更改元素的图层顺序，以及对图层重命名、显示/隐藏和锁定/解锁等操作。图层操作重命名图层单击鼠标右键，从弹出的下拉列表中选择“复制”选项。显示/隐藏图层将鼠标悬停在图层上，单击鼠标右键，从弹出的下拉列表中选择“显示”或“隐藏”选项。锁定图层将鼠标悬停在图层上，单击鼠标右键，从弹出的下拉列表中选择“锁定”选项。解锁图层继续单击鼠标右键，从弹出的下拉列表中选择“解锁”选项即可。图层锁定后，在画板中执行的所有编辑操作均不会对锁定的图层有影响。导出图层选择图层，然后单击鼠标右键，在弹出的下拉列表中选择“导出所选内容”选项，即可在新显示的对话框中设置导出选项，设置完成后将会导出图层。删除图层右键单击图层并选择“删除”。10.资源面板资源面板可以展示文件中的所有资源。包括颜色，字符样式和组件，在资源面板的各个资源可以在文件各个位置进行使用。大大提高设计效率。点击任意画板中的对象，然后再左侧资源面板中，点击资源分类中的加号按钮，即可把画板中对应的资源属性添加到资源面板中。删除资源需要右键需要删除的资源然后选择删除即可把该资源删除。添加的组件可以在跨画板中，当调整主组件的样式时，也就是任意位置使用的该组件样式也会进行相应修改。编号29-08编号29-08（三）AdobeXD和AI以及PS的设计联动1.软件文档之间的互通性互通、兼容PS和AI两个软件的文档都可以直接通过XD打开（反过来不适用，XD的图层可以复制到两个软件中）。并且图层属性与XD完美兼容。如果你在PS和Ai中已经配置了画板，那么在XD中打开也是不会错乱的。导入文件后我们可以使用XD继续编辑我们的设计稿，包括grid和stack功能等都不会受到影响。具有一定的共性在XD中的图片编辑工作可以切换到PS进行，在设计过程中会用到一些图片素材，为了更好地贴合设计，可以在XD中点击图片选择在PS中对图片进行编辑后保存，并会自动同步到XD中，这类似于PS的智能对象。编号29-09编号29-09字体互通特别是运营类的视觉设计，会用到许多字体设计内容，这些在AI中完成会更加地高效，所以可以在AI中设计完字体，然后直接复制粘贴入XD继续完成设计稿。图标设计SVG图标我们一般使用AI进行绘制，可以在AI中完成图标的制作，然后无缝粘贴到XD文档中。logo设计UI设计过程中，会用到品牌的logo元素，AI对矢量图形的强大灵活编辑可以高效地完成logo设计，可以在AI中设计完logo直接复制粘贴到XD文档中使用。2.软件的独特功能特性：XD在UI设计中的高效率布局小技巧、背景模糊功能以及交互功能XD仍然是UI设计的主体软件，我们要善于利用他的样式、组件和高效布局技巧来提高我们工作效率。毛玻璃效果流行的当下，XD的背景模糊功能快速实现效果。XD的交互演示功能现在也已经十分完善，我们最终可以XD中制作交互稿。3.AI中对矢量图形的灵活编辑和多点渐变XD中对图形的编辑效果是有限的，并且渐变只有线性和径向渐变两种模式，使用AI可以补充在矢量图形设计上的需要。编号29-10编号29-104.PS的笔刷和图像编辑功能在绘制插画过程中，如果添加一些笔刷效果这些可以使用PS进行绘制，PS强大的图像编辑功能也可以为你的设计加持。另外如果你购买了官方的软件产品，可以使用官方的CClibrary，这在几个软件中也是云联动的，可以将设计元素导入到library在各个软件中调用。（四）AdobeXD中的设计技巧………………【重点】【思政融入（设计中基本方法的灵巧运用，提高设计效率，培养学生的创新思维，提高学生的创新能力，弘扬时代精神）】1.技巧一多边形上有个控制点，可以直接调整星形比。当然，多边形上还有另外一组控制点用来调整圆角。组或组件开启边缘填充量后，当内容的宽或高发生变化后，背景会自动适应内容，边缘填充量的值不变。2.技巧二双击区域文本的文本框下方中间的控制点，可以调整区域文本框的高度以适应内容的高度。编号29-11编号29-11使用快捷键Command+D或者Ctrl+D可以快速复制画板。当然也能快速复制任何内容，除画板外快速复制的内容都会在原来的位置叠放。3.技巧三选择任意元素之后，直接按下数字键可以快速调整所选对象的不透明度。，比如按下8键可以调整所选对象的不透明度为80%，快速且连续按下3和5键可以直接设置所选对象的不透明度为35%。属性检查器中能输入数字的地方基本都支持加减乘除数学计算。4.技巧四编号29-12编号29-12设计/原型/共享3个工作区的切换也有快捷键，通过Ctrl+Tab键就能切换。云文档功能即使你不联网也能在本地保存、修改、删除。CreativeCloud在AdobeXD中也能直接调用CreativeCloud库，也就是你在PS/AI/ID等Adobe系列软件中存储在CreativeCloud库中的资源基本都能在AdobeXD中使用，而且在其它软件中修改后，AdobeXD中也能直接同步，除了在菜单中能打开，使用快捷键Command/Ctrl+Shift+L也能打开。触发设置为“点击”时，可以添加2个操作，但是选择第2个的话，必须只能是音频播放或语音播放。编号29-13编号29-13四、实践技能训练（一）布置训练任务任务1：