那些过目不忘H5页面.pdfVIP

那些过目不忘的H5页面 从引爆朋友圈的H5小游戏 《围住神经猫》 ，到颠覆传统 告的大众点评H5专题页 《我们之间只有 一个字》 ，从2014下半年起 ，各种H5游戏和专题页纷纷崭露头角。“H5” ，这个由HT ML5简化而来 的词汇 ，借由微信这个移动社交平台 ，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面 的视觉设计 ，通过一些案例分析来谈谈设计思路与方法 ，希望与大家进行交流探讨。 功能与目标 首先从功能与设计目标来看 ， H5专题页主要有以下4大类型 ： 1.活动运营型 为活动推 运营而打造的H5页面是最常见的类型 ，形式多变 ，包括游戏、邀请函、贺卡、测试题等 形式。与以往简单的静态 告图片传播不同 ，如今的H5活动运营页需要有更强的互动、更高质量、 更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌A pp内部 ，如何设计 一套合适的引流路线也颇为重要。 大众点评为电影 《狂怒》设计的推 页便深谙此道。复古拟物风格的视觉设计让人眼前一亮 ，富有 质感的旧票根、忽闪的霓虹灯 ，配以幽默的动画与音效 ，恨不得每个选项都点一遍。围绕“选择”这 个品牌关键词 ，用引人入胜的测试题让用户把人生当作大片来选择 ，选到最后一题引出“大众点评选 座看电影” ，一键直达A pp购票页面。即使明知是软文也忍不住带着“矮油不错 ，这个页面有 点diao 噢”的心情点击了分享。 2.品牌宣传型 不同于讲究时效性的活动运营页 ，品牌宣传型H5页面等同于一个品牌的微官网 ，更倾向于品牌形象 塑造 ，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言 ，让用户对品牌留 下深刻印象。 伴随着浪漫的钢琴旋律 ，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱 与愧疚 ，最后引出“首草——滋阴圣品 ，爱妻首选”的宣传语。设计上采用回忆般的黑白色调 ，简单 的照片加文字 ，配以花瓣掉落、水面涟漪等轻动画 ，渲染出唯美优雅的气氛。“首草”这个全新的高 端养生草药品牌 ，用H5打出了一副走心的情感牌 ，让用户记住了“半生只为你”的爱妻品牌形象。 3.产品介绍型 聚焦于产品功能介绍 ，运用H5的互动技术优势尽情展示产品特性 ，吸引用户买买买。 这一类型的H5页面多见于汽车品牌 ，LEX US NX是其中的优秀代表案例。精致和极富质感的建模 、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕 ，通过合理优雅的 触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性 ，宏观和微观都照顾周全。 4 .总结报告型 自从支付宝的十年账单引发热议后 ，各大企业的年终总结现也热衷于用H5技术实现 ，优秀的互动体 验令原本乏味的总结报告有趣生动了起来。 《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就 ，视觉设计上采用简洁的扁平 风插画 ，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果 ， 最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。 二 ．形式为功能服务 在确定了专题页的功能目标之后 ，接下来就是关键的设计阶段了。如何有的放矢地进行设计 ，需要 考虑到具体的应用场景和传播对象 ，从用户角度出发去思考什么样的页面是用户最想看的最会去分 享的。以下列举几种常见的H5专题页表现形式 ： 1.简单图文 简单图文是早期最典型的H5专题页形式。“图”的形式千变万化 ，可以是照片、插画、GIF等。通过 翻页等简单的交互操作 ，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力 。 滴滴打车这个案例就是典型的简单图文型H5专题页 ，用几张照片故事串起了整套页面。视觉简洁 有力 ，采用整屏黑白照片 ，点缀以滴滴的品牌橙色。每切换一张图片 ，文字就渐隐浮现 ，没有其他 互动形式 ，让观众聚焦于内容 ，通过陌生人之间的真情联系来塑造品牌的正能量形象。 也有不甘平淡的精彩案例。在除夕夜全国人民疯狂抢红包的时刻 ，微信推出了 《从此看尽中国人的 名与利》这样一个专题页。第一眼就被镇住了 ，好亲切的RM ~每个页面都是一张人民币风景局部 放大图 ，创作者加入巧妙的创意元素与微动态进行细腻刻画 ，带观众走进了人民币的微观世界。每 一张钞票图案配合发人深省的文案 ，在推 微信红包的同时呼吁人们重新审视人情与名利的奥义。 2.礼物/贺卡/邀请函 每个人都喜欢收到礼物的感觉 ，抓住这一心理 ，品牌推出了各种H5形式的礼物、贺卡、邀请函 ，通 过提升用户好感度来潜移默化地达到