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