希望 Principle 可以帮助大家提高工作的沟通效率~

0、首先问一个问题：为什么我要用Princip？

1、直观的展示按钮、页面之间的逻辑关系；

点击这个按钮会跳到哪里去，如何进入到某个页面当中。

2、向开发或者其他成员展示我期望的设计效果；

这个按钮点击后会呈现一个什么样的效果；页面之间的专场是怎样的；

所以我对交互工具的要求是：快速、简单、即时修改；

1、Principle是什么？

Principle（以下简称 PP）是一个交互原型制作工具，可以让你的原型、设计稿动起来，然后同步到手机app 上，像真实使用 app 一样操作。

2、Principle能做什么？

产出物：

PP适合做『单页面交互展示，如：列表滚动、导航切换』、『页面转场效果展示，如：底部栏切换、页面跳转』、『 loding 样式』等。

推荐：用PP去做展示单一业务线的交互展示；

不推荐：用PP去做整个产品的交互展示；

工作辅助：

我之前的工作中经常会用到 PP，我会把产出，通过 PP 制作成可操作的原型，然后在给领导、甲方等成员介绍时，一遍说明一遍操作，直观的告诉他们，我是怎样做的。

等落地开发的时候，程序员有时无法理解到你的动效的真实效果，我也会通过 PP 去制作一个效果，展示我期望的动效是怎么样的，然后让他们真实还原。

所以，PP 最大的价值是：辅助我们设计成员更清晰的让别人理解到我们的设计是什么，是怎样的。

提示：如果你要做一些很炫的东西，还是推荐你用 AE，PP 是个生产力工具，炫技有点吃力不讨好。

3、案例

Image title

单页面交互：列表滚动、导航切换

Image title

页面跳转

Image title

Tab切换

Image title

Loading

4、Principle的交互原理？

4.1、单页面

单页面的交互分为『独立』和『联动』两个类型：

独立

页面中单个元素发生变化，对标 app 中的列表滚动、Banner 滑动等切换效果。

Image title

独立的交互效果包括：静态（Static）、拖拽（Drag）、滚动（Scroll）、页面（Page）

· 静态（Static）：默认效果，即啥也不能做。

· 拖拽（Drag）：设定后，被设置的元素即可以按照设定的方向进行随意拖动，拖到哪停到哪。

Image title

Image title

· 滚动（Scroll）：设定后，元素可以在X轴或者Y轴进行滚动操作，类似微信的好友列表滚动。

补充说明：见下图，职位list-1 组的范围实际知道第四个块的一半的位置，如果我想看到第五个，那么就可以通过设置Y轴滚动，然后动过滑动查看到下面的内容。

Image title

Image title

注：为啥我不用拖拽呢？

一、拖拽的效果很生硬；

二、执行拖拽时，内容可以在Y轴不停的向上拖。而滚动效果会出现类似拉倒底部的回弹下过；

· 页面（Page）：设定后，内容可以像淘宝顶部的 Banner 一样，一整张滑动（你不滑它不动，不能坐上来自己动）。

补充说明：见下图，原理和滚动差不多，就是通过设置交互效果后，看到另外一部分内容。

Image title

Image title

原谅我放在这么得罪强迫症的位置

联动

做联动效果有个前提，必须页面中某个元素在 X 或 Y 轴上发生变化。即针页面中已经设置了『拖拽』、『滚动』、『页面』任意效果。

Image title

联动的原理是：当页面中的某个元素X轴或Y轴的值发生变化时，指定元素的属性发生变化，这个属性可能是：X、Y、宽度等等。

如下图：当页面内容左右切换时，导航栏的『黄色条』同时左右滑动，导航栏的文字『产品经理』、『UI设计师』透明度也同时发生变化。（之后实际讲案例再说明~）

Image title

彩蛋：Principle 源文件可以在 iOS 的 Principle（应用名）直接打开，所以，你还可以用 Principle 来表白。

Image title

下一篇：联动效果，未完待续~

Principle 学习群，有兴趣可以加微信：tianlan1025