移动端交互动效设计你怎么看？

Posted 2023-04-17

随着移动设备的不断发展，越来越多的动效运用在APP中，来提升产品的品质。不过对于动效来说，始终是产品体验的一个环节，要符合用户体验的基本要素；不然过度的动效设计，只会让产品看起来很滑稽，甚至会破坏原有的流畅体验。

那么移动端上的交互动效如果设计得当的话，会为我们的产品带来什么好处呢？

1.流畅过渡

如果说界面布局可以组织UI元素的静态位置，那么动效可以组织UI元素在时间维度上的演进。每一个毫秒里界面元素如何出现和消失，它的大小、位置、透明度和颜色如何变化，通过动效的诠释，用户与产品的交互过程会更加顺畅。虾米音乐中使用旋转的唱片来作为场景过渡之间的连接点，契合音乐应用的主题，也是转场过程连贯自然。

2. 高效反馈

作为与用户之间发生联系的一个很重要的交互元素，良好的反馈设计可以让用户更好地了解到操作的结果与程序当前的状态，减轻用户在等待过程中的焦虑。与文字型的静态反馈相比，使用动效可以让反馈高效直观。iosapp store中通过环状的进度圈来表现应用的下载过程，并将其与暂停按钮结合，让用户对进度一目了然，还可以便捷地暂停进程。

3. 增强操纵

“直接操纵”是移动产品用户体验中很重要的一个概念，简单来说，它要求我们的产品与用户交互的方式尽量接近真实世界的互动方式。它要求交互对象的反应行为是可以预测的，不需要任何提示，并且符合我们对于现实世界规律的认知。这就要求我们拉近界面操作与用户的距离，让用户难以发现虚拟的交互对象与现实的操作行为之间的屏障，很多令人新奇和兴奋的设计点都来源于此。通过交互动效对于现实世界的模拟，我们可以显著地增强产品的“直接操纵”特性。以Paper App为例，使用过它的同学都会被它精致的交互动画所吸引。轻轻翻动绘图本，打开一页开始绘画，栩栩如生的体验让你即使初次使用也能很快投入。

4. 帮助引导

由于移动界面的空间非常有限，我们经常要藏起一部分功能，同时手势操作也是移动应用中很常见的交互元素。我们要怎么样让用户发现隐藏的功能，告诉他们怎么使用手势呢？这个时候，动效作为一种生动的表现形式，往往可以起到很好的帮助引导效果。iOS中锁屏界面滑动解锁的提示会显示一种从左到右的渐变效果，用户可以根据这种运动方向去预知手势的方向。在打开read it！的时候，会短暂显示左侧的菜单，然后右边的主内容区域划过来逐渐覆盖，直到左侧只剩下图标作为入口，这帮助用户了解了侧边栏所隐藏的功能。

5. 升华体验

如果你的产品已经拥有了良好的可用性，却缺乏亮点，也许你可以考虑为其增加动效。将动效融入产品之中，往往带来更愉悦地使用体验，也更细腻地表达应用的情绪和气质。具有一致性的标志动效，常常帮助产品在细节中流露出独有的品牌特性，增加产品的魅力值。 参考技术A 随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的射鸡师们也开始投身动效设计领域。

但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。

动效设计就是让用户更加爽更加爽的用你的产品。

具体表现在：

1.表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。

2.与用户手势结合，更自然的动画表现

当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。

3.愉快的提示功能

在某些需要提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。

4.额外增加界面的活力

在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，可以有些物理属性，总之让用户感知到产品的生命力。

总的来说动效还是为用户体验而服务的，动效设计师尤其要注意交互逻辑，才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。最后要提醒的是，千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效。 参考技术B 随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的射鸡师们也开始投身动效设计领域。

但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。

动效设计就是让用户更加爽更加爽的用你的产品。

具体表现在：

1.表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。

2.与用户手势结合，更自然的动画表现

当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。

3.愉快的提示功能

在某些需要提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。

4.额外增加界面的活力

在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，可以有些物理属性，总之让用户感知到产品的生命力。

