自譯外文，資深設(shè)計(jì)師Tom Koszyk關(guān)于設(shè)計(jì)工具如何選擇的13點(diǎn)建議。
原文鏈接
多年之前，不管是做簡(jiǎn)單的網(wǎng)頁(yè)，還是做復(fù)雜的原生APP，Photoshop曾經(jīng)是做界面設(shè)計(jì)時(shí)的首要選擇。
但是在我試用了近年來(lái)多次被拿來(lái)與Ps比較的軟件—Sketch3和Affinity Designer之后，我才意識(shí)到設(shè)計(jì)師其實(shí)可以嘗試去用一用新的工具，老的軟件有一點(diǎn)過(guò)時(shí)了。說(shuō)實(shí)話，這可能是我第一次不使用Adobe的工具去做UI設(shè)計(jì)，我不得不說(shuō)這種體驗(yàn)讓我有很大的意外驚喜。
不同的視角
我嘗試了不同的視角去看待設(shè)計(jì)。Sketch改變了我的工作流程。因?yàn)镾ketch就是為了UI設(shè)計(jì)而產(chǎn)生的工具，它的設(shè)計(jì)初衷就與Ps大相徑庭。
嘗試像Sketch和Affinity designer這些其他的設(shè)計(jì)工具，改變了對(duì)傳統(tǒng)設(shè)計(jì)過(guò)程的看法
它們讓設(shè)計(jì)的心思集中在...額…怎么說(shuō)呢，更集中在產(chǎn)品本身上？對(duì)我來(lái)說(shuō)，用它做設(shè)計(jì)的過(guò)程更像開(kāi)發(fā)的過(guò)程。它不會(huì)讓你把設(shè)計(jì)當(dāng)做僅僅就和在一張既定的畫(huà)布上畫(huà)畫(huà)一樣。
Tools affect our process
設(shè)計(jì)工具影響我們的設(shè)計(jì)進(jìn)程
我開(kāi)始進(jìn)一步思考，我們應(yīng)該在我們的設(shè)計(jì)流程中用多少設(shè)計(jì)工具。我們正處于一個(gè)令人激動(dòng)的時(shí)期，Ps現(xiàn)在已經(jīng)老了，它開(kāi)始在配置不那么高的電腦上運(yùn)行的越來(lái)越慢。它的核心代碼對(duì)于現(xiàn)在來(lái)說(shuō)嚴(yán)重過(guò)時(shí)了，但畢竟它是作為一個(gè)照片編輯器被設(shè)計(jì)出來(lái)的產(chǎn)品，而不是針對(duì)UI設(shè)計(jì)而產(chǎn)生。作為前冠軍，它開(kāi)始慵懶然后越來(lái)越臃腫。其實(shí)最近針對(duì)Ps做的競(jìng)爭(zhēng)產(chǎn)品越來(lái)越多，但是也沒(méi)有一個(gè)是完美的。在UI設(shè)計(jì)工具Fireworks的市場(chǎng)占有率改變之前，我們這種想法是對(duì)的。Adobe現(xiàn)在有兩種處境，要么他們重新對(duì)舊的設(shè)計(jì)工具做出改變，要么他們就只能把市場(chǎng)份額拱手讓人。
最完美的設(shè)計(jì)工具?
讓我們靜下來(lái)想一下?—?完美的設(shè)計(jì)工具應(yīng)該是什么樣子的呢?
它的工作區(qū)對(duì)設(shè)計(jì)師更友好?還是說(shuō)增加了我們的設(shè)計(jì)效率? 或者讓我們的設(shè)計(jì)工作發(fā)生革命性的巨變? 下面是我認(rèn)為重要的十三個(gè)方面。
1. 流暢性
現(xiàn)在Ps最大的問(wèn)題就是太耗內(nèi)存了。就像一個(gè)怪獸一樣無(wú)止境吃著你的內(nèi)存—-運(yùn)行越來(lái)越慢了。我最近發(fā)現(xiàn)在我用14年購(gòu)入的8G內(nèi)存MBP retina跑Ps的時(shí)候，僅僅是做一張單獨(dú)的網(wǎng)頁(yè)設(shè)計(jì)圖的時(shí)候已經(jīng)有點(diǎn)困難了。
Ps和Affinity相比，需要多于兩倍的內(nèi)存空間。
設(shè)計(jì)工具的輕快性是顯而易見(jiàn)的需求，不管是Affinity Designer還是Sketch在這點(diǎn)上秒殺掉了Adobe。
2.可靠性
沒(méi)有人愿意讓自己嘔心瀝血工作了幾個(gè)小時(shí)之后軟件崩潰然后一切重來(lái)。但是現(xiàn)在這種事情真的常常出現(xiàn)在工作中，我覺(jué)得現(xiàn)在這些受大家歡迎的設(shè)計(jì)軟件，沒(méi)有一個(gè)完全解決了這個(gè)問(wèn)題。
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ū)的測(cè)試版本，首先，它砍掉了太多的設(shè)計(jì)功能，其次，它讓我覺(jué)得看起來(lái)更像Winamp中的一款皮膚。我們需要一款真正針對(duì)UI設(shè)計(jì)的設(shè)計(jì)工具。
Affinity看起來(lái)比Ps更好那么一點(diǎn)點(diǎn)，但是它缺少一些測(cè)量工具。它不能告訴你對(duì)象之間的距離，也不能通過(guò)百分比來(lái)進(jìn)行對(duì)象的縮放。
Sketch 基本上是完美的，它的工具對(duì)UI設(shè)計(jì)來(lái)說(shuō)足夠了，但是它的界面可以設(shè)計(jì)的更人性化一些便于使用。
4. 基于矢量的工作流程
對(duì)我來(lái)說(shuō)，矢量圖現(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í)候會(huì)時(shí)不時(shí)的對(duì)柵格化的圖形進(jìn)行色彩的調(diào)整，而且另外開(kāi)一個(gè)工具去處理會(huì)比較麻煩。Ps在這點(diǎn)上做的比較好，它的功能比較全。
Affinity Designer最看重的是效率，除此之外，它也有一個(gè)姊妹應(yīng)用，Affinity Photo，他們協(xié)同工作的話對(duì)設(shè)計(jì)師十分友好。
不幸的是，Sketch在這一點(diǎn)上實(shí)在做的不怎么樣。它基本上沒(méi)有任何位圖工作所用到的基礎(chǔ)工具?？赡苣銜?huì)覺(jué)得它這樣做是為了讓你把一些位圖素材放進(jìn)去之前好好考慮，但是真正做起來(lái)的時(shí)候你或多或少會(huì)需要對(duì)素材進(jìn)行一些小調(diào)整。
Sketch在這一點(diǎn)上完完全全是個(gè)Loser！
6.圖層縮放不會(huì)對(duì)像素造成破壞
可能這一點(diǎn)Ps存在最大的問(wèn)題。當(dāng)你縮放（scale）像素層的時(shí)候，圖像會(huì)被壓縮并且質(zhì)量下降。除非你首先把它轉(zhuǎn)換為智能對(duì)象。但是智能對(duì)象比較大，讓工作效率下降。
對(duì)我來(lái)說(shuō)，智能對(duì)象是有別的用途的。比如，你在做一個(gè)按鈕的設(shè)計(jì)的時(shí)候，你只用創(chuàng)建一個(gè)對(duì)象，然后把它復(fù)制到任何你需要它的地方。當(dāng)你改變一個(gè)按鈕的顏色的時(shí)候，所有的按鈕的顏色都會(huì)改變，這一點(diǎn)真的很棒啊！我覺(jué)得把智能對(duì)象用在為了讓圖片的質(zhì)量不下降這一點(diǎn)上真的很奇怪。
Affinity在這一點(diǎn)上做的很不錯(cuò)，你可以縮放一張圖片十次，保持原有的圖片質(zhì)量。這一點(diǎn)十分讓人欣喜，我發(fā)現(xiàn)這一點(diǎn)的時(shí)候整個(gè)人都興奮了。然后我想了想，一張圖縮放保持質(zhì)量不應(yīng)該是理所當(dāng)然的嗎...頓時(shí)感覺(jué)之前用Ps就像呆在石器時(shí)代一樣。
7.即時(shí)的預(yù)覽功能
Affinity中不同的預(yù)覽模式，分別為矢量圖，Retina，Default screen
讓我說(shuō)一個(gè)Affinity最好的地方的話，就是它讓你的設(shè)計(jì)保持矢量（形狀和字體）
并且讓你能夠?qū)崟r(shí)預(yù)覽它在不同像素級(jí)的屏幕上的效果。并且它有Retina屏幕預(yù)覽模式！目前沒(méi)有任何一個(gè)競(jìng)爭(zhēng)產(chǎn)品做到這一點(diǎn)。
8.預(yù)置的網(wǎng)格系統(tǒng)
對(duì)我來(lái)說(shuō)，不管多么簡(jiǎn)單的設(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)格，我更愛(ài)那種虛線狀態(tài)的參考網(wǎng)格，但是現(xiàn)在還沒(méi)有看到實(shí)現(xiàn)的。
9.易用的測(cè)量工具
只放一下Sketch里面測(cè)量工具是怎么工作的，我希望到處都能見(jiàn)到這種測(cè)量工具！
10.不錯(cuò)的排版功能
我最近寫(xiě)了一篇關(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ù)板讓你能夠在一張開(kāi)放的畫(huà)布上設(shè)計(jì)。如果我們分開(kāi)設(shè)計(jì)交互性強(qiáng)的網(wǎng)站或者App的每一個(gè)頁(yè)面的時(shí)候，我們會(huì)想把他們放在一個(gè)界面中看一看。藝術(shù)板同樣允許你在整個(gè)文件中使用智能對(duì)象。所有的頁(yè)面在同一個(gè)文件中十分的方便！現(xiàn)在只有Affinity Designer不支持這一點(diǎn)了，我希望它快點(diǎn)支持這一點(diǎn)。
12.多種導(dǎo)出選擇
每個(gè)設(shè)計(jì)工具進(jìn)入市場(chǎng)都是會(huì)想要去搶占市場(chǎng)份額的。不會(huì)每一種設(shè)計(jì)軟件都使用同一種工程文件，不同的團(tuán)隊(duì)會(huì)有不同的工程文件使用習(xí)慣。有的設(shè)計(jì)師給開(kāi)發(fā)者PSD文件有的會(huì)幫開(kāi)發(fā)將素材全部打包。那就意味著一個(gè)好的設(shè)計(jì)工具需要能夠支持導(dǎo)出多種格式的文件。
這一點(diǎn)上，我十分偏愛(ài)Affinity，它讓你能夠打開(kāi)PSD文件（太棒了?。┎⑶乙材軌虬涯阍贏ffinity中做的設(shè)計(jì)文件導(dǎo)出為PSD文件。PSD現(xiàn)在仍然是最常見(jiàn)的格式，并且我覺(jué)得PSD可能會(huì)持續(xù)占有大份額一段時(shí)間。
13.直接導(dǎo)出CSS樣式
最后一點(diǎn)十分簡(jiǎn)單，Ps和Sketch都可以在對(duì)象上直接使用右鍵復(fù)制它的CSS代碼。Affinity目缺失這個(gè)功能，但是它即將推出這個(gè)功能了！
Apple Music redesign是完全用Affinity Designer設(shè)計(jì)的。你可以在我的Behance上面看到我的作品，下載源文件
What about you？
盡管前景可觀，現(xiàn)在似乎沒(méi)有一個(gè)完美的解決方案。
以上就是我對(duì)設(shè)計(jì)工具選擇參考的一些關(guān)鍵點(diǎn)，大家都是怎么選擇設(shè)計(jì)工具的呢？
