旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > ui設計工具大揭秘

ui設計工具大揭秘

時間:2019-06-21來源:m.5wd995.cn點擊量:作者:Sissi
時間:2019-06-21點擊量:作者:Sissi

  在前幾篇文章中,AAA教育小編姐姐分享了《UI設計流程大解析》,今天我們來談談各個流程中都需要什么樣的工具。工具的重要性對于設計師來講不言而喻。任何想法都需要借助工具來實現(xiàn)。想要成為一名出色的UI設計師,你需要多掌握一些技能,才能增強自身競爭力。同時也給那些想轉(zhuǎn)行做UI設計師的朋友一些工具建議,接下來我們就來盤點一下那些UI設計師需要掌握的設計工具。
 

一、流程圖工具
 

  1、Mindnode
 

  Mindnode是在Mac和IOS上的流程圖工具,它同時具備專注性和靈活性。是進行頭腦風暴和組織規(guī)劃生活事務的絕佳工具。
 

Mindnode
 

  2、百度腦圖
 

  百度腦圖是一個線上,云端操作的思維導圖工具。即時存取,方便分享\協(xié)同,不受終端限制,在任何地方都可以打開。
 

百度腦圖
 

  3、Xmind
 

  同樣的,Xmind是一款流行思維導圖軟件,打造易用、美觀、高效的可視化思維管理工具。
 

Xmind
 

  4、MindManager
 

  其實,思維導圖工具都是大同小異,具體的你用的舒不舒服,需要你親自實踐,你覺得哪個合適你,你就選擇用哪一個。

 

二、原型圖工具

 

  所需工具:Sketch(框架圖)、POP(初步原型)、墨刀(高保真原型圖和交互)
 

  1、Sketch
 

  Sketch是一款強大的界面設計工具,專為UI設計師打造的軟件,可讓你的界面設計變得更簡單,更高效。如果你是一個UX或者UI設計師,那么你一定知道Sketch這個強大的UI界面設計軟件。
 

  在Sketch中用戶能輕松地設置圖層面板,可批量命名圖層、智能標注頁面、填充頭像和文字等,可實現(xiàn)多層式填充、漸變、噪點等操作功能;Sketch提供“全部導出”功能,因為它是基于矢量的,所以可導出PDF,JPG和PNG(可選擇2x)等格式。不得不提的就是Sketch為設計師提供了豐富的插件,越來越能滿足不同人群的設計需求,所有你需要的工具都觸手可及。

Sketch
 

  特色:
 

  a、出色的用戶體驗;
 

  b、非常簡單易用;
 

  c、提供大量實用的插件。
 

  Sketch是一款輕巧、易用的矢量設計工具。Sketch尤其適合設計師職能不細分的中小團隊和個人作品的制作。線框到視覺稿可以在一個軟件里完成,能省去不少時間。內(nèi)含網(wǎng)頁流程圖模板、移動線框包、迷你暗色流程線框圖、iPhone框架模板、Apple Watch交互流程包?!≡谠涂蚣芩夭牡幕A上,用 Sketch 畫出符合產(chǎn)品需求的框架圖。如下:
 

Sketch
Sketch
 

  2、POP
 

  Prototyping on Paper,一款手機 App,把紙上的東西變?yōu)樵?。拍照后可在手機上編輯熱區(qū),手機上快速模擬原型動效。
 

POP
 

  3、墨刀MockingBot
 

  墨刀,是一款在線的高保真原型與線框設計交互工具,相信很多設計師都用過??勺詣訕俗ⅰ⒋a樣式、下載多倍率切圖,解決設計師與多平臺開發(fā)對接時的交付問題。
 

墨刀MockingBot
 

三、原型交互demo工具
 

  所需工具:Sketch(設計稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互動效)、墨刀(原型交互)、Mockplus(原型界面)
 

  1、Axure
 

  你可以用 Skecth 設計完后,直接上 Marvel,實現(xiàn)高保真交互展示。且 Marvel 有 Sketch 插件,可以一鍵導入。如果你設計的是手機 App,用 Marvel 后,就可以直接在手機上給別人演示啦。

