“近來似乎涌現(xiàn)了大批優(yōu)秀的設(shè)計軟件，關(guān)于“設(shè)計系統(tǒng)”的討論也越來越火，毋庸置疑，這個話題對設(shè)計師和公司來講至關(guān)重要。”

本文譯自Medium中原作者Chris Bam Harrison（tabcorp設(shè)計師）中原標題為"UX Design Tools for 2018 (For Mac AND PC)"的文章。

我有幸與一個大型團隊的設(shè)計師、開發(fā)人員和商業(yè)人員共事。作為一名設(shè)計師，我接手了很多個性化、自由感十足的項目，這些項目在不同的設(shè)計工具和系統(tǒng)中有著不同的需求，所以了解什么作品適合什么樣的工具其實至關(guān)重要。

由于我既用PC端也用Mac端，所以這兩個系統(tǒng)中的設(shè)計軟件個人大部分都接觸過，選擇性也比較寬泛，在其中發(fā)現(xiàn)了一些好的應(yīng)用也希望能供你參考。本文的推薦都是本人親測好用的，絕不參雜任何商業(yè)利益。

概念構(gòu)思階段

作為讀者，我知道你前來翻看這篇文章時抱著對新鮮應(yīng)用推薦的極大期待，但開篇我還是不得不說，最好的應(yīng)用就是——紙和筆。雖然這個答案看起來令人失望而草率，但以它們作為整篇文章的引子其實再合適不過。

紙和筆能很好地保持設(shè)計師原生的靈感,并有益于設(shè)計師反復(fù)修改、磨合自己的作品，而不至于桎梏于一些不必要的細節(jié)中浪費時間。世界上沒有毫無缺憾的設(shè)計，因此將自己從數(shù)碼設(shè)計工具中解脫出來很大程度上意味著你不用再被無謂的細節(jié)拖沓進度。

另外，我選擇筆還有一個原因，那就是：不要使用能夠被擦除的工具。當(dāng)你被某一個部分絆住腳時不要停下來，繼續(xù)摸索向前走才能逐漸接近好的預(yù)期。這一條建議從前甚至改變了我的作品軌跡，我的筆記本開始保留很多構(gòu)思時粗糙的線條，雖然混亂不堪，但使我變得更有效率也更富于創(chuàng)造力，也許不知哪一秒就在粗糙的線條中發(fā)現(xiàn)了自己的靈感。

另一貫徹UX理念的概念就是用戶訪問，對此我十分鐘愛Whimsical。Whimsical的流程圖制作功能十分強大，而且視覺上一目了然。雖然每月收費10美元，但絕對物有所值，它一向以操作簡便快捷著稱。

為了尋找靈感，我常去的兩個網(wǎng)站是Dribbble和Muzli。Dribbble很適合快捷地尋找一些新鮮的，富有創(chuàng)意的點子，尤其是當(dāng)你尋找簡單的視覺沖擊感時非常好用，而在尋找系統(tǒng)性的產(chǎn)品邏輯線方面可能稍稍遜色。這個網(wǎng)站的方便之處在于你可以在上面粉一些你喜歡的設(shè)計師和作品，并和他們進行交流，隨時隨地保持關(guān)注動態(tài)，當(dāng)然這也是一個監(jiān)管非常良好的社區(qū)，很少會出現(xiàn)“三俗”創(chuàng)意污染環(huán)境。

Muzli這個網(wǎng)站中最令我中意的就是它的每周精品匯總和UX互動交流會。這個網(wǎng)站會定期更新一些有好點子、非常精彩的文章，令人總能在里面發(fā)現(xiàn)點兒新的東西。

合作共享與版本控制階段

如果你正在團隊中進行一個項目，想要分享工作中的某些創(chuàng)意，拍成照片通過郵箱分享是一個辦法，但還有一個方法看起來更便捷，那就是——Zeplin（Mac，PC通用）。Zeplin是一個很酷的應(yīng)用，它的特色非常鮮明。

首先，分享工作創(chuàng)意和進程它非常拿手，你可以邀請合作伙伴共享視頻、下載私人文件并添加評論對某個設(shè)計品進行交流。

