2.1 H5的制作工具和工具組合形式

在H5的設(shè)計(jì)過程中，根據(jù)設(shè)計(jì)要求的類別，設(shè)計(jì)師可以選取針對性強(qiáng)且自身所能夠掌握的工具進(jìn)行組合搭配設(shè)計(jì)，以大大提高工作效率，并完成所需要的效果，達(dá)到高效、精確。接下來詳細(xì)介紹如何正確選擇H5的制作工具和工具組合形式。

2.1.1 開發(fā)類H5制作工具

在制作帶有開發(fā)的設(shè)計(jì)案例時，根據(jù)設(shè)計(jì)要求的簡易程度，我們可以采用兩種不同的組合形式來搭配設(shè)計(jì)。如果設(shè)計(jì)要求常規(guī)簡單，可以采用Photoshop＋Keynote/PowerPoint（PPT）的組合搭配形式。Photoshop負(fù)責(zé)用來設(shè)計(jì)畫面及元素，Keynote/PowerPoint（PPT）負(fù)責(zé)用來做演示，并與前端工程師溝通。

Photoshop，全稱“Adobe Photoshop”，簡稱“PS”，其在Adobe的產(chǎn)品線里是個極為強(qiáng)大的綜合應(yīng)用軟件，對于每個設(shè)計(jì)師來說都不會陌生。伴隨著H5的興起，設(shè)計(jì)師們逐漸發(fā)現(xiàn)在H5領(lǐng)域中，PS可以稱為“萬能工具”。以往PS常常用于矢量圖像的繪制以及圖像處理，而對聲音或視頻之類的編輯處理都是不可能完成的，但當(dāng)Photoshop CC發(fā)布之后，新增的“時間軸”功能使PS不但可以用于矢量圖像的繪制，而且還能夠?qū)σ曨l和聲音進(jìn)行編輯，添加一定難度的動效和簡單的特效命令，而恰好這些基本的操作就可以滿足設(shè)計(jì)H5的常規(guī)需求。如圖2-1所示，為Adobe Photoshop CC啟動頁面。

如圖2-2所示，為使用PS制作的靜態(tài)展示類H5頁面效果。

Keynote/PowerPoint（PPT）可以說是最簡單的原型演示工具。Keynote是2003年，蘋果公司推出的適用于Mac操作系統(tǒng)的一款演示幻燈片應(yīng)用軟件，與PowerPoint（PPT）不同的是，這款軟件能夠使頁面和設(shè)計(jì)更圖形化，因其操作簡單，功能繁多，像BAT這樣的知名企業(yè)都在用，以及蘋果公司自身的WWDC開發(fā)者大會都是采用Keynote進(jìn)行效果演示，如圖2-3所示。但秉承著蘋果一貫的風(fēng)格，這款軟件只有在Mac系統(tǒng)中可以使用，如果您是PC用戶，也可以使用PowerPoint（PPT）來做輔助的效果演示。

PowerPoint，全稱“Microsoft Office PowerPoint”，簡稱“PPT”，是由微軟公司開發(fā)構(gòu)造的一款演示文稿軟件，而使用PPT做出來的東西就叫作演示文稿，其中俗稱的“幻燈片”就是演示文稿中的每一頁。演示文稿可以在投影儀或計(jì)算機(jī)上進(jìn)行演示，也可以打印制作成膠片應(yīng)用到更廣泛的領(lǐng)域中。

如果設(shè)計(jì)要求非常復(fù)雜，除了簡單的畫面及元素，還要添加視頻、特效和音效時，可以采用Photoshop＋I(xiàn)llustrator＋Final Cut Pro/Garage Band/Premiere＋Keynote/PowerPoint（PPT）的組合搭配形式。

Photoshop和Illustrator負(fù)責(zé)完成設(shè)計(jì)畫面和字體；Final Cut Pro/Garage Band/Premiere負(fù)責(zé)完成視頻、聲音的剪輯；Keynote/PowerPoint（PPT）同樣是用來做演示，并與前端工程師溝通。

Final Cut Pro是蘋果公司所開發(fā)的一款專業(yè)視頻非線性編輯軟件，其包含了進(jìn)行后期制作所需的一切功能。如果您是蘋果系統(tǒng)用戶，推薦使用Final Cut Pro，學(xué)習(xí)成本相對較低。

