提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
希望 Principle 可以帮助大家提高工作的沟通效率~
0、首先问一个问题:为什么我要用Princip?
1、直观的展示按钮、页面之间的逻辑关系;
点击这个按钮会跳到哪里去,如何进入到某个页面当中。
2、向开发或者其他成员展示我期望的设计效果;
这个按钮点击后会呈现一个什么样的效果;页面之间的专场是怎样的;
所以我对交互工具的要求是:快速、简单、即时修改;
1、Principle是什么?
Principle(以下简称 PP)是一个交互原型制作工具,可以让你的原型、设计稿动起来,然后同步到手机app 上,像真实使用 app 一样操作。
2、Principle能做什么?
产出物:
PP适合做『单页面交互展示,如:列表滚动、导航切换』、『页面转场效果展示,如:底部栏切换、页面跳转』、『 loding 样式』等。
推荐:用PP去做展示单一业务线的交互展示;
不推荐:用PP去做整个产品的交互展示;
工作辅助:
我之前的工作中经常会用到 PP,我会把产出,通过 PP 制作成可操作的原型,然后在给领导、甲方等成员介绍时,一遍说明一遍操作,直观的告诉他们,我是怎样做的。
等落地开发的时候,程序员有时无法理解到你的动效的真实效果,我也会通过 PP 去制作一个效果,展示我期望的动效是怎么样的,然后让他们真实还原。
所以,PP 最大的价值是:辅助我们设计成员更清晰的让别人理解到我们的设计是什么,是怎样的。
提示:如果你要做一些很炫的东西,还是推荐你用 AE,PP 是个生产力工具,炫技有点吃力不讨好。
3、案例
单页面交互:列表滚动、导航切换
页面跳转
Tab切换
Loading
4、Principle的交互原理?
4.1、单页面
单页面的交互分为『独立』和『联动』两个类型:
独立
页面中单个元素发生变化,对标 app 中的列表滚动、Banner 滑动等切换效果。
独立的交互效果包括:静态(Static)、拖拽(Drag)、滚动(Scroll)、页面(Page)
· 静态(Static):默认效果,即啥也不能做。
· 拖拽(Drag):设定后,被设置的元素即可以按照设定的方向进行随意拖动,拖到哪停到哪。
· 滚动(Scroll):设定后,元素可以在X轴或者Y轴进行滚动操作,类似微信的好友列表滚动。
补充说明:见下图,职位list-1 组的范围实际知道第四个块的一半的位置,如果我想看到第五个,那么就可以通过设置Y轴滚动,然后动过滑动查看到下面的内容。
注:为啥我不用拖拽呢?
一、拖拽的效果很生硬;
二、执行拖拽时,内容可以在Y轴不停的向上拖。而滚动效果会出现类似拉倒底部的回弹下过;
· 页面(Page):设定后,内容可以像淘宝顶部的 Banner 一样,一整张滑动(你不滑它不动,不能坐上来自己动)。
补充说明:见下图,原理和滚动差不多,就是通过设置交互效果后,看到另外一部分内容。
原谅我放在这么得罪强迫症的位置
联动
做联动效果有个前提,必须页面中某个元素在 X 或 Y 轴上发生变化。即针页面中已经设置了『拖拽』、『滚动』、『页面』任意效果。
联动的原理是:当页面中的某个元素X轴或Y轴的值发生变化时,指定元素的属性发生变化,这个属性可能是:X、Y、宽度等等。
如下图:当页面内容左右切换时,导航栏的『黄色条』同时左右滑动,导航栏的文字『产品经理』、『UI设计师』透明度也同时发生变化。(之后实际讲案例再说明~)
彩蛋:Principle 源文件可以在 iOS 的 Principle(应用名)直接打开,所以,你还可以用 Principle 来表白。
下一篇:联动效果,未完待续~
Principle 学习群,有兴趣可以加微信:tianlan1025
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册