H5設計商業實戰案例教程H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例111.1

H5概述21.2

H5營銷的優勢31.3

H5的應用方向和渠道41.4

H5的常見類型Chapters第1章

H5設計概述12Section1.1H5概述本節主要介紹H5的概念及其與App的區別。Section1.1.1H5的概念H5，即HTML5，是一種用于構建網頁的標準技術。與傳統的HTML（HypertextMarkupLanguage，超文本標記語言）相比，H5在功能和效果上更為強大，可以實現更多樣化的網頁設計。H5可以支持豐富的多媒體元素，如音頻、視頻等，使得網頁呈現更加生動、有趣。H5可以根據不同設備自動調整頁面布局和適配屏幕大小，確保在不同終端上的網頁展示效果良好。H5可以實現更多樣化的交互效果，如動畫、觸摸、拖曳等。另外，H5可以在不同的操作系統和設備上運行，具有更好的兼容性和可移植性。Section1.1.2H5與App的區別H5是一種網頁技術，使用H5構建的網頁可以跨平臺運行。H5主要適用于網頁應用，例如移動端網頁應用、微信小程序等。由于H5具有跨平臺性，因此只需要開發一次就可以在多個平臺上運行，而且更新和維護也十分方便。App則是一種專門針對特定操作系統或平臺開發的應用程序，需要下載、安裝后才能使用。App具有更好的本地化體驗和更強的功能，可以充分利用設備的硬件資源和操作系統特性。但是，App需要針對不同的平臺分別開發，也需要針對不同的平臺進行更新和維護，其成本和難度都更大。Section1.2H5營銷的優勢H5營銷的優勢在于H5具有強大的跨平臺性和互動性，這使得營銷信息可以輕松地在不同平臺和設備上傳播，同時也能吸引用戶積極參與和分享。H5頁面可以包含豐富的多媒體元素和交互設計，使得營銷內容更加生動、有趣，從而提高用戶的參與度和留存率。此外，H5頁面還可以通過數據分析和用戶反饋來優化營銷策略，提高營銷的精準度和轉化率，提升營銷效果。因此，H5營銷已經成為許多企業和品牌進行營銷推廣的重要手段之一。Section1.3H5的應用方向和渠道H5的應用方向非常廣泛，其中最常見的是網頁設計和開發。通過使用H5，開發者可以創建出富有交互性和具有豐富多媒體元素的網頁，提高用戶體驗和網頁對用戶的吸引力。同時，H5也廣泛應用于移動應用開發。通過使用H5，開發者可以以統一的技術標準開發跨平臺的移動應用，從而避免針對不同操作系統的開發工作。另外，H5還可以應用于游戲開發、輕應用和微站開發等領域。總之，H5已經成為現代互聯網技術和應用開發的重要工具之一，廣泛應用于各種不同的領域和場景中。Section1.4H5的常見類型本節介紹H5的常見類型，包括靜態普通類、基礎動畫類、炫酷交互類、數據圖表類、隨機事件類、長頁展示類和綜合類等。Section1.4.1靜態普通類靜態普通類H5是指一種相對簡單的頁面，通常用于展示靜態內容，如文字、圖片等。它的設計相對簡單，主要注重頁面布局、排版，以及內容的呈現方式。由于缺乏交互性和動態效果，靜態普通類H5通常比較適合進行一些簡單的信息展示或活動宣傳，例如呈現活動介紹、招聘信息，制作邀請函等。在制作上，這類H5主要依賴于設計師的設計能力和開發者的技術實現能力，同時還需要考慮頁面的加載速度和用戶體驗等因素。因此，在制作靜態普通類H5時，需要注重頁面的簡潔程度、內容的質量和呈現方式，以及技術的實現和優化等方面。Section1.4.2基礎動畫類基礎動畫類H5是指通過使用H5的動畫效果和交互功能，實現的一些具有簡單的動態效果和交互性的頁面。這類H5通常使用CSS3、JavaScript等技術實現動畫效果和交互功能，同時結合圖片、文字、視頻等多媒體元素，提高用戶體驗和網頁對用戶的吸引力。基礎動畫類H5通常用于進行一些簡單的動態展示和提供簡單的交互體驗，例如企業宣傳、產品介紹、活動介紹等。Section1.4.3炫酷交互類炫酷交互類H5是指一些具有高度交互性和豐富的動態效果的頁面，通常需要使用更高級的H5技術和設計技巧。炫酷交互類H5注重用戶體驗和交互設計，通過使用豐富的動畫效果、音效、手勢操作等，提供高度仿真的交互體驗和視覺效果。炫酷交互類H5通常用于一些需要高度交互性和富有創意的場景，例如游戲、VR/AR應用、在線教育等。在制作這類H5時，需要注重交互功能和動畫效果的設計與實現，以及頁面的布局和排版等方面；同時，還需要考慮頁面的加載速度和用戶體驗等因素，確保頁面能夠快速響應并流暢、穩定地運行。Section1.4.4數據圖表類數據圖表類H5是將數據以圖表的形式呈現的頁面。數據圖表類H5通常使用SVG（ScalableVectorGraphics，可縮放矢量圖形）、Canvas等技術實現圖表效果，同時結合數據分析、可視化等技術，將數據以更加直觀、易理解的方式呈現給用戶。數據圖表類H5通常用于一些需要展示大量數據、分析結果的場景，例如市場分析報告、銷售數據分析、用戶行為分析等。在制作這類H5時，需要注重圖表的設計和實現，以及數據的處理和分析等方面；同時，還需要考慮頁面的布局和排版等方面，確保頁面能夠清晰、準確地呈現數據。Section1.4.5隨機事件類隨機事件類H5是指通過使用H5的隨機事件功能，實現一些有不確定性的動態效果和交互體驗的頁面。這類H5通常使用JavaScript的隨機數生成函數或算法實現隨機事件，同時結合動畫效果、音效等，提供更加豐富、有趣的交互體驗和視覺效果。隨機事件類H5通常用于一些需要增強趣味性和互動性的場景，例如抽獎活動、游戲、互動廣告等。在制作這類H5時，需要注重隨機事件的設計和實現，以及頁面的布局和排版等方面；同時，還需要考慮頁面的加載速度和用戶體驗等因素，確保頁面能夠快速響應并流暢、穩定地運行。Section1.4.6長頁展示類長頁展示類H5是指一些頁面較長、內容較多的頁面。長頁展示類H5通常采用單頁面長滾動的方式，將大量的內容在同一個頁面上展示出來，用戶可以通過滑動或滾動來瀏覽內容。長頁展示類H5通常用于一些需要展示大量信息的場景，例如產品介紹、企業宣傳、電子雜志等。在制作這類H5時，需要注重頁面的布局和排版，以及內容的組織和呈現方式等方面；同時，還需要考慮用戶的閱讀體驗和操作習慣等因素，確保頁面能夠流暢地運行、用戶能夠舒適地使用。Section1.4.7綜合類綜合類H5是指一些結合了多種技術和交互方式的頁面。這類H5通常采用多種技術，例如SVG、Canvas、CSS3、JavaScript等，實現多種交互效果和動態效果，同時結合數據分析、可視化等技術，將內容以更加直觀、易理解的方式呈現給用戶。綜合類H5通常用于需要展示復雜內容和技術水平的場景，例如產品發布會介紹、大型活動宣傳、品牌廣告等。在制作這類H5時，需要注重技術的實現和交互效果的設計，以及頁面的布局和排版等方面；同時，還需要考慮用戶體驗和加載速度等因素，確保頁面能夠流暢、穩定地運行。感謝觀看H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例H5設計商業實戰案例教程H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例212.1

易企秀簡介22.2認識易企秀H5編輯器32.3作品尺寸與屏幕適配42.4

課后習題：制作浪漫粉紫色賀卡Chapters第2章

