那些过目不忘的H5页面

从2014下半年起，如引爆朋友圈的H5小游戏《围住神经猫》，以及颠覆传统广告的大众点评H5专题页《我们之间只有一个字》等各种H5游戏和专题页纷纷涌现。“H5”，这个由HTML5简化而来的词汇，借助微信这一移动社交平台，正逐渐走入更多人的视野。本文将聚焦基于微信传播的H5页面的视觉设计，通过案例分析探讨设计思路与方法，与大家交流分享。

一、功能与目标

从功能与设计目标来看，H5专题页主要有以下四大类型：

1. 活动运营型

为活动推广运营而打造的H5页面最为常见，形式多样，涵盖游戏、邀请函、贺卡、测试题等。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要具备更强的互动性、更高的质量和更具话题性的设计，以促进用户分享传播。同时，从进入微信H5页面到最终引导用户进入品牌App内部，设计一套合适的引流路线也至关重要。

大众点评为电影《狂怒》设计的推广页堪称典范。其复古拟物风格的视觉设计令人眼前一亮，富有质感的旧票根、闪烁的霓虹灯，搭配幽默的动画与音效，让人忍不住点击每个选项。围绕“选择”这一品牌关键词，通过引人入胜的测试题，让用户仿佛将人生当作大片进行选择，最后一题引出“大众点评选座看电影”，一键直达App购票页面。即便用户明知是软文，也会带着“这个页面有点厉害”的心情点击分享。

2. 品牌宣传型

与注重时效性的活动运营页不同，品牌宣传型H5页面如同品牌的微官网，更侧重于品牌形象塑造，向用户传达品牌的精神与态度。在设计上，需运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

《首草先生的情书》伴随着浪漫的钢琴旋律，以一位男士的口吻讲述了在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计采用回忆般的黑白色调，简单的照片加文字，搭配花瓣掉落、水面涟漪等轻动画，营造出唯美优雅的氛围。“首草”这个全新的高端养生草药品牌，通过H5打出情感牌，让用户记住了“半生只为你”的爱妻品牌形象。

3. 产品介绍型

此类页面聚焦于产品功能介绍，充分利用H5的互动技术优势，全面展示产品特性，吸引用户购买。

汽车品牌的H5页面多为此类型，LEXUS NX是其中的优秀代表。精致且富有质感的建模、细腻的光效营造出酷炫的视觉风格。用户通过手指跟随光的轨迹切割画面揭开序幕，再通过合理优雅的触碰、摩擦、滑动等互动形式，一同探索产品的7大特性，兼顾宏观与微观层面。

4. 总结报告型

自支付宝的十年账单引发热议后，各大企业的年终总结也热衷于采用H5技术实现，优秀的互动体验让原本乏味的总结报告变得生动有趣。

《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就。视觉设计采用简洁的扁平风插画，加入纸面质感，形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这一小彩蛋。用户一口气看完后，便能大致了解2014年京东的主要成就。

二、形式为功能服务

确定专题页的功能目标后，关键的设计阶段需考虑具体的应用场景和传播对象，从用户角度出发，思考什么样的页面最受用户喜爱且易于分享。以下是几种常见的H5专题页表现形式：

1. 简单图文

简单图文是早期典型的H5专题页形式。“图”的形式丰富多样，包括照片、插画、GIF等。通过翻页等简单交互操作，呈现类似幻灯片的传播效果，考验的是内容质量和讲故事的能力。

滴滴打车的H5专题页是简单图文型的典型案例。几张照片串联起整个页面，视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字渐隐浮现，无其他互动形式，让用户聚焦于内容，通过陌生人之间的真情联系塑造品牌的正能量形象。

微信在除夕夜推出的《从此看尽中国人的名与利》专题页则别具一格。页面以人民币风景局部放大图呈现，创作者加入巧妙的创意元素与微动态进行细腻刻画，带领用户走进人民币的微观世界。每张钞票图案搭配发人深省的文案，在推广微信红包的同时，呼吁人们重新审视人情与名利的内涵。

2. 礼物/贺卡/邀请函

抓住人们喜欢收到礼物的心理，品牌推出各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来实现品牌宣传。创意和制作是此类页面的重要加分项。

AKQA创意营销公司在圣诞之际推出的梦幻水晶球H5页面，用户通过移动手机，镜头从水晶球外摇晃推近，进入水晶球的微观世界。通过手机环顾四周，可360度欣赏全景，摇一摇还有雪花飘落。用户写下祝福并分享给朋友，能带来惊艳的体验。该页面运用了重力感应、3D等技术，文字与BGM的使用也十分考究，为用户带来完美的互动体验。

