H5设计有哪些网站可以参考？

很多网站都有丰富的H5案例可为大家提供设计灵感。

①意派Epub360

该网站的H5案例主要以创意形式、行业、场景为划分，每个划分下分别包含了许多更加细微的小类别。除此之外，意派Epub360还是一个拥有很多优质模板的专业H5制作工具，基础功能均能免费使用，无论是邀请函、品牌推广、产品宣传，还是活动营销、数据报告、微杂志、微官网，都可自由创作，实用性非常强。

②网易哒哒工作室

该网站的H5案例主要以月份为划分，整体风格比较偏年轻化，新颖有趣，其中不乏很多刷屏级神作。

③哇呸H5

该网站的H5案例主要以行业、功能、特效、风格、节日、色彩、年份、品牌主、代理商为划分，每个划分下分别包含了许多更加细微的小类别。

④H5案例分享

该网站的H5案例主要以游戏、视频、测试、人脸融合、场景布置、重力感应、国外、腾讯为划分。

⑤爱果果

该网站的H5案例主要以月份、创意形式、传播内容、品牌主、代理商为划分，每个划分下分别包含了许多更加细微的小类别。

⑥H5创意汇

该网站的H5案例主要以行业分类、场景用途、品牌公司、节日祝福、炫酷玩法、风格特点、行业开发周期为划分，每个划分下分别包含了许多更加细微的小类别。

⑦未来应用

该网站的H5案例主要以创意形式、行业、用途、风格、事件为划分，每个划分下分别包含了许多更加细微的小类别。

⑧FaceH5

该网站的H5案例主要以年份、月份、级别、品牌主、代理商、维度为划分，每个划分下分别包含了许多更加细微的小类别。

⑨199case

该网站的H5案例主要按照最新和最热进行排列，除此之外，没有其他细分，用户需自行按照关键词进行搜索。

H5设计开发定制，怎样才能设计出爆款H5呢？

什么是H5？

H5即“HTML5”，是指“HTML”的第5个版本。“HTML”，是描述网页的标准语言。因此，HTML5，是第5个版本的“描述网页的标准语言”。通俗的讲，H5是一个网页文件，就像一个很大的容器，里面可以放文本、、音视频等基本的媒体格式的文件。

H5网站设计开发是企业和个人建设网站的常用方式。H5一般以链接的形式存在，不需要下载软件，点开链接即可浏览，用户体验良好，易传播，互动性强，成本低，可用性高，备受企业公司的青睐。想要在社交平台做互动营销，合理设计运用技术为浏览者打造流畅舒适的互动体验，从而提高品牌的用户黏度很重要。

H5设计定制对企业的作用？

1、成本低，易传播

H5在页面推广时，只是一个URL链接，二维码，流量占比很小，几百兆的安装包就可以去推广了。且H5灵活的跨平台性能，开发无需太多的适配工作，节省成本，同时H5有着很强的浏览器兼容能力。

2、商品展示，品牌推广

H5最大的优势是传播能力极强，有非常好的传播效果，是企业商家做品牌曝光，产品宣传的利器。相对传统的文字和来说，往往会因为它的形式更加新颖，并且具有互动的特点，使得传播分享的几率大大的提升。

H5中或多或少就会带有企业的品牌信息，比如产品信息，企业公众号，企业文化等等，将带这些内容的H5页面制作成微传单以后，那在移动端的每次的转发和分享， 就等同于对企业信息的宣传。真正被大多数人分享转发的H5都具有功能性，互动性，且操作简单，能让用户主动去了解内容。这种定制内容更加能够突出品牌文化，令人印象深刻。不仅帮助企业轻松的在营销大军中突围而出，而且增强用户的活跃度以及粘性。

3、满足用户基本需求

定制设计H5需要结合用户的需求做出相应的功能。H5页面需要有更强的互动、更高的质量、更具话题性的设计来形成和用户的互动，形式一般为贺卡邀请、游戏互动、答题有奖。当然，这种个性化精准需求是根据企业具体要求设计定制H5才能满足的。

设计定制H5需要注意哪些内容，怎么做才能成爆款？

1、确认目标和目标群体

定制H5方案计划时，首先要明确这个H5的要的是什么？了解用户企业产品，和用户进行有效的沟通，确认用户企业的需求，并根据用户企业品牌特色和产品优势去量身打造内容。

且一个好的H5产品，它首先是要定位好足够大的目标用户群体，它必须是满足大众的某项“需求”的，能引起大众的情感共鸣，在满足大家心理需求的情况下，才有可能达到营销和传播的作用。

其次，互动的参与流程不宜太繁琐。有的分享类H5，需要用户长按扫描二维码参与，完成操作后，保存至本地，再从本地转发至社交平台才能完成分享，这样的操作很容易影响转发量，就更不用说刷屏了，因此掌握好活动难度很重要。这也决定了它是否具备传播爆发性。

