ui設(shè)計(jì)工具大揭秘

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

一、流程圖工具
 

　　1、Mindnode
 

　　Mindnode是在Mac和IOS上的流程圖工具，它同時(shí)具備專(zhuān)注性和靈活性。是進(jìn)行頭腦風(fēng)暴和組織規(guī)劃生活事務(wù)的絕佳工具。
 

　　2、百度腦圖
 

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

　　3、Xmind
 

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

　　4、MindManager
 

　　其實(shí)，思維導(dǎo)圖工具都是大同小異，具體的你用的舒不舒服，需要你親自實(shí)踐，你覺(jué)得哪個(gè)合適你，你就選擇用哪一個(gè)。

二、原型圖工具

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

　　1、Sketch
 

　　Sketch是一款強(qiáng)大的界面設(shè)計(jì)工具，專(zhuān)為UI設(shè)計(jì)師打造的軟件，可讓你的界面設(shè)計(jì)變得更簡(jiǎn)單，更高效。如果你是一個(gè)UX或者UI設(shè)計(jì)師，那么你一定知道Sketch這個(gè)強(qiáng)大的UI界面設(shè)計(jì)軟件。
 

　　在Sketch中用戶能輕松地設(shè)置圖層面板，可批量命名圖層、智能標(biāo)注頁(yè)面、填充頭像和文字等，可實(shí)現(xiàn)多層式填充、漸變、噪點(diǎn)等操作功能;Sketch提供“全部導(dǎo)出”功能，因?yàn)樗腔谑噶康模钥蓪?dǎo)出PDF，JPG和PNG(可選擇2x)等格式。不得不提的就是Sketch為設(shè)計(jì)師提供了豐富的插件，越來(lái)越能滿足不同人群的設(shè)計(jì)需求，所有你需要的工具都觸手可及。

　　特色：
 

　　a、出色的用戶體驗(yàn)；
 

　　b、非常簡(jiǎn)單易用；
 

　　c、提供大量實(shí)用的插件。
 

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

　　2、POP
 

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

　　3、墨刀MockingBot
 

　　墨刀，是一款在線的高保真原型與線框設(shè)計(jì)交互工具，相信很多設(shè)計(jì)師都用過(guò)?？勺詣?dòng)標(biāo)注、代碼樣式、下載多倍率切圖，解決設(shè)計(jì)師與多平臺(tái)開(kāi)發(fā)對(duì)接時(shí)的交付問(wèn)題。
 

三、原型交互demo工具
 

　　所需工具：Sketch(設(shè)計(jì)稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互動(dòng)效)、墨刀(原型交互)、Mockplus(原型界面)
 

　　1、Axure
 

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

　　2、Marvel
 

　　3、Principle
 

　　Principle 主要用于實(shí)現(xiàn)較復(fù)雜的交互動(dòng)效，操作比 Marvel 難一些，適合有動(dòng)畫(huà)基礎(chǔ)的人。

　　4、墨刀
 

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

　　5、Mockplus
 

　　支持平臺(tái)：Windows&Mac
 

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

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

　　特色：
 

　　a、簡(jiǎn)單，零門(mén)檻；
 

　　b、豐富的圖標(biāo)及組件；
 

　　c、拖拽實(shí)現(xiàn)交互效果；
 

　　d、小程序預(yù)覽，隨時(shí)隨地跟客戶演示。

四、設(shè)計(jì)和切圖工具
 

　　所需工具：PS、AI等(設(shè)計(jì))、Cutterman (切圖工具)、PxCook(標(biāo)注、切圖工具)、Zeplin(切圖、設(shè)計(jì)稿標(biāo)注)等。
 

　　設(shè)計(jì)過(guò)程就不說(shuō)了，只要你是一位UI設(shè)計(jì)師，頁(yè)面怎么做那你肯定清楚。當(dāng)你設(shè)計(jì)完成頁(yè)面以后，要做的工作就是：標(biāo)注、切圖。
 

　　1、界面設(shè)計(jì)工具(Photoshop)
 

　　支持平臺(tái)：Windows&Mac
 

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

　　PS：如果要制作圖標(biāo)，需要用到矢量繪圖軟件AI來(lái)制作，這樣放大才不會(huì)失真。
 

　　特色：
 

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

　　b、強(qiáng)大的圖層功能 處理副本時(shí)保存原件；
 

　　c、批量處理照片；
 

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

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

　　2、標(biāo)注、切圖的工具有很多，在這里只不過(guò)是推薦幾款常用的給你。
 

　　1)Cutterman
 

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

　　注：需要安裝Adobe Air文件，要不然沒(méi)有辦法安裝該插件
 

　　2)PxCook
 

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

　　3)Zeplin
 

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

五、動(dòng)效視覺(jué)處理工具
 

　　1、AE
 

　　支持平臺(tái)：Windows&Mac
 

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

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

　　特色：
 

　　a、震撼的視覺(jué)效果；
 

　　b、與Premiere，Photoshop，Illustrator無(wú)縫兼容。

六、前端工具
 

　　1、Dreamweaver
 

　　支持平臺(tái)：Windows&Mac
 

　　Dreamweaver是一款網(wǎng)頁(yè)代碼編輯器，幫助設(shè)計(jì)師和程序員快速制作和進(jìn)行網(wǎng)站建設(shè)。為什么要把它單獨(dú)列出來(lái)，是因?yàn)槲矣X(jué)得UI設(shè)計(jì)師不僅僅需要掌握一些界面設(shè)計(jì)工具，還需要學(xué)習(xí)和了解一些前端的布局和設(shè)計(jì)，才能夠更好的配合前端工程師們做好產(chǎn)品開(kāi)發(fā)的工作。UI設(shè)計(jì)師如果了解一些基礎(chǔ)的代碼知識(shí)，可作為一個(gè)加分項(xiàng)在面試中脫穎而出。
 

七、項(xiàng)目進(jìn)度管理的工具
 

　　所需工具：Trello(任務(wù)管理)、Bearychat(團(tuán)隊(duì)溝通)。項(xiàng)目進(jìn)度管理的工具也有很多，在這里只是推薦幾個(gè)。

　　1、Trello
 

　　Trello 是國(guó)外非?；鸬娜蝿?wù)管理軟件，據(jù)說(shuō)擁有 1900 萬(wàn)注冊(cè)用戶，國(guó)際紅十字會(huì)、谷歌、美國(guó)迪爾公司都在使用。
 

　　2、Bearychat
 

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