01 H5入門知識課件

第1章H5入門知識必備H5頁面設計與制作目錄Contents1.1

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

優(yōu)秀的H5制作秘籍1.1.1H5的定義H5這個詞來自HTML5，HTML5（全稱HyperTextMarkupLanguage5）即超文本標記語言，是當前世界網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。超文本標記語言，是以一種用來描述網頁的語言。“超文本”是指頁面內可包含圖片、鏈接、音樂、程序等非文字元素。而“標記”指的是這些超文本必須由包含屬性的開頭與結尾標志來標記。1.1.2

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

H5的特點H5頁面中的元素包括文字、圖片、音樂、視頻、鏈接等多種形式，其具備豐富的控件、靈活的動畫特效、強大的交互應用以及數據分析功能。H5頁面非常適合通過手機進行展示和分享，且靈活性高、制作周期短，因此能夠實現高效率低成本的傳播。1.1.4

H5適用的行業(yè)H5種類很多，并具備內容豐富、趣味性強、玩法多樣化、不用下載等多重優(yōu)點，可以適應各種行業(yè)的不同需求。通過對比H5模板網站的熱門素材和行業(yè)分類規(guī)律，總結出的一些對H5有高頻需求的行業(yè)包括：招聘、新媒體、電商、保險金融、教育培訓、婚禮婚慶、地產中介、廣告?zhèn)髅?、生活娛樂等，?.1.5

H5應用類型常見的H5包括產品展示類、品牌傳播類、活動營銷類、總結報告類等。1.產品展示型2.品牌傳播型3.活動營銷型4.總結報告型目錄Contents1.1

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

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

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

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

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

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

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

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

了解H51.2

H5的策劃與制作流程1.3

H5制作工具介紹1.4

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

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