提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
Principle为什么值得学习,为什么要学,学习前需要知道些什么?含丰富的源文件及资源
全篇1400字左右,预计阅读时间为3分钟
为什么要学习动效?
UI的岗位需求需要复合型人才,UI岗位除了本职岗位的视觉部分,上面承接交互设计,下面承接开发。承上启下,都很有必要将高保真动起来。且动效的引入会提高提案通过率。
交互岗位特有的“讲故事”陈述特点,用动画把各个页面逻辑串联起来,可进行最小产品开发测试以及小范围的可用性测试等。最后,基于情感化设计,在交互设计中运用动效,达到优化用户体验的目的。
最后可以预防老年痴呆和增加逻辑思维,作用和打麻雀是一样的效果。毕竟据研究表明,人的脑细胞是死一个少一个,如果不用尽岂不是浪费。
先看看Principle可以做什么
Principle的好在哪?
首先,Principle和keynote和AE的思路很像,全程区域可视化的操作,而不是背后一堆代码来实现。
其次,操作界面和sketch很像,且支持OG和Sketch素材的复制粘贴。
再次,Principle基于苹果的Core Animation,也就是说做出的动画,动画参数开发可以很容易调出来。
再再次,可以在PC、Phone上面实时预览,动画可以直接输出视频、gif
哪些人适合学习?
1. 不会JavaScript/CoffeeScript的人 所以可以忽略掉学习Framer Studio
2. 会些AE的人,但是又觉得炫技不能进行动画交互
3. 觉得flinto不够用的人
4. 觉得Proto pie太复杂的人
5. 。。。
Principle的核心要素有哪些?
要素就四点:
1.事件Events
2.动画Animation
3.连续的交互Continued Interactions
4.联动Drivers
事件
事件触发器是用于不同画板之间的转场,有点击、长按、滚动开始、滚动释放、滚动结束、拖拽开始结束、按下、抬起、鼠标划入画出、自动几种形式。
动画
当触发事件发生时 (必须是两个画板图层之间),Principle会自动创建两个画布之间都用的图层之间的逐帧的补间动画,逐帧的实现属性间的变化。时间轴面板可以调节属性的快慢、错帧等。(点击画板上方的箭头可以调出动画面板)
连续的交互
是指单个画板内的三种交互形式,拖拽(drag)、滚动(scroll)、翻页(pages),可用范围都有X轴、Y轴选择
联动
联动是在一个类似时间轴(是以距离为计量单位的轴,和时间轴以时间为计量单位类似)上面用关键帧来链接不同的图层之间的属性变化,可以联动控制角度、透明度、倒角、长、宽、位置、边、阴影等
联动必须需要联动源,连续的交互里面的三种交互形式作为联动源,才可以触发联动
有什么技巧吗?
1. 从Sketch导入的图层如果是用了Mask是会被合并成位图的,可以用群组的方式解决
2. 复用的组件可以在图层后面加 * ,这样导入到Principle里面会自动转为位图
3. 导入到Principle时选择的x1、x2、x3做动画的时候没有影响,但是在手机里面预览如果倍率不对会出现模糊
4. Sketch导入Principle要求两个软件都是打开状态,默认导入Sketch打开置于最顶层的文件
5. 添加触发事件时(闪电标志,然后拖出的箭头),指向自己所在的Artboard,将快速复制一个自己所在的Artboard
6. 按住Command,出现旋转标志就可以旋转图层
7. Ctrl+C 可以快捷选取颜色
8. 调节左侧面变的属性的时候,下面的输入框可以拖动改变数值
9. 联动和动画的区别是,一个调节位置然后属性变化,一个是调节时间的先后顺序以及快慢,以及动画曲线
10. 联动调节的时候,时间轴一定要复原,不然预览的时候回出错
11. 输出的动画可以放在ps里面加到UI样机输出预览图
有些什么学习资源?
1. 中文版Principle学习文档 、
http://principleux.com/principle-chinese-document
2. Dribbble 上面的案例
https://dribbble.com/search?q=Principle
3.官方模板库
http://principletemplates.com/
4.源文件资源包(超过200个源文件)
链接:https://pan.baidu.com/s/1URh7qV9xW7AHWA_7cVseEw
密码:464n
5. B站视频教学
https://search.bilibili.com/all?keyword=Principle&from_source=banner_search
学习还需要什么工具条件?
1. 最好安装Sketch,并尽可能的了解,因为Principle直接导入Sketch素材,甚至可以直接粘贴复制
2. Mac系统的Preview,可以将Gif分拆成每帧页面,这样学习别人动画的时候可以用到,细致到每一帧,才能体会动画的精妙。Dribbble上很多大人甚至会画半天来调整动画。Windows系统推荐使用 爱奇艺的图片查看器,也可以分拆
3. 需要Mac系统的机子,或者系统(黑苹果,可以在win下用虚拟机安装,或者直接安装(有需要的同学可以私信))
4. 没有软件的同学可以到 xclient.info 这个网站很多好软件下载。
下期通过分拆步骤讲解如何用Principle做下面这个动画
附件包含 Sketch文件以及Principle源文件,可下载研究,谢谢!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册