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

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

1. 前言

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

本文將從 UI 設(shè)計(jì) 的角度對(duì) AD 進(jìn)行測評(píng)，幫助你對(duì)它的能力和可靠性有一個(gè)基本的了解。

2. ?衡量優(yōu)劣的標(biāo)準(zhǔn)

從繪制 UI 的角度，我把繪圖軟件的功能分成 基礎(chǔ)功能 和 高級(jí)功能 兩個(gè)部分。

• 所謂基礎(chǔ)功能就是做 UI 設(shè)計(jì)必須用到的功能，不管什么軟件，只要具備這些功能，就能拿來畫 UI。
• 所謂高級(jí)功能，就是沒有它們你能活，但是有了它們你會(huì)很開心的功能。為什么？因?yàn)樗鼈兪悄闾岣吖ぷ餍实睦鳌?/li>

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

3. 基礎(chǔ)功能測評(píng)

主流設(shè)計(jì)軟件都具備基礎(chǔ)功能，它為 UI 設(shè)計(jì)的繪制、修改、導(dǎo)出幾個(gè)環(huán)節(jié)提供支持，是高頻使用的功能，即使 細(xì)微的差別可在整體體驗(yàn)上造成巨大差距 。

3.1 曲線、直線工具

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

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

△ ?AD 中通過斷開錨點(diǎn)來刪除連線

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

結(jié)論：AI > AD ≈ PS > SK

3.2 參數(shù)幾何形狀

△ ?AD 中的參數(shù)幾何形狀示例

所謂參數(shù)幾何形狀是指包括矩形、橢圓、星形等在內(nèi)的基礎(chǔ)形狀；通過調(diào)整參數(shù)可以改變細(xì)節(jié)，獲得自己需要的形態(tài)。

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

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

結(jié)論：AD > AI > SK > PS

3.3 布爾運(yùn)算

△ ?AD 的布爾運(yùn)算示例

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

結(jié)論：AD > SK > AI > PS

3.4 倒角工具

△ ?AD 和 AI 的倒角面板

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

結(jié)論：AD > AI > SK > PS

3.5 填充和描邊

• 描邊

△ ?AD 的描邊面板

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

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

但 AD 描邊的寬度變化強(qiáng)于 PS 和 AI，如上圖所示，AD 通過曲線對(duì)描邊進(jìn)行靈活的控制。

結(jié)論：AD > AI = PS = SK

• 純色填充

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

結(jié)論：AD = PS = AI = SK

• 漸變填充

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

AI 要給一個(gè)形狀填充漸變色，需要先點(diǎn)一下，才能在形狀上通過拖動(dòng)鼠標(biāo)來設(shè)置漸變色。而 AD 選擇漸變工具之后，直接在形狀上拖動(dòng)即應(yīng)用。

△ ?AI 的漸變選色面板

編輯顏色時(shí)，AI 打開的是一個(gè)小小的面板，手柄非常小，點(diǎn)起來很費(fèi)神，容易點(diǎn)偏。而取色面板是 RGB 模式，換到 HSB 之后下次打開又會(huì)回到 RGB。

△ ?AD 的漸變調(diào)色示例

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

AD 調(diào)色板色彩選擇模式會(huì)記憶上次的選擇。在調(diào)色時(shí)，選擇好一個(gè)端點(diǎn)的顏色之后，不用關(guān)閉選色面板，直接點(diǎn)擊漸變顏色條的另一個(gè)端點(diǎn)，即可選色。

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

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

結(jié)論：AD > SK > AI > PS

• 透明漸變

△ ?AD 的透明漸變示例

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

結(jié)論：AD 獨(dú)有

• 描邊漸變

△ ?AD 的描邊漸變

對(duì)于矢量線條和形狀的描邊，AD 和 AI 可以在不擴(kuò)展描邊的情況下進(jìn)行漸變填充。

結(jié)論：AD = AI > PS = SK

3.6 文字、字體工具

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

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

SK 的文字和字體工具表現(xiàn)中規(guī)中矩，但有一個(gè)亮點(diǎn)：可以給文字列表加序號(hào)和小圓點(diǎn)，非常實(shí)用！

結(jié)論：SK ≈ AI ≈ PS > AD

3.7 選擇工具

能否快速選擇到自己要編輯的對(duì)象，對(duì)一款繪圖軟件的用戶體驗(yàn)來說是決定性 的。因?yàn)樵O(shè)計(jì)是一個(gè)不斷修改、調(diào)整的過程，而要修改，必先選到。

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

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

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

AD 在一些細(xì)節(jié)之處提供了方便，如下圖所示。

△ ?默認(rèn)設(shè)置，AD 中選框和對(duì)象交叉不能選擇對(duì)象

△ ?AD也可以設(shè)置為交叉框選

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

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

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

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

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

結(jié)論：AD ≈ SK > PS > AI

3.8 對(duì)齊、排列工具

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

△ ?AD 控制元素間距示例

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

結(jié)論：AD > SK ≈ AI ≈ PS

3.9 蒙板

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

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

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

△ ?AD 的蒙板

△ ?AD 使用復(fù)合形狀作為蒙板示例

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

結(jié)論：AD > PS > SK > AI

3.10 切圖

△ ?切圖要求示例

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

△ ?AD 切圖面板

PS 是通過圖層命名來指定切圖，AD 則是 UI 交互，實(shí)時(shí)生成二者都有。在批量操作上，AD 勝 PS 一籌，因?yàn)樗С忠淮涡詾橐粋€(gè)要導(dǎo)出的對(duì)象設(shè)定多種尺寸、多種格式，并且可以快速把一個(gè)對(duì)象的配置復(fù)制到其他對(duì)象，同樣的操作換到 PS 把圖層名都改一遍。

SK 的切圖能力和 AD 不分上下，但操作相對(duì)簡單一點(diǎn)，略勝 AD。

結(jié)論：SK > AD > PS ≈ AI

4. 小結(jié)

本文上篇到此結(jié)束。在本篇中，我對(duì) AD 的基本功能進(jìn)行了介紹，將其和主流軟件進(jìn)行了對(duì)比。在下篇中，我將對(duì) AD 的高級(jí)功能（全局色、符號(hào)、文字樣式、約束等）進(jìn)行測評(píng)，然后再談?wù)?AD 缺失的功能和不足，最后進(jìn)行總結(jié)。

本文觀點(diǎn)來源于自己的實(shí)踐經(jīng)驗(yàn)和個(gè)人偏好，結(jié)論偏主觀，經(jīng)驗(yàn)有限，若有不對(duì)之處歡迎指正。本文中將幾款軟件進(jìn)行對(duì)比，目的并非將它們分出優(yōu)劣，而是借助對(duì)比，幫助大家了解 AD。

「最新的設(shè)計(jì)神器測評(píng)」

1. 《超全面！新晉設(shè)計(jì)神器FIGMA 深度評(píng)測》
2. 《新晉神器！超厲害的原型設(shè)計(jì)新玩具KITE COMPOSITOR 深度測評(píng)》
3. 《ADOBE新利器！EXPERIENCE DESIGN CC 體驗(yàn)版使用詳細(xì)評(píng)測》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com