自譯外文，資深設(shè)計(jì)師Tom Koszyk關(guān)于設(shè)計(jì)工具如何選擇的13點(diǎn)建議。

原文鏈接
多年之前，不管是做簡單的網(wǎng)頁，還是做復(fù)雜的原生APP，Photoshop曾經(jīng)是做界面設(shè)計(jì)時(shí)的首要選擇。

但是在我試用了近年來多次被拿來與Ps比較的軟件—Sketch3和Affinity Designer之后，我才意識到設(shè)計(jì)師其實(shí)可以嘗試去用一用新的工具，老的軟件有一點(diǎn)過時(shí)了。說實(shí)話，這可能是我第一次不使用Adobe的工具去做UI設(shè)計(jì)，我不得不說這種體驗(yàn)讓我有很大的意外驚喜。

不同的視角

我嘗試了不同的視角去看待設(shè)計(jì)。Sketch改變了我的工作流程。因?yàn)镾ketch就是為了UI設(shè)計(jì)而產(chǎn)生的工具，它的設(shè)計(jì)初衷就與Ps大相徑庭。

嘗試像Sketch和Affinity designer這些其他的設(shè)計(jì)工具，改變了對傳統(tǒng)設(shè)計(jì)過程的看法

它們讓設(shè)計(jì)的心思集中在...額…怎么說呢，更集中在產(chǎn)品本身上？對我來說，用它做設(shè)計(jì)的過程更像開發(fā)的過程。它不會讓你把設(shè)計(jì)當(dāng)做僅僅就和在一張既定的畫布上畫畫一樣。

Tools affect our process
設(shè)計(jì)工具影響我們的設(shè)計(jì)進(jìn)程

我開始進(jìn)一步思考，我們應(yīng)該在我們的設(shè)計(jì)流程中用多少設(shè)計(jì)工具。我們正處于一個(gè)令人激動的時(shí)期，Ps現(xiàn)在已經(jīng)老了，它開始在配置不那么高的電腦上運(yùn)行的越來越慢。它的核心代碼對于現(xiàn)在來說嚴(yán)重過時(shí)了，但畢竟它是作為一個(gè)照片編輯器被設(shè)計(jì)出來的產(chǎn)品，而不是針對UI設(shè)計(jì)而產(chǎn)生。作為前冠軍，它開始慵懶然后越來越臃腫。其實(shí)最近針對Ps做的競爭產(chǎn)品越來越多，但是也沒有一個(gè)是完美的。在UI設(shè)計(jì)工具Fireworks的市場占有率改變之前，我們這種想法是對的。Adobe現(xiàn)在有兩種處境，要么他們重新對舊的設(shè)計(jì)工具做出改變，要么他們就只能把市場份額拱手讓人。

最完美的設(shè)計(jì)工具?

讓我們靜下來想一下?—?完美的設(shè)計(jì)工具應(yīng)該是什么樣子的呢?

它的工作區(qū)對設(shè)計(jì)師更友好?還是說增加了我們的設(shè)計(jì)效率? 或者讓我們的設(shè)計(jì)工作發(fā)生革命性的巨變? 下面是我認(rèn)為重要的十三個(gè)方面。

1. 流暢性

現(xiàn)在Ps最大的問題就是太耗內(nèi)存了。就像一個(gè)怪獸一樣無止境吃著你的內(nèi)存—-運(yùn)行越來越慢了。我最近發(fā)現(xiàn)在我用14年購入的8G內(nèi)存MBP retina跑Ps的時(shí)候，僅僅是做一張單獨(dú)的網(wǎng)頁設(shè)計(jì)圖的時(shí)候已經(jīng)有點(diǎn)困難了。

Ps和Affinity相比，需要多于兩倍的內(nèi)存空間。
設(shè)計(jì)工具的輕快性是顯而易見的需求，不管是Affinity Designer還是Sketch在這點(diǎn)上秒殺掉了Adobe。

2.可靠性

沒有人愿意讓自己嘔心瀝血工作了幾個(gè)小時(shí)之后軟件崩潰然后一切重來。但是現(xiàn)在這種事情真的常常出現(xiàn)在工作中，我覺得現(xiàn)在這些受大家歡迎的設(shè)計(jì)軟件，沒有一個(gè)完全解決了這個(gè)問題。

