怎么设计出有水平的H5？

说到H5，好多人都不知道是什么东西，我们来看一下啊，在WPS当中有H5啊

因为这部分有一部分粉丝问到我说诶这个WPS办公软件里面有一系列什么文字表格，这些我们都懂啊，H5是什么东西呢？它实际上是一个动画啊，比如说我们点开任何一个模板，那么这里面会有音乐啊，我们可以把音乐关掉。

然后点下一页下一页，它就会出现各种各样的动画，然后呢，以我们的这种呃广告的形式展示出来，那么除了WPS里面可以去做H5之外，那还能够做H5的还有很多啊。比如说我们的工作。拓展工作台啊。这个呢，也是有音乐的，这是一个中秋节的，我们音乐关掉啊。

也可以翻下一页下一页啊，有动画。然后呢，我们看在马克啊，这个里面也是有的啊，它也有音乐啊，然后呢把这个。

页面进行切换，我们在手机上是这样进行滑动啊，手机上看的话是上滑下滑，左滑右滑啊，非常方便，这个作为我们的广告的展示的话是非常有用的。

好，我们再来看最后一个平台，这是我经常用的，我相信大家经常会有看到仪器袖的这样一个名称，但是具体怎么去操作呢，好多人也是知之甚少啊，今天我们就来学一些如何去操作这个。

那首先第一步呢，我们得在里面去做设计啊，做设计的尺寸呢，在这里，我们的工具，如果说我们要去做设计的话，那我们去把它点击编辑就可以看得到啊。继续编辑。再继续编辑，里面我们有一个的按钮。

当我们点击按钮呢，这里就会跳出一个我们呃一个的设计尺寸，640乘以1040，劈叉劈叉，什么意思？PX啊，就是像素的意思啊。

那如果是呃。苹果手机的机型呢，就是640乘以1240。那我们android用的比较多，那我们就用1040啊，640乘以1040。那。首先，第一步是新建。新建以像素为单位啊，宽度是640高度呢是1040。啊1040，然后我们把它的分辨率呢，改成72，直接点确定就可以了。

那么这样就新建出一个页面，这个页面当中呢，至于它的一个设计，我们就不做详细的介绍，我把这个封面呢，给他复制过来啊，复制到我们的这个新的页面当中来去做一个。

嗯，安利啊。直接放在这里，那么这里面的图层我们需要注意些什么东西啊？就是这里面的涂层呢啊，比如说我们的这个主题字，它有描边有阴影，这属于什么属于我们当中的一个效果，这个效果呢，他在呃H5当中，它是体现不出来的，所以说我们在做完效果之后呢，把它转为智能对象，就把他反而变成一个单独的图层。

包括这部分描边，还有这部分的描边，投影等等这些啊。那有了这样一个设计之后啊，具体的操作呢，那么大家要对有一定的了解，呃，就非常好设计了，具体操作呢，就是在我们的工具里面去啊，在这里我退出。

退出之后呢，再去新建一个空白的啊，新建一个空白的。这里我们可以点到首页啊，点到免费模板。在这里有一个新建空白的啊，一个空白的创建，直接点击。啊，点击做H5，第一个。这就可以了。

那么进来之后呢，这就是一个空白的一个，呃H5，那么这个空白的H5，我们要在这里点这个导入PSD啊，直接上传我们的源文件那个源文件呢，我之前是有做过的一个源文件，那我就直接在这里导入就可以了啊，我们导入一下。这是最近做的一个开学活动啊，嗯。

直接点击就会进行导入，在这里有一个，嗯嗯，很重要的问题，就是呃，Photoshop的大小不超过30到，然后它的图层呢，不要超过啊，30个图层，那么图层越少越好啊，那么呃，倒进来之后呢，就在这里面去做动画做动画呢，当你点击的一个图层在右边就会出现一个动画的一个界面，我们点击动画在这里一个添加添加动画。比如说背景，我们一般给一个，嗯。中心。

缩小吧。背景一般我们给一个中心缩小，我们可以点击预览一下啊，看到没，那么这个网格呢，就在自动缩小啊，比如说我们的这个圆圈，我们可以添加一个动画，然后让它是旋转着进来啊，让他一个魔幻。向左。哎，然后我们预览一下，看到没。

嗯，神奇的一幕啊。那这个呢，我们可以让他有一个什么一个恶。强调性的动画就是不停的抖动啊，让它不停的抖动，让你勾选一下这个循环。

那左边这个呢，我们可以让他是从又进入。从右进入。或者向右移动。这里我们可以让它延迟一秒啊，然后呢就可以了。嗯。那么把中间这两个呢，同时，一起选中也可以去做动画啊，就在这里面点动画加，然后来一个中心放大。

中心放大之后呢，我让他的文字呢，后期还有一个不断的动画，那就点这个动画点强调去给，比如给一个抖动，然后在这里延迟一秒，让他进来之后，因为进来用了一秒，然后我们让他延迟一秒就进来之后呢，让他不停的循环抖动就是了。

啊，那这个我们给一个又进入。向右进入啊。好，那这个，我们给他来一个恶。把这所有的选中，把这份所有的选中，按shift键加选

加选之后呢，我们给他来各项业务进入。向右进入之后呢，我们这个文字，我要让他再次的去加一个动画，那就添加一个什么强调性的动画，比如说呃。闪烁。悬壶。宣百啊，都可以。然后这个也是我们从下面进入，点击从下边进入啊，向下向上就向上一入。然后再加一个。抖动的动动画啊，抖动在这里也是延迟一秒，然后勾选预览，我们直接把这个关掉之后再预览一下。

这就是这样一个动画就完成了啊，当然我们的其他页面呢，你可以去恶。自己进行相应的一个设计，如果说你的内容比较多的话，你可以做好多个页面啊，都是可以的。

具体的一个操作方法呢，就给他讲的这些，其实这里还有一些其他的组件什么的，比如说可以添加这个地图啊啊，那么这里添加个地图啊，后期人家直接点的话就有一个地图的导航啊，点去这里啊。在这个地图的这个样式里面，我们还可以把它做成按钮的样式啊，像类似这样的呃，比如说比如说这个里面还有。啊，技术啊，统计啊，甚至还有一个，做这个投票的一个效果啊，做投票。

还有可以外联到其他的视频，呃，那么，同时我们还可以在我们的这个里面去加上链接啊，比如说呃，这张图片我们是可以去加上一个链接的啊，这里有一个添加出发啊。出发之后。可以点击。来进行下一个什么，下一个动作的一个。一个延伸。

在我们这里的功能设置里面，可以加上跳转到某个网站啊，某个网站或者跳转到某个页面或者跳转到地拨打电话啊，比如说你在这里给一个电话的组件，然后呢，直接呃，把这个电话号码给放上去，然后直接人家点一下它就自动会进行电话拨号。啊，所以这个H5呢还是很强大的啊