01 H5入門知識(shí)課件

第1章H5入門知識(shí)必備H5頁面設(shè)計(jì)與制作目錄Contents1.1

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

優(yōu)秀的H5制作秘籍1.1.1H5的定義H5這個(gè)詞來自HTML5，HTML5（全稱HyperTextMarkupLanguage5）即超文本標(biāo)記語言，是當(dāng)前世界網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。超文本標(biāo)記語言，是以一種用來描述網(wǎng)頁的語言?！俺谋尽笔侵疙撁鎯?nèi)可包含圖片、鏈接、音樂、程序等非文字元素。而“標(biāo)記”指的是這些超文本必須由包含屬性的開頭與結(jié)尾標(biāo)志來標(biāo)記。1.1.2

H5的作用H5作為當(dāng)下移動(dòng)端的主流宣傳方式之一，作用是非常多的，企業(yè)在不用開辟其他的網(wǎng)站的情況下便可以快速獲得用戶流量。1.實(shí)現(xiàn)增粉引流2.增加企業(yè)曝光率樹立企業(yè)形象3.增強(qiáng)用戶的活躍度和粘性1.1.3

H5的特點(diǎn)H5頁面中的元素包括文字、圖片、音樂、視頻、鏈接等多種形式，其具備豐富的控件、靈活的動(dòng)畫特效、強(qiáng)大的交互應(yīng)用以及數(shù)據(jù)分析功能。H5頁面非常適合通過手機(jī)進(jìn)行展示和分享，且靈活性高、制作周期短，因此能夠?qū)崿F(xiàn)高效率低成本的傳播。1.1.4

H5適用的行業(yè)H5種類很多，并具備內(nèi)容豐富、趣味性強(qiáng)、玩法多樣化、不用下載等多重優(yōu)點(diǎn)，可以適應(yīng)各種行業(yè)的不同需求。通過對(duì)比H5模板網(wǎng)站的熱門素材和行業(yè)分類規(guī)律，總結(jié)出的一些對(duì)H5有高頻需求的行業(yè)包括：招聘、新媒體、電商、保險(xiǎn)金融、教育培訓(xùn)、婚禮婚慶、地產(chǎn)中介、廣告?zhèn)髅健⑸願(yuàn)蕵返?，?.1.5

H5應(yīng)用類型常見的H5包括產(chǎn)品展示類、品牌傳播類、活動(dòng)營(yíng)銷類、總結(jié)報(bào)告類等。1.產(chǎn)品展示型2.品牌傳播型3.活動(dòng)營(yíng)銷型4.總結(jié)報(bào)告型目錄Contents1.1

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

優(yōu)秀的H5制作秘籍1.2.1明確設(shè)計(jì)目標(biāo)在制作H5頁面之前，首先需要明確制作目標(biāo)。例如，是用于提高品牌知名度、推廣產(chǎn)品、還是吸引用戶注冊(cè)等。同時(shí)，還需要了解目標(biāo)受眾的特點(diǎn)，如年齡、性別、職業(yè)等，明確目標(biāo)和需求有助于制定更具針對(duì)性的頁面設(shè)計(jì)。1.2.2內(nèi)容策劃設(shè)計(jì)目標(biāo)確定好以后，便可以策劃H5的具體內(nèi)容了。1.策劃方向設(shè)計(jì)者在策劃內(nèi)容時(shí)需要先明卻方向，通?？梢詮膬?nèi)容、交互以及視覺3個(gè)方向著手。2.策劃關(guān)鍵有了策劃方向，還應(yīng)該遵守策劃的五個(gè)關(guān)鍵點(diǎn)：社交性、故事性、參與感、話題性、互動(dòng)性。1.2.3

頁面設(shè)計(jì)在設(shè)計(jì)H5頁面結(jié)構(gòu)時(shí)需要先確定風(fēng)格，根據(jù)風(fēng)格來搜集素材，設(shè)計(jì)頁面結(jié)構(gòu)，然后選擇合適的模板或框架，設(shè)計(jì)頁面內(nèi)容和樣式。1.確定風(fēng)格2.搜集素材3.設(shè)計(jì)頁面結(jié)構(gòu)4.選擇合適的模板或框架5.設(shè)計(jì)頁面內(nèi)容和樣式1.2.4交互設(shè)計(jì)使用模板制作的H5通常已經(jīng)包含了良好的交互效果。如果設(shè)計(jì)者是使用圖像工具全新設(shè)計(jì)的H5頁面，則需要添加動(dòng)畫、音效活動(dòng)等內(nèi)容。優(yōu)化頁面性能。通過添加交互效果和動(dòng)畫，可以增強(qiáng)頁面的吸引力和用戶體驗(yàn)。1.2.5生成與發(fā)布H5頁面制作完成后，可以先對(duì)效果進(jìn)行預(yù)覽，然后將頁面發(fā)布到線上并進(jìn)行推廣。可以通過二維碼或鏈接將頁面嵌入到電子商務(wù)網(wǎng)站、微信公眾號(hào)、APP等平臺(tái)中，通過各種渠道引導(dǎo)用戶訪問和使用。目錄Contents1.1

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

優(yōu)秀的H5制作秘籍1.3.1

