17款設計師必備的設計工具

1 人贊了文章文章來源?

www.pursuer.cn

移動應用程序設計人員一直在尋找合適的工具，從而設計出更有價值的產品。開發有價值的移動應用程序需要頂尖的技能、創造力，當然還有正確的工具。

根據DMI的說法，「在10年內，以設計為中心的公司投資10,000美元的收益將比標準普爾的同樣投資高出228％。」

雖然在紙上繪製線框和產品原型仍然是必不可少的，但是應用程序設計軟體使得與客戶、開發人員和設計人員更輕鬆地共享完成或未完成的工作變得更加容易。

但是現在設計工具如此之多，為您的特定類型的應用程序選擇最佳工具可能具有挑戰性。但是沒關係，今天，我提煉了移動應用程序開發者喜歡使用的17個工具，希望能對你有所幫助。

1.Sketch

Sketch是一款基於MacBook的輕量級UI / UX設計工具，適用於現代應用程序設計人員。Sketch更像是Adobe Photoshop，但它主要用於應用程序原型設計，並且在線框和原型設計空間中佔有最高份額。

下載大小約為20兆位元組，它不會佔用太多系統資源，它可以非常快速地導出你的文件。但是，您需要購買一次，然後每年續訂許可證。它不能製作動畫，卻是大多數設計師的最愛。

因此，如果您想編輯照片，則必須將此應用程序與Photoshop或Adobe Illustrator等其他工具結合使用，但是它不支持PC端使用。

2. Adobe體驗設計（XD）

XD是Sketch的直接競爭對手。如果你是PC粉絲並且一直在尋求使用Sketch但由於它專門支持Mac而受到限制，那麼這對你來說應該是個好消息。

XD基本上為您提供了Sketch - 線框，原型設計等所有功能。

XD非常快速且易於使用，儘管它仍然處於預覽狀態，功能還不是特別完善，但也深受設計師的喜愛，它的發展前途是非常不錯的。

3. Axure RP

Axure RP是專業設計師的完整應用程序設計工具。它試圖為您提供從頭到尾設計應用程序所需的所有功能。當然，這並不意味著它是完美的。

除了原型設計，它還允許您設計線框，模型，流程圖，角色，創意板，用戶旅程，圖表和圖形文檔等等。

有趣的是，如果你想要做一些編碼，它允許你編碼，並且還允許你添加現成的組件和庫，以幫助你無縫地創建更好的設計。

所以在這裡你不受限制，我猜你只受想像力的限制。目前支持OSX和Windows OS系統。

4. Marvel

這款工具可以輕鬆地同步其他工具（如Sketch或Photoshop）和插圖畫家的設計，甚至可以同步Dropbox或Google Drive等雲存儲設計。

因此，您可以使用不同的工具添加您的設計，並使用Marvel使其具有所有動畫功能。

與其他工具不同，Marvel是特定的設計，原型和協作。如果你也正在尋找這樣的設計工具，那麼Marve就再合適不過了。

5. http://Proto.io

通過大量的設計和原型模板，可以使用http://Proto.io。它易於使用，因為不需要編碼。更重要的是，您可以從Sketch或Photoshop無縫導入UI組件。

我們可以使用時間軸功能創建動畫，以在不同屏幕上顯示應用流程。http://Proto.io有很多功能，它可以做得簡單而優雅。

在Dropbox或Google雲端硬碟中擁有資源？http://Proto.io可以輕鬆地同步，以幫助您簡化工作流程。http://Proto.io（Material Design UI Library和離線模式）的這些有趣的功能不容忽視 - 儘管它是一個Web應用程序。

值得慶幸的是，它是一個基於瀏覽器的原型設計工具，您無需下載任何重型軟體，您可以在註冊15天免費試用後立即開始使用它。

6.Origami Studio

Origami是由Facebook工程師開發的獨立界面設計工具，已被Facebook用於設計Facebook Messenger和Instagram等Facebook應用程序，可以免費使用，它是一個功能強大的複雜工具。

您可以使用Origami（Android或iOS）預覽應用原型，從Sketch複製和粘貼圖層並讓它們在Origami中工作。

想向您的客戶或任何人展示您的設計？您可以錄製原型並快速將其發送給Origami應用程序中的任何人。

Origami的另一個很酷的功能是，您可以將其連接到您的iOS或Android設備進行預覽，並在您處理時查看實時更改。

7. OmniGraffle

OmniGraffle是一個圖表設計工具，提供原型屏幕流，戰略地圖，線框圖和各種圖表的功能和自由。

使用OmniGraffle，您可以快速可視化應用程序的流程。因此，它可以幫助您輕鬆規劃應用程序開發。

8. Balsamiq

與其他工具不同，Balsamiq可以幫助您輕鬆地設計線框。如果你正在尋找一種僅僅設計線框的工具，那麼Balsamiq就能很好地完成。

