进阶神器，H5辅助工具进击！

现在在营销策划中，动不动就会在策划案中看到H5需求。

新产品发布，要H5；活动推广，要H5；创意营销，要H5；热点借势，要H5；营销小游戏，要H5......

虽然在直播以及网红的火热之下，H5页面的话题没有去年那么火，但是经过几年的发展，基本也成了营销运营中的标配。

既然这样，是时候再推荐一些H5策划、创意、创作神器了。2015年年初有发过《免费H5页面制作工具大汇总》一文，推荐了一些简单实用的H5页面制作工具，受到了很多网友的欢迎。这次，就不推荐这些工具了，而是其他一些相关的辅助神器。

1 Placeit，快速生成演示图

Place it这个工具，可以生成各种设备静态页面演示图，比如iPhone 7、iPhone 6 plus、iPhone SE、Macbook等。如果你要做那种手握手机、平板或电脑里各种显示界面的演示图，不必到处找素材P图了，在这里，操作非常简单，只需要挑模板——上传图片——截取图片尺寸——完成。

每个演示用的模板上都附有标准尺寸，上传图片就可立即生成各种手拿iPhone、iMac，kindle等的图片，很大气。

地址：

2 界面设计协作神器

15年年底开始兴起的一个界面设计协作神器——Figma，图形设计功能强大、支持多人编辑与多人实时评论，还可以随意保存历史版本，简直堪称设计界的Google Docs。

网上有人说它像Photoshop，但其实它不具备图像处理功能，真正有得一拼的反而是Adobe Illustrator、Sketch，都支持复杂的锚点变化。但我们去下载AI也接近1G内存吧？Sketch还只支持Mac系统。

如果下次你团队要一起设计H5的界面，强烈推荐尝试一下。

地址：

另外，纯设计稿的云协作还有国内的白板、你可以把你的H5页面设计稿上传，把链接发给别人就可以进行实时的点评。

白板是一款设计图实时讨论工具，以原地作标记的方式与团队进行实时讨论，同时可以简单轻松地收集和整理反馈，节省团队沟通成本，让每天的设计工作变得高质高效。

地址：

3 交互动效最全收录

如果想在H5上参照各种丰富的交互动效，可以用Elasticode。

它有很多供你借鉴的交互动效，包括按钮的点击、页面切换/跳转、文字、图片素材出现/消失、元素变换等等，你H5页面的很多效果都可以在这里查看和参考，你可以很直观的观看交互的过程。

地址：

另外，如果你想做大屏H5广告，动效的选择和参考那就要更高大上点，这里推荐一个专门收集PC端视觉动效案例的网站——Codrops。它有很多可以在线预览、兼具视觉化以及交互性的动效，并且每个案例后面都附有相对应的代码。

地址：

4 专业的自动颜色搭配

专业配色，国内比较多用Adobe Kuler，调色盘方便，方案也很多。但如果你英文凑活，可以试试Coolors，配色方案强大，也支持上传图片取色。

它还有一个不错的优势：点击“Generate”(生成)，就会得到随机推荐的一套配色方案，你可以拖拽调换颜色位置，调出相近色阶列表，调整整体方案的色调、饱和度、亮度、冷暖度。

地址：

另外，也可以使用谷歌开发的自动颜色搭配网站Material palette，只需勾选两个主颜色，就可以自动生成色阶相近、协调度高的配色列表。非常快捷，小白都能有一定的配色能力。

地址：

5 H5创意源泉

在H5的设计灵感和创意的借鉴上，推荐哇呸网，这里对各种H5页面进行了具体的分类：时间、阅读量、推荐、行业等，能更简便、精准地找到自己想要借鉴的H5类型。

地址：

还有，在页面的创意策划上，可以参考APP界面设计，学习字体字号选择、颜色搭配、交互设计等等元素，比如UX Archive，就保存了很多诸如Facebook等APP的截图。

地址：

整理自iH5创作研究室

木木老贼（公众号ID：mumuseo）

这是一个什么都谈谈的营销运营公众号，新鲜、有趣、有料。多一点真诚，少一点套路，给在理想道路上努力打拼的营销人，加点燃料。