UI 設計師的 Affinity Designer 測評（下）

04-25

1. 高級功能測評

高級功能為我們簡化操作，拒絕重複。例如，全局色、符號、文字樣式為我們將全局化、組件化設計思維應用到實際操作中，善於利用可以大大提高工作效率。

1.1 全局色

△ AD 全局色

全局色就是顏色可以一處指定，多處使用，統一修改的功能。PS 自身沒有全局色功能，通過老牌插件 Ditto 可以實現，但操作繁瑣響應慢，體驗不佳。

SK 本身沒有全局色功能，但是可以通過本身的 symbol 功能實現全局換色。另外，SK 的插件 Miaow 可以查找某個顏色並全局替換。

AI 和 AD 都可以在色板裡面可以建立全局色，把顏色賦予給畫布上的形狀之後，只要在色板裡面修改全局色，畫布上應用了全局色的形狀會一起變化。

結論：AD ≈ AI ≥ SK > PS

1.2 符號

「符號」是 AD 中文版裡面的叫法，在不同軟體裡面可能名稱不同，例如在 Flash 中叫做「元件」。和全局色類似，符號是指一處創建，多處使用，修改同步的對象，它由一個或多個圖層、形狀、曲線、文字等元素組成。

△ AD 符號

AD 的 symbol 內的元素屬性可以有選擇性的脫離同步，比如上圖中的列表中第二項的標題文字，它的顏色脫離了同步，但大小和範圍保持同步。

PS 沒有符號功能，功能最接近的是智能對象。智能對象需要在新窗口編輯，編輯結果必須保存後才能同步到主文件。因此它無法實時的在全局中看到修改結果。而 AI 中類似的功能是庫，它和 PS 智能對象相近。

然而，目前 AD 的符號有奇怪的 bug，在某些情況下，有時候符號同步會失效。儘管 AD 的符號設計非常優秀，由於這個 bug 的存在，讓人無法在大的項目中放心使用，非常遺憾。值得欣慰的是，AD 的「嵌入文檔」和 PS的「智能對象/嵌入文檔」類似，可以作為變通方案。

SK 的符號可以實現和 AD 一樣的屬性部分同步，更強大的是，SK 的符號還可以跨文件調用。

結論：SK ≥ PS ≈ AD ≈ AI

1.3 文字樣式

和全局色和 symbol 類似，文字/段落樣式是用來全局控制文本的。PS 有文字樣式，可是文字多的時候響應極慢，幾乎無法使用。

△ PS 中重度使用文字樣式甚至會崩潰

AI 擁有和 PS 類似的文字樣式功能，但它不會像 PS 一樣卡住。

SK 里可以儲存文字的顏色、大小、樣式、間距、行距；可以部分修改也可以全部替換修改。

AD 的文字樣式功能比 AI 和 PS 多了樣式繼承的能力，對文字的控制更加高效。

結論：AD ≈ SK ≈ AI > PS

1.4 圖層樣式

AI 沒有圖層樣式，但有濾鏡可以實現一些圖層樣式才能實現的效果。

SK 的圖層樣式僅限高斯模糊、投影、描邊。（Moon：吐槽一下給中文字體加描邊的時候經常出現炸裂現象）。

△ PS 圖層樣式

PS 有最強大的圖層樣式，並且同一個圖層樣式可以添加多次（例如添加兩個描邊，兩個投影），這個特性讓 PS 僅用一個圖層就能實現複雜的效果。

△ AD 圖層樣式

AD 圖層樣式功能，相比 PS 要簡單，但不簡陋，足以實現一般 UI 設計需要的效果，甚至做複雜的特效也毫無壓力。例如，下面是 WaveF 製作並共享的幾個樣式，可以看出無論是卡通、塑料還是金屬風格，AD 都能很好的實現。

結論：PS > AD > AI ≈ SK

1.5 圖層混合模式

AI 和 SK 沒有圖層混合模式。

PS 和 AD 都有圖層混合模式，PS 有 27 種、AD 竟然有 30 多種。然而最常使用的就無非是加深、減淡、和加強對比幾類，二者都具備。

結論：PS ≈ AD > AI = SK

1.6 調整圖層

AI 和 SK 沒有調整圖層。

△ PS 和 AD 的調整圖層菜單截圖。

