为用户创造价值

始终追求工匠精神,是您靠谱的H5开发、小程序开发、微信开发供应商

蓝畅首页 >> 动态

H5是什么?H5页面的类型都有哪些

时间:2019-08-07 22:01:19 | 来源:

H5是什么?

H5是指第5代Html(超文本标记语言),也指用H5语言制作的一切数字产品。H5具体又分为Html(结构)、CSS(样式)和JavaScript(行为)。  H5是一系列制作网页互动效果的技术集合,即H5就是移动端的web页面。由于微信迅速的崛起,H5语言编写的界面和微信浏览器比较兼容,借由微信移动社交平台,走进大家的视野,也开始越来越火。



   
   

H5页面的设计思路和方法


1.活动运营型H5


为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部,如何设计一套合适的引流路线也颇为重要。大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮,富有质感的旧票根、忽闪的霓虹灯,配以幽默的动画与音效,恨不得每个选项都点一遍。围绕“选择”这个品牌关键词,用引人入胜的测试题让用户把人生当作大片来选择,选到最后一题引出“大众点评选座看电影”,一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错,这个页面有点diao噢”的心情点击了分享。





2.品牌宣传型


不同于讲究时效性的活动运营页,品牌宣传型H5页面等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言,让用户对品牌留下深刻印象。伴随着浪漫的钢琴旋律,《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚,最后引出“首草——滋阴圣品,爱妻首选”的宣传语。设计上采用回忆般的黑白色调,简单的照片加文字,配以花瓣掉落、水面涟漪等轻动画,渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌,用H5打出了一副走心的情感牌,让用户记住了“半生只为你”的爱妻品牌形象。





3.产品介绍型


聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。这一类型的H5页面多见于汽车品牌,LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕,通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性,宏观和微观都照顾周全





4.总结报告型


自从支付宝的十年账单引发热议后,各大企业的年终总结现也热衷于用H5技术实现,优秀的互动体验令原本乏味的总结报告有趣生动了起来。《京东的十大任性》用10张横屏页面讲述了京东在前几年十大成就,视觉设计上采用简洁的扁平风插画,加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果,最后还有刘总这个小彩蛋。





5.贺卡邀请函型


每个人都喜欢收到贺卡或邀请的感觉,抓住这一心理,品牌推出了各种H5页面形式的礼物、贺卡、邀请函,通过提升用户好感度来潜移默化地达到品牌宣传的目的,在邀请的同时也展示了自己的产品与品牌,可以一举多得!



6.职位招聘型


为了展现自己独特的企业文化,招聘型H5已然成为企业应该好好利用的扩音器。快速分享QQ,微信,微博等,求职者一键报名,效果数据随时监控。(讲故事、员工代言、简单直白)



7.故事讲述型


讲个好故事,引发情感共鸣,不论H5页面的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。



8.教学教程型


H5的翻页形式,特别适合步骤式的教程表现。一步一页,通过滑动这种交互形式,可以加深对于步骤的理解和认识,有着出人意料的学习效果。




上海蓝畅信息技术有限公司成功为多家世界财富500强企业以及其他著名品牌提供优质服务,是您靠谱的互联网开发供应商。

服务客户遍及北京、上海、杭州、深圳、广州、天津、青岛、南京、宁波、苏州、无锡、厦门、重庆、西安等大中型城市及地区    主要业务:H5开发,H5外包,微信开发外包,网站开发外包,H5游戏开发,小程序开发外包,APP开发外包,视频后期制作等




本文地址:
更多内容推荐:
专栏最新阅读:
更多文章阅读请至:专栏
Tips: 为您提供H5开发小程序开发微信开发网站开发小程序商城开发SEO网站优化视频后期制作服务