朋友們，是否還記得朋友圈不斷刷屏的網(wǎng)易H5活動(dòng)，作為一位互聯(lián)網(wǎng)設(shè)計(jì)師，不爭(zhēng)氣的眼淚從嘴角流了出來(lái)，饞呀、羨慕呀!同樣九年義務(wù)教育，為啥人家的活動(dòng)效果那么好?總是一做就爆，而自己一做就廢。

那么一款優(yōu)秀的H5它包含哪些要素呢?好用的、好玩的、觸動(dòng)人心的?下面通過(guò)這個(gè)踩過(guò)無(wú)數(shù)多坑的H5案例的思路分享，希望能給大家?guī)?lái)啟發(fā)，避免再次踩坑。

大綱：

• 活動(dòng)概述
• 主題構(gòu)思
• 視覺(jué)風(fēng)格設(shè)計(jì)
• 交互動(dòng)效設(shè)計(jì)
• 關(guān)于適配
• 數(shù)據(jù)復(fù)盤總結(jié)

活動(dòng)概述|OVERVIEW

1. 為什么做H5活動(dòng)

本活動(dòng)由平安銀行對(duì)公業(yè)務(wù)中臺(tái)聯(lián)合Planet B舉辦，以IT對(duì)公派駐全新設(shè)計(jì)的IP形象燈泡仔及家族成員為載體?；顒?dòng)旨在推廣對(duì)公業(yè)務(wù)中臺(tái)產(chǎn)品，由wowdesign團(tuán)隊(duì)設(shè)計(jì)的IT對(duì)公派駐IP-燈泡仔及其家族品牌形象結(jié)合燈泡仔快閃打卡活動(dòng)，線上線下聯(lián)合運(yùn)營(yíng)推廣對(duì)公業(yè)務(wù)中臺(tái)。

主題構(gòu)思|H5 THEME

1. H5類型選擇

什么樣的活動(dòng)主題能勾起用戶的注意力?什么樣的內(nèi)容能引起用戶的共鳴?能讓其自愿轉(zhuǎn)發(fā)，愿意用這個(gè)虛擬的活動(dòng)向朋友來(lái)展現(xiàn)表達(dá)自我人設(shè)。所以活動(dòng)的方向選擇尤為重要。我們對(duì)市場(chǎng)已有的H5活動(dòng)做了歸類，分析他們對(duì)應(yīng)抓住了用戶哪些痛點(diǎn)，從中獲取方向。

• 測(cè)試類：契合了用戶低成本有趣了解自我的需求。
• 新聞熱點(diǎn)類：以熱點(diǎn)話題、事件為素材，特點(diǎn)是時(shí)效性高，講究與用戶的距離，參與感、真實(shí)感。
• 互動(dòng)游戲類：以互動(dòng)性較強(qiáng)，特點(diǎn)多為有趣、簡(jiǎn)單易上手，愉悅感、成就感。
• 公益類：以社會(huì)熱點(diǎn)問(wèn)題為題材，如環(huán)保、保護(hù)瀕危動(dòng)物、關(guān)愛(ài)老人等，社會(huì)焦點(diǎn)問(wèn)題出發(fā)，彰顯社會(huì)責(zé)任感，給人深刻的教育警醒作用。
• 軟文故事類：以獨(dú)立的經(jīng)歷、故事為引導(dǎo)，多為熟為人知的生活、工作、感情的糗事，側(cè)面達(dá)到某種營(yíng)銷目的。

2. 哪些因素影響用戶參與并轉(zhuǎn)發(fā)

用戶的參與度與轉(zhuǎn)發(fā)裂變數(shù)據(jù)，是衡量一個(gè)活動(dòng)的成功與否。那么從用戶心理學(xué)角度分析，影響因素有以下幾點(diǎn)：自戀炫耀心理、共鳴心理、好的視覺(jué)效果。

3. 當(dāng)下熱點(diǎn)及用戶心理狀態(tài)

疫情之下，大家的心理和經(jīng)濟(jì)都受到不小影響，焦慮失望情緒高漲，希望得以表達(dá)情緒。

4. 綜合分析結(jié)論

• 結(jié)合疫情下用戶心理狀態(tài)，疫情對(duì)他們生活、工作、經(jīng)濟(jì)的影響。
• 通過(guò)刷屏因素中的”共鳴“，再結(jié)合熟悉的網(wǎng)絡(luò)流行語(yǔ)作為標(biāo)簽關(guān)鍵詞，精準(zhǔn)的貼合了用戶表達(dá)自我、分享自我現(xiàn)狀的訴求。
• 選用測(cè)試類玩法，讓用戶去測(cè)試pick自己的2020生活狀態(tài)，了解自我，分享現(xiàn)狀。