总的来说动效还是为用户体验而服务的，动效设计师尤其要注意交互逻辑，才能让你的作品看起来不但动效帅气逼人而且真正发挥了实际的作用。最后要提醒的是，千万不要牺牲了用户宝贵的时间用来看你毫无目的的动效。

UI动效设计从入门到项目实战 高清无密 百度云盘

高薪设计师必修课 AE移动UI动效设计从入门到实战

如今诸多企业已经意识到动效在产品用户体验中的重要性，单纯的满足功能性的设计已经out了，动效设计已然成为未来UI设计师必备的能力！本课程采用基础理论与实战案例相结合的教学方式，手把手带你学习炫酷的动效设计！

 

第1章 课程简介

介绍该课程的学习内容，以及课程内的案例效果展示

1-1 课程介绍

第2章 动效基础知识学习

动效基础操作知识点梳理，快速掌握AE面板等基础操作知识要点，了解动效实现基本原理。

2-1 AE软件界面初识

2-2 菜单栏讲解

2-3 工具栏讲解

2-4 合成设置

2-5 项目面板及文件导入

2-6 图层形式及图层相关功能

2-7 关键帧初识及时间线相关操作

2-8 脚本及扩展安装

2-9 父子图层及预合成

2-10 引导页动效

2-11 文件导出及动效包装

第3章 形状图层类动效设计

常见基于形状图层的动效设计表现手法解析，思路梳理，讲解动效设计误区与建议方向，授人以渔

3-1 形状图层基本属性

3-2 修剪路径&描边虚线

3-3 密码解锁与加载动画(1)

3-4 密码解锁与加载动画(2)

3-5 密码解锁与加载动画(3)

3-6 霓虹灯文字综合实例(1)

3-7 霓虹灯文字综合实例(2)

3-8 收缩与膨胀

3-9 中继器与motion脚本的爆炸效果

3-10 日程列表右滑完成(1)

3-11 日程界面右滑完成(2)

3-12 摆动路径与Z字形

第4章 蒙版类动效设计

基于蒙版与遮罩的动效设计表现手法解析，思路梳理，讲解动效设计误区与建议方向

4-1 Mask蒙版

4-2 蒙版结合AI制作剪影类图标动效(1)

4-3 蒙版结合AI制作剪影类图标动效(2)

4-4 轨道遮罩

4-5 扫描界面动效实例(1)

4-6 扫描界面动效实例(2)

4-7 优步LOGO动效设计

第5章 文本类动效设计

基于文本类的动效设计表现手法解析，思路梳理，讲解动效设计误区与建议方向

5-1 文本段落基础知识

5-2 AE内置文本效果

5-3 文本动画制作工具

5-4 添加银行卡界面卡号输入动效

5-5 添加银行卡界面持卡人信息输入效

5-6 登录界面闪屏动效

5-7 登录界面用户名输入动效

5-8 登录界面密码输入及全局调整

5-9 日程界面月份及星期模块动效

5-10 日程界面日历与日程列表动效

第6章 常见AE内置特效学习

玩转AE内置效果，知晓常见特效应用场景，让你的作品更加出类拔萃

6-1 阻塞遮罩工具

6-2 简单阻塞工具制作黏黏球效果

6-3 溶球界面动效实例

6-4 聊天界面动效实例(1)

6-5 聊天界面动效实例(2)

6-6 注册界面卡片翻页动效

6-7 注册界面转场动效

6-8 语音录入界面录Mic钮动效

6-9 语音录入声波线条动效

6-10 语音录入计时数字动效

6-11 天气界面实时天气与插画动效

6-12 天气界面下雨跟闪电动效

6-13 天气界面动效包装

6-14 破碎效果

第7章 AE表达式学习

表达式高级进阶，用表达式取代复杂的关键帧，高效、便捷，解放双手

7-1 表达式基础

7-2 弹性表达式综合实例

7-3 滑块控制与Math.round

7-4 表达式复用

7-5 循环表达式

7-6 差值表达式

第8章 文档书写与动效落地

交接文档梳理，掌握动效设计师跟开发高效沟通技巧

8-1 导出PNG序列图

8-2 动效标注

8-3 Bodymovin与Lottie

第9章 课程总结

回顾课程所讲述的重点内容

9-1 课程总结

 

 

下载地址:  百度网盘