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

用户头像
北京/UI设计师/8年前/7501浏览
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吧!
推荐素材
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
【新年UI图标】钱包icon
拟物风质感写实UI卡片合集源文件
新拟态风格 UI设计组件库
【新年UI图标】体育icon
盲盒APP UI设计
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
Security Camera UI kit
钱包ui模板
【新年UI图标】秒杀icon
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
高级表盘系列UI源文件
【新年UI图标】30个图标
3D渐变流体抽象矢量UI背景图
手表表盘UI系列
【新年UI图标】旅行icon
UI界面 组件
你可能喜欢
大家都在看
登录注册