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

 

UI即User Interface（用戶界面）。那什么是用戶界面呢？我們現(xiàn)在用的電腦，手機(jī)，iPad等等電子設(shè)備都有操作界面，那么這些可以和人進(jìn)行信息交互的界面都是用戶界面。所以衍生出的UI設(shè)計(jì)就是指對(duì)軟件的人機(jī)交互、操作流程、界面美化的整體設(shè)計(jì)。說白了就是你通過界面去操作軟件或設(shè)備，設(shè)備通過UI界面顯示出你要的信息。這里需要特別強(qiáng)調(diào)的就是UI界面一定是人與機(jī)器之間是可交互的。好的UI不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

我們還記得傳統(tǒng)的打字機(jī)或者電報(bào)嗎？那些雖然也是與信息相關(guān)的設(shè)備，但由于那個(gè)年代科技水平尚不發(fā)達(dá)，所以沒有界面呈現(xiàn)給我們，所以我們與機(jī)器之間的交互是通過輸入設(shè)備完成的。隨著科技的發(fā)展，計(jì)算機(jī)等硬件開始有了屏幕，并且人們可以通過鼠標(biāo)和鍵盤對(duì)軟件實(shí)施操作，實(shí)現(xiàn)了人與機(jī)器之間的交互。那么我們本課程要學(xué)習(xí)的就是如何設(shè)計(jì)UI界面以及應(yīng)該掌握哪些基礎(chǔ)知識(shí)。

 

1.UI設(shè)計(jì)發(fā)展史

 

UI設(shè)計(jì)到今天大致經(jīng)歷了三個(gè)時(shí)期。在早期的操作系統(tǒng)中，圖形和色彩相對(duì)簡單，主要通過簡單的漸變和陰影來繪制交互界面。我們可以看PPT這張圖就是早期計(jì)算機(jī)的交互界面。

那個(gè)時(shí)候的計(jì)算機(jī)內(nèi)存和CPU的效能和今天都沒辦法比擬，所以人們的審美也受到技術(shù)的限制，我們只能設(shè)計(jì)出這種相對(duì)簡陋的UI設(shè)計(jì)元素，現(xiàn)在看起來相對(duì)單調(diào)乏味，不過在當(dāng)時(shí)呢，已經(jīng)算是里程碑式的躍進(jìn)了。（見下圖）

隨著計(jì)算機(jī)成像能力的發(fā)展，在中期UI設(shè)計(jì)發(fā)展出了以擬物化為風(fēng)格的界面設(shè)計(jì)。就是PPT這張圖上所呈現(xiàn)的。設(shè)計(jì)師可以設(shè)計(jì)出色彩更加豐富細(xì)膩，更加真實(shí)的UI設(shè)計(jì)元素。在中期主要以寫實(shí)的設(shè)計(jì)風(fēng)格為主。讓UI界面看起來更加生動(dòng)貼近現(xiàn)實(shí)。（見下圖）

到了后期隨著網(wǎng)絡(luò)的普及但受到帶寬的限制，計(jì)算機(jī)軟件界面要求能最快時(shí)間加載并呈現(xiàn)給用戶，擬物化風(fēng)格界面顯然加載會(huì)很慢并大量消耗流量，人們也看膩了擬物化的界面。根據(jù)現(xiàn)實(shí)需求，扁平化圖標(biāo)問世了。就是我們現(xiàn)在依然在用的扁平化設(shè)計(jì)風(fēng)格。（見下圖）

2.UI設(shè)計(jì)風(fēng)格

 

擬物化

擬物化的優(yōu)點(diǎn)：更加真實(shí)的還原了生活中的物品作為功能的象征和體現(xiàn)。讓人們能夠快速理解圖標(biāo)的含義，說白了就是看圖說話。

擬物化的缺點(diǎn)：但是擬物化除了看起來逼真它本身有什么缺點(diǎn)呢？第一就是對(duì)設(shè)計(jì)師的手繪能力要求相對(duì)較高，如果你沒有扎實(shí)的繪畫基礎(chǔ)，你很難用軟件繪制出高保真的圖標(biāo)。第二呢，就是工作效率相對(duì)低下。因?yàn)槔L制一個(gè)高保真的擬物化圖標(biāo)需要很多圖層和樣式進(jìn)行疊加，可能一天也就能畫一兩個(gè)，那么就相對(duì)延長了開發(fā)時(shí)間。現(xiàn)在是一個(gè)講究工作效率的年代，敏捷開發(fā)為主。花費(fèi)太長時(shí)間去扣細(xì)節(jié)已經(jīng)過時(shí)了。第三呢，就是隨著移動(dòng)設(shè)備的普及，我們更愿意用手機(jī)進(jìn)行瀏覽網(wǎng)頁。但是高保真的擬物化圖標(biāo)占據(jù)的空間比較大所以會(huì)消耗我們更多的流量而且頁面加載會(huì)變的很慢，人機(jī)交互變的不太友好。那么為了解決這一問題，扁平化設(shè)計(jì)風(fēng)格的圖標(biāo)問世了。一個(gè)風(fēng)格的出現(xiàn)絕對(duì)不是憑空出現(xiàn)的，一定是有所需求。對(duì)吧。扁平化圖標(biāo)由于色彩單一，樣式簡單，占據(jù)的空間較小，加載快，流量消耗小。所以成為了現(xiàn)在的主流設(shè)計(jì)風(fēng)格。

 

