UI設計基礎知識：新手該用哪款UI設計軟件

談起UI設計軟件，相信很多設計師首先想到Sketch，與曾經設計界的一個Photoshop相比，Sketch雖功能不夠強大，但勝在更輕量，更高效。但時至今日，每年都有不同的設計軟件、動效工具、標註工具、原型工具問世，UI設計軟件也層出不窮。Sketch的缺陷逐漸暴露，讓不少粉絲「移情別戀」到其他UI設計軟件上。

為什麼愈來愈少人用PS/AI進行UI設計?

什麼是UI設計?UI設計(User Interface)是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。理論上，所有可以進行平面設計、排版設計的軟件都可以做UI設計，也就是說只要你樂意，拿Word、Excel都是可以的，但至於合不合適，好不好用那就另當別論。

UI設計基礎知識

在Adobe系列稱霸平面軟件的背景下，Sketch、Figma、XD等輕量UI設計軟件能異軍突起，主要是因為PS、AI、ID等軟件對UI設計來說太臃腫了。這就好比歐洲重卡和超市購物車的區別，雖然都可以裝貨送貨，但沒有人會開重卡進入超市裡購物。

在實際應用中，UI設計需要應用到的視覺功能大概只佔PS/AI的1%，多出來的99%並不是額外附贈，而是需要承擔對應代價的：

• 啟動和關閉軟件所需時間長，速度慢。

• 生成的文件體積大，更佔空間。

• 對電腦的CPU和內存消耗大，更佔資源。

• 圖層計算量較大，經常出現延遲、卡機等情況。

• 經常出現奇怪的Bug和閃退等問題。

……

UI設計基礎知識

所以很多新手設計師在剛開始用PS/AI做界面時，只做幾個界面對問題感知並不是很明顯。但一個完整的UI項目，頁面數並不是個位數，往往總量達到三位數，加上頁面內容、樣式等還需要反復調整，經過一系列操作後，上述問題會被無限放大，而PS/AI自身的缺陷也會嚴重影響工作進度和增加工作量，這是完全無法避免的。

而Sketch/XD/Figma這類輕量UI設計軟件，不僅能提高我們的設計效果，還會針對項目的使用提供豐富功能，包括樣式批量的修改、自動佈局、複用組件、團隊協作以及線上分享等等。

正式這些種種的問題，導致愈來愈少人用PS/AI進行UI設計。

Sketch or Figma誰才是UI設計軟件的未來?

雖然Adobe XD是Adobe旗下的一款適用於網站和應用程序等的快速且功能強大的 UI/UX 設計解決方案;並且，XD的外觀和使用觀感都與Adobe其他產品類似，因此熟悉Adobe系列工具的用家不用花費太多時間就能熟悉軟件。

UI設計基礎知識

但同樣Adobe XD也有不少不靠譜的問題，比如：

① 可以繪製基本形狀，但不能選擇自定義形狀;

② 可以導出設計，但如果插件就無法獲得CSS;

③ 需要不斷更新，但每次更新都會有機會出現Bug;

④ 採用WinAPP格式，兼容性極差，在Win10不同版本會產生各種奇怪的問題，最後只能重裝系統。

對此，新手朋友可以直接略過XD，將學習注意力放到其他軟件上，比如Sketch、Figma。下面，小編就來說說這兩款UI設計軟件哪個比較好?

UI設計基礎知識

一、兼容性

一直以來，UI設計工具似乎對Windows並不是十分友好，比如Sketch壓根沒有開發Windows版本;Adobe XD雖然有Windows版本，但實際使用體驗還是與Sketch有明顯差距。

相反，Figma基於Web平台開發，只要有「瀏覽器+互聯網」，就能享受Sketch的極佳體驗且不受系統約束。

二、操作體驗

Sketch雖然相較於PS有極大的優化，但性能也有明顯的上限，如果界面頁數太多，長時間工作同樣會出現卡機情況。

UI設計基礎知識

但Figma是基於Web開發的，並不怎麼消耗本地資源。同樣大小的項目文件，Figma能將緩存控制在極低並保持流暢的60幀渲染，可以說是真正的「如絲般順滑」。

UI設計基礎知識

三、組件系統

Symbol曾經是Sketch最為稱道的殺手級組件功能，但Figma的Component不僅繼承Symbol的優點，功能上更是青出於藍，更符合設計師需求。

比如，

在Sketch創建Symbol時會將所有屬性保存其中，當用家修改Symbol屬性時，需要以覆蓋形式對應用該Symbol文件進行同步;若Symbol有不同對齊方式或顏色，需要提前預設好或解決Symbol關聯後再修改(解除後不能同步Symbol樣式)。

UI設計基礎知識

相反，在Figma創建Component會相對更加自由，其強大之處在於Component的屬性存在父子級關係，可以任意調整子屬性而不干擾父級樣式，同時修改父級屬性又能修改全局。

UI設計基礎知識

此外，用家可在Figma新建專門文件定義組件(Component)或樣式(Style)，再將其發佈到庫(Library)，這樣團隊中所有成員就可以在團隊中任意文件調用這些組件。這主要得益於Figma是基於Web開發，組件可實時同步更新。當成員修改某組件時，團隊中所有項目內用到該組件的地方，都能選擇是否需要同步更新。

四、協同辦公

Sketch由於是客戶端，協助需要藉助其他插件，例如一款名叫Abstract的版本管理插件，可允許設計師在類似Github這樣的項目分支中設計，然後合併分支，解決衝突，但操作較為麻煩。另外，Sketch還有Cloud功能進行交付，但功能並不完善，需要利用插件解決這一需求，以及上傳指定的設計稿自動標註切圖交付開發。

UI設計基礎知識

同樣是基於Web開發的先天優勢，因此Figma允許所有設計師同一時間，同一個文件上同時工作，不必保存後再相互發送，極大地提高效率;Figma還支持評論留言，只需要增加批註就能提醒團隊中其他成員需要留意修改的地方，評審也變得更加簡單高效。但Figma的內置標註工具存在一個問題就是只能生成整個項目連結發送給程序員，讓程序員自己找標註頁面。不僅瑪法，而且項目很大時載入時間也會比較長。