本文作者将与我们分享如何使用Axure创建H5活动页面，而不讨论此页面交互的合理性。享受〜

最近，我开发了一个H5活动页面。那时，我只是画了一个线框。活动结束后，我没有玩游戏而且我单身，因为我下班后感到无聊（你看，为了防止低调的键盘男人喷雾&ldquo Studying Axure有尴尬的意思，逻辑上严格的资格产品经理补充说，并花了一些时间制作高保真原型，如下（避免广告怀疑，更换所有图片和文字）：

点击此处预览

正如你所看到的，它是一个相对简单的页面，但无数比我做的更简单。甚至……简单的页面，人们已经开始写文章，大多数写作例程都是先行。第二步，第三步，看到它后，等着你重复，似乎已经进入了北京的迷雾，我不得不要求“大申”发送一个源文件供以后学习（抄袭），这是一个很好的见证。 “我听过很多真相，但我的生活仍然很糟糕。”甚至……复制对今生来说并不好，虽然我很惭愧，因为我没有复制它，不，它太好了… &hellip这是我生命的前半部分，但最后我还是不能原谅它。我也分两步学习整套步骤。

当然，本文并未谈及此页面交互的合理性，纯粹是从如何使用Axure进行分析。

互动过程

也就是说，在获得页面后，从直观的交互或流行的点，从直观的视图，你可以得到声音，看看它是什么样的：

打开页面后，您将看到一张图片，然后底部的箭头会摇晃并摇晃，诱使您向上拖动

所以，忍不住将手指向上拖动到屏幕上，它是一个页面，底部的箭头仍然在颤抖，继续拖动

拖了几页之后，底部的箭头消失了，但是因为我之前已经拖出了惯性，我没有停下车，所以我下意识地把它拖了下来，或者及时停了车，看到了诱饵点击页面。该区域，只是转到下一个，所以页面会弹出一个带有段落的窗口，以及一个巨大的分享按钮

所以我受到文本信息的诱惑，我以为我已经滑了这么多页面。我只想再次分享。我会下意识地分享图片上的分享按钮。众所周知，微信不支持直接点击共享。微信附带共享按钮进行分享，但是因为有些用户还没有意识到它，所以另一层提示用户通过微信右上角的按钮然后共享它。至于最终用户要分享，这取决于命运。 p>

那么，从用户操作过程的角度来看，它可能就是这样一个交互过程。

逻辑分裂

这弄明了整个页面的流程，是否可以直接逐步启动原型？当然不。这就像拿一块牛排，只是直接咬它，除非它与普通人不同，或者它根本不是一个人，否则你必须拿刀和叉来比较笔画。

在这里，根据整个交互过程，我们可以先拆分它。不同生活习惯和不同思维方式的人面对这样一个页面，肯定会有不同的拆解方法，即使我自己也在做这个页面。当时，我已经考虑了几种分割方法，并且我已经考虑了每种分割模块的几种实现方法。让我谈谈我最终使用的分裂：

主页：可以切换以切换图像的页面，当然，您也可以切换回上一个图像

弹出窗口：单击滑动到最后一张图片时想要单击的区域，或者继续弹出弹出窗口

遮罩：点击弹出窗口进行分享，会出现灰色图层，再次点击灰色图层，遮罩将消失

箭头：一个循环显示前几页的动画（即一直在摇晃），箭头在最后一页消失

完成上述所有页面的逻辑，然后将它们组合在一起

在第一次分裂过程之后，我不知道它是否有一些想法。也许我知道我脑子里的方向？然后，继续。

“支持解决方案”

经过上面的分析，也许这个想法更加清晰，虽然这个页面很简单，但这次可能仍然觉得还有细节，比如将牛排切成几块大块，只为自己找出大小的嘴太高估了。叉子掉到嘴边，发现有点堵塞，所以我不得不把它拿出来继续切割。

然后继续拆分，原则是在拆分后总是拆分每个模块，以便能够让它停止拆分：

1.主页

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

（1）主页中的图片列表可以上下拖动

（2）图像始终显示在屏幕的可见范围内

分析：

因为存在拖动，所以首先想到的是使用动态面板;由于拖动结束或进程，页面将发生变化，因此动态面板中应该有多个状态;然后不同的页面属于不同的状态。添加相关操作以在拖动相关事件中设置面板状态

说明您需要一整套来控制可见范围，例如将拖动的动态面板嵌套在固定大小的动态面板中

2.弹出窗口

滑动到最后一张图片时，单击诱惑点击的区域，或者继续弹出出现的弹​​出窗口。

（1）滑动到最后一页继续向上滑动会出现

（2）滑动到最后一页并单击要显示的区域的下半部分

（3）最后一页返回上一页，然后滑到最后一页，将重置为初始状态

分析：

结合之前的分析，您可以在动态面板的最后一个状态中进行一些特殊处理。例如，拖动结束时的事件将添加弹出窗口的操作

结合之前的分析，在动态面板的最后一个状态中，您需要设置click事件并添加弹出窗口的操作

请注意，当拖动结束时，应隐藏弹出窗口，或者应将动态面板的状态切换到初始状态

3.蒙古层

单击弹出窗口进行共享，将出现灰色蒙版，再次单击灰色蒙版，蒙版将消失。

（1）单击“共享”按钮以显示灰色掩码

