今天整理出10個冷門卻很實用、即開即用的雲端神器（基本都是基於HTML5），為廣大的移動設計師發家致富鋪出了一條通往大神的大路。
一流H5設計參考神器
IMDB
我敢肯定你絕對沒有想到，平日裡我們經常看電影評分資訊的IMDb其實是可供我們參照構圖、設計風格的神器！這些海報遠不止於宣傳片，大多都是國際一流設計師的藝術結晶啊，用來作為構圖以及設計風格的參照再合適不過了。
看完上面這些，我精心製作的還原設計框架的動圖，是不是瞬間覺得自己浪費了很多借鑑大師風範的機會啊？IMDb上的電影宣傳海報跟我們手機界面相差不大，用來當做移動頁面設計的絕佳參考來源。
神器網址：
http://www.imdb.com/?ref_=nv_home
1秒生成靜態演示圖
PIACE IT
這個生成各種靜態頁面演示的樣機，如果你又要做那種手握手機、或在電腦裡顯示界面的演示圖，不必到處找素材P圖了，操作示意如下：
挑模板-->上傳圖片-->截取圖片尺寸-->完成！
每個演示用的模板上都附有標準尺寸，你也可以先在PS等軟件處理好尺寸再上傳，立即生成各種手拿iPhone、iMac，開著Macbook的圖片，來演示你設計的靜態圖效果。
TIPS：據廣大朋友反饋，這個工具現在可能涉嫌部分收費。
神器網址：https://placeit.net/
界面設計與協作神器
FIGMA
2015年底開始興起的一款界面設計協作神器，圖形設計功能強大、支持多人在線編輯與多人實時評論，用於開會或者研討非常方便，也可以隨意保存歷史版本，簡直堪稱設計界的Google Docs。隨便截幾張操作動圖讓你感受一下
有網友說它像Photoshop，但其實它不具備圖像處理功能，真正有得一拼的反而是Adobe Illustrator、Sketch，都支持複雜的鋼筆錨點變化——但我們去下載AI也要接近1G內存吧？Sketch還只支持Mac系統呢！所以還是比較試用的！
強烈推薦嘗試一下，支持導出jpg、png、svg等多種格式。
神器網址： https://www.figma.com
交互動效最全收錄
ELASTICODE
如果設計動銷時候沒有靈感時可以參照Elasticode上各種豐富的交互動效，
包括按鈕的點擊效果、頁面切換/跳轉、圖文出現/消失、元素變換等效果。
優點：這些動效都著重在用戶體驗的交互上，並非飛機稿；你可以直接感受交互的過程。
神器網址：
http://www.elasticode.com/allapps.php
視覺炸裂的H5代碼
CODEPEN
簡而言之你得有一定編程基礎、懂得如何在H5裡面加代碼的話，也可以參考CODEPEN這個動效源碼網站。裡面有非常多的視覺驚豔動效，並且大部分都附有HTML和CSS、JavaScript源碼供我們使用。
神器網址：http://codepen.io/
此外想做大屏移動廣告的話，那你所需的動效要高大上點的，那這裡再推薦一款專門收集PC端視覺炸裂案例的網站——Codrops
它有很多可以在線預覽且兼具視覺化以及交互性的動效，一個彩蛋就是每個案例後面都附有相附的代碼，具體應用就看你了。
神器網址：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
專業的配色神器
COOLORS
在國內設計師可能用的比較多的是Adobe Kuler，因為他調色盤方便，方案也很多。當然你英文水平過4級話，可以嘗試一下Coolors，他配色方案更強大，也支持上傳圖片進行取色。
它還有一個非常棒的優點：點擊“Generate”（生成），會得到隨機推薦的一套配色方案，你可以拖拽調換顏色位置，調出相近色階列表，調整整體方案的色調、飽和度、亮度、冷暖度。
神器網址：https://coolors.co/app
另外也可以使用谷歌開發的自動顏色搭配網站Material palette，勾選兩個主顏色，自動生成色階相近、協調度高的配色列表。
神器網址：https://www.materialpalette.com
素材最強壓縮神器
智圖
在移動頁面素材壓縮這塊上，給大家推薦騰訊ISUX前端團隊開發的智圖圖片壓縮工具。他與周邊的tinypng壓縮神器相比較，壓縮效果和效率會相對優化（注意：上傳的文件上限是5MB）
優點：他可以轉換為webp格式的圖片（相比PNG和JPEG在不降低圖片質量的同時，減少約三分之一的體積），可以控制圖片輸出質量，而且可以拖動設置條對比壓縮前後的效果。
神器網址：http://zhitu.isux.us/
殿堂級H5製作工具
IH5
工欲善其事，必先利其器。在H5這塊不得不提的就是iH5了，功能強大，還有製作教程非常方便。
它最大的優勢在於——拋棄代碼，解放所有不會代碼的設計師，讓大家能快速實現自己的創意。
現如今你隨便搜搜H5工程師的工資，月入1.5萬到3萬不等。那如果你藉助好的工具，可以更快地做出工程師編程的效果呢？工資是不是也上來了？
免費視頻教學，當然你也可以用iH5來接單也行，可參考行業聞名的設計師接單公式——[（你的月薪÷22天÷8小時）×私單預估小時數]×2倍——倍數高低在某種程度上，與你對閒餘時間的珍惜程度成正比。
功能強大到讓你不可思議——物理碰撞、時間軸動畫、滑動時間軸、地理定位、數據庫、720°全景...統統都有，而且使用上永久免費，直接甩其他H5同行某企秀、某展幾條街不在話下！
就算你不會代碼，也能做出這些牛掰的移動頁面廣告——
神器網址：www.ih5.cn
十大雲端神器介紹完畢
所以...不點個贊麼？（抱頭痛哭，哄不好的那種）
相關神器
閱讀更多 壹念視覺 的文章
