当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （7） 动效 > 动效小制作1
Hello
大家好
这是主要就是由我来给大家讲一下
动效设计的部分
动效简称为Motion Graphic
也就是MG
它指的就是一个
动态的图片化表达的意思
首先为什么要做动效呢
其实动向就是更加生动地去表达
更加生动的一种视觉传达
它在页面中的作用呢
主要就是加强体验的舒适度
增加惊喜感
以及减弱不可避免的不适感
加强体验舒适度就是指
我们界面就是一个信息表达的工具
然后这么多信息表达中
假如我们想要着重突出一部分
靠设计是一种方式
但是可能会比较有难度
然后通过动效呢
我们就能够更加方便地突出
我们所想要着重表达的信息
也可以增加用户的认知负担
减少认知的负担
减少用户的认知负担
其次就是增加惊喜感
增加惊喜感就是指
我们能够用动效
来达到超出用户预期的一些效果
就好比这个输入密码的部分
它上面是用一个小猫头鹰
当你的鼠标点到这个Password的时候
然后小猫头鹰就会用双手遮住它的眼睛
以此来达到给用户一种
自己隐私被保护的感觉
然后其次就是一个
减弱不可避免的不适感
我们在使用界面过程中
难免会遇到网络不畅
出现404的页面
以及加载等待的页面
这个时候都会为我们带来非常反感的等待
等待的一种感受
假如通过等待的时间
我们通过动效来让它更加生动和有趣
这个时候就会减弱用户对这个
等待加载页面的不适感
然后其实我们就来谈一谈
动态的视觉化表现
作为新手
我觉得入门的话可能
就是可以先不要直接就从界面上入手
我们可以先
更加去接接触一下这个动态的
动效化设计的其他领域
就包括这些
非常有意思的仿真
仿真动效
小球下落
小球下落啊什么什么的
数字弹跳
以及这些非常酷炫的3D动效效果
这样能够增加
我们初学者对动效设计的一些兴趣
然后其次就是
动效设计现在在互联网时代
都是非常一种主流的表达方式
包括谷歌2017年刚推出的02:47 Material Design
都暗示着动效设计
在未来将具有非常大的发展前景
然后接下来我们着重讲一下
讲一下动效在UI设计中的实际应用部分
首先在我们视野中呢
就是一个APP的一个引导页的部分
通常的引导页可能就是插画配文字
然后这个时候呢
可能我们就是选择用手翻过去
而不会再仔细的去阅读里面的部分
但是通过动效呢
我们能够更加生动地去表达我们的信息
这样就能够减少用户的认知负担
让他更容易地去理解
我们这个APP的主要功能
然后其次就是一个网页中的应用
网页中
当我们就是拉着旁边的进度条
往上一拉也许就这么完了
但是一旦我们拉一部分
它就会出现一个动效
这时候就会吸引我们用户的注意力
然后让我们停留在这个页面上
为他更加关注它的一些信息部分
就像我前些日子不久
为公司做的一个发布会
发布会就是一张PPT
然后在后面一个大屏幕嘛
然后这个时候
大家可能听着听着都烦了
然后就在底下开始玩手机
然后这个时候
突然出现了一个视频或者动效
然后大家都会都抬起头来
拿起手机拍照
然后这也是动效为什么能够
吸引人注意力的一个原因
然后接下来这一个部分呢
就是UI设计中
动效最为最为直接
也是有成效的一个部分吧
就是当我们做完我们的界面设计的时候
一大堆的界面图
摆在领导或者甲方面前
他们看着可能会觉得嗯很好看
但是他们是无法想象出
使用的场景是怎么样的
这个时候我们就可以用动效
将我们一一张一张的页面连接起来
来表现出我们这个页面
在实际使用中是怎样一个场景
这样能够更加好地去表达我们的提案
也要也让客户
更加好地去理解我们的设计方案
然后接下来
我们来讲一下动效的主要原则
主要原则主要是
时间 惯性 预备 跟随 型变 夸张
其实讲这么多词
其实我自己也记不住
总而言之吧
其实就是动效设计需要
遵循自然界世界的
一些普遍的运动规律
但是却要也要适当的加入一点
动画以及电影中的夸张元素
这样才是一个非常好的动效
然后接下来在我们实验
就是界面中出现了一个弹跳的小球
以及它嗖地一下
然后就不见了
然后从上面落下来
然后我也希望
这个动效其实也不算特别难吧
我也希望就通过这个简单的动效
来带领大家走入动效的大门
那么接下来我们打开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设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
