||  Adobe Photoshop, Affinity Designer Sketch 3 — UI設計三利器

多年之前，不管是做簡單的網頁，還是做複雜的原生APP，Photoshop曾經是做介面設計時的首要選擇。

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

不同的視角

我嘗試了不同的視角去看待設計。Sketch改變了我的工作流程。因為Sketch就是為了UI設計而產生的工具，它的設計初衷就與Ps大相徑庭。

• 嘗試像Sketch和Affinity designer這些其他的設計工具，改變了我對傳統設計過程的看法。

它們讓設計的心思集中在…額…怎麼說呢，更集中在產品本身上？對我來說，用它做設計的過程更像開發的過程。它不會讓你把設計當做僅僅就和在一張既定的畫布上畫畫一樣。

設計工具影響我們的設計程式

我開始進一步思考，我們應該在我們的設計流程中用多少設計工具。

我們正處於一個令人激動的時期，Ps現在已經老了，它開始在配置不那麼高的電腦上執行的越來越慢。它的核心程式碼對於現在來說嚴重過時了，但畢竟它是作為一個照片編輯器被設計出來的產品，而不是針對UI設計而產生。作為前冠軍，它開始慵懶然後越來越臃腫。其實最近針對Ps做的競爭產品越來越多，但是也沒有一個是完美的。在UI設計工具Fireworks的市場佔有率改變之前，我們這種想法是對的。Adobe現在有兩種處境，要麼他們重新對舊的設計工具做出改變，要麼他們就只能把市場份額拱手讓人。

 

最完美的設計工具?

讓我們靜下來想一下 — 完美的設計工具應該是什麼樣子的呢?

它的工作區對設計師更友好?還是說增加了我們的設計效率? 或者讓我們的設計工作發生革命性的鉅變? 下面是我認為重要的十三個方面。

1. 流暢性

現在Ps最大的問題就是太耗記憶體了。就像一個怪獸一樣無止境吃著你的記憶體—讓電腦執行的越來越慢。我最近發現在我用14年購入的8G記憶體MBP retina跑Ps的時候，僅僅是做一張單獨的網頁設計圖的時候已經有點困難了。

       Ps和Affinity相比，需要多於兩倍的記憶體空間。

設計工具的輕快性是顯而易見的需求，不管是Affinity Designer還是Sketch在這點上秒殺掉了Adobe。

2.可靠性

沒有人願意讓自己嘔心瀝血工作了幾個小時之後軟體崩潰然後一切重來。但是現在這種事情真的常常出現在工作中，我覺得現在這些受大家歡迎的設計軟體，沒有一個完全解決了這個問題。

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

3. 專注於UI的介面

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

Affinity看起來比Ps更好那麼一點點，但是它缺少一些測量工具。它不能告訴你物件之間的距離，也不能通過百分比來進行物件的縮放。

Sketch 基本上是完美的，它的工具對UI設計來說足夠了，但是它的介面可以設計的更人性化一些便於使用。

 

4. 基於向量的工作流程

對我來說，向量圖現如今是必不可少的。我們為多種裝置做著設計，各種裝置的螢幕大小千奇百怪。我們的設計圖必須是易於調整的。軟體工程師們也有著和我們一樣的想法。

我提到的三個設計工具都可以做向量圖，這裡我最喜歡的設計工具是有著非破壞性布林運算的Affinity。最不舒適的是Sketch，它的功能有一定的侷限性。

5.有基本的編輯點陣圖的工具

（Affinity Designer 有很多種工作模式：設計模式，點陣圖編輯模式，切圖輸出模式）

你在做設計的時候會時不時的對柵格化的圖形進行色彩的調整，而且另外開一個工具去處理會比較麻煩。Ps在這點上做的比較好，它的功能比較全。

Affinity Designer最看重的是效率，除此之外，它也有一個姊妹應用，Affinity Photo，他們協同工作的話對設計師十分友好。