其次，當(dāng)你進行設(shè)計時，該軟件會生成樣式指南，便于設(shè)計師擷取十六進制值的顏色和樣式。

最后Zeplin是一個完全以代碼形式傳播設(shè)計樣品的應(yīng)用。這一點下面會有所提及。

總之，Zeplin對版權(quán)持有者非常有價值，但倘若多個設(shè)計師一同合作怎么辦呢？這時每個人都需要版本控制。版本控制是一個日常中不常見的術(shù)語，指的是一種軟體工程技巧，籍以在開發(fā)過程中確保由不同人所編輯的同一檔案都得到更新，但這個問題Zeplin就很難解決了。

為此Trunk(Mac端）能很好地解決這一問題。

對設(shè)計師而言，Trunk是實打?qū)嵉纳缃痪幊碳按�碼托管軟件。你可以在Trunk設(shè)置好需要關(guān)注的文檔，它會實時觀測它們的變化，當(dāng)發(fā)生更改時，Trunk會記錄其中的變化，同時更改者也可以更新評論做出解釋，讓用戶知道為什么要這么做。

Trunk的這一屬性對設(shè)計師合作團隊來說無疑是福音，因為再也不必擔(dān)心其中未知的改動而不知道緣由。設(shè)計師甚至可以以回滾的方式將文檔返回到變化前并重新處理其中矛盾的部分，這是其最大的魅力所在。

注意：Trunk僅與Sketch和PS圖象處理軟件文件兼容。對于Figma用戶來說，F(xiàn)igma實際上內(nèi)置了一些輕型版本控制功能。

框架圖及初期設(shè)計階段

在你的創(chuàng)意與團隊分享之后，大家都想見到該內(nèi)容大體的情況，這時該用什么呢？

在此我將分享一些基礎(chǔ)的框架圖制作軟件，這里的目的是大致描繪一下一些應(yīng)用的用途，供讀者快速參考。

在此又與我們的老朋友Whimsical見面了，它不僅有強大的流程圖制作功能，也有異想天開的框架圖設(shè)計功能。事實上，你可能并不需要一個專用的線框應(yīng)用程序。在這個方向上，傳統(tǒng)的筆和紙會做得很好，像Sketch或Figma這樣的設(shè)計工具也能勝任。那么為什么要使用Whimsical呢——總結(jié)一句，那就是它干起來真的非�？�、非常有趣。

Whimsical有一個內(nèi)置的低保真度的組件庫：從按鈕、到復(fù)選框、到文本輸入框、到滑塊、到標簽條等等，一切都一目了然。所有組件都在智能向?qū)�上運行，有點兒像樂高拼圖。抓取幾個基本組件，把它們放在一起，很快就會有一個粗略的整體布局。這對于構(gòu)建設(shè)計師的設(shè)計草圖和初期理念是一個非�？旖�、保真的辦法。

同時，Whimsical也支持社群共享活動，在此設(shè)計師可以將自己的作品發(fā)送給合作伙伴從而得到反饋。

看到上面兩個圖標你是不是馬上熟悉起來了，沒錯，它們就是大名鼎鼎的Sketch君和Figma君。它們隨處可見，也許大家對它們的應(yīng)用已經(jīng)了如指掌了，但這里還是有一個很實用的小建議：制作（或下載）線框工具包。雖然線上的圖片已經(jīng)很精美了，但總不如自己制作出來的有趣。我們稍后將詳述這兩個軟件，不過有一條恒定的標準來評價好用與不好用，那就是：簡單快捷。

原型設(shè)計階段

原型能夠很好地展示你的作品在早期應(yīng)用時該如何操作及會出現(xiàn)什么問題。市場上的原型應(yīng)用程序有很多，在此我將推薦幾款個人比較中意的。

個人認為，Atomic是一個很偉大的發(fā)明。之所以如此認為，是因為一個特殊的理由：Atomic支持原創(chuàng)者將自己的設(shè)計邏輯編程入原型中，這意味著即使表面上看起來不像本來設(shè)計的樣子，但在運行中卻會完完全全地遵照設(shè)計師地本意。