Affinity 就跟個(gè)熊孩子一樣總是鬧啊，特別是在用透明度（transparency）工具的時(shí)候。Ps就和鐵索橋一樣…（晃晃悠悠..）我用有一段時(shí)間不用Sketch了，所以我也不知道它現(xiàn)在到底怎么樣了，但是我記得之前用的時(shí)候有一些讓人崩潰的時(shí)候......

3. 專注于UI的界面

（譯者注：Adobe將在16年推出一款專注UI設(shè)計(jì)與Sketch定位相同的軟件Project Comet，參考http://www.digitalartsonline.co.uk/news/creative-software/adobe-unveils-sketch-rival-project-comet-release-date/）

Sketch在這一點(diǎn)上勝利了。Ps根本就不是一個(gè)UI設(shè)計(jì)工具，它的核心是一個(gè)照片編輯工具（不顧一切的添加各種小工具）。Adobe曾經(jīng)介紹了一個(gè)Ps中用于UI設(shè)計(jì)的工作區(qū)的測試版本，首先，它砍掉了太多的設(shè)計(jì)功能，其次，它讓我覺得看起來更像Winamp中的一款皮膚。我們需要一款真正針對UI設(shè)計(jì)的設(shè)計(jì)工具。

Affinity看起來比Ps更好那么一點(diǎn)點(diǎn)，但是它缺少一些測量工具。它不能告訴你對象之間的距離，也不能通過百分比來進(jìn)行對象的縮放。

Sketch 基本上是完美的，它的工具對UI設(shè)計(jì)來說足夠了，但是它的界面可以設(shè)計(jì)的更人性化一些便于使用。

4. 基于矢量的工作流程

對我來說，矢量圖現(xiàn)如今是必不可少的。我們?yōu)槎喾N設(shè)備（devices）做著設(shè)計(jì)，各種設(shè)備的顯示屏大小千奇百怪。我們的設(shè)計(jì)圖必須是易于調(diào)整（rescale）的。軟件工程師們也有著和我們一樣的想法。
我提到的三個(gè)設(shè)計(jì)工具都可以做矢量圖，這里我最喜歡的設(shè)計(jì)工具是有著非破壞性布爾運(yùn)算的Affinity。最不舒適的是Sketch，它的功能有一定的局限性。

5.有基本的編輯位圖的工具

（Affinity Designer 有很多種工作模式：設(shè)計(jì)模式，位圖編輯模式，切圖輸出模式）
你在做設(shè)計(jì)的時(shí)候會時(shí)不時(shí)的對柵格化的圖形進(jìn)行色彩的調(diào)整，而且另外開一個(gè)工具去處理會比較麻煩。Ps在這點(diǎn)上做的比較好，它的功能比較全。
Affinity Designer最看重的是效率，除此之外，它也有一個(gè)姊妹應(yīng)用，Affinity Photo，他們協(xié)同工作的話對設(shè)計(jì)師十分友好。
不幸的是，Sketch在這一點(diǎn)上實(shí)在做的不怎么樣。它基本上沒有任何位圖工作所用到的基礎(chǔ)工具。可能你會覺得它這樣做是為了讓你把一些位圖素材放進(jìn)去之前好好考慮，但是真正做起來的時(shí)候你或多或少會需要對素材進(jìn)行一些小調(diào)整。
Sketch在這一點(diǎn)上完完全全是個(gè)Loser！

6.圖層縮放不會對像素造成破壞

可能這一點(diǎn)Ps存在最大的問題。當(dāng)你縮放（scale）像素層的時(shí)候，圖像會被壓縮并且質(zhì)量下降。除非你首先把它轉(zhuǎn)換為智能對象。但是智能對象比較大，讓工作效率下降。
對我來說，智能對象是有別的用途的。比如，你在做一個(gè)按鈕的設(shè)計(jì)的時(shí)候，你只用創(chuàng)建一個(gè)對象，然后把它復(fù)制到任何你需要它的地方。當(dāng)你改變一個(gè)按鈕的顏色的時(shí)候，所有的按鈕的顏色都會改變，這一點(diǎn)真的很棒??！我覺得把智能對象用在為了讓圖片的質(zhì)量不下降這一點(diǎn)上真的很奇怪。
Affinity在這一點(diǎn)上做的很不錯(cuò)，你可以縮放一張圖片十次，保持原有的圖片質(zhì)量。這一點(diǎn)十分讓人欣喜，我發(fā)現(xiàn)這一點(diǎn)的時(shí)候整個(gè)人都興奮了。然后我想了想，一張圖縮放保持質(zhì)量不應(yīng)該是理所當(dāng)然的嗎...頓時(shí)感覺之前用Ps就像呆在石器時(shí)代一樣。

7.即時(shí)的預(yù)覽功能

Affinity中不同的預(yù)覽模式，分別為矢量圖，Retina，Default screen

讓我說一個(gè)Affinity最好的地方的話，就是它讓你的設(shè)計(jì)保持矢量（形狀和字體）
并且讓你能夠?qū)崟r(shí)預(yù)覽它在不同像素級的屏幕上的效果。并且它有Retina屏幕預(yù)覽模式！目前沒有任何一個(gè)競爭產(chǎn)品做到這一點(diǎn)。

8.預(yù)置的網(wǎng)格系統(tǒng)

對我來說，不管多么簡單的設(shè)計(jì)都要基于網(wǎng)格標(biāo)準(zhǔn)。網(wǎng)格是結(jié)構(gòu)化布局的重要組成部分，它可以幫助你平衡所有設(shè)計(jì)元素之間的關(guān)系。除此之外他們可以建立引導(dǎo)作用，使用戶體驗(yàn)更加友好，這一點(diǎn)至關(guān)重要。
我更希望能有一些小的工具去建立網(wǎng)格。能夠根據(jù)我的計(jì)算和分配快速建立網(wǎng)格，我更愛那種虛線狀態(tài)的參考網(wǎng)格，但是現(xiàn)在還沒有看到實(shí)現(xiàn)的。

9.易用的測量工具

只放一下Sketch里面測量工具是怎么工作的，我希望到處都能見到這種測量工具！

10.不錯(cuò)的排版功能

我最近寫了一篇關(guān)于排版規(guī)則的文章。鏈接http://bit.ly/26basictyporules
流行的UI設(shè)計(jì)工具支持所需要的所有功能，自定義字間距，標(biāo)點(diǎn)的設(shè)定等等。我認(rèn)為如果CSS能做到這些的話 ，這些工具都應(yīng)該要能做到這一點(diǎn)的。

11.藝術(shù)板

Sketch3中的多藝術(shù)板顯示

藝術(shù)板讓你能夠在一張開放的畫布上設(shè)計(jì)。如果我們分開設(shè)計(jì)交互性強(qiáng)的網(wǎng)站或者App的每一個(gè)頁面的時(shí)候，我們會想把他們放在一個(gè)界面中看一看。藝術(shù)板同樣允許你在整個(gè)文件中使用智能對象。所有的頁面在同一個(gè)文件中十分的方便！現(xiàn)在只有Affinity Designer不支持這一點(diǎn)了，我希望它快點(diǎn)支持這一點(diǎn)。

12.多種導(dǎo)出選擇

每個(gè)設(shè)計(jì)工具進(jìn)入市場都是會想要去搶占市場份額的。不會每一種設(shè)計(jì)軟件都使用同一種工程文件，不同的團(tuán)隊(duì)會有不同的工程文件使用習(xí)慣。有的設(shè)計(jì)師給開發(fā)者PSD文件有的會幫開發(fā)將素材全部打包。那就意味著一個(gè)好的設(shè)計(jì)工具需要能夠支持導(dǎo)出多種格式的文件。
這一點(diǎn)上，我十分偏愛Affinity，它讓你能夠打開PSD文件（太棒了！）并且也能夠把你在Affinity中做的設(shè)計(jì)文件導(dǎo)出為PSD文件。PSD現(xiàn)在仍然是最常見的格式，并且我覺得PSD可能會持續(xù)占有大份額一段時(shí)間。

13.直接導(dǎo)出CSS樣式

最后一點(diǎn)十分簡單，Ps和Sketch都可以在對象上直接使用右鍵復(fù)制它的CSS代碼。Affinity目缺失這個(gè)功能，但是它即將推出這個(gè)功能了！

Apple Music redesign是完全用Affinity Designer設(shè)計(jì)的。你可以在我的Behance上面看到我的作品，下載源文件

What about you？

盡管前景可觀，現(xiàn)在似乎沒有一個(gè)完美的解決方案。
以上就是我對設(shè)計(jì)工具選擇參考的一些關(guān)鍵點(diǎn)，大家都是怎么選擇設(shè)計(jì)工具的呢？