如今，越來越多的工具可以幫助我們在設(shè)計工作上縮短時間，提高效率。比如：之前需要我們手動標注的部分，現(xiàn)在一個html文件就可以全部搞定；原來用AE制作好動效需要我們批量導(dǎo)出圖片交給開發(fā)，現(xiàn)在一個代碼文件就可以輕松解決。

不僅如此，很多優(yōu)秀的網(wǎng)站都在源源不斷地給我們提供優(yōu)質(zhì)的素材或靈感，幫助我們完成日常工作。下面就是我平日會使用到的一些工具和網(wǎng)站的分享。

插件

1.AE插件：GifGun

目前，我所知道的最簡單高效的視頻轉(zhuǎn)GIF的插件。

在使用這款插件之前，導(dǎo)出GIF最常見的方法一是通過AE導(dǎo)出視頻，后用PS進行再次導(dǎo)出。缺點是操作繁瑣，而且文件很大的情況下非常吃內(nèi)存。第二種是借助Adobe自家的media encoder進行導(dǎo)出。缺點是你需要再裝一個軟件，并且要導(dǎo)出最終滿意的效果需要反復(fù)調(diào)試，操作并不簡單。

而這款插件完全傻瓜式操作，還可以導(dǎo)出高質(zhì)量的GIF文件。

2.AE插件：Motion 2

MG動效神器。不過，我個人最常用到的功能是“錨點設(shè)置”。軟件提供了九個位置的錨點選擇。無論是做MG動效還是UI動態(tài)演示稿，在確定中心點位置的時候非常好用。而且其他功能也非常豐富。比如：彈性動效、爆炸效果、復(fù)制關(guān)鍵幀、批量命名等等，功能非常全面且操作簡單。

3.AE插件：Bodymovin

設(shè)計師在設(shè)計動效時會有很多想法。不過，用AE軟件可以輕松制作出來的效果，在開發(fā)同學(xué)那里可就不一定了。在工期緊張的情況下，耗費大量精力和時間去還原這些動畫效果，顯然有些不切實際。

不過，當(dāng)Airbnb開發(fā)出Lottie并開源之后，這種情況就不同了。設(shè)計師可以通過Bodymovin這款插件導(dǎo)出JSON格式文件，讓工程師放入APP項目中，就可以百分百還原AE中所制作的效果了。

雖然插件還并不是十分的完善，一些復(fù)雜的效果還無法實現(xiàn)。但項目中90%的效果都是可以轉(zhuǎn)化導(dǎo)出的。

4.PS插件：Cutterman、GuideMe、Parker、Psmirror四件套

Cut君開發(fā)的幾款PS插件。Cutterman切圖工具；GuideMe自定義參考線工具，個人在網(wǎng)頁端最常使用；Parker支持全方位標注的插件；Psmirror個人最常用的實時預(yù)覽工具。

以上幾款插件有三款是收費軟件。不過，考慮到都沒過百元，可以購買永久且免費升級，還是非常劃算的。插件均為中文，并且自帶使用說明，非常的良心。

5.PS插件：藍湖

藍湖本身的功能就非常強大。插件主要功能包括上傳設(shè)計稿和標記切圖。制作完成的設(shè)計稿上傳之后可以和團隊其他成員共享。并且網(wǎng)頁端會自動標注，十分方便。標記切圖功能也很簡單。將要切圖的元素添加標記，上傳之后開發(fā)人員可以一鍵下載切圖，非常高效。

6.Sketch插件：AutoFixiOSTextLineHeight

在公眾號中找到的一枚插件，充分解決了開發(fā)與設(shè)計圖在行高上不統(tǒng)一的問題。為了使字體行高更加精準，也為了避免反復(fù)調(diào)節(jié)，可以使用這款插件，能夠很好地幫助我們解決此類問題。

7.Sketch插件：Sketch Measure

高效的切圖標注工具，和sketch軟件十分匹配。有各種標注功能和切片功能，可直接導(dǎo)出html格式，里面包含全部規(guī)范細節(jié)和css格式等?？梢院芎玫慕档蜏贤ǔ杀?，提高效率。

軟件

1.堅果云