接下來要說的是 Flinto（Mac端），F(xiàn)linto以“什么都會一點兒”而自薦，算是個“百事通”，但其中最厲害的就是交互動畫設(shè)計功能了。在Flinto中，滾動交互、復(fù)雜過渡和微交互的操作都十分便捷，該軟件同時也支持嵌入視頻或GIF，這樣設(shè)計師就可以在原型中使用現(xiàn)有的動畫資源。

綜上，如果想要做出真正的高保真互動設(shè)計和動畫，那么Flinto算是再好不過的模擬器了。

最后勉強提及一下InVision吧。我不是它的粉絲，因為個人感覺相對于產(chǎn)品設(shè)計支持，InVision把更多的精力投放在商業(yè)宣傳上。不過它在生成快速共享的HTML原型并進行即時修改方面還是非常強大的。

InVision確有所長，但個人更偏愛Atomic。事實上，如果你不想使用Atomic，并且傾向于InVision，也可以考慮一下Figma或Sketch。首先，它們都支持基本的可點擊原型，這些原型可以與用戶共享并進行評論。其次，它們都不專長于滾動交互和高級動畫定制之類的操作，但對于制作一個簡單的原型來說也足矣。

高保真設(shè)計階段

這個部分比較籠統(tǒng)，我會盡可能簡潔地介紹，因為有些產(chǎn)品上文已經(jīng)提到過了。

