本期分享從文案策劃到交互設計共包含19個工具/網站，把控你的b2b網站建設制作。

  關于H5制作流程

  筆者接觸的H5制作輔助制作工作基本構成分為文案策劃、設計交流學習、制圖、視頻編輯與剪輯、原型、H5動效/動畫制作、圖片/音視頻壓縮、素材存檔，所以中間所使用的的工具也是這些。

  注：分享的有一些軟件需下載，有標注，無標注基本上是在線網站。

  數英網-數字媒體及職業招聘網站

  介紹：

  數英網是一個數字營銷媒體平臺，內容涵蓋市場營銷、廣告傳媒、創意設計、電商、移動互聯網等各數字相關領域，并且進行熱門項目推薦，平臺還包含了人才招聘和社區版塊，用戶可通過平臺查找合適招聘信息，也可在社區發布動態或關注他人。

  推薦理由：

  數英網是一個比較不錯的綜合平臺，無論是熱門的話題、品牌活動、刷屏的文案都可以找到對應的板塊，還有單獨的大廠的優秀的H5項目分享，是營銷媒體人必上網站之一。

  TOPYS | 全球頂尖創意分享平臺 OPEN YOUR MIND

  介紹：

  作為中國成立最早、最受歡迎的創意垂直網站,TOPYS立志打造一個多元、完備的泛創意知識產品系統和學習平臺,試圖成為“A Creative Institution”,希望借由創意的學習……

  推薦理由：

  作為全球頂尖創意分享平臺，每個創意、視覺、文案都很讓人驚艷，十分推薦。

  站酷(ZCOOL) - 設計師互動平臺

  介紹：

  站酷(ZCOOL),中國設計師互動平臺。深耕設計領域十二年,站酷聚集了650萬設計師、攝影師、插畫師、藝術家、創意人,設計創意群體中具有較高的影響力與號召力。

  推薦理由：

  站酷在設計師圈子有著超高人氣，匯聚了大批優秀設計師、攝影師、插畫師、藝術家、創意人，每天都有大量的首頁加精的優秀作品分享，是一個不錯的集靈感、設計技巧和項目經驗學習和交流為一體的設計師平臺。

  UI中國用戶體驗設計平臺

  介紹：

  UI 中國,前身為 iconfans,是專業的用戶體驗設計平 臺。會員均為職業 UI 設計師,覆蓋全國互聯網公司。我們將打造中國最專 業的 UI 設計交流平臺,為 UI 設計師……

  推薦理由：

  UI 中國與站酷面向人群基本重合，不過正如品牌名稱，特色是突出UI方面領域，傾向官網、APP、H5、小程序UI的用戶體驗設計，注重情感表達在人機交互中的表現，平臺定期會舉辦設計教程分享和大賽。

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

  介紹：

  Adobe Photoshop，簡稱“PS”，是由Adobe Systems開發和發行的圖像處理軟件。

  推薦理由：

  這個不需要多介紹了吧，一款作圖的軟件，設計師吃飯的家伙，我們平常說P圖大多是說這個。

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

  介紹：

  Adobe illustrator，常被稱為“AI”，是一種應用于出版、多媒體和在線圖像的工業標準矢量插畫的軟件。

  推薦理由：

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

  千圖網-免費設計圖片素材網站

  介紹：

  千圖網是中國素材最多的網站之一，擁有800多萬張素材。 提供：矢量圖 、psd源文件、圖片素材、網頁素材、3D模型 素材、手機 APP 素材、 ppt 、畫冊 、圖標熱門主流素材下載服務，千圖網以其獨特的定位和全新運營模式，處于素材 網站 領先地位。

  推薦理由：

  千圖網各類素材較多，質量整體中等，部分圖標、節日元素、海報可以作為H5使用，快速短期出平面，建議企業用戶，可以商用素材，避免不必要的版權風險，若自己有原創能力盡量自己PS。

  包圖網_專注原創商用設計圖片下載

  介紹：

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

  推薦理由：

  包圖網與千圖網屬于同類網站，但偏向于UI、插畫等方向，質量整體中上，部分圖標、節日元素、海報可以作為H5使用，建議企業用戶，可以商用素材，避免不必要的版權風險。

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

  介紹：

  Adobe After Effects簡稱“AE”是 Adobe 公司推出的一款圖形視頻處理 軟件，適用于從事設計和視頻特技的機構，包括電視臺、動畫制作公司、個人后期制作工作室以及多媒體工作室。屬于層類型后期軟件。

  推薦理由：

  同樣是 Adobe 旗下的為設計打造的視頻處理處理編輯軟件，利用三維插件和關鍵幀動畫可以制作出網頁原生動畫實現不了的動畫效果，可導出視頻、序列、GIF增加H5的視覺表現和互動效果，制作H5互動視頻是個不錯的玩法。

  如H5互動視頻作品：《王小藝的朋友圈》

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

  介紹：

  Premiere的簡稱，由 Adobe 公司開發是一款常用的視頻編輯 軟件，由 Adobe 公司推出。現在常用的版本有CS4、CS5、CS6、CC 2014、CC 2015、CC 2017、CC 2018 CC2019以及2020版本。Adobe Premiere是一款編輯畫面質量比較好的軟件 ，有較好的兼容性 ，且可以與Adobe公司推出的其他軟件相互協作。

  推薦理由：

  十分強大的視頻剪輯軟件，也是Adobe旗下的產品，是如今自媒體人必學的軟件之一，可以剪輯、配樂、專場，一般會配合AE一起使用。

  會聲會影中文版免費下載-會聲會影中文官網（需下載）

  介紹：

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

  推薦理由：

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

  墨刀- 遠程辦公好幫手 在線產品原型設計與協作平臺

  介紹：

  墨刀是一款在線原型設計與協同工具，借助墨刀，產品經理、設計師、開發、銷售、運營及創業者等用戶群體，能夠搭建為產品原型，演示項目效果。墨刀同時也是協作平臺，項目成員可以協作編輯、審閱，不管是產品想法展示，還是向客戶收集產品反饋，向投資人進行Demo展示，或是在團隊內部協作溝通、項目管理。

  推薦理由：

  產品特色包括素材庫、設計、高效演示及評審、導入Sketch稿、云端編輯、多人協作，可以在線制作APP及活動頁面。

  意派?Epub360-專業H5頁面在線交互設計制作工具

  介紹：

  意派Epub360隸屬于上海意派科技，是專業級的H5交互設計平臺，采用可視化組件編輯，可實現復雜的H5交互動畫、數據及邏輯，是華為、招商銀行、上海觀察等企業的共同選擇。

  專業交互功能：支持專業級動畫控制、交互設定、社交應用與數據應用，保障企業的商業需求順利實現。

  操作簡易：采用由簡到難遞進式產品設計模式，效果組件化，減少用戶上手難度，穩定的操作環境助力企業持續創意輸出。

  提供企業服務：我們為企業/媒體單位提供H5工具培訓、定制及私有化部署服務，定制服務包含掃碼簽到、大屏互動、H5游戲等多種場景，是上海解放日報、招商銀行、廣西日報等多家單位長期合作伙伴。

  提供優質模板：提供豐富的模板庫，500+優質的企業H5模板，各種邀請函、招聘、節日海報、H5小游戲應有盡有。

  推薦理由：

  意派Epub360是一款專業的H5交互設計神器，無需下載軟件，在線編輯制作H5作品，2014年上線，算是比較早的專業H5設計工具，可以零代碼制作電腦、ipad和微信端H5作品，國內領先支持SVG支持SVG路徑動畫、SVG變形動畫、精細控制、手勢觸發、搖一搖、拖拽交互、碰撞檢測、重力感應、關聯控制...并結合Epub360提供的數十種觸發器控制，曾經兩天時間快速上線一個炫酷產品宣傳的H5作品，超神速！算是一款可以制作出高質量H5作品的H5交互設計神器。

  圖片壓縮：Tinypng

  介紹：

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

  推薦理由：

  TinyPNG雖然是英文網站，但打開很快，不需要看懂，拖動圖片到中間上傳的圖標上就可以， 壓縮率很高，支持壓縮JPG、PNG，整體壓縮幅度是 70%，而且幾乎不損失畫質。 但每次壓縮限制大小5兆和 最多20 張圖片，如果是序列圖則不太適合，不過一般使用是完全夠用的，另外自定義壓縮質量還可以使用國內壓縮工具“壓縮圖”。

  圖片壓縮：壓縮圖

  介紹：

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

  推薦理由：

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

  Handbrake

  介紹：

  HandBrake是一款小巧到極致的實用視頻轉換軟件，軟件功能非常強大，界面簡潔明晰、操作方便快捷，設計得很人性化。HandBrake中文版支持Win/Mac/Lin操作系統，批量轉換視頻格式，并自帶壓縮功能。需要的朋友千萬不要錯過哦!

  推薦理由：

  這款軟件是界面是英文的，需要看懂幾個基礎的英文專業用詞，現在經常在Mac系統上，之前用的window國產小軟件不能用了，但是它同時支持Mac與window系統，有設置壓縮速率，我一般設置成22左右，壓縮質量和體積綜合較強，壓縮速度快，曾經我用這款軟件把1.2G的視頻文件壓縮到22.6兆，可謂是驚呆了我和我的小伙伴們！確實是一款國外的優秀壓縮軟件！

  格式轉化：格式工廠

  介紹：

  格式工廠是一款免費多功能的多媒體文件轉換工具。格式工廠功能強大，可以幫助用戶簡單快速的轉換需要的視頻文件格式。不僅如此，格式工廠軟件操作簡便，用戶安裝后就可以上手進行使用，為用戶帶來快速簡便的使用體驗。

  推薦理由：

  這款軟件我個人用的不是很多，因為有一陣子使用Windows系統比較多，經常需要壓縮音頻、視頻和各個視頻格式的轉化，挺方便，同時這也是一個免費的國產壓縮軟件，界面是中文的比較好操作。壓縮質量中上，但速度很快，很適合對質量要求不是很專業的小白用戶。

  石墨文檔-遠程辦公系統/解決方案

  介紹：

  石墨文檔是全新一代云 Office 辦公軟件,支持多人在線協作編輯文檔和表格,獨有內容級安全,全過程留痕可追溯。PC 端和移動端全覆蓋,隨時隨地遠程辦公。

  推薦理由：

  石墨最大的特點是協同辦公，這點可以在我們項目制作修改意見有效的溝通并記錄，傳統方式，客戶在項目交流群里，以聊天的形式反饋建議，一會兒沒看可能就幾十條，有時還穿插著59秒的語音建議，分分鐘想哭好嘛？要是對方領導太多，一個人一張嘴，不經歷你根本想象不到有多慘！有了這個，不會忽視每一條修改建議，客戶通過標注的方式，實時反饋與按條修改，修改效率會大大提升！

  百度網盤,讓美好永遠陪伴

  介紹：

  百度網盤為您提供文件的網絡備份、同步和分享服務。空間大、速度快、安全穩固,支持教育網加速,支持手機端。現在注冊即有機會享受15G的免費存儲空間。

  推薦理由：

  這個也不需要多介紹了，之前有幾家網盤接連官宣停止運營，目前也就百度網盤、騰訊微云等大平臺還在。我們在做H5項目一開始就養成一個好的習慣，每次做完項目，項目中所有的源文件、圖片、音頻、視頻請新建文件夾歸類。老設計師都知道，隨著接觸的項目越多，文件都放在電腦上，每個盤都塞得慢慢的，時間一長電腦運行肯定卡，這時候基本上要依靠移動硬盤和云盤，移動硬盤本地儲存安全私密性高，但是某寶某東上搜一下，價格偏高，如果壞了難以修復，百度網盤基礎使用的空間一般是夠用了，缺點是免費版的下載速度真是龜速，不過也沒花錢不是嘛哈哈。

  本期分享就到這里了，關注我 @言之慎，有更好的推薦也歡迎留言或私信~