所以希望用戶通過(guò)關(guān)鍵詞選擇，測(cè)試生成2020生活狀態(tài)報(bào)告，由此擊中了用戶內(nèi)心，引起共鳴，使其能參與轉(zhuǎn)發(fā)此活動(dòng)。并選定主題《pick你的2020戳心話》

UI風(fēng)格設(shè)計(jì)|H5 STYLE

通過(guò)網(wǎng)易等平臺(tái)過(guò)往H5案例分析，設(shè)計(jì)風(fēng)格多為孟菲斯風(fēng)格、蒸汽波故障風(fēng)、插畫風(fēng)等較為年輕活潑富有表現(xiàn)力的風(fēng)格。結(jié)合我們IP形象的線描風(fēng)格和主題，最終敲定了孟菲斯風(fēng)格設(shè)計(jì)風(fēng)格。該風(fēng)格能表現(xiàn)各種富于個(gè)性化的文化內(nèi)涵，從天真滑稽到怪誕、離奇等不同情趣。在色彩上運(yùn)用一些明快、風(fēng)趣、飽和度高的明亮色調(diào)，給用戶極強(qiáng)的感官刺激和豐富的情感，貼合本次活動(dòng)戳心話的各種話語(yǔ)場(chǎng)景。

交互動(dòng)效設(shè)計(jì)|DYNAMIC EFFECT

對(duì)于H5而言，簡(jiǎn)單不需思考的交互操作是基本的要求，炫酷好玩的交互動(dòng)效是必不可少的加分項(xiàng)，我們把交互動(dòng)效拆解為三個(gè)方面：

1. 操作指引動(dòng)效：

首頁(yè)的h5主題交代清楚之后，首要的就是引導(dǎo)用戶去下一步的標(biāo)簽選擇頁(yè)面，所以按鈕一定要在最舒適的點(diǎn)擊位置，且有最強(qiáng)的操作提示，所以按鈕呼吸縮放動(dòng)畫提示是一個(gè)不錯(cuò)的選擇。

2. 交互轉(zhuǎn)場(chǎng)動(dòng)效：

界面轉(zhuǎn)場(chǎng)元素的連貫性和界面元素的進(jìn)出場(chǎng)動(dòng)畫，能讓界面更加流暢連貫，操作體驗(yàn)感更佳。

3. 標(biāo)簽選擇頁(yè)標(biāo)簽翻動(dòng)動(dòng)效：

標(biāo)簽選擇頁(yè)面是整個(gè)產(chǎn)品最核心的交互部分，在滿足易用性的基本操作交互要求上，還需要增加一定的操作趣味性，給用戶帶來(lái)驚喜的交互動(dòng)效，比如標(biāo)簽3d景深旋轉(zhuǎn)翻動(dòng)操作方式，點(diǎn)擊選擇趣味動(dòng)態(tài)反饋。

關(guān)于適配|ADAPTATION

1. 屏幕適配

為適配16:9及更長(zhǎng)的全面屏手機(jī)，須把頁(yè)面拆解為主體層、元素層、背景層。

主體層、元素層

需要把各元素定位好對(duì)應(yīng)的位置關(guān)系，如主體層通過(guò)切圖調(diào)整于畫面居中位置，再確定好元素層距離頂部、底部的距離。注意這里的數(shù)據(jù)需從矮屏(16:9，也就是iphone6)向高屏幕適配，以矮屏幕為基礎(chǔ)，這樣就能避免適配之后出現(xiàn)元素重疊的問(wèn)題。

背景層

背景圖根據(jù)屏幕尺寸做縮放、裁剪適配填充滿屏幕。所以背景層一般設(shè)計(jì)成相對(duì)簡(jiǎn)單的畫面，以免在裁剪縮放時(shí)出現(xiàn)較大的視覺(jué)差異。

2. 結(jié)果頁(yè)擴(kuò)展性適配

在選擇標(biāo)簽類別的H5活動(dòng)中，結(jié)果頁(yè)面需展示用戶選擇的標(biāo)簽，但用戶選擇的標(biāo)簽數(shù)是不確定的，這樣就涉及到結(jié)果頁(yè)的長(zhǎng)短適配問(wèn)題。所以在標(biāo)簽展示部分的底色需要是純色或二方連續(xù)圖，且二方連續(xù)圖的高度需和單行標(biāo)簽的高度一致，保證每增加一行標(biāo)簽，增加對(duì)應(yīng)高度的二方連續(xù)背景圖，保證背景頁(yè)面高度總是適配于對(duì)應(yīng)標(biāo)簽數(shù)量所需的高度。

復(fù)盤總結(jié)|DATA SUMMARY

1. 瀏覽數(shù)(PV)、用戶數(shù)(UV)

