二．方式为功用服务
在确定了专题页的功用目标之后，接下来便是要害的规划阶段了。怎么有的放矢地进行规划，需求考虑到具体的运用场景和传达目标，从用户视点出发去思考什么样的页面是用户最想看的最会去共享的。以下罗列几种常见的H5专题页表现方式：
1.简略图文
简略图文是前期最典型的H5专题页方式。“图”的方式千变万化，可以是相片、插画、GIF等。经过翻页等简略的交互操作，起到类似幻灯片的传达作用。检测的是高质量的内容本身和讲故事的才能。
滴滴打车这个事例便是典型的简略图文型H5专题页，用几张相片故事串起了整套页面。视觉简洁有力，选用整屏黑白相片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，没有其他互动方式，让观众聚焦于内容，经过陌生人之间的真情联系来刻画品牌的正能量形象。
也有不甘平淡的精彩事例。在除夕夜全国人民张狂抢红包的时间，微信推出了《从此看尽我国人的名与利》这样一个专题页。第一眼就被镇住了，好亲热的RMB~每个页面都是一张人民币景色部分扩大图，创作者加入巧妙的构思元素与微动态进行细腻刻画，带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的案牍，在推行微信红包的一同呼吁人们重新审视人情与名利的奥义。
2.礼物/贺卡/邀请函
每个人都喜爱收到礼物的感觉，捉住这一心思，品牌推出了各种H5方式的礼物、贺卡、邀请函，经过提高用户好感度来潜移默化地抵达品牌宣扬的意图。既然是礼物，那构思和制作便是重要的加分项。
AKQA构思营销公司在圣诞之际献上了一份厚礼——梦境水晶球。经过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。经过手机环顾四周，可以360度赏识水晶球里的全景，摇一摇雪花便漫天飘洒。写下你的祝福并共享给朋友，相信一定会冷艳到对方。这个H5页面运用了重力感应、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视图等互动作用。相较于塞入各种不同品种的动效导致页面紊乱臃肿，我们更发起的是合理运用技能，用心专注于为用户供给流畅的互动体会。
典型的事例是淘宝在双12推出的预售推行H5专题页。在浏览过程中我只运用了一种向上滑动的手势，而页面出现出来的作用却犹如一个流畅的动态GIF。规划师巧妙使用图形规划与组合，在滑动过程中营造出一种丰富的视差滚动作用，单个图形元素的遮罩、旋转与全体页面的动势配合极为默契。