作為UI設(shè)計(jì)師必備的20個(gè)app設(shè)計(jì)工具，拿來吧你~

時(shí)間：2023-09-26 18:54:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 18:54:02 來源：網(wǎng)站運(yùn)營(yíng)

作為UI設(shè)計(jì)師必備的20個(gè)app設(shè)計(jì)工具，拿來吧你~：眾所周知，適合的工具可以為你帶來事半功倍的效果。根據(jù)UI設(shè)計(jì)專業(yè)的特點(diǎn)將20個(gè)工具進(jìn)行介紹，他們分別是：原型設(shè)計(jì)、線框繪制、調(diào)動(dòng)情緒、動(dòng)效設(shè)計(jì)。

以下20個(gè)移動(dòng)應(yīng)用程序UI設(shè)計(jì)工具將為你提供創(chuàng)建完美UI設(shè)計(jì)所需的必要元素。想學(xué)UI設(shè)計(jì)的同學(xué)們看起來吧。

原型設(shè)計(jì)

01.Adobe Photoshop

# 多年來，Photoshop是UI設(shè)計(jì)80%時(shí)間都在用的軟件，主要是去做界面、Banner、Appicon、切圖等以靜態(tài)視覺為核心的工作。基本都使用里面的矢量工具去繪制，UI設(shè)計(jì)師必須非常熟練的掌握此軟件！Photoshop可用于為復(fù)雜的移動(dòng)應(yīng)用程序創(chuàng)建界面。該程序的基本功能很容易掌握，但想要精通所有技能還是需要經(jīng)過專業(yè)的學(xué)習(xí)和培訓(xùn)才可以。




02.Sketch

# Sketch是在UI行業(yè)開天辟地的軟件，也可以說是第一款完全針對(duì)UI界面設(shè)計(jì)的工具。是一款基于MacBook非常出色的輕量級(jí)UI/UX 設(shè)計(jì)工具。Principle是可以與Sketch無縫對(duì)接的動(dòng)效設(shè)計(jì)軟件，與Sketch配合能做出很多可以操作的UI靜態(tài)+動(dòng)態(tài)效果設(shè)計(jì)。

用戶友好的布局使Sketch非常適合初學(xué)者這兩個(gè)可以算是專門為UI設(shè)計(jì)開發(fā)的軟件，但是只有Mac版本，Windows電腦無法使用，導(dǎo)致這個(gè)軟件在行業(yè)內(nèi)的通用性存在問題。它對(duì)比PS的優(yōu)勢(shì)就是更輕量化，軟件打開更快，多畫布、組件、快速填充等帶來的效率提升是平面軟件無法比擬的。




03.Adobe XD

#XD是Adobe自家推出的針對(duì)界面設(shè)計(jì)的軟件，用來和Sketch、Figma進(jìn)行競(jìng)爭(zhēng)。Adobe XD是一站式UX/UI設(shè)計(jì)平臺(tái)，在這款產(chǎn)品上面用戶可以進(jìn)行移動(dòng)應(yīng)用和網(wǎng)頁設(shè)計(jì)與原型制作。同時(shí)它也是唯一一款結(jié)合設(shè)計(jì)與建立原型功能，并同時(shí)提供工業(yè)級(jí)性能的跨平臺(tái)設(shè)計(jì)產(chǎn)品。設(shè)計(jì)師使用Adobe XD可以更高效準(zhǔn)確的完成靜態(tài)編譯或者框架圖到交互原型的轉(zhuǎn)變。XD可用于創(chuàng)建線框、模型和原型，可以在PC端和移動(dòng)設(shè)備上實(shí)時(shí)預(yù)覽。使用Adobe XD的字符和布局工具輕松創(chuàng)建和使用元素，之后還可輕松導(dǎo)出單個(gè)對(duì)象。




04.Framer.JS

