首页 > 网页教程 > 设计分享 > 动效教程:产品的动效设计

动效教程:产品的动效设计

时间:2017-11-26    来源:人人都是产品经理

本文主要讲述了为什么做动效,好的动效设计的标准是什么,如何做动效设计,以及如何使自己设计的动效完美落地。

看完本文你会学到:

1. 为什么需要动效设计?

  • 什么是动效设计?
  • 动效在产品设计的作用
  • 动效设计的好标准

2. 如何设计动效?

  • 6个构思动效的方法
  • 6个实现动效的方法

3. 动效的类别

4. 常用的动效软件

5. 让动效落地的4个方法

为什么需要设计动效?

我最开始接触动效设计,只是觉得又炫,又酷,翻滚的,旋转的,爆炸的。只是觉得新鲜,好玩,可以炫技。可以让设计更加酷炫。可能大部分同学,在做刚开始接触的时候多多少少都会有和我差不多的想法。这就是我们做动效设计的目的吗?应该不是。

解决为什么要做动效设计这个问题,就要搞清楚什么是动效设计?动效设计有什么作用?

1. 什么是动效设计呢?

动效大范围兴起,大概始于扁平化设计之后,扁平化设计的好处在于用户的注意力可以集中在界面的核心信息上,将对用户无效的设计元素去掉,不被设计所打扰分散注意力,使用体验更加纯粹自然。这个思路是对的,回归了产品设计的本质,就是提供更好的使用体验,而不是提供更漂亮的界面设计。但是,过于扁平化的设计,也带来了新的问题,一些复杂层级关系如何展现?用户如何被引导和吸引?这与用户在现实3D世界中的自然感受很不一致。所以Google推出了Material Design设计语言。

Material design 设计规范中,将动效设计这一章命名为「Animation」,动画,活泼的意思。

动词 Animate 是「赋予生命」的意思,动效可以定义为使用类似动画的手法,赋予界面生命和活力。

前面我们说过Material design设计语言,一部分作用是为了解决过于扁平化设计所带来的弊端,复杂层级关系如何展现,用户如何被引导和代入。为了解决这个问题,Material design 设计风格,充分利用Z轴,通过分层设计以及动效相配合的方式,在扁平化基础上提供给用户更好理解的层级关系,赋予设计以情感增加用户使用过程中的参与度。

2. 动效设计对于产品设计有什么作用?

动效设计的作用

如上图所示,动效对于产品设计的作用包含:

  • 传递层级信息 ;
  • 传递状态信息;
  • 提示隐藏信息功能;
  • 传递情感化信息。

知道了这些,那么,我们为什么需要动效设计?

通过上面说的,结合我们自身产品设计的特性,我们可以总结出动效设计的动机主要有如下几点:

  • 使等待不枯燥;
  • 使变化不生硬;
  • 使反馈不单调;
  • 使体验有情感;
  • 使用户更愉悦。

好的动效是什么?

知道为什么做动效设计,那我们应该做什么样的动效设计?或者说好的动效设计是什么呢?是炫酷的,翻滚的,旋转的,爆炸的吗? 复杂程度是评判好与坏的标准吗?

国外一位著名的一线设计师,曾经在分享会上对于好的动效下过这样一个定义:

好的动效应该是隐形的,好的动效应该是以提高可用性为前提,并且以令人觉得自然含蓄的方式提供有效用户反馈的一种机制。

这句话其实就是,好的动效设计是合适的,是对于用户使用体验的提升,最终服务的是体验而不是展示你的动画设计。

既然如此 ,那么让我们总结一下好的动效设计的标准。

首先要具备一下几点特性:

  • 快速且流畅;
  • 恰到好处的反馈;
  • 提升操作感受;
  • 提供良好的视觉效果。

动效设计标准

其次,好的动效设计应该是首先服务于体验,其次适当设计(考虑全面,如性能,实现成本,是否干扰用户等),再次就是要让用户感受到你输出的情感互动,最后也是最基本的就是要具有视觉上的美感。

