房地產公司高逼格的移動端營銷H5頁面速成指南培訓課件.pptx
下載文檔
上傳人:偷****
編號:423719
2022-06-29
40頁
28.79MB
該文檔所屬資源包:
碧桂園房地產公司營銷策略培訓課件
1、高逼格的移動端H5頁面速成指南 營銷中心市場管理部傳訊組移動時代的新開發標準,如HTML5,將在移動設備上獲勝喬布斯蘋果系統將不支持Flash這類由圖片、文字、背景、交互效果、音樂等組成,不需要插件,用戶滑動手指查看內容的形式,因其技術得名“H5”做廣告、活動、游戲、產品等適合手機傳播的都離不開H5技術從2014年開始,H5因交互形式便捷、用戶體驗良好而火了起來,借由微信平臺迅速占據朋友圈HTML5H5能怎么玩?從功能與設計目標來看, H5專題頁主要有以下5大類型:1.1.活動運營型活動運營型2.2.品牌宣傳型品牌宣傳型3.3.產品介紹型產品介紹型4.4.總結報告型總結報告型5.5.功能服務型2、功能服務型問答問答/ /評分評分/ /測試測試幻燈片式玩法幻燈片式玩法翻頁關鍵詞:每頁左右或上下切換,動態展示重要信息類似幻燈片的傳播效果結合霧霾話題展示我司海南項目優勢微樓書線上發布會關鍵詞:模擬現實場景背景音樂配合類似線上業績報告、產品發布會等可參考京東的十大任性10張橫屏頁展示京東2014年十大成就采用簡潔的扁平風插畫,加入紙面質感形成復古卡片拼貼感不同頁面間通過手指滑動實現流暢的視差滾動效果,最后還有劉總這個小彩蛋精美的圖片設計+簡單的翻頁效果圖片展示&圖層交互考驗的是高質量的內容本身和講故事的能力數據報告、頻繁上線的新產品或功能、小型線下活動邀請、活動相冊。結合熱點的營銷,周期極短,3、傳播快速。H5游戲有獎游戲游戲積分/抽獎/好友助力/搶紅包等形式在獎品、游戲內容、畫面等融入宣傳信息母親節定制歌曲送給媽媽(類似定制卡片/祝福語/等)用對媽媽情感,根據母親特性,專屬定制歌曲形式融入用戶參與感,專屬定制突顯個人尊貴感,黑膠唱片懷舊感設計,音符動態等,1天吸引2萬人參與定制宜家:衣柜大作戰3s內在衣柜找到指定物品。現實生活場景作背景,用戶感到親切,收納互動具趣味性。優衣庫:星店長店長招聘植入優衣庫管理品牌信息。用戶可線上代入店長角色,進行店鋪管理游戲簡單、有趣、易分享簡單、有趣、易分享手指在畫板上滑動,繪出作品, “上傳喵星人”提交圖片。隨后,會跳轉到一個網頁,可以看到用戶們畫的4、各種喵星人,并按照點贊的次數列出了“喵神榜”。十萬貓星人計劃交互式動畫考慮具體的應用場景和傳播對象,從用戶角度出發去思考什么樣的頁面是用戶最想看的最會去分享的New BalanceNew Balance:誰在街頭懷疑一切?誰在街頭懷疑一切?潮流X染色體裂變、視覺沖擊新街頭主義新街頭主義 歷代鞋款聯展歷代鞋款聯展New BalanceNew Balance:青春是什么顏色:青春是什么顏色?結合574系列鞋推出,用戶可體驗顏色大海流動感以及點擊參與填滿青春顏色畫面顏色鮮明,水流感及劃破畫面滲水的迫真感吸引用戶整個H5頁面用創意的打字機形式,隨著用戶按下按鈕,紙片會逐漸顯示出韓寒從1999年起,為人5、熟知或不知的成長軌跡。一加手機:一加手機:“1 1步步1 1步看清韓寒步看清韓寒”打字的互動、聲音效果會讓用戶忍不住繼續按下去怎么做?有想法UI設計師前端設計師推廣如何呈現頁面設計動效技術線上線下推廣想法 在我們設計一個H5頁面時,很重要的一點就是站在自己的角度跳出來去看你做的東西,你和你周圍的人愿意分享這個東西嗎?它有趣嗎?它對其他人也是有用的信息嗎?創意才是硬道理你的H5 , 五秒就死了1.1.找參考,尋靈感,巧借鑒找參考,尋靈感,巧借鑒來電形式新穎,屏幕破損持續吸引客戶關注,電力測試帶動互動參與,融合創新,關注,互動三重元素,目前為止,并可能是520當天最強互動! 大眾點評推廣復仇者聯盟6、:未知來電敢接嗎520來電,加入用戶親自爆屏及雙人測試來電指數2.2.緊跟熱點,利用話題效應緊跟熱點,利用話題效應天天P圖全民COS武媚娘抓住武則天熱播的契機推出了風靡海內外的媚娘妝,全民COS武媚娘的H5,一鍵上傳照片就能立刻完成媚娘妝,與萬千媚娘們進行PK,娛樂了大眾又推廣了產品。網易娛樂神還原武媚娘被剪胸真相3.3.講個好故事,引發情感共鳴講個好故事,引發情感共鳴騰訊:你,錯過了多少次暴富機會騰訊:你,錯過了多少次暴富機會錯過了個體戶迅猛發展的年代,錯過了互聯網新興的年代,錯過了房地產暴富的年代類似韓寒用打印機形式,騰訊采用碎紙機交互形式,呈現錯過,用復古封信、錢票等展現不同年代。4.47、. 流暢的互動體驗流暢的互動體驗“液體主義”杜蕾斯與竇唯以及全球十二位青年藝術家合作的意識流畫展結合線下活動,線上運用H5美術館形式,用戶指尖游走,設置尋找其他主題館鑰匙等互動形式,線條流動,視覺炫酷。前期跟前端設計師(IT技術)進行溝通,討論頁面中元素的動效呈現。例如一些元素的位移,繪圖,旋轉,翻轉,縮放,逐楨,拭擦、淡入淡出,粒子效果,照片處理、3D展示效果、吹氣、錄音、指紋識別等。 設計與交互動效 植樹節:微信種樹拭擦效果包裝為撥開霧霾搖一搖重力感應讓樹苗長高可口可樂可口可樂 語音祝福瓶語音祝福瓶語音錄制功能百度iBreath智呼吸手機放平對準音響出吹氣可以測出健康值利用手機重力感應,吹8、氣產生的聲效而包裝為智能測試點擊效果,用指紋設計在設計上花心思 增強用戶參與感音樂播放,用黑膠唱片設計頁面設計:用640X1136進行設計,參考線會標在960高的地方,主要元素最好不要過高以適配各種機型。其他安卓機器前端切圖時可以適當拉伸,變化不會太大就不用每個進行適配。響應式設計:頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。如何實現?我司銷售管理部技術組需提前溝通形式及創意翻頁?微游戲?交互動畫?動效呈現方式設計圖層切割分享的頭像及文案等可從微游戲庫選取“玩法”項目根據模板完成設計稿,技術組配合上線。在線工具網簡單互動的翻頁:MAKA、易企秀、秀米、初頁、兔展等對動畫要求較高的創意需求: Epub360Epub360、VXploVXplo、HypeHype等等VxploVxplo互動大師互動大師易企秀外聘注意時間和費用成本,版本專利權、代碼、推廣資源等謝謝