# 如果你想要一個(gè)用于移動(dòng)應(yīng)用程序設(shè)計(jì)的交互式且靈活的工具，F(xiàn)ramer.JS可能就是很好的選擇。Framer.JS最大的優(yōu)點(diǎn)是它是開源的，只需要知道如何使用HTML和CSS設(shè)置JS文件，就可以將其很好的運(yùn)用在自己的作品集中。Framer 比較適合做一些精細(xì)動(dòng)效的打磨和傳統(tǒng)軟件不能實(shí)現(xiàn)的新場(chǎng)景（語音交互、TV 遠(yuǎn)程遙控等）。

Framer支持導(dǎo)入Sketch和Photoshop文件的導(dǎo)入，十分方便快捷，對(duì)于新手也很友好。




05.Origami Studio

# Origami Studio是Facebook團(tuán)隊(duì)于2016年開發(fā)的免費(fèi)設(shè)計(jì)工具。該軟件可幫助快速設(shè)計(jì)和共享交互界面。該程序的補(bǔ)丁編輯器可用于創(chuàng)建原型，而它巨大的補(bǔ)丁庫(kù)包含有動(dòng)畫、開關(guān)和布爾運(yùn)算符等設(shè)計(jì)元素。Origami Studio刻意追求與Sketch一致的使用邏輯，在畫面的右邊你的每個(gè)設(shè)計(jì)元素都是一個(gè)Layer（圖層），所有的交互動(dòng)作在這些layer的基礎(chǔ)上開展。Origami Studio準(zhǔn)備了非常實(shí)用的iOS和Material Design預(yù)置圖層，可以調(diào)用幾乎所有的基礎(chǔ)組件如甚至包括攝像頭、高斯模糊！也就是說你可輕易的實(shí)現(xiàn)一個(gè)具有錄像功能的交互原型，如果你在Photoshop或Sketch中有設(shè)計(jì)，也可以將它們復(fù)制到Origami中。




06.UXPin

# 如果你正在尋找一種可以讓你無需編碼即可設(shè)計(jì)動(dòng)態(tài)UI布局的工具，那么UXPin適合你。

UXPin提供的拖放操作可以輕松的創(chuàng)建高質(zhì)量的線框和原型。內(nèi)置的1000個(gè)元素可以任你用在移動(dòng)、桌面和Web產(chǎn)品的設(shè)計(jì)中。




http://07.Proto.io

# http://Proto.io是通過整合原型和設(shè)計(jì)模板，來使UI設(shè)計(jì)過程變得更加容易。Google Drive和Dropbox文件也可以導(dǎo)入到程序中。http://Proto.io擁有豐富的Material Design UI庫(kù)，它的離線模式讓你即使不在線也能進(jìn)行設(shè)計(jì)更改。

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




08.Axure RP

# Axure RP是美國(guó)Axure Software Solution公司旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型，同時(shí)支持多人協(xié)作設(shè)計(jì)和版本控制管理。Axure RP已被一些大公司采用。Axure RP的使用者主要包括商業(yè)分析師、信息架構(gòu)師、可用性專家、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、界面設(shè)計(jì)師等，另外，架構(gòu)師、程序開發(fā)工程師也在使用Axure。




09.Figma

# Figma是國(guó)外UI設(shè)計(jì)的主流軟件，支持網(wǎng)頁端，Mac、Windows，而且重新定義了路徑操作工具，極大釋放了設(shè)計(jì)生產(chǎn)力，同時(shí)支持交互原型、設(shè)計(jì)、代碼輸出,目前騰訊設(shè)計(jì)團(tuán)隊(duì)也在使用,入門版本免費(fèi),企業(yè)版本收費(fèi),在線協(xié)作功能非常強(qiáng)大,采用云存儲(chǔ),無需設(shè)計(jì)師保存,軟件會(huì)主動(dòng)保存,文件永遠(yuǎn)不丟失,隨著國(guó)內(nèi)慢慢普及figma有可能成為我們UI設(shè)計(jì)師主流設(shè)計(jì)工具.




10. Adobe Illustrator

