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

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

插件

1.AE插件：

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

在用這個(gè)插件之前sketch標(biāo)注插件，導(dǎo)出GIF最常見的方式是先通過AE導(dǎo)出視頻，然后再用PS導(dǎo)出，缺點(diǎn)是操作繁瑣，文件大的時(shí)候很耗內(nèi)存；第二種方法是用Adobe自帶的media導(dǎo)出，缺點(diǎn)是需要再安裝一個(gè)軟件，而且需要反復(fù)調(diào)試才能導(dǎo)出最終滿意的效果，操作起來不太方便。

該插件完全萬無一失，還可以導(dǎo)出高質(zhì)量的 GIF 文件。

2.AE插件：2個(gè)

MG動(dòng)畫工具。不過我最常用的功能還是“錨點(diǎn)設(shè)置”。軟件提供了九個(gè)錨點(diǎn)選項(xiàng)，無論是MG動(dòng)畫還是UI動(dòng)態(tài)呈現(xiàn)，在確定中心點(diǎn)的時(shí)候都非常有用。而且其他功能也非常豐富。比如：彈性動(dòng)畫、爆炸效果、復(fù)制關(guān)鍵幀、批量命名等，功能非常全面，操作也非常方便。

3.AE插件：

設(shè)計(jì)師在設(shè)計(jì)動(dòng)畫效果時(shí)有很多想法，但AE軟件可以輕松制作的效果，開發(fā)人員不一定能實(shí)現(xiàn)，在時(shí)間緊迫的情況下，花費(fèi)大量精力和時(shí)間去還原這些動(dòng)畫效果顯然是不現(xiàn)實(shí)的。

但在其開發(fā)開源之后情況就不同了，設(shè)計(jì)師可以通過這款插件導(dǎo)出JSON格式的文件，讓工程師放入APP項(xiàng)目中，就能100%還原在AE中制作的效果。

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

4.PS插件：、、、四件套

切圖君開發(fā)的幾款PS插件。切圖工具；自定義參考線工具，我在網(wǎng)頁上用得最多；支持全方位標(biāo)注的插件；實(shí)時(shí)預(yù)覽工具，我最常用。

上面三款插件都是收費(fèi)軟件。不過考慮到價(jià)格都在百元以內(nèi)，可以永久購買，免費(fèi)升級(jí)，還是很劃算的。插件都是中文的，還附有使用說明，很良心了。

5. PS插件：Blue Lake

Blue Lake 本身的功能就非常強(qiáng)大，插件的主要功能包括上傳設(shè)計(jì)稿和標(biāo)記切圖，完成的設(shè)計(jì)稿上傳后可以分享給團(tuán)隊(duì)其他成員，并且網(wǎng)頁會(huì)自動(dòng)標(biāo)記，非常方便。標(biāo)記切圖功能也非常簡單，給需要切圖的元素添加標(biāo)記，上傳后開發(fā)者就可以一鍵下載切圖，非常高效。

6. 插件：ight

在公眾號(hào)里發(fā)現(xiàn)一個(gè)插件，徹底解決了開發(fā)圖和設(shè)計(jì)圖行高不一致的問題，為了讓字體行高更加準(zhǔn)確，避免反復(fù)調(diào)整，可以使用這個(gè)插件來幫助我們解決此類問題。

7.插件：

高效的切片標(biāo)注工具與軟件完美匹配，擁有豐富的標(biāo)注、切片功能，并且能夠直接導(dǎo)出HTML格式，包含了所有規(guī)范細(xì)節(jié)以及css格式等，有效降低溝通成本，提高效率。

軟件

1. 堅(jiān)果云

非常適合快速存儲(chǔ)需求。界面簡潔，功能強(qiáng)大，操作簡單，全平臺(tái)同步。甚至不需要打開客戶端，右鍵就可以同步到云端，非常適合團(tuán)隊(duì)協(xié)作和臨時(shí)存儲(chǔ)需求。

2.

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

3.有道云筆記

可以同步各平臺(tái)，界面簡潔干凈，功能豐富，我經(jīng)常用它作為學(xué)習(xí)工具，是我整理筆記的首選軟件。

4. 文字

云字體庫功能非常方便，省去了尋找和下載字體的麻煩?？梢栽赑S、AI等多個(gè)軟件中使用。

5.

我們在設(shè)計(jì)完界面之后，總喜歡用各種原型進(jìn)行展示，這款軟件可以省去我們找原型的時(shí)間，把我們的設(shè)計(jì)稿拖到界面里的3D原型里就完成了，手機(jī)顏色、背景色、燈光、屏幕比例都可以調(diào)整，同時(shí)軟件還可以錄制視頻、自定義視頻等，當(dāng)數(shù)據(jù)線插上去的時(shí)候，還可以實(shí)時(shí)顯示和記錄我們在手機(jī)上的操作。

網(wǎng)站

1. 畫廊

①——

免費(fèi)用于商業(yè)用途

②——

免費(fèi)用于商業(yè)用途

③——

免費(fèi)用于商業(yè)用途

④ UI界面——

UI頭像圖庫，內(nèi)容豐富，多種過濾功能。

2. 壓縮工具

①——

我個(gè)人認(rèn)為這是最好的圖片壓縮網(wǎng)站。它支持導(dǎo)入.png和.jpg格式的圖片。

②——

一個(gè)壓縮pdf格式文件的網(wǎng)站，操作簡單sketch標(biāo)注插件，直接拖拽文件進(jìn)去就可以壓縮，還支持將其他格式的文件轉(zhuǎn)換成pdf等功能。

3. 字體

① 子客網(wǎng)——

② 網(wǎng)站站長資料--

4.矢量圖標(biāo)

①——

②——

③——

5. 顏色

① 色彩尋寶——

提供多種優(yōu)質(zhì)配色方案。您還可以搜索符合您想法的顏色。

② Adob??e Color CC--

③ +--

6. 規(guī)格

頂級(jí)互聯(lián)網(wǎng)公司設(shè)計(jì)標(biāo)準(zhǔn)網(wǎng)站。

① 蘋果——

②——

③——

④ 螞蟻金服

--

⑤ 微信小程序--

另外還有、、Uber等大公司，大家可以登錄他們的設(shè)計(jì)網(wǎng)站，了解全球頂級(jí)互聯(lián)網(wǎng)公司的產(chǎn)品規(guī)格。

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

您可以在強(qiáng)光下測試字體顏色是否清晰可見，比例大于或等于4.5:1為正常。

8. 緩和函數(shù)快速查找表

可以作為運(yùn)動(dòng)效果設(shè)計(jì)工作中動(dòng)態(tài)曲線的參考。

9. 下載資料

①

②——

11. 感謝

1、網(wǎng)站設(shè)計(jì)三件套，無需多言。

2.

3.

4.

5.

瀏覽器插件 ()

1.muzli

設(shè)計(jì)靈感插件。安裝后，每次打開瀏覽器，都可以看到各大設(shè)計(jì)網(wǎng)站的每日推薦。

2. 網(wǎng)站

可以快速區(qū)分當(dāng)前網(wǎng)頁的主色調(diào)、中間色調(diào)、MD配色，同時(shí)可以下載調(diào)色板供PS或者其他軟件使用。

3. 截圖大師

一個(gè)非常方便的網(wǎng)頁截圖插件。

至此，我已經(jīng)總結(jié)了大部分我平時(shí)會(huì)用到的設(shè)計(jì)軟件、插件、網(wǎng)站，我會(huì)繼續(xù)分享新發(fā)現(xiàn)或者好用的軟件，不斷擴(kuò)充我的“武器庫”。

如有侵權(quán)請聯(lián)系刪除！