2018-5-10 藍(lán)藍(lán)設(shè)計的小編
本文轉(zhuǎn)自頭條號作者：洛曦心向您致敬
一個月薪過萬的UI設(shè)計師，成功的背后究竟經(jīng)歷了什么？
作為一名專業(yè)的UI設(shè)計，其實(shí)工作職責(zé)無外乎包括界面設(shè)計、圖標(biāo)設(shè)計、動效設(shè)計、切片與標(biāo)注等。
子曰：工欲善其事必先利其器
1、界面設(shè)計
界面包括一切可交互的APP、WEB、軟件、插件、操作系統(tǒng)等、當(dāng)然一般UI設(shè)計師接觸最多就是APP、WEB，即所謂的移動端UI和PC端UI，是UI設(shè)計師工作職能中占比最多的一塊，主要是根據(jù)產(chǎn)品經(jīng)理提供的原型，分析產(chǎn)品的受眾，參考客戶或上級給出的參考案例，設(shè)計APP、WEB的界面，界面規(guī)范、配色、目標(biāo)受眾、排版、細(xì)節(jié)都是我們要重點(diǎn)考慮的，這個模塊最常用的設(shè)計工具便是PS、AI，PS毋庸多言，是風(fēng)靡人類的圖像編輯軟件，大街上人人都會，AI功能跟PS差不多，但是我個人建議用PS做整體界面設(shè)計，AI主要是繪制矢量圖標(biāo)，二者搭配，干活不累。手機(jī)支付寶APP相信有90%以上的人都 知道了吧：
但是現(xiàn)在我們一般所謂的圖標(biāo)設(shè)計，很少單獨(dú)作為案例，一般是在界面中起到引導(dǎo)識別、提升設(shè)計感的效果，譬如首頁是一個小房子、搜索是一枚放大鏡、個人中心是一顆人頭等等，如圖3所示：
當(dāng)然也有很多設(shè)計師把圖標(biāo)當(dāng)成了小插畫來設(shè)計，啟動頁、引導(dǎo)頁、缺省頁等，譬如時下很火的MBE風(fēng)格，下面來一組非常炫酷的MBE圖標(biāo)，不說了，屏幕擦干凈讓我舔一會兒，如圖4示：
3、動效設(shè)計
動效設(shè)計這兩年很火，火燒了腚趕緊學(xué)UI動效吧。動效并非裝逼和炫技，其實(shí)主要是更好搞定客戶/降低風(fēng)險、提升產(chǎn)品趣味性和UE、與開發(fā)溝通更直觀形象從而提高團(tuán)隊(duì)效率、提高作品的逼格/更好展示作品等。這模塊常用的軟件是AE，AE是風(fēng)靡全球的影視后期編輯軟件，想當(dāng)年那會兒拿著200萬像素的DV機(jī)做著當(dāng)導(dǎo)演的春秋大夢就經(jīng)常用AE軟件，分享一組UI動效作品，它是否撩撥動了你的心扉，如圖5所示：
4、切片與標(biāo)注
UI射雞師依附于互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)，所以跟開發(fā)、產(chǎn)品經(jīng)理、運(yùn)營等溝通至關(guān)重要，產(chǎn)品經(jīng)理因?yàn)閷腋男枨蟊籙I設(shè)計刀劈斧砍也屢見不鮮。切片和標(biāo)注其實(shí)是2個環(huán)節(jié)，我這里列在一起是因?yàn)槲页Ｓ靡粋€工具，即Pxcook。下圖就是標(biāo)注好的一張APP設(shè)計稿，聰明好學(xué)的你是不是茅塞頓開，醍醐灌頂，如圖6所示：
下面就是一組切片，用Pxcook+PS輸出，交給前端開發(fā)用（具體怎么用，你配合他即可），如圖7所示：
藍(lán)藍(lán)設(shè)計的小編 http://m.lzhte.cn