H5設(shè)計(jì)商業(yè)實(shí)戰(zhàn)案例教程H5設(shè)計(jì)概述/認(rèn)識(shí)易企秀/創(chuàng)建H5作品/H5制作的高級(jí)功能應(yīng)用/爆款H5頁面設(shè)計(jì)/H5創(chuàng)意互動(dòng)設(shè)計(jì)/H5實(shí)戰(zhàn)案例55.5

課后習(xí)題：制作招聘宣傳H5515.1

風(fēng)格百變：常見的H5頁面風(fēng)格25.2色彩搭配：H5頁面色彩設(shè)計(jì)35.3圖文設(shè)計(jì)：用高顏值圖文提升畫面質(zhì)感45.4

實(shí)戰(zhàn)案例：制作爆款高級(jí)質(zhì)感H5Chapters第5章

爆款H5頁面設(shè)計(jì)12Section5.1風(fēng)格百變：常見的H5頁面風(fēng)格本節(jié)介紹H5頁面的各種風(fēng)格。Section1．簡(jiǎn)約商務(wù)風(fēng)格在H5里，簡(jiǎn)約商務(wù)風(fēng)格的畫面一般由各種各樣的幾何圖形、線條、色塊等拼接而成。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section2．卡通扁平化風(fēng)格卡通扁平化風(fēng)格是一種以卡通、扁平為基調(diào)的設(shè)計(jì)風(fēng)格，去除復(fù)雜的事物結(jié)構(gòu)、陰影、紋理等，用簡(jiǎn)單線條或色塊構(gòu)成的卡通圖像，營(yíng)造出簡(jiǎn)單、可愛、扁平的感覺。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section3．科技風(fēng)格在H5里，科技藍(lán)色應(yīng)用廣泛?？梢赃\(yùn)用星光、發(fā)光宇宙、科技感線條、各類幾何圖漸變色塊制作科技風(fēng)格的H5?？萍几性诓煌I(lǐng)域的表達(dá)方式不同，可用其他顏色（比如藍(lán)綠色、傳統(tǒng)藍(lán)色等）來體現(xiàn)科技感。配色是塑造科技風(fēng)格頁面的一個(gè)重要的因素。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section4．炫酷鎏金風(fēng)格運(yùn)用炫酷GIF作入場(chǎng)動(dòng)畫，用有質(zhì)感、大氣的顏色作為背景，用鎏金文字進(jìn)行烘托，可以制作出大氣的炫酷鎏金風(fēng)格H5模板，并且可以為H5添加各類鎏金形狀、線條等來裝飾整個(gè)頁面。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section5．古典中國(guó)風(fēng)風(fēng)格古典中國(guó)風(fēng)是比較典型的風(fēng)格，這種風(fēng)格的H5帶有傳統(tǒng)歷史文化的韻味。在設(shè)計(jì)這種風(fēng)格的H5時(shí)，往往選擇比較傳統(tǒng)的內(nèi)容。比如常選擇紅色、黃色、藍(lán)色、白色、黑色、綠色等傳統(tǒng)顏色，以及水墨畫、書法、剪紙、器具、建筑等傳統(tǒng)元素。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section6．國(guó)潮風(fēng)格國(guó)潮風(fēng)格設(shè)計(jì)通過對(duì)圖像、文字、色彩與版式等進(jìn)行整體歸納與融合，將我國(guó)傳統(tǒng)文化與精神理念貫穿于作品之中，向大眾傳達(dá)出“國(guó)潮”文化內(nèi)涵，引發(fā)大眾的文化認(rèn)同感與情感共識(shí)。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section7．時(shí)尚炫彩風(fēng)格時(shí)尚炫彩風(fēng)格是利用幾何圖形、不規(guī)則幾何圖形等，通過各類顏色協(xié)調(diào)搭配形成的風(fēng)格。這種風(fēng)格的H5簡(jiǎn)潔、大氣、時(shí)尚，顏色明亮，往往讓人眼前一亮。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section8．輕奢鎏金風(fēng)格輕奢鎏金風(fēng)格的設(shè)計(jì)理念是打造一種精致的設(shè)計(jì)形式，搭配鎏金文字，在提升質(zhì)感的同時(shí)，給人一種穩(wěn)定、細(xì)膩的協(xié)調(diào)感。輕奢鎏金風(fēng)格的H5中沒有太過搶眼的設(shè)計(jì)，也沒有五彩斑斕的顏色疊加，細(xì)節(jié)處的表達(dá)更能凸顯出頁面的精致感。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section9．清新文藝風(fēng)格清新文藝風(fēng)格是以溫馨、溫柔的色調(diào)來體現(xiàn)頁面的一種表達(dá)方法，這種風(fēng)格的H5干凈、溫暖、隨意、簡(jiǎn)潔、清爽，用雅致的色調(diào)和舒適文藝的時(shí)尚元素構(gòu)造出整個(gè)頁面。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section10．簡(jiǎn)約手繪風(fēng)格簡(jiǎn)約手繪風(fēng)格的H5主要由手繪圖案構(gòu)成，這些圖案可以用素描形式、馬克筆繪制形式表示，還可以用水彩簡(jiǎn)單繪制，包括各類手繪卡通人物、植物、動(dòng)物等。隨著科技不斷進(jìn)步，現(xiàn)在設(shè)計(jì)師可以直接在計(jì)算機(jī)軟件中進(jìn)行手繪，更加方便快捷。5.1風(fēng)格百變：常見的H5頁面風(fēng)格Section5.2色彩搭配：H5頁面色彩設(shè)計(jì)本節(jié)介紹H5頁面的色彩設(shè)計(jì)方法。Section1．高端H5頁面為了營(yíng)造視覺上的高端感，H5頁面使用的色彩通常具有明度低、飽和度低等特點(diǎn)，且頁面中使用的色彩種類較少。很多高端H5頁面會(huì)以深色作為背景顏色（因?yàn)樯钌@低調(diào)、更具神秘感，給人的感覺更高貴），并以金色、銀色、橘紅色、白色等作為輔助色。5.2.1H5頁面設(shè)計(jì)中常用的配色方案Section2．科技H5頁面科技H5頁面使用的色彩的整體調(diào)性通常偏冷色系，明暗對(duì)比強(qiáng)烈，且通常會(huì)使用漸變色。比如，以深藍(lán)色到藍(lán)色的漸變作為背景顏色，并用高飽和度、高亮度的青色和紫色等作為輔助色，在這種搭配下，輔助色會(huì)顯得非常跳躍，產(chǎn)生一種發(fā)光的效果。5.2.1H5頁面設(shè)計(jì)中常用的配色方案Section3．炫彩時(shí)尚H5頁面炫彩通常指使用具有飽和度高、明度適中、色相對(duì)比較強(qiáng)等特點(diǎn)的顏色，而時(shí)尚特指年輕化、潮流化。5.2.1H5頁面設(shè)計(jì)中常用的配色方案Section4．小清新H5頁面小清新所指的視覺效果為輕松、柔和、淡雅，要實(shí)現(xiàn)這樣的效果，頁面使用的顏色的明度通常較高，飽和度偏低，常用的顏色有淺青色、淺綠色、淺黃色、淺藍(lán)色、淺紫色、粉紅色等。小清新H5頁面在女性護(hù)膚品、青春類、浪漫類的相關(guān)設(shè)計(jì)中比較常見。5.2.1H5頁面設(shè)計(jì)中常用的配色方案Section5．可愛卡通H5頁面跟兒童相關(guān)的設(shè)計(jì)，通常需要采用卡通形式，從而表現(xiàn)出可愛的調(diào)性。可愛卡通H5頁面中采用的色彩通常是冷色和暖色的組合，顏色的明度不能太低，否則會(huì)有壓抑的感覺，另外，顏色的飽和度也不能過高，低飽和度的顏色會(huì)顯得更加柔和。5.2.1H5頁面設(shè)計(jì)中常用的配色方案Section色彩具有高度的情緒化和象征性關(guān)聯(lián)特征。在設(shè)計(jì)中正確運(yùn)用色彩，可以起到調(diào)動(dòng)客戶情緒、喚起客戶記憶等功能。思維將色彩和人的情緒、記憶進(jìn)行關(guān)聯(lián)，這種關(guān)聯(lián)是各個(gè)方面的，比如文化、地理和經(jīng)歷。除了與情緒、記憶關(guān)聯(lián)以外，色彩還具有象征性符號(hào)的關(guān)聯(lián)功能。色彩可以標(biāo)識(shí)一個(gè)人、一個(gè)公司或一個(gè)組織。對(duì)于有強(qiáng)烈品牌觀念的公司，色彩的運(yùn)用非常重要。當(dāng)品牌使用的色彩對(duì)比強(qiáng)烈、飽和度高、屬于基礎(chǔ)色或合成色時(shí)，畫面往往具有極高的辨識(shí)度，可以與其他品牌進(jìn)行區(qū)分。5.2.2H5頁面色彩設(shè)計(jì)策略Section我們要根據(jù)行業(yè)、客戶需求、品牌定位等考慮該用什么樣的色彩，比如，要制作一個(gè)新年的喜慶H5，我們首先想到的是紅色，就用紅色為主體色去變化，并添加金色形成高級(jí)紅金色調(diào)；要制作一個(gè)關(guān)于幼兒園的招生宣傳的H5，我們首先想到的是可愛、童真，就用各類顏色去協(xié)調(diào)搭配，尋找可愛的元素構(gòu)成可愛的畫面；如果客戶提出了具體需求，要求使用指定的色系及風(fēng)格制作H5，比如指定制作橙色調(diào)的簡(jiǎn)約商務(wù)風(fēng)格的企業(yè)宣傳H5，我們就可以用比較簡(jiǎn)單的橙色線條、幾何圖形等進(jìn)行構(gòu)圖，并搭建H5頁面。5.2.2H5頁面色彩設(shè)計(jì)策略Section設(shè)計(jì)的方方面面離不開色彩的運(yùn)用，色彩對(duì)我們的影響無處不在。設(shè)計(jì)可以改變我們的生活，讓我們的生活充滿魅力、活力、對(duì)美好充滿向往，而色彩讓這一切變得更加美麗。在H5設(shè)計(jì)中合理運(yùn)用色彩，可能產(chǎn)生意料之外的驚人效果，色彩是設(shè)計(jì)中較關(guān)鍵、不可或缺的成員，設(shè)計(jì)和色彩共同創(chuàng)造著美麗的世界！5.2.2H5頁面色彩設(shè)計(jì)策略Section1．千圖網(wǎng)千圖網(wǎng)提供按照色相和印象搭配的色系，并提供了多種配色方案。2．ColorSupply在ColorSupply網(wǎng)站提供的色輪中，按住鼠標(biāo)左鍵不放，拖曳黑色指針就可以查看不同的配色方案。3．uiGradientsuiGradients網(wǎng)站提供各類漸變配色方案。這些漸變配色方案可生成為圖片直接用到你的作品里。5.2.3常用的H5配色工具Section5．zhongguosezhongguose網(wǎng)站提供傳統(tǒng)中國(guó)風(fēng)配色方案，單擊白灰色小圓環(huán)，即可查看顏色。6．MaterialPalette在MaterialPalette網(wǎng)站中選擇顏色后，網(wǎng)站會(huì)自動(dòng)生成一套配色方案，這套方案可以實(shí)時(shí)預(yù)覽。5.2.3常用的H5配色工具Section7．hello-colorhello-color網(wǎng)站能夠快速生成對(duì)比色，可以在網(wǎng)頁上單擊，以尋找想要的對(duì)比色。8．Hailpixel在Hailpixel網(wǎng)站網(wǎng)頁上單擊，可以迅速生成色系，且該網(wǎng)站會(huì)顯示顏色的RGB值（該值可復(fù)制）。5.2.3常用的H5配色工具Section5.3圖文設(shè)計(jì)：用高顏值圖文提升畫面質(zhì)感本節(jié)介紹H5頁面的圖文設(shè)計(jì)方法。SectionH5頁面常用的排版設(shè)計(jì)方式包括以下3種。1．居中排版居中排版是將文字元素全部居中，盡量將在邏輯上有關(guān)系的兩個(gè)視覺元素放在一起，使它們變成一個(gè)視覺元素。在一般情況下，將同類信息放在一起能夠提高用戶獲取信息的效率。5.3.1H5頁面的排版設(shè)計(jì)Section2．左、右對(duì)齊排版左、右對(duì)齊排版是指將元素全部向左或向右對(duì)齊。使用這種排版設(shè)計(jì)方式一般會(huì)先提取重要信息，把重要信息通過對(duì)比的方式展現(xiàn)。常用的對(duì)比方式有層級(jí)對(duì)比，字號(hào)、字重、顏色、字體對(duì)比。5.3.1H5頁面的排版設(shè)計(jì)Section3．畫面整體分布型排版畫面整體分布型排版是指將畫面元素全屏分布，結(jié)合左對(duì)齊、右對(duì)齊、居中對(duì)齊的方式整合元素信息從而進(jìn)行排版，需要給信息分層級(jí)、從大量信息中提取重要信息，并從字體、字號(hào)、顏色去區(qū)分層級(jí)關(guān)系。5.3.1H5頁面的排版設(shè)計(jì)Section本小節(jié)介紹H5頁面的層級(jí)和元素的設(shè)計(jì)方法。1．層級(jí)（1）從內(nèi)容區(qū)分層級(jí)在一個(gè)H5頁面中，內(nèi)容越靠上、靠左越容易吸引客戶的注意，所以左上角或垂直中間偏上的位置，我們一般用來排列標(biāo)題、主要內(nèi)容等，頁面最頂部和底部排列一些標(biāo)語、注解等，按這樣的方式把內(nèi)容排列好，能夠制造出簡(jiǎn)單的層級(jí)關(guān)系。（2）從目標(biāo)大小區(qū)分層級(jí)越大的目標(biāo)越容易吸引客戶的注意。字號(hào)最大的內(nèi)容一般都是最主要的信息，如標(biāo)題、核心賣點(diǎn)等，與主要信息相關(guān)的信息需要按文字大小、位置來排列，這樣就可以形成較明顯的層級(jí)。5.3.2H5頁面的層級(jí)和元素設(shè)計(jì)Section（3）從色彩區(qū)分層級(jí)色彩是設(shè)計(jì)中不可或缺的一部分，在色彩搭配基礎(chǔ)上，我們可以對(duì)各項(xiàng)元素進(jìn)行層級(jí)區(qū)分。H5在金色文字的襯托下顯得高貴典雅，在大面積白色元素中，金色顯得格外突出，這樣就將層級(jí)區(qū)分開來。（4）從透明度區(qū)分層級(jí)不同透明度的元素在一起會(huì)形成虛實(shí)對(duì)比的效果，從而增強(qiáng)頁面空間感。把重要信息設(shè)置成低透明度的，把次要信息設(shè)置成高透明度的，是區(qū)分層級(jí)的有效手段。5.3.2H5頁面的層級(jí)和元素設(shè)計(jì)Section（5）通過增加線、框區(qū)分層級(jí)給文字增加線或框，就好比用筆把書上的某些內(nèi)容圈出來，能使其更加突出。有線框的文字能夠和無線框的文字區(qū)分開來，不同形狀的線框也能彼此區(qū)分。（6）用形狀、色塊區(qū)分層級(jí)色塊是具有強(qiáng)烈視覺沖擊的設(shè)計(jì)元素，所以給重要的文字信息加上色彩對(duì)比鮮明的色塊，能使其變得更加突出，與其他元素形成鮮明對(duì)比，從而使畫面的層級(jí)關(guān)系變得明顯。5.3.2H5頁面的層級(jí)和元素設(shè)計(jì)Section5.3.2H5頁面的層級(jí)和元素設(shè)計(jì)2．元素在設(shè)計(jì)H5頁面時(shí)，最好使用一致或類似的元素。例如，使用統(tǒng)一的圖形裝飾框等，這樣可以產(chǎn)生視覺上的關(guān)聯(lián)性，使整體更加統(tǒng)一化、一致化。當(dāng)然，統(tǒng)一性法則不僅體現(xiàn)在元素選擇上，也體現(xiàn)在色彩表現(xiàn)上。例如，各頁的圖形元素用同一色系的顏色填充，可以讓圖形在視覺上更統(tǒng)一。統(tǒng)一性法則還體現(xiàn)在圖形的表現(xiàn)形式上。例如，所有的圖形都用一樣的插畫型表現(xiàn)方式，能夠使圖形元素的表達(dá)在視覺上更統(tǒng)一。Section5.3.3H5頁面信息的可視化設(shè)計(jì)易企秀H5編輯器包含幾種可視化信息的功能，比如點(diǎn)贊、頭像墻、彈幕、留言板、瀏覽次數(shù)、動(dòng)態(tài)數(shù)字、數(shù)據(jù)圖表等。我們可以將這些功能直接應(yīng)用在頁面上，從而讓用戶可以直觀準(zhǔn)確地看到相關(guān)信息，同時(shí)增強(qiáng)互動(dòng)性。Section留白是H5設(shè)計(jì)中一種獨(dú)特的藝術(shù)語言。留白并不意味著沒有內(nèi)容，它在頁面布局中是不可或缺的一部分。將留白巧妙、合理地應(yīng)用在設(shè)計(jì)中，能為觀看者提供一個(gè)舒適的閱讀環(huán)境，使其能快速地獲取信息，切實(shí)提升畫面的藝術(shù)與審美價(jià)值。H5頁面留白設(shè)計(jì)包括以下幾種。1．對(duì)角留白如果一個(gè)頁面采用對(duì)角構(gòu)圖，即將主要元素分布在對(duì)角線上，那么與該對(duì)角線相對(duì)的兩個(gè)角就可以空出來進(jìn)行留白處理，使畫面具有平衡性與優(yōu)秀的設(shè)計(jì)感。2．單側(cè)留白排版時(shí)在畫面的一側(cè)設(shè)計(jì)主要內(nèi)容，對(duì)另一側(cè)進(jìn)行留白處理，能讓畫面在視覺上產(chǎn)生一種對(duì)比，形成一種通透的感覺。留白的部分可以完全保持空白，也可以增加點(diǎn)、線、面的結(jié)合元素，使畫面內(nèi)容更加豐富。5.3.4H5頁面留白設(shè)計(jì)Section3．區(qū)隔留白區(qū)隔留白的作用是把不同信息分隔開來，比如可以在標(biāo)題與正文之間、正文與圖片之間，留出一片空白，這樣排版會(huì)比只留一兩處空格的排版更有呼吸感。4．對(duì)稱留白對(duì)稱的手法讓畫面看起來簡(jiǎn)潔又工整。對(duì)稱留白能最大程度地突出主題，主題的豐富程度決定了畫面的豐富程度。5.3.4H5頁面留白設(shè)計(jì)Section5．突出主體留白有些畫面具有簡(jiǎn)約、精致的卡通主體物，我們可以使用突出主體留白，從而突出主體，抓住用戶的眼球。6．天空留白如果畫面是以天空作為背景，可以直接在天空上端顏色純凈處排版文字。保留天空的完整性，給人一種開闊、干凈的感覺。5.3.4H5頁面留白設(shè)計(jì)SectionH5頁面的視覺平衡設(shè)計(jì)包括以下4種。1．色彩平衡顏色的冷暖色調(diào)、灰度、飽和度，在相同尺寸下，不同色系顯示出來的效果也不同。一般而言，暖色會(huì)比冷色重。比如同等大小的紅藍(lán)色塊，在視覺上紅色更重。在取色的時(shí)候，我們需要協(xié)調(diào)整體畫面，從它的灰度、飽和度等區(qū)間取色，讓畫面具有視覺上的舒適感。2．構(gòu)圖平衡要讓整個(gè)畫面產(chǎn)生平衡感，需要通過對(duì)元素的安排及調(diào)整將視覺中心放在畫面的中心位置上。構(gòu)圖上的不平衡會(huì)使畫面內(nèi)容模糊不定，讓人難以理解。在制作畫面時(shí)，我們的首要任務(wù)不是讓視覺效果多么奇幻特別，而是把想表達(dá)的內(nèi)容清晰、明了地呈現(xiàn)出來，而不平衡的構(gòu)圖會(huì)干擾人的直覺判斷。在構(gòu)圖平衡的情況下，層級(jí)分明、信息清晰，標(biāo)題、副標(biāo)題、正文能直觀地展現(xiàn)。5.3.5H5頁面視覺平衡設(shè)計(jì)Section3．位置平衡之所以稱某些圖案能夠吸引眼球，是因?yàn)樗鼈儠?huì)引導(dǎo)人們的視線去往畫面的中心點(diǎn)。帶有圖案的元素及帶有紋理貼圖的元素顯得很重。我們?cè)谥谱鞯臅r(shí)候，需要對(duì)中心主體物加深視覺印象，以吸引眼球，而在對(duì)角或上下角處，需要進(jìn)行輔助設(shè)計(jì)，比如使用英文、虛實(shí)線進(jìn)行點(diǎn)綴等，只有補(bǔ)償了上下、前后、左右的空間不平衡，才會(huì)讓畫面達(dá)到視覺平衡。4．元素平衡平衡穩(wěn)定的元素會(huì)使視覺效果顯得平衡持久。例如，一個(gè)圓會(huì)引導(dǎo)人們的視線去往畫面的中心位置。5.3.5H5頁面視覺平衡設(shè)計(jì)Section通常，H5頁面視覺心理設(shè)計(jì)需要體現(xiàn)以下幾方面特點(diǎn)。1．親密性距離影響我們對(duì)組織的認(rèn)知，通常，我們會(huì)認(rèn)為彼此靠近的兩個(gè)元素屬于同一個(gè)組織。因此，我們?cè)谥谱鱄5時(shí)，需要特別注意各類元素、圖文的劃分，列出重點(diǎn)并構(gòu)造出關(guān)系網(wǎng)。5.3.6H5頁面視覺心理設(shè)計(jì)Section2．相似性人們習(xí)慣自動(dòng)將看到的東西，按照形狀、大小、顏色、方向等特征進(jìn)行分類。所以我們?cè)谠O(shè)計(jì)頁面的時(shí)候，需要先確定整體的風(fēng)格，再進(jìn)行規(guī)劃性的設(shè)計(jì)。內(nèi)容的顏色需要保持統(tǒng)一，大小需要根據(jù)內(nèi)容的重點(diǎn)進(jìn)行對(duì)應(yīng)的設(shè)置。5.3.6H5頁面視覺心理設(shè)計(jì)Section3．圖層關(guān)系人們?cè)诟兄挛锏臅r(shí)候，總是習(xí)慣性地將視覺區(qū)域劃分為主體和背景，即將突出的元素視為主體，其余元素視為背景。在設(shè)計(jì)作品的時(shí)候，需要?jiǎng)澐种黧w元素和背景元素，讓用戶能快速感知到此作品的大致含義。5.3.6H5頁面視覺心理設(shè)計(jì)Section4．延續(xù)性當(dāng)我們發(fā)現(xiàn)視覺規(guī)律后，會(huì)希望對(duì)象能夠按照規(guī)律延續(xù)下去。在設(shè)計(jì)中，有效的對(duì)齊可以減輕用戶的視覺疲勞感，保持視覺的延續(xù)性。5.3.6H5頁面視覺心理設(shè)計(jì)Section易企秀H5編輯器提供了可以有效、快速地進(jìn)行圖片排版和展示的組件，如拼圖、輪播圖、立體魔方等。這些組件可以用既美觀又有趣的方式將上傳的圖片展示出來。5.3.7H5頁面圖片設(shè)計(jì)Section我們?cè)谠O(shè)計(jì)時(shí)，也可以自己對(duì)圖片進(jìn)行排版。在編輯器里可以設(shè)置圓弧度、描邊、投影等，且圖片具有方形、圓形、圓弧形等排版樣式。5.3.7H5頁面圖片設(shè)計(jì)Section在制作H5的時(shí)候，如果想要展示產(chǎn)品的圖片，可以使用整體圖和局部細(xì)節(jié)圖來更好地凸顯出這個(gè)產(chǎn)品。5.3.7H5頁面圖片設(shè)計(jì)SectionH5頁面文本設(shè)計(jì)包括圖文搭配設(shè)計(jì)和純文字設(shè)計(jì)兩種。具體操作如下。1．圖文搭配設(shè)計(jì)在頁面文本設(shè)計(jì)中，可以使用圖片和文字來豐富整體頁面。文字可以是具體的正文描述，也可以是關(guān)鍵性信息。5.3.8H5頁面文本設(shè)計(jì)Section2．純文字設(shè)計(jì)在純文字設(shè)計(jì)中，需要注意文字整體的對(duì)齊方式和關(guān)鍵性內(nèi)容的展示?？梢灾谱餍螤顖D標(biāo)來凸顯一些關(guān)鍵性信息，還可以使用中英文結(jié)合的方式來豐富頁面內(nèi)容。5.3.8H5頁面文本設(shè)計(jì)Section5.4實(shí)戰(zhàn)案例：制作爆款高級(jí)質(zhì)感H5資源位置素材位置素材文件>CH05>5.4實(shí)戰(zhàn)案例：制作爆款高級(jí)質(zhì)感H5視頻位置視頻文件>CH05>5.4實(shí)戰(zhàn)案例：制作爆款高級(jí)質(zhì)感H5.mp4設(shè)計(jì)說明本案例適用于各類行業(yè)的邀請(qǐng)函，適用于商務(wù)會(huì)議邀請(qǐng)、論壇邀請(qǐng)、產(chǎn)品發(fā)布會(huì)邀請(qǐng)、高峰論壇邀請(qǐng)等，適用范圍廣泛，風(fēng)格是國(guó)潮大氣紅藍(lán)鎏金風(fēng)。本案例作品采用了一鏡到底、快閃、跳轉(zhuǎn)鏈接、地圖、表單、二維碼等功能，對(duì)各類會(huì)議上的互動(dòng)而言都很適用，音樂大氣激昂，讓人一打開本案例作品，就能感覺到這個(gè)會(huì)議至關(guān)重要。Section5.5課后習(xí)題：制作招聘宣傳H5資源位置素材位置素材文件>CH05>5.5課后習(xí)題：制作招聘宣傳H5視頻位置視頻文件>CH05>5.5課后習(xí)題：制作招聘宣傳H5.mp4設(shè)計(jì)說明本案例可運(yùn)用于所有公司的人才招聘宣傳。勵(lì)志文案、大氣音樂、白云動(dòng)效，展現(xiàn)了本案例的整體風(fēng)格。本案例運(yùn)用藍(lán)天白云的背景，襯托主題“同努力，共拼搏”，讓人共情。感謝觀看H5設(shè)計(jì)概述/認(rèn)識(shí)易企秀/創(chuàng)建H5作品/H5制作的高級(jí)功能應(yīng)用/爆款H5頁面設(shè)計(jì)/H5創(chuàng)意互動(dòng)設(shè)計(jì)/H5實(shí)戰(zhàn)案例編著人民郵電出版社H5設(shè)計(jì)商業(yè)實(shí)戰(zhàn)案例教程H5設(shè)計(jì)概述/認(rèn)識(shí)易企秀/創(chuàng)建H5作品/H5制作的高級(jí)功能應(yīng)用/爆款H5頁面設(shè)計(jì)/H5創(chuàng)意互動(dòng)設(shè)計(jì)/H5實(shí)戰(zhàn)案例編著人民郵電出版社56.5