認識易企秀12Section2.1易企秀簡介本節介紹易企秀的基礎知識。Section2.1.1什么是易企秀易企秀，全稱是北京中網易企秀科技有限公司，是一家基于內容創意設計的數字輕營銷科技公司。易企秀借助大數據、人工智能、云計算等技術，打造一體化創意設計營銷平臺，涵蓋H5、海報、長頁、表單、互動、視頻等創意設計工具，幫助用戶在短時間內做出炫酷的創意作品，滿足組織、團隊和個人的全媒體、多場景在線創意設計和營銷增長需求。用戶在易企秀上進行簡單操作就可以快速生成H5、海報圖片、營銷長頁、問卷表單、互動抽獎小游戲、特效視頻等，并可以一鍵分享到社交媒體。易企秀平臺提供了從創意策劃、設計制作、分發推廣、數據分析到客戶管理的“一條龍”營銷閉環服務。Section2.1.2賬號注冊和登錄方式如何注冊易企秀賬號。進入易企秀官網。Section2.1.2賬號注冊和登錄方式用戶可以單擊右上角的“注冊”按鈕，通過微信掃碼注冊；也可以單擊“其他注冊方式”，選擇用手機號、郵箱、QQ、微博、釘釘注冊。用戶選擇最適合自己的注冊方式注冊好以后，登錄所注冊的賬號，即可進入自己的易企秀賬號管理界面。Section2.1.3賬號類型和產品矩陣易企秀賬號可以分為秀客賬號、普通個人賬號、會員企業賬號。易企秀的產品矩陣包含H5、海報、長頁、表單、互動、視頻等。Section2.1.4認識易企秀導航欄及商城產品易企秀的導航欄包括精選推薦、創意設計、其他這三大板塊。“精選推薦”包含工作臺、創意設計等功能；“創意設計”包含H5、海報、長頁、表單、互動、電子畫冊、視頻、營銷工具等功能；“其他”包含幫助中心、案例中心、正版素材、成為設計師、免費領模板等功能。單擊這些功能對應的選項可以直接打開制作所需要的模板、學習制作模板、了解各個品類的需求等。Section2.1.4認識易企秀導航欄及商城產品易企秀商城產品種類齊全，集合了各種風格、各行業模板。它為用戶提供了方便、快捷的設計與制作平臺，讓新手用戶也能輕松上手，幾分鐘即可制作一個完整的H5。Section2.1.5易企秀PC端和移動端的區別易企秀有PC（PersonalComputer，個人計算機）端和手機移動端，用戶可以根據需要選擇適合自己的制作工具。1．易企秀PC端易企秀PC端界面一目了然，主要針對企業用戶和使用計算機方便的用戶，相對移動端來說，更加簡單、容易操作，且搜索范圍廣，用戶更容易挑選到適合自己的產品。總的來說，易企秀PC端功能更齊全、操作更簡單，對于有計算機基礎的人很友好。2．易企秀移動端易企秀移動端分為Android和iOS系統，用戶可以根據自己的手機系統，直接在應用商城里下載易企秀。易企秀移動端主要針對使用計算機不方便的用戶，比如外出的用戶可以直接使用手機登錄賬號，查看客戶數據、制作模板，非常方便。易企秀移動端的缺點是制作上有局限性，操作稍有不慎，就會移動素材。所以在易企秀移動端進行制作的時候一定要熟悉并靈活運用編輯器中的隱藏按鈕，這樣操作會更加方便快捷。Section2.2認識易企秀H5編輯器本節介紹易企秀H5編輯器的基本功能。Section2.2.1作品創建功能選擇空白創建里的H5“空白創建”，即可進入空白的編輯器制作H5。創建H5的時候，可以選擇在工作臺或者作品中創建豎版H5或橫版H5。我們常用的是豎版H5。Section2.2.2左側導航欄功能選擇合適的產品創建、進入H5編輯器以后，就可以制作一個H5作品了。H5編輯器左側導航欄包含“圖文”“單頁”“裝飾”“藝術字”“我的”。Section2.2.2左側導航欄功能“圖文”對應易企秀的圖文模板，其中包含裝飾性文字、圖片，可根據自己的需要選擇合適的圖文排版。“單頁”包含H5模板中比較優秀的單頁模板，可以直接使用。值得一提的是，“單頁”中的“我的”在后期制作的時候會經常用到。如果擔心自己制作的單頁模板丟失或者需要保存以便下次使用，都可存儲在“我的”里，需要使用的時候可以直接調用。Section2.2.2左側導航欄功能“裝飾”包含圖標、形狀等裝飾性素材。“藝術字”對于新手用戶很友好，其中包含的文字具有一些簡單的設計效果，新手用戶需要時直接選擇一種藝術字，將內容更換為自己選定的文字即可。“我的”“我的申請”中都是用戶自行上傳的素材及收藏的組件，一般情況下，使用次數不多。Section2.2.3各項組件功能H5編輯器頂部是制作H5可能用到的所有組件，包含“文本”“圖片”“音樂”“視頻”“組件”“智能組件”“特效”。Section2.2.3各項組件功能單擊“文本”可以直接創建一個文本圖層并打開“組件設置”對話框，在該對話框中可以設置文字的字體、字號、顏色等。Section2.2.3各項組件功能單擊“圖片”可以打開“圖片庫”，其中包含易企秀官方提供的圖片和形狀素材，以及用戶自行上傳的圖片等。Section2.2.3各項組件功能單擊“音樂”可以打開“音樂庫”。制作H5時選擇合適的音樂很重要，在“音樂庫”中可以直接選擇易企秀官方提供的音樂素材，也可以自行上傳音樂。Section2.2.3各項組件功能單擊“視頻”可以打開“視頻庫”。用戶可以在H5頁面中添加關于本企業的視頻，也可以在H5頁面中添加易企秀官方提供的視頻素材。Section2.2.3各項組件功能“組件”包含很多功能，較常用的有撥打電話、地圖、快閃、一鏡到底、頭像、留言板、彈幕等。只有將組件使用得當，H5作品才有精髓和靈魂。Section2.2.3各項組件功能“智能組件”包含一些小創意、強互動的功能，有紅包、抽獎、打賞、在線收款等。Section2.2.3各項組件功能通過“特效”可以給H5設置入場互動，可以添加涂抹、指紋、重力感應、砸玻璃等效果，還可以給頁面添加一些氛圍感極強的飄落物，比如福字、雪花、楓葉、花瓣等，提高頁面靈動性。Section2.2.4作品分享設置及分享樣式1．作品分享設置制作好H5以后，單擊“預覽和設置”按鈕，打開“分享設置”界面，在該界面中可以給作品設置封面、標題及描述。用戶在將作品分享給別人的時候，界面中會顯示設置好的封面、標題及描述。Section2.2.4作品分享設置及分享樣式2．分享樣式在“分享樣式”界面中選擇“設置微信分享時樣式”，可以設置分享者、分享次數、分享人位置等。設置好分享樣式并發布，就可以顯示自己的微信昵稱、分享次數及分享人位置。Section2.2.5保存與發布1．保存在制作H5的時候，要養成隨時保存的習慣，以避免由于網絡和易企秀系統出現問題，導致制作的H5丟失。單擊右上角的“保存”按鈕即可保存。2．發布制作好H5，即作品的所有標題、副標題、音樂等都設置好以后，單擊“發布”按鈕就可以將作品分享出去。用戶可以在制作H5的過程中保存及發布作品，以便隨時用手機預覽自己的作品。當然，作品發布后仍可以修改，待修改完成再發布。Section2.2.6頁面設置、圖層管理、頁面管理在“頁面設置”中，可以設置背景顏色、背景疊加，可以選擇是否將背景應用于所有頁面，還可以設置頁面濾鏡等。“圖層管理”中顯示了本頁面所有的圖層，包括文本圖層及圖片圖層。“頁面管理”是整個H5所有頁面的集合，可以直接拖曳頁面以調整各個頁面的位置。Section2.3作品尺寸與屏幕適配本節介紹H5頁面的作品尺寸與屏幕適配的相關知識。Section2.3.1作品尺寸通過易企秀制作的H5分為兩種版式——豎版與橫版。一般使用豎版H5，效果如圖2-39所示。豎版H5的尺寸一般為640px×1060px，針對iPhoneX機型，尺寸為640px×1240px。用戶可以先在Photoshop（下文簡稱PS）中進行設計，然后直接在易企秀編輯器中上傳PS源文件。注意，必須將PS源文件里制作的一些效果柵格化，否則在將文件上傳到編輯器的過程中效果可能會丟失。橫版H5的尺寸同樣一般為640px×1060px，針對iPhoneX機型，尺寸為640px×1240px。Section2.3.2文件大小和文件模式為保證上傳速度，PSD文件的大小不能超過30MB，圖層不能超過30個，并且每個圖層的大小不能超過5MB。在制作的時候一定要仔細把控文件的大小，避免超出規定文件大小，導致出現文件無法上傳或者顯示不全的問題。文件模式必須是RGB/8通道模式。在制作好PSD文件后，一定要把各個圖層、各種素材、文字制作的疊加效果等柵格化或者對圖層進行合并操作，以保證最佳的上傳速度和最好的單個素材瀏覽效果。Section2.3.3識別文件中的文字上傳可識別文字的PSD文件后，原PSD文件中含文字的圖片可能會被轉化為文本格式。若字體庫中不包含原PSD文件中的文字字體，可能會自動使用默認的字體顯示文字。Section2.3.4常規頁面及長頁面常規頁面對應匹配手機屏幕尺寸的展示方法，如圖2-41所示。長頁面對應可以向下滑動以瀏覽、查看更多內容（也就是一頁到底）的展示方法，用戶可以根據自己需要展示的內容及設計調整頁面長度。Section2.4課后習題：制作浪漫粉紫色賀卡本案例可應用于表白賀卡設計、表白相冊展示等。資源位置素材位置素材文件>CH02>2.4課后習題：制作浪漫粉紫色賀卡視頻位置視頻文件>CH02>2.4課后習題：制作浪漫粉紫色賀卡.mp4設計說明本案例的作品采用浪漫的粉紫色作為主體色，一打開該作品，浪漫的氣息就撲面而來。個人用戶可用該作品來表白、求婚、送祝福等；企業用戶可以在節日期間利用該作品宣傳造勢、吸引客戶到店消費等，還可以用該作品來宣傳自己的產品、做節日活動等。感謝觀看H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例編著人民郵電出版社H5設計商業實戰案例教程H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例編著人民郵電出版社313.1創建靜態H5作品23.2創建動態H533.3實戰案例：制作小清新粉色羽毛邀請函43.4

