文章目錄[隱藏]
H5為什么要活動(dòng)？
本次活動(dòng)由平安銀行公司業(yè)務(wù)中心和星球B聯(lián)合舉辦，以全新設(shè)計(jì)的IP形象燈泡和家庭成員為載體。
該活動(dòng)旨在公司業(yè)務(wù)中推廣產(chǎn)品。wowdesign團(tuán)隊(duì)成都企業(yè)網(wǎng)站建設(shè)設(shè)計(jì)的IT認(rèn)證IP- light bulb及其家族品牌形象，結(jié)合燈泡的快閃打卡活動(dòng)，成都小程序開發(fā)，線上線下聯(lián)合運(yùn)作，促進(jìn)了企業(yè)在臺(tái)灣的業(yè)務(wù)。
什么樣的活動(dòng)主題才能引起用戶的關(guān)注？什么樣的內(nèi)容才能引起用戶的共鳴？
讓它自愿轉(zhuǎn)發(fā)，也愿意用這個(gè)虛擬的活動(dòng)向朋友們展示如何表達(dá)自己。因此，活動(dòng)方向的選擇尤為重要。我們對(duì)市場(chǎng)上現(xiàn)有的H5活動(dòng)進(jìn)行分類，分析它們抓住了用戶的哪些痛點(diǎn)，成都網(wǎng)站維護(hù)公司并從中得到方向。
1)測(cè)試類別
滿足了用戶低成本、有趣的自我理解需求。
2)新聞熱點(diǎn)
以熱點(diǎn)話題和事件為素材，特點(diǎn)是時(shí)效性高、注重與用戶的距離、參與感和真實(shí)感。
3)互動(dòng)游戲
具有很強(qiáng)的互動(dòng)性，特點(diǎn)多是趣味性，簡(jiǎn)單易用，有愉悅感和成就感。
4)公益類
以社會(huì)熱點(diǎn)問題為主題，如環(huán)境保護(hù)、瀕危動(dòng)物保護(hù)、關(guān)愛老人等。，從社會(huì)焦點(diǎn)問題出發(fā)，表現(xiàn)了社會(huì)責(zé)任感，給人以深刻的教育警醒。
5)軟文故事。
以獨(dú)立的經(jīng)歷和故事為導(dǎo)向，多為大家熟知的生活、工作、感情的軼事，在側(cè)面達(dá)到某種營(yíng)銷目的。
用戶的參與度和轉(zhuǎn)發(fā)裂變數(shù)據(jù)是一個(gè)活動(dòng)成功與否的衡量標(biāo)準(zhǔn)。那么從用戶心理的角度來看，影響因素有:自戀、炫耀、共鳴、視覺效果好。
疫情之下，大家的心理和經(jīng)濟(jì)都受到了很大的影響，焦慮和失望情緒高漲，希望表達(dá)自己的情緒。
結(jié)合疫情下用戶心理狀態(tài)，疫情對(duì)他們生活、工作、經(jīng)濟(jì)的影響。通過刷屏因素中的”共鳴“，再結(jié)合熟悉的網(wǎng)絡(luò)流行語作為標(biāo)簽關(guān)鍵詞，精準(zhǔn)的貼合了用戶表達(dá)自我、分享自我現(xiàn)狀的訴求。選用測(cè)試類玩法，讓用戶去測(cè)試pick自己的2020生活狀態(tài)，了解自我，分享現(xiàn)狀。
所以希望用戶通過關(guān)鍵詞選擇和測(cè)試，生成2020生活狀態(tài)報(bào)告，擊中用戶的內(nèi)心，產(chǎn)生共鳴，從而參與轉(zhuǎn)發(fā)這個(gè)活動(dòng)。并選擇主題“挑你2020戳心談”
通過網(wǎng)易等平臺(tái)過往的H5案例分析，設(shè)計(jì)風(fēng)格多為孟菲斯風(fēng)格、汽波斷層風(fēng)格、插畫風(fēng)格等年輕化、活潑化、富有表現(xiàn)力的風(fēng)格。結(jié)合我們IP形象的線描風(fēng)格和主題，成都網(wǎng)站設(shè)計(jì)公司 敲定了孟菲斯風(fēng)格的設(shè)計(jì)風(fēng)格。
這種風(fēng)格可以表達(dá)各種個(gè)性化的文化內(nèi)涵，從天真滑稽到怪誕離奇。色彩上運(yùn)用了一些明亮、搞笑、高飽和度的色彩，給用戶強(qiáng)烈的感官刺激和豐富的情感，契合了本次活動(dòng)的各種話語場(chǎng)景。
設(shè)計(jì):
對(duì)于H5來說，成都app軟件開發(fā)公司簡(jiǎn)單的無思考交互是基本要求，酷炫好玩的交互是必不可少的加分項(xiàng)。我們將交互分為三個(gè)方面:
主頁的h5主題講解清楚之后，成都小程序開發(fā)公司件事就是引導(dǎo)用戶進(jìn)入下一個(gè)選項(xiàng)卡選擇頁面，所以按鈕一定要在最舒適的點(diǎn)擊位置，有最強(qiáng)的操作提示，所以按鈕呼吸縮放動(dòng)畫提示是個(gè)不錯(cuò)的選擇。
界面過渡元素的連續(xù)性和界面元素的動(dòng)畫化可以使界面更加流暢連貫，操作體驗(yàn)更好。
選擇標(biāo)簽頁是整個(gè)產(chǎn)品最核心的交互部分。為了滿足易用性的基本操作交互需求，還需要增加一定的操作趣味性，給用戶帶來驚喜的交互效果，比如標(biāo)簽頁的3d景深旋轉(zhuǎn)翻轉(zhuǎn)操作方式，點(diǎn)擊選擇有趣的動(dòng)態(tài)反饋。
為了適應(yīng)16:9和更長(zhǎng)的全面屏手機(jī)，頁面必須拆解成主層、元素層和背景層。
1)主體層和元素層
需要定位各個(gè)元素的對(duì)應(yīng)位置關(guān)系，比如通過裁剪圖片將主層調(diào)整到圖片的中心，然后確定元素層與上下的距離。
注意這里的數(shù)據(jù)要從低屏(16:9，也就是iphone6)適配到高屏，以低屏為基礎(chǔ)，避免適配后元素重疊的問題。
2)背景層
背景根據(jù)屏幕大小進(jìn)行縮放、裁剪和調(diào)整以填充屏幕。所以背景層一般設(shè)計(jì)成比較簡(jiǎn)單的圖片，避免裁剪和縮放時(shí)出現(xiàn)較大的視覺差異。
在選擇標(biāo)簽類別的H5活動(dòng)中，結(jié)果頁面需要顯示用戶選擇的標(biāo)簽，但是用戶選擇的標(biāo)簽數(shù)量是不確定的，這就涉及到結(jié)果頁面長(zhǎng)度的適配。
因此，標(biāo)簽顯示部分的背景顏色需要為純色或雙面連續(xù)圖形，雙面連續(xù)圖形的高度需要與單個(gè)標(biāo)簽的高度一致，以保證每增加一個(gè)標(biāo)簽，就會(huì)增加相應(yīng)高度的雙面連續(xù)背景圖形，背景頁面的高度始終適應(yīng)相應(yīng)數(shù)量標(biāo)簽所需的高度。
為了測(cè)試活動(dòng)的效果，從數(shù)據(jù)平臺(tái)中選取了活動(dòng)各期的訪客數(shù)(PV)和用戶數(shù)(UV)來幫助我們判斷活動(dòng)的裂變效果，并分析其影響因素:曝光數(shù)、頻道質(zhì)量和標(biāo)題內(nèi)容的吸引力。通過不斷優(yōu)化影響因素，在計(jì)劃時(shí)間內(nèi)達(dá)到預(yù)期的活動(dòng)效果。
通過用戶流失的漏斗數(shù)據(jù)分析，可以進(jìn)一步分析流失的原因:頁面操作引導(dǎo)是否清晰、頁面內(nèi)容是否吸引人、頁面可用性，幫助我們優(yōu)化操作引導(dǎo)、內(nèi)容設(shè)計(jì)優(yōu)化、可用性走查。
1)Ui風(fēng)格要更符合主題
主題表達(dá):首先，作為疫情下戳人心的活動(dòng)主題，并沒有直觀的傳達(dá)疫情的氛圍，導(dǎo)致活動(dòng)代入感不足，用戶對(duì)活動(dòng)主題的感知不清晰，更多的只是燈泡男孩IP風(fēng)格的延續(xù)。
風(fēng)格選擇:本次h5設(shè)計(jì)以新誕生的IP形象燈泡為視覺kv主體，而IP形象的初始形態(tài)是線描風(fēng)格，并沒有擴(kuò)展到其他形態(tài)。在這種情況下，選擇孟菲斯風(fēng)格的線描是必然的選擇。
因此，在IP形象有了成熟、更豐富的風(fēng)格形式后，可以更多地嘗試整個(gè)活動(dòng)的風(fēng)格，找到活動(dòng)主題的成都網(wǎng)站建設(shè)視覺表現(xiàn)形式。
2)動(dòng)態(tài)效果需要大的突破。
隨著手機(jī)性能的提升，酷炫新穎的h5動(dòng)態(tài)效果是提升用戶體驗(yàn)，抓住用戶好奇心和眼球的好方法。但這需要大量的開發(fā)資源投入，以及設(shè)計(jì)方的動(dòng)態(tài)效果的設(shè)計(jì)和研究。
天貓和網(wǎng)易成都營(yíng)銷網(wǎng)站建設(shè)，的h5動(dòng)態(tài)特效使用了很多3d視覺效果和3d景深操作，對(duì)H5的創(chuàng)新體驗(yàn)有很大幫助。這個(gè)活動(dòng)中動(dòng)畫研究的空間空還是很大的。
3)運(yùn)營(yíng)文案需要更加醒目。
在這個(gè)信息爆炸的時(shí)代，沒有一個(gè)吸引眼球的標(biāo)題，就注定了它在浩如煙海的信息中沉默。
為此，上線后我們做了大量的用戶調(diào)研，其中頭條基于業(yè)務(wù)推廣定向、實(shí)時(shí)熱點(diǎn)定向等多向嘗試，結(jié)合新聞常用的3段式標(biāo)題結(jié)構(gòu)。并且做了AB測(cè)試和用戶調(diào)查。其中實(shí)時(shí)熱點(diǎn)反饋是頭條 成都建站公司 好的，面向商業(yè)的反饋對(duì)C端用戶沒有吸引力。
所以在B端產(chǎn)品的后續(xù)設(shè)計(jì)中，在沒有特殊要求的情況下，盡量根據(jù)用戶關(guān)心的熱點(diǎn)和好奇點(diǎn)來設(shè)計(jì)標(biāo)題和內(nèi)容。
活動(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)格最容易出視覺效果，但這都需要貼合主題，幫助渲染活動(dòng)主題氛圍。H5活動(dòng)在保證用戶體驗(yàn)的基礎(chǔ)上，能加入好玩有趣的交互動(dòng)效是一個(gè)加分項(xiàng)。由于市場(chǎng)上手機(jī)的尺寸大小不一，必須考慮好適配問題。上線后的數(shù)據(jù)復(fù)盤總結(jié)能夠幫助我們發(fā)現(xiàn)問題，使下一次活動(dòng)做得更好，且一個(gè)有吸引力標(biāo)題能讓你成功一半。
作者:WOWdesign，研究設(shè)計(jì)價(jià)值成都做網(wǎng)站化，涉及用戶體驗(yàn)、品牌體驗(yàn)和空體驗(yàn)。
本文由@agoodesign原創(chuàng)發(fā)布。每個(gè)人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止復(fù)制。
來自Unsplash的圖像，基于CC0協(xié)議。
重慶分公司
重慶分公司