2、创新、实用

创新有趣才能达到优秀的宣传效果，企业可在新型技术上的突破，做出不同的形式的H5，想要抓住目标用户的注意力，吸引用户的眼球，可结合时下热点元素，融合热门话题，在画风、配色、文案、音效等元素上下功夫，同时需要提高H5的互动性，促使用户进行分享传播，提高H5的实用性。

一、H5平台有很多，根据定位不同分为模板类和专业工具类的。

总体上来说，H5工具开放出来供大家使用，就是免费的，只是也有额外收费部分，并且各家收费机制不一样。

像易企秀、兔展、MAKA等，收费机制基本就是出售模板，这些主要定位为模板类工具，如果工具不免费，大家买来模板还要买工具也是不合逻辑的。

好看的模板几乎不会有免费的，就跟商店里卖东西好用的基本不太会打折做活动。那真的是得自己拼实力了，模板基本都是翻翻页，加些动画上去，至于视觉部分，如果觉得模板实在是不够好看，就需要自己来设计制作了。

另外的像是意派Epub360，因为定位就是专业H5制作工具，工具免费开放给大家。用户根据个人需求制作H5，技术及创意表现空间足够大，自由度高，区别于模板类工具。发布后带有自己的加载页LOGO作为宣传，如果自己不想工具LOGO出现，必须付费去除。这几乎是大多数H5工具都会有的收费机制。

当然，专业类的工具也会有一些其他的高级功能及服务，这些都是另外收费的，基本是面向企业级用户，按年收费，但工具本身免费功能也较多，仍可以制作炫酷的H5作品，既想要免费又想好看，真的要下一番功夫学习下。

二、最后是关于好用。这个看自己的觉得哪个合适，一般模板类工具选择性多，但是创意上基本没太有发挥空间。

专业类工具意派Epub360原型跟PPT很像，但是上手的话可能比PPT稍微复杂些，因为在手机端适配、功能上H5都有更多要求。

—不认真解决问题的ad都是耍流氓。

春城晚报-开屏新闻记者刘文波 摄

苍山为盟，洱海为誓。9月29日下午，由大理州文化和旅游局、大理州旅游行业协会主办的“大理最佳爱情表白地图”发布会在大理国际大酒店举行。

29个“爱情表白打卡点”

据大理州旅游行业协会常务副会长傅东寅介绍，此次发布的“大理最佳爱情表白地图”共有29个推荐“爱情表白打卡点”，除了有蝴蝶泉公园、剑川石宝山沙溪古镇、巍山古城-巍宝山、漾濞石门关、双廊艺术小镇、鹤庆银都水乡、南涧樱花谷等这些大家所熟知的A级景区外，还揽括了湖山云隐、蜜悦·悦湾、俊媛海景美宿、利舍庄园、海西里里、花语牧场、大理花醉艺术中心等适合婚纱旅拍和举办目的地婚礼的机构、酒店。

与此同时，地图还将海舌夫妻树、祥云青海湖、弥渡天生桥、云龙太极图、永平花桥村、大理西湖、鹤庆情人桥、宾川洗心桥、苍山洗马潭、大理兴盛桥、龙龛古渡、水花庄园、猫米花园、木田养山、璞真扎染等打卡点收录其中，未来游客只需要通过一张地图，即可享受完美的大理爱情之旅。

傅东寅透露，此次大理最佳爱情表白实体地图发布后，大理州还将与一部手机游云南深度合作，开发制作线上地图H5，让游客可以通过线上地图，随时随地了解自己的“爱情之旅”，不断为大理州婚旅产业加码助力。

大理成为热门婚礼目的地

近年来，越来越多的年轻人将大理作为举办目的地婚礼、拍摄婚纱照和蜜月度假的首选城市。国内旅拍等知名摄影企业落户大理，目的地婚礼机构多次在大理开展活动，以婚礼服务为主题的艺术空间、民宿客栈备受欢迎，一些知名酒店的喜宴经常爆满。

婚拍旅拍作为婚礼供需链的首要环节，铂爵旅拍负责人吴红表示，随着95后成为来大理婚拍旅拍的主要群体，婚拍旅拍的方向将倾向于一些便捷高级有创意又保留城市记忆的产品，例如选择高级网红地、城市印记建筑、田园油画感等场景。通过推出不同季节的不同旅拍主题，以及明星引流、第三方线上渠道等加大城城曝光点，大理的婚拍旅拍产业将会越来越好。

在大理俊媛海景民宿的500平米海景水台，每天都有新人在这里海誓山盟。负责人赵灿辉介绍，2020年，俊媛承办了374场婚礼，是当年全国单块婚礼场地的销售冠军，同时获得亚洲婚礼风尚2020年度最佳目的地婚礼场地奖项。

