福利福利！10個(gè)冷門卻實(shí)用、隨開即隨用的云端神器。

以下整理出10個(gè)冷門卻實(shí)用、隨開即隨玩的云端神器（基本都是基于HTML5），為廣大的移動(dòng)廣告設(shè)計(jì)者發(fā)家致富鋪一條光明大道。

神器1：一流的H5設(shè)計(jì)參考網(wǎng)站

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

你絕對(duì)沒想到，平日我們經(jīng)�？措娪霸u(píng)分資訊的IMDb其實(shí)是可供我們參照構(gòu)圖、設(shè)計(jì)風(fēng)格的神器！那些海報(bào)絕不止于宣傳片，很多都是國(guó)際一流設(shè)計(jì)師的藝術(shù)結(jié)晶，用來(lái)作為構(gòu)圖以及設(shè)計(jì)風(fēng)格的參照再合適不過了。

看上面這張我精心制作的還原設(shè)計(jì)框架的動(dòng)圖，你會(huì)不會(huì)瞬間覺得自己浪費(fèi)了很多借鑒大師風(fēng)范的機(jī)會(huì)？IMDb上的電影宣傳海報(bào)比例跟手機(jī)頁(yè)面相似，剛好可以用來(lái)當(dāng)做移動(dòng)頁(yè)面設(shè)計(jì)的絕佳參考來(lái)源。

同理，國(guó)內(nèi)的豆瓣電影網(wǎng)也是如此。挑電影的同時(shí)，也能學(xué)習(xí)。

神器2：一秒生成靜態(tài)演示圖

https://placeit.net/

有了Place it 這個(gè)生成各種靜態(tài)頁(yè)面演示的工具，如果你又要做那種手握手機(jī)、或在電腦里顯示界面的演示圖，不必到處找素材P圖了，操作示意如下——

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

每個(gè)演示用的模板上都附有標(biāo)準(zhǔn)尺寸，你也可以先在PS等軟件處理好尺寸再上傳，立即生成各種手拿iPhone、iMac，開著Macbook的圖片，來(lái)演示你設(shè)計(jì)的靜態(tài)圖效果。

神器3：界面設(shè)計(jì)與協(xié)作的法寶

https://www.figma.com

Figma，15年年底開始興起的一個(gè)界面設(shè)計(jì)協(xié)作神器，圖形設(shè)計(jì)功能強(qiáng)大、支持多人編輯與多人實(shí)時(shí)評(píng)論，還可以隨意保存歷史版本，簡(jiǎn)直堪稱設(shè)計(jì)界的Google Docs。隨便截幾張操作動(dòng)圖讓你感受一下——

網(wǎng)上有人說它像Photoshop，但其實(shí)它不具備圖像處理功能，真正有得一拼的反而是Adobe Illustrator、Sketch，都支持復(fù)雜的錨點(diǎn)變化——但我們?nèi)ハ螺dAI也要接近1G內(nèi)存吧？Sketch還只支持Mac系統(tǒng)！

下次如果你要設(shè)計(jì)移動(dòng)廣告界面，強(qiáng)烈推薦嘗試一下，可以導(dǎo)出成jpg、png、svg等多種格式。

另外，純?cè)O(shè)計(jì)稿的云協(xié)作還有國(guó)內(nèi)的白板、國(guó)外的Red Pen。 你可以把你的頁(yè)面設(shè)計(jì)稿上傳，把鏈接發(fā)給上司&同事就可以進(jìn)行實(shí)時(shí)的點(diǎn)評(píng)甚至是吐槽！

https://bearyboard.com/

https://redpen.io/singles

神器4：交互動(dòng)效的最全收錄

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

如果想在H5上參照各種豐富的交互動(dòng)效，可以用Elasticode。

它有很多供你借鑒的交互動(dòng)效，包括按鈕的點(diǎn)擊、頁(yè)面切換/跳轉(zhuǎn)、文字、圖片素材出現(xiàn)/消失、元素變換等等。

【優(yōu)勢(shì)】這些動(dòng)效側(cè)重在用戶體驗(yàn)的交互上，你可以直接感受交互的過程。

神器5：視覺炸裂的代碼最全收錄

http://codepen.io/

如果你有一定編程基礎(chǔ)、懂得如何在移動(dòng)頁(yè)面/H5里插入代碼的話，也可以參考CODEPEN這個(gè)動(dòng)效源碼網(wǎng)站。里面有很多視覺炸裂且驚艷的動(dòng)效，并且大都附有HTML、CSS、js源碼供大家使用。

另外，如果你想做大屏移動(dòng)廣告，動(dòng)效的選擇和參考要更高大上點(diǎn)，這里推薦一個(gè)專門收集PC端視覺動(dòng)效案例的網(wǎng)站——Codrops。

http://tympanus.net/codrops/

它有很多可以在線預(yù)覽、兼具視覺化以及交互性的動(dòng)效，并且每個(gè)案例后面都附有相對(duì)應(yīng)的代碼，具體應(yīng)用就因人而異了。

神器6：H5音效的最全收錄

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