怎样设计动效?

知道了什么是好的动效设计,那么就引申出下一个问题,我们怎么进行动效设计? 或者说,动效设计该如何入手,尤其是初学者?

很简单,就两步:

  • 先要有一个构思,想法;
  • 根据想法进行丰满实现。

没有想法?想法怎么来?怎么构思?从我自身总结,可以从这6个方面进行构思:

动效灵感来源

1. 结合产品去设计

要结合产品进行思考,思路设计要符合提升的产品体验,要经过细致思考不要盲目。

2. 了解基本常识

这些常识包含,动效设计的基本常识(如,基本的运动规律,节奏,动画如何),开发的基本常识,什么样子的动效果大概如何实现,实现成本大概是多少。确保能够顺利落地。

3. 观察生活

人们对于美的认知,大部分来自于日常的生活经历。比如什么样的运动是温柔地,激烈的,具有震撼性的。当我们对于我们需要构思的动效有性质定位的时候,可以从生活中这些相同的,定性的自然事物中寻找灵感,截取精华。

4. 看并思考

就是除了观察生活,我们还需要多看一些优秀的动效设计,时刻作为积累。同时,也需要对于「看」的事物进行细致思考。要思考他为什么这么设计,怎么完成这套动画设计的(是通过那些技巧构成这个动效设计的,整体节奏是怎样的一种感觉)。时刻与自己对类似事物的想法进行对比,找差距,补不足。这就是经验技巧积累的过程。

5. 学会拆解

web,app中大部分的动效设计,都是通过基本的变化组合而成的。我们要通过多看多观察,慢慢学会怎么去拆解别人复杂的动效设计,从中总结经验。而后,通过合理的编排设计出自己的动效设计,你就是这场动效设计的导演。

相关推荐
动效设计:5分钟教你打造Siri式波浪动效
设计分享:25个完美的动效网站设计欣赏
动效设计教程:如何制作符合场景的交互动效?
12 个网页滚动特效设计案例赏析
动效设计:让网页设计的用户体验更有趣!
网页PS设计教程:手把手教你制作漂亮的商业模板
网页PS设计教程:手把手教你制作WordPress新闻博客模板
网页PS设计教程:手把手教你制作简洁风格的网页按钮
18个值得网页设计师收藏的超棒CSS3教程
网页设计教程分享—能影响观众的网站首页设计10个要点
网页设计教程:关于网页设计的那些事儿
网站设计教程分享 回归内容“简洁大气”设计指南
网页设计教程:必须注意的最常见网页可用性错误
10个漂亮实用并附带源码的Web设计教程分享
在视觉设计中对像素的深度解析
网页设计教程:网站背景中的他!她!它!
设计教程:写给网页设计新手的10条实用法则
LOGO到品牌包装!百度钱包品牌LOGO设计教程
网页设计教程!有哪些技巧可以搞定大图设计?
网站设计教程:如何为网站搭配图片?
PS海报设计教程:如何临摹一张绚丽的艺术海报?
20个适合初学者的UI设计教程推荐
UI设计教程:从零开始做APP之界面设计篇
UI设计教程:从零开始做APP之切图标注篇
简洁设计是对用户需求透彻理解的基础上去粗取精
深入谈交互设计之人人都懂交互设计
产品设计:万水千山总是情 不要图片行不行
产品设计教程:提升用户使用黏性的6个诱惑手段
中枪了没?设计师最常见的11个设计误区
从引导页设计说起 谈谈如何提高产品体验
学多不如错少!五个最常见的设计思维误区
回顾交互设计发展史:回归人性 重拾质朴
深度剖析文:设计追波风!
产品设计:FEEDLY创始人再聊改版实战经验
设计与咖啡:我在卖咖啡中学到的产品设计
让测试成为设计的一部分 做出高性能设计

精彩推荐

热门教程