UI設計和前端開發的區別大嗎?

阿貝爾


UI設計師跟前端工程師兩者的工作內容、工作形式區別還是很大的。我們先了解一下一個項目團隊中都包含那些角色:產品經理-UI設計師-前端工程師-後端工程師,大的團隊還有UE和UX。

工作內容的區別:

UI設計師在團隊之中主要是負責界面設計以及交互體驗的設計,所運用的軟件是Sketch、photoshop、illustrator等軟件。

而前端工程師的主要工作內容是用代碼語言(HTML5、CSS、JS等架構)把UI設計師所設計的界面設計稿呈現出來。

UI設計師跟前端工程師可以理解為一個流水線上的前後關係,互相配合,相輔相成。

工作形式的區別:

UI設計師是在拿到產品經理的產品原型圖之後,進行分析(競品分析、行業分析、產品分析等)確定界面的設計風格(顏色、排版、質感、字體、風格等),在設計的過程中既要考慮美觀、也要做到用戶體驗的友好,最終交付設計稿讓產品經理和團隊進行評審。

前端工程師前期拿到產品原型圖和交互文檔之後,會對功能在技術實現進行評審,能否實現,時間週期等,再者會對後端接口問題進行構思和評審,因為前端工程師會調用後端的數據,所以要考慮後端的接口問題;一個優秀的前端工程師不僅要熟練前端的語言,也要了解後端的語言,這樣在溝通的時候會很順暢。

後記

題主要找準自己的職業發展方向,找到自己的興趣點,不管是UI設計師還是前端工程師我們都要在工作之中不斷的提升自己的技術水平,學會與人溝通的能力等,這樣在今後的職場之中游刃有餘,也是你升職加薪的本錢,加油。


設計獅不改稿


首先要理解什麼是UI設計和前端開發。


UI設計

