​H5想必各位並不陌生，今天整理出10個冷門卻很實用，即開即用的“雲端神器”這些基本都是基於HTML5，不過我今天所說H5和我們平常在朋友圈看到的婚禮形式、企業招聘等的推廣H5不太一樣，那種基本是最傻瓜式的線上製作就可以生成，沒有趣味互動性，那今天就為廣大的移動設計師推一期H5靈感參考、製作的線上神器，希望幫到大家，說實話是時候發發乾貨了

一流H5設計參考神器

IMDB

IMDB這是一個H5製作參考網，平日裡我們經常看電影評分資訊的IMDb其實是可供我們參照構圖、設計風格等！這些海報遠不止於宣傳片，大多都是國際一流設計師的藝術結晶，用來作為構圖以及設計風格的參照再合適不過了。

看完上面這些，精心製作的還原設計框架的動圖，是不是瞬間覺得自己浪費了很多借鑑大師風範的機會啊？IMDb上的電影宣傳海報跟我們手機介面相差不大，用來當做移動頁面設計的絕佳參考來源。

神器網址：

http://www.imdb.com/?ref_=nv_home

介面設計與協作神器FIGMA

在2015年底開始興起的一款介面設計協作神器，圖形設計功能強大、支援多人線上編輯與多人實時評論，用於開會或者研討非常方便，也可以隨意儲存歷史版本，簡直堪稱設計界的Google Docs。隨便截幾張操作動圖讓你感受一下

有網友說它像Photoshop，但其實它不具備影象處理功能，真正有得一拼的反而是Adobe Illustrator、Sketch，都支援複雜的鋼筆錨點變化——但我們去下載AI也要接近1G記憶體吧？Sketch還只支援Mac系統呢！所以還是比較試用的！

強烈推薦嘗試一下，支援匯出jpg、png、svg等多種格式。

神器網址：https://www.figma.com

互動動效最全收錄

ELASTICODE

優點：這些動效都著重在使用者體驗的互動上，並非飛機稿；你可以直接感受互動的過程。

神器網址：

http://www.elasticode.com/allapps.php

視覺炸裂的H5程式碼

CODEPEN

CODEPEN簡而言之你得有一定程式設計基礎、懂得如何在H5裡面加程式碼的話，就可以用得到CODEPEN這個動效原始碼網站。因為它裡面有非常多的視覺驚豔動效，並且大部分都附有HTML和CSS、JavaScript原始碼供我們使用。

神器網址：http://codepen.io/

HTML5+CSS3學習酷站

CODROPS

一個非常棒的HTML5+CSS3學習的酷站。上面的很多前端酷炫效果都是我們經常看到的。也是讓我們裡面想學的一些酷炫效果。比如瀑布流效果、滑鼠懸停效果、頁面的動態互動效果、選單動畫效果、進度條載入效果等等。

應該說這個是酷站應有盡有。唯一的缺點就是必須要翻譯，不過這都不是事，晚上可以下載一些線上翻譯外掛，即可解決。因為人家收錄和收集的HTML5+CSS3資源都是國外的，都是國外一些優秀成熟的web前端技巧和HTML5技術。

其實它裡面有很多可以線上預覽且兼具視覺化以及互動性的動效，一個彩蛋就是每個案例後面都附有相附的程式碼。

神器網址：http://tympanus.net/codrops/

H5音效神器

GAMEPIX

這是一個專業的國外HTML5遊戲網站，整理了超全的音效，用於遊戲背景音樂或音效下載等領域居多，時間長短不一，小到幾秒大至幾分鐘的BGM，非常豐富，值得推薦。

這個合輯作了分類，FREE（免費）、FREE/PAID（半免費半收費）、PAID（收費）三種類型，免費的也照樣很好用。

神器網址：

http://www.gamepix.com/blog/the-big-list-of-sound-and-music-assets-for-your-html5-game/

如果只需要針對遊戲，那麼建議你來Open Game Art找，更新快，更可貴的是音訊格式比較全，大部分為熱心網友上傳。

神器網址：http://opengameart.org

專業的H5配色神器

COOLORS

在國內設計師可能用的比較多的是Adobe Kuler，因為他調色盤方便，方案也很多。當然你英文水平過4級話，可以嘗試一下Coolors，他配色方案更強大，也支援上傳圖片進行取色。

它還有一個非常棒的優點：點選“Generate”（生成），會得到隨機推薦的一套配色方案，你可以拖拽調換顏色位置，調出相近色階列表，調整整體方案的色調、飽和度、亮度、冷暖度。

神器網址：https://coolors.co/app

素材最強壓縮神器

智圖

在移動頁面素材壓縮這塊上，給大家推薦騰訊ISUX前端團隊開發的智圖圖片壓縮工具。他與周邊的tinypng壓縮神器相比較，壓縮效果和效率會相對優化（注意：上傳的檔案上限是5MB）

優點：他可以轉換為webp格式的圖片（相比PNG和JPEG在不降低圖片品質的同時，減少約三分之一的體積），可以控制圖片輸出品質，而且可以拖動設定條對比壓縮前後的效果。

神器網址：http://zhitu.isux.us/

殿堂級H5製作工具

IH5

工欲善其事，必先利其器。在H5這塊不得不提的就是iH5了，功能強大，還有製作教程非常方便，不是一般的線上H5可比擬的，上手需要一定的學習成本。

它最大的優勢在於——拋棄程式碼，解放所有不會程式碼的設計師，讓大家能快速實現自己的創意。

現在你隨便搜搜H5工程師的工資，月入1.5萬到3萬不等。那如果你藉助好的工具，可以更快地做出工程師程式設計的效果呢？工資是不是也上來了？

免費視訊教學，當然你也可以用iH5來接單也行，可參考行業聞名的設計師接單公式——[（你的月薪÷22天÷8小時）×私單預估小時數]×2倍——倍數高低在某種程度上，與你對閒餘時間的珍惜程度成正比。

功能強大到讓你不可思議——物理碰撞、時間軸動畫、滑動時間軸、地理定位、資料庫、720°全景...統統都有，而且使用上永久免費，直接甩其他H5同行某企秀、某展幾條街不在話下！

就算你不會程式碼，也能做出這些牛掰的移動頁面廣告——

神器網址：www.ih5.cn

1秒生成靜態演示圖

PIACE IT

這個生成各種靜態頁面演示的樣機，如果你又要做那種手握手機、或在電腦裡顯示介面的演示圖，不必到處找素材P圖了，操作示意如下：

挑模板-->上傳圖片-->擷取圖片尺寸-->完成！

每個演示用的模板上都附有標準尺寸，你也可以先在PS等軟體處理好尺寸再上傳，立即生成各種手拿iPhone、iMac，開著Macbook的圖片，來演示你設計的靜態圖效果。

神器網址：https://placeit.net/