赵灿辉表示，大理这座城市与生俱来的爱情基因，让大理市场持续向好，“有一种生活叫大理”“大理最佳爱情表白地”等一系列的政府助力活动，对行业发展产生了巨大的支持作用，他坚信会有更加美好的市场未来。

为强化“爱情表白”标签，着力打造中国最佳爱情表白地。目前，大理州委宣传部与州文化和旅游局已共同启动大理最佳爱情表白地短视频直播大赛，下一步将开展大理最佳爱情表白地评选活动，强化大理最佳爱情表白地的品牌影响力。

同时，还将围绕拍婚纱照、办婚礼、度蜜月、购买免税婚品等新人的核心诉求，不断完善软、硬件基础设施，推出文旅奖补等政策，吸引更多优质婚旅企业落户大理，构建更为完善的产业链，推动大理目的地婚礼产业发展。

春城晚报-开屏新闻记者 刘文波

由活动承办方提供

责编 罗秋旭

校对 朱丽

编审 赵梅圭

可以选择代码开发或使用专业的H5制作工具自行制作。我们大多数人对代码这种专业技术还是比较陌生的，所以这条路可以暂且pass。我平时常用意派Epub360去做一些互动性比较高、整体很炫酷的H5，比如说：一镜到底、全景VR、走马灯、画中画、模拟朋友圈等等。因为意派Epub360除了本身的制作功能足够优秀以外，还有丰富的案例库、模板库和教程库，其用户群也非常活跃，每天都会互相交流，能学到不少东西~

酷炫动感的H5创意形式其实是有很多种的，你可以到意派的教程库搜索关键词，以查找相应的教程，然后再边看边做边学~

2017年就快结束了，你还记得这一年来在朋友圈刷屏的H5吗？它们引起了广告圈内圈外的一同转发，并且凭借着各自不同的特点，给人留下了深刻印象，造成刷屏现象。

刷屏的H5有3个特点：

要么创意取胜，出乎意料。比如《世界名画抖抖抖抖抖起来了？》

要么参与感极强。比如人民日报的《快看呐！这是我的军装照》

要么走温情路线，引起共鸣。比如招商银行的《西红柿炒蛋》

今天就给大家收集整理了这一年来十大刷屏H5广告，快来看看有没有刷过你的屏。

1年度最戏精H5——有道翻译官

《深夜，男同事问我睡了吗……》

男同事在微信上问了句”睡了么”，女主却以为男同事喜欢她，跑到闺蜜群里惊呼有人要对她表白了。

接下来，闺蜜群变身戏精群，一齐商讨如何应付男同事去了……

它利用女主和闺蜜们超乎寻常的内心戏吸引人眼球，最后再出现一个广告神转折，看到最后忍俊不禁。

值得一说的是：这个H5竟然是0成本——采用手机录屏，没有中间代理商，共才用两天时间完成。吼吼～

知道这个消息的各种甲方，是不是要冲动了？

2年度最鬼畜H5——抖音

《世界名画抖抖抖抖抖起来了？》

这是一只充满魔性的兼具鬼畜和嘻哈风的H5。

在现实生活中，画应该摆在橱窗里让人静静地欣赏；在世界名画大V面前，你可能大气都不敢出一个。而现在，抖音使用了二次元里面的鬼畜手法，让名画抖起来了，而且还在内容上增加了一些幽默元素。比如把拿破仑的坐骑换成了哈士奇，让蒙娜丽莎剪头发，让凡高拿着手机自拍和变装，让海伦娜跟其他画家一起自拍合影……

让人觉得十分的逗趣和幽默。

3年度最感官H5——天猫无忧购

《首个手机话剧团开张了》

由身体部位引发的话剧

这个H5上线三小时时间内就达到了500万的观看量，数字惊人。

第一个节目是”心里很想“，跟你的心脏有关；讲的是屌丝臆想追女神的故事。

第二个节目是”急你个头“，跟头脑有关，讲的是两个快递员在匆忙的送快递的故事。

这种别具一格的创意，特别有意思，故事感强。

4年度最爆场H5——人民日报：

《快看呐！这是我的军装照》

国庆期间有没有晒这个军装照

上传自拍，就获得你自己的军装照，H5一旦运用人爱（zi）秀（lian）的心理，就超容易火，参与感很强。

在国庆期间上线，借势营销做得非常好，浏览次数累计82亿，一分钟访问人数峰值高达41万。

忽然发现我党的人民日报也跟上时代了呢~

5年度最公益H5——腾讯公益：

《小朋友“画廊”》

你有没有选一副或几幅特殊小朋友的画？每幅画都很美，激发了爱心，不仅用情怀打动了人民大众，

还让大家关注到世上有这么一群“小朋友”。

话说这次刷屏，总计募集1502905979元，捐款人数为5806608人。

6年度最回忆杀H5——网易哒哒

