UI設計師的「武器庫」

使用者介面設計設計師 · 發表 2019-02-28 09:21:32

摘要：如今，越來越多的軟體外掛可以很好的幫助我們在設計工作上縮短時間，提高效率。比如：之前需要我們手動標註的環節，現在一個html檔案就可以全部搞定；原來用AE製作動效需要我們匯出批量圖片交給開發，現在一個程式碼檔案就可以解決。不僅如此，很多優秀的網站都在源源不斷地給我們提供優質的素...

如今，越來越多的軟體外掛可以很好的幫助我們在設計工作上縮短時間，提高效率。比如：之前需要我們手動標註的環節，現在一個html檔案就可以全部搞定；原來用AE製作動效需要我們匯出批量圖片交給開發，現在一個程式碼檔案就可以解決。

不僅如此，很多優秀的網站都在源源不斷地給我們提供優質的素材或靈感，幫助我們完成作品。下面就是我日常使用的一些工具和網站分享。

一、外掛：

1.AE外掛：GifGun

目前，我所知道的最簡單快速匯出GIF格式檔案的方法，就是使用這款GifGun外掛。

在使用這款外掛之前，匯出GIF最常見的方法一是通過AE匯出視訊，後用PS進行再次匯出。缺點是操作繁瑣，而且檔案很大的情況下非常吃記憶體。第二種是藉助Adobe自家的media encoder進行匯出。缺點是你需要再裝一個軟體，並且要匯出最終滿意的效果需要反覆除錯，操作並不簡單。

而這款外掛完全傻瓜式操作，還可以匯出高質量的GIF檔案。

2.AE外掛：Motion 2

MG動效神器。不過，我個人最常用的功能卻是“錨點設定“。軟體提供了九個位置的錨點選擇。無論是做MG動效還是UI動態演示稿，在固定中心點位置時候非常的實用。而且其他功能也非常強大。比如：彈性動效、爆炸效果、複製關鍵幀、批量命名等等，功能非常全面。

3.AE外掛：Bodymovin

設計師在設計如下拉重新整理或是lading等UI動效時會有很多的想法。不過，用AE軟體可以輕鬆製作出來的效果，在開發同學那裡可就不一定了。在工期緊張的情況下，耗費大量精力和時間去還原這些動畫效果，顯然有些不切實際。

不過，當Airbnb開發出Lottie並開源之後，這種情況就不同了。設計師可以通過Bodymovin這款外掛匯出JSON格式檔案，讓工程師放入APP專案中，就可以百分百還原AE中所製作的效果了。

雖然外掛還並不是十分的完善，一些複雜的效果還無法實現。但工作中百分之90的效果都是可以轉化匯出的。

4.PS外掛：Cutterman、GuideMe、Parker、psmirror

Cut君開發的幾款PS外掛。Cutterman切圖工具；GuideMe自定義參考線工具，個人網頁端常用；Parker支援全方位標註的外掛；psmirror個人最常用的實時預覽工具。以上幾款外掛有三款是收費軟體。不過，考慮到都沒過百元，可以購買永久且免費升級，還是非常划算的。外掛均為中文，並且有使用說明，非常良心。