当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （7） 动效 > 动效设计概述
先来看一小段动效演示
这个动态显示了
在点击导航标签时发生了什么
再来看一下第二小段的动效演示
这个动态
提供了对用户的点击操作
更加明显的反馈
再看一下第三个动效
比较看看哪个更好
我认为第三个动效
在三个标签之间
建立了某种关系
让人们在切换不同标签的时候
可以有预期的
感知到这种关系的存在
第二个动效呢
仅仅展示出了
标签和点击之间的关系
没有显示出这三个标签之间的联系
第一个呢是没有动效的情况
点击的结果呢显得比较突然
那通过以上简单的例子
我想说界面中的动效
不是可有可无的
它对提高界面的沟通效率
很有效果
是提高界面应用性
和用户体验的重要因素
动效的作用可以总结为这六点
下面分别举例
首先呢是控件反馈
控件呢
是指界面上具有交互性的元素
比如说
导航标签 按钮 滚动滑块等等
使用鼠标键盘的情况下
控件通过明暗 大小或者位置的变化
来对用户的操作行为
进行适当的反馈
这样呢
用户就能够通过这些反馈
了解到自己的操作是否正确
这个动态设计
交代了用户点击提交按钮后的结果
这个按钮显示了两种不同的功能状态
默认为菜单
点击后变为取消
通过翻转动画
暗示了用户的点击动作
和结果的关系
手机界面的这个动效设计
把点击增加按钮后出现的选项
进行了呈现
这三个从大按钮中冒出来的动画效果
很好地表达了
这三个小按钮和大按钮以及用户的点击
这三者之间的关系
我们再来说一下动效的第二个作用
状态表达
第二种情况
是用动效表示系统的不同状态
比如Loading这个动画的显示
它提示用户呢
系统正在处理用户的请求
这样呢
就能减轻用户等待时的焦虑感
比如这个界面
他在播放音乐的时候
出现动画
显示出正在播放的状态
点击停止的时候动画停止
显示状态发生了改变
在这个案例中
按钮有两种不同状态
每次点击
会在两个不同状态之间进行切换
第三 情景表达
动效的第三个用途是情境表达
它的作用
是交代用户操作和内容之间的前后关系
比如这个例子
它通过动画告诉用户
点击标签后出现的内容
是从顶部翻转下来的
让用户产生了明确的操作预期
那再次点击
这个内容又反方向翻转回去
这就符合了用户的预期
这个导航内容在空间上
和现有内容之间产生了明确的关系
用动画清晰地表达了这个关系
内容切换
在不同内容之间进行变化的时候
使用动画呈现内容之间的上下级关系
可以增加用户对内容的理解
比如说这个例子
点击增加音乐按钮以后
现有的页面全部向上移动
屏幕顶端只留下了紫色的按钮
音乐列表紧随其后
这个动态
向用户明确表达了
音乐列表和初始页面之间的关系
向下浏览列表时
为了让出更多的屏幕
紫色按钮向上移出了屏幕
留下了一个紫色的色带
向上滑动时
按钮又向下划出
这样的动画
让用户在浏览当前内容的时候
能够理解它和初始内容之间
有什么关系
添加音乐以后的动效
也很恰当地表达出了系统的状态
这个设计给用户的暗示是
前后内容的关系
是在一个上下可以延伸的空间当中
通过上下滑动
就可以在这两个内容之间进行切换
应该注意的是
作者的这个设定要保持前后一致
这样才能符合用户的认知逻辑
才能把这个关系成功地表达出来
再讲一下情感表达
动效除了前面所说的功能化表达以外呢
还有增加界面趣味性的表达效果
比如说这个例子
或这个例子
他用投篮的动画
来显示用户点击play之后的系统状态
在触屏设备上
可以通过向下拖拽的交互方式
来加载更多的信息
这个界面再向下拖拽时
出现的加载动效
给用户的操作增加了弹力的维度
显得生动有趣
在这个机器人界面的例子里
这种简单抽象的动效
配合机器动作
十分生动的让机器呈现出拟人化的情感特征
不失为一个非常优秀的设计
最后讲一下引导性
通过动画可以引导用户进行相关的操作
比如说这个例子
首页就是通过动画
引导用户进行下一步的操作
下面简单讲一下动效制作的这三个要点
首先动向的设计要符合发布平台的特点
和平台的相关要求
比如触摸屏的动效设计
需求和台式机就不一样
微软surface
兼容了触屏操作和键盘鼠标
苹果电脑自带的触控板
基本替代了鼠标操作
这两个电脑也是具有触控操作特点的
那移动设备呢
还有晃动手机
旋转手机方向等等
这样的一些操作
那这些操作
台式设备是没有的
另外不同的平台
有不同的设计规范
动效设计要符合该平台通用的规范
当然各个平台的设计规范
在网上都是可以找到的
我们再来谈谈第二个要点
前后一致
符合用户的认知欲期
比如这个例子
我认为这个案例的动效设计呢
是有点问题的
我们看动画显示
第一集内容的蓝色标签点击以后
标签会向下展开
二级内容会从右侧滑入
用户通过左右滑动可以进行选择
选中的内容会展开
叠加到现有内容上
并且逐渐充满屏幕
这部分的动效设计很好
对这几个内容的层级关系
交代得很清楚
这部分没有问题
但退出选中的内容时
展开的内容会朝向屏幕底部方向划出
回到原始界面
这一步就和开始交代的关系产生了矛盾
不符合预设的关系
这样容易让人产生迷惑
不知道这一点
大家有没有注意到
第三个要点
生动自然
符合运动规律
好的动效
能准确传递信息
同时呢给人舒适自然的感受
比如这个例子中
圆中心的图标并不是匀速弹出的
弹出以后还会抖动一下
这种处理呢
都可以使动效显得生动自然
这个例子中
简单的滑动也不是匀速的
而是添加了缓动效果
这也是一个添加了缓动效果的例子
这样做出来的动效更生动
后面会有一个小课程
教大家制作一个具有缓动效果的动效
制作动效需要学习一些制作工具
简单的动效可以用Keynote
或Power Point制作
复杂一些的动效可以用AE制作
如果希望制作出具有交互性的动效
还需要掌握和学习其他相关的工具
软件工具更新非常快
我在这里的推荐仅供参考
网络也有很多学习动效制作的资源
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
