斬獲Apple Design Awards 的Affinity Designer ?一直是很多設計師關注的焦點。本文通過與 Photoshop、Illustrator 和 Sketch 的比較，幫助大家了解 Affinity Designer 的優缺點。它能否成為你的主力做圖工具，讀完本文后，相信你會有自己的判斷。

歡迎關注作者的知乎主頁：www.zhihu.com/people/forrest-72

1. 前言

工欲善其事必先利其器，作為戰斗在用戶體驗第一線的 UI 設計師更是如此，對自己的工具一定相當挑剔。和 Affinity Designer（AD）一起出現的詞往往是“Apple Design Awards”，“Adobe 的挑戰者”，得獎不意味著好用，挑戰不代表優秀，作為一款“新”軟件，它究竟實力如何？我去年偶然機會看到它的官網宣傳視頻，當即被其炫酷的功能所吸引，稍微熟悉之后便按捺不住內心的沖動，將其應用到實際工作中。這個過程中曾為它的便捷激動不已，也因為對軟件不夠熟悉、軟件 bug 等原因沒少掉進坑里。折騰到現在半年有余，自認對其認識趨于成熟，經驗也積累了不少，可以跟大家交流交流了。

本文將從 UI 設計 的角度對 AD 進行測評，幫助你對它的能力和可靠性有一個基本的了解。

2. ?衡量優劣的標準

從繪制 UI 的角度，我把繪圖軟件的功能分成 基礎功能 和 高級功能 兩個部分。

• 所謂基礎功能就是做 UI 設計必須用到的功能，不管什么軟件，只要具備這些功能，就能拿來畫 UI。
• 所謂高級功能，就是沒有它們你能活，但是有了它們你會很開心的功能。為什么？因為它們是你提高工作效率的利器。

接下來，我會拿目前市場上流傳最廣，反響最好的幾款軟件來和 AD 進行對比，它們包括 Photoshop（PS）、Illustrator（AI） 和 Sketch（SK），以易用性 為標準，具體到每個重要工具，針尖對麥芒，分出高下。是的，具體到做某一件事情，工具有優劣。

3. 基礎功能測評

主流設計軟件都具備基礎功能，它為 UI 設計的繪制、修改、導出幾個環節提供支持，是高頻使用的功能，即使 細微的差別可在整體體驗上造成巨大差距 。

3.1 曲線、直線工具

繪制方面，AD 的鋼筆工具、直線工具和 AI、PS 的幾乎一致，操作也大同小異，在此就不啰嗦了。而 SK 的鋼筆工具向來是被設計師吐槽的點，基本的操作都有，要追求細節則略顯笨拙。

編輯方面，AD 中曲線、錨點的操作方式和 AI 有所不同。

△ ?AD 中通過斷開錨點來刪除連線

例如，AD 不能像在 AI 中那樣直接選擇、刪除兩個錨點中間一段曲線，需要先選擇錨點，執行“斷開”，然后刪除錨點。在連接兩條獨立的曲線的時候，AD 需要先選中兩條曲線，執行“連接”命令。而同樣的操作在 AI 中則選擇兩個要連接的錨點，執行“連接”即可，AI更直觀，準確。這個部分 AD 輸給 AI，但尚可接受。

結論：AI > AD ≈ PS > SK

3.2 參數幾何形狀

△ ?AD 中的參數幾何形狀示例

所謂參數幾何形狀是指包括矩形、橢圓、星形等在內的基礎形狀；通過調整參數可以改變細節，獲得自己需要的形態。

△ ?幾款軟件中的幾何形狀面板，從左至右依次是 AD、PS、SK、AI

AD 擁有豐富的參數幾何形狀，這點勝過 AI、SK。PS 雖然提供了大量的矢量形狀，但并非參數化可調整的，品質和可用性略差。

結論：AD > AI > SK > PS

3.3 布爾運算

△ ?AD 的布爾運算示例

在 AD 中布爾運算不僅可逆，而且具有可編輯性。例如給一個形狀選擇的布爾運算是“相加”，可以隨時改為“減去”。此外，得益于 AD 強大的圖層面板，可以非常便捷的往復合形狀中添加、移走形狀以及改變它們的疊加順序。作為老牌矢量軟件 AI 的布爾運算可逆，可通過圖層面板來管理，可是用戶體驗遜色一籌。SK 的算法跟 AD 一樣，可逆，有可編輯性，但轉曲有些麻煩。而 PS 的布爾運算是通過順序疊加來實現的，雖然可逆，但缺乏圖層面板的管理、易用性弱于另外三款軟件。

結論：AD > SK > AI > PS

3.4 倒角工具

△ ?AD 和 AI 的倒角面板

