令人印象深刻的HTML5微信专题网页设计

令人印象深刻的HTML5微信专题网页设计

三月十九日，二零一五年，发布在视觉艺术，设计成果。

Sponsor

那个在社交圈里迅速传播的互动游戏《围捕敏捷小猫》，以及那个打破常规营销模式的大众点评H5特别版《彼此之间仅有一个字》，都从2014年下半年开始引起广泛关注，各类H5互动游戏和特别页面纷纷涌现。“H5”，这个源自HTML5的缩写词，借助微信这个社交应用，正逐渐被更多人所熟知。这篇文章主要讨论微信平台上的HTML5页面视觉呈现，借助部分实例来阐述设计理念与技巧，期待与各位展开讨论交流。

功能与目标

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

1.活动运营型

用于活动宣传推广的H5页面是最为普遍的形式，其展现方式丰富多样，涵盖游戏娱乐、邀请参与、电子贺礼、趣味问答等类别。这种新型宣传载体已不同于传统静态广告的简单图片传播，现阶段需要具备更强的用户参与感、更精湛的制作水准以及更易引发讨论的设计元素，以此激发用户的主动分享意愿。从用户首次接触微信中的H5页面，到最终引导其进入品牌专属App，如何规划一条顺畅有效的用户转化路径同样至关重要。

大众点评为电影《狂怒》制作的宣传页面颇具匠心。其采用复古的实物风格视觉效果，令人耳目一新，其中带有质感的旧式入场券、闪烁的霓虹灯招牌爱游体育app下载官网，再配合上诙谐的动画和声响效果，让人忍不住逐一尝试每个选项。以“抉择”为核心宣传理念，通过设置有趣的互动问答，引导观众将人生比作一场大片进行选择，当进行到最后一个问题时，自然引出“大众点评选座观赏电影”的号召，用户可立即点击进入应用程序完成购票。尽管清楚是广告却还是禁不住怀着“哎呀真棒，这个页面挺有型的”心态去点传播了。

2.品牌宣传型

这种H5页面与注重效率的活动推广页面不同，它更像是品牌的专属网络门户，主要目的在于强化品牌形象，向受众传递品牌的理念与立场。制作时必须采用与品牌特性相符的视觉元素，从而使用户能够对品牌形成鲜明的记忆。

悠扬的钢琴声响起，《首草先生的情书》通过一位男士的叙述，缓缓展现出个人成长过程中对妻子的深情与自责，最终点明“首草——滋阴圣品，爱妻首选”的广告语。画面运用怀旧风格的黑白色调，以简洁的影像和文字构成，并辅以飘落花瓣、水面波纹等淡雅动画，营造出浪漫典雅的氛围。这个崭新的高端草本保健系列，通过H5制作了触动人心的情感内容，使用户对“半生只为你”的眷恋妻子形象留下了深刻印象。

3.产品介绍型

着重突出产品各项用途，借助H5的生动交互手段充分彰显产品亮点，有效激发消费者购买欲望。

这类H5页面常见于汽车行业，LEXUS NX便是杰出范例之一。其建模工艺精良，质感表现卓越，配合细腻的光影效果，共同塑造出引人入胜的视觉体验。用户可沿光迹用指尖划开画面开启体验，借助恰当的点击、拖拽、滑动等交互方式，逐步了解车辆七项核心亮点，无论整体布局还是细节呈现都十分周到。

4.总结报告型

自从支付宝的年度账单引发广泛关注以来，众多公司纷纷采用H5技术制作年终回顾，这种新颖的表现形式凭借出色的互动效果，让原本单调的总结内容变得引人入胜。

《京东的十项风采》以十幅横向画面展现京东2014年的十项关键进展，画面视觉设计选用简约的平面风格插画，并融入纸张质感，营造出复古的卡片组合效果。各页面之间通过手指滑动，达成顺畅的视差滚动体验，结尾还藏有刘总的小惊喜。迅速浏览过后，基本上就能掌握2014年京东所完成的重要事项。

二．形式为功能服务