課后習(xí)題：制作清新淡綠色婚禮邀請(qǐng)函616.1

影音設(shè)計(jì)：增強(qiáng)H5畫面的張力26.2

動(dòng)效設(shè)計(jì)：打造H5頁面交互體驗(yàn)感36.3高級(jí)互動(dòng)組件：打造炫酷H546.4

實(shí)戰(zhàn)案例：制作高端創(chuàng)意互動(dòng)H5Chapters第6章H5創(chuàng)意互動(dòng)設(shè)計(jì)12Section6.1影音設(shè)計(jì)：增強(qiáng)H5畫面的張力本節(jié)介紹利用影音設(shè)計(jì)來增強(qiáng)H5畫面的張力的方法。Section6.1.1加入外接視頻通常，在制作H5的時(shí)候，為了增加整個(gè)作品的辨識(shí)度及宣傳效果，會(huì)給這個(gè)作品添加視頻，當(dāng)用戶翻到作品中包含視頻的頁面時(shí)，直接點(diǎn)擊視頻播放按鈕，就可以觀看視頻了。視頻可以從視頻庫添加，可以使用易企秀自帶的視頻，也可以使用自己上傳的宣傳視頻。還可以添加外接視頻，外接視頻需要通過通用代碼添加。Section6.1.2加入外鏈視頻易企秀提供添加鏈接的功能，我們?nèi)绻枰層脩舨榭淳€上的視頻，可以在作品中設(shè)置一個(gè)跳轉(zhuǎn)鏈接按鈕，在“鏈接地址”輸入框中輸入你的視頻鏈接，用戶瀏覽到包含按鈕的頁面時(shí)，可以點(diǎn)擊按鈕以查看視頻。Section6.1.3常用的H5動(dòng)畫和視頻制作工具1．常用的H5動(dòng)畫一般常用的H5動(dòng)畫是進(jìn)入動(dòng)畫。如果需要進(jìn)行互動(dòng)、二次強(qiáng)調(diào)等，可以使用強(qiáng)調(diào)動(dòng)畫和退出動(dòng)畫。頁面的翻頁動(dòng)畫也十分有趣，我們可以在制作好作品后，設(shè)置頁面的翻頁動(dòng)畫，可根據(jù)自身需要和作品的風(fēng)格等設(shè)置對(duì)應(yīng)的翻頁動(dòng)畫。Section6.1.3常用的H5動(dòng)畫和視頻制作工具進(jìn)入動(dòng)畫：經(jīng)常會(huì)用到向左、向右、向上、向下移入，放大、縮小進(jìn)入，翻開、翻滾進(jìn)入等，可以根據(jù)自身需要設(shè)置相應(yīng)的動(dòng)畫類型。值得注意的是，有些動(dòng)畫屬于常規(guī)的商務(wù)動(dòng)畫類型；有些動(dòng)畫屬于卡通可愛類型，需要用到彈入、魔幻、旋轉(zhuǎn)等，這些動(dòng)畫相對(duì)來說趣味性更高。強(qiáng)調(diào)動(dòng)畫：從字面意義來說，強(qiáng)調(diào)動(dòng)畫起到強(qiáng)調(diào)的作用，比如對(duì)于一些關(guān)鍵的文字、圖片，我們需要用到強(qiáng)調(diào)動(dòng)畫來加深用戶的印象。一般情況下，使用到的強(qiáng)調(diào)動(dòng)畫屬于二次動(dòng)畫。退出動(dòng)畫：為元素添加進(jìn)入動(dòng)畫以后，如果我們只需要展示一下動(dòng)畫的效果，加深該作品的趣味性和互動(dòng)性，就可以給元素添加退出動(dòng)畫。添加好以后，我們?cè)谇岸耸强床坏皆撛氐?，只能在編輯器中看到該元素。使用退出?dòng)畫，能夠提高作品的高級(jí)感和互動(dòng)性。Section6.1.3常用的H5動(dòng)畫和視頻制作工具2．視頻制作工具專業(yè)視頻制作工具包括AfterEffects、Premiere、會(huì)聲會(huì)影。AfterEffects：AfterEffects（AE）

