备课笔记-AdobeXD高级应用介绍以及交互制作

编号30-01

【移动APP交互设计开发的制作】

学习任务十、AdobeXD高级应用介绍以及交互制作

一、课程说明与要求

।.课程说明

本阶段课程分为两个部分，第一部分为AdobeXD插件介绍，介绍AdobeXD使用常用插件快速实现元

件制作；第二部分为AdobeXD动效制作，介绍AdobeXD自动制作动画效果：第三部分为adobeXD隐含

快捷操作，介绍AdobeXD中使用的快捷键方式：第四部分为AdobeXD原型交互链接，介绍AdobeXD原

型交互功能的使用；第五部分为AdobeXD设计效果，介绍AdobeXD使用各个功能进行设计效果制作；通

过对AdobeXD工具插件以及交互功能设计效果的介绍，学生可以全面、深入地掌握AdobeXD高效率绘制

元素的技巧和设计交互效果功能时的使用方法。

2.工具材料准备说明

本课的作业作品实践需要同学们提前准备一些工具和材料，教师强供软件下载链接。

工具材料下载链接备注

https：///zh-cn/produc(s/down

AdobeXD每台电脑安装

load/creative-cloud

二、学情分析与课程导入

1.学情分析

AdobeXD是做为Sketch的竞争产品出现的，天然支持Windows平台，对于互联网设计工作者来说

AdobeXD也是一个非常好的选择，想要高效便拢的使用AdobeXD,插件是必不可少的。

本课程为软件高级使用以及交互制作介绍课程。在学习软件使用技巧时，需要学生在学习过程中，结

合实际使用操作进行练习，同时需要多思考如何合理使用插件进行元素制作以及更加有质感，从而熟系插

件的使用方法，以及便捷操作的使用。针对学生目前对AdobeXD工具的使用技巧还不太深入，课程强调

采用引导教学，根据相美功能案例深入讲解，引导学生自我消化使用果作，并熟能生巧，融会员.通。

2.课程导入

我们之前学习了AdobeXD应用基础以及联动与技巧，那么经过软件相关技巧的使用学习，我们对软

件绘制时如何提高效率有了比较深入的理解，可以很方便的使用相关工具操作进行原型界面的搭建，而制

作好页面元素后，想要让原型实现逼真的动效，那么就需要进行交互效果的设计，本节课将通过对AdobeXD

的高级应用以及交互效果进行充分讲解。

三、理论知识讲解

（一）adobeXD插件介绍

AdobeXD是做为Sketch的竞争产品出现的，天然支持Windows平台，对于互联网设计工作者来说

AdobeXD也是一个非常好的选择，想要高效便捷的使用AdobeXD,插件是必不可少的。

使用插件需要创建Adobe账户才可以使用。

首先在帮助中找到账号，没有的可以注册一个账号。

编号30-02

HHJ1D"

咱I经南

卬E!纪宏E

A-MBS、”.■MB

2.Renameit-快速重命名图层

编号30-03

4.ColorBlender-自动生成过渡色

编号30-04

5.Mimic解析网站设计元素

6.ContentGenerator-快速填充文本内容

编号30-05

7.VizzyCharts-快速生成信息图表

编号30-06

（二）AdobeXD功效制作...................................................【重点】

通过自动制作动画功能，可以使用滑动/拖动或涟漪效果轻松创建动画原型，直观地展示内容在画板之

间的移动。

（三）adobeXD隐含快捷操作...................................................【重点】

【思政融入（从AdobeXD高效操作，让学生可以具备专业的技术能力、综合能力、管理能力，培养

学生成为高素质技能型人才，做有价值的新时代大学生。）】

组件类的操作

多个元素同时选择可以设置相同宽度

组件与组件之间可以直接拖入替换

重复网格

隐含的快捷方式

导入Ctrl+Shift+I水平居中Shift+C水平分布Ctrl+Shift+H

锁定/解锁Ctrl+I.右对齐Ctrl+Shifl+—垂直分布Ctrl+Shift+V

重复网格Ctrl+R顶对齐Ctrl+Shift+f加粗Ctrl+B

粘贴外观Ctrl+Alt+V垂直居中Shift+M倾斜Ctrl+I

方对齐Ctrl+Shift+*-

底对齐Ctrl+Shift+1

（四）AdobeXD原型交互链接

【思政融入（从交互链接制作，以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经

验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己

编号30-07

的逻辑、有效完成并且周效使用产品。培养学生熟爱生活、高效便捷服务社会的埋念）】

制作好页面元素后，就可以点击原型按钮，进入原型交互设计页面，如果页面至少需要两个画板，当

页面中只有一个画板的时候呢我们是无法制作交互效果。

链接是创建可交互式原型的基础，在原型模式下，任何一个元素和画板都可以添加链接，设置链接后,

可以在预览时单击进行页面跳转。

在原型模式下点击任何一个元素，在元素的右侧有一个蓝色的小带头，按住箭头拖动到另外一个画板

上，松开鼠标就可以来创建一个能接。创建链接之后就可以在预览中点击这个元素就可以跳转到对应的画

板上。或者点击蓝色箭头，打开交互设置面板，在目标选项中选择对应的画板名称同样可以用来设置交互

的效果，需要给组里面的元素添加链接需要进入组中选中元素给他添加链接，选择画板可以看到当前画板

上创建的所有链接。

在添加跳转链接时，在右侧交互设计面板中，触发默认时点击，先项框可以看到有拖移、时间、按键

和游戏手柄、以及语音。

动作，在xd预览原型界面中根据设置的触发操作不同，而执行的反应效果不同。在交互设置面板中操

作的类型有过渡、自动制作动画、叠加、滚动至、上一个画板、音频播放和语音播放。

