ui設(shè)計(jì)常用工具

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

 

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

一、線框
 

　　01. 模擬流
 

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

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

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

　　02. 巴爾薩米克
 

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

　　03. 阿克斯雷
 

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

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

　　04. Adob??e Comp
 

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

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

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

　　05.素描

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

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

　　06. InVision Studio
 

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

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

　　07.工藝
 

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

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

　　08. Proto.io

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

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

　　09. Adob??e XD

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

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

　　10.奇跡
 

用Marvel構(gòu)建頁(yè)面非常簡(jiǎn)單
 

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

　　11.菲格瑪
 

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

　　12.成幀器X
 

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

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

　　13.弗林托
 

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

　　14.原則
 

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

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

　　15. UXPin
 

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

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

　　16.原型
 

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

　　17.賈斯汀敏德
 

Justinmind與Photoshop和Sketch完美集成
 

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

　　18.折紙工作室
 

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

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

　　19.流體

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

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

　　20.主題演講
 

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

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

　　21.黃金比例排版計(jì)算器
 

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

　　22.齊普林
 

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