Page 101 - 打通产品与用户需求

第三章 视觉交互设计

APP 中因为找不到关闭按钮而直接点击进入广告页面。
（二）表现层 - 交互动效
动图在界面设计中起到了吸引用户的交互功能，同时还是缓解用户等待时间

的缓冲设计。如微博 APP 下拉的刷新等待画面，是系统式转圈圈的动画效果；
Bilibili 下拉刷新的画面则使用了品牌 IP 形象设计的刷新动效。随着趣味性动效
在本能水平、行为水平和反思水平上情感化地拉近和用户之间的距离，在界面中
植入动效的位置逐渐增加，如图标由静态转变为动态图、提示引导类动效、Gif

格式的 Banner、打开数据类页面时柱状图等的图表动效、数字增多动效等。另一
种场景下的交互时的动效转场类动效，如在淘宝里的购物车中当下拉时会出现搜
索框，在选中的已加入购物车产品处左滑可以出现删除、移入收藏等命令，这类
交互动效为当用户做了事件命令的选择，如拖拽、左滑、长按等命令时产生的动

画方式的设计。在以儿童作为目标用户群体的 APP 中，动效已经贯穿整个用户
流程，如宝宝巴士 APP，开启界面使用的是宝宝巴士的开启动画，从视频类产品
中延续品牌意识，这里不仅有动效还加入了声效。进入界面图标点击时，声效动
效同步；主页卡片类展示图有静态图、动态图，动态图中如芭比公主类加入光效

效果，气氛值拉满。如洪恩拼音的 APP 界面则使用了游戏风格，通过游戏设计、
背景故事线、高度沉浸感视觉及智能化交互等设计，将学习内容融合在游戏中。
玩游戏学知识的游戏类 APP 中的动效必不可少，各种的角色、怪物、兵
器、坐骑、场景等设计和规则、奖励等机制都需要通过交互动效来传达。动效通

过 AE 或 Animation 来制作，分为变换动画、路径动画、蒙版动画、骨骼绑定动
画、效果动画、文字动画等，做完的动画效果可以存成序列动画再进入 PS 导出
GIF，也可以在 AE 安装 Gifgun 插件，直接导出 GIF。但 GIF 文件相对较大，会
导致用户加载页面时间增长。Lottie 是一个用于 Android、iOS、Web、Windows

的动画库，用于解析使用 Bodymovin 导出为 json 文件的 AE 动画。动画是通过
代码实现，并且是矢量的。Lottie 基本适合所有 UI 动图，比如图标动效、加载动效、
插图动效、运营按钮动效等。
（三）前端设计—保持设计走查

前端技术一般分为前端设计及前端开发，iOS 系统使用 Xcode，使用编程语
言 Swift。Android 使用 Android Studio，使用编写语言 Kotlin。为了让前端开发
完成后，看到的产品 Demo 与前期交互原型、视觉效果图、视觉规范一致，一是

93