文章目錄[隱藏]

一.活動(dòng)概述:概述二。主題構(gòu)思:H5主題H5選型影響用戶參與和轉(zhuǎn)發(fā)的因素有哪些？當(dāng)前熱點(diǎn)和用戶心理狀態(tài)綜合分析結(jié)論三。UI風(fēng)格設(shè)計(jì):H5風(fēng)格四。互動(dòng)設(shè)計(jì):動(dòng)態(tài)效果操作指南動(dòng)態(tài)效果互動(dòng)過渡動(dòng)態(tài)效果標(biāo)簽選擇頁面上標(biāo)簽翻轉(zhuǎn)的動(dòng)態(tài)效果動(dòng)詞 （verb的縮寫）適應(yīng):適應(yīng)屏幕改編結(jié)果頁面可擴(kuò)展性調(diào)整六。恢復(fù)摘要:數(shù)據(jù)摘要瀏覽量(PV)，用戶數(shù)(UV)漏斗數(shù)據(jù)這個(gè)H5活動(dòng)可以推廣。摘要

導(dǎo)語:親愛的朋友們，你們還記得在朋友圈不停刷屏的網(wǎng)易H5活動(dòng)嗎？作為一個(gè)互聯(lián)網(wǎng)設(shè)計(jì)師，失望的眼淚從嘴角流了出來，又饞又羨慕！同樣是九年義務(wù)教育，為什么人的活動(dòng)效果那么好？別人做了就爆，自己做了就沒用了。一個(gè)優(yōu)秀的H5包含哪些元素？通過分享以下踩過無數(shù)坑的H5案例的思路，希望能啟發(fā)大家，避免再次踩坑。

大綱:

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

一.活動(dòng)概述:概述

H5為什么要活動(dòng)？

本次活動(dòng)由平安銀行公司業(yè)務(wù)中心和星球B聯(lián)合舉辦，以全新設(shè)計(jì)的IP形象燈泡和家庭成員為載體。

該活動(dòng)旨在公司業(yè)務(wù)中推廣產(chǎn)品。wowdesign團(tuán)隊(duì)設(shè)計(jì)的IT認(rèn)證IP- light bulb及其家族品牌形象，結(jié)合燈泡的快閃打卡活動(dòng)，線上線下聯(lián)合運(yùn)作，促進(jìn)了企業(yè)在臺(tái)灣的業(yè)務(wù)。

二。主題構(gòu)思:H5主題H5選型

什么樣的活動(dòng)主題才能引起用戶的關(guān)注？什么樣的內(nèi)容才能引起用戶的共鳴？

讓它自愿轉(zhuǎn)發(fā)，也愿意用這個(gè)虛擬的活動(dòng)向朋友們展示如何表達(dá)自己。因此，活動(dòng)方向的選擇尤為重要。我們對(duì)市場上現(xiàn)有的H5活動(dòng)進(jìn)行分類，分析它們抓住了用戶的哪些痛點(diǎn)，并從中得到方向。

1)測試類別

滿足了用戶低成本、有趣的自我理解需求。

2)新聞熱點(diǎn)

以熱點(diǎn)話題和事件為素材，特點(diǎn)是時(shí)效性高、注重與用戶的距離、參與感和真實(shí)感。

3)互動(dòng)游戲

具有很強(qiáng)的互動(dòng)性，特點(diǎ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á)到某種營銷目的。

影響用戶參與和轉(zhuǎn)發(fā)的因素有哪些？

用戶的參與度和轉(zhuǎn)發(fā)裂變數(shù)據(jù)是一個(gè)活動(dòng)成功與否的衡量標(biāo)準(zhǔn)。那么從用戶心理的角度來看，影響因素有:自戀、炫耀、共鳴、視覺效果好。

當(dāng)前熱點(diǎn)和用戶心理狀態(tài)

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

綜合分析結(jié)論

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

所以希望用戶通過關(guān)鍵詞選擇和測試，生成2020生活狀態(tài)報(bào)告，擊中用戶的內(nèi)心，產(chǎn)生共鳴，從而參與轉(zhuǎn)發(fā)這個(gè)活動(dòng)。并選擇主題“挑你2020戳心談”

三。UI風(fēng)格設(shè)計(jì):H5風(fēng)格

通過網(wǎng)易等平臺(tái)過往的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)格可以表達(dá)各種個(gè)性化的文化內(nèi)涵，從天真滑稽到怪誕離奇。色彩上運(yùn)用了一些明亮、搞笑、高飽和度的色彩，給用戶強(qiáng)烈的感官刺激和豐富的情感，契合了本次活動(dòng)的各種話語場景。

設(shè)計(jì):

四?；?dòng)設(shè)計(jì):動(dòng)態(tài)效果

對(duì)于H5來說，簡單的無思考交互是基本要求，酷炫好玩的交互是必不可少的加分項(xiàng)。我們將交互分為三個(gè)方面:

操作指南動(dòng)態(tài)效果

