Axure 实现产品原型侧边栏效果

1:当前 手机APP 绝大部分 采用的 是微信这种布局方式 早已审美疲劳

---

2:今天我们要讲的是另一种比较流行,交互方式  <侧边栏>  其实很多应用都会加一些侧栏的交互  比如 QQ  但说到彻底使用侧边栏来主交互效果的是   <陌陌>  的二弟    <探探>

---

3: <侧边栏> 这种效果 在 Android   iOS 开发中 早已有大牛 写好框架了 比如iOS 中的 MMDrawerController 而我们今天要说的是在 AUXRE 做产品原型时如何实现。

4：在这里吐槽 一下 笔者 作为程序员也待过几家公司 ，但从来没有一家公司 的 产品经理 做产品原型 时 用Auxre 类似工具做一个带交互的原型交互图..基本都画张图.至于交互逻辑 全靠嘴巴说..往往前端 开发人员 需要经常问产品经理 怎么交互.才能进行开发..如果遇到比较吊的 产品经理 估计心里.........  

5:综上所述原因  关于产品原型的一些交互逻辑  相应的解决 方案不多 笔者要做<侧边栏>时也在网上找了很久,并没有找到相应方案.所以只能自己动手做..现分享出来   效果图如下

---

6:实现方案在这里 简单说明一下 具体下载 RP 文件慢慢研究  

 一 : 用 A  B 两个动态面板   B 覆盖 A 这样只能看到一B 

二：A 动态面板有添加 状态   状态1 放五个按钮   状态2  放一张图片

三：B动态面板添加 五个状态   分别对   A动态面板上的 五个按钮的点击事件

四：设置B动态面板 可以水平移动  当 B动态面板的 X>0 说明 B 是向右移动了  反之 则向左移动了

五：在  B动态面板   < 移动时>  写判断  如果移动的 X > 0  设置 A 动态面板为状态1  移动 X < 0时  设置 A 动态面板为状态2

六: 在 B动态面板   < 移动结束时> 写判断 如果移动的 X > 80 设置 B 移动到 绝对位置 X 250  Y 0   如果移动 X <80  就回到原来位置也就是  X 0  Y0..

七:相应的其它交互效果  都是根据不同的值 来判断 的这里就不一一列举了..

---

工程文件  rp HTML 文件点这里   kylin_siderbar

也可以新浪微博私信@火柴大男人