朋友們，是否還記得朋友圈不斷刷屏的網易H5活動，作為一位網際網路設計師，不爭氣的眼淚從嘴角流了出來，饞呀、羨慕呀!同樣九年義務教育，為啥人家的活動效果那麼好?總是一做就爆，而自己一做就廢。
那麼一款優秀的H5它包含哪些要素呢?好用的、好玩的、觸動人心的?下面通過這個踩過無數多坑的H5案例的思路分享，希望能給大家帶來啟發，避免再次踩坑。
大綱：
1. 為什麼做H5活動
本活動由平安銀行對公業務中臺聯合Planet B舉辦，以IT對公派駐全新設計的IP形象燈泡仔及家族成員為載體。活動旨在推廣對公業務中臺產品，由wowdesign團隊設計的IT對公派駐IP-燈泡仔及其家族品牌形象結合燈泡仔快閃打卡活動，線上線下聯合運營推廣對公業務中臺。
1. H5類型選擇
什麼樣的活動主題能勾起用戶的注意力?什麼樣的內容能引起用戶的共鳴?能讓其自願轉發，願意用這個虛擬的活動向朋友來展現表達自我人設。所以活動的方向選擇尤為重要。我們對市場已有的H5活動做了歸類，分析他們對應抓住了用戶哪些痛點，從中獲取方向。
2. 哪些因素影響用戶參與並轉發
用戶的參與度與轉發裂變數據，是衡量一個活動的成功與否。那麼從用戶心理學角度分析，影響因素有以下幾點：自戀炫耀心理、共鳴心理、好的視覺效果。
3. 當下熱點及用戶心理狀態
疫情之下，大家的心理和經濟都受到不小影響，焦慮失望情緒高漲，希望得以表達情緒。
4. 綜合分析結論
所以希望用戶通過關鍵詞選擇，測試生成2020生活狀態報告，由此擊中了用戶內心，引起共鳴，使其能參與轉發此活動。並選定主題《pick你的2020戳心話》
通過網易等平臺過往H5案例分析，設計風格多為孟菲斯風格、蒸汽波故障風、插畫風等較為年輕活潑富有表現力的風格。結合我們IP形象的線描風格和主題，最終敲定了孟菲斯風格設計風格。該風格能表現各種富於個性化的文化內涵，從天真滑稽到怪誕、離奇等不同情趣。在色彩上運用一些明快、風趣、飽和度高的明亮色調，給用戶極強的感官刺激和豐富的情感，貼合本次活動戳心話的各種話語場景。
對於H5而言，簡單不需思考的交互操作是基本的要求，炫酷好玩的交互動效是必不可少的加分項，我們把交互動效拆解為三個方面：
1. 操作指引動效：
首頁的h5主題交代清楚之後，首要的就是引導用戶去下一步的標籤選擇頁面，所以按鈕一定要在最舒適的點擊位置，且有最強的操作提示，所以按鈕呼吸縮放動畫提示是一個不錯的選擇。
2. 交互轉場動效：
界面轉場元素的連貫性和界面元素的進出場動畫，能讓界面更加流暢連貫，操作體驗感更佳。
3. 標籤選擇頁標籤翻動動效：
標籤選擇頁面是整個產品最核心的交互部分，在滿足易用性的基本操作交互要求上，還需要增加一定的操作趣味性，給用戶帶來驚喜的交互動效，比如標籤3d景深旋轉翻動操作方式，點擊選擇趣味動態反饋。
1. 屏幕適配
為適配16:9及更長的全面屏手機，須把頁面拆解為主體層、元素層、背景層。
主體層、元素層
需要把各元素定位好對應的位置關係，如主體層通過切圖調整於畫面居中位置，再確定好元素層距離頂部、底部的距離。注意這裡的數據需從矮屏(16:9，也就是iphone6)向高屏幕適配，以矮屏幕為基礎，這樣就能避免適配之後出現元素重疊的問題。
背景層
背景圖根據屏幕尺寸做縮放、裁剪適配填充滿屏幕。所以背景層一般設計成相對簡單的畫面，以免在裁剪縮放時出現較大的視覺差異。
2. 結果頁擴展性適配
在選擇標籤類別的H5活動中，結果頁面需展示用戶選擇的標籤，但用戶選擇的標籤數是不確定的，這樣就涉及到結果頁的長短適配問題。所以在標籤展示部分的底色需要是純色或二方連續圖，且二方連續圖的高度需和單行標籤的高度一致，保證每增加一行標籤，增加對應高度的二方連續背景圖，保證背景頁面高度總是適配於對應標籤數量所需的高度。
1. 瀏覽數(PV)、用戶數(UV)
為檢測活動效果，在活動的各時期通過數據平臺拉取了瀏覽數(PV)、用戶數(UV)幫助我們判斷活動的傳播裂變效果，並分析其影響因子：曝光數、渠道質量、標題內容吸引力，通過不斷優化影響因素，以保證在計劃的時間內達到預期的活動效果。
2. 漏鬥數據
通過漏鬥數據分析用戶流失情況，可進一步分析流失原因：頁面操作引導是否明確、頁面內容是否有吸引力、頁面可用性，幫助我們優化操作指引、內容設計優化與可用性走查。
3. 本次H5活動可以提升點
Ui風格應更貼合主題
主題表達上：首先作為疫情下戳心事的活動主題，並沒有很好的在視覺上傳達戳心和疫情的氛圍，導致活動的代入感不夠，用戶對活動的主題感知不夠明確，更多的只是燈泡仔IP風格的延續。
風格選擇上：本次h5設計是基於剛剛誕生的IP形象燈泡仔為視覺kv主體，而IP形象的初創的表現形式為線描風格，還未擴展其他表現形式，在此情況下選用線描的孟菲斯風格是必然的選擇。所以在IP形象有成熟的更豐富的風格形式後，整個活動的風格也能有更多嘗試可能，找到該活動主題最佳的視覺表現形式。
動效需要有大的突破
隨著手機性能的提升，炫酷新穎的h5動效是提升用戶體驗，抓住用戶獵奇心理和眼球的不錯方式。但這需要大量開發資源的投入，和設計側對動效的設計和研究。天貓和網易近期的H5動效運用了大量的3d視覺效果和3d景深操作，這對h5的創新體驗有著極大的幫助。本次活動在動畫方面還有很大的可發揮研究的空間。
運營文案需更抓眼球
在這個信息爆炸的時代，沒有一個抓眼球的標題，那麼註定會沉默在海量的信息中。為此上線後我們做了大量的用戶調研，其中標題根據業務推廣導向、實時熱點導向等多方向嘗試，結合新聞常用的3段式標題結構。並做了AB測試及用戶調研。其中標題用實時熱點方向反饋最好，以業務導向的方向對c端用戶毫無吸引力。所以後續的在做b端產品出圈設計時，在無特殊要求下，儘量往用戶關心的熱點、好奇點為導向去設計標題和內容。
總結
【責任編輯：
未麗燕TEL：（010）68476606】