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
也可以新浪微博私信@火柴大男人
