北京网站建设—H5开发常见问题有哪些？
来源：尚品中国|
类型：开发|
时间：2018-11-20
一、视觉上，慎用“光线叠加效果”或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创意案例：西贝莜面村：你吃什么决定你是什么人
需要横屏摆放手机观看，营造出读书翻页的效果，让看惯了一页页图文的用户有耳目一新的感觉。
六、交互上，慎用向右滑动操作
如：刮刮乐涂抹效果，左右滑动翻页等。
原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。
七、 交互上，慎用横屏展示效果
原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。
对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。
UI设计尺寸：1136*550px
八、视觉上，功能按钮等，远离页面底部（大概128px，这个尺寸不是固定值）。
具体看重构采用什么适配方式（仅供参考：640*1136 px，从上往下计算，主要内容在1008px内）。
原因：更好的适配各种屏幕的手机，避免按钮被挡住。【H5开发】
常规竖屏尺寸：640*1136px or 640*1008px
H5创意玩法9，手机、微信客户端等模拟
H5创意案例：吴亦凡入伍
就是扫完二维码之后点进去会发现有人给你打电话，或者是常用的微信聊天页面，这样可以拉近与用户的距离，就像好友在通话或者聊天一样。
H5创意玩法10，语音、录音
H5创意案例：老歌新唱，带你认识检察君
模拟手机音乐播放器的界面，营造出KTV的气氛，还有鼓掌、切歌按钮，选择唱片，就会弹出乐曲。
H5创意玩法11，密室
H5创意案例：化身间谍，改变历史
密室玩法一般是密室逃脱或者搜集物品的游戏，就像案例《化身间谍，改变历史》，将用户置身于二战的历史情境中，化身一名间谍，为了保护情报，在密室里选择一处藏匿情报。
H5创意玩法12，双屏互动
H5创意案例：《一滴奶 邂逅爱》
双屏互动技术也很有趣，需要两台手机共同操作，放置在一起，才能观看完整的H5作品，通常在需要传达爱意的节日比如七夕、情人节等，会经常使用。
H5创意玩法13，擦除
H5创意案例：《新年祝福哈出来》
擦除是我们大家经常见到的交互玩法，需要用户用手指擦除屏幕，才会出现被隐藏的内容。
H5创意玩法14:，360全景
H5创意案例：杜蕾斯美术馆
全景技术被运用的最好的案例要数《杜蕾斯美术馆》了，用技术建造了一座手机屏幕里的美术馆，360°全景无死角，给用户置身实地的体验感。
本文章来源尚品中国：H5网站建设
来源声明：本文章系尚品中国编辑原创或采编整理，如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络，如有侵权，请及时与本站联系（010-60259772）。
TAG标签：
推荐新闻
更多行业-
如何开发好平台类网站?
首先，平台类网站需要明确自己的目标用户，并且针对目标用户量身定制服务。...
2023-05-30 -
详细介绍企业网站开发的注意事项
选择合适的网站建设平台具有关键作用，当前主要有落地页平台、CMS平台、...
2023-06-01 -
网站设计有哪些好的技巧？带你一起来看看
目前，越来越多的网站出现在我们的视野中。那么，什么样的网站能吸引用户浏...
2020-04-24 -
微信二次开发需要公众号里的APPID码AppSecret(应用密钥)的方法
1、https://mp.weixin.qq.com/cgi-bin/...
2018-08-28 -
网站设计与网站建设有哪些区别？
许多人对网站建设的一些概念模糊不清。事实上，外行很难区分他们的不同。只...
2020-05-20 -
网站开发过程中安全问题解决方式有哪些？
网站开发是一个涉及多个复杂环节的过程，而安全问题一直是开发者和业主们必...
2023-10-16
如果您的网站可以增加转化次数并提高客户满意度，该怎么办？
预约专业咨询顾问沟通！
Copyright © 2024 恒久尚品 版权所有 | 京ICP备09066521号
| 公安机关备案号:11011502003910
免责声明
诚信企业
尚品专注高端网站建设，系统平台开发，微信小程序及APP开发服务
尚品专注高端网站建设，系统平台开发，微信小程序及APP开发服务
免责声明
非常感谢您访问我们的网站。在您使用本网站之前，请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络，涉及到的部分文章和图片版权属于原作者，本站转载仅供大家学习和交流，切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。
4、如果侵害了您的合法权益，请您及时与我们,我们会在第一时间删除相关内容!
联系方式：010-60259772
电子邮件：394588593@qq.com