Premiere，全稱“Adobe Premiere”，簡稱“PR”，是由Adobe公司推出的一款常用的視頻編輯軟件，因其較好的兼容性，使得可以與Adobe其他產(chǎn)品線的軟件相互協(xié)作，同時易學(xué)、高效、精確的優(yōu)點(diǎn)，也成為視頻剪輯時的不二選擇，也是PC用戶的黃金搭檔，如圖2-4所示。

2.1.2 網(wǎng)站類H5制作工具

同樣，對于網(wǎng)站類H5，在內(nèi)容表現(xiàn)簡單時，我們可以采用Photoshop＋H5模板工具網(wǎng)站的組合搭配形式。Photoshop負(fù)責(zé)完成設(shè)計(jì)畫面，并存成PNG格式圖片，然后上傳到H5模板工具網(wǎng)站，利用網(wǎng)站來生成H5頁面。

在內(nèi)容表現(xiàn)復(fù)雜時，我們可以采用Photoshop＋I(xiàn)llustrator＋Final Cut Pro＋H5模板工具網(wǎng)站的組合搭配形式。Photoshop＋I(xiàn)llustrator負(fù)責(zé)設(shè)計(jì)出需要分層的PNG圖，F(xiàn)inal Cut Pro負(fù)責(zé)制作所需的聲音和音頻，最后通過H5模板工具網(wǎng)站來生成最終的效果。

在移動互聯(lián)網(wǎng)時代，H5已經(jīng)越來越被有眼光的人看重，與此同時，各種H5制作平臺和工具也相應(yīng)產(chǎn)生，為新來的H5營銷人員提供了大量的創(chuàng)作工具。對于H5營銷人員來說，需要了解這些平臺的特征，才能在營銷過程中讓它們更好地為自己所用，從而更快、更好地創(chuàng)作出更多優(yōu)秀的H5營銷方案，下面介紹幾種常用的網(wǎng)站類H5制作工具。

1. 凡科互動

凡科互動是一個專注微營銷新玩法的創(chuàng)新型企業(yè)，為企業(yè)用戶提供多元、高效、易用的互聯(lián)網(wǎng)工具，增加其曝光、提升轉(zhuǎn)化，其主頁如圖2-5所示。

凡科互動平臺的主要功能如圖2-6所示。

凡科互動的主要特色是游戲互動營銷，通過將企業(yè)品牌軟性植入游戲中，讓用戶在有趣的娛樂互動中接受品牌，從而提高銷售轉(zhuǎn)化率。

2. 視界互動

視界互動是國內(nèi)H5技術(shù)型營銷的領(lǐng)跑者，為企業(yè)帶來各種形式的H5創(chuàng)意設(shè)計(jì)與定制開發(fā)，為廣大中小企業(yè)量身打造一站式的高性價(jià)比營銷推廣方案，其主頁如圖2-7所示。

視界互動的業(yè)務(wù)范圍主要包括H5、VR、內(nèi)容服務(wù)、互聯(lián)網(wǎng)整合營銷以及綜合平臺推廣等。其中，H5營銷的業(yè)務(wù)如圖2-8所示。

3. 人人秀

人人秀（rrxiu.net）可以幫助用戶制作各種H5頁面、微場景、創(chuàng)意海報(bào)、微雜志、微信邀請函、場景應(yīng)用、微信賀卡，即使是不懂設(shè)計(jì)、不會編程的新手，也可以快速上手，如圖2-9所示。

人人秀的主要功能和特色如圖2-10所示。

人人秀的“產(chǎn)品中心”中提供了100多種營銷插件，如微信紅包、大轉(zhuǎn)盤抽獎、照片投票、VR全景、微信卡券、問卷調(diào)查以及各種小游戲等，用戶通過簡單的拖曳操作，即可輕松調(diào)用這些插件，實(shí)現(xiàn)更好的營銷功能，如圖2-11所示。