課后習題：制作水墨中國風邀請函Chapters第3章

創建H5作品12Section3.1創建靜態H5作品本節將介紹靜態H5的創建方法。Section3.1.1準備工作2．收集所需素材梳理出大體思路之后，就需要去收集自己所需素材了。可以去各大素材網站（比如視覺中國、千圖網、包圖網、千庫網、花瓣網等）上收集相關素材。本案例制作的是清新風格的企業宣傳H5，因此應該在素材網站上搜索清新風格的素材，如小花、草地等。1．確定制作方向在制作H5之前，需要梳理出大體的制作思路。比如，要制作一個靜態、完全無動畫效果的H5作品，就要先確定自己想做的主題、風格、最終效果，然后確定需要收集的相關素材。下面制作一個清新風格的企業宣傳H5。Section3.1.2制作過程1．使用PS制作封面圖在PS中創建一個640px×1060px的空白畫布，如圖3-2所示。在該畫布上制作出自己想要的設計效果和內容。2．柵格化PS內圖層效果對于在PS中制作的文件，需要先將效果柵格化或合并相關圖層，再將文件上傳至易企秀編輯器，以免上傳后效果丟失或不顯示。Section3.1.2制作過程3．保存及上傳到易企秀編輯器將效果柵格化或合并相關圖層后，在PS中執行“文件>存儲為”命令。將文件保存至方便自己尋找的位置。記得保存PSD源文件，以便上傳至易企秀編輯器后能夠保留圖層。Section3.1.2制作過程4．把各個元素放到合適的位置將文件上傳到易企秀編輯器以后，可以看到背景和部分元素的位置存在偏差，此時需要調整部分元素的位置，并將背景拉伸至鋪滿畫布，即覆蓋邊緣的紅線。這樣能夠避免用戶使用大屏幕手機查看該作品時出現顯示不全的問題。5．運用文本工具替換PS內的文字圖層把一些副標題、沒有帶效果的文字等替換成易企秀可編輯字體，以便自己修改，或者用戶更改。易企秀自帶的文字編輯器可以更改文字字體、顏色，添加背景顏色等。Section3.1.2制作過程6．頁面的復制、刪除命令制作好封面以后，頁面的制作就很簡單了，可以使用“復制頁面”命令復制封面以制作第2頁。更改第2頁的內容，刪除主標題，制作白底，在白底上添加文字內容。用同樣的方法制作后續頁面內容。一般的頁面都是圖文結合的，需要列好副標題，排好文字和圖片內容。頁面的結構基本和第2頁的類似，只是其中的內容不同、排版不同。至此，一個風格統一的H5就制作完成了。Section3.1.3保存并發布制作好一個完整的H5以后，需要設置這個H5的封面、標題和描述。設置好以后，就可以保存并發布了。Section3.2創建動態H5本節將介紹動態H5的創建方法。Section3.2.1元素組件設置1．樣式設置樣式設置包括元素的背景顏色、濾鏡、透明度設置及高級設置（功能、邊框、陰影、尺寸與位置設置等）。2．動畫設置動畫設置可以設置元素的進入動畫、強調動畫、退出動畫。一個元素可以設置多種動畫。易企秀H5內各個元素的組件設置包含樣式設置、動畫設置、觸發設置。3．觸發設置觸發是一個有互動性的功能。互動性是指用戶在某個作品上點擊某個元素，該作品就可以呈現相關內容，這種作品在易企秀編輯器中是通過觸發設置實現的。Section3.2.2元素樣式設置1．文字元素的設置對于文字元素，一般會設置其字體、字號及顏色等。文字的行高和字距一般都采用系統默認設置，用戶可以根據自己的設計去調整文本的相應設置。2．圖片元素的設置對于在PS中制作好再上傳到易企秀編輯器的圖片元素，一般不會進行樣式設置的修改。但是對于用易企秀自帶的形狀工具繪制的圖片元素，可以修改其顏色、邊框弧度等。元素可以分為文字元素和圖片元素。Section3.2.3元素的動畫設置元素的動畫設置應該是整個H5制作中最關鍵的一步，這一步需要確定這個作品的動畫的出現時間，并需要確保動畫協調、優美。1．常規動畫設置在PS中制作好作品并將其上傳到易企秀編輯器以后，需要為每個元素設置對應的動畫時間、延遲時間、文本元素等。在設置各個元素動畫的時候，要分清主次，位于底部的元素應該先出現，所以其時間延遲要設置較小的數值，依此類推。Section3.2.3元素的動畫設置2．二次動畫設置如果你的作品中有需要讓用戶注意的、比較重要的內容，或者需要強調某個元素，則可以在設置入場動畫以后，給該內容或該元素添加強調動畫，這個動畫可以出現幾次，也可以循環播放。當用戶瀏覽頁面的時候，強調動畫會一直播放。Section3.2.4進入動畫、強調動畫、退出動畫1．進入動畫讓元素進入畫面的動畫，設置好動畫時間和延遲時間即可完成。2．強調動畫強調動畫是需要強調某重要元素或內容的時候設置的動畫。3．退出動畫使元素只展示一次就退出畫面的動畫是退出動畫。Section3.2.5元素動畫的設置1．時間設置可以根據自己的喜好去設置各個元素進入畫面的動畫時間和進入畫面的延遲時間。元素動畫時間不能設置得太長，否則畫面容易拖沓，給用戶帶來較差的體驗感。當然，元素動畫時間可以根據音樂作品的節奏和風格進行設置。常用的動畫時間設置是1s和2s。2．延遲時間設置元素動畫的延遲時間不應設置得過長，應盡快顯示在畫面上，否則會讓用戶懷疑這個畫面是不是出現了卡頓現象。當然，在設置元素動畫的延遲時間的時候，要根據整個畫面元素的圖層順序進行，這樣元素顯示才會有先后分明的變化，而不會顯得雜亂無章。元素動畫的延遲時間設置。Section3.2.5元素動畫的設置3．次數設置元素動畫的次數是指這個元素可以在畫面上出現幾次。進入動畫的次數一般是系統默認的1次。當然，如果有需要，也可以設置為多次。在制作二次動畫或強調動畫時需要設置次數，可以根據自己的需要設置次數；也可以直接勾選“循環播放”復選框設置相應效果。Section3.2.6添加音樂音樂可以說是整個H5作品的靈魂所在。在設置音樂的時候，可以上傳并使用外部音樂，也可以直接使用易企秀官方提供的音樂。音樂必須根據作品的風格設置，比如大氣的作品要設置宏偉、磅礴、大氣的音樂；可愛、溫馨的作品要設置一些輕音樂或溫馨的音樂。當用戶打開作品的時候，音樂和畫面相融合，讓用戶產生看下去的欲望，就說明這個作品已接近成功了。Section3.2.7作品分享設置和加載頁設置1．作品分享設置作品分享設置包括設置分享時作品的封面、標題、描述。另外，還可以設置微信分享時的樣式、整個作品的翻頁方式。設置翻頁方式就是設置作品從上一頁翻到下一頁時的動畫，可以為每一頁設置相同的翻頁動畫。翻頁動畫多種多樣，根據自己的需求設置即可。2．加載頁設置加載頁是打開作品時顯示的LOGO或圖片。可以將加載頁設置成自己企業的LOGO或圖片，這個功能需要付費，但可以把易企秀官方LOGO標識去掉。Section3.2.8尾頁設置及廣告去除1．尾頁設置易企秀的每個作品都有一個尾頁，可以付費去除。去除后，作品就不會顯示與易企秀相關的內容。2．廣告去除H5中可能存在一些廣告，這些廣告也是可以付費去除的。對于這些付費功能，用戶可以根據自己的需求去使用，如果沒有相關預算，可以不使用。有一些企業對自己的企業文化比較重視，就會去除與其自身無關的內容。Section3.3實戰案例：制作小清新粉色羽毛邀請函資源位置素材位置素材文件>CH03>3.3實戰案例：制作小清新粉色羽毛邀請函視頻位置視頻文件>CH03>3.3實戰案例：制作小清新粉色羽毛邀請函.mp4設計說明本案例整體上是小清新粉色風格，可應用于服裝、香水、美妝等行業，適用于新品發布、產品推廣、商務會議等的邀請函。本案例以浪漫的粉色系為主體色，并使用漂亮的白色花瓣特效，彰顯活力、青春。Section3.4課后習題：制作水墨中國風邀請函資源位置素材位置素材文件>CH03>3.4課后習題：制作水墨中國風邀請函視頻位置視頻文件>CH03>3.4課后習題：制作水墨中國風邀請函.mp4設計說明本案例可應用于企業論壇、學術培訓講座、產品展覽會等，應用廣泛、風格獨特。感謝觀看H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例H5設計商業實戰案例教程H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例14.1