GAMEPIX是一個(gè)國(guó)外HTML5游戲網(wǎng)站，它整理過一個(gè)超全的音效網(wǎng)站合輯，用于游戲背景音樂或音效下載，但其實(shí)適用于大部分移動(dòng)頁(yè)面H5。小至“叮咚”的幾秒音效、頁(yè)面間過渡的十幾秒音效，大至幾分鐘的BGM，非常豐富。

這個(gè)合輯作了分類，F(xiàn)REE（免費(fèi)）、FREE/PAID（半免費(fèi)半收費(fèi)）、PAID（收費(fèi)）三種類型，免費(fèi)的也照樣很好用。

但如果你需要的音效主要針對(duì)游戲，那么建議你來(lái)Open Game Art找，更新快，更可貴的是音頻格式比較全，大部分為熱心網(wǎng)友上傳。

http://opengameart.org

神器7：專業(yè)的配色，找大師

https://coolors.co/app

專業(yè)配色，國(guó)內(nèi)比較多用Adobe Kuler，調(diào)色盤方便，方案也很多。但如果你英文水平還過得去，可以試試Coolors，配色方案強(qiáng)大，也支持上傳圖片取色。

它還有一個(gè)優(yōu)勢(shì)：點(diǎn)擊“Generate”（生成），會(huì)得到隨機(jī)推薦的一套配色方案，你可以拖拽調(diào)換顏色位置，調(diào)出相近色階列表，調(diào)整整體方案的色調(diào)、飽和度、亮度、冷暖度。

另外也可以使用谷歌開發(fā)的自動(dòng)顏色搭配網(wǎng)站Material palette，勾選兩個(gè)主顏色，自動(dòng)生成色階相近、協(xié)調(diào)度高的配色列表。

https://www.materialpalette.com

神器8：設(shè)計(jì)素材最強(qiáng)壓縮

http://zhitu.isux.us/

移動(dòng)頁(yè)面素材壓縮上，推薦騰訊ISUX前端團(tuán)隊(duì)開發(fā)的智圖圖片壓縮工具。與眾所周知的tinypng壓縮神器相比，壓縮效果和效率會(huì)相對(duì)優(yōu)化（注意：上傳的文件上限是5MB）。

【優(yōu)勢(shì)】可以轉(zhuǎn)換為webp格式的圖片（相比PNG和JPEG在不降低圖片質(zhì)量的同時(shí)，減少約三分之一的體積），可以控制圖片輸出質(zhì)量，而且可以拖動(dòng)設(shè)置條對(duì)比壓縮前后的效果。

神器9：H5創(chuàng)意和靈感的源泉

http://www.thewap.cn/

在移動(dòng)頁(yè)面的設(shè)計(jì)靈感和創(chuàng)意的借鑒上，推薦哇呸網(wǎng)，這里對(duì)H5進(jìn)行了具體的分類——時(shí)間、閱讀量、推薦、行業(yè)等，讓我們能更簡(jiǎn)便、精準(zhǔn)地找到自己想要借鑒的H5類型。

另外特別推薦H5案例分享和數(shù)英網(wǎng)，前者還包含PC案例，后者則會(huì)對(duì)一些項(xiàng)目進(jìn)行深度報(bào)道。

http://www.h5-share.com

http://www.digitaling.com

PS：在頁(yè)面的創(chuàng)意策劃上，可以參考APP界面設(shè)計(jì)，學(xué)習(xí)字體字號(hào)選擇、顏色搭配、交互設(shè)計(jì)等等，比如UX Archive，保存了很多諸如Facebook等APP的截圖。

http://uxarchive.com/

神器10：殿堂級(jí)的移動(dòng)頁(yè)面H5制作工具

www.ih5.cn

工欲善其事，必先利其器。最后的最后，云端移動(dòng)頁(yè)面H5制作工具，肯定要推薦技術(shù)領(lǐng)先全國(guó)、功能最強(qiáng)大的iH5了。

它最大的優(yōu)勢(shì)在于——拋棄代碼，解放所有不會(huì)代碼的設(shè)計(jì)師，讓大家能快速實(shí)現(xiàn)自己的創(chuàng)意。

現(xiàn)如今你隨便搜搜H5工程師的工資，月入1.5萬(wàn)到3萬(wàn)不等。那如果你借助好的工具，可以更快地做出工程師編程的效果呢？工資是不是也上來(lái)了？

你用iH5來(lái)接單也行，可參考行業(yè)聞名的設(shè)計(jì)師接單公式——[（你的月薪÷22天÷8小時(shí)）×私單預(yù)估小時(shí)數(shù)]×2倍——倍數(shù)高低在某種程度上，與你對(duì)閑余時(shí)間的珍惜程度成正比。

功能強(qiáng)大到離譜——物理碰撞、時(shí)間軸動(dòng)畫、滑動(dòng)時(shí)間軸、地理定位、數(shù)據(jù)庫(kù)、720°全景...統(tǒng)統(tǒng)都有，而且使用上永久免費(fèi)。

就算你不會(huì)代碼，也能做出這些牛掰的移動(dòng)頁(yè)面廣告——