背景介绍：

以“随心而动 开心之旅”为主题，一语双关“心动”和“开心”

采用温馨的粉色作为主视觉，营造温暖的气氛

配合写实旅行、人物图片和简洁文案，一屏介绍一个精致小故事，让人思考自己生活

背景介绍：

奥迪 投票类 H5

展示奥迪幕后的工作人员

星光作为背景，商务排版风格，严谨又气势恢宏

点击点亮地图版块的交互设计，使人眼前一亮

流畅高清的画面给人一种利落干脆之感

背景介绍：

在行 & 小米 活动宣传H5

以探索解密为核心，整体以探索和公益为内容展现

以“寻找90后斜杠青年”为主题（“斜杠青年”是指拥有多重职业和多重身份的人）

作为“斜杠青年”代表

小米科技联合创始人黎万强入驻国内最大知识技能共享平台“在行”

背景介绍：

环球漫游H5

环球漫游品牌宣传

以“这些年走过的足迹”为主题

淡蓝背景配彩色国旗，产品Logo取色做成地标，清爽清晰

背景介绍：

蒙牛 营销类H5

首届“中国H5营销大赛”作品

以“纯白闺蜜”为主题，采用双屏对比

纯手绘原画，讲述两个闺蜜平凡却多彩的生活

主要采用左右滑屏、双指分屏切换的方式，静下来，认真去读两个人的生活，其实如你我

背景介绍：

智联招聘

地理定位+漂流瓶+图片合成+助力

收集礼物部分，背景是腾讯地图，地图上有随机放置的手绘风格的小礼物

包含多种交互形式

无论是地图还是图片合成还是漂流瓶，全程都有用户头像的元素，这样也大大提高了用户的参与感

背景介绍：

图文展示类 H5

以小五的一封语音情书为主题展开

关注后在公众号上输入520，会发送给您这份语音情书

点击进入后会展开，像信一样缓缓展开

讲述了你从何时认识小五，与小五一起走了几天，小五会发出语音告诉你定级在什么段位名同时还会发送证书给你

背景介绍：

问答测试类H5案例

以“听声音，猜明星”为题，让用户识别五位名人读书的声音

设计上，以《新周刊》新版刊面黄色为主视觉，配合白底黑字，形式清晰，主题突出

题目是五位明星阅读的声音，选项是名人卡通头像和姓名

背景介绍：

映客 宣传H5

图文展现了映客2016公益年鉴活动，并可进行图片合成及保存

创建海报，生成自己作为映客公益使者的公益年鉴，可分享给小伙伴传递温暖

漫画风格，采用宇宙星空作为背景，有种浩瀚伟大之感，展现映客2016公益年鉴活动的图片由一颗颗小星星幻化而来，神秘优雅

可对上传的图片进行拖动放缩旋转的操作，调整到合适的位置

背景介绍：

抽奖类H5

采用手绘的方式。案例主体为3D打印机，主题为遇见未来的你

动效上来说，为了增加与用户的交互，采取长按的方式进行打印，打印完成后可以让画面动起来，使画面有了活力

H5本身以轻松活泼的基调，展示了3D打印机在各场景中的使用

背景介绍：

昕薇 活动宣传H5

图文展示类 利用明星效应引出薛之谦的buy家情报局

小清新风格，采用生机勃勃的绿色作为主色调

采用面膜与大自然的景色相融合的视觉设计，从侧面展现了膜法世界的面膜是绿色产品

看搞笑好玩的拍摄花絮采用的是拖动或直接点击的方式将自己想看的图片置顶，而后可拖动放缩旋转，欣赏花絮图片。

背景介绍：

昆明航空公司 宣传H5

图文展示类 通过转动疯狂计划制造机摇取疯狂时间，疯狂地点，疯狂事件，产生任务单等你去完成

整体设计偏海报形式，每一屏都像海报一样映入眼帘

颜色搭配偏冷色调让人感觉十分清爽，文字与点线面的结合让画面十分有设计感

首屏增加陀螺仪的交互方式，让案例动效更加丰富。

背景介绍：

视频类。H5营销大赛启动会宣传

首页点击“马里奥”，他会跳到屏幕上方，并像拉帘子一样把页面拉下来，此时第一页逐渐消失

