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

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

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

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

概念構(gòu)思階段

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

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

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

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

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

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

合作共享與版本控制階段

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

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

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

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

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

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

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

Trunk的這一屬性對(duì)設(shè)計(jì)師合作團(tuán)隊(duì)來說無疑是福音，因?yàn)樵僖膊槐負(fù)?dān)心其中未知的改動(dòng)而不知道緣由。設(shè)計(jì)師甚至可以以回滾的方式將文檔返回到變化前并重新處理其中矛盾的部分，這是其最大的魅力所在。

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

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

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

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

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

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

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

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

原型設(shè)計(jì)階段

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

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

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

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

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

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

高保真設(shè)計(jì)階段

這個(gè)部分比較籠統(tǒng)，我會(huì)盡可能簡潔地介紹，因?yàn)橛行┊a(chǎn)品上文已經(jīng)提到過了。

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

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

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

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

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

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

報(bào)告和文檔編繪階段

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

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

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

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

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

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

但個(gè)人并不大喜歡這款軟件，因?yàn)楸孔镜挠脩艚缑婧碗y用的導(dǎo)航令人體驗(yàn)有點(diǎn)差。但無論如何，它確實(shí)在我們工作過程中扮演著重要的角色。

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

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

開發(fā)者切換階段

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

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

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

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

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

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

結(jié)語

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

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

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