Axure操刀微信H5页面之《加密情书》的交互设计

不知道从什么时候，H5开始借着微信平台风靡移动互联网，H5小游戏，H5广告等，在朋友圈随处可见。另外各种H5页面制作工具也真是出不穷，这里就不一一列举了。但是作为一个老牌原型设计工具的Axure，在H5时代，又怎么能甘拜下风，其功能的强大也不是哪个H5小工具随随便便就能匹敌的，但又不得不承认，在这方面，Axure也存在很多弊端，越高的灵活性就导致了越高的复杂性。至于如何取舍，还需各位自行斟酌。

本文我主要通过一个案例来说明用Axure制作H5页面（可能严格意义上，Axure的输出不能算作H5）的时候，形状、动态面板、事件、动作、判断条件等的用法与技巧。另外我之所以选择用Axure制作一个H5案例，正是看中它的灵活性（虽然这个过程有点复杂，那又有什么关系）。

原型预览

下面先来看一下案例（最强大脑之加密情书）原型图：

案例说明：

这个案例可以说是一个益智类的小游戏，主题是破解一封加密的情书，而破解方式是通过拖动九宫格中的色块到心形位置，最终拼好一个完整的心形，拼好心形之后，心形中的方块上会逐一出现文字（也就是情书的内容了），内容显示完整之后，游戏结束。另外由于原型实现的复杂性，没有做更多的设计（比如每次拼图的色块形状不同，计时或者倒计时，响应式布局等等）。

或访问原型地址：

交互说明

那接下来就为大家剖析一下这个H5原型中的交互设计，以及如何使用Axure来实现这些功能，并且我将按照原型由整体到局部的顺序来讲解。

交互1：固定H5页面，不随手指的上下左右滑动而移动

通常情况下，用微信打开网页，在页面顶部下滑或者在页面底部上滑的时候，会导致页面继续向下或向上移动，并且露出页面外的深灰色区域，如下图中的样子。

但是通常在很多H5的页面中不会出现这样的情况，无论你如何滑动屏幕，页面总会安安稳稳的呆在微信的窗口中，一动不动。那么这种效果如何实现呢？

实现方法：使用动态面板，增加空白拖动事件。

说明：所谓空白拖动事件，就是在动态面板上增加一个拖动事件，但是该事件下部添加任何动作；之后用动态面板覆盖整个页面（就是尽量把所有的页面元素都转化为动态面板，然后每个动态面板上都增加一个空白的拖动事件）。这样就能保证在页面上滑动的时候，整个页面一动不动。

交互2：页面自适应窗口高度和宽度

其实这么说不是很准确，因为并不是页面的大小在随窗口的变化而变化，而是页面上元素的大小或位置因窗口大小的变化而变化。本案例中多次用到自适应页面宽度（指交互1中涉及到的部分动态面板）以及动态设置元素位置位置来适应窗口大小的变化（也可以理解为对主流手机屏幕尺寸的适配）。

比如交互1中提到的使用动态面板来固定屏幕，那么就需要动态面板能够覆盖整个窗口（不管窗口大小如何变化）。以及页面底部文字的位置，永远距离页面底部10像素，也不会因为屏幕尺寸的改变而发生位移。

实现方法：动态面板固定到浏览器&设置面板尺寸&移动

动态面板固定到浏览器并勾选100%宽度，可以实现动态面板自动随窗口宽度而调整。

设置面板尺寸可以通过一个事件（本案例使用的页面加载时）来动态设置动态面板的高宽尺寸。本案例用来实现页面加载时，使动态面板铺满窗口，所以设置面板尺寸为等同与窗口的高和宽，这里需要配合函数的使用。

移动，这里说的是一个动作，可以将一个部件移动到指定的位置，配合函数使用，可以使原件移动到一个相对固定的位置。本案例中也是在页面加载时执行该操作，从而使页面的底部文字时刻保持在距离页面底部10个像素的位置。

交互3：跟随拖动效果

这是一个较为基础的交互设计，通过鼠标拖拽或者手指滑动，来使对象跟随鼠标或手指进行移动。本案例中拖动色块就是采用的这种实现方式。

实现方法：使用动态面板，增加拖动事件及移动动作

移动事件有多种移动方式，本案例中选用的是跟随拖动，其他移动方式，大家可自行尝试，按需使用。

交互4：拖动到固定位置后将其锁定不再允许拖动