Principle&Flinto做动效,选对软件很重要。

用户头像
北京/UI设计师/8年前/7499浏览
Principle&Flinto做动效,选对软件很重要。

最近接触到Principle和Flinto,交互设计软件,大大的提高了设计提案,降低了设计师与开发沟通成本。

一、做动效,选对软件很重要。

自从2015年UI设计的火爆,交互软件也层出不穷Hype3、Pixate、Principle、Flinto,软件的选择也是为了达到你的目的,针对不同的需求选择适合的软件,能够事半功倍,现在APP的动效都比较倾向于简单,动效的目的是传达给用户信息而不是炫酷,过多和无理由的动画会阻碍应用的流畅性,降低性能,还会分散用户在操作中的注意力,就像iOS的动效只是用深度给用户一个哪里来哪里去的信息。安卓的动效更倾向于模拟自然界的物理变化,比如卡片在拾起的时候,投影面积会变大,点击会发出水波连动的反馈等等。


二、为什么做动效?

1、传达状态和提供反馈

2、增强直接的操纵感

3、将用户的操作可视化


三、动效应该具备什么原则?

1、过场的流畅,不可以让用户感觉反应迟钝缓慢;

2、动效应该具备引导作用,通过动效能让用户明白什么,以及对层级的展现;


最近接触到Principle和Flinto,研究学习了一下,做了个总结,和大家分享,在UI界面设计成之后可以快速的制作出页面交互效果,大大的提高了设计提案,demo交互效率,降低了设计师与开发沟通成本。



先来一波追波Johny vino™大神的作品--(PS我是跪着看完的)







跪拜就告一段落,下面晒晒小编临摹的作品以及制作过程希望对初学者有一些帮助,前方高能-请注意辣眼睛(哈哈哈)



制作的过程

快捷键:原位复制comd+alt+C 原位粘贴:comd+alt+V





制作过程



注意点:做好交互如何制作追波大神稿的样式?

principle制作好交互之后录制视频导出mov格式-导入到ps中-制作视频帧动画-保存为web格式-选择.gif-循环永远,这样文件会小很多,便于上传网络。


下方同样原理


小动画制作


principle制作过程



*************点赞越多,下一篇Flinto教程越快哦,敬请期待哦***************


*******************越赞越幸运,希望大家多多留言交流********************




94
举报
|
79
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】礼物/活动icon
UI应用平面图标
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
【新年UI图标】相机icon
新能源APP应用UIKit
【新年UI图标】积分icon
户外旅行飞机情侣假日出行
我的钱包-UI界面设计-app
3D渐变流体抽象矢量UI背景图
【新年UI图标】旅行icon
科技医疗透明柜UI界面设计
UI通用设计素材1
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI 登录界面设计模板包
手表表盘UI系列
【新年UI图标】银行卡icon
高级感金属拟物 UI设计组件库
【新年UI图标】活动icon
【新年UI图标】体育icon
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
Security Camera UI kit
你可能喜欢
大家都在看
登录注册