那么扁平化呢，又可以細(xì)分出這種線性的圖標(biāo)，塊面類圖標(biāo)和2.5D偽3D圖標(biāo)。

 

3.UI設(shè)計(jì)的分類

 

 

我們將UI設(shè)計(jì)可以細(xì)分出以下三種，分別是GUI  WUI  MUI。

GUI  即圖形用戶界面（Graphical User Interface，簡稱 GUI）是指采用圖形方式顯示的計(jì)算機(jī)操作用戶界面。你可以把它理解成就是專攻畫ICON的設(shè)計(jì)同學(xué)，GUI要求設(shè)計(jì)師有扎實(shí)的美術(shù)功底，將具象的實(shí)物抽象成簡單的ICON。需要我們?cè)诶L制之前在紙上繪制出簡單的草圖。GUI的難點(diǎn)就在于你有可能要為一個(gè)產(chǎn)品畫一整套的ICON，那就非常考驗(yàn)設(shè)計(jì)師的整體設(shè)計(jì)風(fēng)格的把控能力，做到統(tǒng)一當(dāng)中求變化，變化當(dāng)中有統(tǒng)一。（見下圖）

 

WUI 即網(wǎng)頁端用戶界面（Web User Interface，簡稱 WUI）是專指網(wǎng)頁端人機(jī)交互界面的設(shè)計(jì)。從事WUI的設(shè)計(jì)同學(xué)以后要更多的接觸PC端的網(wǎng)頁布局設(shè)計(jì)。要求設(shè)計(jì)師對(duì)網(wǎng)頁的開發(fā)和設(shè)計(jì)流程要熟悉和了解。尤其是網(wǎng)頁的過去 現(xiàn)在 和未來都有哪些變化，應(yīng)該怎么布局更合理。WUI設(shè)計(jì)師要掌握的知識(shí)非常多，比如網(wǎng)頁的常規(guī)尺寸，字體字號(hào)，配色等內(nèi)容，還需要WUI同學(xué)會(huì)一點(diǎn)HTML及CSS的知識(shí)。所以網(wǎng)頁UI設(shè)計(jì)師的身價(jià)目前普遍要高于平面設(shè)計(jì)師。

MUI  手機(jī)端用戶界面（Mobile User Interface，簡稱 MUI）是專指手機(jī)端人機(jī)交互界面的設(shè)計(jì)。手機(jī)端用戶界面的設(shè)計(jì)有點(diǎn)類似網(wǎng)頁端設(shè)計(jì)，但是由于顯示媒介不同，造成的尺寸和交互方式也不同，WUI是通過鼠標(biāo)和鍵盤和界面進(jìn)行交互，而手機(jī)端頁面主要是通過手指進(jìn)行點(diǎn)擊 長按 滑動(dòng) 晃動(dòng)等方式。所以設(shè)計(jì)的風(fēng)格也截然不同。但設(shè)計(jì)的原理是相通的。手機(jī)端由于受到屏幕尺寸的限制，所以方寸之間每一像素都很珍貴，所以我們?cè)谠O(shè)計(jì)手機(jī)端的UI界面的時(shí)候一定主要像素對(duì)齊等細(xì)節(jié)。

4.UI設(shè)計(jì)的基本原則

 

我們?cè)谠O(shè)計(jì)任何產(chǎn)品的時(shí)候都可以從三個(gè)維度去考慮如何設(shè)計(jì)，哪三個(gè)維度呢，就是產(chǎn)品的形，色，質(zhì)。

形，說的就是產(chǎn)品的頁面布局風(fēng)格，圖標(biāo)類型風(fēng)格等。一個(gè)產(chǎn)品里的UI設(shè)計(jì)元素應(yīng)該是統(tǒng)一的。在其他設(shè)計(jì)分類中，形還可以指代產(chǎn)品的造型等。

 

色：就是指一個(gè)產(chǎn)品的主色和輔助色都是什么。在用色的時(shí)候一定要考究，顏色不要過于多顯得雜亂。應(yīng)該定義一個(gè)產(chǎn)品的主色和輔助色即可。一個(gè)產(chǎn)品里的UI設(shè)計(jì)元素其顏色應(yīng)該是統(tǒng)一的，有主次之分。

質(zhì)：質(zhì)就是指產(chǎn)品的整體設(shè)計(jì)風(fēng)格，也叫調(diào)性。是清新風(fēng)格，還是商務(wù)風(fēng)格，還是卡通風(fēng)格等。質(zhì)還可以理解成產(chǎn)品的品質(zhì)。

 

以上內(nèi)容均附視頻教程：《UI設(shè)計(jì)小白到大神的進(jìn)階之路—入門基礎(chǔ)篇》