在“模板商店”頁面中，人人秀按照H5的用途、行業(yè)、功能和活動費(fèi)用進(jìn)行分類，導(dǎo)航功能非常全面、清晰，而且還支持自由搜索功能，如圖2-12所示。同時，針對新用戶和企業(yè)會員等不同層次的用戶，還提供了相關(guān)的福利，極大地增加了對用戶的吸引力。

在“作品秀”頁面中，列出了很多互聯(lián)網(wǎng)、影視、銀行、航空、家電以及學(xué)校等不同行業(yè)的優(yōu)秀企業(yè)H5營銷方案，如華為、騰訊、百度、阿里巴巴、口碑網(wǎng)、愛奇藝以及網(wǎng)易等，幫助大家更好地了解和學(xué)習(xí)這些企業(yè)的H5營銷特色。

另外，人人秀的“歡樂現(xiàn)場”版塊為用戶帶來了一站式的現(xiàn)場活動營銷服務(wù)，主要服務(wù)如圖2-13所示。

“歡樂現(xiàn)場”適用于年會、會議、酒吧、婚禮、商業(yè)活動、培訓(xùn)、賽事、校園等不同的場景，為企業(yè)帶來線上線下的全方位營銷方案。

在人人秀平臺發(fā)布作品成功后，會自動跳轉(zhuǎn)至分享推廣界面，人人秀系統(tǒng)將會從作品豐富度、功能豐富度、作品安全性、瀏覽流暢度以及版權(quán)完整度等多個方面對你的作品進(jìn)行一個綜合測評，助你更好地修改和完善作品。

2.1.3 輔助類H5制作工具

隨著H5的發(fā)展，頁面的要求水準(zhǔn)已越來越高，通常設(shè)計(jì)一份好的H5作品除了需要一些常用的設(shè)計(jì)工具以外，輔助工具也是必不可少的。下面介紹幾種設(shè)計(jì)H5時常用的輔助工具。

1. 聲音/視頻壓縮工具

作為一個便攜性、小容量的H5頁面，視頻、音效的添加大小也受到了限制，過大的視頻、音效會導(dǎo)致整個頁面數(shù)據(jù)過于龐大，加載緩慢，那么聲音、視頻壓縮工具就對整個頁面的音頻起到了很大的輔助作用。

通常我們會使用PC的格式工廠、Mac的Video Converter和Garage Band（隨身錄音室）等小工具壓縮音頻，并將其植入到H5作品中。如圖2-14所示為格式工廠的工作頁面。

【專家提醒】

格式工廠的作用范圍不僅僅是能夠壓縮音頻，還可以對不同頁面使用的音頻進(jìn)行相對應(yīng)的格式轉(zhuǎn)換，方便頁面加載音頻。

2. 圖片壓縮工具

圖片的大小與聲音、視頻的大小存在一樣的問題，都是需要對過大的文件進(jìn)行壓縮才能植入H5頁面。在H5設(shè)計(jì)過程中，最常用的圖片壓縮網(wǎng)站是：https://tinypng.com/，以及一款騰訊出品的壓縮工具平臺——智圖（http://zhitu.isux.us/），如圖2-15所示。

3. 二維碼生成工具

隨著H5的演變，其已經(jīng)成為涵蓋領(lǐng)域非常廣泛的一種傳播媒介，大多數(shù)的H5也成為廣告推廣的一個平臺，那么作為一個廣告推廣頁面，主頁的企業(yè)集團(tuán)二維碼則是必不可少的。很多互聯(lián)網(wǎng)公司正是發(fā)現(xiàn)了這一點(diǎn)，從而推出了非常多的二維碼生成工具，在這里比較常用的工具有微微和草料等，但有一部分高級功能是需要收費(fèi)使用的。

如圖2-16所示，為草料二維碼生成器的網(wǎng)站頁面。

4. Ps Play

大多數(shù)的簡單H5效果都是用Adobe Photoshop CC制作出來的，但因?yàn)镻C端軟件的限制及不易攜帶性，從而演化出了在手機(jī)端能夠方便瀏覽Photoshop設(shè)計(jì)效果的移動軟件——Ps Play。該軟件還可以在預(yù)覽設(shè)計(jì)效果時，同步調(diào)試并截圖保存到手機(jī)端，直接運(yùn)用微信和E-mail等工具進(jìn)行分享，如圖2-17所示。