本期分享從文案策劃到交互設(shè)計(jì)共包含19個(gè)工具/網(wǎng)站，把控你的H5制作。

關(guān)于H5制作流程
筆者接觸的H5制作輔助制作工作基本構(gòu)成分為文案策劃、設(shè)計(jì)交流學(xué)習(xí)、制圖、視頻編輯與剪輯、原型、H5動(dòng)效/動(dòng)畫(huà)制作、圖片/音視頻壓縮、素材存檔，所以中間所使用的的工具也是這些。

注：分享的有一些軟件需下載，有標(biāo)注，無(wú)標(biāo)注基本上是在線網(wǎng)站。

文案策劃

數(shù)英網(wǎng)-數(shù)字媒體及職業(yè)招聘網(wǎng)站

介紹：

數(shù)英網(wǎng)是一個(gè)數(shù)字營(yíng)銷(xiāo)媒體平臺(tái)，內(nèi)容涵蓋市場(chǎng)營(yíng)銷(xiāo)、廣告?zhèn)髅健?chuàng)意設(shè)計(jì)、電商、移動(dòng)互聯(lián)網(wǎng)等各數(shù)字相關(guān)領(lǐng)域，并且進(jìn)行熱門(mén)項(xiàng)目推薦，平臺(tái)還包含了人才招聘和社區(qū)版塊，用戶(hù)可通過(guò)平臺(tái)查找合適招聘信息，也可在社區(qū)發(fā)布動(dòng)態(tài)或關(guān)注他人。

推薦理由：

數(shù)英網(wǎng)是一個(gè)比較不錯(cuò)的綜合平臺(tái)，無(wú)論是熱門(mén)的話(huà)題、品牌活動(dòng)、刷屏的文案都可以找到對(duì)應(yīng)的板塊，還有單獨(dú)的大廠的優(yōu)秀的H5項(xiàng)目分享，是營(yíng)銷(xiāo)媒體人必上網(wǎng)站之一。

TOPYS | 全球頂尖創(chuàng)意分享平臺(tái) OPEN YOUR MIND

介紹：

作為中國(guó)成立最早、最受歡迎的創(chuàng)意垂直網(wǎng)站,TOPYS立志打造一個(gè)多元、完備的泛創(chuàng)意知識(shí)產(chǎn)品系統(tǒng)和學(xué)習(xí)平臺(tái),試圖成為“A Creative Institution”,希望借由創(chuàng)意的學(xué)習(xí)……

推薦理由：

作為全球頂尖創(chuàng)意分享平臺(tái)，每個(gè)創(chuàng)意、視覺(jué)、文案都很讓人驚艷，十分推薦。

視覺(jué)交流學(xué)習(xí)

站酷(ZCOOL) - 設(shè)計(jì)師互動(dòng)平臺(tái)

介紹：

站酷(ZCOOL),中國(guó)設(shè)計(jì)師互動(dòng)平臺(tái)。深耕設(shè)計(jì)領(lǐng)域十二年,站酷聚集了650萬(wàn)設(shè)計(jì)師、攝影師、插畫(huà)師、藝術(shù)家、創(chuàng)意人,設(shè)計(jì)創(chuàng)意群體中具有較高的影響力與號(hào)召力。

推薦理由：

站酷在設(shè)計(jì)師圈子有著超高人氣，匯聚了大批優(yōu)秀設(shè)計(jì)師、攝影師、插畫(huà)師、藝術(shù)家、創(chuàng)意人，每天都有大量的首頁(yè)加精的優(yōu)秀作品分享，是一個(gè)不錯(cuò)的集靈感、設(shè)計(jì)技巧和項(xiàng)目經(jīng)驗(yàn)學(xué)習(xí)和交流為一體的設(shè)計(jì)師平臺(tái)。

UI中國(guó)用戶(hù)體驗(yàn)設(shè)計(jì)平臺(tái)

介紹：

UI 中國(guó),前身為 iconfans,是專(zhuān)業(yè)的用戶(hù)體驗(yàn)設(shè)計(jì)平 臺(tái)。會(huì)員均為職業(yè) UI 設(shè)計(jì)師,覆蓋全國(guó)互聯(lián)網(wǎng)公司。我們將打造中國(guó)最專(zhuān) 業(yè)的 UI 設(shè)計(jì)交流平臺(tái),為 UI 設(shè)計(jì)師……

推薦理由：