認識高級組件24.2

認識表單組件64.6實戰案例：制作復雜H574.7

課后習題：制作小清新唯美紫色H534.3

認識互動組件44.4智能組件54.5

特效4Chapters第4章H5制作的高級功能應用12Section4.1認識高級組件易企秀H5編輯器中包括很多高級組件，本節介紹一些常用的高級組件。Section4.1.1拼圖、輪播圖這兩個組件多應用于圖片上，當需要展示圖片（比如產品圖片、環境圖片、人物照片等）時可以使用。1．拼圖易企秀自帶很多拼圖模板，選擇編輯器“組件”中的“拼圖”，打開“選擇拼圖模板”對話框，其中包括多種樣式的拼圖模板。在該對話框中，用戶可根據自身喜好或者圖片的樣式選擇拼圖模板。選擇需要的模板，直接單擊就可以使用。例如，選擇了兩張圖片的愛心模板，直接單擊左邊的圖片，可根據提示換圖。Section4.1.1拼圖、輪播圖換圖后，可根據需要裁切圖片，確定裁切范圍后，單擊“確定”按鈕。Section4.1.1拼圖、輪播圖2．輪播圖輪播圖，顧名思義就是能自動播放圖片，其中的圖片也可以通過手動滑動查看。輪播圖可以應用到H5中制作微官網首頁、展示圖片、展示動態效果等。輪播圖的風格多樣。可以根據自身作品選擇對應的輪播圖風格，比如選擇走馬燈風格。選擇好以后，可以更換圖片、裁切圖片（可以選擇使用系統自動給出的比例進行裁切，也可以自定義比例進行裁切），還可以設置自動切換圖片及圖片切換的時間。可以為每張圖片命名或添加描述。Section4.1.2數據圖表、隨機事件1．數據圖表數據圖表可應用于年終總結、數據統計（例如每月銷售額統計、增長數據統計）等。數據圖表的操作方便快捷、類型豐富。Section4.1.2數據圖表、隨機事件數據統計的標題可根據制作的H5的內容設置。圖例的排列方式多樣，包括橫向排列、縱向排列、縱向居右等，可以選擇不顯示圖例。對于數據圖表還可進行標識顏色的設置，具體應該根據整個H5的風格和顏色進行。數據圖表中的數據需要根據自己的數據進行設置。Section4.1.2數據圖表、隨機事件2．隨機事件隨機事件可應用于企業進行線上抽獎、抽簽、幸運轉盤等活動。封面樣式中包括易企秀官方提供的4種樣式，也可自定義封面樣式。隨機類型包括文本和圖片。隨機文本可以根據需要添加，而且可以設置顏色、字體、字號。Section4.1.2數據圖表、隨機事件隨機圖片可用于線上抽獎。線上抽獎的獎品可設置為手機、平板電腦、紙巾、洗衣液等，直接上傳獎品對應的圖片，供用戶應用隨機圖片功能抽取獎品。易企秀還提供了點擊截圖的功能。通過該功能，抽中獎品的用戶可以直接截圖以進行線下兌換，達到互動的效果。截圖按鈕風格多樣，可以選擇系統自帶的幾種按鈕風格，也可以自定義按鈕風格，按鈕名稱、按鈕顏色、文字顏色等應根據整個H5的風格進行設置。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方1．一鏡到底在編輯器“組件”中單擊“一鏡到底”，就可以啟動此功能。一鏡到底頁面至少需要設置3頁。建議一鏡到底頁面最好設置在10頁內，因為頁面過多容易出現卡頓現象。首先，設置一鏡到底頁面的背景。其次，在制作一鏡到底頁面的時候，需要選擇一個主體素材，比如可選擇一個圓形為主體素材，圓形中間需要進行鏤空設計。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方建議從第二幕開始制作一鏡到底頁面，如果在第一幕上制作，播放時第一幕的內容就很容易被遮蓋。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方將圓形中間設計為鏤空的之后，每一頁都通過復制前一頁來制作。一鏡到底頁面的最后一頁可以放置一個實心的圓形，放文字、圖片都可以，播放的時候就能實現一鏡到底的效果，即一眼就能看到最后的頁面，如同穿過深邃的隧道一樣。一鏡到底頁面的播放速度可以根據自身的需求進行設置，注意一定要打開“自動滑動畫面”。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方2．快閃快閃頁面同樣至少需要設置3頁，默認為3頁。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方快閃頁面應根據H5制作。快閃的設置精髓主要在于動畫時間的設置，動畫時間設置得越短，快閃動畫就越快。但是為了給用戶帶來更好的體驗，所制作的快閃內容要保證用戶能清楚地看到。在設置很快的快閃動畫的時候，頁面內容必須精簡，不能過于煩瑣、復雜。快閃應用范圍廣泛，包括邀請函、企業宣傳、培訓招生、節日祝福賀卡等，幾乎所有的H5都可以應用快閃。快閃應用操作簡單，只需要設置好快閃的動畫、每一頁停留的時間，就可以輕松制作好快閃頁面。需要注意的是，制作快閃頁面的時候，可以在每一頁的空白處（頁面之外）放置一個元素，讓頁面停留得更久一點，給用戶最完整的體驗感，注意需要根據頁面素材的動畫設置這個空白處的元素的動畫。在最后一頁的快閃內容中，可以為空白元素設置觸發動畫，從而使快閃動畫自動播放完成后直接跳轉到下一頁，方便快捷，讓用戶無須進行滑動操作。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方3．畫中畫畫中畫，顧名思義就是畫里有畫。添加畫中畫組件后就會出現一個自帶的按鈕，可以使用系統默認的按鈕樣式，也可以自定義按鈕樣式。畫中畫最終呈現的效果是用戶打開此頁面，按住畫中畫自帶的按鈕不松開，可以看到畫面一層一層直接呈現的效果。使用畫中畫組件，需要把每一頁設計好，把前一頁縮小后放到所需位置。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方4．立體魔方立體魔方應用廣泛，風格多樣，使用方便快捷。立體魔方風格呈3D樣式，可以自動旋轉以展示各個面，還可以設置每個面的內容。在立體魔方風格中，旋轉木馬可以呈現出圖片一張一張顯示的效果。選擇“旋轉木馬”，直接上傳內容圖片即可進行設置。3D全景可以用于設計背景墻，效果類似背景照片墻。一鏡到底的呈現方式是由遠到近地展示照片。立體魔方最多只能設置6幅內容圖片。Section4.1.3一鏡到底、快閃、畫中畫、立體魔方直接單擊右側圖片處需要替換的圖片，選擇需要更換的圖片，裁切圖片，單擊“確定”按鈕。Section4.1.4地圖、撥打電話、跳轉鏈接1．地圖幾乎每個H5都需要設置地圖。用戶看到H5中的地圖，直接點擊“路線”按鈕，展開地圖，點擊“導航”按鈕，在彈出的列表中選擇所要使用的App，比如百度地圖、高德地圖等，即可跳轉到對應App中進行導航，使用方便。在易企秀編輯器中可以設置地圖，只需在搜索框中輸入準確位置，點擊搜索按鈕，地圖就會直接展示出來。