首先了解一下逐帧动画。逐帧动画就是在时间轴上每一帧逐帧绘制不同内容使其连续播放而成动画，

在相同时间内帧数越多动画看起来越流畅，当我们在做一个动画效果比如，一个矩形变成圆形的过程如果

不适用自动制作动画效果，那么需要制作很多个画板然后让他顺序切奏达到动画效果。

编号30-08

而使用自动制作动画后可以使用两个画板来做这个动画效果，可以看出使用操作自动制作动画就可以

很流畅的把矩形变成圆形。

操作类型为音频播放时需要选择一个本地的音频然后再预览时点击就会播放一个音频文件，而使用语

音播放时需要我们自定义一段文字内容，之后再预览时即可播放我们设置的语音内容。

♦

■r二

二

谩

三

过渡效果，选择过渡之后交互面板上会有一个保留滚动位置的选项。

交互操作选择叠加，在预览窗口中点击交互元素后他不会进行页面跳转，而是把页面直接登加在这个

原有的页面上，登加操作之后在原页面上会有一个绿色的方框，他是表示追加页面的区域，如果登加画板

区域超出了画板实际尺寸那么就只能显示这一部分的页面，而当叠加的画板尺寸小于画板的区域那么就可

以点击中间的加号进行调整位置，之后再预览时点击交互元素直加的页面就只再绿色方框中显示。

编号30-09

返回上一面板，当有多个界面都能点击跳转到这个界面时，当我冶需要返回时就可以设置操作为上一

个面板。

交互面板操作中的滚动至表示，如果页面超过了正常显示的页面后，之后再预览窗口中点击相应的交

互，就会快速滚动到这个元素的位置。

在交互设置面板中动画分为，无、溶解、左滑右滑上滑下滑以及向左推出、向右推出、向上推出、

和向下推出。

（五）AdobeXD设计效果...................................................【难点】

通过自动制作动画功能，可以使用滑动/拖动或涟漪效果轻松创建动画原型，直观地展示内容在画板之

间的移动。

1.重复网格。

在设计过程中通常需要花贽大量的时间来复制粘贴或者修改同一个列表中相同元素，基于此xd提供了

重复网格功能，我们只需要对列表中的元素我们只需要修改其中一组然后通过重复网格可以快速复制，然

后关联。只需要修改其中的一组，重复网格中的所有元素都会同步，在画板中的元素属性面板中找到重复

网格，之后看到元素右边和下边出现的重复控制按钮，然后根据自己的需要进行垂直或者水平的重复使用，

同时可以更改其中的照片，我们选择重复网格里面的矩形元素，然后在本地找到相应的图片多选之后直接

拖入到元素中即可实现多个图片批量更改。

编号30-10

2.布尔运算是数字符号化的逻辑推演法，包含了联合、相交、相减等、几乎所有的形状化设计软件都

引用了这种逻辑运算;。

adobexd布尔运算工具组包含了添加、减去、交叉、排除重登。通过布尔运算可以使用简单的形状组

合来产生新的形状。它仅适用于多个形状，单独选中某个形状无法使用，当选中多个形状后布尔运算就可

以使用了，下图就是布尔运算效果的一个GIF图，第一个为添加效果，两个图形合成一个图形，第二个

为减去效果，位于上方的图形减去下边的图形剩余的就是运算后的图形，

第三个是交叉效果，即俩个图形重叠的部分就是最后的效果，第科个就是排除重叠后剩余图形就是最

后运第的效果

3.实现左右滑动的效果

要想实现滚动效果需要全部选中需要滚动的元素，然后再右侧属性面板变换中找到设置，水平滚动和

垂直以及水平和垂直同时滚动的按钮，然后再设置需要再滚动过程中展示的区域大小即可实现滚动效果，

以水平效果为例设置图形再水平方向滚动展示的效果。

4.滚动原型，当原型在垂直方向超出了原型的画板的区域那么我们就需要设置原型在垂直方向的滚动

效果，首先需要把顶部和底部的元素如果有不需要跟随鼠标滚动的话需要将元素设置为滚动时固定位置，

并需要把不需要滚动的元素图层放在顶部，以防被其他元素遮挡。

编号31-11

AdobeXD中的蒙版使用方法。

0

轮播图的演示效果。

图片在根据鼠标不停的循环切换图片•，那么接下来制作轮播图效果，首先把需要展示的图片放进画板

因为xd元素在上的会遮挡住下面的元素，为以防在拖拽时造成元素有遮挡而使轮播图无法正常显示的

现象需要我们对三个画板中的图片进行位置调整比如1、2、3。第二个就是2、3、1。同理第三个就是3、

1、2这样设置完成后就可以添加交互事件了。三个画板分别设置这样循环拖移切换的效果，之后即可预览

轮播图效果。

编号30-12

创建新的组件。

在原型设计中某个元素需要多次频繁使用时，可以就在xd左卜.角，创建新的组件。

首先需要选中组件，然后再组件而板中点击加号即可添加，编辑主组件，当我们再画板中需要编辑组

件时如果只要自己部分修改那就直接对画板中的组件进行编辑即可。

而如果需要全部画板中的组件同样修改可以，选中画板中的组件然后右键选择编辑主组件，这样使用

过主组件的地方都会修改与主组件一样的样式，单独修改的则不会改变，不过可以再次右键后将它重置为

主组件的状态。

编号30-13

四、实践技能训练

（一）布置训练任务

任务1：使用插件功能快速制作Adobexd元素。

任务2：使用交互功能进行交互链接练习。

（二）实战项目案例

运用AdobeXD重复网格功能进厅列表功能制作................【重点】

教师重点指导：AdobeXD重复网格使用方式。

使用AdobeXD原型交互链接进行“茶物语”原型交互制作................