圖像處理工具Photoshop是一款功能強(qiáng)大的圖像處理軟件，它被廣泛的應(yīng)用于各種設(shè)計(jì)領(lǐng)域，其中也包含H5設(shè)計(jì)領(lǐng)域。利用Photoshop軟件可以對(duì)H5頁面布局進(jìn)行設(shè)計(jì)，包括頁面背景、圖片素材、裝飾素材等。在用Photoshop軟件設(shè)計(jì)H5頁面時(shí)，需注意頁面尺寸設(shè)置。因?yàn)樵O(shè)計(jì)的H5頁面最終是需要導(dǎo)入到H5制作平臺(tái)中，所以在用Photoshop設(shè)計(jì)前，先了解所用H5工具規(guī)定的頁面大小。以人人秀平臺(tái)為例，導(dǎo)入PSD畫布大小為640px×1240px，文件大小不超過30M。1.3.2矢量圖設(shè)計(jì)工具對(duì)于制作矢量圖形來說，用Illustrator軟件要比Photoshop軟件方便的多。因?yàn)镮llustrator是一款專業(yè)的矢量設(shè)計(jì)軟件，主要用于插畫設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、文字設(shè)計(jì)等方面，這些圖形在H5中也是經(jīng)常要用到的。用戶還可使用一些便捷的矢量小工具來進(jìn)行快速繪制。例如Pixso、Sketch等，這些小工具會(huì)自帶很多矢量圖形的模板，用戶可在模板的基礎(chǔ)上進(jìn)行二次編輯，使其符合制作需求。1.3.3影視后期制作工具AfterEffects（簡(jiǎn)稱AE）是一款專業(yè)的視頻特效制作軟件。利用AE可創(chuàng)建各種酷炫的視覺效果，讓H5的內(nèi)容更加吸睛。使用AE軟件是需要有影視后期基礎(chǔ)的，如果是零基礎(chǔ)或者是剛?cè)腴T的新手，建議可以用一些輕量化、好操作的小工具。例如，剪映就是時(shí)下較為熱門的視頻剪輯工具之一。1.3.4音頻處理工具AdobeAudition是一款功能強(qiáng)大的音頻處理軟件。它可進(jìn)行音頻錄制、音頻編輯、聲音去噪、音頻轉(zhuǎn)換等功能，讓聲音文件更好的融入到H5內(nèi)容中。除此之外，GoldWave、Audacity、SoundForge等軟件也可以很好的處理音頻文件。1.3.5

H5制作平臺(tái)利用以上工具所制作的文件最終是要導(dǎo)入至H5平臺(tái)中，生成一份完整的H5頁面才可。目前常用的H5制作平臺(tái)有易企秀、人人秀、MAKA等。這類平臺(tái)操作起來比較簡(jiǎn)單，適合新手使用。平臺(tái)都會(huì)提供大量的模板和素材庫，以節(jié)省用戶制作時(shí)間。1.3.6

H5專業(yè)設(shè)計(jì)平臺(tái)對(duì)于新手來說，用以上H5平臺(tái)是可以套用相應(yīng)的模板進(jìn)行快速制作。而對(duì)于有設(shè)計(jì)基礎(chǔ)的設(shè)計(jì)師而言，可以使用專業(yè)的H5制作平臺(tái)來設(shè)計(jì)內(nèi)容。例如意派Epub360、iH5等。這些平臺(tái)功能比較全面，操作靈活度很高，可以更好的滿足設(shè)計(jì)需求。目錄Contents1.1

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

優(yōu)秀的H5制作秘籍1.4.1

H5頁面設(shè)計(jì)規(guī)范在開始制作H5之前，需要掌握H5的制作規(guī)范及相關(guān)的設(shè)計(jì)原則，以保證H5內(nèi)容能夠正常顯示，同時(shí)也能夠?qū)⑵鋬?nèi)容進(jìn)行準(zhǔn)確的傳播。1.手機(jī)界面尺寸設(shè)置H5主要是通過移動(dòng)設(shè)備來查看的，在設(shè)計(jì)H5頁面時(shí)必須要在設(shè)備的物理特性和軟件特性的基礎(chǔ)上進(jìn)行合理設(shè)計(jì)。以手機(jī)設(shè)備為例，目前手機(jī)設(shè)備分ios（iPhoneOperatingSystem）和Android（安卓）兩種。設(shè)備類型不同，其屏幕分辨率也不同。2.H5頁面設(shè)計(jì)原則在進(jìn)行具體設(shè)計(jì)前，需掌握一些頁面的設(shè)計(jì)原則，以便更好的傳播所要表達(dá)的內(nèi)容。1.4.2好的H5作品的特征優(yōu)秀的H5作品應(yīng)該是以內(nèi)容為主，設(shè)計(jì)為輔，兩者相輔相成。下面將簡(jiǎn)單的分析一下好的H5應(yīng)當(dāng)具備哪些特征。1.選題的受眾面廣2.用心的文案策劃3.互動(dòng)性很強(qiáng)4.弱化營(yíng)銷1.4.3設(shè)計(jì)人員應(yīng)具備的能力作為一名優(yōu)秀的H5設(shè)計(jì)人員，至少需要具備以下幾種能力。1.創(chuàng)新思維能力具有創(chuàng)新思維是H5設(shè)計(jì)師必需具備的基本素養(yǎng)。2.有扎實(shí)設(shè)計(jì)表現(xiàn)力具有創(chuàng)新思