那些过目不忘的HTML5页面

从引爆同伙圈的H5小游戏《围住神经猫》，到推翻传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。

功能与目标

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

1.运动运营型

为运动推广运营而打造的H5页面是好常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，现在的H5运动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到好后落地到品牌App内部，如何设计一套合适的引流路线也颇为主要。

大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以诙谐的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到好后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错关键词排名优化，这个页面有点diao噢”的心情点击了分享。

2.品牌宣传型

不同于讲究时效性的运动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造上海做网站，向用户传达品牌的精神态度。在设计上需要运用吻合品牌气质的视觉语言，让用户对品牌留下深刻印象。

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