不幸的是，Sketch在這一點上實在做的不怎麼樣。它基本上沒有任何點陣圖工作所用到的基礎工具。可能你會覺得它這樣做是為了讓你把一些點陣圖素材放進去之前好好考慮，但是真正做起來的時候你或多或少會需要對素材進行一些小調整。

Sketch在這一點上完完全全是個Loser！

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

可能這一點Ps存在最大的問題。當你縮放畫素層的時候，影像會被壓縮並且質量下降。除非你首先把它轉換為智慧物件。但是智慧物件比較大，讓工作效率下降。

對我來說，智慧物件是有別的用途的。比如，你在做一個按鈕的設計的時候，你只用建立一個物件，然後把它複製到任何你需要它的地方。當你改變一個按鈕的顏色的時候，所有的按鈕的顏色都會改變，這一點真的很棒啊！我覺得把智慧物件用在為了讓圖片的質量不下降這一點上真的很奇怪。

Affinity在這一點上做的很不錯，你可以縮放一張圖片十次，保持原有的圖片質量。這一點十分讓人欣喜，我發現這一點的時候整個人都興奮了。然後我想了想，一張圖縮放保持質量不應該是理所當然的嗎…頓時感覺之前用Ps就像呆在石器時代一樣。

7.即時的預覽功能

Affinity中不同的預覽模式，分別為向量圖，Retina，Default screen

讓我說一個Affinity最好的地方的話，就是它讓你的設計保持向量（形狀和字型）

並且讓你能夠實時預覽它在不同畫素級的螢幕上的效果。並且它有Retina螢幕預覽模式！目前沒有任何一個競爭產品做到這一點。

8.預置的網格系統

對我來說，不管多麼簡單的設計都要基於網格標準。網格是結構化佈局的重要組成部分，它可以幫助你平衡所有設計元素之間的關係。除此之外他們可以建立引導作用，使使用者體驗更加友好，這一點至關重要。

我更希望能有一些小的工具去建立網格。能夠根據我的計算和分配快速建立網格，我更愛那種虛線狀態的參考網格，但是現在還沒有看到實現的。

9.易用的測量工具

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

10.不錯的排版功能

流行的UI設計工具支援所需要的所有功能，自定義字間距，標點的設定等等。我認為如果CSS能做到這些的話 ，這些工具都應該要能做到這一點的。

11.藝術板

 

||   圖為Sketch3中的多藝術板顯示

藝術板讓你能夠在一張開放的畫布上設計。如果我們分開設計互動性強的網站或者App的每一個頁面的時候，我們會想把他們放在一個介面中看一看。藝術板同樣允許你在整個檔案中使用智慧物件。所有的頁面在同一個檔案中十分的方便！現在只有Affinity Designer不支持者一點了，我希望它快點支援這一點。

12.多種匯出選擇

每個設計工具進入市場都是會想要去搶佔市場份額的。不會每一種設計軟體都使用同一種工程檔案，不同的團隊會有不同的工程檔案使用習慣。有的設計師給開發者PSD檔案有的會幫開發將素材全部打包。那就意味著一個好的設計工具需要能夠支援匯出多種格式的檔案。

這一點上，我十分偏愛Affinity，它讓你能夠開啟PSD檔案（太棒了！）並且也能夠把你在Affinity中做的設計檔案匯出為PSD檔案。PSD現在仍然是最常見的格式，並且我覺得PSD可能會持續佔有大份額一段時間。

13.直接匯出CSS樣式

最後一點十分簡單，Ps和Sketch都可以在物件上直接使用右鍵複製它的CSS程式碼。Affinity目缺失這個功能，但是它即將推出這個功能了！

Apple Music redesign是完全用Affinity Designer設計的。你可以在我的Behance上面看到我的作品，下載原始檔。連結

What about you？

儘管前景可觀，現在似乎沒有一個完美的解決方案。

以上就是我對設計工具選擇參考的一些關鍵點，大家都是怎麼選擇設計工具的呢？