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)演的春秋大夢(mèng)就經(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)槲页S靡粋€(gè)工具,即Pxcook。下圖就是標(biāo)注好的一張APP設(shè)計(jì)稿,聰明好學(xué)的你是不是茅塞頓開,醍醐灌頂,如圖6所示:
下面就是一組切片,用Pxcook+PS輸出,交給前端開發(fā)用(具體怎么用,你配合他即可),如圖7所示:
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn