建筑可视化专业 Day-04 UI动效的设计过程和设计原则 建筑动画后期课程 第三天课程内容: 1.AE 动效的设计过程 2.AE 动效的设计原则 一、AE动效的设计过程 分离元素 分析元素 绘制草图 时间分配 特效设计 素材整理 动效原型制作 工程存档 一、AE动效的设计过程 分离元素 将页面中有所元素单独分离开 分析页面中所有的元素的特点,哪些元素需要运动,怎么动,是移动,旋转,缩放,二维的三维的…… 分析元素 一、AE动效的设计过程 绘制草图 将页面中有所元素的运动使用草图绘制出来,在纸上大致模拟出动效的思路 一、AE动效的设计过程 时间分配 先考虑整个动效的时间,再将整个动效的时间分配到每一个需要动作的元素上,计算出每个动态元素所需的时间。 特效设计 依据每个动态元素的动画特点设计元素所需要的动作特效,如动作缓动效果,动作弹性效果等。 素材整理 使用ps或者AI等图形软件制作出页面动效所需要的素材。 一、AE动效的设计过程 动效原型制作 使用AE制作页面UI动效 输出动效,生成GIF或者视频格式的UI动效原型。 工程存档 将制作好的页面动效AE的工程文件打包存档,以备后续使用。 二、AE动效的设计原则 二、AE动效的设计原则--(注重用户体验) 合理运用时间和空间 增强趣味性 缓动效果 动作引导(突出主题) 过渡(跳转)流畅 高效反馈 二、AE动效的设计原则 一.合理运用时间和空间 在页面中运动的元素要有律动感,即不匀速的运动,而且这种不匀速要符合运动规律,先慢再快最后慢 如果同一个页面中有多个元素需要运动,不要一个接一个的运动,要使得多个元素一同错时而有规律的运动,给用户一种应接不暇的视觉冲击力 所有运动的物体在肉眼中都会有运动模糊,所以运动的元素在动作制作完成之后为其添加运动模糊的效果。 二、AE动效的设计原则 二.增强趣味性 在页面动效的设计中要让元素的动画变得更有趣味性,以吸引使用者的使用兴趣 尤其是传统的等待或加载动画人们已经熟悉,会让使用者感觉无聊和乏味,想让人眼前一亮,改头换面是必须的。如谷歌用了自己的颜色,去哪儿用了自己的logo等,这些都是可以在个性化动效的同时凸显产品品牌,不失为一个很好的选择。 二、AE动效的设计原则 适当增加第二动作和预备动作 多看美国动画作品寻找第二动作的灵感,推荐《猫和老鼠》。 在交互动作之前先回弹一下然后再向前运动(运动之前有一个反向的缓冲)的预备动作,预备动作可以使得之后的动作更有速度感和力量感,做到欲扬先抑的效果。 一个动作不舒服可以加一个第二动作,增加动作韵律感,以增强画面可观性,增加动效的趣味。 二.增强趣味性 二、AE动效的设计原则 三.缓动效果 任何一个动作都要运动自然,基本符合现实的运动规律,在自然界中不会有永远匀速的运动,在UI动效设计中也尽量不要出现匀速的运动,任何一个元素的动作要适当增加缓动效果,符合自然运动规律。我们要将运动元素的关键帧设置为缓动关键帧,并且调节参数的曲线。 不同的动效节奏会给用户带来不同的感受,但运动规律应该遵循现实的运动规律和节奏,一般元素的运动需要模拟惯性、重力等节奏。如下曲线中的先快后慢、先慢后快、匀速、自由落体等,基本都有现实的运动事件做参照。 二、AE动效的设计原则 三.缓动效果 3.1 模拟惯性 现实中物体的运动是有惯性的,比如公交车突然刹车时乘客会突然往前一倒。图像在变化(放大、缩小和翻转)的末端都会“超出”一点再立即“反弹”回来,如此的处理方法使得整个动效充满活力,显得生动有趣。 3.2 模拟重力 与惯性一样,重力也是现实中存在的现象,所有物体在无向上的支持力的情况下都会下坠,比如倾倒垃圾。一般app删除卡片的动效就是横向滑动直至消失,但是下面这段动效却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠,就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动效生动有趣的同时也便于用户理解操作含义。 3.3 均匀变速 一个优秀的动效肯定不会是匀速运动的,匀速运动的物体显得生硬和死板,就像机器人一样。要想让一个图像运动的有活力,就需要对其运动的速度进行“设计”。 缓动动效设计时元素的缓动效果要凭感觉 没有具体数值 ----多看参考 二、AE动效的设计原则 四.动作引导 有些用户在第一次使用某款App时,有可能会出现不知如何使用此款App的情况, 况且很多功能的入口可能都是隐藏的,可以利用动效引导用户接着使用此软件。一般有两种方法引导用户使用: 1.尽量想方法突出主题,减少辅助元素的吸引力 ,(如可以夸张放大一个按钮,或者使得一个需 要滑动的元素闪烁),以引导使用者使用产品。 2.在页面上增加手势提示动画,以引导使用者使 用产品。 一般动作引导App用户做出滑动的动作或者点击的动作,例如软件的使用说明。 二、AE动效的设计原则 五.过渡(跳转)流畅 过渡流畅或者说是跳转流畅是我们对于动效的认识里最容易想到也最被认可的一点,通过界面及其元素的出现和消失,以及大小、位置和透明度的变化,使用户和产品的交互过程更流畅。在AppFlow中,页面的滑动、元素的出现整个操作如水般流畅。在动效设计中,我们基本要做到三个不:不卡、不跳、不闪,只有满足三个不,才能带来正向体验,如果卡顿,带来的就是负向的体验。 我们要考量一下实现的程度和范围,在某些设备和方案之间做平衡,作出优秀且被大多数设备流畅运行的动效。 二、AE动效的设计原则 五.过渡(跳转)流畅 常见的四种过渡方式: 1.侧滑 2.上下弹出 3.左右弹出 4.渐变放大 二、AE动效的设计原则 六.高效反馈 高效反馈可以说是移动应用最原始的需求,其通过动效让用户了解程序当前状态,同时对用户操作(平移、放大、缩小、删除)做出及时反馈。譬如说在用户点击下载按钮后,我们需要给用户展示程序当前的状态(未下载-下载中-下载完成),如果我们不把反馈给用户,用户可能就觉得“手机卡死了吗?”,同样的对平移、放大等操作,及时友好的反馈也是必要的。 例如:在一个登陆窗口输错密码或者是用户名时候,点击登陆,画面晃动,如果硬件允许的情况下机体震动…… 二、AE动效的设计原则 原则后序: 任何一个页面或者App中使用到的动效不是应是独一个的,而应该是多个动效共存的。拥有多个动效的页面或者说是App应该整体编排,完美有序,耐人寻味…… 在Altwwdc大会上,著名设计师Ben Johnson说一个好的移动应用应该满足“1个好的欢迎页面+0-2个细节动效+不大于6个说明动效”这样的一个公式。 关于1个好的欢迎页面,好的欢迎页面就像一扇门,可以提高用户的期望值,同时也能塑造用户对于你这个应用的第一感受,试想一下,你看到了一个特别“落魄”的启动画面,你对这个应用还有什么期望吗? 关于0-2个细节动效,如果你的产品有能力也有资源,那最好设计一些令人愉悦的细节动画,他基本可以在用户发现的时候觉得你逼格满满。 关于6个说明性质的动效,包括引导动画,目的都是为了让用户学习如何使用这个应用,但是用户统一时间内学习能力是有限的,就好比说macbook的触摸板首饰动作,一次性丢给你十几个动作学习,你还觉得他特别好用吗?所以这里的临界值大约是6个,如果超过6个,呃,你的应用真难用 第四天课程总结: 1.AE 动效的设计过程 2.AE 动效的设计原则 第五天课程预告: 模拟完成自己喜爱的一款App的动效设计制作 * * * * * *