1. 首頁 > 生活百科 > >

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

小知識h5案例


1）主體層、元素層
需要把各元素定位好對應的位置關系， 如主體層通過切圖調整于畫面居中位置， 再確定好元素層距離頂部、底部的距離 。
注意這里的數據需從矮屏（16:9， 也就是iphone6）向高屏幕適配， 以矮屏幕為基礎， 這樣就能避免適配之后出現元素重疊的問題 。
2）背景層
背景圖根據屏幕尺寸做縮放、裁剪適配填充滿屏幕 。 所以背景層一般設計成相對簡單的畫面， 以免在裁剪縮放時出現較大的視覺差異 。
2. 結果頁擴展性適配【通過這個踩過無數多坑的H5案例的思路分享 h5案例有哪些？】在選擇標簽類別的H5活動中， 結果頁面需展示用戶選擇的標簽， 但用戶選擇的標簽數是不確定的， 這樣就涉及到結果頁的長短適配問題 。
所以在標簽展示部分的底色需要是純色或二方連續圖， 且二方連續圖的高度需和單行標簽的高度一致， 保證每增加一行標簽， 增加對應高度的二方連續背景圖， 保證背景頁面高度總是適配于對應標簽數量所需的高度 。

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

文章插圖
六、復盤總結：DATA SUMMARY1. 瀏覽數（PV）、用戶數（UV）為檢測活動效果， 在活動的各時期通過數據平臺拉取了瀏覽數（PV）、用戶數（UV）幫助我們判斷活動的傳播裂變效果， 并分析其影響因子：曝光數、渠道質量、標題內容吸引力， 通過不斷優化影響因素， 以保證在計劃的時間內達到預期的活動效果 。
2. 漏斗數據通過漏斗數據分析用戶流失情況， 可進一步分析流失原因：頁面操作引導是否明確、頁面內容是否有吸引力、頁面可用性， 幫助我們優化操作指引、內容設計優化與可用性走查 。
3. 本次H5活動可以提升點1）Ui風格應更貼合主題
主題表達上：首先作為疫情下戳心事的活動主題， 并沒有很好的在視覺上傳達戳心和疫情的氛圍， 導致活動的代入感不夠， 用戶對活動的主題感知不夠明確， 更多的只是燈泡仔IP風格的延續 。
風格選擇上：本次h5設計是基于剛剛誕生的IP形象燈泡仔為視覺kv主體， 而IP形象的初創的表現形式為線描風格， 還未擴展其他表現形式， 在此情況下選用線描的孟菲斯風格是必然的選擇 。
所以在IP形象有成熟的更豐富的風格形式后， 整個活動的風格也能有更多嘗試可能， 找到該活動主題最佳的視覺表現形式 。
2）動效需要有大的突破
隨著手機性能的提升， 炫酷新穎的h5動效是提升用戶體驗， 抓住用戶獵奇心理和眼球的不錯方式 。 但這需要大量開發資源的投入， 和設計側對動效的設計和研究 。
天貓和網易近期的H5動效運用了大量的3d視覺效果和3d景深操作， 這對h5的創新體驗有著極大的幫助 。 本次活動在動畫方面還有很大的可發揮研究的空間 。
3）運營文案需更抓眼球
在這個信息爆炸的時代， 沒有一個抓眼球的標題， 那么注定會沉默在海量的信息中 。
為此上線后我們做了大量的用戶調研， 其中標題根據業務推廣導向、實時熱點導向等多方向嘗試， 結合新聞常用的3斷式標題結構 。 并做了AB測試及用戶調研 。 其中標題用實時熱點方向反饋最好， 以業務導向的方向對c端用戶毫無吸引力 。
所以后續的在做b端產品出圈設計時， 在無特殊要求下， 盡量往用戶關心的熱點、好奇點為導向去設計標題和內容 。
4. 總結
  • 活動設計之前要理清楚設計背景， 確定好相對應的設計主題和方向， 什么樣的活動主題能吸引用戶參與進 。
  • 孟菲斯風格、蒸汽波故障風、插畫風是H5不錯的選擇， 孟菲斯風格最容易出視覺效果， 但這都需要貼合主題， 幫助渲染活動主題氛圍 。
  • H5活動在保證用戶體驗的基礎上， 能加入好玩有趣的交互動效是一個加分項 。
  • 由于市場上手機的尺寸大小不一， 必須考慮好適配問題 。
  • 上線后的數據復盤總結能夠幫助我們發現問題， 使下一次活動做得更好， 且一個有吸引力標題能讓你成功一半 。

推薦閱讀