調整圖層可以在不破壞原圖層的情況下，對圖層進行調色。通常包括曲線、色階、HSL等功能。PS 用戶對它們應該非常熟悉。這項功能的重要性不言而喻。

結論：PS ≈ AD > SK > AI

1.7 吸附、智能對齊

現在吸附和智能對齊幾乎成為了標配，老牌的 PS、AI 在近幾年逐漸支持並且不斷增強。後起之秀 SK 和 AD 在這方面自然不會落後，尤其是 SK，它有一個像素對齊的選項，打開後可以保證像素對齊，尺寸和坐標都不出現小數點。AI 的像素對齊最差，用它來做 UI 你會陷入像素鬥爭當中。

結論：SK > AD ≥ PS > AI

1.8 網格

AI 和 PS 提供基本的網格功能，和 AD 比起來相對簡陋。

△ Affinity Designer 的網格

Affinity Designer 除了常規的網格，還有 isometric 、2:1 isometric、Trimetric 等等豐富的網格系統。

△ 藉助 Affinity Designer 的網格系統方便的繪製 isometric 圖

△ SK 的網格功能

這裡得說一句，SK 網格的 offset 是 AD 和 PS 不具備的，有了它，網格才能被自由的控制。

AD > SK ＞ PS ≈ AI

1.9 參考線

目前， AD 的參考線功能還處於初級階段，和 PS、AI、SK 大同小異，不同的是，AD 提供了一個參考線管理器。

這個管理器通過輸入/修改數值的方式來管理參考線，略為難用。 PS 自身的參考線功能也很簡陋，但是它有強大的擴展，比如 Guideguide，這是 AD 無法相比的。好消息是 AD 將在 1.7 版本中對參考線功能進行暴力加強，參考線可以像普通元素一樣任意編輯和操作，這就和 Guideguide 很接近了，值得期待。

2. AD 缺失的功能

所謂缺失的功能就是，別的軟體有，AD 可以有，但是目前卻沒有的功能（有一些在開發計劃中）。

2.1 透視變形、網格變形

透視變形、網格變形是 AI 和 PS 都支持的基本變形工具，但是 AD 卻意外的缺失了。沒有這個工具在繪製一些圖形時確實掣肘。但是 AD 的同門軟體 Affinity Photo 卻支持這兩種變形，並且可以在 Affinity Photo 中應用之後複製到 AD 中並保持可編輯性，但不穩定。為何 AD 一直不提供這兩個變形工具，原因不得而知。

2.2 標註功能

如何保證最終產品達到設計圖的效果？標註來保駕護航。可惜 AD 自身沒有標註功能。目前只能先導出 psd 文件，然後使用 pxcook 進行標註。

2.3 移動端實時預覽

目前移動端 APP 設計佔據了 UI 設計比重非常大的一部分，因此在移動設備上預覽設計稿的功能變得重要。AD 尚未提供這個功能，在移動 UI 設計流程上提供的支持少了一環。

2.4 開放的介面

AD 目前並且在可見的將來都不會開放介面，第三方開發者無法為它開發插件。也就是說，AD 不會像 PS 和 SK 那樣擁有豐富而強大的插件出現。

3. 其他

3.1 文件兼容

△ AD 的導出界面

AD 的原生格式是 .afdesign，只能被 AD 打開和編輯。但 AD 對 PS 和 AI 的源文件有較好的支持，可以直接打開和編輯它們。這個特性使得 AD 可以使用網路上豐富的 PS 和 AI 素材。另一方面，AD 支持導出 PS 和 AI 格式，導出的 .psd 文件在 PS 里打開可以達到非常高的還原度。因此，使用 AD 並不意味著你失去了 PS 和 AI 的支持，在必要的時候它們仍然可以幫上忙。

在這裡必須說一句，AD 不管是打開還是導出 .psd 文件，文本會被柵格化。另外，使用 AD 有而 PS 沒有的東西，如 layer，在導出的 psd 文件中也會被柵格化。因此在和 PS 用戶一起工作時，避免使用它們，會讓你的文件具備非常好的兼容性。

3.2 平台

