您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

H5页面制作应该注意哪些细节？

页面,用户,文字H5页面制作应该注意哪些细节？

发布时间：2020-12-06加入收藏来源：互联网点击：

H5页面制作应该注意哪些细节？

回答于 2019-09-11 08:43:50

回答于 2019-09-11 08:43:50

素材

一般一个只有图片、文字、音频的H5，2-5页左右，5M以内最佳，保证加载时间足够，当然是越小越好。因为素材没有优化好导致的问题太多了，因为手机加载资源的性能有限，必须要考虑H5在不同的手机机型、系统、网络优劣状态下打开后的效果。如果手机性能不佳，H5作品偏大，网络也不够流畅的情况下，会导致作品长时间加载不出，甚至闪屏、卡顿等问题。

兼容性

不同的手机机型，还要考虑不同手机屏幕上手机适配问题。也就是H5页面的尺寸要怎么做才合适，一般会做一个带有出血框的画布，外框尺寸422X748px内框尺寸：375X603px。重要的信息放内框，不重要的信息铺满外框，比如背景图。




设计

1 背景图炫酷的画面，离不开背景的衬托，能否快速更换背景图，相信是考验一个H5页面能否快速完成的准则之一；

2 文本微信交互H5页面更重交互，重视觉效果，在酷炫的背景衬托之下，突出重点的文字往往是点睛之笔；

3 音乐炫酷的背景下，配以提纲挈领式的文字，如果能够再来一段能够引起共鸣的音乐，那是何等的应景；

4 图片背景之外，重点图片之间的交互、与文字的配合正是H5页面能够调动用户感官的重要方式!光速的定义是光在1秒内行驶距离，所以光速比声速快，比打字速度更快。那为什么不用图片呢?

5 视频如果炫酷的背景、精炼的文字、应景的音乐，还不能够让你感到震撼的话，那就来段视频吧!一目了然!

6 按钮(点击跳转链接)H5页面在微信展示的优势是交互效果好，观赏性强，但是归根结底，还是要回到营销的目的上来。或用于宣传，需要链接到更为详尽的介绍页面;或用户收集信息，需要链接到指定的信息收集页面。如此一来，是否具有点击跳转功能就成为判断一个H5工具是否可供选择的硬性标准之一；

7 输入框在微信H5页面中，除宣传类外，大部分都是以收集信息为目的的。除了使用麦客表单、金数据、问卷星等第三方表单收集工具外，各个H5工具内置的输入框功能也不失为一个很好的选择。这样，在对应的后台，不仅可以看到访问信息(如已有查看权限)，还可查看详细报名数据。




其他

突破常规，独具风格

创作来源于常识但又要打破常识。通常一个引人注目的设计往往是托陈出新的设计。在这个追求新鲜感和个性化的时代唯有与众不同才能脱颖而出。对于h5页面设计来说，不管是文字内容还是页面观感都要独具风格。

前后呼应，背景衬托

无论是制作H5页面还是制作其他页面，协调感是必不可少的一点。好的页面能给用户一种轻松、舒适的感觉，而这样的页面也必须是一个具有协调性的页面。这就要依靠好的背景来起到衬托作用。而能否快速更换背景图，是考验H5页面能否快速完成的一个准则。

音乐共鸣，勾起情感

人们常说音乐没有国界。但音乐也同时可以打破心灵的界限。或悲伤或喜悦，当你听到一首熟悉或者令你触动的音乐时往往会不由自主的产生共鸣。优美的背景下，配以提纲挈领的文字，再来一首应景的音乐，何愁没有用户的关注。

动态视频，触及内心

在现如今这个快节奏的社会中，枯燥、死板的东西往往给人一种压抑之感，人们往往没有时间去自己深度剖析一段文字的深意。而更喜欢那种一目了然的视频，快速获得自己所需要的生活养分。




总之，好的设计，不仅要依靠好的审美观，还要从用户的角度来审视自己的设计，用户需要的，用户热爱才是最好的肯定。

回答于 2019-09-11 08:43:50

H5页面制作涉及到策划、设计和交互动画直走的方方面面，我们可以简单从几个小方面去提升和优化你的H5作品。



1、策划方案与品牌结合，互动方式与产品或业务方案结合，否则H5火了，但产品却无人关注也是失败的H5项目；

2、压缩图片与音视频的素材体积，应用足够小的素材，确保作品更加流畅，借助tinypng在线压缩工具可以有效的压缩图片的体积；

3、在正式推广作品之前，进行多机型与4g和WiFi环境下共同测试，防止个别型号的手机不兼容适配，尤其是安卓设备，情况特别多，因为用户可能在很多环境不同机型下打开；

4、注重作品的视觉和互动表现，增加点炫酷的动画播放控制，常见的基础款H5工具在交互性方面没啥优势，也就很难吸引用户的注意，建议你试试 意派Epub360 这类专业的H5页面制作工具，它能够制作一镜到底、答题测试、小游戏等创意型h5，而且相关教程也很丰富，实用性很强。

5、对于时间比较赶的同学可以直接套用一些制作精良的模板。比如意派Epub360平台上有很多优秀的H5案例可以借鉴和H5模板可以复制替换自己的内容快速发布上线。

意派 Epub360 属于专业级别的H5制作网站，能实现 交互动画效果；较高级的交互设定，比如手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制等；同时支持用户信息获取，包括昵称头像、拍照、录音等功能，结合投票、评论、助力、信息列表组件，轻松实现社交互动类H5设计
由于可实现的功能较多，自然操作起来比较复杂，不过也可以直接 套用模板 进行修改。
可加入系统自带的各类特效。参数 精确地控制交互，加入交互逻辑，很适合有较多H5制作经验的老司机。