是Adobe公

司

推出的一款圖形視頻處理軟件，主要用來創(chuàng)建動(dòng)態(tài)圖像和視覺特效，是一款功能豐富、有明確定位的非線性編輯軟件。AE憑借與其他Adobe軟件無與倫比的緊密集成和高度靈活的2D和3D合成，以及數(shù)百種預(yù)設(shè)的效果和動(dòng)畫，廣泛應(yīng)用于影視后期、影視特效、廣告宣傳、欄目包裝以及UI設(shè)計(jì)、電商設(shè)計(jì)等領(lǐng)域。AE比較擅長(zhǎng)的是對(duì)較短內(nèi)容進(jìn)行特效處理和后期合成，比如制作UI動(dòng)畫效果、MG動(dòng)畫，或者針對(duì)特定元素制作更加視覺化的效果。Premiere：Premiere（簡(jiǎn)稱Pr）由Adobe公司開發(fā)的一款常用的視頻編輯軟件。Pr可以在各種平臺(tái)下和硬件配合使用，被廣泛應(yīng)用于電視制作、廣告制作、電影剪輯等領(lǐng)域，成為Windows和macOS操作系統(tǒng)上應(yīng)用較為廣泛的視頻編輯軟件之一。會(huì)聲會(huì)影：加拿大Corel公司制作的一款功能強(qiáng)大的視頻編輯軟件，正版英文名為CorelVideoStudio，具有圖像抓取和編修功能，可以轉(zhuǎn)換MV、DV、V8、TV和實(shí)時(shí)記錄抓取畫面文件，提供了超過100種的編制功能與效果，可導(dǎo)出多種常見的視頻格式，甚至可以直接制作DVD（DigitalVersatileDisc，數(shù)字通用光碟）和VCD（VideoCompactDisc，小型影碟）。Section6.1.3常用的H5動(dòng)畫和視頻制作工具常用視頻剪輯工具包括剪映、FinalCutPro、達(dá)芬奇。剪映：是一款全能易用的桌面端剪輯軟件，有電腦（含平板電腦）和手機(jī)版本，剪輯功能全面，配樂、變速、加字幕等可一鍵完成，適合新手入門。FinalCutPro：蘋果電腦必備的剪輯軟件，具有先進(jìn)的調(diào)色功能、HDR（HighDataRate，高數(shù)據(jù)通率）視頻支持，且支持ProResRAW，讓剪輯、音軌、圖形特效整片輸出，一氣呵成。達(dá)芬奇剪輯：一個(gè)集剪輯、調(diào)色、特效制作、音頻處理等于一體的視頻處理軟件，被廣泛應(yīng)用于電影、電視劇、廣告等影視影音及調(diào)色制作中，具有強(qiáng)大的兼容性、超快的處理速度及高音質(zhì)的畫面。Section6.1.4H5背景音樂和音效設(shè)計(jì)1．背景音樂在易企秀里，H5的背景音樂可以是自己上傳的，也可以是易企秀音樂庫里的。對(duì)于不同類的H5，我們需要選擇不同的音樂，比如對(duì)于炫酷鎏金風(fēng)格的H5，我們需要用震撼一點(diǎn)的音樂；對(duì)于清新文藝風(fēng)格的H5，我們需要用舒緩一點(diǎn)的輕音樂；對(duì)于時(shí)尚炫彩風(fēng)格的H5，我們需要用動(dòng)感、時(shí)尚一點(diǎn)的音樂。大家要根據(jù)自身的需要挑選合適的背景音樂。背景音樂是H5不可分割的一部分，它起著至關(guān)重要的作用。易企秀H5還可添加頁面音樂（比如用戶翻到作品某一頁的時(shí)候，會(huì)播放你設(shè)置好的頁面音樂）。Section6.1.4H5背景音樂和音效設(shè)計(jì)2．音效音效可應(yīng)用于互動(dòng)模板制作中，比如會(huì)在H5中設(shè)置一個(gè)按鈕，在用戶點(diǎn)擊該按鈕的時(shí)候，會(huì)播放一個(gè)時(shí)間很短的音效。在易企秀編輯器里，我們選擇組件里的音效，就自動(dòng)添加好一個(gè)按鈕，可根據(jù)作品風(fēng)格自行設(shè)計(jì)按鈕或者修改按鈕的顏色及樣式等。單擊自定義里的“添加音效”按鈕，直接進(jìn)入“音樂庫”對(duì)話框，可以自己上傳音效，也可以裁切音樂庫里的音樂用作音效。Section6.1.5音樂素材的搜集與編輯音樂可用我們平時(shí)聽過的、收藏起來的音樂，也可以去各大素材網(wǎng)站尋找適用于作品的音樂，考慮到版權(quán)問題，最好使用易企秀音樂庫里的音樂。選擇好音樂以后，如果不需要整段音樂，就可以直接在易企秀編輯器進(jìn)行音樂裁切。Section6.1.6搜集音效素材的渠道1．小森平小森平音效網(wǎng)是一個(gè)無損音樂網(wǎng)站，非常簡(jiǎn)單直接，免費(fèi)提供各種可下載的音效。網(wǎng)站創(chuàng)建者是一位來自日本的音效制作者。該網(wǎng)站的音效不需要注冊(cè)、登錄就可以直接下載下來，分類清晰明了，可以根據(jù)需要選擇對(duì)應(yīng)的分類音效素材。Section6.1.6搜集音效素材的渠道2．站長(zhǎng)素材站長(zhǎng)素材網(wǎng)站提供很多分類素材，直接單擊音效素材對(duì)應(yīng)的“免費(fèi)下載”即可下載音效，可根據(jù)風(fēng)格、情緒、場(chǎng)景選擇對(duì)應(yīng)的音效。Section6.1.6搜集音效素材的渠道3．愛給網(wǎng)愛給網(wǎng)提供豐富的音效素材，包含各種音效素材類型，比如游戲音效、人類聲音、動(dòng)物聲音、環(huán)境聲音、日常生活等。Section6.1.6搜集音效素材的渠道4．淘聲網(wǎng)淘聲網(wǎng)是一個(gè)全球免費(fèi)的聲音素材網(wǎng)站，如圖6-17所示，它把很多平臺(tái)免費(fèi)的資源進(jìn)行了整合，音效素材非常豐富，其缺點(diǎn)是下載音效要跳轉(zhuǎn)到不同的網(wǎng)站上去。Section6.2動(dòng)效設(shè)計(jì)：打造H5頁面交互體驗(yàn)感本節(jié)介紹利用動(dòng)效設(shè)計(jì)來打造H5頁面交互體驗(yàn)感的方法。Section6.2.1優(yōu)化H5頁面動(dòng)畫在制作H5時(shí)，要把握好圖層的前后關(guān)系。對(duì)于底層的素材，我們?cè)谠O(shè)置動(dòng)畫的時(shí)候會(huì)使其優(yōu)先進(jìn)入，對(duì)于頂層的素材的動(dòng)畫，按照?qǐng)D層的前后關(guān)系循序漸進(jìn)地設(shè)置，切記不要讓素材一窩蜂地直接進(jìn)入，那樣會(huì)導(dǎo)致畫面混亂，容易喧賓奪主。要實(shí)現(xiàn)正確的效果，我們只需要設(shè)置素材動(dòng)畫的延遲時(shí)間即可。大家可根據(jù)自身的制作習(xí)慣去設(shè)置素材動(dòng)畫的時(shí)間，筆者一般直接設(shè)置為1，如果想要使素材緩慢地進(jìn)入畫面中，可以設(shè)置為2或1.5等。對(duì)于次數(shù)的設(shè)置，大多數(shù)元素會(huì)直接默認(rèn)為1次，如果需要強(qiáng)調(diào)該元素，可以根據(jù)自身設(shè)計(jì)情況去設(shè)置動(dòng)畫次數(shù)和是否循環(huán)播放等。Section6.2.2翻頁動(dòng)畫H5由一個(gè)一個(gè)的頁面組成，所以會(huì)涉及翻頁動(dòng)畫。在易企秀里，翻頁動(dòng)畫是多樣的，我們可以為每一頁設(shè)置一樣的翻頁動(dòng)畫，也可以設(shè)置不一樣的翻頁動(dòng)畫，可根據(jù)實(shí)際情況去設(shè)置。翻頁動(dòng)畫分為常規(guī)翻頁和特殊翻頁。常規(guī)翻頁動(dòng)畫可分為上下翻頁和左右翻頁，常用的是上下翻頁。特殊翻頁動(dòng)畫比較有藝術(shù)感，讀者可以去嘗試使用這種動(dòng)畫，對(duì)于特定行業(yè)的H5，或一些藝術(shù)類、卡通類H5，我們會(huì)用到特殊翻頁動(dòng)畫。Section6.2.3頁面元素動(dòng)畫頁面元素動(dòng)畫是在H5的每一頁為每一頁的每個(gè)元素都加上特定的動(dòng)作方式，可以根據(jù)頁面的整體元素的動(dòng)畫風(fēng)格和單個(gè)元素的獨(dú)特風(fēng)格依次設(shè)置元素的動(dòng)畫。易企秀H5的動(dòng)畫分為進(jìn)入動(dòng)畫、強(qiáng)調(diào)動(dòng)畫、退出動(dòng)畫。進(jìn)入動(dòng)畫是每個(gè)元素進(jìn)入頁面時(shí)的動(dòng)畫，可以設(shè)置元素的動(dòng)畫時(shí)間、延遲時(shí)間、動(dòng)畫次數(shù)等。從字面意思來看，強(qiáng)調(diào)動(dòng)畫的作用是強(qiáng)調(diào)該元素。在你認(rèn)為某個(gè)元素相對(duì)比較重要的時(shí)候，可以為該元素設(shè)置一個(gè)二次強(qiáng)調(diào)動(dòng)畫。這里值得注意的是，強(qiáng)調(diào)動(dòng)畫包含幾個(gè)軌跡動(dòng)畫：直線軌跡、曲線軌跡、自由軌跡。我們?cè)谠O(shè)置軌跡動(dòng)畫時(shí)，需要手動(dòng)繪制代表動(dòng)畫軌跡的線條。6.2.3頁面元素動(dòng)畫Section如果某個(gè)元素進(jìn)入畫面中，但你不想讓它長(zhǎng)期停留在該頁面，就可以給它設(shè)置一個(gè)退出動(dòng)畫。被設(shè)置了退出動(dòng)畫的元素在前端展示的時(shí)候不會(huì)呈現(xiàn)，但是在易企秀的編輯器里會(huì)顯示，所以在制作的時(shí)候，我們一定要確定這個(gè)被設(shè)置上退出動(dòng)畫的元素，以免頁面出錯(cuò)。Section6.2.4運(yùn)用GIF動(dòng)畫特效打造視覺效果在制作一些比較高級(jí)、炫酷的H5場(chǎng)景的時(shí)候，可能會(huì)運(yùn)用到背景GIF動(dòng)畫特效。背景GIF動(dòng)畫特效不僅能提升整個(gè)畫面的質(zhì)感和氛圍感，還可增加畫面的靈動(dòng)性，使得畫面更專業(yè)、更高級(jí)。我們?cè)谥谱鬟@個(gè)背景GIF動(dòng)畫特效的時(shí)候，可以用PS和AE，也可以用易企秀素材庫的GIF動(dòng)效背景素材。GIF動(dòng)效背景圖片常應(yīng)用于企業(yè)宣傳、邀請(qǐng)函、招聘廣告等中。我們制作好后，上傳背景圖片，單擊“背景應(yīng)用于所有頁面”按鈕即可將該背景圖片應(yīng)用于整個(gè)H5。Section6.2.5實(shí)戰(zhàn)案例：使用易企秀制作H5動(dòng)效頁面資源位置素材位置素材文件>CH06>6.2.5實(shí)戰(zhàn)案例：制作復(fù)雜H5視頻位置視頻文件>CH06>6.2.5實(shí)戰(zhàn)案例：制作復(fù)雜H5.mp4設(shè)計(jì)說明本案例根據(jù)本節(jié)介紹的動(dòng)畫內(nèi)容，制作邀請(qǐng)函首頁動(dòng)效頁面，內(nèi)含各種元素的動(dòng)畫、GIF炫酷背景圖片。本案例作品的風(fēng)格是大氣商務(wù)綠金鎏金風(fēng)格，可應(yīng)用于制作各類商務(wù)活動(dòng)和論壇峰會(huì)的邀請(qǐng)函。Section6.3高級(jí)互動(dòng)組件：打造炫酷H5本節(jié)介紹利用高級(jí)互動(dòng)組件來打造炫酷H5的方法。Section6.3.1運(yùn)用一鏡到底、快閃功能1．一鏡到底一鏡到底是易企秀的一個(gè)高級(jí)組件，應(yīng)用廣泛。我們新建一個(gè)頁面，選擇組件里的一鏡到底。打開此組件后，默認(rèn)會(huì)添加3個(gè)頁面，不能少于3頁。我們可以根據(jù)實(shí)際情況增加頁面。在易企秀H5中，使用一鏡到底組件可以提升整個(gè)H5的互動(dòng)感，讓用戶瀏覽到此頁面時(shí)，感覺深陷其中，一鏡到底頁面會(huì)將用戶拉到H5的場(chǎng)景當(dāng)中。一鏡到底頁面的視覺沖擊感極強(qiáng)，制作好的一鏡到底頁面，能讓用戶一眼看到最后一個(gè)頁面的內(nèi)容，提升整體的視覺質(zhì)感。在制作一鏡到底頁面時(shí)應(yīng)該注意，頁面不宜過多，元素不能過多，最好不要使用動(dòng)效圖，從而避免用戶在用手機(jī)打開H5

