Principle 简单教程(一)

1,814 阅读2分钟
原文链接: www.ui.cn

这篇文章简单介绍下Principle的使用场景,及一些注一点,之后会出案例教程,因为不知道效果如何,先写篇文章试试水。


Q:哪些效果适合用principle去制作?

A:只涉及效果变化的交互流程,都可以使用Principle去制作。如:


· 多页面简单跳转;

· 点赞按钮变化;

· 页面上下滑动的东西导航栏同时移动(联动);

· loading画面;


PS:当你需要一个【点赞的时候冒星星】、【点击图片跳转页面时图片直接带过去】,这类说起来别人不好理解的东西。你可以用Principle去做,并通过GIF或者直接通过Principle APP演示。


Q:不推荐使用Principle去制作的效果有哪些?

A:涉及到数据交互或过于复杂的效果别用Principle去做,你脑子会晕。如:


· 唤起键盘然后输入文字内容;

· 唤起照片选择器选择照片;

· 修改个人资料;

· 超过10个以上的页面跳转外带各种动效的请出门左转Flinto;


PS:并不是完全不能做,只是想说你们有这精力还不如把文档写清楚点。


Q:Principle使用时有什么需要注意点?

A:说一个别人问我时,踩坑最多的点:Principle不支持同一个画板中,有两个名称相同的图层,两个页面跳转时,动效靠图层命名。这话啥意思呢,如下图:

Image title

当前文件添加了:点击【画板一】任意位置跳转到【画板二】;点击【画板二】任意位置跳转【画板一】的效果。


由于两个画板中有一个相同名称的图层:【图层一】;当我从【画板一】跳转到【画板二】时,Principle会检测到【图层一】的颜色、圆角发生了变化,会在跳转的过程中,补齐中间动画,如下图:

Image title

当两个页面中的图层名称不一样的时,页面跳转是正常的,但是图层变化会特别突兀,如下图:

Image title

其实上图中的红色块是直接消失了,蓝色块直接出现,他们之间并没任何关系。为了更好的说明图层名称对动效的影响,另外再举个简单的案例说明一下:

Image title

Image title

可以看到,红色块在触发效果时,直接消失了,然后绿色块慢慢转变成蓝色圆。


所以,下次如果你做动效时,页面中的内容飞来飞去,别去纠结别的,先看看命名是不是出问题了。


另外,只有两个页面之间的图层会有影响。有画板A、B、C,当画板A跳转画板B,画板B又跳转画板C时,画板A中的图层与画板C就没啥关系了。



如果在使用Principle时遇到问题,可以加QQ群一起讨论:494163320