二．方式爲功用服務
在确定了專題頁的功用目标之後(hòu)，接下來便是要害的規劃階段了。怎麼(me)有的放矢地進(jìn)行規劃，需求考慮到具體的運用場景和傳達目标，從用戶視點出發(fā)去思考什麼(me)樣(yàng)的頁面(miàn)是用戶最想看的最會(huì)去共享的。以下羅列幾種(zhǒng)常見的H5專題頁表現方式：
1.簡略圖文
簡略圖文是前期最典型的H5專題頁方式。“圖”的方式千變萬化，可以是相片、插畫、GIF等。經(jīng)過(guò)翻頁等簡略的交互操作，起(qǐ)到類似幻燈片的傳達作用。檢測的是高質量的内容本身和講故事(shì)的才能(néng)。
滴滴打車這(zhè)個事(shì)例便是典型的簡略圖文型H5專題頁，用幾張相片故事(shì)串起(qǐ)了整套頁面(miàn)。視覺簡潔有力，選用整屏黑白相片，點綴以滴滴的品牌橙色。每切換一張圖片，文字就(jiù)漸隐浮現，沒(méi)有其他互動方式，讓觀衆聚焦于内容，經(jīng)過(guò)陌生人之間的真情聯系來刻畫品牌的正能(néng)量形象。
也有不甘平淡的精彩事(shì)例。在除夕夜全國(guó)人民張狂搶紅包的時間，微信推出了《從此看盡我國(guó)人的名與利》這(zhè)樣(yàng)一個專題頁。第一眼就(jiù)被(bèi)鎮住了，好(hǎo)親熱的RMB~每個頁面(miàn)都(dōu)是一張人民币景色部分擴大圖，創作者加入巧妙的構思元素與微動态進(jìn)行細膩刻畫，帶觀衆走進(jìn)了人民币的微觀世界。每一張鈔票圖案配合發(fā)人深省的案牍，在推行微信紅包的一同呼籲人們重新審視人情與名利的奧義。
2.禮物/賀卡/邀請函
每個人都(dōu)喜愛收到禮物的感覺，捉住這(zhè)一心思，品牌推出了各種(zhǒng)H5方式的禮物、賀卡、邀請函，經(jīng)過(guò)提高用戶好(hǎo)感度來潛移默化地抵達品牌宣揚的意圖。既然是禮物，那構思和制作便是重要的加分項。
AKQA構思營銷公司在聖誕之際獻上了一份厚禮——夢境水晶球。經(jīng)過(guò)移動手機，鏡頭從水晶球外不斷搖晃推近，漸漸走進(jìn)水晶球的微觀世界裡(lǐ)。經(jīng)過(guò)手機環顧四周，可以360度賞識水晶球裡(lǐ)的全景，搖一搖雪花便漫天飄灑。寫下你的祝福并共享給朋友，相信一定會(huì)冷豔到對(duì)方。這(zhè)個H5頁面(miàn)運用了重力感應、3D等技能(néng)，文字與BGM的運用也十分考究，給用戶帶來了完美的互動體會(huì)，值得細細品味。
Evernote在過(guò)年期間也獨出機杼地推出語音賀卡，經(jīng)過(guò)群衆号引導用戶對(duì)其發(fā)送一條語音音訊，然後(hòu)把這(zhè)條祝福語音結合我國(guó)風動畫做成(chéng)一張絕無僅有的語音賀卡發(fā)送給朋友。全體色調也是以Evernote品牌色爲主，一同蘊含著(zhe)一絲優雅的年味，十分讨巧。
3.問答/評分/測驗
問答方式的H5頁面(miàn)也屢見不鮮了，使用用戶的求知欲和探索欲，一路選選選，看最終到底是什麼(me)成(chéng)績。一條清晰的頭緒是必要的，最終抵達的結果頁也需求合理不突兀，如果能(néng)輔以出彩的視覺和案牍，弱化答題的單調感那就(jiù)再好(hǎo)不過(guò)了。
與本文最初相同也是群衆點評的項目，這(zhè)次是爲姜文的電影《一步之遙》做持續推行，讓用戶爲姜文的代表作評分。視覺規劃依舊出彩，開(kāi)腦洞的構思和動畫規劃令人叫(jiào)絕（一定要掃一掃體會(huì)下！）。連續了懷舊大字報風格，字體、案牍、裝飾元素等細節處理也十分用心。問答方式的H5頁面(miàn)能(néng)做到這(zhè)個份上也是蠻拼的。
4.遊戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小遊戲再到杜蕾斯“一夜N次郎”（即山寨版“别踩白塊兒”）等品牌植入式小遊戲，H5遊戲因爲操作簡略、競技性強，一度風靡朋友圈，但構思缺少和同質化現象導緻用戶對(duì)無腦小遊戲逐漸産生了厭倦。品牌要在遊戲上做到成(chéng)功傳達，需求在玩法和規劃上多下點功夫。
Same在聖誕節推出了一款名爲《聖誕老人解救計劃》的H5小遊戲，操作十分簡略，隻需用手指替換上滑，把人物的脖子向(xiàng)上拉到無限長(cháng)，遊戲會(huì)記錄你拉的最高間隔，跟朋友比一比誰比較長(cháng)。界面(miàn)清新可愛，與Same的招牌畫風共同，遊戲人物也是Same的品牌人物，經(jīng)過(guò)诙諧惡搞的遊戲向(xiàng)用戶傳達Same獨到有趣的産品文化。
三．爲規劃加分的4個關鍵
一個H5頁面(miàn)規劃質量的出衆與否，會(huì)直接影響其傳達作用，甚至影響到用戶對(duì)品牌形象的認知。在這(zhè)裡(lǐ)總結出以下的規劃關鍵：
1.細節與一緻
要成(chéng)就(jiù)高質量的用戶體會(huì)，有必要考慮到細節與全體的一緻性。複古拟物的視覺風格，那字體就(jiù)不能(néng)過(guò)于現代；诙諧調侃的調調，那案牍遣詞就(jiù)不能(néng)過(guò)于嚴肅；打情感内容牌的，動效就(jiù)不能(néng)過(guò)于花哨。
群衆點評姜文電影推行系列的《九步之遙》H5專題頁便牢牢捉住了這(zhè)一點。從二維碼入口到性感的loading頁，再到最終共享提示的規劃，包含案牍遣詞和背景音效，無不與全體的戲虐風保持共同，給到用戶一個完整一緻的互動體會(huì)。
尤其關注“共享提示”這(zhè)個細節規劃，比起(qǐ)一個簡略的箭頭和一句冷冰冰的“點這(zhè)裡(lǐ)共享”，用心的細節規劃帶來的高質量和好(hǎo)感度是清楚明了的。再貼幾個精彩事(shì)例：
2.緊跟熱門，使用論題效應
想要你的H5專題頁一夜爆紅，第一時間捉住熱門并火速上線，借機進(jìn)行品牌宣揚也不失爲一條捷徑。
天天P圖捉住武則天熱播的契機推出了風靡海内外的媚娘妝，一同《全民COS武媚娘》的H5互動頁也第一時間上線，操作簡略易上手，一鍵上傳相片就(jiù)能(néng)馬上完結媚娘妝，與萬千媚娘們進(jìn)行PK，娛樂了群衆又推行了産品。
網易娛樂在武媚娘剪胸風雲的風口浪尖上推出了名爲《神還(hái)原武媚娘被(bèi)剪胸本相》的H5專題頁，放下節操用極富想象力的粗曠草圖風向(xiàng)廣大觀衆“還(hái)原”了本相。一時間被(bèi)張狂轉發(fā)，網易娛樂也算是順勢自我宣揚了一把。
3.講個好(hǎo)故事(shì)，引發(fā)情感共鳴
不論H5的方式怎麼(me)多變，有價值的内容始終是第一位的。在有限的篇幅裡(lǐ)，學(xué)會(huì)講故事(shì)，引發(fā)用戶的情感共鳴，將(jiāng)對(duì)内容的傳達構成(chéng)極大的推動。
LEVI’S新年優惠活動專題頁以第一人稱的口吻，用小時候儉樸卻熱烈的新年與長(cháng)大後(hòu)富足卻庸俗的新年做對(duì)比，用手繪風烘托出親熱的懷舊氣氛。最終引出“這(zhè)個新年，把壓力和束縛打包扔掉，用新鮮的眼光感受日子，一同活出趣”的品牌推行slogan，代入感極強的故事(shì)無疑是驅動共享的源動力。
4.合理運用技能(néng)，打造流暢的互動體會(huì)
随著(zhe)技能(néng)的開(kāi)展，如今的HTML5擁有很多出彩的特性，讓我們能(néng)輕松完成(chéng)繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動作用。相較于塞入各種(zhǒng)不同品種(zhǒng)的動效導緻頁面(miàn)紊亂臃腫，我們更發(fā)起(qǐ)的是合理運用技能(néng)，用心專注于爲用戶供給流暢的互動體會(huì)。
典型的事(shì)例是淘寶在雙12推出的預售推行H5專題頁。在浏覽過(guò)程中我隻運用了一種(zhǒng)向(xiàng)上滑動的手勢，而頁面(miàn)出現出來的作用卻猶如一個流暢的動态GIF。規劃師巧妙使用圖形規劃與組合，在滑動過(guò)程中營造出一種(zhǒng)豐富的視差滾動作用，單個圖形元素的遮罩、旋轉與全體頁面(miàn)的動勢配合極爲默契。