超实用的动效设计入门小手册

   这篇小册子的目的不是手把手教你如何做出一个动效,而是从基础动效、动效曲线、动效软件等方面从头梳理相关的知识点,串成一片,帮助你从整体轮廓上认识动效,适合零基础及新手阅读。

  最近几年UI设计领域最大的变化便是越来越强调用户体验设计,而在Web或者App中使用动效也就成了一大趋势。这种趋势是如此强烈,以至于我看到越来越多的应用中所使用的那些动效已经不再是为了提升用户体验,而更多是为了强调动效本身了。


  设计师 Pasquale D’Silva 在 Web Direction South 大会上曾这样说过:好的动效应该是隐形的。(作为用户的)你不应该注意到你正在看一个动效。

  这是一个非常棒的动效设计 建议,甚至可以说是原则。作为这些Web或者App的设计和开发者,在我们设计和开发动效之前,首先应该明确什么才是正确的动效:动效应该是以提高可用性为前提,并且以令人觉得自然,含蓄的方式提供有效用户反馈的一种机制。

  了解动效

  优秀的动效往往会被无视,而糟糕的动效却迫使用户去注意界面,而非内容本身。用户都是带着明确的目的来使用你的网站或者App的:买一件东西、学习新的知识、发现新音乐、或者仅仅是寻找最近的吃饭地点。他们不会只为了把玩你精心设计的界面而来,实际上,用户根本不在意界面设计而只关心能否在你这儿方便地达到他们的目的。优秀的动效应该对用户的点击或手势给予恰当的反馈,使用户能够非常方便地按照自己的意愿去掌控应用的行为,从而增强应用的使用体验。


  基本动效

  我们平时在Web或App中看到的动效其实都是由一些最基本的动效组合而成的,这些基本动效包括:移动(Translate),旋转(Rotate),缩放(Scale)。在一些动效设计 工具的帮助下,一般你只需要设置它的起点和终点,并告诉它你想要什么类型的动效,设计工具便会根据你的这些设置去渲染出整个动效。

  移动 — Translate

  移动,顾名思义就是将一个物体从位置A移动到位置B,这是最常见的一种动效,像滑动,弹跳,振动这些动效中都能看到。


  旋转 – Rotate

  通过改变物体的角度,产生旋转的效果。在页面加载,或点击某个按钮触发一个较长时间操作时,经常使用到的Loading效果或一些菜单图标的变换都会使用旋转动效。


  缩放 – Scale

  缩放在App应用中被广泛地使用,如点击一个App图标,打开App全屏界面时,以及通过点击一张缩略图查看具体内容时。


  动效曲线

  自然界大部分物体的运动都不是线性的,而是按照物理规律呈曲线性运动的。通俗点来说,就是动效的响应变化与执行动效的物体本身质量有关。优秀的动效应该反映真实的物理现象,如果你想表现的对象是一个沉甸甸的物体,那么他们的起始动画响应/参数的变化会比较慢。反之,物体如果是轻巧的,那么其起始动画响应/参数的变化会比较快。


  你也可以在easings.net 中查看所有的动效曲线,获取它们对应的CSS,JS代码,并在你的项目中使用。


  属性变换

  属性变换是非常常见的一种动效。比如可以通过改变透明度来实现淡入/淡出效果等。同时你还可以改变对象的大小,颜色,位置等几乎所有属性来体现动画效果。

  注意下面这个动效的底部的菜单栏,当他的高度减小的同时,他的透明度也相应地降低,从而产生出一种折叠的效果。


  组合动效

  在大多数场景中,我们需要同时使用2种以上的动效,将它们有效地组合在一起,以达到更好的效果。另外你仍需要让你的动效遵循普遍的物理规律,这样才能使它们更容易被用户接受。

  动图案例见:http://www.uisdc.com

  动效不应该太慢

  我认为理想的动效时长应该在0.5-1秒之间,当你设计淡入淡出,滑动,缩放等动效时都应将时长控制在这个范围内。如果动效时长设置得太短,会让人看不清效果,甚至更糟的是给用户造成压迫感。反过来如果动效持续时间过长,又会使人感觉无聊,特别是当用户在使用App的过程中,反复看到同一动效的时候。

  动效的开发

  很多设计人员往往会遇到这样的困扰,他们看到的最终产品中出现的动效与他们在设计阶段定义的有很大出入。那是因为,虽然作为设计师,可以定义非常酷炫的动效,但由于技术或成本上的限制,有些动效往往由于开发代价过高而被摈弃了。所以作为设计师,你可能需要同时理解如何设计动效,以及动效背后所使用的技术。这会帮助我们在整个项目的设计阶段就能作出明智的取舍,从而节省大量的开发成本。

  动效制作工具

  目前有一些非常流行的动效设计 工具,它们基于不同的技术,也有各自的特点。你可以从中选择你最喜欢的来使用。

  Framer

  Framer是一个基于JavaScript的原型设计工具,并且它是一个开源项目。Framer有以下一些特点:支持手势、动效、状态、基于网页、容易实现、可在任何设备上浏览。如果你很精通Javascript,那么这个工具应该会适合你。


  Principle

  Principle 可能是所有动效工具中最简单易用的。你只需要设置屏幕A和屏幕B,Principle就能自动地产生这两个屏幕之间的过渡动效。当然,你也可以通过设置不同的时间和动效曲线,来调整动效。Principle是一个桌面应用,它的界面和Sketch非常像,另外,你可以方便地将Sketch中的设计直接拷贝到Principle中使用。


  Flinto

  Flinto 和Principle一样,也非常简单易用。特别的是,它提供了一个[Skech插件] ,能够直接将你Sketch中的Artbords和3D transform导出到Flinto中。


  Pixate

  Pixate 是一个Web App,能够帮助你快速地制作原型。与Flinto或者Marvel不同,你可以区分层(layers)和嵌入的交互,如拖拽,点击,双击等。制作出来的原型保存在Web上,你可以使用一个iOS app来预览原型的效果。


  Origami

  Origami是一款免费的Quartz Composer的插件,Origami使QC的界面变得更加友好,更加适合进行移动App的界面设计。从2013年5月开始,Facebook的产品设计师们就开始开发这款QC插件。Origami的开发过程与Paper一同进行,随着Paper的功能越来越复杂,Origami也变得越来越强大,Paper上的每个动画效果都是由设计师首先在Origami上制作成型后,再由iOS工程师编写的。


  After Effects

  After Effect简称称AE,是adobe公司开发的一个动效设计软件。对于那些不碰代码的纯设计师来说是非常理想的动画设计工具。在Dribbble上有很多使用AE制作的优秀动效作品。相比其他工具,AE是一个比较传统的工具,使用祯和层来定义动画。作为Adobe的产品,它的很多功能和Photoshop很像, 但针对动效有很多附加功能。


  作者微信公众号:

