整理出10個冷門卻實用、隨開即隨玩的云端設計神器（基本都是基于HTML5），特別是為廣大的H5設計師發家致富鋪一條光明大道。
——站酷小編沒給我加精，不嗨森……不好意思，又發了一次，國慶長假嘔心瀝血幾個通宵做出這么全的東西希望能被更多人看見。
神器1：一流的移動設計參考網站
http://www.imdb.com/?ref_=nv_home
你絕對沒想到，平日我們經常看電影評分資訊的 IMDb 其實是可供我們參照構圖、設計風格的神器！那些海報絕不止于宣傳片，很多都是國際一流設計師的藝術結晶，用來作為構圖以及設計風格的參照再合適不過了。
看上面這張我精心制作的還原設計框架的動圖，你會不會瞬間覺得自己浪費了很多借鑒大師風范的機會？ IMDb上的電影宣傳海報比例跟手機頁面相似，剛好可以用來當做H5設計的絕佳參考來源。
同理，國內的 豆瓣電影網 也是如此。挑電影的同時，也能學習。
神器2：一秒生成靜態演示圖
有了 Place it 這個生成各種靜態頁面演示的工具，如果你又要做那種手握手機、或在電腦里顯示界面的演示圖，不必到處找素材P圖了，操作示意如下——
挑模板--gt;上傳圖片--gt;截取圖片尺寸--gt;完成！
每個演示用的模板上都附有標準尺寸，你也可以先在PS等軟件處理好尺寸再上傳，立即生成各種手拿iPhone、iMac，開著Macbook的圖片，來演示你設計的靜態圖效果。
神器3：界面設計與協作的法寶
Figma，15年年底開始興起的一個界面設計協作神器，圖形設計功能強大、 支持多人編輯與多人實時評論 ，還可以隨意保存歷史版本， 簡直堪稱設計界的Google Docs。 隨便截幾張操作動圖讓你感受一下——
網上有人說它像Photoshop，但其實它不具備圖像處理功能，真正有得一拼的反而是Adobe Illustrator、Sketch，都支持復雜的錨點變化——但我們去下載AI也要接近1G內存吧？Sketch還只支持Mac系統！
下次如果你要設計H5的界面，強烈推薦嘗試一下，可以 導出成jpg、png、svg等多種格式。
另外，純設計稿的云協作還有國內的 白板 、國外的 Red Pen。 你可以把你的H5頁面設計稿上傳，把鏈接發給上司amp;同事就可以進行 實時的點評甚至是吐槽！
神器4：交互動效的最全收錄
http://www.elasticode.com/allapps.php
如果想在H5上參照各種豐富的交互動效，可以用 Elasticode 。
它有很多供你借鑒的交互動效，包括按鈕的 點擊、頁面切換/跳轉、文字、圖片素材出現/消失、元素變換等等。
【優勢】這些動效側重在用戶體驗的交互上，你可以直接感受交互的過程。
神器5：視覺炸裂的代碼最全收錄
如果你 有一定編程基礎 、 懂得如何 在H5里插入代碼 的話 ，也可以參考 CODEPEN 這個動效源碼網站。里面有很多視覺炸裂且驚艷的動效，并且大都附有 HTML、CSS、js 源碼 供大家使用。
另外，如果你想做 大屏H5廣告 ，動效的選擇和參考要更高大上點，這里推薦一個專門收集PC端視覺動效案例的網站—— Codrops 。
它有很多可以在線預覽、兼具視覺化以及交互性的動效，并且每個案例后面都附有相對應的代碼，具體應用就因人而異了。
神器6：H5音效的最全收錄
http://www.gamepix.com/blog/the-big-list-of-sound-and-music-assets-for-your-html5-game/
GAMEPIX是一個國外HTML5游戲網站，它整理過一個超全的音效網站合輯，用于游戲背景音樂或音效下載，但其實適用于大部分H5。 小至“叮咚”的幾秒音效、頁面間過渡的十幾秒音效，大至幾分鐘的BGM，非常豐富 。
這個合輯作了分類， FREE（免費）、FREE/PAID（半免費半收費）、PAID（收費） 三種類型，免費的也照樣很好用。
但如果你需要的音效主要針對游戲，那么建議你來 Open Game Art 找，更新快，更可貴的是音頻格式比較全，大部分為熱心網友上傳。
神器7：專業的配色，找大師
專業配色，國內比較多用 Adobe Kuler ，調色盤方便，方案也很多。但如果你英文水平還過得去，可以試試 Coolors ，配色方案強大，也支持上傳圖片取色。
它還有一個優勢：點擊 “Generate” （生成），會得到隨機推薦的一套配色方案，你可以拖拽調換顏色位置，調出相近色階列表，調整整體方案的 色調、飽和度、亮度、冷暖度 。
另外也可以使用谷歌開發的自動顏色搭配網站 M aterial palette ，勾選兩個主顏色，自動生成色階相近、協調度高的配色列表。
https://www.materialpalette.com
神器8：設計素材最強壓縮
H5素材壓縮上，推薦騰訊ISUX前端團隊開發的 智圖圖片壓縮工具 。與眾所周知的tinypng壓縮神器相比， 壓縮效果和效率會相對優化 （注意：上傳的文件上限是5MB） 。
【優勢】可以轉換為 webp格式的圖片 （相比PNG和JPEG在不降低圖片質量的同時，減少約 三分之一 的體積），可以控制圖片輸出質量，而且可以拖動設置條對比壓縮前后的效果。
神器9：H5創意和靈感的源泉
在H5的設計靈感和創意的借鑒上，推薦 哇呸網 ，對H5進行了具體的分類—— 時間、閱讀量、推薦、行業 等，讓我們能更簡便、精準地找到自己想要借鑒的H5類型。
另外特別推薦 H5案例分享 和 數英網 ，前者還包含PC案例，后者則會對一些項目進行深度報道。
而在移動頁面的創意策劃上，可以參考APP界面設計，學習字體字號選擇、顏色搭配、交互設計等等，比如 UX Archive ，保存了很多諸如Facebook等APP的截圖。
神器10：殿堂級的H5制作工具
工欲善其事，必先利其器。最后的最后，云端H5制作工具，肯定要推薦技術領先、功能強大的 iH5 了。
它最大的優勢在于——拋棄代碼，解放所有不會代碼的設計師，讓大家能快速實現自己的創意。 物理碰撞、時間軸動畫、滑動時間軸、地理定位、數據庫、720deg;全景 ...功能齊全。就算你不會代碼，也能做出這些牛掰的H5——
終于完畢，記得收藏...
（作者：SeedHeart，GDb；封面設計：猴猴）
Tags: 設計
文章來源：http://www.zcool.com.cn/article/ZNDM4NjY4.html