数字媒体交互设计（中级）—— App产品交互设计方法与案例 第8章 微交互设计.pptxVIP

D;CONTENTS;知识回顾;本章内容;1.微交互的基础知识;触发器

任何微交互的第一步都是触发器，触发器启动微交互。

触发器有两种类型，一种是手动触发器，

由用户手动触发；另一类是系统触发器，由系统自动触发。例如网络断开或者程序错误时，系统会自动提示用户是否重新加载网络或者再次启动程序。

手动触发器由3部分组成，分别是控件、控

件状态、文本或图标。;触发器应当包含如下规则。

触发器必须让用户在使用情境下认出其是触发器。

保证触发器每次的触发动作都相同；使用率比较高的触发器要引人注目。

提前展示数据，反映交互包含的数据，比如下载按钮，当点击下载按钮后，显示下载的进度，让用户有一个心理预期，下载完成后显示下载成功或是下载失败

避免破坏视觉使用情境。如果触发器是按钮，在视觉设计时就应该让它

像按钮一样能按下去。;规则

微交互启动后，会引发一系列行为，这需要一套规则来约束用户进行什么样的操作会获得什么样的反馈。微交互规则决定了微交互的使用方法。

规则包含的内容。

规则包含的内容有：用户单击图标时会发生什么；交互期间用户可以进行什么操作；交互动作发生的顺序和时间；什么时候提供什么反馈；微交互处于什么模式；微交互是否可以重复使用或者多久重复一次；微交互结束时会发生什么。

设计规则的方式。

把能想到的规则先记录下来，整理成大体的框架，再绘制整个交互的流程图，梳理清楚用户操作的整个过程，按照操作的先后顺序在框架中增添操作细节。制定好规则后，最好能给其他人演示一遍，检查微交互的操作是否顺畅，是否需要继续完善等。;循环与模式

启动微交互以后，随着时间的推移，微交互接下来会有什么样的行为，交互状态是需要用户手动关闭才会结束，还是等一会儿自动退出，这就需要给微交互设定持续时间和交互行为模式。例如手机的免打扰模式适合用户在休息时使用，静音模式适合用户在会议时使用。

循环是指不断重复的一段时间，通常用于设定持续时间。循环的核心是计时，即确

定微交互的速度和持续时间。

模式在微交互中很少使用，模式的主要目的是执行???种不常用的动作。常见的模式就是设置，用户可以在设置中指定一些有关微交互的选项，如在设置中是否允许App开启通知。;（2）微交互的作用;2.AdobeXD的使用

（1）AdobeXD的工作界面;菜单栏由文件、编辑、对象、插件、视图、窗口和帮助等命令组成。菜单栏的使用频率比较低，因为工具栏和属性栏基本就能满足所有操作需求。

有设计和原型两种工作模式。App产品的界面设计都是在设计模式下进行的，只有当需要使用交互功能时，才切换到原型模式。在工具栏中，从上至下依次是选择、矩形、椭圆、多边形、直线、钢笔、文本、画板、缩放等工具，利用这几个工具几乎就可以完成界面原型的设计。

“资源列表（存放常用的颜色、字符样式、

常用组件等）、“图层列表”（分图层管理设计元素）和“插件列表”（管理安装的第三方插件）按钮，分别单击这3个按钮，可以展开资源列表、图层列表和插件列表;（2）AdobeXD的基本操作;从Illustrator中导入元素

在Illustrator中绘制的元素，可以直接复制，然后粘贴到AdobeXD

图层的使用

调整图形的叠放顺序有两种方法：1在图形上单击右键，通过选择“置为顶层”“前移一层”“后移

一层”或“置为底层”命令来调整。2在图层列表中通过拖曳图形到所需的排列位置来调整图形的叠放顺序

文本的设置

“文本”工具输入文本，右侧属性栏设置字体和字号

栅格系统和网格系统的使用

在右侧的属性栏中选中“版面”选项，即栅格系统，便于界面布局。移动端界面的栅格系统一般设置为4列或6列，可以在“间隔宽度”数值框中输入数值，调整列与列之间的间隔

在绘制图形或做精细对齐时，可以使用网格系统。选中画板，在右侧的属性栏中选中“方形”选项，

即网格系统，在“方形大小”数值框中输入参数，可以调整网格的大小;制作高保真原型图

制作室外跑功能界面

制作读秒界面

制作跑步界面;3.创建可交互式原型;（2）制作轮播图交互效果;本章小节;课后作业