Figma(Mac端，PC端）是我的必選之一，不為別的，就為它能在PC端使用。當(dāng)然除了平臺效應(yīng)，它還有很多其他優(yōu)點。

個人比較青睞Figma的鋼筆工具，它操作十分便捷，尤其是在我想以像素規(guī)模制圖時。Figma的組件覆蓋處理起來也非常得心應(yīng)手，在對話框面板中，F(xiàn)igma呈現(xiàn)出的不是單一的文本框，而是支持快捷修改的圖層，并可將更改視為重寫，這個功能比Sketch更容易，操作起來也更富有變化性。

最重要的是，F(xiàn)igma是一款很好的協(xié)作工具，有時甚至不僅僅是“工具”。在Figma中合作就像打開文件直接更改一樣簡單。因為它的操作是基于云的，文檔中的每個人都可以看到進行中的變化，而且能夠完全無縫對接。

最后要說的是，F(xiàn)igma的原型搭建和共享工具對于編程而言十分出彩，由于原型基于HTML語言，所以設(shè)計師可以和任何人分享創(chuàng)意。更何況它還是免費的呢！

重頭戲Sketch（Mac端）終于登場了。至于Sketch為什么在屏幕設(shè)計中如此流行其實一點也不稀奇。當(dāng)Bohemian推出該產(chǎn)品時，市場上根本沒有類似的精品。由于大量的插件和資源支持，Sketch是UX軟件中無可爭議的王者。

近期，Sketch的開發(fā)進程確越來越緩慢，在其最近更新的版本中著重推出的原型搭建功能其實已經(jīng)被InVision收入囊中了。此外多年來Sketch還是只有Mac端的版本，這使得PC端的用戶很苦惱啊。

報告和文檔編繪階段

如果你的點子背后有一些好的想法及一些不錯的藝術(shù)品作支撐，那么無論你是外包，還是在專業(yè)工作室工作，抑或是在大公司設(shè)計部門工作，下一步都是一樣的，那就是要推銷自己。

不過很多設(shè)計師貌似都沒把這一點當(dāng)回事兒，好像大多人認為總有人給介紹，或者自己的作品本身已經(jīng)夠有說服力了。但實際上，好作品的創(chuàng)意只有設(shè)計師本人才能宣傳出來。

為了進行適當(dāng)炒作或者加大宣傳效果，我一般會選擇蘋果的Keynote工具（Mac端）。曾有大型公司內(nèi)部人士告訴我：商業(yè)人士都喜歡幻燈片。

Keynote與PowerPoint、谷歌幻燈片不同，它可以通過一些非常簡單、功能強大的動畫工具進行幻燈片放映。設(shè)計師可以利用這些優(yōu)勢來真正地講述設(shè)計背后的故事。

就像版本控制一樣，文檔在設(shè)計工作中也成了越來越常見的要求，它會記錄設(shè)計中所有必要的細節(jié)，無論是為了商業(yè)營銷還是為了供業(yè)內(nèi)人士參考都尤為重要。

在這一點上，我們團隊使用的是Atlassian公司的Confluence。它本質(zhì)上是一個具有內(nèi)部高級權(quán)限特性的wiki。設(shè)計者可以隨時查看界面屏幕和用戶流，業(yè)務(wù)團隊可以添加接受標準，開發(fā)人員可以使用頁面作為資源來進一步理解設(shè)計師的設(shè)計邏輯和意圖。

但個人并不大喜歡這款軟件，因為笨拙的用戶界面和難用的導(dǎo)航令人體驗有點差。但無論如何，它確實在我們工作過程中扮演著重要的角色。

當(dāng)然說到文檔不得不提個人較為中意的Coda.io。Coda的任務(wù)是用一站式商店取代所有的文檔應(yīng)用程序，可以支持豐富的文本文檔、公式、表格、圖表等操作。但個人認為一旦它退出了beta測試階段，將是一個巨大的打擊。

對此，個人還想說的是，文檔是團隊合作中一個非常重要的部分。這意味著即使你不在討論現(xiàn)場，你的想法和理念也一直存在，這使得任務(wù)在與其他隊員的交接過程中也會產(chǎn)生較少的摩擦。當(dāng)然，事在人為，盡管做成這件事的方法有一萬種，但最關(guān)鍵的還是要開始動手。

開發(fā)者切換階段

在項目度過了最艱難的孵化時期已經(jīng)小有輪廓時，接下來合作商可能會問：什么時候能竣工拿到產(chǎn)品呢？

為解決這個，我們還是得把目光拉回到Zeplin身上。在項目進行中，你的團隊可能使用Zeplin來進行一些操作，這是個能夠快速保持團隊風(fēng)格的好去處，也是一個存儲和檢索關(guān)鍵資源的地方。

如果你開始發(fā)掘Zeplin中更高級的開發(fā)屬性，它的閃光點就爆露出來了，比如導(dǎo)出設(shè)計資源的代碼片段，或者以多個分辨率導(dǎo)出資源，這些都能真正加快開發(fā)進程。這意味著開發(fā)人員不必追著你討要素材來搭建，一切都能馬上傳輸。

為此我們還要再次提到InVision。InVision的運行比Zeplin更簡單，你可以簡單地突出或標明任何對象、組，InVision便能直接賦予它們屬性。這是一個確定大小、文字樣式和顏色的好方法。

你也可以導(dǎo)出資源，但是導(dǎo)出設(shè)置需要事先在Sketch中指定（Zeplin也有同樣的限制）。此外，InVision還支持一些代碼導(dǎo)出功能，但如果想在這方面具體比較InVision和Zeplin，可能需要詢問開發(fā)人員。

在這個問題上，Avocode很值得關(guān)注，因為它不僅僅支持Sketch，還支持Figma、Adobe XD和PS圖象處理軟件。它也是為了從設(shè)計中生成代碼而設(shè)計的。個人對Avocode的經(jīng)驗很有限，但是如果開發(fā)者切換是你工作中的重頭，那么Avocode可能值得一試。

結(jié)語

恭喜你，到此我們走完了從早期概念到最終交付的整個設(shè)計過程。希望你已經(jīng)發(fā)現(xiàn)了一些能以某種方式提升工作效率的應(yīng)用程序。

不過還是要說，本文最大的缺陷在于并沒有討論研究階段。因為個人在一個專業(yè)的設(shè)計團隊工作，有專門的研究員所以沒有包括這一步。但它是任何好的UX誕生中的一個非常非常重要的部分，特別是在設(shè)計和開發(fā)的早期階段。

另一個要注意的問題是，這里列出的許多工具對私人而言都是免費的，但如果你與多個項目或團隊合作，就會變得非常昂貴。如果你有一些很棒的免費或者便宜的替代品，歡迎共同分享。