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

用户头像
北京/UI设计师/8年前/7500浏览
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界面 组件
我的钱包-UI界面设计-app
户外旅行飞机情侣假日出行
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】银行卡icon
新能源APP应用UIKit
UI 登录界面设计模板包
【新年UI图标】30个图标
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
矢量立体简约UI蓝白图标
钱包ui模板
科技医疗透明柜UI界面设计
盲盒APP UI设计
高级表盘系列UI源文件
智能家居中心 简约 UI设计组件库
Security Camera UI kit
【新年UI图标】珠宝icon
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
【新年UI图标】钱包icon
新拟态风格 UI设计组件库
UI通用设计素材1
你可能喜欢
大家都在看
登录注册