时间: 2024-08-30 05:47:59

超实用的动效设计入门小手册的相关文章

学学这些爱不释手的加载动效设计

  我们现在越来越注重细节,小到加载动画,大到界面配色.这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了.所以今天我们要重点说说那些你以前觉得"不那么重要"的加载设计. 等待和加载动效几乎是无处不在了.设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验 的必须组件. 虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部

那些令人爱不释手的加载动效设计

  等待和加载动效几乎是无处不在了.设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验 的必须组件. 虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部分,在许多设计项目中,加载动效几乎做到了无处不在.内页切换的时候可以用,组件加载的时候可以用,甚至幻灯片切换的时候也同样可以用上.不仅如此,它还可以用承载数据加载的过程,呈现状态改变的过程,填补崩溃或者出错的页面,它们承前启后

动效设计如何从四个维度吸引你的注意力?

  动效设计正当红火,不过有很多同学担心驾驭不了它,容易被它喧宾夺主,今天百度的同学就从注意力这个角度给同学们聊聊,动效能从哪四个维度来吸引用户注意力,针对这几个维度,设计师该如何运用好动效设计,好文一篇,点赞别忘了艾特小伙伴. 近年来,随着ios和android系统对于动效设计的带动效应,多数产品对于动效设计也越来越重视,从app引导页到动作反馈,从官网介绍到hover效果,动效设计似乎已经成为一个成功产品的标配.但是动效也不是越绚丽越好,过于绚丽的动效对于我们的设计目标来说也许会适得其反,用