為檢測(cè)活動(dòng)效果，在活動(dòng)的各時(shí)期通過(guò)數(shù)據(jù)平臺(tái)拉取了瀏覽數(shù)(PV)、用戶數(shù)(UV)幫助我們判斷活動(dòng)的傳播裂變效果，并分析其影響因子：曝光數(shù)、渠道質(zhì)量、標(biāo)題內(nèi)容吸引力，通過(guò)不斷優(yōu)化影響因素，以保證在計(jì)劃的時(shí)間內(nèi)達(dá)到預(yù)期的活動(dòng)效果。

2. 漏斗數(shù)據(jù)

通過(guò)漏斗數(shù)據(jù)分析用戶流失情況，可進(jìn)一步分析流失原因：頁(yè)面操作引導(dǎo)是否明確、頁(yè)面內(nèi)容是否有吸引力、頁(yè)面可用性，幫助我們優(yōu)化操作指引、內(nèi)容設(shè)計(jì)優(yōu)化與可用性走查。

3. 本次H5活動(dòng)可以提升點(diǎn)

Ui風(fēng)格應(yīng)更貼合主題

主題表達(dá)上：首先作為疫情下戳心事的活動(dòng)主題，并沒(méi)有很好的在視覺(jué)上傳達(dá)戳心和疫情的氛圍，導(dǎo)致活動(dòng)的代入感不夠，用戶對(duì)活動(dòng)的主題感知不夠明確，更多的只是燈泡仔IP風(fēng)格的延續(xù)。

風(fēng)格選擇上：本次h5設(shè)計(jì)是基于剛剛誕生的IP形象燈泡仔為視覺(jué)kv主體，而IP形象的初創(chuàng)的表現(xiàn)形式為線描風(fēng)格，還未擴(kuò)展其他表現(xiàn)形式，在此情況下選用線描的孟菲斯風(fēng)格是必然的選擇。所以在IP形象有成熟的更豐富的風(fēng)格形式后，整個(gè)活動(dòng)的風(fēng)格也能有更多嘗試可能，找到該活動(dòng)主題最佳的視覺(jué)表現(xiàn)形式。

動(dòng)效需要有大的突破

隨著手機(jī)性能的提升，炫酷新穎的h5動(dòng)效是提升用戶體驗(yàn)，抓住用戶獵奇心理和眼球的不錯(cuò)方式。但這需要大量開(kāi)發(fā)資源的投入，和設(shè)計(jì)側(cè)對(duì)動(dòng)效的設(shè)計(jì)和研究。天貓和網(wǎng)易近期的H5動(dòng)效運(yùn)用了大量的3d視覺(jué)效果和3d景深操作，這對(duì)h5的創(chuàng)新體驗(yàn)有著極大的幫助。本次活動(dòng)在動(dòng)畫方面還有很大的可發(fā)揮研究的空間。

運(yùn)營(yíng)文案需更抓眼球

在這個(gè)信息爆炸的時(shí)代，沒(méi)有一個(gè)抓眼球的標(biāo)題，那么注定會(huì)沉默在海量的信息中。為此上線后我們做了大量的用戶調(diào)研，其中標(biāo)題根據(jù)業(yè)務(wù)推廣導(dǎo)向、實(shí)時(shí)熱點(diǎn)導(dǎo)向等多方向嘗試，結(jié)合新聞常用的3段式標(biāo)題結(jié)構(gòu)。并做了AB測(cè)試及用戶調(diào)研。其中標(biāo)題用實(shí)時(shí)熱點(diǎn)方向反饋?zhàn)詈茫詷I(yè)務(wù)導(dǎo)向的方向?qū)端用戶毫無(wú)吸引力。所以后續(xù)的在做b端產(chǎn)品出圈設(shè)計(jì)時(shí)，在無(wú)特殊要求下，盡量往用戶關(guān)心的熱點(diǎn)、好奇點(diǎn)為導(dǎo)向去設(shè)計(jì)標(biāo)題和內(nèi)容。

總結(jié)

• 活動(dòng)設(shè)計(jì)之前要理清楚設(shè)計(jì)背景，確定好相對(duì)應(yīng)的設(shè)計(jì)主題和方向，什么樣的活動(dòng)主題能吸引用戶參與進(jìn)。
• 孟菲斯風(fēng)格、蒸汽波故障風(fēng)、插畫風(fēng)是H5不錯(cuò)的選擇，孟菲斯風(fēng)格最容易出視覺(jué)效果，但這都需要貼合主題，幫助渲染活動(dòng)主題氛圍。
• H5活動(dòng)在保證用戶體驗(yàn)的基礎(chǔ)上，能加入好玩有趣的交互動(dòng)效是一個(gè)加分項(xiàng)。
• 由于市場(chǎng)上手機(jī)的尺寸大小不一，必須考慮好適配問(wèn)題。
• 上線后的數(shù)據(jù)復(fù)盤總結(jié)能夠幫助我們發(fā)現(xiàn)問(wèn)題，使下一次活動(dòng)做得更好。且一個(gè)有吸引力的標(biāo)題能讓你成功一半。