从引爆帮派的H5小游戏《猫中环绕神经》，到推翻传统广告的热门评论页面《我们之间只有一句话》，从2014年下半年开始，各种H5游戏和专题页面陆续涌现。“H5”，这个从HTML5简化而来的词汇，正通过微信这个移动社交平台走进更多人的视野。本文重点探讨基于微信流转的H5页面的视觉设计，通过一些案例分析来谈谈设计思路和方法，希望与大家进行交流探讨。
功效与目的
首先，从功效和设计目的来看，H5专题网页主要有以下四种类型:
1.流动运营型
为移动推广和运营而创建的H5页面是最常见的类型，形式多样，包括游戏、邀请、贺卡、试题等多种形式。与以往单纯的静态广告图片流转不同，现在的H5移动运营页面需要更强的互动性、更高的质量、更具话题性的设计来促进用户的分享和流转。从进入微信H5页面到最终登陆品牌App内部，如何设计一个合适的引流渠道也是相当重要的。
人们在为电影《狂暴》设计的推广页面上的评论对此心知肚明。复古写实精神的视觉设计让人眼前一亮。质感丰富、霓虹闪烁的旧票根，配上幽默的动画和音效，恨不得点开每一个选项。以品牌关键词“选择”为中心，用户可以用引人入胜的测试题选择生活大片，最后一题引出“人们点击选择座位看电影”，一键引出App购票页面。即使知道是软文，还是忍不住点开分享，带着“短油不错，这页有点刁”的感觉。
2.品牌宣传型
与时效性强的移动运营页面不同，品牌推广H5页面相当于一个品牌的微官网，更倾向于塑造品牌形象，向用户传达品牌的精神态度。在设计中需要使用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
寿草先生的情书伴随着浪漫的钢琴旋律，以男人的口吻表达了成长过程中对妻子的爱与愧疚，最终引出了“寿草——养阴，妻为首选”的口号。设计接受像回忆一样的对错色调，简单的带文字的照片，以及花瓣飘落、水面泛起涟漪等灯光动画，渲染出一种唯美优雅的氛围。首草，一个全新的高端健康草药品牌，用H5打情感牌，让用户记住“半条命只为你”的品牌形象。
3.产物先容型
聚焦产品功效，利用H5的交互技术优势，随意展示产品特点，吸引用户在buy buy购买。
这种类型的H5页面在汽车品牌中很常见，雷克萨斯NX就是一个优秀的代表案例。精致且极具质感的造型和细腻的灯光效果，营造出酷炫的视觉精神。手指循着光线轨迹切割画面拉开帷幕，通过触摸、摩擦、滑动等合理优雅的交互形式，带领用户探索产品的七大特性，宏观与微观兼顾。
4.总结报告型
自从支付宝十年账单引发热议后，现在各大企业的年终总结都热衷于通过H5科技来实现，出色的交互体验让原本枯燥的总结报告变得有趣生动。
《JD.COM的十个任性》用10个横版讲述了JD.COM在2014年的十大成就。在视觉设计上，接受简洁的平面风插画，加入纸张质感，形成复古卡片拼贴感。通过手指在不同页面间滑动实现流通的视差旋转效果，最后还有刘总经理的小彩蛋。一口气看完之后，你可能会明白JD.COM在2014年做了哪些伟大的事情。
二．形式为功效服务
在确定了主题页面的功效和用途之后，接下来就是关键的设计阶段了。如何设计一个有针对性的设计，需要考虑详细的应用场景和流转工具，站在用户的角度思考用户最想看什么样的页面，最想分享什么样的页面。以下是H5主题页面的一些常见形式:
1.简朴图文
简单的图文是早期最典型的H5专页形式。“图”的形式千变万化，可以是照片、插图、GIF等。通过翻页等简单的交互操作，起到类似幻灯片流通的作用。磨练出来的是优质内容和讲故事的能力。
滴滴打车的案例是一个典型的简单图形H5专题页面，用几个图片故事串起了整个页面。视觉简洁有力，接受整屏为非照片，用滴滴洗白品牌橙。每切换一张图片，文字会逐渐淡出，没有其他形式的互动，让受众专注于内容，通过陌生人之间的真实联系，塑造品牌的正能量形象。
也有不愿从轻的奇葩案例。除夕夜，当全国人民都在疯狂抢红包的时候，微信推出了一个名为“看未来中国人的名字和福利”的专题页面。我第一眼就惊呆了，好深情的人民币~每一页都是人民币风景的局部放大图，创作者加入了别出心裁的创作元素和微动态来举行细腻的描述，带观众进入人民币的微观世界。每一张钞票图案，结合发人深省的文案，在推广微信红包的同时，呼吁人们重新审视人情和名利的意义。
2.礼物/贺卡/邀请函
每个人都喜欢收到礼物的感觉，因此品牌推出了各种H5礼物、贺卡和邀请函，通过增强用户的好感度来潜移默化地宣传品牌。既然是礼物，创意和制作是要点。
AKQA创意营销公司在圣诞节赠送了一份丰厚的礼物——梦想水晶球。通过移动手机，镜头从水晶球外部不断晃动，逐渐进入水晶球的微观世界。通过手机环顾四周，可以360度浏览水晶球里的全景，摇一摇雪花就会飘得满天都是。写下你的祝福，与你的伴侣分享。信任一定会让他们惊喜。这个H5页面使用了重力感应、3D等技术，文字和BGM的使用也很有讲究，给用户带来了完美的交互体验，值得细细品味。
创维oled电视怎么样？介绍了oled电视的使用寿命。
Evernote还在新年时代推出了语音贺卡，指示用户通过人民号向其发送一条语音消息，然后将这条祝福语音与中国风动画连接起来，制作出一张全球独一无二的语音贺卡。整体基调也是以Evernote品牌色为基调，同时又蕴含着一种优雅的年味，十分讨喜。
3.问答/评分/测试
问答形式的H5网页也习惯了。发挥用户的求知欲和探索欲，一起选来选去，看看最后的成果是什么。需要一个清晰的线索，最终的效果页面需要合理不唐突。如果能辅以丰富多彩的视觉和文案来弱化答题的死板感就太好了。
和本文开头一样，也是大众点评项目。此次是对姜文电影《一步之遥》的持续推广，让用户对姜文的代表作进行评分。视觉设计依旧出彩，脑洞创意和动画设计惊艳(一定要扫体验！)。延续了怀旧海报的精神，非常注重字体、文案、装饰元素等细节。H5问答页面可以做到这一点。
4.游戏
从《猫中环绕神经》、《看你有多种颜色》等简单游戏，到杜蕾斯的《一夜N次郎》(即山寨版《别踩白块》)等品牌植入游戏，H5游戏一度因操作简单、竞争力强而风靡联想圈，但缺乏创意和同质化迹象导致用户对无脑游戏产生厌倦。品牌要想在游戏中获得成功，需要在游戏性和设计上多下功夫。
Same在圣诞节推出了一款名为“圣诞老人营救设计”的H5小游戏。操作极其简单。只需用手指交替向上滑动，将角色的脖子向上拉至无限长。游戏会记录你拉的最高距离，并与你的搭档进行比较。界面清新可爱，符合Same的招牌画风，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏向用户传递Same独特有趣的产品文化。
三．为设计加分的4个要点
一个H5页面的设计质量是否优秀，会直接影响其流通效果，甚至影响用户对品牌形象的认知。在此总结以下设计要点:
1.细节与统一
要实现高质量的用户体验，必须考虑细节和整体的统一。复古模仿的视觉精神，那么字体不能太现代；以幽默讽刺的口吻，文案不能太认真；打情感内容牌，动态效果不要太花哨。
蒋话剧推广系列的专版《九步之遥》就牢牢抓住了这一点。从二维码入口到性感的加载页面，再到分享提醒的最终设计，包括文案、背景音效，都与整体的玩虐保持一致，给用户完整统一的交互体验。
特别注意“分享提醒”的细节设计。相比一个简单的箭头和一句冷冰冰的“点此分享”，用心的细节设计带来的高品质和好感是显而易见的。多贴几个精彩案例:
2.紧跟热门，行使话题效应
如果你想让你的H5专题页面一夜走红，抓住热点快速上线，并借机举办品牌推广也是一条捷径。
天天p图抓住武则天热播的机会，推出了风靡海内外的媚娘妆。同时，全国COS武媚娘的H5互动页面也在第一时间上线。操作简单易用，一键上传照片即可立即完成媚娘化妆，与万千媚娘PK，娱乐了百姓，也宣传了产品。
网易娱乐在武媚娘切胸风波的风口浪尖上推出了名为“上帝还原武媚娘切胸真相”的H5专题页面，放下身段锻炼，用富有想象力的粗线条草图向观众“还原”真相。一时间被疯狂转发，网易娱乐也是对潮流的自我宣传。
3.讲个好故事，引发情绪共识
无论H5的形式如何多变，有价值的内容永远是第一位的。在有限的空间里，学会讲故事，引发用户的情感共识，对内容的传播会有很大的促进作用。
LEVI的新年打折流专页，将小时候简单却热闹的新年和长大后丰富却无趣的新年进行对比，用手绘的风格渲染出深情的乡愁空。最后引出“这个新的一年，收拾好压力和束缚，用新鲜的眼光感受生活，一起生活的乐趣”的品牌推广口号。代入感极强的故事，无疑是分享的动力。
4.合理运用手艺，打造流通的互动体验
随着技术的发展，HTML5现在有了很多出彩的功能，可以让我们轻松实现画图、擦除、晃动、重力感应、擦除、3D视图等交互效果。如果你有兴趣，你可以点击这个网站。http://fff.cmiscm.com/. H5的动态效果几乎都有，相比不同种类的动态效果造成的页面凌乱臃肿，我们提倡合理使用工艺，专注于为用户提供循环的交互体验。
一个典型的案例就是淘宝在双12推出的预售促销H5专题页面。我在浏览过程中只用了一个向上滑动的手势，但是页面出现的效果就像是一个循环的动态GIF。设计师巧妙地运用图形设计和组合，在滑动过程中营造出一种厚重的视差旋转效果，单个图形元素的蒙版和旋转与整个页面的动态态势完美融合。
结语
随着手机硬件的升级，HTML5技术的成长，微信平台的开放，HTML5跨平台、低成本、快速迭代的优势进一步凸显，对于身处移动互联网大潮中的企业主、品牌商、设计师、开发者来说，这将是最好的时代。未来会有更多优秀的H5页面涌现，让我们拭目以待。
