二．方式為功用服務
在確定了專題頁的功用目標之后，接下來便是要害的規劃階段了。怎么有的放矢地進行規劃，需求考慮到具體的運用場景和傳達目標，從用戶視點出發去思考什么樣的頁面是用戶最想看的最會去共享的。以下羅列幾種常見的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。規劃師巧妙使用圖形規劃與組合，在滑動過程中營造出一種豐富的視差滾動作用，單個圖形元素的遮罩、旋轉與全體頁面的動勢配合極為默契。