1. 首頁 > 生活百科 > >

通過這個踩過無數多坑的H5案例的思路分享 h5案例有哪些？

小知識h5案例

朋友們， 是否還記得朋友圈不斷刷屏的網易H5活動？作為一位互聯網設計師， 不爭氣的眼淚從嘴角流了出來， 饞呀、羨慕呀！同樣九年義務教育， 為啥人家的活動效果那么好？別人一做就爆， 而自己一做就廢 。 一款優秀的H5它包含哪些要素呢？下面通過這個踩過無數多坑的H5案例的思路分享， 希望能給大家帶來啟發， 避免再次踩坑 。
大綱：
  1. 活動概述
  2. 主題構思
  3. 視覺風格設計
  4. 交互動效設計
  5. 關于適配
  6. 數據復盤總結
一、活動概述：OVERVIEW為什么做H5活動？
本活動由平安銀行對公業務中臺聯合Planet B舉辦， 以IT對公派駐全新設計的IP形象燈泡仔及家族成員為載體 。
活動旨在推廣對公業務中臺產品， 由wowdesign團隊設計的IT對公派駐IP-燈泡仔及其家族品牌形象結合燈泡仔快閃打卡活動， 線上線下聯合運營推廣對公業務中臺 。
二、主題構思：H5 THEME1. H5類型選擇什么樣的活動主題能勾起用戶的注意力？什么樣的內容能引起用戶的共鳴？
能讓其自愿轉發， 愿意用這個虛擬的活動向朋友來展現表達自我人設 。 所以活動的方向選擇尤為重要 。 我們對市場已有的H5活動做了歸類， 分析他們對應抓住了用戶哪些痛點， 從中獲取方向 。
1）測試類
契合了用戶低成本有趣了解自我的需求 。
2）新聞熱點類
以熱點話題、事件為素材， 特點是時效性高， 講究與用戶的距離， 參與感、真實感 。
3）互動游戲類
以互動性較強， 特點多為有趣、簡單易上手， 愉悅感、成就感 。
4）公益類
以社會熱點問題為題材， 如環保、保護瀕危動物、關愛老人等， 社會焦點問題出發， 彰顯社會責任感， 給人深刻的教育警醒作用 。
5）軟文故事類
以獨立的經歷、故事為引導， 多為熟為人知的生活、工作、感情的糗事， 側面達到某種營銷目的 。
2. 哪些因素影響用戶參與并轉發用戶的參與度與轉發裂變數據， 是衡量一個活動的成功與否 。 那么從用戶心理學角度分析， 影響因素有以下幾點：自戀炫耀心理、共鳴心理、好的視覺效果 。

通過這個踩過無數多坑的H5案例的思路分享 h5案例有哪些？

文章插圖
3. 當下熱點及用戶心理狀態疫情之下， 大家的心理和經濟都受到不小影響， 焦慮失望情緒高漲， 希望得以表達情緒 。
4. 綜合分析結論
  • 結合疫情下用戶心理狀態， 疫情對他們生活、工作、經濟的影響 。
  • 通過刷屏因素中的”共鳴“， 再結合熟悉的網絡流行語作為標簽關鍵詞， 精準的貼合了用戶表達自我、分享自我現狀的訴求 。
  • 選用測試類玩法， 讓用戶去測試pick自己的2020生活狀態， 了解自我， 分享現狀 。
所以希望用戶通過關鍵詞選擇， 測試生成2020生活狀態報告， 由此擊中了用戶內心， 引起共鳴， 使其能參與轉發此活動 。 并選定主題《pick你的2020戳心話》
三、UI風格設計：H5 STYLE通過網易等平臺過往H5案例分析， 設計風格多為孟菲斯風格、蒸汽波故障風、插畫風等較為年輕活潑富有表現力的風格 。 結合我們IP形象的線描風格和主題， 最終敲定了孟菲斯風格設計風格 。
該風格能表現各種富于個性化的文化內涵， 從天真滑稽到怪誕、離奇等不同情趣 。 在色彩上運用一些明快、風趣、飽和度高的明亮色調， 給用戶極強的感官刺激和豐富的情感， 貼合本次活動戳心話的各種話語場景 。
設計展示：
四、交互動效設計：DYNAMIC EFFECT對于H5而言， 簡單不需思考的交互操作是基本的要求， 炫酷好玩的交互動效是必不可少的加分項， 我們把交互動效拆解為三個方面：
1. 操作指引動效首頁的h5主題交代清楚之后， 首要的就是引導用戶去下一步的標簽選擇頁面， 所以按鈕一定要在最舒適的點擊位置， 且有最強的操作提示， 所以按鈕呼吸縮放動畫提示是一個不錯的選擇 。
2. 交互轉場動效界面轉場元素的連貫性和界面元素的進出場動畫， 能讓界面更加流暢連貫， 操作體驗感更佳 。
3. 標簽選擇頁標簽翻動動效標簽選擇頁面是整個產品最核心的交互部分， 在滿足易用性的基本操作交互要求上， 還需要增加一定的操作趣味性， 給用戶帶來驚喜的交互動效， 比如標簽3d景深旋轉翻動操作方式， 點擊選擇趣味動態反饋 。
五、關于適配：ADAPTATION1. 屏幕適配為適配16:9及更長的全面屏手機， 須把頁面拆解為主體層、元素層、背景層 。

推薦閱讀