乾貨！全部UX設計過程所需工具都在這兒了, 不能再全了

如下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

聽說，真正專業優秀的UX設計師是不會介意使用哪款工具。由於，只要能力足夠， 即便條件不一樣，工具不一樣，也能設計出讓人眼前一亮的做品。或許，這樣的認識自己並無什麼大問題。但，現今，設計師明明擁有如此優質的條件和選擇，爲何還要委屈本身，使用一些不順手或很差用的工具呢？

科學技術不斷髮展，也爲設計師提供了更多高效實用的設計工具。那麼，做爲經常須要頂着巨大壓力，在嚴格期限內製做出高質量做品的UX設計師，爲何不直接選擇一系列高效的設計工具來提升工做效率呢？

不用擔憂。本文將根據相關設計經驗和研究，爲廣大UI和UX設計師介紹一系列實用高效的設計工具。讓咱們一塊兒來看看，它們都有什麼吧：

線框圖和原型設計工具

Sketch

Sketch是目前爲止UI設計師羣體中最受歡迎的設計工具之一。 其最大的優點就是爲用戶提供了簡潔易懂的設計功能。並且，它也可做爲原型工具用於建立圖標和插畫。Sketch是一款基於矢量，並可以經過其工具面板，實現層級以及形狀編輯和設計的工具。

此外，sketch還爲用戶提供了有效的設計指導。 例如，設計師能夠簡單按住Alt鍵來查看組件的具體尺寸，以及組件之間的間隔。並且，因其簡單的功能設計，軟件自己可以更加簡潔輕便，運行速度更快，從而更加有效的節省設計師時間和精力！然而，有一點不太滿意的地方就是：Sketch只擁有Mac版本。Windows系統是沒法使用的。

AdobeXD

全新的UI和UX設計方法的出現，鼓勵了不少軟件開發人員改進和升級他們的產品，尤爲是建立了一些全新的，側重於某些特定方面的（例如佈局結構）的產品。而Adobe集團也不例外。於2016年推出了最新的Adobe XD (體驗設計)。這款軟件做爲Photoshop和Illustrator的替代品，在UI和UX設計師羣體中，得到了至關高的評價。

Adobe XD是一款專爲UX設計師建立線框圖，交互式原型以及完成矢量設計而開發的設計工具。一經發布，就吸引了一部分Adobe迷的迴歸，嘗試使用和熟悉其關於UI設計方面的新功能。而對於那些不太瞭解網頁設計的新手用戶來講，XD界面使用和理解起來，就有些困難了。此外，到目前爲止，Adobe XD支持Mac和Windows10的操做系統。

Figma

Figma是當今最流行的設計工具之一。它是一款能爲UI設計師帶來創新設計方案和可能的設計工具。首先，它是一款基於web的專業設計工具，容許設計團隊在線實時協做，完成頁面設計。並且，設計師在使用過程當中，還可以輕鬆導出相關設計的CSS代碼，以增強與開發團隊的溝通協做。用戶註冊以後，便可免費建立線框圖，原型以及矢量圖標。但，這些功能僅僅針對我的用戶免費。團隊用戶，則需先付費。此外，該款設計工具適用於多種操做系統。

Lunacy

Lunacy並不能直接用於建立線框圖，但卻在設計師建立線框圖的過程當中發揮着巨大做用。這是由於Lunacy容許Windows用戶打開並修改各類Sketch文件。因此，對於那些有成員使用Windows系統的設計團隊來講，它會很是實用。換而言之，在流程圖建立的各個階段，Lunacy都能讓整個設計過程更加高效，並且對全部設計參與人員（包括設計師，開發者，客戶以及管理人員）都很友好。

交互原型設計工具

Mockplus