UI 中國(guó)與站酷面向人群基本重合，不過(guò)正如品牌名稱(chēng)，特色是突出UI方面領(lǐng)域，傾向官網(wǎng)、APP、H5、小程序UI的用戶(hù)體驗(yàn)設(shè)計(jì)，注重情感表達(dá)在人機(jī)交互中的表現(xiàn)，平臺(tái)定期會(huì)舉辦設(shè)計(jì)教程分享和大賽。

制圖/排版
制圖&修圖：Adobe Photoshop（需下載）

介紹：

Adobe Photoshop，簡(jiǎn)稱(chēng)“PS”，是由Adobe Systems開(kāi)發(fā)和發(fā)行的圖像處理軟件。

推薦理由：

這個(gè)不需要多介紹了吧，一款作圖的軟件，設(shè)計(jì)師吃飯的家伙，我們平常說(shuō)P圖大多是說(shuō)這個(gè)。

矢量圖&排版：Adobe Illustrator（需下載）

介紹：

Adobe illustrator，常被稱(chēng)為“AI”，是一種應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫(huà)的軟件。

推薦理由：

這個(gè)也不需要多介紹了吧，一款排版、制作矢量圖的軟件，做的視覺(jué)無(wú)論放大多少倍都不會(huì)失真，一般配合PS綜合使用。

素材網(wǎng)站
千圖網(wǎng)-免費(fèi)設(shè)計(jì)圖片素材網(wǎng)站

介紹：

千圖網(wǎng)是中國(guó)素材最多的網(wǎng)站之一，擁有800多萬(wàn)張素材。 提供：矢量圖 、psd源文件、圖片素材、網(wǎng)頁(yè)素材、3D模型 素材、手機(jī) APP 素材、 ppt 、畫(huà)冊(cè) 、圖標(biāo)熱門(mén)主流素材下載服務(wù)，千圖網(wǎng)以其獨(dú)特的定位和全新運(yùn)營(yíng)模式，處于素材 網(wǎng)站 領(lǐng)先地位。

推薦理由：

千圖網(wǎng)各類(lèi)素材較多，質(zhì)量整體中等，部分圖標(biāo)、節(jié)日元素、海報(bào)可以作為H5使用，快速短期出平面，建議企業(yè)用戶(hù)，可以商用素材，避免不必要的版權(quán)風(fēng)險(xiǎn)，若自己有原創(chuàng)能力盡量自己PS。

包圖網(wǎng)_專(zhuān)注原創(chuàng)商用設(shè)計(jì)圖片下載

介紹：

包圖網(wǎng)是素材在線交易網(wǎng)站，主要服務(wù)是提供圖片、視頻、音頻、psd 源文件 等形式的素材。包圖網(wǎng)內(nèi)容版塊已有廣告設(shè)計(jì)、攝影圖、字體、UI設(shè)計(jì)、電商淘寶、多媒體、辦公文檔、裝飾·模型、插畫(huà)配圖九大類(lèi)別。

推薦理由：

包圖網(wǎng)與千圖網(wǎng)屬于同類(lèi)網(wǎng)站，但偏向于UI、插畫(huà)等方向，質(zhì)量整體中上，部分圖標(biāo)、節(jié)日元素、海報(bào)可以作為H5使用，建議企業(yè)用戶(hù)，可以商用素材，避免不必要的版權(quán)風(fēng)險(xiǎn)。

**

視頻編輯/剪輯

**
視頻編輯：Adobe After Effects（需下載）

介紹：

Adobe After Effects簡(jiǎn)稱(chēng)“AE”是 Adobe 公司推出的一款圖形視頻處理 軟件，適用于從事設(shè)計(jì)和視頻特技的機(jī)構(gòu)，包括電視臺(tái)、動(dòng)畫(huà)制作公司、個(gè)人后期制作工作室以及多媒體工作室。屬于層類(lèi)型后期軟件。

推薦理由：

同樣是 Adobe 旗下的為設(shè)計(jì)打造的視頻處理處理編輯軟件，利用三維插件和關(guān)鍵幀動(dòng)畫(huà)可以制作出網(wǎng)頁(yè)原生動(dòng)畫(huà)實(shí)現(xiàn)不了的動(dòng)畫(huà)效果，可導(dǎo)出視頻、序列、GIF增加H5的視覺(jué)表現(xiàn)和互動(dòng)效果，制作H5互動(dòng)視頻是個(gè)不錯(cuò)的玩法。

如H5互動(dòng)視頻作品：《王小藝的朋友圈》

視頻剪輯：Adobe Premiere（需下載）