而 PS 沒有倒角工具，首先出局。AD、AI、SK 都可以對任何尖角錨點進行倒角，AD支持4種樣式，AI 3種，SK 僅支持圓角。AD的錨點倒角后，原始路徑可以繼續編輯任意節點，并保持圓角的可編輯性。AI中的錨點倒角后，如果編輯原路徑其他節點，圓角的屬性就會消失。

結論：AD > AI > SK > PS

3.5 填充和描邊

• 描邊

△ ?AD 的描邊面板

描邊功能大同小異，實線、虛線。 AD、SK、PS 和 AI 都具備。

△ ?AD 的描邊寬度控制曲線

但 AD 描邊的寬度變化強于 PS 和 AI，如上圖所示，AD 通過曲線對描邊進行靈活的控制。

結論：AD > AI = PS = SK

• 純色填充

純色填充較簡單，各選手都具備，大家打平。

結論：AD = PS = AI = SK

• 漸變填充

PS 的漸變填充工具是基于像素的。而矢量圖形的漸變則通過圖層樣式的漸變疊加來實現，操作步驟最多。

AI 要給一個形狀填充漸變色，需要先點一下，才能在形狀上通過拖動鼠標來設置漸變色。而 AD 選擇漸變工具之后，直接在形狀上拖動即應用。

△ ?AI 的漸變選色面板

編輯顏色時，AI 打開的是一個小小的面板，手柄非常小，點起來很費神，容易點偏。而取色面板是 RGB 模式，換到 HSB 之后下次打開又會回到 RGB。

△ ?AD 的漸變調色示例

AD 漸變條上的顏色手柄比 AI 大很多，點起來很輕松。AD 不可以通過雙擊顏色手柄來打開調色板，需要雙擊顏色面板或者工具欄上的填充色來打開。

AD 調色板色彩選擇模式會記憶上次的選擇。在調色時，選擇好一個端點的顏色之后，不用關閉選色面板，直接點擊漸變顏色條的另一個端點，即可選色。

△ ?SK 缺失的顏色范圍控制滑塊

SK 的漸變工具簡單直接，可以方便的添加、編輯，體驗不錯。但它的漸變條上沒有控制兩個顏色錨點之間顏色范圍的滑塊，這個問題固然可以通過添加多個顏色錨點來解決，但還是有范圍滑塊更好。

結論：AD > SK > AI > PS

• 透明漸變

△ ?AD 的透明漸變示例

此外，AD 還有透明漸變工具，這是 AI 和 PS 都沒有的功能。它能直接賦予一個形狀透明漸變（就像PS里形狀添加一個黑白漸變的圖層蒙板）。如上圖所示，我首先對矩形填充了線性顏色漸變，之后對其應用了橢圓透明漸變。實現同樣的目的，PS 和 AI 的操作要復雜不少。

結論：AD 獨有

• 描邊漸變

△ ?AD 的描邊漸變

對于矢量線條和形狀的描邊，AD 和 AI 可以在不擴展描邊的情況下進行漸變填充。

結論：AD = AI > PS = SK

3.6 文字、字體工具

目前 AD 有基礎的文字排版功能，路徑文字、區域文字也都支持，滿足基本的 UI 設計要求。然而對中國用戶來說有兩個問題。第一，目前不支持文字豎排。第二，對于中英混排（有空格）的文本，有錯誤的斷行的 bug，我已反饋至官方論壇，也得到了官方的確認，相信開發團隊會對此作出改進。

AD 的字體選擇列表目前也略簡陋，甚至不能直接輸入字體名，只能從下拉列表中選擇。令人欣慰的是 AD 會把最近用過的字體展示在列表的最上方，而在 UI 設計中常用的字體不會太多，選擇一次之后，之后選擇就方便了。

SK 的文字和字體工具表現中規中矩，但有一個亮點：可以給文字列表加序號和小圓點，非常實用！

結論：SK ≈ AI ≈ PS > AD

3.7 選擇工具

能否快速選擇到自己要編輯的對象，對一款繪圖軟件的用戶體驗來說是決定性 的。因為設計是一個不斷修改、調整的過程，而要修改，必先選到。

我們先看 AI，對于多個層級的對象，AI 可以通過雙擊逐層進入子層，從而選擇到需要編輯的子元素，這是 由外至內的選擇。另一方面，AI 也支持通過按住 Ctrl+左擊 的方式直接選擇鼠標下組層級最低的對象，這是 直接選擇 。AI 的直接選擇有一個致命的缺點：選中后圖層面板中不會定位到這個圖層，而其余三款軟件的直接都可以。

再來看 PS，PS 沒有由外至內的選擇方式，只能Ctrl+左擊 直接選擇。但 PS 有強大的圖層面板，要選擇某個圖層，可以通過在圖層面板中瀏覽、展開、收起，選擇需要的圖層。