Evernote在过年期间推出的语音贺卡也独具匠心。通过公众号引导用户发送语音消息，将祝福语音与中国风动画结合，制作成独一无二的语音贺卡发送给朋友。整体色调以Evernote品牌色为主，蕴含优雅的年味，十分讨巧。

3. 问答/评分/测试

问答形式的H5页面较为常见，利用用户的求知欲和探索欲，引导用户一路选择，最终查看成绩。页面需要有清晰的线索，结果页要合理自然，若能搭配出彩的视觉和文案，弱化答题的枯燥感则更佳。

大众点评为姜文的电影《一步之遥》做持续推广的H5页面，让用户为姜文的代表作评分。其视觉设计出色，创意和动画设计令人叫绝。延续怀旧大字报风格，字体、文案、装饰元素等细节处理用心。

4. 游戏

从“围住神经猫”“看你有多色”等单纯小游戏，到杜蕾斯“一夜N次郎”（山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏曾因操作简单、竞技性强而风靡朋友圈，但创意缺乏和同质化问题导致用户逐渐厌倦。品牌若想在游戏传播上取得成功，需在玩法和设计上多下功夫。

Same在圣诞节推出的《圣诞老人拯救计划》H5小游戏，操作简单，用户只需用手指交替上滑，将角色的脖子拉长，游戏记录最高距离，可与朋友比较。界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏传达Same独特有趣的产品文化。

三、为设计加分的4个要点

H5页面的设计品质直接影响其传播效果，甚至影响用户对品牌形象的认知。以下是几个设计要点：

1. 细节与统一

要实现高品质的用户体验，需兼顾细节与整体的统一性。若采用复古拟物的视觉风格，字体不宜过于现代；若页面风格幽默调侃，文案措辞不应过于严肃；若主打情感内容，动效应避免过于花哨。

大众点评姜文电影推广系列的《九步之遥》H5专题页在这方面表现出色。从二维码入口到性感的loading页，再到最后的分享提示设计，包括文案措辞和背景音效，都与整体的戏谑风格保持一致，为用户提供完整统一的互动体验。

尤其要关注“分享提示”的细节设计，用心的设计能带来更高的品质和好感度，远胜于简单的箭头和冰冷的“点这里分享”。

2. 紧跟热点，利用话题效应

若想让H5专题页迅速走红，抓住热点并及时上线进行品牌宣传是一条捷径。

天天P图抓住武则天热播的契机，推出风靡海内外的媚娘妆，同时《全民COS武媚娘》的H5互动页也及时上线。该页面操作简单，用户一键上传照片即可完成媚娘妆，与其他用户进行PK，既娱乐了大众，又推广了产品。

网易娱乐在武媚娘剪胸风波期间，推出《神还原武媚娘被剪胸真相》的H5专题页，以富有想象力的粗犷草图风“还原”真相，引发疯狂转发，实现了自我宣传。

3. 讲个好故事，引发情感共鸣

无论H5形式如何变化，有价值的内容始终是关键。在有限的篇幅内讲好故事，引发用户的情感共鸣，能极大地推动内容传播。

LEVI’S新年优惠活动专题页以第一人称的口吻，对比小时候简朴却热闹的新年与长大后富足却乏味的新年，用手绘风营造出亲切的怀旧氛围。最后引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广slogan，代入感极强的故事成为驱动分享的动力。

4. 合理运用技术，打造流畅的互动体验

随着技术发展，HTML5具备众多出色特性，可轻松实现绘图、擦除、摇一摇、重力感应、3D视图等互动效果。（有兴趣可点击这个网站查看几乎所有H5动态效果的展示）。相较于堆砌各种动效导致页面混乱，更提倡合理运用技术，为用户提供流畅的互动体验。

淘宝在双12推出的预售推广H5专题页便是典型案例。用户在浏览过程中只需向上滑动，页面呈现出如流畅动态GIF般的效果。设计师巧妙利用图形设计与组合，在滑动过程中营造出丰富的视差滚动效果，单个图形元素的遮罩、旋转与整体页面的动势配合默契。

结语

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势更加凸显。对于身处移动互联网浪潮中的企业主、品牌、设计师和开发者而言，这是最好的时代。未来必将涌现更多优秀的H5页面，让我们拭目以待。