新媒體創(chuàng)意與作品設計（全彩慕課版）第7章新媒體H5創(chuàng)意與設計

第7章新媒體H5創(chuàng)意與設計新媒體創(chuàng)意與作品設計

（全彩慕課版）目錄H5創(chuàng)意設計基礎01H5頁面設計常用工具02使用易企秀制作活動促銷H503案例導入新京報聯(lián)合字節(jié)跳動公益推出

創(chuàng)意H5，用古人智慧解答今人困惑2023年12月，新京報聯(lián)合字節(jié)跳動公益推出了創(chuàng)意H5作品——《古籍自有答案》。該H5作品通過“你的人生困惑，古人都懂”這個創(chuàng)意點，展現(xiàn)出人生困惑的各個方面，引發(fā)用戶共鳴，然后給出古人先賢的答案，最后引導用戶關(guān)注“識典古籍-古籍在線閱讀平臺”。用戶選擇點擊自己最關(guān)心的問題，就會有一個旁白說出“你的困惑，古人早已做過解答”，然后配合轉(zhuǎn)場特效與深情的誦讀，生成一張海報，栩栩如生，動感十足。海報整體是一幅中國風山水畫，古籍詩句映襯其中，妙趣橫生，創(chuàng)意十足。《古籍自有答案》H5頁面01H5創(chuàng)意設計基礎在學習H5創(chuàng)意設計之前，我們首先要了解H5的特征、類型與表現(xiàn)形式，然后掌握H5的設計技巧。認識H57.1.1H5是移動端上基于HTML5技術(shù)的交互動態(tài)網(wǎng)頁，是用于移動互聯(lián)網(wǎng)的一種新型營銷工具，通過移動平臺（如微信）進行傳播。H5將文本、圖像、音頻、視頻等多媒體元素組合在一起，創(chuàng)建出具有豐富交互性和視覺效果的網(wǎng)頁。H5跨平臺兼容性界面交互更豐富更新維護更方便開發(fā)成本更低H5的特征根據(jù)H5的內(nèi)容來劃分，可以將H5分為：展示型H5互動型H5營銷型H5高精尖型H5H5的類型H5的表現(xiàn)形式7.1.201交互式

動畫交互式動畫除了支持動畫，還支持手勢觸發(fā)和設備觸發(fā)行為，如搖一搖、重力感應等。交互式動畫的代表是體感類H5游戲，通過動作觸發(fā)、參數(shù)變量設置、邏輯判斷和記憶存儲來實現(xiàn)復雜的交互。02展示級

場景展示級場景主要實現(xiàn)動態(tài)的內(nèi)容展示，類似于PPT的動態(tài)效果，學習成本低，可以快速實現(xiàn)。這類展示頁面對擅長做PPT和靜態(tài)廣告畫面及創(chuàng)意的傳統(tǒng)營銷人員來說，是進行產(chǎn)品推廣、品牌宣傳的有效方式。03互動級

場景互動級場景的H5需要支持用戶的互動參與，提升游戲性?；蛹増鼍暗腍5主要以對用戶參與行為的引導作為出發(fā)點，如叫號排隊、用戶調(diào)研、猜價格、蓋樓游戲等。04數(shù)據(jù)收集數(shù)據(jù)類H5可以進行用戶的身份認證，進行數(shù)據(jù)的持久化存儲和調(diào)用，完成數(shù)據(jù)收集、業(yè)務邏輯判斷及動態(tài)數(shù)據(jù)交互展示。數(shù)據(jù)類H5營銷更多的是收集用戶信息，幫助商家進行精準營銷。H5的設計技巧7.1.3合理選擇頁面布局方式1用字體明暗程度劃分視覺層次2合理設計按鈕顏色3合理使用隔離元素4添加描邊或陰影6增加頁面色調(diào)7保持頁面的一致性8用背景色區(qū)分板塊5運用幾何圖形構(gòu)圖9合理使用蒙版1002H5頁面設計常用工具目前，很多企業(yè)都在借助H5開展線上營銷活動，而借助各類H5頁面設計工具能夠輕松實現(xiàn)H5的制作。下面簡要介紹幾款常用的H5頁面設計工具。MAKA1易企秀2兔展3人人秀4稿定設計503使用易企秀制作

活動促銷H5下面將以易企秀為例，介紹如何制作一個超市新店開業(yè)活動促銷H5。在制作過程中，需要將促銷信息、熱賣商品、店鋪信息及用戶交互等元素有效地融合在一起，以吸引用戶的注意力并激發(fā)他們參與活動的興趣。制作H5首頁7.3.1H5首頁以“新店開業(yè)”為核心主題，運用醒目的橙紅色背景營造熱烈、喜慶的開業(yè)氛圍?！叭珗?折起”“滿減優(yōu)惠”等吸引眼球的促銷信息，可以有效地激發(fā)用戶興趣和好奇心。制作H5首頁的具體操作方法如下。制作促銷頁面7.3.2在制作“熱賣商品”和“活動大促”頁面時，排版應簡潔明快，確保用戶可以輕松閱讀活動規(guī)則，快速了解促銷詳情，具體操作方法如下。制作抽獎頁面7.3.3在H5頁面中添加抽獎組件，設置吸引人的獎品和有趣的抽獎機制，可以激發(fā)用戶的好奇心和參與欲望，使其更愿意在頁面上停留、瀏覽并參與活動。制作抽獎頁面的具體操作方法如下。制作在線訂購頁面7.3.4通過下拉列表，用戶可以快速瀏覽并選擇所需的選項，而無須手動輸入，以減少因輸入錯誤而導致的信息錯誤。下面通過添加“輸入框”“下拉列表”和“提交按鈕”組件制作一個在線訂購頁面，具體操作方法如下。制作聯(lián)系方式頁面7.3.5為了增強可讀性和美觀性，可以使用圖標或文字標簽來突出顯示聯(lián)系方式，確保聯(lián)系方式的文字清晰易讀，且與頁面整體風格相協(xié)調(diào)。制作聯(lián)系方式頁面的具體操作方法如下。課堂實訓——使用易企秀制作公司“周年慶”活動邀請函H5實訓背景在新媒體時代，公司在開展活動或者組織對外會議時開始發(fā)送電子邀請函，逐漸拋棄以往的紙質(zhì)邀請函。在時間、空間等要素的限制下，紙質(zhì)邀請函有時難以及時、迅速地送達至目標人群手里。另外，電子邀請函還可以協(xié)助公司搜集目標人群的參與意向，進而能夠更好地統(tǒng)籌規(guī)劃活動?，F(xiàn)階段的電子邀請函，主要是以微信為載體的H5邀請函。實訓要求請同學們登錄易企秀，制作一份公司“周年慶”活動邀請函H5。實訓思路（1）制作H5首頁（2）制作受邀人員頁面（3）制作活動詳情頁面（4）制作抽獎頁面（5）制作公司介紹頁面（