手绘 + 矢量设计

第二页是视频，视频自动播放，开头是一个姑娘和一个汉子在争论“H5”和“iH5”

随后便是介绍H5营销大赛的活动概况。尾页点击“我要占位”上方的指纹跳转活动页。

背景介绍：

海航 宣传H5

以探索解密为核心，整体以探索和公益为内容展现

通过四种交互方式，探索到4个数字，分别为“3056”

每找到一个数字，会显示一屏公益内容

纪念碑谷游戏的设计风格。深色的背景，配合鲜亮的色彩，小小神秘色彩

背景介绍：

京东 宣传H5

通过8个家居场景，展示时尚生活体验馆的种种可能

手绘卡通风格，画面细腻，很有高级感

滑动对应的屏幕，卡通人物主人公，以第一人称或者第三人称的角度，讲述事故

查看物品的细节和购买链接

背景介绍：

蓝色光标 宣传H5

图片合成类 生成自己蓝标20年图片

先以文字描述引入职场回忆，而后采用三张图片合成后的样式模板，展现了蓝标20年的变迁

选择入职时间，上传一张入职时照片，和一张现在的照片，再选择已有文案或自己写的文案并合成

怀旧风格，整体采用书籍翻页的形式

背景介绍：

中国人民大学 宣传类H5

以中国人民大学80周年校庆为主题，通过一幅很长很长的画卷，展示了人大建校史

卷轴的形式。水墨风格，细腻的笔触，以画卷为呈现，通过传统和历史厚重的韵味，展示了人大历史

横向水平向左浏览。因为画卷从右向左，以时间为维度，依次展现人大重要的历史时刻和建筑物

背景介绍：

途家 宣传H5

以“老板在群聊中@了你”为主题，用模拟微信群聊讨论团建去处的形式

将民宿品牌“途家”轻松带入，让用户在轻松欢快的氛围中，了解民宿，了解途家

采用手绘漫画风格，每一个人物设计都极力贴近真实人物模型，简洁风趣，耐看

模拟微信群聊天，用户会在闪动的语音条处，自然点击交互

背景介绍：

保洁 宣传H5

通过三个关键词（征服、比拼、加冕）引入活动主题。

黑色主色调，配以白色和红色。

通过人物、香水、皇冠3D视觉形象打散与汇聚，表达前三屏的关键词；

前三屏采用点击方式进行切换交互，后面采用滑屏切换。

背景介绍：

果壳×巴斯夫

以未来城市为主题，结合现有的科学实践为我们展示了一副未来城市的美丽图景

以蓝白为主色调，用沙盘模型的方式来刻画未来城市的样貌

悬浮城市配合沙盘模型的展现方式科技感十足

整则案例一体性很强，页面间的切换过渡自然，画面唯美，以沙盘模型的方式来表达对未来城市的期许

背景介绍：

河狸家颜值测试

以颜值鉴定为出发点

用户上传正面照片，选择男女性别，输入昵称，而后点击[开始测试]按钮

开始对颜值进行分析，会分析眉毛、眼睛的宽度，鼻子占脸宽度比例和嘴占脸部宽度比例

最后给出你是当前第几份对颜值鉴定的报告，还有气质类型、颜值DNA类型、颜值宣言

背景介绍：

华为&果壳

华为在欧洲创新活动日之前做的一个线上预热H5

以“不经意的世界”为题，讲述了人类在基础领域不断探索的过程中，一些不经意的成果

一些不经意的成果，给人类带来了巨大影响

最后部分华为成果的露出，显示了华为在基础研究领域的坚持、创新，以及取得的成就

设计背景介绍：

京东超市 + 中粮

用一则简短的漫画描述一个情境，讲述一个小故事

采用四格漫画的形式，用简笔画勾勒出了在大都市打拼的青年男女的生活现状

漫画场景之间衔接自然，内容过渡流畅不拖沓

既包含视觉上的动画效果，又包含内容衔接所用的口播文案

背景介绍：

必达净 产品宣传

整个案例画面清新脱俗，清晨的暖阳，新生的枝叶，到处都散发着一种青春洋溢的气息，

整则案例从风格统一，切换动画流畅。在有限的页面中展现了足够多的内容

将用户和产品紧密贴合在一起。很好的实现了产品的宣传作用