的時(shí)候出現(xiàn)卡頓的現(xiàn)象，導(dǎo)致一鏡到底頁面無法正常播放。Section6.3.1運(yùn)用一鏡到底、快閃功能2．快閃快閃頁面的應(yīng)用更為廣泛，幾乎每一頁H5都帶有一些快閃頁面?？扉W頁面可以設(shè)置為快速播放的動(dòng)畫效果，也可以用切換比較緩慢的方式呈現(xiàn)。選擇快閃組件，默認(rèn)會(huì)添加3頁（不能少于3頁），可根據(jù)需要增加頁面。在H5中，可以直接添加純文字的快閃內(nèi)容，也可以添加以圖文方式呈現(xiàn)的快閃內(nèi)容。當(dāng)然，應(yīng)該根據(jù)你所制作的作品的屬性去選擇合適的快閃內(nèi)容。Section6.3.2怎樣運(yùn)用一鏡到底在運(yùn)用一鏡到底的時(shí)候，我們一定要根據(jù)整個(gè)H5的風(fēng)格去選擇適當(dāng)?shù)脑刈鳛橐荤R到底的輔助內(nèi)容，比如，在制作中國(guó)風(fēng)的H5中，一鏡到底的內(nèi)容應(yīng)該是中國(guó)風(fēng)。制作炫酷純背景版的H5時(shí)，一鏡到底的內(nèi)容應(yīng)該是比較簡(jiǎn)單的；制作小清新風(fēng)格的H5時(shí)，一鏡到底內(nèi)容中應(yīng)該選擇小清新的元素。Section6.3.2怎樣運(yùn)用一鏡到底在制作一鏡到底元素的時(shí)候，一定要對(duì)元素進(jìn)行鏤空處理，鏤空的位置一定要在視覺中心，否則在播放的時(shí)候就沒有一鏡到底的視覺效果了。Section6.3.2怎樣運(yùn)用一鏡到底在制作一鏡到底的最后一頁時(shí)，其中的內(nèi)容相較前面頁面的要有所變化。最后一頁的內(nèi)容應(yīng)該設(shè)置為該一鏡到底頁面最終想要展示的主要內(nèi)容。Section6.3.3設(shè)置動(dòng)畫時(shí)間在設(shè)置快閃時(shí)間時(shí)，我們可以把時(shí)間設(shè)置得長(zhǎng)一些，讓元素動(dòng)畫慢一點(diǎn)，當(dāng)然，這主要適用于頁面包含的文字較多的情況，元素動(dòng)畫慢才能讓用戶清楚地看到每一個(gè)快閃頁面中的文字，這種快閃被筆者稱為慢動(dòng)畫類快閃。如果文字較少且需要實(shí)現(xiàn)讓人震撼的快閃效果，我們可以把動(dòng)畫時(shí)間設(shè)置得短一些，相對(duì)應(yīng)地，頁面跳轉(zhuǎn)的速度會(huì)加快，這種快閃被筆者稱為快動(dòng)畫類快閃。Section6.3.3設(shè)置動(dòng)畫時(shí)間可以看到，在制作快閃頁面時(shí)，都設(shè)置了二次動(dòng)畫，即一個(gè)進(jìn)入動(dòng)畫和一個(gè)退出動(dòng)畫。這樣做是為了讓快閃頁面具有動(dòng)作上的連貫性。為了避免動(dòng)畫沒顯示完就跳轉(zhuǎn)到下一頁的快閃內(nèi)容，可以在空白頁面增加一個(gè)在前端看不見的元素，給它設(shè)置一個(gè)具有一定延遲時(shí)間的動(dòng)畫，這樣我們?cè)O(shè)置的快閃動(dòng)畫內(nèi)容就能清楚地呈現(xiàn)在前端。Section6.3.4運(yùn)用智能組件我們可以在商店開業(yè)、活動(dòng)宣傳、婚禮邀請(qǐng)函、活動(dòng)促銷、節(jié)日祝福等H5場(chǎng)景用上紅包和打賞功能。Section6.3.4運(yùn)用智能組件我們可以在邀請(qǐng)函、企業(yè)宣傳、招聘、培訓(xùn)招生等H5場(chǎng)景用上立體魔方、實(shí)時(shí)對(duì)話等功能。在活動(dòng)促銷、活動(dòng)宣傳等H5場(chǎng)景用上抽獎(jiǎng)功能。Section6.3.5添加特效在一些H5場(chǎng)景中，我們經(jīng)?？梢钥吹綇捻撁嫔戏斤h落下來的元寶、雪花、花瓣等特效，這些是飄落物特效。飄落物特效可以在易企秀編輯器內(nèi)設(shè)置，飄落物圖片可以直接使用易企秀官方提供的，也可以自定義。Section6.3.5添加特效其余的涂抹、指紋、漸變、重力感應(yīng)、砸玻璃特效是頁面入場(chǎng)特效。設(shè)置了這些特效以后，根據(jù)提示進(jìn)行對(duì)應(yīng)操作，才開始播放作品的內(nèi)容。Section6.3.6運(yùn)用彈幕在易企秀中，彈幕是留言板的一種形式。當(dāng)用戶瀏覽到設(shè)置了彈幕組件的頁面時(shí)，用戶可以點(diǎn)擊小筆在留言板中留下想說的話。這個(gè)組件可以很好地增加H5與用戶或客戶的互動(dòng)，運(yùn)用廣泛。要設(shè)置彈幕組件可以直接在編輯器組件里選擇彈幕，然后設(shè)置好彈幕顏色等，再將彈幕組件放到合適的位置。Section觸發(fā)功能是易企秀中一個(gè)重要的互動(dòng)功能，只要能夠熟練掌握該功能的運(yùn)用方法，制作各類互動(dòng)性的H5都不在話下。本案例采用藍(lán)綠色簡(jiǎn)約商務(wù)風(fēng)格，大氣耐看，適用于物業(yè)公司、互聯(lián)網(wǎng)公司、商業(yè)公司等所用的手機(jī)版微官網(wǎng)。整個(gè)H5運(yùn)用易企秀內(nèi)鏈觸發(fā)功能設(shè)計(jì)，讓用戶一點(diǎn)擊按鈕就直接跳轉(zhuǎn)到相應(yīng)的頁面。6.3.7運(yùn)用觸發(fā)功能Section在易企秀編輯器中，輪播圖的樣式多樣，可根據(jù)需要去選擇。輪播圖組件適用于所有H5，當(dāng)圖片比較多的時(shí)候，就可以用到。使用輪播圖展示的內(nèi)容清晰明了，讓用戶一目了然。6.3.8運(yùn)用輪播圖Section6.3.8運(yùn)用輪播圖在輪播圖組件中可以根據(jù)圖片所展示的內(nèi)容為它編輯文字描述。在使用輪播圖組件時(shí)，最值得注意的是圖片的大小。我們需把每張圖片裁切到一樣的大小，可以選擇一個(gè)比例進(jìn)行裁切或自定義裁剪，這樣輪播圖展示的圖片才會(huì)井然有序。輪播圖可以設(shè)置為類似公司網(wǎng)站首屏圖一樣的自動(dòng)切換形式，可運(yùn)用到首頁或內(nèi)頁圖文展示中，實(shí)用性非常強(qiáng)。Section6.4實(shí)戰(zhàn)案例：制作高端創(chuàng)意互動(dòng)H5資源位置素材位置素材文件>CH06>6.4實(shí)戰(zhàn)案例：制作高端創(chuàng)意互動(dòng)H5視頻位置視頻文件>CH06>6.4實(shí)戰(zhàn)案例：制作高端創(chuàng)意互動(dòng)H5.mp4設(shè)計(jì)說明本案例制作的是虎年春節(jié)的祝福賀卡，整體采