明确了专题页的作用目的之后，便是核心的构思环节了。要精准地展开构思，必须结合实际的应用环境和目标人群，从使用者角度出发，探究什么样的页面最能吸引用户浏览并激发他们传播的意愿。以下介绍几种典型的H5专题页的呈现形态：

1.简单图文

基础图文是初始阶段最常见的H5专题页构造方式，其中图像呈现多种形态，包含静态影像、手绘图形以及动态效果等。借助翻动等基础互动手段，能够实现类似投影演示的传播作用。这主要看重的是内容本身的品质以及叙述情节的水平。

这个案例属于常见的简单图文式H5专题页面爱游戏app入口官网首页，通过若干张图片构成故事线贯穿整个页面。整体视觉风格简洁而有力，以全屏黑白照片为主基调，并点缀滴滴品牌的标志性橙色。每当更换一张图片时，文字内容会逐渐隐去再浮现，页面不包含其他互动元素，使观众能够专注于核心内容。这种设计借助陌生人之间的真挚情感，旨在传递品牌的正面能量。

不乏突破常规的出色范例。当除夕夜全民争抢电子红包之际，微信平台上线了名为《尽览华夏之财富与名声》的特别板块。初次接触便令人惊叹，实在令人倍感亲切的人民币图案，每一页都呈现钞票局部细节的放大画面，制作者融入了精妙的构思元素和微小的动态效果，将观众引入了人民币的精微世界之中。每一张纸币上的图案都搭配着引人深思的文字，在宣传微信电子红包的同时，倡导大家重新思考人伦关系和物质利益的真正内涵。

2.礼物/贺卡/邀请函

收到赠品总会让人心生喜悦,品牌正是利用了这一点,纷纷推出H5形态的礼物、电子贺卡以及活动邀请函,意图在无形中增进顾客好感,从而实现品牌推广目标。作为馈赠之物,其构思巧妙与否、制作精良与否,都直接关系到它的吸引力。

AKQA策划机构在节日时分呈现了一款非凡赠品——晶莹剔透的水晶球装置，借助手机操作，视角从外部缓缓震动并拉近，逐步深入装置内部的精妙构造，围绕四周即可环视内部全景，轻轻晃动手机便能引得雪花纷纷扬扬，记录下你的心愿并传递给亲友，定能让对方倍感惊喜。这个H5页面运用了重力感应、3D等特性，文字与背景音乐的选择非常用心，为用户创造了极好的互动感受，非常值得慢慢体会。

春节期间，Evernote创新性地制作了语音祝福卡片，借助公众号邀请用户录制语音信息，再将这段话语与中国特色动画相融合，制作成专属于朋友的语音贺卡。整体设计以Evernote的标志性色彩为基调，并巧妙融入了节日的雅致氛围，显得非常别致。

3.问答/评分/测试

互动式H5页面很常见，通过激发用户的求知心和好奇心，引导他们不断选择，最终揭晓测试结果。设计时必须有一条明确的逻辑线，确保最终页面与过程衔接自然。若能配合精美的视觉元素和生动文字，可以有效减轻答题的单调性，效果更佳。

这个项目同样源自大众点评爱游戏app官方入口最新版本，目的是为姜文导演的电影《一步之遥》进行后续宣传，引导观众对其经典作品进行打分。整体视觉呈现依然令人赞叹，天马行空的构思和动画效果让人惊叹不已（强烈建议亲自感受一番！）。整体设计延续了复古的海报美学，无论是字体选择、文字编排还是点缀图案，都处处体现着精心雕琢。这种以问答模式构建的H5互动页面，能达到如此水准确实非常不易。

4.游戏

围绕互动趣味性活动，例如捕捉敏捷动物、考验视觉反应等简单娱乐项目，以及杜蕾斯推出的“深夜挑战”（仿制“白色方格”游戏）等商业推广性质的游戏，H5游戏凭借操作便捷、竞争元素突出，曾在社交平台广受欢迎，然而因构思单调、内容雷同，玩家对这类无深度的游戏渐渐感到乏味，品牌若想在游戏领域实现有效宣传，必须在游戏机制和创意构思方面加强投入。