您可以決定製作線框草圖或製作乾淨的線框設計。它速度快，並且有很多UI元素可以與您的設計相匹配。

9. JustIn Mind

JustInMind是一個獨立的工具，用於設計線框和原型設計。可以將此工具下載到您的伺服器以進行團隊協作。它允許您通過其小部件庫將HTML，視頻，在線小部件，文檔，互動式地圖和在線/離線添加到您的應用程序。

JustinMind還允許與JIRA，Microsoft TFS，Doors集成。您可以從同一平台管理您的團隊成員。更重要的是，他們有大量的插件擴展，以幫助您更輕鬆的工作。

10. HotGloo

HotGloo是一個強大的界面設計工具，允許您對需要特定用戶界面的任何類型的移動應用程序進行原型設計。它具有非凡的互動功能。

它允許許多設計人員從任何地方開始處理單個線框項目。它是一個基於Web的工具，這意味著您不受限制 - 您可以從任何地方使用它，並且您不需要下載任何軟體。

11. UI Stencil Kit

如果您與團隊合作，在辦公室中，UI模板工具包可以在您的應用程序頭腦風暴和構思階段為您提供大量幫助。

它有一些粘滯便箋功能，你可以在創意板上發布，使你的初始構思階段非常靈活。UI模板套件是每個設計師必備的工具。把想法寫在紙上，這非常重要。

12.Flinto

也許您想與您的團隊合作，每個人都在使用Mac，現在您正在考慮購買Mac，因為您希望能夠使用Sketch？

好吧，Flinto有一個網路版和Mac版，您可以輕鬆導入Sketch和Photoshop設計並加入您的團隊。你永遠不會覺得自己被排除在外。

13. FramerJS

FramerJS是一個靈活的互動式移動應用程序設計工具，允許您編寫或使用他們的可視化編輯工具，在後端自動生成相應的代碼，如果您想更改代碼，也可以。如果你只是一個視覺設計師，視覺編輯器應該沒問題。

FramerJS不是剛開始使用訪問他們網站的應用程序。您需要接受一些免費提供的培訓。您可以學習如何使用該工具創建強大的線框和原型。

基本上，對於Framer，你的想像力有限。您可以預覽原型。它有助於簡化工作流程，並輕鬆地從Sketch，Figma和Photoshop導入您的設計，並與您的團隊成員協作。

14. InVision

您是否已經完成了設計並需要為其添加交互性？inVision允許您上傳設計文件並添加動畫，手勢和過渡，以將靜態原型轉換為互動式可點擊原型。

它可以幫助您通過有效的協作來指導和管理工作流程。

15.Zeplin

Zeplin是一個面向設計人員和開發人員的協作工具。它遠遠超出了設計和工作流程，它允許移動設計師創造傑作。它允許您從Photoshop和Sketch上傳線框和視覺設計，並將它們添加到Zeplin中的項目文件夾中。

構建產品規範文檔並每隔一段時間重複一次這樣做真的很乏味。但是 使用Zeplin，就不需要這樣做了。

開發人員無需等到設計人員在獲得規範之前完成設計，因為開發人員可以儘早引入該過程，並為Sketch或Photoshop上傳的文件生成注釋。

迭代可以同時完成 - 從而減少項目的迭代次數。

16. UXPin

您希望能夠在沒有代碼的情況下創建功能強大的用戶體驗，並在一個地方完成從設計到開發的整個過程的方式嗎？那找UXPin就夠了。

UXPin是一個拖放UI / UX設計工具，用於創建高端保真線框和原型。

它允許您在程序中或從Photoshop或Sketch中進行設計並將其導入UXPin，您可以在短時間內創建互動式工作流和線框。

由於它有很多內置元素，因此您不受任何限制。也就是說，您可以嘗試使用1000多種內置元素來處理Web，移動和桌面產品。

17. Iconjar

組織你的圖標無法改善，Iconjar允許您將所有圖標上傳並存儲在一個可以搜索它們的位置，然後將它們拖放到Sketch或Photoshop上的項目中。

一直搜索和上傳圖標可能會非常緊張和耗時 - 實際上，Iconjar消除了這種麻煩。現在，您可以在一個地方組織數千個圖標，然後，在Sketch，Photoshop或Illustrator上拖放到您的項目中。

但是，您可能無法上傳.ai和.sketch文件。

結論

原型為您的新想法賦予生命。我們不需要全部使用這些工具，您只需要找到真正適合您的工具。

如果您想了解更多的前瞻信息和權威專家普修的專業性建議，就留言聯繫我們吧！也歡迎您加入我們的微信群，和我們一起學習汽車HMI設計和設計類相關知識，留言進群。

參考：Nag Corporation：18 Of The Best Tools For Mobile App Designers