地圖樣式包括圖形樣式和按鈕樣式。圖形樣式應用較多，

有矩形和圓形兩種展示類型。

使用按鈕樣式，頁面上不會顯示準確位置，而會顯示一個

按鈕，用戶點擊該按鈕就可以直接進行導航操作。該按鈕

的顏色和其上文本的顏色可以根據制作的H5的風格進行調

整和修改。Section4.1.4地圖、撥打電話、跳轉鏈接2．撥打電話撥打電話功能方便快捷，實用性強。如果在制作的H5中設置此功能，用戶在看到電話號碼時，就不用手動將電話號碼輸入手機中，而是直接點擊撥打電話的按鈕即可撥打電話。Section4.1.4地圖、撥打電話、跳轉鏈接首先，可以直接使用所需文字作為撥打電話的按鈕名稱，比如一鍵撥號、一鍵撥打電話等。按鈕顏色和文字顏色都可以根據整個H5的風格和顏色進行設置。其次，按鈕的邊框樣式、邊框弧度等也可以根據喜好或者整個H5的設計進行對應設置。最后，設置電話號碼。要確保用戶撥打的電話準確無誤，只需在“手機/電話”輸入框中輸入對應電話號碼即可。Section4.1.4地圖、撥打電話、跳轉鏈接3．跳轉鏈接跳轉鏈接和撥打電話的設置方法相同，可以在編輯器“組件”中選擇“跳轉鏈接”。也可以在“組件設置”對話框的“點擊跳轉”下拉列表中選擇“跳轉鏈接”。跳轉鏈接的按鈕顏色、文字顏色與撥打電話的按鈕顏色、文字顏色一樣，都是可以自定義的。Section4.1.4地圖、撥打電話、跳轉鏈接通過跳轉鏈接功能可以跳轉到外部網站鏈接或微網站等，只要“鏈接地址”中設置的是一個能打開的網址，都可以直接點擊跳轉。在“點擊跳轉”下拉列表中還可以選擇“跳轉固定頁面”以跳轉到H5內部頁面，或者選擇“跳轉隨機頁面”以跳轉到隨機的頁面。跳轉鏈接功能應用廣泛，用戶通過該功能可以從H5跳轉到微網站、企業網站、活動報名網頁等，還可以從一個H5跳轉到另外一個H5，只要使用的是一個正確的鏈接，都能點擊直接跳轉。Section4.1.5實時日期、實時位置、天氣、畫板1．實時日期實時日期的類型有日、月、年、星期、月-日、年-月、年-月-日、陰歷年、陰歷月、陰歷日等，這個日期可以準確設置到某一天。用戶可以根據自己的喜好設置實時日期的形式、格式、字體、字號、文字色等。Section4.1.5實時日期、實時位置、天氣、畫板2．實時位置實時位置是一個IP（InternetProtocol，互聯網協議）地址。如果用戶在北京海淀區打開這個作品，實時位置就顯示在北京海淀區；如果用戶在成都武侯區打開這個作品，實時位置就顯示在成都武侯區，智能又實用。在實時位置的“顯示設置”中可以勾選“國家”“省份”“城市”“鄉/鎮/區”復選框，讓用戶打開作品就能直接看到自己的實時位置；也可以根據需要勾選“城市”“省份”等復選框。顯示實時位置的文字的字體、字號、文字色都可以根據作品的整體色調進行設置與調整。Section4.1.5實時日期、實時位置、天氣、畫板3．天氣天氣組件可根據用戶打開作品的實時位置智能、準確地顯示用戶所在地的天氣，還可顯示城市地區，實用性強。天氣組件樣式多樣，可以根據自身喜好選擇。Section4.1.5實時日期、實時位置、天氣、畫板在編輯器中設置該組件的時候，樣式僅供展示，未包含具體的天氣信息，作品發布后可在手機上查看天氣信息。用戶可以根據作品的整體色調選擇天氣組件的文本顏色和背景顏色。Section4.1.5實時日期、實時位置、天氣、畫板4．畫板畫板組件互動性強，實用性好，用戶可根據提示進行操作，如寫字、畫畫等。畫筆尺寸、畫筆樣式、畫筆顏色、背景顏色都可以自行設置。畫筆樣式有5種，可以根據喜好選擇。最終呈現效果：用戶打開此頁面，點擊左上角的畫筆圖標，根據提示進行操作，完成操作后點擊“完成”按鈕。Section4.1.6動態數字、音效、目錄1．動態數字動態數字的類型有兩種，分別是區間變化和區間滾動。動態數字的起始數值和終止數值都是可以設置的，數字的字體、字號、文字色根據整個頁面的風格進行調整與設置。動態數字組件常用于展現一年結束準備進入下一年的數字跳動，比如元旦、從2023年進入2024年，讓用戶感受到時間的流逝。動態數字組件還可以用于計數。設置好起始數值、終止數值，動態數字將從起始數值自然跳動到所設置的終止數值。Section4.1.6動態數字、音效、目錄2．音效音效組件可用來制作互動型的H5。比如在H5中設置了音效按鈕，讓用戶一點擊此按鈕就能聽到對應聲音，從而增強整個H5的趣味性。Section4.1.6動態數字、音效、目錄音效按鈕可以使用易企秀官方提供的，也可以根據整體設計自定義。按鈕顏色、文字顏色、邊框樣式、邊框弧度等都可根據自身喜好選擇。單擊“添加音效”按鈕可以自己上傳音效，也可以使用易企秀官方提供的音樂或音效。注意音樂可裁切。設置好音效以后，用戶打開相應頁面，點擊“點擊收聽語音祝福”按鈕，就可以播放音效的內容。Section4.1.6動態數字、音效、目錄3．目錄目錄組件可應用到企業宣傳畫冊類H5中。設置目錄可以讓用戶對H5的內容一目了然，知道所宣傳的內容具體是什么，還可以讓用戶點擊目錄內容跳轉到所對應的頁面，增強H5的實用性和互動性。按層級，目錄可分為單層級目錄和多層級目錄。單層級目錄樣式分為圖片樣式和時間軸樣式。Section4.1.6動態數字、音效、目錄多層級目錄的層級可分為一級、兩級、三級（類似于包含主標題、副標題、小標題的層級關系）。可根據需要設置各個層級的標題，還可直接設置跳轉頁面。Section4.1.6動態數字、音效、目錄單層級目錄只有一個層級的關系，可以直接根據系統提供的樣式編輯對應的標題文字，也可直接設置跳轉頁面。選擇使用圖片樣式可以更換圖片、編輯標題、設置跳轉頁面。選擇使用時間軸樣式可以直接編輯標題、設置跳轉頁面。Section4.1.7底部菜單、點擊截圖、計時1．底部菜單點擊組件中的“底部菜單”，可以進入后臺設置，勾選“顯示底部菜單”復選框；在“主菜單樣式”處，可以設置底部菜單的文字顏色、背景顏色、分割顏色；菜單項可以增加或刪除，還可對某一個菜單進行子菜單設置。可以為菜單項設置觸發，觸發可以設置為跳轉外鏈、跳轉頁面，或者撥打電話。底部菜單組件可應用于企業宣傳、微官網等。用戶打開作品，可以根據自己的需要點擊首頁的底部菜單，直接跳轉到對應頁面。設置好的底部菜單會固定出現在每一個頁面上，但是對使用了一鏡到底、畫中畫、快閃、模擬對話、語音助手特效的頁面不生效。Section4.1.7底部菜單、點擊截圖、計時2．點擊截圖點擊截圖組件互動性強，用戶可以使用截圖來進行宣傳或發朋友圈。點擊截圖的按鈕風格多種多樣，按鈕名稱、按鈕顏色、文字顏色、邊框弧度等都可自行設置。Section4.1.7底部菜單、點擊截圖、計時3．計時計時組件可用于設置活動倒計時，如高考類H5的倒計時，以起到警示、提醒的作用。計時類型有倒計時和正計時。倒計時需要設置截止時間，其字號、文字色、背景顏色等都可以根據整體色調進行設置。開啟“截止后顯示內容”，倒計時結束后顯示的文本內容可以自定義。Section4.1.7底部菜單、點擊截圖、計時正計時需要設置開始時間，字號、文字色等都可以自定義。開啟“開始前顯示”，正計時開始前顯示的文本內容可以自定義。Section4.2認識表單組件本節介紹一些常用的表單組件。Section4.2.1輸入框輸入框應用極廣，基本每個H5都需要使用此組件。比如，在邀請函、企業宣傳、招生、招聘等類H5中，輸入框可以用于收集客戶信息，也可以用于收集客戶意見或建議。用戶需要根據輸入框的顯示內容填寫對應的信息。輸入框的輸入類型有姓名、電話、郵箱、日期、文本。值得一提的是，如果你要收集如參會人數、意見、建議、孩子年齡等信息，應選擇文本類型，如果選擇姓名、電話類型，用戶將無法填寫，因為輸入內容的格式不正確，不允許提交。所以當收集信息的類型超過現有類型的時候，一律選擇文本類型。輸入框的文字顏色、邊框顏色、邊框弧度等都可以根據自身喜好或H5的風格進行設置。Section4.2.2單選和多選1．單選單選組件可用來制作答題類H5。當答案只有一個時，可以使用單選組件。單選組件默認包括3個選項，可以根據需要刪減或增加選項。可以根據自己的內容修改單選組件的標題和選項，也可以根據需要設置主題顏色和標題顏色。單選組件可以切換到多選組件。Section4.2.2單選和多選2．多選多選組件也可以對標題、選項等進行設置并且可以切換到單選組件。Section4.2.3下拉列表下拉列表使用起來簡單快捷，用戶無須輸入內容，直接點擊右側小三角，就可以根據下拉列表的占位文本選擇對應的內容。在編輯器“組件”中選擇“下拉列表”，打開“組件設置”對話框，在其中可以對下拉列表中的選項進行設置，可以先根據需要在“選項設置”輸入框中輸入對應的內容，再把占位文本編輯好。選項設置可根據需要進行刪減或增加，點擊“+”或“-”圖標按鈕即可實現。邊框樣式、邊框顏色和邊框弧度等都可以根據需要進行修改與設置。Section4.2.4評分評分組件可應用于H5末尾。與購物時對商品進行評價類似，用戶看到我們制作的H5，比如公司宣傳類H5，可以對公司進行評價。在制作活動促銷類H5的時候，也可以使用該組件，讓用戶對活動的熱情度進行評分等。評分組件的評分標題可編輯，按鈕圖標可選擇，圖標顏色可修改，背景顏色可更換。用戶在瀏覽該組件的時候，就可以根據標題進行評分，比如點亮3顆星、5顆星等。Section4.2.5手機號驗證手機號驗證組件可根據自己的需要選擇使用。收集電話信息可以直接使用普通輸入框，也可以使用手機號驗證組件，區別是手機號驗證需要用戶填寫真實有效的手機號碼，收到驗證碼后才可以進入填寫，這樣能夠保證號碼的準確性。使用此功能需要購買短信套餐。選擇手機號驗證組件，輸入框、輸入框顏色、邊框顏色、文字色等都可以根據整體風格進行調整與修改。Section4.2.6提交按鈕前文介紹的部分表單組件的設置，需要用到提交按鈕。一個H5作品只能添加一個提交按鈕，如圖4-96所示。在設置好輸入框、單選、多選、手機號驗證等組件的內容后，必須設置提交按鈕，以便用戶填寫好相應信息后，點擊提交按鈕提交信息。在H5作品的后臺可以收集到用戶所填寫的信息，這些信息都是可以導出的。提交按鈕組件設置中可設置短信通知或修改活動簽到，并根據需要設置相應的參數。可對提交按鈕名稱、主題色等進行調整；還可開啟“提交前必讀”，以此來提醒用戶填寫真實有效的信息；根據用戶需要可為提交按鈕設置一個跳轉鏈接；也可設置提交成功的提示類型和提示文本等。Section4.3認識互動組件本節介紹常用的互動組件。Section4.3.1微信頭像、微信語音1．微信頭像打開微信頭像組件，默認顯示的是微信頭像和微信昵稱。在使用過程中，可以只使用微信頭像或者微信昵稱。微信頭像樣式多種多樣，可根據作品需求進行選擇。微信頭像包括瀏覽者頭像和分享者頭像兩種類型。選擇使用瀏覽者頭像，當用戶打開此作品時，就會顯示用戶的微信頭像；選擇使用分享者頭像，就會顯示發送此作品的人的微信頭像。這里還可對微信頭像進行邊框樣式、邊框弧度等的設置，從而達到美化微信頭像的效果。Section4.3.1微信頭像、微信語音微信昵稱包括瀏覽者昵稱和分享者昵稱兩種類型，其區別與頭像類型的區別是一樣的。可對微信昵稱的默認文字進行編輯，將其設置成自己想要的文字，比如“此處是你的微信昵稱”“這里是你的微信昵稱”“自動識別微信昵稱”等。微信昵稱文本顯示的字體、顏色、字號等都可以自行設置。Section4.3.1微信頭像、微信語音2．微信語音如果在作品里添加了語音組件，瀏覽者可用微信打開作品，在含有語音組件的頁面中直接按住對應按鈕說話，說完之后就可以將作品分享給別人，別人就能聽到瀏覽者的錄音，而且也可以按住該按鈕說話。可以設置“按住說話”按鈕和聽語音按鈕的邊框樣式、背景顏色等，讓它們與其他元素融合得更自然。Section4.3.2上傳照片、頭像墻1．上傳照片通過上傳照片組件，瀏覽者可直接點擊提示圖片，上傳自己的照片。可根據自身作品的風格及顏色，設置上傳圖片的提示圖片。Section4.3.2上傳照片、頭像墻2．頭像墻頭像墻組件用于顯示作品的所有瀏覽者的微信頭像。頭像墻樣式包括默認、心形、圓形、五角星、菱形、六邊形，頭像行數可根據畫面的空白區域的大小進行選擇。可對頭像對應的微信昵稱顯示與否進行設置。Section4.3.3投票、點贊、瀏覽次數1．投票投票組件分為圖片投票和文字投票兩種類型。圖片投票以圖片的方式顯示投票內容。文字投票以文字的方式顯示投票內容。投票標題和按鈕顏色可以根據自身喜好和作品整體風格進行相應的調整與修改。Section4.3.3投票、點贊、瀏覽次數2．點贊點贊按鈕圖標包括愛心、大拇指、花朵等；按鈕樣式可自定義，圖標顏色和背景顏色都可修改。點贊組件可用于計數，當用戶點擊圖標時，會直接顯示點贊的數量。Section4.3.3投票、點贊、瀏覽次數3．瀏覽次數如果使用了瀏覽次數組件，用戶打開作品就可看到此作品被多少用戶瀏覽過。瀏覽次數的數字格式可設置為簡潔或完整。按鈕樣式可自定義。Section4.3.4留言板、彈幕1．留言板留言板組件應用廣泛，可用于多類作品，如邀請函、活動宣傳、活動促銷、招生、祝福賀卡等。用戶打開含有留言板組件的頁面，可以在輸入框中輸入想說的話并進行發布，發布的留言可以被其他瀏覽該作品的用戶看到。留言板風格多樣，可根據需要進行選擇。標題名稱可自定義，還可使用系統推薦的留言板標題。Section4.3.4留言板、彈幕2．彈幕彈幕是留言板的一種格式，采用彈幕的留言板，用戶的留言會動態展示在頁面上，類似于電視劇的彈幕。Section4.3.4留言板、彈幕彈幕風格多樣，彈幕位置可設置為全屏、3/4屏、頂部、底部，具體根據需要進行選擇。圖標背景和圖標顏色等也可根據風格和整體顏色進行調整。Section4.4智能組件本節介紹常用的智能組件。Section4.4.1自說字畫、年齡改變1．自說字畫自說字畫組件的功能是把音頻/視頻識別成文字并生成動畫，使用自說字畫組件可以制作出炫酷的H5場景。自說字畫組件的使用流程：選擇組件→上傳音頻/視頻→自動識別語音→生成動畫→校驗識別出的文本內容→設置動畫風格、字體、背景顏色等。點擊“文字校驗”區域中文字前的小方塊可以改變該行文字的顏色，讓動畫更加絢麗。動畫風格、背景顏色、字體可以自定義，還可以添加背景圖片，背景圖片是置于背景顏色圖層之上的。背景圖片和背景顏色都可以設置透明度。Section4.4.1自說字畫、年齡改變2．年齡改變年齡改變組件可以提供很有趣的互動體驗。通過年齡改變組件，用戶可以直接上傳圖片，點擊年齡改變按鈕，即可改變照片中人臉顯示的年齡，年齡可設置為固定值，也可自定義。Section4.4.1自說字畫、年齡改變風格、年齡選擇、按鈕名稱、文字顏色、按鈕顏色等都是可修改的。分享樣式有兩種，可根據需要進行選擇。Section4.4.2人臉識別、人臉融合1．人臉識別人臉識別組件的設置和年齡改變組件的設置類似，用戶可以直接上傳圖片進行人臉識別。風格、按鈕名稱、文字顏色、按鈕顏色、背景顏色等都可修改，在“識別內容”處可勾選“年齡”“顏值”復選框。Section4.4.2人臉識別、人臉融合2．人臉融合人臉融合組件的功能是允許用戶在現有的人臉融合模板上，上傳自己的正面清晰人臉照，讓自己的臉和背景相融合。現有模板多種多樣，可以應用在不同的作品里，用戶需根據自身需求進行選擇。Section4.4.2人臉識別、人臉融合可裁切背景、更換背景、調整人像位置，可自定義作品名稱。Section4.4.3紅包、抽獎、打賞1．紅包在智能組件的紅包組件中，作品紅包分為常規紅包、表單提交紅包、瀏覽作品紅包。在微信中打開紅包組件，可直接領取紅包。Section4.4.3紅包、抽獎、打賞單擊“常規紅包”按鈕，打開“常規紅包設置”對話框，在其中可根據各類節假日選擇對應的紅包樣式，也可自定義紅包樣式；紅包祝詞可自行編輯。Section4.4.3紅包、抽獎、打賞設置好紅包樣式后，單擊“紅包領取設置”按鈕，可對該紅包活動名稱、活動時間、紅包金額、紅包個數、抽中紅包概率等進行設置。設置好以后，單擊“保存”按鈕。Section4.4.3紅包、抽獎、打賞要設置表單提交紅包，需要先添加一個“提交”按鈕。然后在“作品紅包”中單擊“表單提交紅包”按鈕，打開“表單紅包設置”對話框，在其中可以選擇紅包動畫，也可以選擇普通靜態樣式的紅包。最后進行紅包領取設置，這里的設置和常規紅包的設置一樣。瀏覽作品紅包是用戶打開此作品即可領取的線上紅包，其設置和表單提交紅包的設置一樣。讀者可根據需求選擇對應的紅包。Section4.4.3紅包、抽獎、打賞2．抽獎抽獎組件的設置步驟是在“智能組件”中選擇“抽獎”，然后選擇合適的抽獎模板，單擊“確定”按鈕。Section4.4.3紅包、抽獎、打賞進入“編輯抽獎”界面。根據實際情況對基礎內容、獎品內容、中獎規則、編輯組件樣式等依次進行設置，設置完成后，單擊“生成”按鈕，會打開“活動生成確認”對話框。仔細查看該對話框中的內容，確認內容準確無誤之后，單擊“確認發布”按鈕，就可以得到一個活動抽獎的前端頁面。Section4.4.3紅包、抽獎、打賞根據實際情況對基礎內容、獎品內容、中獎規則、編輯組件樣式等依次進行設置，設置完成后，單擊“生成”按鈕，會打開“活動生成確認”對話框。仔細查看該對話框中的內容，確認內容準確無誤之后，單擊“確認發布”按鈕，就可以得到一個活動抽獎的前端頁面。Section4.4.3紅包、抽獎、打賞3．打賞打賞組件可應用于婚禮邀請函、生日宴會邀請函、喬遷之喜邀請函、滿月宴邀請函、商店開業宣傳、活動預訂等類H5中。用戶可以在微信中打開頁面、點擊打賞，也可以直接充值或給作品打賞。打賞樣式多種多樣，用戶可根據自身需求進行選擇。打賞文案可自定義，根據制作作品的主題編輯相應的標題文字。打賞類型分為現金打賞和禮物打賞。禮物打賞可自定義禮物圖片。收到打賞后，錢款會自動存入企業賬戶，企業賬戶管理員可操作提現，這里會扣除1%的手續費。Section4.4.4在線收款、實時對話1．在線收款在線收款可用于在線售賣商品。在“智能組件”中選擇“在線收款”組件，會彈出一個提示框。單擊“知道了”按鈕，即可添加組件。Section4.4.4在線收款、實時對話在“組件設置”對話框中單擊“編輯在線收款”按鈕，又會彈出一個提示框。單擊“知道了”按鈕，即可進入“在線收款設置”界面。在該界面中可以添加商品，單擊“添加商品”，在彈出的列表中選擇“新增商品”。進入“新建商品”對話框，在該對話框中可對商品名稱、商品主圖、商品規格、商品價格、庫存等進行設置。Section4.4.4在線收款、實時對話勾選“我已閱讀《商品發布協議》，并確保自己發布的商品符合協議要求”復選框，單擊“確定”按鈕，然后設置用戶下單需要填寫的信息（如購買人、手機號碼、收貨地址等），并將賣家信息編輯好，單擊“保存”按鈕。在線收款功能添加產品方便、快捷，運用該組件制作活動宣傳類H5方便實用，能達到極好的推廣效果。Section4.4.4在線收款、實時對話2．實時對話運用實時對話組件后，用戶單擊“客服”按鈕，可直接與客服在線對話，實時溝通。該組件需要企業微信授權后，才可以使用。按鈕樣式可自定義，也可使用系統默認樣式，可以選擇讓每頁相同位置出現客服按鈕，也可以只讓它出現在某一頁。Section4.5特效本節介紹易企秀中的各種特效。Section4.5.1涂抹選擇特效中的涂抹特效，可以根據自己的作品上傳所需要的圖片，也可以直接使用易企秀官方提供的涂抹背景圖片，調整透明度和涂抹比例，再編輯提示文字。如果想要讓涂抹效果更貼合自己的作品，建議上傳自己所需要的圖片。Section4.5.2指紋選擇特效中的指紋特效，其設置和涂抹特效的設置一樣，可自定義背景圖片，也可使用易企秀官方提供的背景圖片。指紋圖片可自定義，易企秀官方提供的指紋圖片效果并不多，建議大家上傳一些適用的指紋圖片。Section4.5.3飄落物飄落物特效就是讓元素從手機屏幕上方飄落下來，我們可以根據作品主題來選擇飄落物。易企秀官方提供了很多飄落物圖片，當然也可以自行上傳飄落物圖片，飄落氛圍的強度可根據需要設置。飄雪特效是較為常用的特效。使用飄落物特效，可以提升頁面的氛圍感，讓人仿佛身臨其境。飄落物應根據實際情況選擇，比如，活動宣傳類H5可使用“禮物”飄落物，春節類H5可使用“福字”飄落物，圣誕節類H5可使用“圣誕節”飄落物，秋季類H5可使用“楓葉”飄落物。Section4.5.4漸變漸變特效是一個入場特效。使用漸變特效后，頁面將根據所設置的顏色緩慢地展現。可以根據作品整體色調選擇漸變顏色，持續時間可調整，漸變方向分為從左到右、從右到左、從上到下、從下到上，可以根據習慣和愛好選擇漸變方向，開啟形式可設置為自動開啟或按下開啟。如果將開啟形式設置為按下開啟，可以設置對應的提示文字。Section4.5.4漸變設置好以后，單擊“確定”按鈕，漸變特效就被添加上了。Section4.5.5重力感應重力感應效果需要在手機上查看。重力感應圖片會在用戶搖動手機時跟著手機搖動的方向搖動。重力感應圖片可自定義，也可選擇易企秀官方提供的圖片。Section4.5.6砸玻璃砸玻璃特效是一個入場特效。添加此組件后，用戶打開相應頁面，點擊手機屏幕，屏幕上可出現砸玻璃樣的特效，特效播放完畢后就可以進入制作的H5頁面中。砸玻璃特效的背景顏色可以選擇和自己作品的主題色類似的顏色，設置好砸擊次數和提示文字，點擊“確定”按鈕即可。Section4.5.7模擬對話打開特效中的模擬對話組件，進入一個新的編輯頁面。在該頁面中可對模似對話的聊天風格進行選擇，并設置內容選擇、成員管理等，可以根據需要添加更多成員，設置3個或3個以上成員就需要設置群聊名稱。Section4.5.7模擬對話添加好以后，點擊文本，輸入想說的話，設置發送者或接收者，編輯對話內容，點擊“保存”按鈕。Section4.6實戰案例：制作復雜H5資源位置素材位置素材文件>CH04>4.6實戰案例：制作復雜H5視頻位置視頻文件>CH04>4.6實戰案例：制作復雜H5.mp4設計說明本案例是一個紅金風格大氣的慶祝祖國成立75周年的H5，整體色調為紅色；采用動效的鎏金主題文字，更顯大氣、有質感；運用旗子飄動的背景，更能展現喜迎國慶的主題；使用了一鏡到底、快閃、彈幕、頭像墻、微信頭像、手機號驗證、表單等組件，還設置了一些互動功能，讓用戶參與其中，深刻體會生活在這個偉大國度的自豪感，心潮澎湃。Section4.7課后習題：制作小清新唯美紫色H5資源位置素材位置素材文件>CH04>4.7課后習題：制作小清新唯美紫色H5視頻位置視頻文件>CH04>4.7課后習題：制作小清新唯美紫色H5.mp4設計說明本案例可應用于美妝行業、服裝行業、美容行業、美容美體行業等主要與女性相關的行業，可用于企業宣傳、產品推廣、品牌宣傳等，應用廣泛，內容溫馨浪漫。感謝觀看H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例編著人民郵電出版社H5設計商業實戰案例教程H5設計概述/認識易企秀/創建H5作品/H5制作的高級功能應用/爆款H5頁面設計/H5創意互動設計/H5實戰案例55.5