# Adobe illustrator是一種應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件，作為一款非常好的矢量圖形處理工具，圖形放大放小不失真,文件保存比較小,Adobe Illustrator廣泛應(yīng)用于印刷出版、書籍排版、專業(yè)插畫、互聯(lián)網(wǎng)頁面的制作等,我們UI設(shè)計(jì)師主要用它來做插畫設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、字體設(shè)計(jì)、logo設(shè)計(jì)等.




線框繪制

11.Balsamiq

#Balsamiq是一種用于輔助線框的工具。該工具由前Adobe高級(jí)軟件工程師Peldi Guilizzoni開發(fā)，專注于線框設(shè)計(jì)。做 Web 網(wǎng)頁端產(chǎn)品的原型一定不要錯(cuò)過它。以手繪風(fēng)的低保真輸出為主要特色，美觀、清爽，并且支持幾乎所有的 HTML 控件原型圖。同樣還支持 iPhone 手機(jī)元素原型圖。

“能讓我以最快的速度把界面原型畫出來！”是它受到追捧的主要原因之一。




12.Justinmind

# 同樣也是一款強(qiáng)大的線框繪制工具；Justinmind十分好上手，對(duì)新手很友好。它通過包含很多元素可供使用：交互式原型元素（文本輸入、單選按鈕、下拉菜單等）。只需要通過單擊就可以將其添加到畫好的線框圖中。

JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以輸出Html頁面。與目前主流的交互設(shè)計(jì)工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更為專屬于設(shè)計(jì)移動(dòng)終端上app應(yīng)用。

除了元素本身的內(nèi)容，Justinmind的布局很容易直觀：所有的設(shè)計(jì)元素都在左邊；組織元素（如文件夾、屏幕列表等）在右側(cè)。




13.Mockplus

# Mockplus是一種快速線框圖工具，設(shè)計(jì)師可用其為網(wǎng)站和移動(dòng)應(yīng)用程序創(chuàng)建交互式線框圖。Mockplus作為一款幾乎免費(fèi)的國(guó)產(chǎn)軟件，它與Axure一樣，是適用于Windows以及Mac端的一款交互原型設(shè)計(jì)工具，但Mockplus提供了自己的組件和圖標(biāo)庫(kù)供用戶自由使用，同時(shí)也在移動(dòng)端上彌補(bǔ)了Axure的一些不足。在設(shè)計(jì)過程的早期階段便能跨PC端和移動(dòng)端共享和測(cè)試設(shè)計(jì)理念。

它還預(yù)裝了大量即用型組件、圖標(biāo)、UI和模板，除了創(chuàng)建線框，它還可以幫助進(jìn)行設(shè)計(jì)。




調(diào)動(dòng)情緒

14.InVision Studio

# InVision是一種與大多數(shù)Web瀏覽器兼容的設(shè)計(jì)工具。使用InVision Studio，不僅可以加快工作流程。還可以創(chuàng)建有趣的交互式原型，并和團(tuán)隊(duì)共享設(shè)計(jì)；用它來解決問題、顧慮和設(shè)計(jì)變得十分快捷。

InVision Studio實(shí)現(xiàn)許多UI設(shè)計(jì)師的夢(mèng)想，幫助設(shè)計(jì)師創(chuàng)建帶有大量功能的精美交互界面。您可以根據(jù)許多手勢(shì)和交互來創(chuàng)建自定義動(dòng)畫和過渡。更重要的是，它號(hào)稱“有史以來最快的工作室”，具有快速成型的功能——這樣可以節(jié)省時(shí)間，因此您可以想到更多的想法。







15.Marvel

# 對(duì)于那些希望與同學(xué)進(jìn)行團(tuán)隊(duì)設(shè)計(jì)和協(xié)作的人來說，Marvel是一個(gè)很好的工具。它有一個(gè)同步功能，你可以把Photoshop、Illustrator、Sketch中的設(shè)計(jì)同步到云盤中。你可以把已經(jīng)做好的設(shè)計(jì)導(dǎo)入Marvel中進(jìn)行再創(chuàng)作。




16.Abstract