背景介绍：

以中秋为主题

中秋的月亮，配6个人物（奥迪英杰汇的成员）和奥迪汽车的剪影

点击“去赏月”，进入2.5D的城市，不同的城市景物配合不同的奥迪英杰汇成员

每次停顿到对应的城市景物，还可以点击看对应英杰汇成员对大家的祝福

背景介绍：

从一名职场女性的视角，讲述一个女性拼搏的温情故事

手绘漫画风格，用动漫的形式讲述女主从早晨、路上、工作及晚上的忙碌状态

页面简单，采用紫色为主色调；

点击进入下一页。

背景介绍：

活动宣传类H5

一则功能性和交互性都很强的案例

采用偏冷的色调，辅以充满科技感的字体，加上渐变的色彩呈现，给用户以浓浓的极客风

交互上，用十分丰富点击音效，作为交互反馈的同时也使用户能更好的沉浸其中

背景介绍：

以结婚证为主题，生生成各种角度的仿真结婚证，以期在七夕节时晒出，跟朋友开个玩笑

愚人节的宣传H5案例。

通过上传图像和姓名，选择模板，生成结婚证图片

录入信息后，上传照片后，点击“生成结婚证”即可生成

背景介绍：

在2018俄罗斯世界杯1/4决赛期间推出的“最强点球大战”H5小游戏

主要采用绿茵足球场背景，配合夜场的灯光照射

长按可以保存战绩单，战绩单有回流二维码

用户分享战绩后，可以有效回流

背景介绍：

世界杯主题的人脸融合H5

还可以选择性别，男性和女性的队服展示不同。最后合成有用户上传人脸的队服海报

扁平风格，主色调为绿色和蓝色

合成出的海报添加了美颜，效果很好

背景介绍：

以“测测你五年后的生活”为主题

结合穿越主题+测试形式+横向长图+场景布置+海报生成，进行小猪短租品牌线上传播和活动引流

主要以深蓝为主背，小猪短租的logo粉为亮色，配合实景靓丽房源，视觉清晰，交互明显

最后生成的文案和恶搞的海报，很能激发分享的欲望

背景介绍：

中国邮政储蓄银行联合三家车企，开展线上百城试驾预约

视觉冲击力视频特效+豪礼+驾驶小游戏+转盘抽奖+车型展示+试驾预约+购车有礼

一个结合丰满的互动抽奖+丰富功能介绍的H5

用户在沉浸其中体验交互的过程中，了解了中国邮政储蓄银行多种产品

背景介绍：

用一幅贯穿历史、空间的艺术长卷，献礼北京大学120周年校庆

致敬北京大学的伟大贡献，实现新时代中华民族伟大复兴的中国梦。

创作团队特联合北大部分师生和校友

及央美等九所艺术院校的部分师生共同创作了这幅《北大筑梦图》长卷

背景介绍：

以“生命诚可贵 珍惜每一天”为主题

随着页面向左缓缓的滑动，展现一个人短暂而幸福的一生

手绘漫画风格。页面由黑白灰构成，没有绚丽的色彩

背景音乐采用舒缓的钢琴曲，缓缓的打动人心，带人们走进回忆

背景介绍：

这是为新浪旗下消费者服务平台——黑猫投诉所打造的一款H5

以第一人称的视角，展现了黑导游中途乱收费

采用真实的视频场景，真人对话、微信录屏等，真实感很强

主人公遇到“宰人”事件后的无奈、气愤的心情很容易被用户感受到，戳到用户的痛点，引发共鸣

背景介绍：

万科被动房产品推介。以“绿色承诺”为主题

用长图形式展现内容。四部分序、承诺片、技术篇、行动篇

分别介绍万科在推出被动房的大环境、国家向世界的承诺、被动房具体技术方案以及万科做出的实际行动

整体视觉对比鲜明，房体结构用立体动画展示，形象生动

背景介绍：

长图类+视频类，这是奥迪为用户准备的新年特辑H5，

H5以一镜到底滑屏形式将各个大使所代表的品牌形象串联起来

让用户感受到品牌的内涵与力量

背景音与特效音相配合，主次分明

背景介绍：

主题文字配色应该是参考了PUBG（绝地求生大逃杀） 的深黄，并加入了风格不一样的纹理以及渐变

