文章目錄[隱藏]

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

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

大綱:

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

一.活動概述:概述

H5為什么要活動？

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

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

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

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

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

1)測試類別

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

2)新聞熱點

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

3)互動游戲

具有很強的互動性，特點多是趣味性，簡單易用，有愉悅感和成就感。

4)公益類

以社會熱點問題為主題，如環(huán)境保護、瀕危動物保護、關(guān)愛老人等。，從社會焦點問題出發(fā)，表現(xiàn)了社會責(zé)任感，給人以深刻的教育警醒。

5)軟文故事。

以獨立的經(jīng)歷和故事為導(dǎo)向，多為大家熟知的生活、工作、感情的軼事，在側(cè)面達到某種營銷目的。

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

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

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

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

綜合分析結(jié)論

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

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

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

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

設(shè)計:

四?；釉O(shè)計:動態(tài)效果

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

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

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

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

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

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

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

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

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

1)主體層和元素層

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

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

2)背景層

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

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

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

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

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

為了測試活動的效果，從數(shù)據(jù)平臺中選取了活動各期的訪客數(shù)(PV)和用戶數(shù)(UV)來幫助我們判斷活動的裂變效果，并分析其影響因素:曝光數(shù)、頻道質(zhì)量和標(biāo)題內(nèi)容的吸引力。通過不斷優(yōu)化影響因素，在計劃時間內(nèi)達到預(yù)期的活動效果。

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

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

這個H5活動可以推廣。

1)Ui風(fēng)格要更符合主題

主題表達:首先，作為疫情下戳人心的活動主題，并沒有直觀的傳達疫情的氛圍，導(dǎo)致活動代入感不足，用戶對活動主題的感知不清晰，更多的只是燈泡男孩IP風(fēng)格的延續(xù)。

風(fēng)格選擇:本次h5設(shè)計以新誕生的IP形象燈泡為視覺kv主體，而IP形象的初始形態(tài)是線描風(fēng)格，并沒有擴展到其他形態(tài)。在這種情況下，選擇孟菲斯風(fēng)格的線描是必然的選擇。

因此，在IP形象有了成熟、更豐富的風(fēng)格形式后，可以更多地嘗試整個活動的風(fēng)格，找到活動主題的最佳視覺表現(xiàn)形式。

2)動態(tài)效果需要大的突破。

隨著手機性能的提升，酷炫新穎的h5動態(tài)效果是提升用戶體驗，抓住用戶好奇心和眼球的好方法。但這需要大量的開發(fā)資源投入，以及設(shè)計方的動態(tài)效果的設(shè)計和研究。

天貓和網(wǎng)易最近的h5動態(tài)特效使用了很多3d視覺效果和3d景深操作，對H5的創(chuàng)新體驗有很大幫助。這個活動中動畫研究的空間空還是很大的。

3)運營文案需要更加醒目。

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

為此，上線后我們做了大量的用戶調(diào)研，其中頭條基于業(yè)務(wù)推廣定向、實時熱點定向等多向嘗試，結(jié)合新聞常用的3段式標(biāo)題結(jié)構(gòu)。并且做了AB測試和用戶調(diào)查。其中實時熱點反饋是頭條最好的，面向商業(yè)的反饋對C端用戶沒有吸引力。

所以在B端產(chǎn)品的后續(xù)設(shè)計中，在沒有特殊要求的情況下，盡量根據(jù)用戶關(guān)心的熱點和好奇點來設(shè)計標(biāo)題和內(nèi)容。

摘要

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

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

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

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

目前上述的內(nèi)容應(yīng)該能夠為大家解答出大家對于h5如何制作(h5頁面設(shè)計案例)的疑惑了，所以如果大家還想要了解更多的知識內(nèi)容，也可以關(guān)注本站其他文章進行了解哦。

---

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

---

標(biāo)簽：