Mockplus是一款更快，更簡單的交互原型設計工具。封裝了超過3000個矢量圖標的強大圖標庫，組件庫以及樣式庫，方便設計師簡單拖拽或點擊，便可快速地建立所需Web或App設計原型。支持Sketch 圖片導入， 實現設計理念輕鬆快速的原型化。並且，爲提高設計效率， Mockplus提供了8種演示和分享方式，包括Android和iOS設備預覽，方便設計師根據具體狀況分享，測試和迭代設計想法，及時收集設計反饋。

其最新團隊版和企業版推出的團隊協做和管理功能，對於公司設計團隊協做完成交互設計，管理團隊成員，也是很是實用。此外，Mockplus支持Mac和Windows各版本的操做系統，設計師無須擔憂因團隊成員操做系統的不一樣，而擔憂設計進程和效率。

Marvel

Marvel是一款基於雲端的交互原型設計工具，無需任何編碼。設計師能夠簡單下載Sketch或Photoshop線框圖，甚至僅憑一張紙上草圖的照片，建立逼真的移動App或Web原型。Marvel提供了建立無限項目並容許爲前3個項目添加評論的免費服務。固然，設計師也可付費，得到自由建立項目，添加評論，刪除Marvel商標以及其餘附加服務。

InVision

摹客，定製你的設計規範

設計系統

InVision也是一款免費的交互原型建立工具。 InVison之因此受歡迎，是由於其支持Sketch和PhotoShop文件的輕鬆導入，以構建動態設計。並且，設計師能夠經過連接網頁來模擬真實網站或移動應用的跳轉和功能，製做出更加真實的交互原型。此外，InVision爲提高反饋效率，還提供了用戶可直接在原型上添加評論的功能。

其另一個特色就是：可以在不一樣的「columns」中組織各類界面組件，並展現其狀態，例如 "待辦事項"、"正在進行" 或 "已審覈"。如此，客戶和設計師就可以更有效的管理各類工做流程。

Principle

Principle是一款簡單且旨在建立動態界面的設計工具。其突出的特色在於支持離線設計。如此，用戶工做進度就不會受到網絡鏈接狀況的影響。並且，用戶建立的交互原型可以簡單的轉化成GIF圖片或視頻，以便更加輕鬆的分享到Dribbble設計做品集或其餘地方。加之，因爲其界面與Sketch很是的類似，對大部分設計師來講使用起來也十分簡單方便。此外， Principle支持iOS設備預覽。然而，不幸的是，Principle只支持iOS系統。對於Windows用戶來講就得另找合適的工具了。

UXPin

UXPin團隊，做爲公認的UX設計領域的專家，常常在各類書籍和文章中分享其的設計經驗和知識。他們開發設計的產品，UXPin編輯器，是一款基於Web的原型工具，支持建立線框圖和高質量原型，並將它們輕鬆轉換成交互式原型。並且，設計師可簡單導入Sketch或PhotoShop圖片，便可建立各種原型。 此外，此款工具還可爲開發人員自動生成風格指南和設計規範，提高工做效率。

顏色選擇工具

ColorHexa

ColorHexa是一款基於Web，且可以幫助用戶生成有效配色方案的免費設計工具。設計師直接在搜索框內輸入顏色值，便可得到相關顏色詳情，例如色彩，陰影和色調，以及其它替代顏色和配色方案。此款設計工具最大的優勢之一就是，展現了色彩將如何被一些擁有視覺缺陷的人羣所感知。如此，設計師就可以確保其設計對於受視覺缺陷影響的人們來講也是很是友好的，從而提升其設計的可訪問性。此外，ColorHexa還爲用戶提供了不一樣格式色彩的替代方案。

Paletton

Paletton，做爲UI 設計師們經常使用的色彩選擇工具，是一款免費的Web工具，可以幫助設計師選擇顏色，建立更加溫馨和諧的界面設計。其功能設置也很是簡單：用戶只需在色輪上選擇須要的色彩或直接輸入色彩值，就可得到漂亮的配色方案。固然，設計師也可簡單選擇一種配色方案，而後查看在不一樣色調下，相似的配色方案。

