提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱危覀儠诘谝粫r間與您聯(lián)系!
研究主題:產品工作核心流程內的設計工具
研究對象:產品設計工具
好的工具可以讓你在設計時如虎添翼,作為一名UI/UX設計師想要設計出讓用戶滿意的作品,除了需要具備高超的技能、豐富的經驗外,還需要掌握一些工具。下面辭典醬將提取UI/UX設計中,相對核心的工作流程,并以此為縱向參考,發(fā)散介紹一些常用的設計軟件。
提取的核心工作流程有:
01 頭腦風暴圖(草圖)
02 流程結構圖
03 框架原型圖
04 設計&交互動效
1.1 Excalidraw,一個在線加密可協(xié)作的畫板
Excalidraw是一個很有意思的在線白板,它提供了一些基礎的形狀,你可以繪制出草圖風格的圖形。Excalidraw不需要注冊,打開就可以畫,還能邀請別人加入一起協(xié)作。Excalidraw的協(xié)作是加密的,甚至Excalidraw服務器都不知道你畫了什么。
價格:免費
官網:https://excalidraw.com/
幫助文檔:https://howto.excalidraw.com/
1.2 Miro,自由自在的在線協(xié)作白板
在傳統(tǒng)的辦公會議中,團隊成員往往會在一塊白板中寫寫畫畫,激發(fā)創(chuàng)意。但是,這種方式受限于物理空間,需要在固定的會議室才可以進行,遠程協(xié)作成員也無法參與其中,而且受限于白板的面積也無法將所有人的想法沉淀。但在Miro,這個寫寫畫畫的腦暴過程,就被搬到了瀏覽器中。
價格:個人免費版(可使用3個白板)
官網:https://miro.com/
可添加多類型元件
多人協(xié)作進行腦暴
還支持移動端操作,不過元素添加只能放些文字、便簽、評論、形狀、畫筆。
Miro免費版支持 3 個畫板,此外還有付費的團隊版和商業(yè)版,支持更多畫板以及私密分享、高清導出等額外的特性。
2.1 ProcessOn,流程圖、思維導圖、原型圖
常用的結構圖工具,除了Xmind被人熟知外,還有就是ProcessOn了。它不僅是一個在線作圖工具的聚合平臺,還可以在線畫流程圖、思維導圖、UI原型圖、UML、網絡拓撲圖、組織結構圖等等,Mac與Windows都可操作。
價格:個人免費版(可存9份文件)
官網:https://www.processon.com/
在推薦/模板欄目中,ProcessOn用戶還能發(fā)布自己的模板來獲得收益,也可以將自己的讀書筆記,分析亦或是經驗流程圖公開上傳,學習交流。
2.2 Whimsical,在線繪制流程圖、線框圖、思維導圖
Whimsical是一款在線流程圖、線框圖、便利貼、思維導圖繪制軟件,支持實時協(xié)作。
價格:個人免費版(可建立使用4個畫板)
官網:https://whimsical.com/
4大主要功能
實時協(xié)作,與團隊一起完成
其中一個亮點是,Whimsical內置了圖片庫,種類繁多,內容非常豐富,不僅元素眾多,還可以通過檢索來找尋想要的圖案。
畫起圖來也是得心應手,操作靈活,甚至是一些原型圖也能幫助完成,像常見的手機與操作系統(tǒng)都能看到。
2/3 FlowMapp,網站地圖和用戶流程繪制工具
FlowMapp是一款專業(yè)的網站地圖和用戶流程工具繪制工具,無需下載,直接在瀏覽器中使用。
價格:個人免費版(可使用1個項目)
官網:https://www.flowmapp.com/
快速創(chuàng)建創(chuàng)建網站地圖、讓在線協(xié)作的團隊成員對產品有全面了解;用戶使用路徑地圖,即時向成員展示用戶使用產品的流程與邏輯。
3.1 Axure,經典原型設計工具
Axure是一款經典的原型工具,可以用它快速表達想法,進行測試驗證,加快產品計劃進度。
價格:免費30天試用
官網:https://www.axure.com/
繪制各式原型圖
導入Sketch,Adobe XD和Figma文件
3.2 Mockplus(摹客)-交互快、設計快、演示快、上手快的原型設計工具
Mockplus中的原型交互設計完全可視化,拖拽鼠標做個鏈接,即可實現(xiàn)交互。同時,Mockplus彈出面板、內容面板、滾動區(qū)、抽屜、輪播等系列組件,對于常用交互,使用這些組件就可快速實現(xiàn)。
價格:免費
下載:https://www.mockplus.cn/mockplus
官網:https://www.mockplus.cn/
200多個組件、3000多個矢量圖標,也可以組件圖標庫與團隊共同協(xié)作;組件、頁面、狀態(tài)交互,輕松拖拽即可完成,簡單可視化;也可以從APP端和微信小程序端快速查看。
3.3 墨刀,強大易用的原型設計與協(xié)同工具
墨刀是一款在線原型工具,支持在線分享、文檔生成、團隊協(xié)同、設計標注。無論是PM從0—1繪制原型、還是設計師導入設計稿制作交互,都可以快速輕松完成可交互原型。
價格:個人免費版(可創(chuàng)建3個項目)
官網:https://modao.cc/
支持制作高、低保真原型,不論是工作交流,還是客戶展示都能滿足,也能與Sketch輕松對接標注。
4.1 Sketch,使用最多的 UI 設計軟件
應該是UI/UX設計師電腦里必備的軟件了吧?設計功能同Photoshop一樣強大,但更輕量,操作也更易上手。它支持矢量圖形繪制、快速原型、組件共享、插件擴展等特性。Sketch目前不僅被用于UI設計,還被用于原型制作、插畫繪制。
價格:免費試用30天
官網:https://www.sketchapp.com/
除了功能強大外,插件生態(tài)也非常豐富,幫助UI/UX設計工作更高效。
4.2 Adobe XD,UX/UI 設計和協(xié)作工具
Adobe XD是Adobe推出的一款用于UI/UX設計的工具,從網站和移動應用程序到語音交互等,全面覆蓋。
價格:免費
官網:https://www.adobe.com/cn/products/xd.html
XD的軟件界面簡潔,使用簡單,操作順手,同時也足夠的專業(yè)。實際用起來,你會發(fā)現(xiàn)它顯示平滑,性能優(yōu)異,其體驗猶如在真機屏幕上體驗一般,給人印象非常好。
4.3 Figma,在線協(xié)作設計工具
Figma可以說是一款新興的協(xié)作式界面設計工具,它的界面布局和Sketch幾乎一樣。這款工具以云端為基礎,允許多人同時合作一個項目,設計稿會根據評論及修改進行實時更新。
價格:個人版免費
官網:https://www.figma.com/
Figma也同樣支持組件,把常用元素變?yōu)榻M件,多次復用,幫助提高設計效率,組件支持就近擺放,且示例組件可以靈活調整。
網站還有一個404彩蛋,來體驗其鋼筆工具,摸魚的時候可以戳一戳(https://www.figma.com/404)。
4.4 Principle,讓動效制作變得簡單
當想要設計一個微動效,或者是多頁面的高保真原型,就交給Principle吧!在 Principle中,你可以使用時間軸輕松制作一些動效,還可以連接多個頁面來做一個完整的應用。這個過程中不需要編寫代碼,上手成本很低。
價格:14天免費試用
官網:https://principleformac.com/
無論是Sketch還是Figma,都可以把設計圖導入其中,完成動效。
動效展示
4.5 Flinto,交互式設計神器
在Flinto中設計動效,無需代碼,無需時間軸,只需要設置初始和結束狀態(tài),再把它們一連接,動效就完成了,而且支持從Sketch和Figma導入設計。
價格:14天免費試用
官網:https://www.flinto.com/
4.6 ProtoPie,新型交互設計工具
這款交互工具由韓國的創(chuàng)業(yè)團隊研發(fā),可以通過不同模塊組成一個完整的交互原型,使用時無需編碼且以可視化的方式進行設計。它幫助設計師無需編寫代碼就可以簡單快速地制作出高保真交互原型,還能實時在手機上演示,使原型能夠在更多的場景下被使用。
價格:30天免費試用
官網:https://www.protopie.io/
中文官網:http://www.protopie.cn/(目前升級中)
ProtoPie的操作原理也十分簡單:交互=觸發(fā)動作+反應動作+對象。只需要將下面表中的觸發(fā)動作和反應動作自由組合,就可以像拼拼圖一樣輕松制作高保真交互原型。
4.7 inVision ,一站式設計工具
從UI設計,到快速原型,到高級動效,再到團隊協(xié)作,也是一個很全面能打的工具。同時,inVision還推出了inVision Studio是一款桌面端一站式設計工具,支持Mac和Windows雙系統(tǒng)。
價格:免費
官網:https://www.invisionapp.com/
inVision Studio的高級布局引擎幫助你快速且簡單地設計響應式界面,讓你的設計自動適配各種屏幕尺寸。
4.8 藍湖,高效的產品設計協(xié)作平臺
藍湖是一款高效的產品設計協(xié)作平臺,支持 Sketch、Photoshop、Adobe XD文件導入生成標注,還支持Axure文件生成在線需求文檔,可以將產品、設計、研發(fā)工作流程無縫銜接。
價格:免費版(≤10人團隊)
官網:https://lanhuapp.com/
核心流程中的設計工具,也了解的差不多啦,先慢慢消化吧。俗話說“工欲善其事,必先利其器 ”,好的設計也離不開創(chuàng)造力和便捷的工具,物盡其用,利用好身邊的資源,就能事半功倍。
相關引用
-圖片、GIF來自網絡;封面動圖 by Gur Margalit
-未經UX Pedia允許不得轉載
歡迎關注作者公眾號:UX辭典,獲得更多UX設計干貨
Powered by Froala Editor
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