操作非常简单、好玩的一款小游戏

游戏失败后的提示，按钮的点击等等，奖品的设置也很给力，激励用户获得高分

背景介绍：

以拜年为主题，通过“变装，变脸，变声”，展现一个不一样的拜年方式

有男女两大类，拜年人物选择，每一类还分6个年代

分别为：汉朝、唐朝、宋朝、明朝、民国、现代

时代感的浅棕色和节日红，设计师还处理了纸质的纹理，让画面更有时代感

背景介绍：

重力感应3D全景类

炫酷风格,彩色进度条从左到右依次充满整个进度条区域

3D场景主要以陆地、浮岛和各类车辆等元素组成，色彩主要以绿色、粉蓝色为主，清新自然，充满生机

配上动感激情的超跑、电音等混合背景音，有种振奋人心的神秘之感

背景介绍：

答题类小游戏。苏宁易购双十一活动宣传

萌到骨子里的卡通插画，整体背景色调偏暖黄。画面中的人物角色，在保持风格统一的同时，又各具特色

除了案例的画风之外，还有它的细节和代入感

答对或者答错每道题，都会有不同的音效出现，并且音效也跟游戏中的音效很像，程度会随成绩而递增

设计背景介绍：

H5案例分享品牌宣传的H5

讲述H5案例分享团队中小五的成长

核心主题“是否记得青春年少时的自己”，还有那时候的初心

一镜到底的形式，通过几个小故事，用户横向滑动屏幕的过程中，不断的讲述故事

展示上学时自己，回忆自己的初心，发现生活的原动力

设计背景介绍：

招银网络科技为2019年校招做的长图类型H5作品

展示了招银网络科技在支持招商银行业务各方面的数据，以及技术实力

最后进行公司简介，让同学们可以方便的投递简历

以蓝黑为主题色，突出了招银网络科技的科技主题，带入感很强

用多组局部动画，让用户可以感性了解技术，即使不懂业务，也不明觉厉

整体观感流畅，局部动画使各种业务场景表现丰满，吸引眼球

快速滑动，有缓动效果，滑动体验较好

设计背景介绍：

由网易考拉和简豆为了推广618全球潮流狂欢日所制作的测试类H5

此H5手绘卡通风格为主，大致分为3部分

饱和度较低的米黄色和棕红色的色调让人看着眼睛很舒服，题目都想的很有趣

右上角可关闭音乐，静音欣赏。在片头动画开始时，右上角也有跳过的按钮，很贴心

设计背景介绍：

在37女生节38女神节来临之际，上线的一支DIY“梦幻”婚礼场景H5作品

为男生女生设计了一个“婚礼主题”的布置场景H5

让少男少女展开想象，构建自己梦中的婚礼场景

整体画面暖色调，甜甜的，梦幻的感觉，纯手绘，完全手工打造

选择想要的场景、人物、配饰和宠物，拖拖拽拽，搭建完毕，生成专属“梦中的婚礼”海报

设计背景介绍：

开学开工之际，苏宁的超级品牌日推出了华硕品牌机购机优惠活动

在测试自己的人设之后，可以直接登录主页，浏览商品，了解优惠活动的具体内容

功能描述：

输入用户名，回答三个情景测试题，选择自己的星座后，即可生成人设结果

游戏加载顺畅，操作简单，题目包括加班，购物，撕葱，杰伦等内容

贴近年轻人的日常生活和关注点

设计背景介绍：

扫惠普logo，集卡牌“惠”“普”“以”“团”“之”“名”，得礼品

入图像识别界面，点击屏幕中间的加号，可以直接拍一张带惠普logo的照片

红色主色调，整体挺喜庆

采用图像识别技术，分析用户上传照片中logo的品牌

扫“福”字集卡牌，玩的次数倒是很多；扫logo得到不同的卡牌

设计背景介绍：

创意定位，新年年俗介绍+猜灯谜

从云端展开，不断向上滑动屏幕，进入小镇，沿着街道走过

剪纸的人物，饱和度高的配色，红色调偏多，很喜庆

采用3D立体场景的设计

在滑动屏幕的过程中，逐步看到两侧细致的景物。背景音鞭炮和舞狮子很渲染气氛