非常適合快速存儲需求。界面簡潔，功能強大，操作簡單，可全平臺同步。甚至不用打開客戶端，右鍵即可同步云端，非常適合團隊協(xié)作和臨時儲存需求。

2.MindNode

一款思維導(dǎo)圖軟件。我選擇它的理由很簡單，“顏值夠高”。

3.有道云筆記

各種平臺均可同步，界面簡潔清爽，功能豐富。本人經(jīng)常把他當(dāng)做學(xué)習(xí)工具來使用。是我整理筆記的首選軟件。

4.字由

云字庫功能非常方便，省去了找字體和下載字體的麻煩。PS、AI、Sketch等可多軟件使用。

5. Design Camera

當(dāng)我們設(shè)計好界面之后，總是喜歡套上各種樣機進行展示。這款軟件可以省去我們?nèi)フ覙訖C的時間。將我們的設(shè)計稿拖入界面中的3D樣機當(dāng)中就完成了。手機顏色、背景顏色、燈光、畫面比例均可調(diào)節(jié)。同時，軟件還可以錄制視頻，自定義視頻等。當(dāng)插上數(shù)據(jù)線，還可以實時顯示記錄我們在手機上的操作。

網(wǎng)站

1.圖庫

① Unsplash--https:///

免費可商用

② PIXABAY--https:///

免費可商用

③ Pexels--https://www./

免費可商用

④ UI Faces--https:///

UI頭像圖庫。有豐富的內(nèi)容，和多樣的篩選功能。

2.壓縮工具

① TinyPNG--https:///

個人認為最好用的圖片壓縮網(wǎng)站。支持.png和.jpg格式圖片的導(dǎo)入。

② Smallpdf--https:///

pdf格式文件壓縮網(wǎng)站。操作簡單，文件拖入即可壓縮。同時還支持其他格式文件轉(zhuǎn)pdf等功能。

3.字體

① 字客網(wǎng)--https://www./

② 站長素材--http://font.chinaz.com/

4.矢量圖標

① easyicon--https://www./

② iconfont--https://www./

③ FLATICON--https://www./

5.顏色

① Color Hunt--https:///

提供了多種高質(zhì)量的配色方案。還可通過搜索得到與自己想法匹配的顏色。

② Adobe Color CC--https://color.adobe.com/zh/create/color-wheel/

③ COOLORS+SKILLSHARE--https:///

6.規(guī)范

頂級互聯(lián)網(wǎng)公司設(shè)計規(guī)范網(wǎng)站。

① Apple--https://developer.apple.com/design/resources/

② Material Design--https://www./design/

③ Microsoft--https://www.microsoft.com/design/

④ 螞蟻金服--http://design.alipay.com/

⑤ 微信小程序--https:///

除此之外，還有Airbnb、Facebook、Uber等大廠。可以登錄他們的設(shè)計網(wǎng)站，去了解世界頂級互聯(lián)網(wǎng)公司的產(chǎn)品規(guī)范。

7.可用性測試網(wǎng)站

https:///resources/contrastchecker/

可以測試字體顏色在強光下是否清晰可見。數(shù)之比大于等于4.5：1為正常。

8. 緩動函數(shù)速查表

http://www./easeing/easeing/

動效設(shè)計工作中，可以作為動態(tài)曲線的參考。

9.素材下載

① http://www.

② Mockupworld--https://www./

11.賞析

1.pinterest、behance、dribbble 設(shè)計網(wǎng)站三件套不必多說了。

2.http:///

3.https:///

4.http:///

5.https://

瀏覽器插件（Chrome）

1.muzli

設(shè)計靈感插件。安裝之后，每次打開瀏覽器，你就能從各大設(shè)計網(wǎng)站看到每日的精選推薦。

2.Site Palette

可以快速分辨當(dāng)前網(wǎng)頁的主色，中間色調(diào)和MD配色搭配等。同時，可以下載色板供PS或Sketch等軟件使用。

3.截圖大師

非常方便的網(wǎng)頁端截圖插件。

到這里，我個人平時常用的設(shè)計軟件、插件、網(wǎng)站大部分都總結(jié)完畢了。后面有新的發(fā)現(xiàn)，或是好用的軟件我也會陸續(xù)分享，來不斷擴充自己的「武器庫」。