same在节日之际发布了一款叫做《圣诞老人救援行动》的移动网页游戏，玩法十分便捷，需要用手指交替向上滑动，将角色的脖颈向上延伸至极点，游戏会统计你拉扯的最长长度，可以和朋友们比较一下谁制造的脖子更胜一筹。界面风格干净讨喜，和Same的标志性艺术特色相符，游戏中的形象选用Same的专属品牌形象，借助诙谐戏谑的游戏方式，向玩家传递Same别致风趣的产品理念。

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

一个H5页面的设计水平高低，会直接关系到它的传播成效，甚至关系到用户对品牌形象的感觉。下面列举出相关的设计要点：

1.细节与统一

打造卓越的用户感受，务必兼顾细微之处与整体氛围的协调性。采用怀旧化设计的界面，文字表现不宜过于前卫；营造诙谐氛围的互动，语言表达不宜过于庄重；侧重情感传递的体验，动态效果不宜过于繁复。

大众点评姜文电影推广系列的《九步之遥》H5专题页确实抓住了关键要素。从扫码进入开始，到别致的加载界面，直至最后的分享引导，包括文字表达和背景音乐，均与整体的诙谐基调相符，为用户带来连贯一致的参与感受。

特别留意“分享提示”这项精巧构思，与一个普通的箭头及一句毫无温度的“点击此处分发”相比，精心制作的细节设计所体现出的卓越品质和用户喜爱程度是毋庸置疑的，下面再列举几个出色的范例。

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

想让你的H5专题页迅速走红，就要第一时间捕捉热点，并且快速发布，借此机会宣传品牌，这确实是个不错的选择。

天天P图借助武则天走红的热潮，制作了广受欢迎的媚娘妆，并且《全民COS武媚娘》的H5互动页面迅速发布，该页面使用方便，只需轻轻一点就能上传照片，马上就能体验媚娘妆，可以和众多玩家比拼，既让民众感到乐趣，又宣传了商品。

网易娱乐在武媚娘事件引发争议时，制作了名为《神还原武媚娘被剪胸真相》的H5页面，不顾一切地用粗犷的草稿向公众展示了所谓的真相。这个页面迅速被大量传播，网易娱乐也借此机会进行了自我推广。

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

H5的表现形态虽然五花八门，但富有分量的素材才是重中之重。在篇幅受限的情况下，掌握叙述技巧，触动受众的心灵，能够显著促进素材的扩散。

LEVI’S的新年促销网页采用叙述者视角，将童年时物质匮乏但欢快祥和的春节，同成年后物质丰裕却精神空虚的春节形成鲜明对照，借助手绘插画营造出温馨的怀旧情调。页面最终点明"今年春节，将沉重负担与无谓规矩抛弃，以崭新视角体悟人生，共同创造精彩"的广告语，这种极具共鸣的故事叙述方式无疑是引发用户转发传播的核心要素。

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

技术进步推动下，当代的HTML5具备了诸多令人赞叹的功能，使我们能够便捷地完成画面绘制、内容清除、设备摇晃、重力识别、信息抹除以及立体场景构建等互动操作，想要体验更多此类效果，可以访问网址http://fff.cmiscm.com，那里汇集了几乎所有H5动态效果的实例。与其堆砌多种多样的动态效果致使界面显得杂乱笨重，我们更注重恰当运用技术，倾心致力于为顾客创造顺畅的交互感受。

一个显著的例子是天猫在十二二日实施的预购活动宣传的移动网页。用户在浏览时仅运用了上行的滑动动作，但网页所展示的景象仿佛是一个连贯的动态图像。设计者精妙地借助图形的构造与搭配，于滑动期间构造出一种丰盛的视差滚动景致，各个图形部件的覆盖、转动与整体页面的动态趋势配合得相当和谐。

结语

手机硬件性能逐步增强，HTML5技术持续进步，微信平台逐步放开，使得HTML5的跨平台特性、低成本优势以及快速更新迭代的特点更加明显，这对于投身于移动互联网浪潮的企业经营者、品牌方、设计人员和程序员而言，都将是一个极为有利的时期。未来必定会创造出更多出色的H5页面，我们满怀期待地注视着这一趋势的发展。