如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：UI中國(guó)

在開發(fā)項(xiàng)目組里面，前端一般都是作為一個(gè)統(tǒng)稱而存在，很多剛畢業(yè)的童鞋就問(wèn)我想從事前端方面問(wèn)我怎么看，我會(huì)反問(wèn)你對(duì)前端了解多少，很多人都認(rèn)為前端基本上都是搞設(shè)計(jì)從事視覺(jué)方面。

 

前端從整個(gè)項(xiàng)目劃分來(lái)看，可以分為UE、頁(yè)面、邏輯，以下逐分析。

 

一、UE

UE就是用戶體驗(yàn)（User Experience，簡(jiǎn)稱UX或 UE）是一種純主觀的在用戶使用一個(gè)產(chǎn)品（服務(wù)）的過(guò)程中建立起來(lái)的心理感受。因?yàn)樗羌冎饔^的，就帶有一定的不確定因素。

 

通常在大公司中，UE會(huì)有專門的團(tuán)隊(duì)，專門負(fù)責(zé)該公司產(chǎn)品的用戶體驗(yàn)的研發(fā)工作。而UE團(tuán)隊(duì)中通常包含的團(tuán)隊(duì)就涵蓋了UI（User Interface 用戶界面）、產(chǎn)品經(jīng)理、UX（User experience design 用戶體驗(yàn)）。而對(duì)于像BAT這樣的大型IT公司，會(huì)把其中的職位劃分得更加細(xì)致，如UE團(tuán)隊(duì)中就會(huì)包括了UI小組、產(chǎn)品小組等，對(duì)于小公司UE基本上就是一個(gè)人給全部包了，例如筆者本人（說(shuō)多都是淚T_T）。

1、產(chǎn)品經(jīng)理

 

通常一款產(chǎn)品從無(wú)到有的先從到有需要專門從事收集市場(chǎng)調(diào)研的人員來(lái)收集產(chǎn)品的市場(chǎng)信息，如這款產(chǎn)品受眾是哪些，面向的用戶群體大致是一個(gè)怎樣的情況，連帶的硬件與軟件要求是如何的。而這些信息多數(shù)是由市場(chǎng)或者是運(yùn)營(yíng)團(tuán)隊(duì)所進(jìn)行提供，而作為產(chǎn)品經(jīng)理需要對(duì)所收集到的產(chǎn)品需求整理匯總到一起形成文檔，一般寫文檔這活除了在分工特別明確的團(tuán)隊(duì)外，基本上都是一個(gè)人完成。也就更多時(shí)候產(chǎn)品經(jīng)理要具備收集產(chǎn)品需求，編寫文檔以及制作交互原型的能力。而在國(guó)內(nèi)更多的企業(yè)，產(chǎn)品經(jīng)理多數(shù)都不具備技術(shù)背景，這種情況下就會(huì)出現(xiàn)需求與技術(shù)相脫節(jié)的情況，因?yàn)椴欢眉夹g(shù)的前提，產(chǎn)品人員就很容易將功能理想化并且會(huì)將責(zé)任推給技術(shù)人員，是認(rèn)為對(duì)方達(dá)不到自己的技術(shù)要求而不是想到是因?yàn)樽约核ㄏ聛?lái)的產(chǎn)品需求過(guò)于反人類。

 

2、UX

 

在崗位分工而言，在實(shí)際工作過(guò)程中，UX更多的是負(fù)責(zé)一個(gè)產(chǎn)品的原型設(shè)計(jì)，而有的公司原型設(shè)計(jì)是歸到產(chǎn)品經(jīng)理去做。產(chǎn)品原型在本人所接觸到的大致可以歸納到幾種方面：原型圖、高保真原型、模型。原型圖簡(jiǎn)單地來(lái)說(shuō)就設(shè)計(jì)圖紙，猶如一個(gè)建筑在新建初期那樣，需要在圖紙上面進(jìn)行設(shè)計(jì)，設(shè)計(jì)圖紙通過(guò)之后才著手去搭建框架?，F(xiàn)實(shí)上很多項(xiàng)目中，由于時(shí)間和人手的問(wèn)題，基本上都是有原型圖后就會(huì)開展后面的開發(fā)工作。在原型圖中就能夠知道項(xiàng)目的交互方式，頁(yè)面中所要呈現(xiàn)出的內(nèi)容，以及業(yè)務(wù)邏輯。高保真原型是基于原型圖上進(jìn)行細(xì)化，最長(zhǎng)用的高保真原型制作工具為Axure，結(jié)合了動(dòng)態(tài)的（也就是能點(diǎn)得動(dòng)，能看出大致效果的模型）跳轉(zhuǎn)方式所呈現(xiàn)出來(lái)的原型。而模型基本上就是跟一個(gè)完整的產(chǎn)品差不多，這里就不詳細(xì)展開，有興趣的童鞋可以自行了解。

 

