设计师如何快速制作H5——​PSD一键转H5技能get

设计师如何快速制作H5——​PSD一键转H5技能get

随着H5越来越热，很多设计公司也接到越来越多的H5制作项目。大多数设计公司&设计师视觉做的炒鸡赞，但不会编写代码，借助H5制作平台就可以0代码，快速制作H5。因为我经常使用人人秀，一是工作原因，还有就是人人秀支持直接上传PSD便可分层编辑，这对于设计师来说简直就是制作h5的利器，另外比较喜欢人人秀支持非常多的在线编辑方正字体，我个人也比较喜欢方正字库很多系列字体，后期客户要求修改文案什么的比较方便。最近抽出时间，整理了一下人人秀的使用教程，精简版，如果后面反响强烈，我再继续更新.

PSD一键转H5技能get

登录人人秀官网，在我的场景里可以找到【创建场景】选项，如图红框位置所示。点击【创建场景】选项之后，即可进入场景创建界面了，可以创建一个空白场景，也可以使用其它作者已经创建好的场景模板。

在这里我们选择自主创建一个模板，点击【空白模板】选项，即可进入场景的创建界面了。

点击右方的【背景图片】区域，可以弹出背景素材库，为自己制作的场景选择漂亮的背景如图红框位置所示。这里有很多的背景图片，不过我通常都是自己画，设计师们应该也都是自己设计背景比较多。

重要的事情来了！！设计师们万分期待的PSD一键转H5功能来了！点击右上红框里的【PSD】按钮

这时会弹出psd上传的对话窗口，点击【PSD导入】

选择已经做好的PSD分层设计稿，点击【上传】

就这样，PSD设计稿就变成了H5页面，可以看到右边分层已经是系统自动解析分层好了的。

直接点击图片就可以在右侧设置动画模式，包括动画时间、出场动画、循环次数。

点击右边菜单栏里的【音乐】，【文字】等功能选项，可以在制作的场景里添加音乐背景，文字等，选择添加的文字，也可对文字进行编辑，设置表单等。大家可能会注意到互动功能，这里是更高级的互动模式，以后有机会再跟大家介绍，也可以自行去探索，很有趣。

有需要的也可以直接在平台购买方正字体用于人人秀平台H5的使用

按照刚才PSD一键转H5的方法，把其他页面也都上传上来，调整完点击右上的发布按钮。

设置分享头像、分享标题、翻页动画，现在一个完整的H5就做完啦，这种神速，真是一言不合就可以做H5了呢。

发布完以后会自动生成二维码以及推广链接，可以扫码分享朋友圈或者给到客户

如果想知道这支H5的数据统计情况，点击【流量统计】就可以看到浏览量（PV）、独立访客（UV）、分享次数、分享渠道等实时数据统计。