什么是UI設(shè)計(jì)？

最近有不少想學(xué)UI設(shè)計(jì)的同學(xué)都在后臺咨詢一些問題，他們想學(xué)UI設(shè)計(jì)但好像反而不知道UI設(shè)計(jì)到底是什么。對UI這個(gè)行業(yè)的了解僅僅局限于一些朋友或網(wǎng)上查資料以及部分培訓(xùn)機(jī)構(gòu)的老師對他們講的門檻低、易入門、工資高、好就業(yè)等等，但對UI到底是怎么？做這個(gè)行業(yè)的工作內(nèi)容到底在做什么都還是比較迷茫。接下來我們一起來看看什么是UI設(shè)計(jì)？

一、UI設(shè)計(jì)是什么？

UI設(shè)計(jì)（或稱界面設(shè)計(jì)）是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)常用的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶界面)的簡稱。

通過顯示器呈現(xiàn)出的界面。包括但不限于：手機(jī)界面、電腦界面、智能手表界面、銀行的取號機(jī)界面、機(jī)場的航班顯示板等等。只要是通過顯示器呈現(xiàn)出的界面，不管是帶交互還是不帶交互的都可以理解為是UI界面。而設(shè)計(jì)UI界面的工作就叫UI設(shè)計(jì)，做UI設(shè)計(jì)工作的崗位就叫UI設(shè)計(jì)師。

二、UI的分類？

1、移動端（GUI）

移動端多指手機(jī)端UI設(shè)計(jì)，也叫GUI設(shè)計(jì)，是現(xiàn)在常見的UI，也是大部分UI設(shè)計(jì)的主要工作。

移動端UI大致有手機(jī)源生UI界面、APP UI界面、小程序UI界面三大類

手機(jī)源生操作系統(tǒng)：比如蘋果、華為、小米等手機(jī)廠商的手機(jī)界面；

APP UI界面：指手機(jī)安裝的一些APP，例如京東、淘寶、微信等所有安裝在我們手機(jī)上的APP，也是大部分UI設(shè)計(jì)的主要工作；

小程序UI界面：內(nèi)置在微信或支付寶等第三方平臺的小程序，近幾年因?yàn)樾〕绦虻拈_發(fā)成本低、推廣便捷等優(yōu)勢也成為大部分公司喜愛的一種項(xiàng)目承載方式，所以我們?nèi)粘Ｗ鲂〕绦虻墓ぷ饕猜嗔似饋?，設(shè)計(jì)方式和APP UI的方式是一樣的。

2、PC端

PC端就是我們所說的電腦端，雖然隨著智能手機(jī)的崛起導(dǎo)致大家對電腦的依賴性變低，但大部分公司一樣會有不少PC端UI設(shè)計(jì)的需求，現(xiàn)在常見的就是企業(yè)官網(wǎng)和B端后臺的UI設(shè)計(jì)。

PC端UI大致可分為PC源生UI界面、客戶端UI界面、網(wǎng)頁端UI界面三大類

PC源生UI界面：比如蘋果、windows系統(tǒng)的電腦源生UI；

客戶端UI界面：電腦上安裝的軟件UI界面，比如飛書、英雄聯(lián)盟端游、PS、AI等操作軟件、一些公司的后臺等，通俗來說就是需要安裝之后才能使用的軟件統(tǒng)稱為客戶端，而這些軟件的界面就統(tǒng)稱客戶端UI。

網(wǎng)頁端UI：通過瀏覽器輸入網(wǎng)址打開的網(wǎng)頁，比如企業(yè)官網(wǎng)、站酷、花瓣等門戶型網(wǎng)站等。

在這里來說移動端和PC端卻是共通的；移動端和PC端都有各自的源生系統(tǒng)UI，移動端的APP UI和PC端的客戶端UI也都是需要安裝在各自設(shè)備上的軟件，移動端的小程序和PC端的網(wǎng)頁也都是內(nèi)置到第三方的，小程序是內(nèi)置到微信、支付寶等第三方APP上面，PC端網(wǎng)頁則是內(nèi)置到瀏覽器內(nèi)。

3、其他UI界面

除了常見的移動端和PC端UI以外，還有有一些其他的UI，比如穿戴設(shè)備如智能手表、一些硬件產(chǎn)品如銀行的取號機(jī)、航班展示板等，都屬于UI界面的范疇，但目前來說移動端和PC端UI算是主流。

三、UI界面的構(gòu)成

一個(gè)UI界面通常來說由三部分組成：配色、排版和圖標(biāo)。當(dāng)然，這是我個(gè)人的理解，可能是不對的。后面的內(nèi)容就以現(xiàn)在UI設(shè)計(jì)師常做的工作，也就是APP UI界面設(shè)計(jì)舉例。

1、配色

