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

來源：UI中國

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

 

前端從整個項目劃分來看，可以分為UE、頁面、邏輯，以下逐分析。

 

一、UE

UE就是用戶體驗（User Experience，簡稱UX或 UE）是一種純主觀的在用戶使用一個產(chǎn)品（服務(wù)）的過程中建立起來的心理感受。因為它是純主觀的，就帶有一定的不確定因素。

 

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

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

 

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

 

2、UX

 

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

 

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

原型圖

3、UI

 

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

 

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

 

從大方面而言，UI是作為類似于視覺方面的崗位所存在，而由于國內(nèi)對UI方面沒有嚴格的劃分，一個會代碼實現(xiàn)的UI就成為了面試時候的加分點。

 

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

圖1

圖2

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

 

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

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