做H5沒頭緒?這有一份完整的H5案例思路

0 評論 18544 瀏覽 149 收藏 14 分鐘

導(dǎo)語:朋友們,是否還記得朋友圈不斷刷屏的網(wǎng)易H5活動?作為一位互聯(lián)網(wǎng)設(shè)計師,不爭氣的眼淚從嘴角流了出來,饞呀、羨慕呀!同樣九年義務(wù)教育,為啥人家的活動效果那么好?別人一做就爆,而自己一做就廢。一款優(yōu)秀的H5它包含哪些要素呢?下面通過這個踩過無數(shù)多坑的H5案例的思路分享,希望能給大家?guī)韱l(fā),避免再次踩坑。

大綱:

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

一、活動概述:OVERVIEW

為什么做H5活動?

本活動以IT對公派駐全新設(shè)計的IP形象燈泡仔及家族成員為載體。

活動旨在推廣對公業(yè)務(wù)中臺產(chǎn)品,由wowdesign團隊設(shè)計的IT對公派駐IP-燈泡仔及其家族品牌形象結(jié)合燈泡仔快閃打卡活動,線上線下聯(lián)合運營推廣對公業(yè)務(wù)中臺。

二、主題構(gòu)思:H5 THEME

1. H5類型選擇

什么樣的活動主題能勾起用戶的注意力?什么樣的內(nèi)容能引起用戶的共鳴?

能讓其自愿轉(zhuǎn)發(fā),愿意用這個虛擬的活動向朋友來展現(xiàn)表達自我人設(shè)。所以活動的方向選擇尤為重要。我們對市場已有的H5活動做了歸類,分析他們對應(yīng)抓住了用戶哪些痛點,從中獲取方向。

1)測試類

契合了用戶低成本有趣了解自我的需求。

2)新聞熱點類

以熱點話題、事件為素材,特點是時效性高,講究與用戶的距離,參與感、真實感。

3)互動游戲類

以互動性較強,特點多為有趣、簡單易上手,愉悅感、成就感。

4)公益類

以社會熱點問題為題材,如環(huán)保、保護瀕危動物、關(guān)愛老人等,社會焦點問題出發(fā),彰顯社會責(zé)任感,給人深刻的教育警醒作用。

5)軟文故事類

以獨立的經(jīng)歷、故事為引導(dǎo),多為熟為人知的生活、工作、感情的糗事,側(cè)面達到某種營銷目的。

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

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

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

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

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

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

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

三、UI風(fēng)格設(shè)計:H5 STYLE

通過網(wǎng)易等平臺過往H5案例分析,設(shè)計風(fēng)格多為孟菲斯風(fēng)格、蒸汽波故障風(fēng)、插畫風(fēng)等較為年輕活潑富有表現(xiàn)力的風(fēng)格。結(jié)合我們IP形象的線描風(fēng)格和主題,最終敲定了孟菲斯風(fēng)格設(shè)計風(fēng)格。

該風(fēng)格能表現(xiàn)各種富于個性化的文化內(nèi)涵,從天真滑稽到怪誕、離奇等不同情趣。在色彩上運用一些明快、風(fēng)趣、飽和度高的明亮色調(diào),給用戶極強的感官刺激和豐富的情感,貼合本次活動戳心話的各種話語場景。

設(shè)計展示:

四、交互動效設(shè)計:DYNAMIC EFFECT

對于H5而言,簡單不需思考的交互操作是基本的要求,炫酷好玩的交互動效是必不可少的加分項,我們把交互動效拆解為三個方面:

1. 操作指引動效

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

2. 交互轉(zhuǎn)場動效

界面轉(zhuǎn)場元素的連貫性和界面元素的進出場動畫,能讓界面更加流暢連貫,操作體驗感更佳。

3. 標簽選擇頁標簽翻動動效

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

五、關(guān)于適配:ADAPTATION

1. 屏幕適配

為適配16:9及更長的全面屏手機,須把頁面拆解為主體層、元素層、背景層。

1)主體層、元素層

需要把各元素定位好對應(yīng)的位置關(guān)系,如主體層通過切圖調(diào)整于畫面居中位置,再確定好元素層距離頂部、底部的距離。

注意這里的數(shù)據(jù)需從矮屏(16:9,也就是iphone6)向高屏幕適配,以矮屏幕為基礎(chǔ),這樣就能避免適配之后出現(xiàn)元素重疊的問題。

2)背景層

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

2. 結(jié)果頁擴展性適配

在選擇標簽類別的H5活動中,結(jié)果頁面需展示用戶選擇的標簽,但用戶選擇的標簽數(shù)是不確定的,這樣就涉及到結(jié)果頁的長短適配問題。

所以在標簽展示部分的底色需要是純色或二方連續(xù)圖,且二方連續(xù)圖的高度需和單行標簽的高度一致,保證每增加一行標簽,增加對應(yīng)高度的二方連續(xù)背景圖,保證背景頁面高度總是適配于對應(yīng)標簽數(shù)量所需的高度。

六、復(fù)盤總結(jié):DATA SUMMARY

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

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

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

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

3. 本次H5活動可以提升點

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

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

風(fēng)格選擇上:本次h5設(shè)計是基于剛剛誕生的IP形象燈泡仔為視覺kv主體,而IP形象的初創(chuàng)的表現(xiàn)形式為線描風(fēng)格,還未擴展其他表現(xiàn)形式,在此情況下選用線描的孟菲斯風(fēng)格是必然的選擇。

所以在IP形象有成熟的更豐富的風(fēng)格形式后,整個活動的風(fēng)格也能有更多嘗試可能,找到該活動主題最佳的視覺表現(xiàn)形式。

2)動效需要有大的突破

隨著手機性能的提升,炫酷新穎的h5動效是提升用戶體驗,抓住用戶獵奇心理和眼球的不錯方式。但這需要大量開發(fā)資源的投入,和設(shè)計側(cè)對動效的設(shè)計和研究。

天貓和網(wǎng)易近期的H5動效運用了大量的3d視覺效果和3d景深操作,這對h5的創(chuàng)新體驗有著極大的幫助。本次活動在動畫方面還有很大的可發(fā)揮研究的空間。

3)運營文案需更抓眼球

在這個信息爆炸的時代,沒有一個抓眼球的標題,那么注定會沉默在海量的信息中。

為此上線后我們做了大量的用戶調(diào)研,其中標題根據(jù)業(yè)務(wù)推廣導(dǎo)向、實時熱點導(dǎo)向等多方向嘗試,結(jié)合新聞常用的3斷式標題結(jié)構(gòu)。并做了AB測試及用戶調(diào)研。其中標題用實時熱點方向反饋最好,以業(yè)務(wù)導(dǎo)向的方向?qū)端用戶毫無吸引力。

所以后續(xù)的在做b端產(chǎn)品出圈設(shè)計時,在無特殊要求下,盡量往用戶關(guān)心的熱點、好奇點為導(dǎo)向去設(shè)計標題和內(nèi)容。

4. 總結(jié)

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

作者:WOWdesign,研究設(shè)計價值最大化,涉及用戶體驗、品牌體驗、空間體驗。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @WOWdesign 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!