Axure
 

  2、Marvel
 

Marvel
 

  3、Principle
 

  Principle 主要用于實現(xiàn)較復雜的交互動效,操作比 Marvel 難一些,適合有動畫基礎的人。

Principle
 

  4、墨刀
 

  墨刀也是原型工具,也可以實現(xiàn)交互的功能。你比方說,你在墨刀里做了一些原型頁面,可以通過交互演示給客戶看。這樣更直觀一些。不多說了。
 

墨刀
 

  5、Mockplus
 

  支持平臺:Windows&Mac
 

  Mockplus是一款高效簡單的app界面設計工具,產(chǎn)品經(jīng)理圈子中比較流行的一款國產(chǎn)界面原型設計工具。軟件提供了封裝好的3000多個圖標以及200多個組件,拖拽即可進行UI界面設計,學習成本低,無需代碼參與,所以對于UI設計師來說是一個非常好的選擇。如果一個UI設計師連基本的原型設計能力都沒有,怎么和開發(fā)進行有效的溝通呢。
 

Windows&Mac
 

  值得一提的是Mockplus最近發(fā)布的一款摹客設計系統(tǒng)可謂是給UI設計師提供的一大福利了,該系統(tǒng)提供標準色、標準字、圖標、布局等等這類大綱,幾乎囊括了一份設計規(guī)范文檔該有的所有內(nèi)容,并且支持Sketch插件,意思是設計師們可在Sketch中一鍵復用你自己的設計規(guī)范,節(jié)省了大量的操作時間。
 

  特色:
 

  a、簡單,零門檻;
 

  b、豐富的圖標及組件;
 

  c、拖拽實現(xiàn)交互效果;
 

  d、小程序預覽,隨時隨地跟客戶演示。


四、設計和切圖工具
 

  所需工具:PS、AI等(設計)、Cutterman (切圖工具)、PxCook(標注、切圖工具)、Zeplin(切圖、設計稿標注)等。
 

  設計過程就不說了,只要你是一位UI設計師,頁面怎么做那你肯定清楚。當你設計完成頁面以后,要做的工作就是:標注、切圖。
 

  1、界面設計工具(Photoshop)
 

  支持平臺:Windows&Mac
 

  Photoshop是最流行的圖像編輯器之一,UI設計師入門的必備界面設計工具。相信不是設計行業(yè)的小伙伴,也略知一二。PS作為UI界面設計神器,有著強大的圖片編輯和處理功能,想要什么的圖形都可以用PS來實現(xiàn),可用于攝影的后期制作,可給圖像添加各種濾鏡,調(diào)整亮度,對比度等,生成高分辨的圖形。借助圖層面板可非常簡單和高效的處理修復圖片;并且PS提供了不同文件格式保存的選項,調(diào)整圖像大小和分辨率也不會丟失圖像質(zhì)量。
 

Photoshop
 

  PS:如果要制作圖標,需要用到矢量繪圖軟件AI來制作,這樣放大才不會失真。
 

  特色:
 

  a、照片處理技術(剪裁背景,裁剪,調(diào)整光線,調(diào)整顏色,過濾,消除紅眼等功能);
 

  b、強大的圖層功能 處理副本時保存原件;
 

  c、批量處理照片;
 

  d、兼容其他Abode套件程序,如After Effect,InDesign,Illustrator;
 

  e、Photoshop可以將圖像保存為各種格式。


  2、標注、切圖的工具有很多,在這里只不過是推薦幾款常用的給你。
 

  1)Cutterman
 

  切圖插件,需要你安裝到PS插件里。能夠自動將你需要的圖層進行輸出, 以替代傳統(tǒng)的手工 "導出web所用格式" 以及使用切片工具進行挨個切圖的繁瑣流程。 它支持各種各樣的圖片尺寸、格式、形態(tài)輸出,方便你在pc、ios、Android等端上使用。它不需要你記住一堆的語法、規(guī)則,純點擊操作,方便、快捷,易于上手。
 

  注:需要安裝Adobe Air文件,要不然沒有辦法安裝該插件
 

  2)PxCook
 

  PxCook既可以標注,也可以切圖。是高效易用的自動標注工具, 生成前端代碼, 設計研發(fā)協(xié)作利器。只需點擊拖拽, 即可輕松獲得間距尺寸, 字體, 陰影圓角等所有信息。PNG, JPG也能手動測量。支持標注單位:PX , PT , DP/SP , REM。還可以生成前端代碼,支持Win/Mac, 支持PS/Sketch等。
 

