ui設(shè)計常用工具

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

 

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

一、線框
 

　　01. 模擬流
 

MockFlow使您能夠快速構(gòu)建基本布局
 

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

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

　　02. 巴爾薩米克
 

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

　　03. 阿克斯雷
 

　　Axure是用于更復(fù)雜項目的出色工具
 

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

　　04. Adob??e Comp
 

如果您想隨時隨地進(jìn)行線框設(shè)計，則必須使用Comp
 

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

二、用戶界面設(shè)計和原型
 

　　05.素描

草圖是設(shè)計人員的首選選擇
 

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

　　06. InVision Studio
 

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

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

　　07.工藝
 

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

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

　　08. Proto.io

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

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

　　09. Adob??e XD

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

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

　　10.奇跡
 

用Marvel構(gòu)建頁面非常簡單
 

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

　　11.菲格瑪
 

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

　　12.成幀器X
 

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

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

　　13.弗林托
 

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

　　14.原則
 

　　Principle非常適合構(gòu)建美觀的動畫交互
 

　　交互設(shè)計是Principle擅長的領(lǐng)域，特別是在移動應(yīng)用程序方面。使用Principle輕而易舉地調(diào)整并獲得正確的動畫交互。您可以查看單個資產(chǎn)以及它們?nèi)绾为毩赢?，直到時機(jī)和寬松。
 

　　15. UXPin
 

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

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

　　16.原型
 

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

　　17.賈斯汀敏德
 

Justinmind與Photoshop和Sketch完美集成
 

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

　　18.折紙工作室
 

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

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

　　19.流體

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

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

　　20.主題演講
 

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

三、其他UI設(shè)計工具
 

　　21.黃金比例排版計算器
 

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

　　22.齊普林
 

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