济南网站建设-H5开发常见问题有哪些？

一、视觉上，慎用“光线叠加效果”或PS里面的“图层样式”效果。

如：给图层加个“柔光”、“滤色”、“色相”等等效果，除非这个视觉元素可以合并为一体。

原因：给重构挖坑，导致不好切图，无法还原视觉效果。

二、动画上，尽量避免全屏动画，优先考虑局部动画的方式。

如：各种粒子效果全屏飘过等。

原因：如果呈现的视觉效果无法用代码实现，就意味着要用全屏尺寸的序列帧来处理，体积上会飙升，影响加载体验。

三、动画上，序列帧压缩技巧，静态的画面，保存较高质量。中间运动的模糊状态，大胆的压低画面质量吧。

ps：压缩体积，运动状态就算有锯齿也不明显。

四、图片，图片压缩，上“tinypng.com”，压缩下，有效减少体积。（PSD导出的图片还有很大的压缩空间）

PS：支持PNG，JPG，还可以批量压缩下载

五、音乐，一定要压缩，能大大减少整体的体积。

技巧：如果没有特殊要求，可以考虑弄成单声道音频文件，比特率48或更低就行了。

常见H5展现形式

密室场景

朋友圈 群聊

一镜到底

测试答题

视频

简笔画

手绘插画

小游戏

双屏互动

伪3D

360全景3D

H5创意玩法1、摇一摇

H5创意案例：百度钱包

这个都很简单，通过摇一摇手机，可以匹配到同时段接收到信号指令的触发功能，增加与用户的互动。

H5创意玩法2，重力感应

H5创意案例：百度钱包

摇一摇通常是与重力感应联系在一起的，手机内部一般都有重力感应处理器，支持摇晃切换所需的界面和功能，甩歌甩屏，翻转静音，甩动切换视频等，是一种非常具有使用乐趣的功能。

H5创意玩法3，换装填色

H5创意案例：复古换装，看你是哪种汉服萌主！

比如案例“复古换装”，选择画中你喜欢的一个卡通人物，然后点击选项，为人物添加衣服，比如曲裾深衣、汉家服饰，还有头型和头饰，比如玉钗斜簪。给用户多种选择，让用户挑选喜欢的衣服、服饰、发型。

H5创意玩法4，视觉对比

H5创意案例：美加净：有些事一定要在晚上做

H5案例“有些事一定要在晚上做”，通过提示，向右滑动页面，会出现同一件事在白天与黑夜所得到的不同感受，一亮一暗的对比，让用户通过比较更深刻的理解产品想要传达的含义。【H5开发】

H5创意玩法5，拉票集赞

H5创意案例：七夕开撕 最美新娘打PK，Baby倪妮你会支持谁？

案例《七夕开撕 最美新娘打PK，Baby倪妮你会支持谁？》是为宣传电影《新娘大作战》制作的H5，作为剧中的主角Baby与倪妮是敌对关系，那么谁会赢得最终的胜利呢？投票权在用户的手里，点击花球，抛给两位女神，她们会争抢花球，谁抢到了花球就为自己的获胜机会增加了一票，想要为自己的女神增加更多花球？那就转发给朋友们，为心爱的女神积攒花球吧。

H5创意玩法6，弹幕

H5创意案例：秀出你的音乐态度——我是歌手

H5《秀出你的音乐态度——我是歌手》采用了重力感应、拉票集赞等多种玩法，这里我们要讲的就是弹幕，点击“发送弹幕”，为喜欢的歌手送出自己心中想说的话语或祝福，相比“为TA点赞”这种隐形的支持，将自己对歌手的喜爱光明正大的表达出来。

H5创意玩法7，视频互动

H5创意案例：神州专车：敢不敢和吴秀波对视5秒钟？

这也是当时刷屏级的H5案例，朋友圈都在转，各大平台纷纷发表案例分析，与偶像对视或者与偶像进行视频交流，肯定要比简简单单的几段文字或者几张图片要更刺激。

【H5开发】

H5创意玩法8，翻书

H5创意案例：西贝莜面村：你吃什么决定你是什么人

需要横屏摆放手机观看，营造出读书翻页的效果，让看惯了一页页图文的用户有耳目一新的感觉。