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

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

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

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

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

二、UI的分類？

1、移動(dòng)端（GUI）

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

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

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

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

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

2、PC端

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

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

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

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

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

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

3、其他UI界面

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

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

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

1、配色

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

2、排版

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

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

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

3、圖標(biāo)

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

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

1、競(jìng)品分析：UI從產(chǎn)品經(jīng)理那里取得原型圖后，通過各種途徑盡可能多的先找一些同類型產(chǎn)品進(jìn)行比較和參考，做到心中對(duì)該項(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)行視覺稿評(píng)審；

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

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

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

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

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

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

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

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

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