ui設計常用工具

　　最好的UI設計工具可以適應幾乎所有設計過程，并有望滿足您的創(chuàng)意需求?，F(xiàn)在是探索新工具并查看可用于設計和展示項目的好時機。但是，既然有這么多的UI設計工具，那么應該使用哪些工具?在過去的幾年中，Sketch和InVision的組合一直是許多設計師的流行選擇，但其他工具卻提供了具有競爭力的功能和選項。從來沒有比以前更好的原型設計和線框工具選擇了，所以我們認為現(xiàn)在是仔細研究一些最佳工具的好時機。

 

　　有關更多常規(guī)工具，請參見我們的Web設計工具綜述。
 

一、線框
 

　　01. 模擬流
 

MockFlow使您能夠快速構建基本布局
 

　　MockFlow是一套應用程序，對典型項目過程中的許多任務非常有幫助。首先，WireframePro應用程序是供您使用的很好的替代原型制作工具，尤其是在您測試一些新想法時。
 

　　如果您只需要創(chuàng)建線框，那么請看一下MockFlow。這對于處理初步構想非常有用，它使您能夠快速構建基本布局，而這有時是使思想變?yōu)榭杀硎拘问剿璧娜俊?br />  

　　02. 巴爾薩米克
 

　　Balsamiq的拖放元素使生活更輕松如果您正在尋找快速線框圖，那么Balsamiq是一個強烈的建議。您可以輕松快速地為您的項目開發(fā)結構和布局。拖放元素使生活更輕松，您可以將按鈕鏈接到其他頁面。這意味著您可以快速開始計劃界面，然后與您的團隊或客戶共享它們。
 

　　03. 阿克斯雷
 

　　Axure是用于更復雜項目的出色工具
 

　　Axure一直是市場上最好的線框圖工具之一，非常適合需要動態(tài)數(shù)據(jù)的更復雜項目。使用Axure，您可以真正專注于模擬更具技術性的項目，并且在結構和數(shù)據(jù)方面需要格外注意。
 

　　04. Adob??e Comp
 

如果您想隨時隨地進行線框設計，則必須使用Comp
 

　　對于那些發(fā)現(xiàn)自己在旅途中創(chuàng)建和概念化的用戶而言，Adobe Comp是一個不錯的選擇。用智能鉛筆有數(shù)位板嗎?如果您在離開主工作區(qū)時可以激發(fā)靈感以開發(fā)一種新的布局概念，那么這將值得下載。
 

二、用戶界面設計和原型
 

　　05.素描

草圖是設計人員的首選選擇
 

　　Sketch是設計社區(qū)中非常流行的工具，使您可以創(chuàng)建高保真度接口和原型。Symbols是其中一項出色的功能，您可以在其中設計UI資產(chǎn)和元素以進行重用。這有助于創(chuàng)建設計系統(tǒng)并使界面保持一致。從那里，您可以輕松地將設計導出到可點擊的原型中。如果您是InVision用戶，請確保簽出Craft插件(有關更多信息，請參見下文)
 

　　06. InVision Studio
 

　　使用InVision Studio，您可以在單個畫板上創(chuàng)建自適應設計
 

　　InVision Studio即將實現(xiàn)許多UI設計師的夢想。該工具仍處于早期發(fā)行版，將幫助您創(chuàng)建帶有大量功能的精美交互界面。您可以根據(jù)許多手勢和交互來創(chuàng)建自定義動畫和過渡。最重要的是，您可以停止考慮為多個設備創(chuàng)建多個畫板，因為可以在單個畫板上實現(xiàn)響應式設計。這樣可以節(jié)省大量時間，因此您可以想到更多的想法。
 

　　07.工藝
 

　　Craft是Sketch或Photoshop用戶的必備工具
 

　　如果使用Sketch或Photoshop進行UI設計，則需要使用Craft。該插件可以完成所有工作，將文件與Invision原型無縫同步，并使用真實數(shù)據(jù)和股票攝影填充模型。
 

　　08. Proto.io

　　Proto.io可以帶您從粗略草圖到逼真的原型
 

　　Proto.io是一個令人難以置信的競爭者，可以創(chuàng)建從粗糙的想法到完整的設計等逼真的原型。該工具還為您的項目提供了很多可能性，包括詳細的動畫和自定義矢量動畫。您可以先以手繪樣式來開發(fā)初始構想，然后將其加工成線框圖，最后以高保真原型完成。如果您想使用其他工具進行設計，Sketch和Photoshop插件確實可以提供幫助，但是Proto.io確實能夠很好地處理端到端設計過程。用戶測試等其他功能也將有助于驗證您的設計。這是一站式解決方案，已經(jīng)有許多值得信賴的品牌使用它。
 

　　09. Adob??e XD

　　如果您被鎖定在Adobe工作流程中，那么XD是一個不錯的選擇
 

　　Adobe XD在Adobe Creative Cloud設計工具集合下為數(shù)字項目提供了最佳環(huán)境。如果您是Adobe的熱衷用戶并且是XD的新手，那么您可能不會覺得它的界面非常像Adobe。如果您已經(jīng)在Photoshop中進行了一段時間的設計，那是一個跳躍。但是它確實可以與其他領先工具相結合，如果您是Adobe的忠實擁護者，則值得這樣做。另外，請查看有關Adobe XD插件的建議。
 

