HTML5，也就是我们常说的H5，它是一种标记语言，主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面，一是丰富的动效支持，二是查看方便。H5近年来越来越受到人们的喜爱。

但是，使用H5做开发，并不是人人都能做的，需要大量的编程语言和开发的基础，而一些所谓的简单设计H5的工具功能又不完善。如果我不会js，不会HTML5语言，怎么能做出一个“类H5”的简单App呢？

作为产品小白的熊先生最近正在闷头做原型，在制作的过程中忽然发现，自己的设计其实完全可以应用到H5网页这样的推广当中。最近正在做一个旅游相关的app，那么我就帮忙帮到底，做一个旅游活动推广的“类H5”推广原型吧。

开始之前，我们需要确定一个原型设计工具，就用Mockplus好了，最近一直在用，拿来也比较顺手。

然后，列好大钢，编辑项目树。良好的规划是优秀的设计中必不可少的一部分。

接下来，我们开始页面的设计。

第一步：载入动画。

载入动画是H5页面标志性的效果之一，“类H5”当然也不能忘记这一点。

方法：导入需要的图片，根据页面的内容，设置某些组件为不可见；拖拽它们各自的链接点设置“载入时”显示自己的交互效果。并且给部分组件设置上移动的动画效果，使得整个页面更加生动。

第二步：设置交互效果。

使用原型设计工具来设置“类H5”网页最大的优势就在于：原型设计工具有更多的交互效果，你想要的总有办法可以实现。这里我们先简单的设置一些弹窗的效果。比如，关于旅行社的介绍、导游的相关资质、旅游线路的介绍等等。

方法：拖拽出相应的弹窗组件，双击打开设计。然后拖拽页面中组件的链接点到弹窗上，最后设置弹出的效果。

第三步：页面跳转。

在用户比较感兴趣的内容区域设置页面的跳转，重点内容用新的页面来讲解，减少其他内容的干扰，不仅保证了吸引用户的眼球，更加保障页面运行的流畅程度。

方法：设置页面的跳转效果对原型设计工具来说完全是小菜一碟，Mockplus只需要一个简单的拖拽动作就可以搞定了。

第四部：在线发布。

设计做的再好，没人欣赏怎么行？可是，要怎么才能把这样一个“类H5”的原型项目发出去呢？

方法：发布。有了这个功能，你就可以把做好的作品上传到Mockplus的服务器，然后拿着这个链接分享给你的客户们了。而且，Mockplus可以很简单的就做到全屏演示的效果。怎么样，是不是很神奇？

设计的内容比较简单，主要是希望大家能够明白这个意思。

熊先生觉得：市场也好，设计也好，我们更注重的是得到的结果，而不是手中的工具。虽然使用原型设计工具来实现H5网页似乎有些风马牛不相及，但是只要能够解决实际的问题，何必要墨守在固定的模式里呢？