AD 目前有 Windows 版和 MacOS 版，二者在功能上沒有差異。此外 iPad 版在研發當中，且官方已經放出試玩視頻。從已經發布的 Affinity Photo iPad 版的質量來看，AD iPad 版非常值得期待。iPad Pro 在結合 Apple pencil 的情況下，可以說是設計師的完美輔助工具，很多人吐槽這對組合比不上專業的數位板、新帝。但是你只要體驗過，應該能承認它的便捷、直接、快速響應以及符合直覺。目前在專業工作上雖不能完全取代數位板，但是它已經可以承擔你創意工作中的初步設計階段。隨著技術的進步，將來淘汰數位板也不是沒有可能。Affinity 系列軟體布局都是 windows、macOS 和 iOS （iPad）三端並行，也許因為篤信這一趨勢吧。

就目前來說，同時兼容 Windows 和 macOS 對設計師來說是實實在在的，避免了 SK 僅支持 macOS 的尷尬。

3.3 穩定性和性能

作為一款新軟體，AD 有不錯的穩定性，正常使用很少崩潰，並且處於快速迭代中，在官方論壇，每個月都會發布多個測試版本修復 bug，值得稱讚。我也提交了幾個 bug 到論壇，確認後都得到了解決。另外，使用 AD 以來，我尚未碰到文件損壞的情況，這讓我很放心。

△ Dan Danowski 使用 AD 進行 UI 設計

性能方面，得益於 AD 是一款不折不扣的矢量軟體，繪製 UI 界面時，一個項目幾十個頁面放在一個文件裡面依然允許你釋放當年打星際爭霸才用的細膩微操，拖動、縮放畫布依然無比跟手。

那麼，AD 真的可以打破物理規律，無視硬體性能提供比別的軟體更好的流暢度？事實上並非如此，過度使用圖層樣式、模糊效果會導致 AD 明顯變慢，出現卡頓，因為各種特效的顯示在 AD 中是實時計算的，每次修改內容、移動或縮放畫布必然耗費 CPU/顯卡資源。當一個畫面中出現堆積如山的特效時，這時候你會回到現實。然而，大多數情況我們並不需要堆砌這麼多特效，即便真的有一天你真的要這麼做，也有變通方案。

4. 總結

本質上 AD 是一款新的 AI（矢量軟體），而它又具備一些 AI 沒有，PS 才有的功能，比如圖層樣式、調整圖層，加上前面尚未提及的 Pixel Persona，這使得它瞬間變成了 AI 和 PS 的合體，擁有了矢量和像素兩種武器，和單純的矢量軟體相比，戰鬥力強大不少。

由於它是一款新的軟體，在設計之初就站在了巨人的肩膀上，吸收了前輩優秀的地方，同時也加入了自己的思考。相比符號、全局色、文字樣式等現代必備的高級功能支持，我更欣賞它在基礎的用戶體驗上比 AI、PS 的進步。這個優勢使得它比更適合來做 UI，因為繪製 UI 的過程中，我們只不過是不斷的繪製形狀、選擇顏色、對齊形狀……高頻操作優化得越好，我們的加班時間越少。

同樣也因為它是一款新的軟體，在功能的全面性上又有所欠缺，例如缺少標註工具、移動設備實時預覽、交互設計、動畫製作等，沒有覆蓋整個 UI 設計流程。

△ Sav Scatola 使用 AD 繪製的插畫

僅從 UI 設計角度看，最強的工具是為 UI 設計而生的 SK，但為什麼選擇 AD 呢？1、對各種原因留在 Windows 的設計師來說，它能提供 UI 設計所需的基礎功能以及一些高級功能，且體驗優秀。2、AD 定位是矢量插畫和 UI 設計，UI 設計部分輸給 SK，但插畫部分則可以完爆 SK。我們的工作不僅僅是繪製界面，宣傳活動、閃屏插畫、banner設計甚至圖片合成工作等也佔一定比重，擁有矢量+像素的綜合能力 AD 能幫助我們輕鬆應對。

5. 最後

本文的 SK 部分是在 Moon 的幫助下完成的，特別感謝！

本文將幾個軟體拿來逐項對比，都是從 UI 設計師的角度進行考慮，目的並非評比軟體的高低，而是藉助熟悉的 PS、AI、SK 向大家介紹 AD。由於個人知識經驗有限，疏漏在所難免，歡迎指正。