征集码头论坛_LOGO_广告语_名字_征文_歌曲_包装_景观_文创征集网

标题: 90%的设计师都不会做动效? [打印本页]

作者: 码头发布    时间: 2017-11-12 10:25
标题: 90%的设计师都不会做动效?
如果你问一个工作中的UI设计师,动效怎么做?
他可能会直接跟你推荐一款简单易上手的软件:AE、Flinto或者Principle。
但,动效工具 = 动效设计吗?不!
真正懂动效的UI设计师会告诉你做动效不需要“炫酷的视觉效果”,但绝对需要:
贴合用户体验的动效设计和推进动效落地的能力。
大多数设计师的创意总是有趣和天马行空的,人们也总是会被效果炫酷的视觉形式所吸引。
↓↓↓
你可能会感叹,“Cool!”,于是兴致冲冲地设计出来,拿给开发哥哥看,然后被一盆凉水泼过来,“做不出来!”。而这时你自己又不具备帮助开发共同解决问题的能力。
这就是缺乏“推进动效落地能力”的表现。
现实工作中,因为不了解动效设计的逻辑结构、交付方法而导致创意流产的情况比比皆是,沟通成本也增加很多。
可以说,设计师和程序员之间有道难以跨越的坎,类似豆瓣和知乎之间的气质差别,试图让工程师具有艺术视野、读懂设计师的思维也是不现实的。
在这种情况下,小编不落俗套地为大家介绍一款有逼格但简单的工具——Origami。
Origami的独特气质在哪儿呢?
1.你能想到的动效它都能做,滚动、缩放、位移、tab切换;别人做不到的它也能做,比如调用手机摄像头、机身振动等功能。
2.开发看得懂。贴合开发的思维、参数化语言、可视化动效展示,让你的设计顺利实现!
说到这里,你可能会觉得这款软件会很难。
但其实,它很简单,无关代码,且有套路可寻。
接下来,我就用一个简单的图片放大效果让大家对Origami有个初步认识。
↓↓↓
在最开始,你需要对Origami制作动效的思路有一个大概的理解。
简单地说,即:什么引起了变化、变化前后分别是什么、发生了什么变化。
针对今天这个动效案例就是:点击引起了变化,变化之前是原图片、变化之后是放大了的图片,整个变化是一个放大的动画过程。
在分析完这些之后,我们就可以打开Origami软件了。
小编提示:Origami软件是完全免费的哦,贴心附上官网下载地址:https://origami.design
先来简单感受一下这款界面的布局。
你可能会觉得这个界面似曾相识,与sketch的界面非常相像,图层添加、参数调节、工具栏,体验还是相当友好的。
我们先将初始图片拖拽进来。
我们会看到图层区右上方出现了关于图片的坐标、大小、透明度等参数,在这里我们可以用鼠标左击并左右拖动,对图片的一些属性及参数进行调节。
接下来,我们进行第一步操作:为初始图片创建一个触发动作。
点击图片图层上的touch、选择tap,创建一个紫色的参数框。这步操作可以理解为:给图片添加了一个“点击”动作,点击后会引发变化。
接下来设置变化的最终状态——放大的图片,点击参数调节区域的【scale】,出现一个蓝色框,表示图片的scale(数值1表示图片呈现的大小为100%大小),也就是调节数值、图片大小会发生变化。
做到这一步,我们就设置好了点击的动作和最终达到的状态。
最后,我们给这个变化过程添加自然的动画效果,也就是我们所说的 “过渡动画”。
我们再来感受一下这个动画,它是一个缓动的放大过程。
双击紫色框和蓝色框的中间区域,会出现一个模块库,它的作用相当于添加中间动画将首尾连接起来。
我们只需要再添加三个小框,用线将它们连接起来,这个缩放动效就完成了。
框1:双击输入“transition”,给初始和最终状态加一个转变动画,此时需要特别注意的是,start的数值需要改为0.5,表示从50%的大小放大为100%的大小。
框2:双击输入“switch”,保持放大的状态不变,如果没有此模块,图片会快速闪动。
框3:双击输入“pop animation”,弹动动画,给两个图片状态之间的切换加入了一些缓动的效果,显得更加自然,否则放大动画会显得过于生硬。
到这里,这个图片放大的小动效就被我们制作完成了!
基本在Origami中,这几个框已经能够制作出基本上一般的常用动画效果啦,是不是很简单?
一个动作触发框、一个最终状态框,再加几个动画调节的框,连接起来,动效就做完啦!
并且,你可以看到,这些图片中具备一些动作和参数,将这些数据整合之后、简单标注,交给开发哥哥,动效就能够最终落地了。
↓↓↓
接下来,你可以随便拖进一张照片,试一下啦~
如果你看的还不过瘾,可以扫码了解更多信息~
↓↓↓
- end -






欢迎光临 征集码头论坛_LOGO_广告语_名字_征文_歌曲_包装_景观_文创征集网 (http://zhengjimtcn.com/) Powered by Discuz! X3.2