PxCook
 

  3)Zeplin
 

  Zeplin 是配合著 Sketch 非常好用的一款插件,設計稿完成后,可以直接從 Sketch 導入到 Zeplin 中。Zeplin 可以幫你自動生成尺碼標注、CSS 樣式代碼、需導出的圖片(在 Sketch 中設好切片的設計稿,在 Zeplin 中可以直接導出),以及共享成員間可以備注和評論。
 

五、動效視覺處理工具
 

  1、AE
 

  支持平臺:Windows&Mac
 

  Adobe After Effects簡稱“AE”是Adobe公司推出的一款關于圖形和視頻處理的界面設計工具,如今動效設計在UI界面設計中的應用已經(jīng)越來越廣泛,而且國內(nèi)許多公司開始重視動效設計了,所以作為UI設計師,也應該掌握一些動效設計。動效在UI設計中的應用其實比我們想象中的還要強大,好的動效設計可以給用戶提供一個良好的視覺感受,從而加強與用戶之間的交互體驗。
 

AE
 

  AE這款界面設計工具可以幫助UI設計師對圖像視頻進行任何特效處理,是一個靈活的基于層的2D和3D后期合成軟件,包含了上百種特效及預置動畫效果,可與Premiere,Photoshop,Illustrator等軟件無縫結(jié)合,創(chuàng)建無與倫比的視覺效果。它還借鑒了許多優(yōu)秀的軟件的成功之處,將圖像視頻特效合成技術推到一個新的高度。
 

  特色:
 

  a、震撼的視覺效果;
 

  b、與Premiere,Photoshop,Illustrator無縫兼容。


六、前端工具
 

  1、Dreamweaver
 

  支持平臺:Windows&Mac
 

  Dreamweaver是一款網(wǎng)頁代碼編輯器,幫助設計師和程序員快速制作和進行網(wǎng)站建設。為什么要把它單獨列出來,是因為我覺得UI設計師不僅僅需要掌握一些界面設計工具,還需要學習和了解一些前端的布局和設計,才能夠更好的配合前端工程師們做好產(chǎn)品開發(fā)的工作。UI設計師如果了解一些基礎的代碼知識,可作為一個加分項在面試中脫穎而出。
 

Dreamweaver
 

七、項目進度管理的工具
 

  所需工具:Trello(任務管理)、Bearychat(團隊溝通)。項目進度管理的工具也有很多,在這里只是推薦幾個。

 

  1、Trello
 

  Trello 是國外非?;鸬娜蝿展芾碥浖瑩?jù)說擁有 1900 萬注冊用戶,國際紅十字會、谷歌、美國迪爾公司都在使用。
 

Trello
 

  2、Bearychat
 

  Bearychat 是中國版的 Slack,聊天群組 + 工具集成,取代 QQ 或微信作為團隊工作中的及時聊天溝通工具。歸根結(jié)底,技多不壓身,想要成為一名優(yōu)秀的UI設計師,掌握界面設計工具只是其中一部分,UI界面設計需要設計師們掌握色彩搭配,設計規(guī)范,界面排版,溝通能力,切圖標注,尺寸標注,用戶體驗等相關知識。因此需要的就是不斷學習,不斷堅持,不斷的豐富自己的綜合能力。希望以上分享的五款界面設計工具可以幫到你們。
 

Bearychat



 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