在這個方面，AD 和 SK 作為后來者站在了巨人的肩膀上。它擁AI的由外至內選擇和直接選擇兩種選擇方式。它們也提供了PS一樣強大的圖層面板。因此它們的選擇方式是 AI和PS之和 。

AD 在一些細節之處提供了方便，如下圖所示。

△ ?默認設置，AD 中選框和對象交叉不能選擇對象

△ ?AD也可以設置為交叉框選

此外，在 AD 中當前選中了某個層級的對象，接下來左擊會選擇同級別的對象，無需一直按著 ctrl 去左擊，這也是一個很讓人喜愛的特性，不多介紹，用過會體會到它的方便。

△ ?舉例示意圖（截自 AD）

舉個例子，請看上圖，假設這個文件有幾百個圖層而且層級豐富，僅通過圖層面板找目標圖層較繁瑣。這種情況下，要選擇“三級組”，來看看各軟件怎么操作：

PS：先在畫板上Ctrl+左擊 定位到最底層的 Rectangle（有可能進到四級組、也有可能進到三級組），然后再到圖層面板中選擇“二級組” AI：在畫板上雙擊“一級組”然后雙擊“二級組”，最后選擇到“三級組”，在這個過程中可以結合圖層面板，可惜幫助有限。

AD 和 SK：既可以通過雙擊逐層進入，也可以先用直接選擇定位到圖層，再到圖層面板上去選擇。

結論：AD ≈ SK > PS > AI

3.8 對齊、排列工具

基本的上下左右居中對齊，幾款軟件都具備。而自定間距排列則是 AD 比 SK、PS 和 AI 多向前邁出的一步了。

△ ?AD 控制元素間距示例

如圖所示，為界面上的元素指定間距，在做 UI 設計時使用這個功能可以省去很多繁瑣的操作。

結論：AD > SK ≈ AI ≈ PS

3.9 蒙板

蒙板就是用一個形狀（可以是漸變）去規定其他元素的顯示范圍的功能。主要有兩類：剪切蒙版和圖層蒙版。

AI 和 SK 只有剪切蒙版。PS 則有剪切蒙版和圖層蒙版，兩種都是 PS 中常用的功能，非常強大。AD 和 PS 一樣，支持兩種蒙板，且有更高的自由度和易用性。

AD 可以把任意形狀拖到另一個形狀里面，這時，外面的形狀就變成了剪切蒙版，限制里面的形狀的顯示范圍。AD 的剪切蒙版和 PS 比，PS 的只能有1級，而 AD 的可以像組那樣無限自由嵌套；和 AI 比，有更靈活的可編輯性，在圖層面板中，調整剪切蒙版的順序和層級，就像拖動圖層那樣去操作，直觀而且符合邏輯。

△ ?AD 的蒙板

△ ?AD 使用復合形狀作為蒙板示例

AD 可以對一個圖層使用多個圖層蒙版，并且蒙板可以是像素、矢量形狀和復合性狀；復合形狀是指使用布爾運算且保留了可編輯性的形狀。這是其他軟件不具備的。

結論：AD > PS > SK > AI

3.10 切圖

△ ?切圖要求示例

PS 在有了"生成圖像資源"功能之后，切圖能力瞬間爆發。但要按照統一尺寸切出一套圖標，如上圖所示，還得借助插件（Cutterman）。AI 在 CC 2017 加入了“資源導出”功能，我沒有安裝這個版本的，沒有親手體驗，但作為 PS 的兄弟軟件，它的切圖能力應該不弱于 PS。

△ ?AD 切圖面板

PS 是通過圖層命名來指定切圖，AD 則是 UI 交互，實時生成二者都有。在批量操作上，AD 勝 PS 一籌，因為它支持一次性為一個要導出的對象設定多種尺寸、多種格式，并且可以快速把一個對象的配置復制到其他對象，同樣的操作換到 PS 把圖層名都改一遍。

SK 的切圖能力和 AD 不分上下，但操作相對簡單一點，略勝 AD。

結論：SK > AD > PS ≈ AI

4. 小結

本文上篇到此結束。在本篇中，我對 AD 的基本功能進行了介紹，將其和主流軟件進行了對比。在下篇中，我將對 AD 的高級功能（全局色、符號、文字樣式、約束等）進行測評，然后再談談 AD 缺失的功能和不足，最后進行總結。

本文觀點來源于自己的實踐經驗和個人偏好，結論偏主觀，經驗有限，若有不對之處歡迎指正。本文中將幾款軟件進行對比，目的并非將它們分出優劣，而是借助對比，幫助大家了解 AD。

「最新的設計神器測評」

1. 《超全面！新晉設計神器FIGMA 深度評測》
2. 《新晉神器！超厲害的原型設計新玩具KITE COMPOSITOR 深度測評》
3. 《ADOBE新利器！EXPERIENCE DESIGN CC 體驗版使用詳細評測》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com