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

https://www.figma.com

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

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

如果你要設(shè)計(jì)行動(dòng)廣告介面，強(qiáng)烈建議嘗試一下，可以匯出成jpg、png、svg等多種格式。

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

神器2：一秒產(chǎn)生靜態(tài)示範(fàn)圖

https://placeit.net/

有了Place it?這個(gè)產(chǎn)生各種靜態(tài)頁面示範(fàn)的工具，如果你又要做那種手握手機(jī)、或在電腦裡顯示介面的示範(fàn)圖，不必到處找素材P圖了，操作示意如下－

挑範(fàn)本-->上傳圖片-->截取圖片尺寸-->完成！

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

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

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

你絕對(duì)沒想到，平日我們常看電影評(píng)分資訊的IMDb其實(shí)是可供我們參考構(gòu)圖、設(shè)計(jì)風(fēng)格的神器！那些海報(bào)絕不止於宣傳片，許多都是國際一流設(shè)計(jì)師的藝術(shù)結(jié)晶，用來作為構(gòu)圖以及設(shè)計(jì)風(fēng)格的參考再合適不過了。

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

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

神器4：視覺爆炸的程式碼最完整收錄

#http://codepen.io/

# #如果你有一定程式設(shè)計(jì)基礎(chǔ)、懂得如何在行動(dòng)頁面/H5裡插入程式碼的話，也可以參考CODEPEN這個(gè)動(dòng)效原始碼網(wǎng)站。裡面有許多視覺炸裂且驚豔的動(dòng)效，而且大都附有HTML、CSS、js源碼供大家使用。

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

http://tympanus.net/codrops/

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

神器5：H5音效的最完整收錄

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

#GAMEPIX是國外HTML5遊戲網(wǎng)站，它整理過一個(gè)超全的音效網(wǎng)站合輯，用於遊戲背景音樂或音效下載，但其實(shí)適用於大部分行動(dòng)頁面H??5。小至「叮咚」的幾秒鐘音效、頁間過渡的十幾秒音效，大至幾分鐘的BGM，非常豐富。

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

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

http://opengameart.org

神器6：交互動(dòng)效的最完整收錄

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

如果想在H5上參考各種豐富的交互動(dòng)效，可以用Elasticode。它有很多供你借鏡的交互動(dòng)效，包括按鈕的點(diǎn)擊、頁面切換/跳轉(zhuǎn)、文字、圖片素材出現(xiàn)/消失、元素變換等等。

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

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

#https://coolors.co/app

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

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

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

https://www.materialpalette.com

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

http://zhitu.isux.us/

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

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

神器9：最方便的H5案例搜尋引擎

#http://www.199case.com/

在行動(dòng)頁面的設(shè)計(jì)靈感和創(chuàng)意的借鑒上，推薦199case，這裡對(duì)H5進(jìn)行了具體的分類——行業(yè)、形式、節(jié)日、風(fēng)格等，讓我們能更簡單、精準(zhǔn)地找到自己想要藉鏡的H5類型。

設(shè)計(jì)師想找些參考案例，網(wǎng)路上雖很多素材，但是都是不完整的，不成系統(tǒng)的，從這個(gè)可以看到完整的鮮活的設(shè)計(jì)，從加載動(dòng)效、到交互到分享指引的每個(gè)細(xì)節(jié)都值得借鏡。

神器10：行動(dòng)頁H5製作工具

#http://www.ih5.cn

功能和服務(wù)持續(xù)保持市場(chǎng)最高水準(zhǔn)。使用iH5製作的H5作品，具有跨平臺(tái)、快速迭代、持續(xù)交付、開發(fā)成本低、開源生態(tài)系統(tǒng)發(fā)達(dá)、資料互動(dòng)開放、易於推廣等優(yōu)點(diǎn)。

以上是超實(shí)用的大神級(jí)雲(yún)端設(shè)計(jì)神器！的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！