文章目錄[隱藏]

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

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

大綱:

活動概述主題構思視覺風格設計交互動效設計關于適配數(shù)據(jù)復盤總結

一.活動概述:概述

H5為什么要活動？

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

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

二。主題構思:H5主題H5選型

什么樣的活動主題才能引起用戶的關注？什么樣的內容才能引起用戶的共鳴？

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

1)測試類別

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

2)新聞熱點

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

3)互動游戲

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

4)公益類

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

5)軟文故事。

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

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

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

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

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

綜合分析結論

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

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

三。UI風格設計:H5風格

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

這種風格可以表達各種個性化的文化內涵，從天真滑稽到怪誕離奇。色彩上運用了一些明亮、搞笑、高飽和度的色彩，給用戶強烈的感官刺激和豐富的情感，契合了本次活動的各種話語場景。

設計:

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

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

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

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

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

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

標簽選擇頁面上標簽翻轉的動態(tài)效果

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

動詞 （verb的縮寫）適應:適應屏幕改編

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

1)主體層和元素層

需要定位各個元素的對應位置關系，比如通過裁剪圖片將主層調整到圖片的中心，然后確定元素層與上下的距離。

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

2)背景層

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

結果頁面可擴展性調整

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

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

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

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

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

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

這個H5活動可以推廣。

1)Ui風格要更符合主題

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

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

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

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

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

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

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

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

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

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

摘要

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

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

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

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

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

---

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

---

標簽：