近日，开发了一个H5的活动页面，当时只简单的画了个线框图，活动上线以后，不玩游戏且单身的我，由于下班后闲来无聊(你看，为了防止眼高手低的键盘侠喷“研究Axure有啥意义”，逻辑严密的本产品经理加了多少限定条件)，便又花了点时间做了个高保真的原型，如下(为避广告嫌疑，替换了所有的图片和文本)：

　　点击此处预览

　　如各位所见，确乎是个比较简单的页面，但无数比我这做的还简单，甚至……简陋的页面，都有人拿出来写了文章，而且大部分写作套路都是上来就第一步第二步第三步，看过之后等自己想要重复，就仿佛进入了北京的雾，只好求“大神”发个源文件，以供后面学习(抄袭)，很好的印证了“听过很多道理，却依旧过不好这一生”，甚至……抄都抄不好这一生，虽然我十分羞愧，因为我也没抄好，不对，是过好……这前半生，但最终我还是没能免俗，也来学学别人一步两步的整点套路。

　　当然，本文不谈论这个页面交互上的合理性，纯从怎么样用Axure将它制作出来来展开分析。

　　交互过程

　　也就是拿到一个页面后，从直观的交互上，或者通俗点，从直观的看得到摸得到听得到的，看它大概是怎样的情况：

　　打开页面后，看到一张图，然后底部有个箭头在往上抖啊抖，引诱着你往上拖

　　于是，情不自禁的将手指在屏幕上往上一拖，又是一个页面，底部的箭头依然在抖啊抖，继续拖

　　拖了几页以后，底部的箭头没了，但由于之前拖出了惯性，没刹住车，所以还是下意识往上拖了一下，或者是及时刹住了车，看到了页面上的引诱点击的区域，就去点了下，于是页面就弹出了一个窗口，上面写了一段话，和一个硕大的分享按钮

　　于是被文字信息所继续诱惑，暗想都滑了这么多页了，索性再去分享一下，就下意识去点分享图片上的分享按钮，众所周知的是微信里是不支持直接点击分享的，必须通过微信自带的分享按钮进行分享，但由于担心有的用户还不知，于是又一个蒙层提示用户得去通过微信右上角的按钮然后再去分享，至于最终用户是否分享，就看缘分了

　　好，从用户操作的流程上来看，大概就是这么一个交互的过程。

　　逻辑拆分

　　那弄清楚了整个页面的流程，是不是就直接开始一步一步做原型了呢?当然，不是。就好比上了一块牛排，是不是直接就开口咬呢，除非口异于常人，或者压根就不是人，否则都得老老实实拿刀叉先去比划比划。

　　那这里，根据整个交互过程，我们可以先把它怎样去拆分下呢，生活习惯和思维方式不同的人面对这样一个页面，肯定会有不同的拆法，就连我自己在做这个页面时，都思考过好几种拆法，而且每一个拆分出来的模块，我又思考了好几种实现方式，我先谈谈我自己最终使用的拆分：

　　主页：一个可以上滑切换图片的页面，当然也要可以下滑切换回上一张图片

　　弹窗：滑到最后一张图时点击引诱点击的区域，或者继续上滑会出现的弹窗

　　蒙层：在弹窗上面点击分享，会出现一个灰色蒙层，再次点击灰色蒙层，蒙层会消失

　　箭头：在前面几个页面循环展示(也就是一直在抖啊抖的)的动画，以及在最后一个页面箭头消失

　　完成以上所有页面的逻辑，然后将其组合到一起

　　经过第一道拆分工序以后，不知道是不是看起来有了点想法，大概脑袋里知道个方向了?那接下来，继续。

　　“支纷节解”

　　经过上面的一番紧要的分析，或许思路更加的清晰了，尽管这个页面十分简单，但这时可能还是会觉得，还是有细节问题，如同把牛排切开成几大块以后，才发现对自己嘴巴的尺寸过于高估，一叉子下去往嘴里送，发现有点堵，于是只好拿出来继续切。

　　那就继续进行拆分，原则就是一直拆到拆分后的每个模块都是自己能够搞定的就停止拆分：

　　1. 主页

　　一个可以上滑切换图片的页面，当然也要可以下滑切换回上一张图片。

　　(1)主页当中的图片列表，可以上下拖动

　　(2)图片始终显示在屏幕可见范围内

　　分析：

　　因为有拖动，所以第一想到的就是使用动态面板;由于拖动结束或者过程中，页面会发生改变，所以应该是动态面板里会有多个状态;然后不同的页面分属不同的状态，在拖动相关的事件里去添加设置面板状态的相关动作

　　说明需要整一个东西用来控制可见的范围，比如把拖动的那个动态面板嵌套在固定尺寸的动态面板里

　　2. 弹窗

　　滑到最后一张图时点击引诱点击的区域，或者继续上滑会出现的弹窗。

　　(1)滑到最后一页继续上滑会出现

　　(2)滑到最后一页点击下半部分区域会出现

　　(3)最后一页返回到上一页，再滑到最后一页，会重置为初始状态

　　分析：

　　结合前面的分析，可以采用在动态面板的最后一个状态里，做一些特殊的处理，比如向上拖动结束时的事件会添加出现弹窗的动作

　　结合前面的分析，说明在动态面板的最后一个状态里，要设置点击事件，并添加出现弹窗的动作

　　说明向上拖动结束时，弹窗应该要隐藏，或者是将动态面板的状态切换为某个初始状态

　　3. 蒙层

　　在弹窗上面点击分享，会出现一个灰色蒙层，再次点击灰色蒙层，蒙层会消失。

　　(1)点击分享按钮出现灰色蒙层

　　(2)点击蒙层，蒙层消失

　　分析：

　　在分享按钮上添加了点击事件，且添加点击后弹出灰色蒙层的动作

　　在灰色蒙层上添加了点击事件，且添加点击后蒙层消失的动作

　　4. 箭头

　　在前面几个页面循环展示(也就是一直在抖啊抖的)的动画，以及在最后一个页面箭头消失。

　　(1)循环展示的动画

　　(2)最后一张图片底部没有箭头

　　分析：

　　动画效果可以拆分为箭头出现，箭头上移，箭头隐藏整个过程，然后一直循环，如何循环呢，这个需要加以思考

　　说明需要根据主页面动态面板切换的状态来判断箭头是否显示

　　具体实现