這個(gè)應(yīng)該很好理解，任何APP或網(wǎng)頁等UI界面都會有自己的主色，也有相應(yīng)的顏色搭配。一般我們對某個(gè)軟件的潛意識印象就是它的主色，比如微信的綠色、京東的紅色、淘寶的橙色等等，我們在設(shè)計(jì)UI界面的時(shí)候都會優(yōu)先確定好該UI界面或是該APP的主色，以及相應(yīng)的輔助色、點(diǎn)綴色等，這就是該APP項(xiàng)目的整體配色。而怎樣去給不同類型的項(xiàng)目制定相應(yīng)的主色，及根據(jù)主色和想表達(dá)的視覺感受去搭配相應(yīng)的輔助和點(diǎn)綴色，是需要學(xué)習(xí)一些理論知識和大量的配色練習(xí)的

2、排版

對一個(gè)UI界面來說我覺得重要的可能就是排版了，一個(gè)界面好不好看往往就是由排版來決定的。而且排版不僅僅只對UI重要，對平面設(shè)計(jì)、美工、線下印刷來說一樣非常重要。特別是對平面來說，比如一些書籍或企業(yè)畫冊來說，是沒有多余配色的，整本書或企業(yè)畫冊全部是由少部分的圖片和大部分的文字進(jìn)行排版來完成，所以扎實(shí)的排版功底就尤為重要。

在UI界面中排版類型有文字與文字搭配、文字與圖標(biāo)搭配、文字與圖片搭配，如果還是覺得不太好理解排版到底是什么，可以簡單粗暴的理解為文字和文字、文字和圖標(biāo)、文字和圖片，放在一起怎樣擺放好看，這就叫排版了。

排版的四大基本原則：對齊、對比、親密性、重復(fù)，在《寫給大家看的設(shè)計(jì)書》這本書中，有非常詳細(xì)的講解，基本上把這四大基本原則吃透了大家排版就不會有太大問題了。

3、圖標(biāo)

圖標(biāo)在UI界面中也占有不小的比重，一般我們對界面風(fēng)格的體現(xiàn)都是從圖標(biāo)風(fēng)格上體現(xiàn)出來。因?yàn)槲覀儗?shí)際工作中設(shè)計(jì)的UI并不會像大家在網(wǎng)上看到的那么炫酷，整個(gè)界面的配色排版都有強(qiáng)烈的視覺沖擊力，反而往往是比較樸素的，圖標(biāo)就成為了樸素UI界面中的一大亮點(diǎn)和風(fēng)格體現(xiàn)點(diǎn)。

四、UI設(shè)計(jì)師的工作

1、競品分析：UI從產(chǎn)品經(jīng)理那里取得原型圖后，通過各種途徑盡可能多的先找一些同類型產(chǎn)品進(jìn)行比較和參考，做到心中對該項(xiàng)目有明確的認(rèn)知和規(guī)劃；

2、界面設(shè)計(jì)：根據(jù)項(xiàng)目的類型、用戶群體、核心價(jià)值觀體現(xiàn)等通過分析后選擇符合項(xiàng)目要求的設(shè)計(jì)風(fēng)格和配色；

3、規(guī)范制定：制定UI設(shè)計(jì)規(guī)范、設(shè)計(jì)相應(yīng)的UI設(shè)計(jì)稿，完成后和相關(guān)的人員進(jìn)行視覺稿評審；

4、對接開發(fā)：評審?fù)ㄟ^后將切圖、標(biāo)注等交付給開發(fā)，由開發(fā)來研發(fā)整個(gè)項(xiàng)目；

5、UI走查：開發(fā)完成了項(xiàng)目的基本研發(fā)工作后對開發(fā)的產(chǎn)出進(jìn)行UI走查工作，盡可能保證開發(fā)人員對UI設(shè)計(jì)稿的高度還原；

6、輔助上線：開發(fā)的產(chǎn)出被通過后，輔助開發(fā)完成項(xiàng)目的上線工作，此階段可能需要提供APP的啟動LOGO、啟動頁、引導(dǎo)頁等。

五、一張UI稿經(jīng)歷的階段

1、原型圖（低保真圖）：產(chǎn)品經(jīng)理產(chǎn)出，確定界面的大致功能和簡單的布局

2、UI視覺稿（高保真圖）：UI設(shè)計(jì)產(chǎn)出，完整的設(shè)計(jì)稿，包含了項(xiàng)目的配色、排版、圖標(biāo)繪制、交互狀態(tài)等等

3、研發(fā)稿：開發(fā)對UI視覺稿的代碼還原，可運(yùn)行的完整項(xiàng)目

4、上線版：最后呈現(xiàn)給用戶使用的效果

以上就是關(guān)于什么是UI設(shè)計(jì)的詳細(xì)內(nèi)容，作為一個(gè)UI設(shè)計(jì)師一定要能夠適應(yīng)市場需求、緊跟行業(yè)時(shí)代技術(shù)，不斷的學(xué)習(xí)滿足市場對UI設(shè)計(jì)師的要求，提升自己的市場競爭力。