一、视觉上,慎用“光线叠加效果”或PS里面的“图层样式”效果。如:给图层加个“柔光”、“滤色”、“色相”等等效果,除非这个视觉元素可以合并为一体。原因:给重构挖坑,导致不好切图,无法还原视觉效果。 二、动画上,尽量避免全屏动画,优先考虑局部动画的方式。如:各种粒子效果全屏飘过等。原因:如果呈现的视觉效果无法用代码实现,就意味着要用全屏尺寸的序列帧来处理,体积上会飙升,影响加载体验。三、动画上,序列帧压缩技巧,静态的画面,保存较高质量。中间运动的模糊状态,大胆的压低画面质量吧。ps:压缩体积,运动状态就算有锯齿也不明显。 四、图片,图片压缩,上“tinypng.com”,压缩下,有效减少体积。(PSD导出的图片还有很大的压缩空间)PS:支持PNG,JPG,还可以批量压缩下载 五、音乐,一定要压缩,能大大减少整体的体积。技巧:如果没有特殊要求,可以考虑弄成单声道音频文件,比特率48或更低就行了。常见H5展现形式密室场景朋友圈 群聊一镜到底测试答题视频简笔画手绘插画小游戏双屏互动伪3D360全景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*1008pxH5创意玩法9,手机、微信客户端等模拟H5创意案例:吴亦凡入伍就是扫完二维码之后点进去会发现有人给你打电话,或者是常用的微信聊天页面,这样可以拉近与用户的距离,就像好友在通话或者聊天一样。 H5创意玩法10,语音、录音H5创意案例:老歌新唱,带你认识检察君模拟手机音乐播放器的界面,营造出KTV的气氛,还有鼓掌、切歌按钮,选择唱片,就会弹出乐曲。 H5创意玩法11,密室H5创意案例:化身间谍,改变历史密室玩法一般是密室逃脱或者搜集物品的游戏,就像案例《化身间谍,改变历史》,将用户置身于二战的历史情境中,化身一名间谍,为了保护情报,在密室里选择一处藏匿情报。 H5创意玩法12,双屏互动H5创意案例:《一滴奶 邂逅爱》双屏互动技术也很有趣,需要两台手机共同操作,放置在一起,才能观看完整的H5作品,通常在需要传达爱意的节日比如七夕、情人节等,会经常使用。 H5创意玩法13,擦除H5创意案例:《新年祝福哈出来》擦除是我们大家经常见到的交互玩法,需要用户用手指擦除屏幕,才会出现被隐藏的内容。 H5创意玩法14:,360全景H5创意案例:杜蕾斯美术馆全景技术被运用的最好的案例要数《杜蕾斯美术馆》了,用技术建造了一座手机屏幕里的美术馆,360°全景无死角,给用户置身实地的体验感。
本文题目:H5开发常见问题有哪些?
URL链接:https://www.cdcxhl.com/news/55577.html
成都网站建设公司_创新互联,为您提供自适应网站、网站设计公司、Google、网页设计公司、商城网站、企业建站
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联