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