# Abstract是受Git啟發(fā)的協(xié)作工具，它集成了Sketch和Adobe XD，使多個(gè)設(shè)計(jì)師能夠集中決策、反饋和文件。設(shè)計(jì)師還可以創(chuàng)建“集合”，允許團(tuán)隊(duì)外的其他人預(yù)覽設(shè)計(jì)。




動(dòng)效設(shè)計(jì)

17.Adobe After Effect

# 也就是大家都知道的Adobe AE，約等于動(dòng)效界的PS、AI，一個(gè)用來制作影視動(dòng)畫特效的工具。理論上你能想到的動(dòng)畫它都做，但對(duì)于UI動(dòng)效來說它太臃腫了。并且因?yàn)樗荒苤谱骶€性動(dòng)畫，無法實(shí)現(xiàn)可交互的動(dòng)效原型。學(xué)習(xí)AE同樣不需要學(xué)整套，只適合用來做一些特別復(fù)雜的特效和微觀矢量動(dòng)畫，集中精力在關(guān)鍵幀動(dòng)畫的制作方式上即可。




18.Protopie

# Protopie是一款今年來名聲大噪的新動(dòng)效工具，它的最大的優(yōu)點(diǎn)就是支持Windows，是Windows平臺(tái)上純動(dòng)效工具的獨(dú)苗。ProtoPie 號(hào)稱自己能讓交互原型設(shè)計(jì)像說話一樣簡(jiǎn)單，你只需要按照說話的順序?qū)资N交互模塊依次拼接，就可以完成極為逼真的高保真原型設(shè)計(jì)。Protopie功能強(qiáng)大，可以便捷制作可交互的動(dòng)效原型，添加正則表達(dá)式等。Protopie的特性更適合制作產(chǎn)品中的某一業(yè)務(wù)流程，比如發(fā)布流程、注冊(cè)流程、購(gòu)買流程等等。




19.Principle

# Principle是老牌的輕量級(jí)原型制作軟件。是一款專門用來做關(guān)鍵幀動(dòng)畫的可交互動(dòng)畫工具，它的操作邏輯和AE類似，有便捷的時(shí)間軸控制，可以理解成詩一個(gè)簡(jiǎn)化版的AE，專注于制作單一的交互事件場(chǎng)景，不適合制作多頁面。它的操作和使用邏輯都很簡(jiǎn)單，只要有AE基礎(chǔ)，也是在1天時(shí)間就可以掌握的軟件。principle目前僅支持MacOS的交互動(dòng)效設(shè)計(jì)軟件，相比于xd，它更注重于交互動(dòng)效的設(shè)計(jì)，可支持xd，sketch等文件導(dǎo)入。




20.Flinto

# Flinto是一個(gè)逐漸沉寂的動(dòng)效工具，這是一款很有名的軟件。但是你肯定也很清楚，和其他競(jìng)爭(zhēng)對(duì)手比，F(xiàn)linto 還是存在一些問題的。Flinto 提供了最基礎(chǔ)的功能，對(duì)初學(xué)者來說非常直觀。你可以創(chuàng)建復(fù)雜的頁面流程，也可以創(chuàng)建簡(jiǎn)單小巧的交互。Flinto 不支持任何編碼，也沒有時(shí)間線，如果剛好你就需要這些基本功能，那么這個(gè)工具絕對(duì)適合你。




Tips！

一定要注意，UI 界面、動(dòng)效、原型、情緒等，都只需要掌握1-2個(gè)即可，而不是每樣都學(xué)一遍，軟件學(xué)得再多，也和設(shè)計(jì)能力沒有直接關(guān)聯(lián)。UI 雖然需要學(xué)的軟件多，但并不代表學(xué)起來就難，每一款軟件的掌握所需的學(xué)習(xí)成本都非常低。對(duì)工具的掌握從來不是 UI 這個(gè)行業(yè)的門檻，難的在于你如何運(yùn)用這些工具輸出有價(jià)值的產(chǎn)物。

---

關(guān)于藝術(shù)留學(xué)的作品集輔導(dǎo)、擇校、資源獲取 等等一切，歡迎私信~

-----------點(diǎn)個(gè)關(guān)注再走唄！