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

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

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

線框圖和原型設計工具

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

顏色選擇工具

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

圖標工具

Icons8 app

Free IconMaker

IconJar

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

協作工具

Trello

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

Zeplin

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

Presentator

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

結語

一款工具，只有在真正需要並懂得如何使用它們的人手裡，才能發揮其應有的作用。所以，無論如何，不要忘記學習，提升專業技能，並選擇合適的設計工具，創建更加優質的設計作品。

原文鏈接：https://tubikstudio.com/design-process-big-list-of-tools-for-ux-designers/

閱讀更多 Mockplus摹客 的文章

關鍵字: Adobe 工具 設計師