工具的选择并不是越多人使用越好。 像Axure这样的专业原型制作软件，在规模、定位方面远远不及iH5。 但是，后者在与人交流和观看时是有利的。
最近，支付宝(Alipay )进行了比较大的版本更新，引起了很多人的关注，无论是视觉上还是交互体验上都发生了很大的变化，但从原型制作来说，变得比以前更简单了。
模仿这些知名厂商的产品，是快速进步的一种方法，可以更好地借鉴他们的相互作用和逻辑，比体验和观看更深入地了解，从而更好地改进自己的产品。
说到原型，很多人会想到Axure吧。 这些常用的原型工具使用HTML规范，并使用引入了大部分动态效果和交互效果的jQuery库或封装的JS库，其效果可以通过软件进行预览和http
也有很多与其原理相似的东西。 例如，定位在开发工具上的动画效果要比Axure的效果强得多。 此外，还有谷歌的web设计，以及在国内在线制作平台的iH5。 他们以基础的交互为对象，可以自由编辑，不仅可以制作H5实例，还可以用于原型。
这些工具可以分为在线和离线两种制作方式。 我个人更偏向于使用在线制作工具。 因为离线工具生成的原型不方便给别人看，而且制作很大程度上依赖软件的安装，不方便和别人实时观看。
临摹时，不需要事先过多分析，只要了解大致的互动，直接动手就可以了。
工具： iH5
资料准备：用手机截去新版支付屏，移动到PS上用切片分成各个模块。 例如导航栏、对话框等。
Step1：页面切换
说明：下部导航的切换操作、页面跳转、图标变为蓝色。 单击事件可以控制两种状态：蒙版移动和页面跳转。
创建新的时间轴，然后在下面创建画布。 放置两个蓝色和灰色的底部导航栏和一个与图标大小相同的白色矩形，将蓝色导航图像的属性——遮罩在其中，然后选择白色矩形。 接下来，在四边形下创建轨迹。 四个关键帧分别对应四个图标。
创建四个页面以在舞台上存储导航内容。
在图标位置添加透明按钮，在图标下方添加事件，点击后跳转到页面，并跳转到该时间轴的帧。
Step2：浮动导航
说明：页面稍微滑动一下，顶部导航栏就会发生变化。 通过监视时间轴滑动的时间，触发菜单栏的更换。
在第1页上，创建新的幻灯片时间轴，并将所有素材放入其中。 重叠两个顶部导航，将音轨添加到内容中，然后向下滑动。 1秒钟内向下滑动，将两个事件添加到初始默认导航中。 滑动时间线滑动0.1秒后位于下方，时间为0时位于顶部。
Step3：滑动切换
说明：像图像的轮播效果一样，将不可见的图像放置或隐藏在画面之外，用手指的左右幻灯片控制图像的进出。
在第2页中，将准备好的3张轮播图、3个空心圆圈的PNG图像以及与圆圈大致相同大小的矩形放入幻灯片时间轴下，创建新的轨迹，创建3个关键帧。 通过调整图像坐标来控制各帧中显示的图像。 诚心大树滑动后，图像的轮播效果就会显现出来。 如果需要将链接添加到图像中，请直接将单击事件添加到该图像中，并将其行为设置为跳转
Step4：弹框
说明：点击按钮后出现弹框，然后点击其周围后弹框消失。 设定好弹框动画后，利用事件控制正向和反向播放即可。
在页面3中，准备黑色的背景图像和设计的弹框，将其放入时间轴下，使用轨迹制作想要的效果。 在背景的“”中添加透明按钮以添加事件。 单击可从头开始播放时间轴，在黑色背景下添加相同的事件，并将动作更改为反向播放。
在其他的交流中，除了页面的跳转外，原型制作也没有太大的压力。
创建完成后，可以发布。 生成网站的链接和二维码，可以在线编辑和查看。
总结：
要想把工作做好，必须先利用其器皿，工具的选择并不是越多人使用越好。 像Axure这样的专业原型制作软件，在规模、定位方面远远不及上面使用的iH5。 后者必须用x|y坐标等进行正确的控制。 另外，手机图标等模板也很多，可以大大加快原型制作，但后者有利于与人的交流和浏览，随着H5营销的流行，相关的营销案例也迅速制作出来，进入这篇文章是@iood原创，人人都是产品经理。 未经许可禁止转载。