　　10.奇跡
 

用Marvel構建頁面非常簡單
 

　　Marvel是另一個原型制作工具，在產(chǎn)生快速構想和完善界面時是一個不錯的選擇。與此類其他許多應用程序一樣，Marvel提供了一種非常整潔的方式來構建頁面，并使您能夠通過原型模擬設計。與Marvel進行了一些出色的集成，這意味著您可以將設計插入項目工作流程中。
 

　　11.菲格瑪
 

　　Figma使您能夠快速組成和設計界面。Figma平臺引以為豪的是它是一個協(xié)作設計工具，多個用戶可以同時在一個項目上進行工作-當您在項目中有多個涉眾參與制定結果時，這非常有效。如果您有一個實時項目，例如開發(fā)人員，撰稿人和設計師需要同時進行某些工作，那么這是一種理想的工具。
 

　　12.成幀器X
 

　　如果您使用的是React，那么Framer X可以和它一起出色地工作
 

　　Framer X是一個非常令人興奮的新設計工具，對于想要從其工具中獲得更多幫助的經(jīng)驗豐富的UI設計師來說，當然值得一看。原型設計和創(chuàng)建交互非常容易。如果您是React的忠實粉絲，那么別無所求，因為您可以同步設計和編碼。除了是出色的工具之外，F(xiàn)ramer X背后還有強大的設計師社區(qū)，提供UI資產(chǎn)和工具包。
 

　　13.弗林托
 

　　Flinto是一個很好的簡單設計工具，可讓您在設計中創(chuàng)建獨特的交互。通過設計前后狀態(tài)，您可以利用多種手勢并創(chuàng)建簡單的過渡。Flinto只是找出差異，然后為您設置動畫。
 

　　14.原則
 

　　Principle非常適合構建美觀的動畫交互
 

　　交互設計是Principle擅長的領域，特別是在移動應用程序方面。使用Principle輕而易舉地調整并獲得正確的動畫交互。您可以查看單個資產(chǎn)以及它們如何獨立動畫，直到時機和寬松。
 

　　15. UXPin
 

對于大型項目和設計系統(tǒng)，UXPin是最佳解決方案
 

　　被描述為“端到端” UX平臺的UXPin本質上是另一種設計工具，但具有創(chuàng)建設計系統(tǒng)的強大功能。UXPin為需要設計相同樣式和指南的較大的設計團隊提供服務，從而在協(xié)作起著重要作用時節(jié)省了產(chǎn)品開發(fā)的時間。
 

　　16.原型
 

　　ProtoPie使您能夠創(chuàng)建非常復雜的交互，并且非常接近您希望設計工作的方式。也許最突出的功能是能夠控制原型中智能設備的傳感器，例如傾斜，聲音，指南針和3D Touch傳感器。根據(jù)您的項目，這是包含本機應用程序功能的好工具。就像餡餅一樣簡單，不需要任何代碼。
 

　　17.賈斯汀敏德
 

Justinmind與Photoshop和Sketch完美集成
 

　　Justinmind這個工具可協(xié)助進行原型制作并與Sketch和Photoshop等其他工具集成。您可以選擇交互方式和手勢來幫助將原型組合在一起。它還包含UI工具包，使您可以快速將屏幕放在一起。
 

　　18.折紙工作室
 

折紙包含有用的功能，例如自定義規(guī)則和交互邏輯
 

　　鑒于Origami Studio是由Facebook的設計師構建和使用的，您可能會認為這一定是一個很棒的工具。而且你會是對的。折紙有很多功能，包括在交互中添加規(guī)則和邏輯。您希望按鈕顯示多少次或由于其他原因而有所不同?有機會使用折紙創(chuàng)建真實的原型，但這是非常技術性的，需要一些學習。該工具非常適合開發(fā)人員和設計師一起工作。
 

　　19.流體

Fluid出色而直觀，并具有一些出色的UI資產(chǎn)
 

　　Fluid是構建快速原型和進行設計的直觀工具。它開箱即用地打包了一些不錯的資產(chǎn)，使您可以快速使用原型，并且在升級后，可以輕松地將自己的符號與首選的UI資產(chǎn)組合在一起。
 

　　20.主題演講
 

　　除了用作創(chuàng)建演示文稿的好工具之外，Keynote(尤其是它的Magic Move過渡)也是快速為設計動畫化和傳達想法的方法之一。
 

三、其他UI設計工具
 

　　21.黃金比例排版計算器
 

　　決定航向大小嗎?該GRT計算器使用的黃金比例的科學產(chǎn)生的是可以在你的界面設計中使用的排版比例。
 

　　22.齊普林
 

　　Zeplin不一定是原型制作工具，但它非常適合與原型制作一起進行的后期設計和預開發(fā)階段。它使您能夠采用您的設計和原型，將其移交給開發(fā)人員，并確保您的想法得到了很好的執(zhí)行。您可以將Sketch，Photoshop，XD和Figma文件上載到Zeplin，這將為開發(fā)人員和設計人員創(chuàng)建一個移交項目的環(huán)境，而無需進行繁瑣的創(chuàng)建準則的工作。但是，值得確保首先需要它。