UI設計師的「武器庫」
如今,越來越多的軟體外掛可以很好的幫助我們在設計工作上縮短時間,提高效率。比如:之前需要我們手動標註的環節,現在一個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個人最常用的實時預覽工具。以上幾款外掛有三款是收費軟體。不過,考慮到都沒過百元,可以購買永久且免費升級,還是非常划算的。外掛均為中文,並且有使用說明,非常良心。
5.PS外掛:藍湖
藍湖本身的功能就非常強大。外掛主要功能包括上傳設計稿和標記切圖。製作完成的設計稿上傳之後可以和團隊其他成員共享。並且網頁端會自動標註,十分方便。標記切圖功能也很簡單。將要切圖的元素新增標記,上傳之後開發人員可以一鍵下載切圖,非常高效。使用藍湖外掛可以大大提高工作效率。
6.Sketch外掛:AutoFixiOSTextLineHeight
在公眾號中找到的一枚外掛,充分解決了頁面開發過程中字型還原度不高的問題。設計中,字型預設會產生行高。為了使字型行高更加精準,也為了避免反覆調節,可以使用這款外掛,能夠很好地幫助我們解決此類問題。目前只測試了蘋方字型。
7.Sketch外掛:Sketch Measure
高效的切圖標註工具,和sketch軟體十分匹配。有各種標註功能和切片功能,可直接可以匯出html格式,裡面包含全部規範細節和css格式。
二、軟體:
1.堅果雲
非常適合快速儲存需求。介面簡潔,功能強大,操作簡單,可全平臺同步。甚至不用開啟客戶端,右鍵即可同步雲端,非常適合團隊協作。
2.MindNode
一款思維導圖軟體。我選擇它的理由很簡單,“顏值夠高”。
3.有道雲筆記
各種平臺均可同步,介面簡潔清爽,功能豐富。本人經常把他當做學習工具來使用。
4.字由
雲字型檔功能非常方便,省去了找字型,下載字型的麻煩。一鍵同步,就可以搞定。PS、AI、sketch多軟體可用。
5. Design Camera
當我們設計好介面之後,總是喜歡套上各種樣機,讓我們的設計更出彩。這款軟體可以節省我們去找樣機的麻煩。將我們的設計稿拖入介面中的3D樣機當中就完成了。手機顏色、背景顏色、燈光、畫面比例群可調節。同時,軟體還可以錄製視訊,自定義視訊。當插上資料線,軟體當中還可以實時顯示我們在手機上的操作。
三、網頁:
1.相簿
① https://unsplash.com/ (免費可商用)
③ https://www.pexels.com/(免費可商用)
UI頭像相簿。有豐富的內容,和多樣的篩選功能。儲存圖片直接右鍵儲存即可。
2.壓縮
個人認為最好用的圖片壓縮網站。支援.png和.jpg檔案格式的匯入。
pdf格式檔案壓縮網站。 操作簡單,檔案拖入即可壓縮。同時還支援其他格式檔案轉pdf格式的功能。
3.字型
4.向量圖示
5.顏色
提供了多種高質量的配色方案。還可通過搜尋得到與自己想法匹配的顏色。
② https://color.adobe.com/zh/create/color-wheel/
Adobe官方色盤
配色方案生成器,每次只能提供一種配色方案。
6.規範
頂級網際網路公司產品規範網站。
① Apple-- https://developer.apple.com/design/resources/
② Material Design-- https://www.material.io/design/
③ Microsoft-- https://www.microsoft.com/design/
④ 螞蟻金服-- http://design.alipay.com/
⑤ 微信小程式-- https://weui.io/
7.可用性測試網站
https://webaim.org/resources/contrastchecker/
可以測試字型顏色在強光下是否清晰可見。數之比大於等於4.5:1為正常。
8. 緩動函式速查表
動效設計工作中,可以作為動態曲線的參考。
9.學習
① 騰訊ISUX-- https://isux.tencent.com/
② Nick Babich的部落格-- http://babich.biz/
③ 簡書-- https://www.jianshu.com/
10.素材下載
① 設計小咖-- https://www.iamxk.com/
② 美工雲-- http://www.meigongyun.com/
③ Mockupworld-- https://www.mockupworld.co/
11.賞析
Pinterest、Behance、Dribbble設計網站三件套不用多說了。
四.瀏覽器外掛(Google Chrome)
1.muzli
設計靈感外掛。安裝之後,每次開啟瀏覽器,你就能從各大設計網站看到每日的精選推薦。
2.Site Palette
可以快速分辨當前網頁的主色,中間色調和MD配色搭配等。同時,可以下載色板供PS或Sketch等軟體使用。
3.截圖大師
非常方便的網頁端截圖外掛。
到這裡,我個人平時常用的設計軟體、外掛、網站大部分都總結完畢了。後面有新的發現,或是好用的軟體我也會陸續分享,來不斷擴充自己的「武器庫」。