动效给程序员用什么格式

UI其实并不仅仅是静态，还包括动效设计！！！作为一个程序员，每天除了撸各种干燥无味的代码，我觉得大家有必要了解一下这个润滑产品，期间的滋味只有试了的人才懂！

我们这一代人还是清楚移动设备的演化：大哥大时代(方便沟通，也是身份的标志)、功能机时代(注重功能、品质、外观、品牌)、体验时代(核心的功能已转移到APP)

而GUI设计风格也随之演化：认知和学习成本低的拟物化——》简约、现代感的扁平化

▲以前IOS6

▼最近IOS11

▲instagram 旧版

▼instagram 新版

动效设计在体验时代是非常有必要的，从上面的例子可以看出来，谁还会用以前的版本，太喽了！动效设计可以让我们做出差异化的产品、传递更丰富的情感、硬件的支持也是动效的基础。

各种产品发布会的硬件介绍.

当然还有情感化的设计以提升用户体验，类似下面写密码或不写密码时的

▼写密码时

▼不写密码时

当然还有增加产品趣味性的设计，如下案例

clipbqweroard.png

▼饿了吗配送动画图

clipboaasdfrd.png

▼饿了吗评价图

减少用户等待的焦虑感

0.1秒在该事件内显示反馈结果用户是可以接受的

1.0秒是用户保持不间断的思维流的限定时间用户会注意到这样的延迟

10秒是保持用户关注当前对话框的极限时间

如何减少用户等待时的焦虑感？

——有WIFI的情况下预先缓存，网络不好或无网络也可使用

——优先加载重要内容，满足用户提前窥视的心理需求

——加入动效设计，如进度条动画、呆萌可爱的小动画

小贴士：一般进度条的加载方式选用先慢后快，给用户快速的心理视觉

这里介绍动效设计需要的一些理论知识：

——《动画师生存手册》-动画12法则

——《交互设计精髓》-人机交互

挤压与拉伸：物体受到力的挤压，产生拉长或者压扁的变形状况，再加上夸张的表现方式，使得物体本身看起来有弹性、有质量、富有生命力，因此较容易产生戏剧性。

预备动作：加入一反向的动作以加强正向动作的张力，借以表示下一个将要发生的动作。

表演及呈像方式：动画中的构图、运镜、动作、走位都需要仔细的设计安排，避免在同一时间又过多琐碎的动作与变化。

逐帧画法VS关键帧画法：关键帧画法，则是将动作拆解成一些重要的定格动作并画出这些关键的动作点帧，然后再由其他画手补充中间的画(帧)。

动作的惯性跟随和重叠：动作受惯性影响产生惯性跟随，这种跟随动作时间上动作间有互相重叠部分。

慢入与慢出：静止的物体开始移动时由慢而快，而将要停止时的物体则会由快变慢，若以等速度方式开始或者结束动作，则会产生一种唐突的感觉。

弧形运动轨迹：但凡所有会动的生物，其组成的任何部分之运动轨迹皆为平滑的弧形曲线。

次要动作：依附在主要动作之下的细微动作，虽然是属于比较微小的动作，但实际上却又画龙点睛的效果。

节奏：动画的灵魂就是物体与角色的运动，而控制运动的关键就是动作的节奏与重量感。

夸张：利用挤压与伸展的效果、夸大的肢体动作、或是以加快或放慢动作来加乘角色的情绪及反应，这是动画有别于一般表演的重要因素。

熟练的手绘技法：扎实的绘画基础训练，才能将动画中所需要的画面完整的表现出来。

吸引力：动画通常最吸引人的地方，就是充满想象力的画面的表现方式。

动效设计的灵感来源

——善于观察，留意身边好的交互设计

——大量体验优秀APP

——大量浏览优秀设计作品

——善于总结，归类分析，预测发展趋势

——洞察人心，理解用户的使用场景，解决用户痛点

动效给程序员用什么格式_UI动效敲砖篇相关推荐

动效给程序员用什么格式_动效，一种属于前端程序员的浪漫，无与伦比的体验...
一.初见动效顾名思义就是动画效果.网页中为什么需要动效呢?简单来说就是为了有趣. 如果把网页和用户的关系比做正在恋爱的情侣,很显然网页的 UI 是颜值,而动效在我看来则是情侣之间的小浪漫.可能和颜值 ...
动效给程序员用什么格式_Principle: 做动效，选对软件很重要
你有多久没做动效了?平时的工作主要是终端视觉设计,功能需求加运营需求,静态稿件加动效设计,从比例来看,动效设计其实不会占很多空间,但偶尔也会来一波.而实际场景往往是:需求是排满的,项目是紧急的,时间呢 ...
【看动漫学编程】程序员在异世界生个娃第2篇：外挂已准备就绪
前言作者文笔比较水,还请见谅. 以下内容还将使用视频动态漫画表现,剪辑完将会贴出链接. 小说剧情为剧情需要,过渡到知识点,部分篇幅可能没有技术知识点还望谅解. 由于没有经费支持,所以画出来的东西是我 ...
【看动漫学编程】程序员在异世界生个娃第1篇：太极村
前言作者文笔比较水,还请见谅. 以下内容还将使用视频动态漫画表现,剪辑完将会贴出链接. 小说剧情为剧情需要,过渡到知识点,部分篇幅可能没有技术知识点还望谅解. 由于没有经费支持,所以画出来的东西是我 ...
3dmax和python做3d动画_maya三维动画师和程序员(python)哪个前景好一些？
我是个做游戏开发的前端程序员,回答这个问题再适合不过.因为我的工作,既需要做动画,又需要写代码. Python只是动态语言(脚本语言),它根本不适合搞开发,只适合当成辅助语言使用.要想当程序员,光靠P ...
python三维建模和cad比较_maya三维动画师和程序员(python)哪个前景好一些？
哪个前景好我先不说,我先告诉你哪个发量更多: 三维动画师更多. 我自己是做3D行业的,我也有程序员朋友. 从目前的市场需求来看,程序员的下限较低,可能学半年出去找工作直接都可以找到月薪过万的岗位:(不 ...
动图：程序员才懂的这些！
戳蓝字"CSDN云计算"关注我们哦! 1. Java VS C++ 2. 功能先上了再说 3.高级开发人员作为一个团队进行编程 4. 调试CSS 5. 编译错误:括号不匹配 6.高 ...
20张程序员不得不看的内涵动图...
1. Java VS C++ 2. 功能先上了再说 3.高级开发人员作为一个团队进行编程 4. 调试CSS 5. 编译错误:括号不匹配 6.高级开发人员重构代码 7. 看实习生编码的时候,我的表情.. ...
程序员各种PDF格式电子书--免费网盘资源
-请妥善保存,后期还会有更多更新,如果读者有不同的书籍资源或者这里没有你要找的书籍,也可以直接评论,我在这里添加-- 如果有不存在的链接或者失效的,直接私信我或者在下方评论所有的數據链接:链接:ht ...

动效给程序员用什么格式_UI动效敲砖篇

动效给程序员用什么格式_UI动效敲砖篇相关推荐

最新文章

热门文章