FlatUI Color

扁平化設計一直很受歡迎。這也是爲何擁有一款可以幫忙設計師們選擇扁平設計顏色的工具已成爲必然的緣由。而Flat UI Color就是這樣一款提供了豐富扁平設計配色方案的網頁工具。其提供的全部顏色都包含十六進制代碼, 容許設計師直接粘貼複製到一些經常使用軟件,好比 Photoshop， 或風格指南中使用。但有一點侷限的地方就是，Flat UI Color只對常用扁平設計的用戶有用。

MaterialDesign Color Tool

Material Design Color Tool， 做爲大部分設計師所熟知的Googlematerial design 的一部分，是一款基於Web的免費應用。此款應用專一於爲移動端設計提供配色方案。設計師能夠在其移動模板上預覽各類配色方案，從而選擇更適合的配色。此外，使用該款軟件時，用戶也能找到相關配色方案的可訪問性數據，並在須要的時候對其進行調整和修改。而這，對於頁面的可訪問性設計很是實用。

Pictaculous

爲尋找顏色設計靈感，許多設計師都會搜索大量漂亮圖片進行參考。而Pictaculous可以幫助設計師分析這些圖片中呈現的色彩，並給出相似的配色方案。用戶只需從本地上傳一張圖片，就能得到擁有16進制碼的色彩推薦。此外，這款工具推薦的配色方案還能夠保存爲Adobe Swatch文件，以方便後期使用。

排版工具

Google fonts

頁面排版是數碼產品Web或App用戶體驗最基本的影響因素之一。這也就解釋了爲何擁有一款可以建立有效排版的便利工具是多麼重要。

Google fonts是一款很受歡迎的免費Web應用，擁有超過600種字體。每一種字體類型都均可以應用到自定義文本中，以不一樣尺寸進行預覽。並且，該應用還會顯示每種字體的加載時間，確保用戶不會花費太長的時間等待。此外，Google fonts提供了在產品中嵌入特定字體的相關數據，方便用戶在HTML文檔的右邊部分複製粘貼使用專門爲所選字體生成的代碼。

Typekit

Typekit是一款經住時間考驗的設計工具。在其字體庫裏，用戶能夠找到並使用各類各樣的字體，例如一些經常使用的經典字體和一些全新的字體。並且，用戶只需訂閱，便可得到對全部字體的訪問權限。該工具界面還清晰顯示了字體相關的全部基本數據，好比字體粗細和樣式等。更重要的是，它容許用戶查看不一樣大小和不一樣顏色背景的字體。

Fontjoy

衆所周知，字體配對是排版設計最大的難題之一。現在，現存數以千計的字體種類的狀況下，完美配對的過程自己就會很是漫長，而這，對於工具自己的用戶體驗是很是不利的。而不一樣的是，Fontjoy就是一款使用便利，可以快速實現Google 字體配對的設計工具。用戶可簡單選擇字體，並設置其屬性，例如尺寸和粗細等。

此款免費工具可以從谷歌網絡字體中直接獲取一個完整的字體庫，並把它們呈如今一個頁面內。用戶只需選擇須要的測試字體，並設置好相關參數，例如頁面字體尺寸，粗細，行距。而後，等待系統匹配就好。此外，用戶還能夠經過應用頂部的滑條來調節對比度或類似度。

Typetester

當設計師們沒法在兩種字體中作出選擇時，Typetester可以幫助他們快速測試和比較這兩種字體，從而更加快速的選擇適合的一種完成設計。Typetester支持多種字體同頁面預覽，並同時顯示相關字體數據，例如行距和字間距等參數。並且，Typetester還支持不一樣來源的字體選擇，例如谷歌字體或蘋果Mac默認字體，並經過調整字體大小、對齊方式以及定製文本和背景進行測試。

Calligraphr

