• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网页教程 > 设?#21697;?#20139; > 动效教程:产品的动效设计

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

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

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

    看完本文你会学到:

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

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

    2. 如何设计动效?

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

    3. 动效的类别

    4. 常用的动效软件

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

    为什么需要设计动效?

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

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

    1. 什么是动效设计呢?

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

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

    动词 Animate 是「赋予生命」的意思,动效可以定义为使?#32654;?#20284;动画的手法,赋予界面生命和活力。

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

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

    动效设计的作用

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

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

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

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

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

    好的动效是什么?

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

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

    好的动效应该是隐形的,好的动效应该是以提高可用性为前提,并且以令人觉得自然含蓄的方?#25945;?#20379;有效用户反馈的一?#21482;?#21046;。

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

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

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

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

    动效设计标准

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

    怎样设计动效?

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

    很简单,就?#35762;劍?/p>

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

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

    动效灵感来源

    1. 结合产品去设计

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

    2. 了解基本常识

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

    3. 观察生活

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

    4. 看并思考

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

    5. 学会拆解

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

    相关推荐
    动效设计:5分钟教你打造Siri?#35762;?#28010;动效
    设?#21697;?#20139;:25个完美的动效网站设计欣赏
    动效设计教程:如何制作符合场景的交互动效?
    12 个网页滚动特效设计案例赏析
    动效设计:让网页设计的用户体验更有趣!
    动效设计对用户体验的重要性
    8个?#21028;?#21160;效网页设计案例赏析
    网页PS设计教程:手把手教你制作漂亮的商?#30340;?#26495;
    网页PS设计教程:手把手教你制作WordPress新闻博客模板
    网页PS设计教程:手把手教你制作简洁风格的网页按钮
    18个值得网页设计师收藏的超棒CSS3教程
    网页设计教程分享—能影响观众的网站首页设计10个要点
    网页设计教程:关于网页设计的那些事儿
    网站设计教程分享 回归内容“简洁大气”设计指南
    网页设计教程:必须注意的最常见网页可用?#28304;?#35823;
    10个漂亮实用并附带源码的Web设计教程分享
    在视觉设计中对像素的深度解析
    网页设计教程:网站背景中的他!她!它!
    设计教程:写给网页设计新手的10条实用法则
    LOGO到品牌包装!百度钱包品牌LOGO设计教程
    网页设计教程!有哪些技巧可以搞定大图设计?
    网站设计教程:如何为网站搭配?#35745;?/a>
    PS海报设计教程:如何临摹一张绚丽的艺术海报?
    20个适合初学者的UI设计教程推荐
    UI设计教程:从零开始做APP之界面设计篇
    UI设计教程:从零开始做APP之切图标注篇
    设计教程:这10个小技巧让长表单填写更省事
    简洁设计是对用户需求?#36171;?#29702;解的基础上去粗取精
    深入谈交互设计之人人都懂交互设计
    产品设计?#21644;?#27700;千山总是情 不要?#35745;?#34892;不行
    产品设计教程:提升用户使用黏性的6个诱惑手段
    中枪了没?设计师最常见的11个设计误区
    从引导页设计?#28783;?谈谈如何提高产品体验
    学多不如错少!五个最常见的设计思维误区
    回顾交互设?#21697;?#23637;史:回归人性 重拾质朴
    深度剖析文:设计追波风!

    精彩推荐

    ?#35753;?#25945;程

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 甘肃快三今天的开奖号 大乐透历史018开奖号码 体彩双色球基本走势图 体彩p5分析预测号码 网球比分零为什么叫love 代玩好运快3犯法么 彩名堂腾讯分分彩下载 河北快三官方网站 特码图报 秒速飞艇百科 新浪彩票开奖 体育彩票超级大乐透开奖结果 中国体彩网排列三预测 猴子香蕉五子棋 三分彩历史开奖结果查询