UX本身需要有一定的技術(shù)背景才能夠去完成此項(xiàng)工作任務(wù)，就好像一個(gè)沒(méi)有行醫(yī)資格的人去替病人做心臟手術(shù)，會(huì)出現(xiàn)的后果可想而知。UX本身承載著需求和后端開發(fā)的紐帶，在實(shí)際設(shè)計(jì)的過(guò)程中，需要考慮到運(yùn)用哪種交互方式既能夠最大化地得到用戶所想要的效果，同時(shí)又能夠降低開發(fā)成本（開發(fā)難度、開發(fā)時(shí)間、是否具備通用性），這個(gè)才是UX的真正能力體現(xiàn)所在。

原型圖

3、UI

 

UI在很多人眼里其實(shí)就是個(gè)美工，但個(gè)人認(rèn)為UI跟美工的區(qū)別在于前者是需要有技術(shù)背景去支撐，美工則不需要，往往美工更多的是只需要關(guān)注某個(gè)設(shè)計(jì)圖要如何做得好看就行。UI除了要把界面做得好看外，要需要更多地融入技術(shù)判斷，如一個(gè)在結(jié)合UX的原型設(shè)計(jì)后，一個(gè)按鈕或者是一個(gè)頭像的擺放如何能夠呈現(xiàn)出這款設(shè)計(jì)的理念以及最佳狀態(tài)給到產(chǎn)品使用者。

 

通常UI除了要把原型圖美化外，制定產(chǎn)品規(guī)范、頁(yè)面風(fēng)格、產(chǎn)品中的展示內(nèi)容（如APP中的引導(dǎo)頁(yè)、歡迎頁(yè)、廣告等，具體要看崗位職責(zé)劃分）、頁(yè)面所用元素制作（圖標(biāo)、切圖）等都是UI的工作內(nèi)容。

 

從大方面而言，UI是作為類似于視覺(jué)方面的崗位所存在，而由于國(guó)內(nèi)對(duì)UI方面沒(méi)有嚴(yán)格的劃分，一個(gè)會(huì)代碼實(shí)現(xiàn)的UI就成為了面試時(shí)候的加分點(diǎn)。

 

又要回到實(shí)際的工作應(yīng)用中，很多HR招聘的過(guò)程中會(huì)把UI和前端實(shí)現(xiàn)混為一談，撇開HR本身對(duì)這方面了解不夠之外，國(guó)內(nèi)會(huì)把寫HTML代碼當(dāng)做是UI中的一個(gè)工作內(nèi)容，下圖1就是非常經(jīng)典的國(guó)內(nèi)所想要的UI，這種更多的是側(cè)重于頁(yè)面的實(shí)現(xiàn)而非設(shè)計(jì)，圖2則為純視覺(jué)方向。

圖1

圖2

在本人工作的一些實(shí)際經(jīng)驗(yàn)中，經(jīng)常會(huì)遇到一些技術(shù)轉(zhuǎn)設(shè)計(jì)以及專業(yè)科班出身的人，技術(shù)轉(zhuǎn)設(shè)計(jì)，本身是對(duì)設(shè)計(jì)有著很高的熱情，自己是很單純地喜歡而去做，但這一類型的往往會(huì)表現(xiàn)為設(shè)計(jì)感很差，配色、用字規(guī)范等基礎(chǔ)錯(cuò)誤，就算是經(jīng)過(guò)一段時(shí)間地提升之后，多數(shù)總有一種讓人覺(jué)得“不上檔次”的感覺(jué)存在。

 

而科班出身的人多數(shù)設(shè)計(jì)出來(lái)的作品設(shè)計(jì)感會(huì)非常地好，但是往往也是存在一個(gè)很嚴(yán)重的問(wèn)題，他們所設(shè)計(jì)出來(lái)的往往對(duì)于技術(shù)來(lái)說(shuō)是個(gè)巨大的挑戰(zhàn)，為何網(wǎng)上會(huì)有很多“程序員追著砍系列作品”，就是因?yàn)樵诓欢夹g(shù)的前提下，所做出來(lái)的設(shè)計(jì)都只是一味地追求好看而忽略了實(shí)用性。并且不會(huì)考慮到開發(fā)成本在其中，通常就會(huì)造成所做出來(lái)的設(shè)計(jì)要么不能成為一款產(chǎn)品，要么就是給技術(shù)帶來(lái)相當(dāng)大的難題。但在公司開發(fā)層面，公司更多地是注重產(chǎn)品效益，要節(jié)約成本，對(duì)于公司而言，看起來(lái)炫好看的產(chǎn)品，要是開發(fā)難度很高，則就是一種吃力不討好的行為。大家可以多留意一些市面上已經(jīng)相對(duì)成熟的產(chǎn)品，多做一些分析就可以得出結(jié)論。

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)