主頁的h5主題講解清楚之后，第一件事就是引導(dǎo)用戶進(jìn)入下一個(gè)選項(xiàng)卡選擇頁面，所以按鈕一定要在最舒適的點(diǎn)擊位置，有最強(qiáng)的操作提示，所以按鈕呼吸縮放動(dòng)畫提示是個(gè)不錯(cuò)的選擇。

互動(dòng)過渡動(dòng)態(tài)效果

界面過渡元素的連續(xù)性和界面元素的動(dòng)畫化可以使界面更加流暢連貫，操作體驗(yàn)更好。

標(biāo)簽選擇頁面上標(biāo)簽翻轉(zhuǎn)的動(dòng)態(tài)效果

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

動(dòng)詞 （verb的縮寫）適應(yīng):適應(yīng)屏幕改編

為了適應(yīng)16:9和更長的全面屏手機(jī)，頁面必須拆解成主層、元素層和背景層。

1)主體層和元素層

需要定位各個(gè)元素的對(duì)應(yīng)位置關(guān)系，比如通過裁剪圖片將主層調(diào)整到圖片的中心，然后確定元素層與上下的距離。

注意這里的數(shù)據(jù)要從低屏(16:9，也就是iphone6)適配到高屏，以低屏為基礎(chǔ)，避免適配后元素重疊的問題。

2)背景層

背景根據(jù)屏幕大小進(jìn)行縮放、裁剪和調(diào)整以填充屏幕。所以背景層一般設(shè)計(jì)成比較簡單的圖片，避免裁剪和縮放時(shí)出現(xiàn)較大的視覺差異。

結(jié)果頁面可擴(kuò)展性調(diào)整

在選擇標(biāo)簽類別的H5活動(dòng)中，結(jié)果頁面需要顯示用戶選擇的標(biāo)簽，但是用戶選擇的標(biāo)簽數(shù)量是不確定的，這就涉及到結(jié)果頁面長度的適配。

因此，標(biāo)簽顯示部分的背景顏色需要為純色或雙面連續(xù)圖形，雙面連續(xù)圖形的高度需要與單個(gè)標(biāo)簽的高度一致，以保證每增加一個(gè)標(biāo)簽，就會(huì)增加相應(yīng)高度的雙面連續(xù)背景圖形，背景頁面的高度始終適應(yīng)相應(yīng)數(shù)量標(biāo)簽所需的高度。

六?；謴?fù)摘要:數(shù)據(jù)摘要瀏覽量(PV)，用戶數(shù)(UV)

為了測試活動(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ù)

通過用戶流失的漏斗數(shù)據(jù)分析，可以進(jìn)一步分析流失的原因:頁面操作引導(dǎo)是否清晰、頁面內(nèi)容是否吸引人、頁面可用性，幫助我們優(yōu)化操作引導(dǎo)、內(nèi)容設(shè)計(jì)優(yōu)化、可用性走查。

這個(gè)H5活動(dòng)可以推廣。

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)主題的最佳視覺表現(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)易最近的h5動(dòng)態(tài)特效使用了很多3d視覺效果和3d景深操作，對(duì)H5的創(chuàng)新體驗(yàn)有很大幫助。這個(gè)活動(dòng)中動(dòng)畫研究的空間空還是很大的。

3)運(yùn)營文案需要更加醒目。

在這個(gè)信息爆炸的時(shí)代，沒有一個(gè)吸引眼球的標(biāo)題，就注定了它在浩如煙海的信息中沉默。

為此，上線后我們做了大量的用戶調(diào)研，其中頭條基于業(yè)務(wù)推廣定向、實(shí)時(shí)熱點(diǎn)定向等多向嘗試，結(jié)合新聞常用的3段式標(biāo)題結(jié)構(gòu)。并且做了AB測試和用戶調(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)。由于市場上手機(jī)的尺寸大小不一，必須考慮好適配問題。上線后的數(shù)據(jù)復(fù)盤總結(jié)能夠幫助我們發(fā)現(xiàn)問題，使下一次活動(dòng)做得更好，且一個(gè)有吸引力標(biāo)題能讓你成功一半。

作者:WOWdesign，研究設(shè)計(jì)價(jià)值最大化，涉及用戶體驗(yàn)、品牌體驗(yàn)和空體驗(yàn)。

本文由@agoodesign原創(chuàng)發(fā)布。每個(gè)人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止復(fù)制。

來自Unsplash的圖像，基于CC0協(xié)議。

目前上述的內(nèi)容應(yīng)該能夠?yàn)榇蠹医獯鸪龃蠹覍?duì)于h5如何制作(h5頁面設(shè)計(jì)案例)的疑惑了，所以如果大家還想要了解更多的知識(shí)內(nèi)容，也可以關(guān)注本站其他文章進(jìn)行了解哦。

---

版權(quán)說明：本文由用戶上傳，如有侵權(quán)請聯(lián)系刪除！

---

標(biāo)簽：