《这是成年人不敢打开的童年》

今年61儿童节前一晚，网易哒哒发了一支H5：《这是成年人不敢打开的童年》。3小时获得150万独立用户访问量；H5展示了属于80/90后的童年动画片，这一次我们面临的是18岁以下禁止观看。

画面上是黑白的漫画人物，依次出现灌篮高手，哆啦A梦，名侦探柯南，美少女战士，以及动画里面的经典名言。

最后一段话：

“我们已经长大了，未来的日子一起加油吧!”

将人拉回现实，告诉人们：不忘过去，不畏将来。引起了人们广泛共鸣和自主转发。

7年度最大片H5——《飞越奇市江湖》

淘宝请了奥斯卡最佳视觉效果奖的特效公司Framestore，制作出了《飞越奇市江湖》的特效大片

采用了3d效果，以一只五彩斑斓的猫头鹰作为操纵杆，通过旋转手机来调整它的方向；穿越四个黑洞（这些黑洞分别代表了东市、西街、南市、北街），每条街都各有各的特色和风情，通过H5，带你逛逛街，形式很新奇。

8年度最飙泪H5——招商银行Visa留学生信用卡

《世界再大，大不过一盘番茄炒蛋》

当你第一次看这支广告的时候，是不是也想到了自己的父母呢？

也许你并没有远在他乡，也许你的父母也不会半夜起来给你录制视频，也许你自己都能做很多的菜，更何况只是一个番茄炒蛋？

但是这支广告确实会触发你联想到母爱，即使最后这支广告有争议性。

案例详情：https://vqqcom/x/page/m05688wcokuhtml

9年度最恐怖H5——《白夜追凶》

淘宝搜“白夜追凶”即可体验：

淘宝界面突然变成了视频通话的界面，同时你的手机震动起来，铃声突然响起来，着实让人没有防备。

接听之后，前置摄像头打开了，视频里真的出现了你的头像，接踵而来的刺激营造了恐怖的气氛，让人感到害怕。

10年度最辛酸H6——网易考拉

《入职第一天，网易爸爸教我做人》

继《深夜，男同事问我睡了吗……》之后，又一个内心戏十足的H5。

没有虚拟现实仿真体验和炫酷特效的H5，它只有一个主角Julia，讲述了她在入职第一天就疯狂工作的经历：

和同事们的第一次交流就得知公司经常加班，而跟总监大人也不断在微信上给她分派任务，不断给她增加工作量。

虽然如此辛酸，女主依然是乐观面对。

总结

看完了这十个H5，你最喜欢哪个呢？

希望可以帮助你：

我们时不时就会看到微信朋友圈各种创意H5网页，其中有党政宣传、限时秒杀、节日热点、广告营销、游戏测试等各种类别，h5以其生动活泼、灵活多样、互动性强等特点极大的吸引人的眼球，起到了宣传营销的效果，是当今政府企业宣传的利器。那么想要制作一个H5页面是什么样的流程呢？如何制作呢？

下面我们就分几步来讲解一下H5的制作过程：

1、创意

H5的创意可谓重中之重，是否能够广泛传播一个好的创意至关重要。围绕主题或构思故事情节，设置游戏规则、角色说明、文案编写等。

2、可行性

写出创意文案后就要来分析这个方案是否可行？是否利于传播？是否会吸引人？如何巧妙的收集用户信息？如何提高用户参与度？这些都是要考虑的问题，不要头脑一热费时费力做出来的产品没有达到预期的效果。

3、选择制作平台

当今主要的H5制作平台有：木疙瘩、兔展、MAKA等，各有特色、各自的功能有不同的着重点，会员购买费用也不等，这也是H5制作费用成本的一部分，需要前期多食用一下，看看是否满足自己的需要。

4、素材收集或手绘

素材的收集包括动画背景、动画角色元素、背景音乐等。其中H5动画角色可能需要手工绘画，这就需要美术功底扎实的设计师了，一般手绘的费用是要高一些的。

5、效果制作

在制作平台导入各种元素角色，根据创意制作动画效果，这一步会比较繁琐，创意不同制作的方式也不同。

6、测试兼容性

H5动画效果制作好后，要注意其兼容性，从安卓到苹果、从iphone6-iphoneX是否显示正常？要多找几台设备多测试一下。

7、发布

H5动画制作完成后在制作平台发布即可，发布后会获得对应的二维码和http地址，可以灵活使用。

8、引流吸粉

前期制作工作完成就要到了最重要的步骤了----吸粉！我们前期的一切工作都是未了达到宣传引流的作用。

建议你用意派Epub360在线H5页面制作工具进行制作，你可以先确定好使用什么样的创意形式、实现什么样的交互效果，再通过在意派Epub360的教程中心搜索关键词查找相应的教程，以下是用意派Epub360制作的一些H5案例，感兴趣的话可以去看看~