介紹：

Premiere的簡(jiǎn)稱(chēng)，由 Adobe 公司開(kāi)發(fā)是一款常用的視頻編輯 軟件，由 Adobe 公司推出。現(xiàn)在常用的版本有CS4、CS5、CS6、CC 2014、CC 2015、CC 2017、CC 2018 CC2019以及2020版本。Adobe Premiere是一款編輯畫(huà)面質(zhì)量比較好的軟件 ，有較好的兼容性 ，且可以與Adobe公司推出的其他軟件相互協(xié)作。

推薦理由：

十分強(qiáng)大的視頻剪輯軟件，也是Adobe旗下的產(chǎn)品，是如今自媒體人必學(xué)的軟件之一，可以剪輯、配樂(lè)、專(zhuān)場(chǎng)，一般會(huì)配合AE一起使用。

會(huì)聲會(huì)影中文版免費(fèi)下載-會(huì)聲會(huì)影中文官網(wǎng)（需下載）

介紹：

會(huì)聲會(huì)影是 加拿大 Corel公司制作的一款功能強(qiáng)大的視頻編輯 軟件，正版英文名：Corel VideoStudio，具有圖像抓取和編修功能，可以抓取，轉(zhuǎn)換 MV、DV 、V8、TV和實(shí)時(shí)記錄抓取畫(huà)面文件，并提供有超過(guò)100 多種的編制功能與效果，可導(dǎo)出多種常見(jiàn)的視頻格式，甚至可以直接制作成DVD和VCD光盤(pán)。

推薦理由：

平常使用的不多，還是在大學(xué)時(shí)期使用了一些，小白可以很方便制作看起來(lái)有些炫酷的視頻特效與剪輯。

原型設(shè)計(jì)

墨刀- 遠(yuǎn)程辦公好幫手 在線產(chǎn)品原型設(shè)計(jì)與協(xié)作平臺(tái)

介紹：

墨刀是一款在線原型設(shè)計(jì)與協(xié)同工具，借助墨刀，產(chǎn)品經(jīng)理、設(shè)計(jì)師、開(kāi)發(fā)、銷(xiāo)售、運(yùn)營(yíng)及創(chuàng)業(yè)者等用戶(hù)群體，能夠搭建為產(chǎn)品原型，演示項(xiàng)目效果。墨刀同時(shí)也是協(xié)作平臺(tái)，項(xiàng)目成員可以協(xié)作編輯、審閱，不管是產(chǎn)品想法展示，還是向客戶(hù)收集產(chǎn)品反饋，向投資人進(jìn)行Demo展示，或是在團(tuán)隊(duì)內(nèi)部協(xié)作溝通、項(xiàng)目管理。

推薦理由：

產(chǎn)品特色包括素材庫(kù)、設(shè)計(jì)、高效演示及評(píng)審、導(dǎo)入Sketch稿、云端編輯、多人協(xié)作，可以在線制作APP及活動(dòng)頁(yè)面。

H5制作工具

意派?Epub360-專(zhuān)業(yè)H5頁(yè)面在線交互設(shè)計(jì)制作工具

介紹：

意派Epub360隸屬于上海意派科技，是專(zhuān)業(yè)級(jí)的H5交互設(shè)計(jì)平臺(tái)，采用可視化組件編輯，可實(shí)現(xiàn)復(fù)雜的H5交互動(dòng)畫(huà)、數(shù)據(jù)及邏輯，是華為、招商銀行、上海觀察等企業(yè)的共同選擇。

專(zhuān)業(yè)交互功能：支持專(zhuān)業(yè)級(jí)動(dòng)畫(huà)控制、交互設(shè)定、社交應(yīng)用與數(shù)據(jù)應(yīng)用，保障企業(yè)的商業(yè)需求順利實(shí)現(xiàn)。

操作簡(jiǎn)易：采用由簡(jiǎn)到難遞進(jìn)式產(chǎn)品設(shè)計(jì)模式，效果組件化，減少用戶(hù)上手難度，穩(wěn)定的操作環(huán)境助力企業(yè)持續(xù)創(chuàng)意輸出。

提供企業(yè)服務(wù)：我們?yōu)槠髽I(yè)/媒體單位提供H5工具培訓(xùn)、定制及私有化部署服務(wù)，定制服務(wù)包含掃碼簽到、大屏互動(dòng)、H5游戲等多種場(chǎng)景，是上海解放日?qǐng)?bào)、招商銀行、廣西日?qǐng)?bào)等多家單位長(zhǎng)期合作伙伴。