来看这25个用户体验极佳的网站动效设计

  不为用户体验而做的动效都是炫技.经常有同学问小编有木有能运用到实战中的动效设计 ,来看今天这组网站就对了!第一个网站就是那个输密码时会捂眼睛的猫头鹰官网,连注册的动效都特别有趣,来体验一把真正的动效吧. ReadMe.io 尽管用不上这服务,点击 Get Start Now 按钮后,小编还是被那只萌萌的猫头鹰吸引去注册了. Paranoid Android Italio Underbelly Interactive Infographic Babel Anonymous Zurb Manif

超多干货的UI界面动效设计指南

腾讯同学的教程一向都是良心之作,今天这篇长文收罗了常见的UI动效设计方法,不仅有案例,而且分析透彻入微,从表现形式到动效的作用,对用户产生的影响,都有全面专业的解说.今年动效也是一大热门,想自我提升的同学可以放手来学习了. 概要 xavieryuan:UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户

如何准确的向工程师传达动效设计?

  随着软件与终端的发展,如今的用户体验设计中动效的作用正变得越发重要,也有越来越多的设计师开始尝试让自己的作品"动"起来.但在实际工作中,相信大家常会有这样的疑问:怎样才能将自己精心设计的动态效果,准确的传达给工程师,避免实现的偏差呢?下面我想根据自己的经验,抛砖引玉,和大家聊一下这个话题. 试想一下,在一个沉静的的夜晚,你正为一个界面的过渡动画而苦思冥想,突然一道灵感之光穿越你的脑海,完美的方案浮现眼前.此刻你最想做的,恐怕不是翻阅开发文档研究实现原理,"老子得立刻把它表

动效设计富有未来科技感

  基于情景的消隐           小编推荐:动效设计让你的设计富有未来科技感 这是iOS上的Chrome,有着基于情景的消隐动效. 当向下滚动时,导航控件自动消隐.用户向上滚动时,导航控件出现.优设哥发现这一点上,腾讯网的新闻详情页已经采用了.案例围观地址(上下滚动鼠标滑轮,注意页面顶部导航的变化):http://news.qq.com/a/20131104/001730.htm .这种方法既能提高浏览体验.也拓展了有限的浏览空间.这对于空间限制较大的移动设备来说,尤为重要. 用户会快速扫

从注意力维度谈动效设计

从注意力维度谈动效设计 时间:2014-11-16 14:48 来源:百度MUX 作者:nandier 近年来,随着ios和android系统对于动效设计的带动效应,多数产品对于动效设计也越来越重视,从app引导页到动作反馈,从官网介绍到hover效果,动效设计似乎已经成为一个成功产品的标配. 但是动效也不是越绚丽越好,过于绚丽的动效对于我们的设计目标来说也许会适得其反,用户可能只关注到了动效本身,而没有精力或时间去关注动效要传达的信息,而 如何把握这个度,本文会从以下几个方面来讲. 一. 是什

动效设计的物理法则:动画的一切皆在于时间点和空间幅度(转)

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 动画制作和动效设计是本质相通的,我们需要为用户建立一种"视觉的真实",即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是"可信度",要让用户感知到这个动作是成立的.这里,就要搬出高大上的物理学了! 物理学四大基本力--万有