定製字體是增長產品設計創意的一種有效方式。而Calligraphr是一款能夠根據手寫字樣建立自定義字體的工具。用戶只需下載一個模板，並手寫一些字樣。該工具即會識別並生成相應的矢量字體。並且，生成以後，用戶還可根據須要，編輯和調整相關字體的詳細信息，以改進這些自定義字體。

圖標工具

Icons8 app

Icons8 app是一款支持Windows和Apple設備的應用，封裝了超過6.5萬各種數碼產品圖標。其圖標庫天天都會更新。Icons8還提供了各類引導，以幫助用戶找到合適的圖標，例如各類格式的 iOS、Android 和 Windows 平臺的圖標。並且，選中的圖標還可以直接複製到Sketch、Figma 和其餘工具中使用。此外，全部圖標都能在編輯器內調整色彩和尺寸。Icons8支持100×100的PNG圖標免費下載。如若用戶但願得到全部圖標的訪問權限, 則須要先付費購買激活碼。

Free IconMaker

固然，如若設計師並不喜歡網上的各類圖標，還能夠本身動手設計製做。而圖標的自制可使用一些可視化編輯器（好比Sketch, Illustrator, and Figma等）設計建立，也可選擇一些免費的Web設計工具設計完成。而FreeIcon Maker就是這樣一款可以幫助設計師們在線建立和編輯圖標的工具。一旦註冊，用戶就可自由地使用全部的設計功能，例以下載SVG圖標文件在軟件內編輯。

IconJar

設計師們時常會下載數百個圖標包，卻找不出合適的一種應用到設計中。而IconJar是一個很是有效的組織者，將特定的圖標封裝在文件夾內進行分類。例如，若是用戶須要一個名爲「home」的圖標，能夠按其名稱進行搜索，該工具就會顯示全部來自不一樣集合的相關圖標。儘管，現今IconJar只支持Mac系統，但不久就會發布其Windows版本。不足的是，該程序是須要付費的, 雖然它也爲用戶提供免費試用版。

協做工具

Trello

在項目監管以及信息流監管方面，我的更偏好Trello。由於Trello簡單有效，清晰直觀。具備一系列功能的」boards」和「cards」造成了清晰高效的協做系統。用戶能夠將任何任務劃分紅各類「sprints」，並經過實時更新和圖像展現，顯示任務執行進程。用戶也可輕鬆設置期限 (即截止日期), 將任務委派給特定人員, 建立清單, 並標記出最重要和最緊急的任務。而更重要的是，它不只是一個設計成熟的工具網站，並且也是一款快速有效的IOS和Android協做工具。這一點也使用戶可以更快的獲取反饋，從而節約時間和精力，簡單輕鬆的實現項目管理。因此，Trello是設計師，項目經理和客戶一塊兒協做建立快速有效工做流的最佳工具。

Zeplin

一個成功的設計項目是創建在創意團隊和客戶之間有效交流和溝通的基礎之上。而ZePin是一個可以加強設計師和開發人員之間協做交流的平臺。其主要特色是擁有一個詳細的風格指南生成器，以確保設計元素可以被準確恰當地應用。用戶可直接上傳線框圖，並將它們添加到Zeplin的項目文件夾中，從而方便開發人員得到關於設計的全部數據，包括UI組件的尺寸、顏色和CSS推薦等。

Presentator

Presentator是一款基於Web的免費協做工具，可以在協做團隊成員、開發人員和客戶之間實現設計資源共享。用戶能夠下載一個文件並設置其權限。例如，有些協做成員可能擁有徹底訪問的權限，而其餘人可能只擁有查看的訪問權限。這個工具最大的優勢就是：它對全部人來講都是免費的。

結語

一款工具，只有在真正須要並懂得如何使用它們的人手裏，才能發揮其應有的做用。因此，不管如何，不要忘記學習，提高專業技能，並選擇合適的設計工具，建立更加優質的設計做品。

做者：Alina Arhipova

原文連接：tubikstudio.com/design-proc…

學習工具，但不受限於某種工具。Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。