UI設計(或稱界面設計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI,互聯網常用的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

好的UI設計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現軟件的定位和特點。

一般包括交互設計和界面設計。

  • 交互設計

這部分指人與機之間的交互工程,在過去交互設計也由程序員來做,其實程序員擅長編碼,而不善於與最終用戶交互;在有的公司交互設計也有產品經理完成的。交互設計是用戶在實際使用過程中的體驗。

  • 界面設計

做界面設計的人也被貶義的稱為“美工”。其實軟件界面設計就像工業產品中的工業造型設計一樣,是產品的重要買點。界面的感受是互聯網用戶打開界面的第一感官體驗。

UI設計使用的軟件工具主要包括:Photoshop、Adobe Illustrator等。

筆者認為設計最需要注意的一點是尊重他人知識產權。為避免知識產權糾紛,除了能夠找一些免費資源和付費資源,也可以配備手寫儀自行創作,這可能就需要一些繪畫功底了。

前端開發

前端開發是創建Web頁面或app等前端界面呈現給用戶的過程,通過HTML,CSS及JavaScript以及衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。

前端開發所涉及的核心技術主要包括:HTML、CSS 和JavaScript。這是傳統前端所必備的核心技術,但是隨著互聯網技術的發展,這三項已經滿足不了前端開發的需求了。這就出現了VUE、React、Angular等JavaScript框架。

所以前端開發是要不斷學習新知識的,包括但不限於node. js、typescript等。

一般而言,資深前端開發工程師需要使用JavaScript或者ActionScript來編寫和封裝具有良好性能的前端交互組件,熟練使用CSS+XHTML完美輸出視覺界面。同時還要對Web項目的前端實現方案 提供專業指導和監督並在日常工作之中對新人及相關開發人員進行前端技能的培訓和指導。另外,還要跟蹤研究前端技術,設計並實施全網前端優化。

UI設計與前端開發的區別

UI設計是屬於產品方向,重點在於設計界面外觀。而前端工程師屬於開發方向,重點在於寫代碼去實現頁面功能。

UI設計與前端開發雖然是兩個崗位,但又是相輔相成的。

就我們公司而言,好的UI設計也是精通前端開發的,一般小企業這兩個崗位都是一個人。也就是從設計到切片再到頁面代碼實現都是獨立完成。

總結

不管是UI設計還是前端開發都需要在實際工作中不斷學習,設計理念、軟件工具、前端技術等。在這個互聯網飛速發展的時代,不負重前行,就很容易落後。


謝大大偉


UI即User Interface(用戶界面)的簡稱。UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現軟件的定位和特點。

軟件設計可分為兩個部分:編碼設計與UI設計。UI的本意是用戶界面,是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成,但實際上還包括用戶與界面之間的交互關係。

Web前端開發工程師,主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術進行客戶端產品的開發。完成客戶端程序(也就是瀏覽器端)的開發,開發JavaScript以及Flash模塊,同時結合後臺開發技術模擬整體效果,進行豐富互聯網的Web開發,致力於通過技術改善用戶體驗。

UI設計主要偏設計,很多的UI只是負責出圖,並沒有和程序太深度的交流,他更多需要定位使用者、使用環境、使用方式並且為最終用戶而設計。現在更多的交互設計。ui設計往往偏向於UI交互設計。

前端設計在設計的基礎上涉及到HTML5+CSS3的知識,更多的要解決兼容性問題。這是需要同時同步的學習互聯網知識和前端代碼知識。

H5+CSS3學習不復雜,但是解決兼容性問題需要大量的實踐與經驗,需要多於程序溝通。


互聯網辛酸事兒


其實你這個問題就不是別人能幫你解答的,要相信自己的判斷,區分好兩者的優缺點,畢竟UI和WEB都是不錯的方向,無論哪個方向,都要看你自己喜好的是哪方面。UI會要求你的色彩感,設計感比較強,而WEB則要求你的邏輯性和思維性比較強。兩者都不簡單,而且兩者都很缺乏人才,這裡的缺乏並不是說真的缺少人,而是缺乏中高端人才。

UI:入門簡單,學會PS基礎工具,基本就可以了,AI會不會都可以,當然會了更好。但是UI設計就像郭德綱說的他們學相聲,入門容易,我也覺得UI設計和相聲一樣,門檻在門裡,入門很容易,只要你願意,開門就能進來,但是一進門,發現裡面是座山。

1.首先你要學會最基本的設計規範:比如常用手機的尺寸、狀態欄尺寸,標題欄尺寸,按鈕大小、等等。

2.掌握當前流行的設計風格,現在來說都在使用扁平化,但是我看到有很多設計師(姑且叫他們設計師吧),把界面設計的就是一堆色塊,毫無設計感,扁平化設計也要適當加入陰影 投影 漸變的。要想設計的好,只能多看別人的作品,多學習。

WEB前端:其實入門就稍微有點難度,因為要學的東西挺多,最主要的是,你學的再多,等你實際工作中你會發現,為什麼你刷新後看到的界面和你預想的代碼不一樣,明明代碼沒寫左浮動啊,為什麼浮動了,為什麼我寫了下邊距,刷新後沒變化、為什麼我這個函數沒有執行。

1.學習:HTML、CSS得學,然後現在都流行HTML5和CSS3了,你要說不會HTML5和CSS3,就不用去面試了。還得學JS、和由JS封裝出來的JQ。這些就是基礎的了。

2.晉升:可能你出去找工作會看到很多公司都要求求職者要會:Bootstrap、Vue.js、AJAX、Less、JSON、APICloud等,這裡面你會的越多越好,這些都是提升工作效率的第三方可集成插件。

3.總結:學習前端,學校或培訓班只能教你基礎技能,工作中你需要一個好師傅帶你,換句話說,別指望初出茅廬就掙很高的工資,沉澱自己,多學習知識豐富自己才是王道。





色彩感覺


UI設計和Web前端的工作並不一樣,但也有公司為了提高工作效率在這兩塊工作是由同一個人來做的。ui與web前端的區別主要有:

1、概念不同

UI設計(或稱界面設計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI,互聯網說的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

web前端是創建Web頁面或app等前端界面呈現給用戶的過程,通過HTML,CSS及JavaScript以及衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。

2、研究方向不同

UI設計的研究方向是:用戶研究、交互設計、界面設計;

web前端的研究方向是技術方向:包括html、css、js等需要編寫代碼。

3、職業機會不同

UI設計的職業方向是:前端開發工程師、資深前端開發工程師、前端架構師等;

web前端的職業方向是:圖形設計師、交互設計師、用戶測試/研究工程師等;

計交給美工來做,把html5、css、js的添加交給web前端工程師來做,

4、工作內容不同

UI前端:主要負責系統/app,UI界面設計,以及html代碼實現,主要工作偏向於設計。

web前端:主要講ui提供的設計圖,編碼成靜態html,實現所有特效;並負責所有交互的對接,對js要求較高,會要求一些後臺接口的開發工作,因此對後臺開發語言也有一定的要求。

5、所需技術不同

web前端會用到Bootstrap、Vue、Jquery、Javascript、CSS、html等技術知識;

而UI前端需要是有很好的審美能力,通常需要有美術設計教育背景。


Monstar貴


很高興回答你的問題,下面主要介紹UI與WEB前端開發的區別。

Web前端開發:通俗來講,當你打開某個網站時,往往第一時間被那些炫酷的動態網頁設計所吸引。但是,如果沒有Web前端工程師,這些圖片是不會動的。這樣一個動態網頁是怎麼實現的呢?

首先,需要UI設計師按照市場部要求進行每張圖片製作;然後WEB前端工程師通過技術手段實現滾動效果。通俗點說web前端工程師就是用HTML5、CSS3、Java、jQuery、Ajax等技術把UI設計的頁面效果做成網頁,結合Bootstrap、AngularJS等最新的JS框架和後臺開發工程師搭線,最終實現讓大家看到的電商平臺上那些動人的精美頁面。

UI設計:UI即UserInterface。UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。通常包括平面設計,網頁設計以及移動界面設計。

UI前端的工作

對於UI開發人員,主要的工作工具是adobe illustrator或類似的軟件。它需要繪製草圖和準備圖形材料。Illustrator擅長使用矢量圖形,它可以根據不同的屏幕分辨率縮放和調整概念界面。

對於輔助工具,UI開發人員也可以使用Microsoft Expression Design和Expression Blend。最後設計人員必須深入研究相關操作系統的UI指導原則,他們希望根據這些指導原則調整界面(Windows UI指導原則、Mac OS指導原則)。

UI開發人員的關鍵特徵是邏輯思維,這就是為什麼這些人從來不是純粹的藝術家。UI設計師是100%的技術人員,只有人文素養。為了解決項目的問題,必須採用數學方法來結合標準工具。至於備受讚賞的創造力——只有在標準工具不能提供令人滿意的解決方案時才允許。

UI開發人員心中有一組明確的優先級。

1.首先,接口必須是功能性的。

2.其次,它必須方便,在不刺激用戶的頻繁工作。

3.最後,它必須是“美麗的”,也就是“美麗”得足夠吸引眼球。

一個好的UI開發人員是設計技能和技術知識的結合,他們的職責是可視化理解用戶界面。

web前端的工作

前端是開發web界面的客戶端。前端開發人員負責運行和操作界面,而不是由UI專家設計的可視化外觀。

如果我們要將其與打印媒體進行比較,那麼UI開發人員將創建總佈局,而前端開發人員將進行頁面校對,以便實際打印佈局。

前端專家需要掌握比UI設計師多得多的編程技能。他們必須瞭解HTTP協議、服務器和瀏覽器的工作原理、在當前市場上的各種設備上顯示web的特性。

與前端開發相關的挑戰是用於創建網站前端的工具和技術不斷變化,因此開發人員需要不斷了解該領域是如何發展的。前端通常構建在三個支柱上。它們是HTML、CSS和JavaScript。作為一名程序員,前端開發人員還必須接受算法、數據結構、編碼模式、面向對象編程和函數方法方面的培訓。




sute拾青


太大了。兩者屬於不同工作階段的不同工作類別,UI設計屬於產品設計環節的重要工作,前端開發是軟件開發的一部分。首先說UI設計,一般是根據產品經理或交互設計師的交付產物(原型),進行界面UI設計,是一個產品的視覺設定者,崗位不僅需要精通設計工具,還要對產品的所處環境,用戶群體等問題進行分析。然後說說前端開發,前端開發狹義上指網頁開發中負責HTML、CSS、JS及前端框架開發的人員,這類前端工程師不僅懂得前端開發技術,還需要與產品設計相關人員就設計問題提出技術實現方案及相關問題。還需要與後臺開發同事溝通聯條,進行前、後臺數據或請求交互,這主要是目前前後臺的開發分離。



小獅子我掀翻地球


前端開發主要就是代碼的開發及界面等效果的實現。

UI主要是對界面和人機交互的設計,瞭解各個平臺的設計規範等等。最好懂一點代碼,但不負責代碼的開發。

前景來說的話,前端開發和UI設計都是很不錯的,在互聯網的今天兩個職位都是必不可少的。就看個人興趣了


會灰的猴紙


UI是平面的升級,大部分UI做的還是平面的工作,UI要有平面的基本功,懂編程,PHP比較適合,簡單易學,而且現在很多web界面都是用PHP寫的,大部分情況下UI是偏向設計的;

前端是什麼,你可以查一查,我沒做過前端,認識的幾個做前端的在小公司就是打雜,基本啥都幹,大公司的肯定要正規很多的;

沒有好不好之分,都是比較辛苦的工作,什麼時候你熬成大神了,這兩個工作,哪個都不得了。


岩土人


前端設計和UI設計最大的區別就是:WEB前端工程師是要寫代碼的,而UI設計師重點在設計上。



分享到:


相關文章: