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

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

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

不同的視角

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

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

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

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

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

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

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

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

1. 流暢性

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

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

2.可靠性

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

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

3. 專注于UI的界面

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

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

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

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

4. 基于矢量的工作流程

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

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

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

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

可能這一點Ps存在最大的問題。當(dāng)你縮放（scale）像素層的時候堂鲤，圖像會被壓縮并且質(zhì)量下降亿傅。除非你首先把它轉(zhuǎn)換為智能對象。但是智能對象比較大瘟栖，讓工作效率下降葵擎。
對我來說，智能對象是有別的用途的半哟。比如酬滤，你在做一個按鈕的設(shè)計的時候，你只用創(chuàng)建一個對象寓涨，然后把它復(fù)制到任何你需要它的地方盯串。當(dāng)你改變一個按鈕的顏色的時候，所有的按鈕的顏色都會改變戒良，這一點真的很棒疤迥蟆！我覺得把智能對象用在為了讓圖片的質(zhì)量不下降這一點上真的很奇怪糯崎。
Affinity在這一點上做的很不錯几缭，你可以縮放一張圖片十次，保持原有的圖片質(zhì)量沃呢。這一點十分讓人欣喜年栓，我發(fā)現(xiàn)這一點的時候整個人都興奮了。然后我想了想薄霜，一張圖縮放保持質(zhì)量不應(yīng)該是理所當(dāng)然的嗎...頓時感覺之前用Ps就像呆在石器時代一樣某抓。

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

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

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

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

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

9.易用的測量工具

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

10.不錯的排版功能

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

11.藝術(shù)板

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

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

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

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

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

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

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

What about you斟湃？

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