提供優(yōu)質(zhì)模板：提供豐富的模板庫(kù)，500+優(yōu)質(zhì)的企業(yè)H5模板，各種邀請(qǐng)函、招聘、節(jié)日海報(bào)、H5小游戲應(yīng)有盡有。

推薦理由：

意派Epub360是一款專(zhuān)業(yè)的H5交互設(shè)計(jì)神器，無(wú)需下載軟件，在線編輯制作H5作品，2014年上線，算是比較早的專(zhuān)業(yè)H5設(shè)計(jì)工具，可以零代碼制作電腦、ipad和微信端H5作品，國(guó)內(nèi)領(lǐng)先支持SVG支持SVG路徑動(dòng)畫(huà)、SVG變形動(dòng)畫(huà)、精細(xì)控制、手勢(shì)觸發(fā)、搖一搖、拖拽交互、碰撞檢測(cè)、重力感應(yīng)、關(guān)聯(lián)控制…并結(jié)合Epub360提供的數(shù)十種觸發(fā)器控制，曾經(jīng)兩天時(shí)間快速上線一個(gè)炫酷產(chǎn)品宣傳的H5作品，超神速！算是一款可以制作出高質(zhì)量H5作品的H5交互設(shè)計(jì)神器。

圖片壓縮

圖片壓縮：Tinypng

介紹：

TinyPNG For Photoshop 插件是一款 PNG 圖片壓縮插件，通過(guò)這款插件你可以將 PNG 圖片進(jìn)行高壓縮但對(duì)圖片質(zhì)量的影響微乎其微。只需要簡(jiǎn)單的兩步就可以完成對(duì) PNG 圖片的高壓縮而且還不會(huì)影響 PNG 圖片的質(zhì)量，這樣就可以解決網(wǎng)頁(yè)設(shè)計(jì)師因圖片太大而影響網(wǎng)站加載網(wǎng)頁(yè)速度的難題。

推薦理由：

TinyPNG雖然是英文網(wǎng)站，但打開(kāi)很快，不需要看懂，拖動(dòng)圖片到中間上傳的圖標(biāo)上就可以， 壓縮率很高，支持壓縮JPG、PNG，整體壓縮幅度是 70%，而且?guī)缀醪粨p失畫(huà)質(zhì)。 但每次壓縮限制大小5兆和 最多20 張圖片，如果是序列圖則不太適合，不過(guò)一般使用是完全夠用的，另外自定義壓縮質(zhì)量還可以使用國(guó)內(nèi)壓縮工具“壓縮圖”。

圖片壓縮：壓縮圖

介紹：

壓縮圖是在線圖片壓縮工具,支持GIF壓縮、PNG壓縮、JPG壓縮,還可以在線圖片加水印、圖片旋轉(zhuǎn)、制作長(zhǎng)圖拼接、圖片改顏色、圖片添加文字、圖片去底色、證件照換底色……

推薦理由：

有損壓縮，但支持壓縮JPG、PNG和GIF，支持壓縮質(zhì)量百分比、寬高比，有時(shí)我會(huì)跟tinypng混著用，部分大圖壓縮使用壓縮圖。

音視頻壓縮

Handbrake

介紹：

HandBrake是一款小巧到極致的實(shí)用視頻轉(zhuǎn)換軟件，軟件功能非常強(qiáng)大，界面簡(jiǎn)潔明晰、操作方便快捷，設(shè)計(jì)得很人性化。HandBrake中文版支持Win/Mac/Lin操作系統(tǒng)，批量轉(zhuǎn)換視頻格式，并自帶壓縮功能。需要的朋友千萬(wàn)不要錯(cuò)過(guò)哦!

推薦理由：

這款軟件是界面是英文的，需要看懂幾個(gè)基礎(chǔ)的英文專(zhuān)業(yè)用詞，現(xiàn)在經(jīng)常在Mac系統(tǒng)上，之前用的window國(guó)產(chǎn)小軟件不能用了，但是它同時(shí)支持Mac與window系統(tǒng)，有設(shè)置壓縮速率，我一般設(shè)置成22左右，壓縮質(zhì)量和體積綜合較強(qiáng)，壓縮速度快，曾經(jīng)我用這款軟件把1.2G的視頻文件壓縮到22.6兆，可謂是驚呆了我和我的小伙伴們！確實(shí)是一款國(guó)外的優(yōu)秀壓縮軟件！

格式轉(zhuǎn)化：格式工廠