（2）单击遮罩，遮罩消失

分析：

在共享按钮上添加了单击事件，并添加了一个单击以弹出灰色蒙版。

在灰色蒙版上添加了单击事件，并添加了单击

箭头

在前几页中，动画循环播放（即，它一直在摇动），最后一页上的箭头消失。

（1）循环显示的动画

（2）最后一张图片底部没有箭头

分析：

动画效果可以分为箭头，箭头向上移动，箭头隐藏整个过程，然后循环，如何循环，这需要考虑

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

具体实施

可以说，基本思想和操作方法已经非常清楚了。基本上，每块切好的肉都可以送到嘴里，然后你可以开始用Axure书写，然后我省略了一些非关键步骤，并向你展示了如何实现它。当你实现它时，你应该注意如何实现上述分析，而不是仅考虑复制步骤，毕竟是权威人士。这不一定是真的，其他人不一定说得好，甚至每个人都可以提出更好的解决方案：

1.主页

（1）在移动电话屏幕的可见范围内添加动态面板（外部容器），移除导航栏和系统栏后，其大小与屏幕大小相同。这是为了将内部内容控制在这样的范围内。 。

（2）在动态面板的默认状态下，添加动态面板（图片主页），用于切换图片状态。

（3）在图像主页的动态面板中添加多个状态，并在每个不同的状态下放置图片。

（4）为了使页面可拖动，在图像主页的动态面板中，添加向上拖动和向下拖动结束的事件，分别在事件中添加相应的动作（即设置面板状态向上滑动并将面板状态设置为向下滑动。对于人性化，您还可以设置相应的进入和退出动画。

2.弹出窗口

我在这里使用的方法是在动态面板的最后一个状态（图像主页），即5，创建动态面板（最后一页），添加两个状态，然后滑动到图像主页动态面板。在最后一个状态中，弹出窗口的效果是通过切换状态来实现的。一个是图中的初始状态，另一个是弹出状态，弹出状态是包含弹出窗口的组件。

当然，您可以使用其他方法，例如将窗口设置为根据不同事件隐藏和显示。

弹出窗口的外观逻辑是最后一页。向上拖动动态面板时，面板状态设置为弹出状态，拖动完成后，面板将重置为初始状态。

3.蒙古层

根据前面的分析，掩码的逻辑建立在弹出窗口的逻辑上，并且掩码只有两种显示状态和隐藏状态。鉴于上面弹出窗口的设计，可以更好地处理掩模。首先，要注意图层的顺序，即蒙版需要在弹出窗口上方，然后只需要设置蒙版显示并在弹出的情况下根据不同的情况隐藏state（在共享按钮上设置click事件），添加遮罩层的显示操作，将click事件设置为遮罩层本身，并添加遮罩层的隐藏操作。

设置共享按钮的单击事件：

在灰色蒙版上设置单击事件：

箭头

当我在头版上工作时，我已经有一个箭头图标，但它是一个静态图标，没有添加任何时间。目前，整个页面都留有与此箭头关联的逻辑。它由两个，一个组成。它是箭头的循环动画。一种是在主页切换到状态5时自动隐藏。后者相对更好，如下所示：

箭头的循环动画，如何实现它，首先看一下结果：

可以看出，先前的静态图标已更改为动态面板（箭头转换），其中添加了两个状态。 State1中的箭头位于动态面板下方，State2中的箭头位于动态面板上。位置并添加了两个活动：

（1）状态改变时

当箭头处于动态面板下方的状态时，箭头将变为动态面板上方的状态，并使用动画切换状态，以便箭头从下方向上移动。移动完成后，箭头将被隐藏。当箭头处于动态面板上方的状态时，箭头将更改为动态面板下方的状态。在这种情况下，当它处于状态1时，它在状态2中切换到状态2，并切换到状态1逻辑。但是，如果您只设置幻灯片，您会发现预览时箭头仍然不会移动。这是因为我们没有触发动作，所以我们需要添加另一个事件

（2）加载时

在这种情况下，将动态面板的状态设置为State2，这将触发上述状态更改的逻辑，从而实现循环效果

此时，整个页面的逻辑就完成了。有些人可能已经看过了。我还是觉得有些地方不懂。我建议你回去看看。事实上，核心思想是分割页面逻辑并将其拆分为每个组件，事件和操作对您来说都很熟悉，因此您可以看到它。对于某些基本原件，事件和操作，您仍需要进行一些控制。否则，即使您拆分页面。有一个小逻辑，但仍然没有办法开始集成。

至于困难，整体实际上比较简单。对于初学者来说，很难说：

动态面板的基本用法

如何使用动态面板来实现循环动画效果

事实上，只要你花一两个小时学习，每个人都可以学习，就像“每个人都是产品经理”一样。毕竟，我们只使用软件，而不是开发软件。

最后，我想说的是，尽管我已经取得了这样的效果，但它并不一定是唯一且最好的方法。在某些链接或细节中，我自己尝试了其他方法。你也可以考虑其他方式来实现，因为我不一定是对的，其他人不会立即同意，除非思考后是合理和正确的。

« 贾跃亭多次抵押豪宅贷款：一次为乐视控股和LeTV.cn | 一晚上订购的话，预计销售额会达到100万元吗？知道的瓜数据分析带你去淘宝直播的那些事 »