課后習題：制作招聘宣傳H5515.1

風格百變：常見的H5頁面風格25.2色彩搭配：H5頁面色彩設計35.3圖文設計：用高顏值圖文提升畫面質感45.4

實戰案例：制作爆款高級質感H5Chapters第5章

爆款H5頁面設計12Section5.1風格百變：常見的H5頁面風格本節介紹H5頁面的各種風格。Section1．簡約商務風格在H5里，簡約商務風格的畫面一般由各種各樣的幾何圖形、線條、色塊等拼接而成。5.1風格百變：常見的H5頁面風格Section2．卡通扁平化風格卡通扁平化風格是一種以卡通、扁平為基調的設計風格，去除復雜的事物結構、陰影、紋理等，用簡單線條或色塊構成的卡通圖像，營造出簡單、可愛、扁平的感覺。5.1風格百變：常見的H5頁面風格Section3．科技風格在H5里，科技藍色應用廣泛。可以運用星光、發光宇宙、科技感線條、各類幾何圖漸變色塊制作科技風格的H5。科技感在不同領域的表達方式不同，可用其他顏色（比如藍綠色、傳統藍色等）來體現科技感。配色是塑造科技風格頁面的一個重要的因素。5.1風格百變：常見的H5頁面風格Section4．炫酷鎏金風格運用炫酷GIF作入場動畫，用有質感、大氣的顏色作為背景，用