介紹：

格式工廠是一款免費(fèi)多功能的多媒體文件轉(zhuǎn)換工具。格式工廠功能強(qiáng)大，可以幫助用戶(hù)簡(jiǎn)單快速的轉(zhuǎn)換需要的視頻文件格式。不僅如此，格式工廠軟件操作簡(jiǎn)便，用戶(hù)安裝后就可以上手進(jìn)行使用，為用戶(hù)帶來(lái)快速簡(jiǎn)便的使用體驗(yàn)。

推薦理由：

這款軟件我個(gè)人用的不是很多，因?yàn)橛幸魂囎邮褂肳indows系統(tǒng)比較多，經(jīng)常需要壓縮音頻、視頻和各個(gè)視頻格式的轉(zhuǎn)化，挺方便，同時(shí)這也是一個(gè)免費(fèi)的國(guó)產(chǎn)壓縮軟件，界面是中文的比較好操作。壓縮質(zhì)量中上，但速度很快，很適合對(duì)質(zhì)量要求不是很專(zhuān)業(yè)的小白用戶(hù)。

修改建議協(xié)同文檔

石墨文檔-遠(yuǎn)程辦公系統(tǒng)/解決方案

介紹：

石墨文檔是全新一代云 Office 辦公軟件,支持多人在線協(xié)作編輯文檔和表格,獨(dú)有內(nèi)容級(jí)安全,全過(guò)程留痕可追溯。PC 端和移動(dòng)端全覆蓋,隨時(shí)隨地遠(yuǎn)程辦公。

推薦理由：

石墨最大的特點(diǎn)是協(xié)同辦公，這點(diǎn)可以在我們項(xiàng)目制作修改意見(jiàn)有效的溝通并記錄，傳統(tǒng)方式，客戶(hù)在項(xiàng)目交流群里，以聊天的形式反饋建議，一會(huì)兒沒(méi)看可能就幾十條，有時(shí)還穿插著59秒的語(yǔ)音建議，分分鐘想哭好嘛？要是對(duì)方領(lǐng)導(dǎo)太多，一個(gè)人一張嘴，不經(jīng)歷你根本想象不到有多慘！有了這個(gè)，不會(huì)忽視每一條修改建議，客戶(hù)通過(guò)標(biāo)注的方式，實(shí)時(shí)反饋與按條修改，修改效率會(huì)大大提升！

素材存檔

百度網(wǎng)盤(pán),讓美好永遠(yuǎn)陪伴

介紹：

百度網(wǎng)盤(pán)為您提供文件的網(wǎng)絡(luò)備份、同步和分享服務(wù)。空間大、速度快、安全穩(wěn)固,支持教育網(wǎng)加速,支持手機(jī)端。現(xiàn)在注冊(cè)即有機(jī)會(huì)享受15G的免費(fèi)存儲(chǔ)空間。

推薦理由：

這個(gè)也不需要多介紹了，之前有幾家網(wǎng)盤(pán)接連官宣停止運(yùn)營(yíng)，目前也就百度網(wǎng)盤(pán)、騰訊微云等大平臺(tái)還在。我們?cè)谧鯤5項(xiàng)目一開(kāi)始就養(yǎng)成一個(gè)好的習(xí)慣，每次做完項(xiàng)目，項(xiàng)目中所有的源文件、圖片、音頻、視頻請(qǐng)新建文件夾歸類(lèi)。老設(shè)計(jì)師都知道，隨著接觸的項(xiàng)目越多，文件都放在電腦上，每個(gè)盤(pán)都塞得慢慢的，時(shí)間一長(zhǎng)電腦運(yùn)行肯定卡，這時(shí)候基本上要依靠移動(dòng)硬盤(pán)和云盤(pán)，移動(dòng)硬盤(pán)本地儲(chǔ)存安全私密性高，但是某寶某東上搜一下，價(jià)格偏高，如果壞了難以修復(fù)，百度網(wǎng)盤(pán)基礎(chǔ)使用的空間一般是夠用了，缺點(diǎn)是免費(fèi)版的下載速度真是龜速，不過(guò)也沒(méi)花錢(qián)不是嘛哈哈。

本期分享就到這里了，關(guān)注我，有更好的推薦也歡迎留言或私信~

原文鏈接：https://www.epub360.com/blogs/article/5e71ad54e9405e1e23faa007/

總結(jié)

以上是生活随笔為你收集整理的【干货】超强整理19个辅助制作H5的工具/网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。