UI設計小白到大神的進階之路—入門基礎篇

最新 08-07

什麼是UI設計？

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

我們還記得傳統的打字機或者電報嗎？那些雖然也是與信息相關的設備，但由於那個年代科技水平尚不發達，所以沒有界面呈現給我們，所以我們與機器之間的交互是通過輸入設備完成的。隨著科技的發展，計算機等硬體開始有了屏幕，並且人們可以通過滑鼠和鍵盤對軟體實施操作，實現了人與機器之間的交互。那麼我們本課程要學習的就是如何設計UI界面以及應該掌握哪些基礎知識。

UI設計發展史

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

那個時候的計算機內存和CPU的效能和今天都沒辦法比擬，所以人們的審美也受到技術的限制，我們只能設計出這種相對簡陋的UI設計元素，現在看起來相對單調乏味，不過在當時呢，已經算是里程碑式的躍進了。（見下圖）

隨著計算機成像能力的發展，在中期UI設計發展出了以擬物化為風格的界面設計。就是PPT這張圖上所呈現的。設計師可以設計出色彩更加豐富細膩，更加真實的UI設計元素。在中期主要以寫實的設計風格為主。讓UI界面看起來更加生動貼近現實。（見下圖）

到了後期隨著網路的普及但受到帶寬的限制，計算機軟體界面要求能最快時間載入並呈現給用戶，擬物化風格界面顯然載入會很慢並大量消耗流量，人們也看膩了擬物化的界面。根據現實需求，扁平化圖標問世了。就是我們現在依然在用的扁平化設計風格。（見下圖）

UI設計風格

擬物化

擬物化的優點：更加真實的還原了生活中的物品作為功能的象徵和體現。讓人們能夠快速理解圖標的含義，說白了就是看圖說話。

擬物化的缺點：但是擬物化除了看起來逼真它本身有什麼缺點呢？第一就是對設計師的手繪能力要求相對較高，如果你沒有紮實的繪畫基礎，你很難用軟體繪製出高保真的圖標。第二呢，就是工作效率相對低下。因為繪製一個高保真的擬物化圖標需要很多圖層和樣式進行疊加，可能一天也就能畫一兩個，那麼就相對延長了開發時間。現在是一個講究工作效率的年代，敏捷開發為主。花費太長時間去扣細節已經過時了。第三呢，就是隨著移動設備的普及，我們更願意用手機進行瀏覽網頁。但是高保真的擬物化圖標佔據的空間比較大所以會消耗我們更多的流量而且頁面載入會變的很慢，人機交互變的不太友好。那麼為了解決這一問題，扁平化設計風格的圖標問世了。一個風格的出現絕對不是憑空出現的，一定是有所需求。對吧。扁平化圖標由於色彩單一，樣式簡單，佔據的空間較小，載入快，流量消耗小。所以成為了現在的主流設計風格。

那麼扁平化呢，又可以細分出這種線性的圖標，塊面類圖標和2.5D偽3D圖標。

UI設計的分類

我們將UI設計可以細分出以下三種，分別是GUI WUI MUI。

GUI 即圖形用戶界面（Graphical User Interface，簡稱 GUI）是指採用圖形方式顯示的計算機操作用戶界面。你可以把它理解成就是專攻畫ICON的設計同學，GUI要求設計師有紮實的美術功底，將具象的實物抽象成簡單的ICON。需要我們在繪製之前在紙上繪製出簡單的草圖。GUI的難點就在於你有可能要為一個產品畫一整套的ICON，那就非常考驗設計師的整體設計風格的把控能力，做到統一當中求變化，變化當中有統一。（見下圖）

WUI 即網頁端用戶界面（Web User Interface，簡稱 WUI）是專指網頁端人機交互界面的設計。從事WUI的設計同學以後要更多的接觸PC端的網頁布局設計。要求設計師對網頁的開發和設計流程要熟悉和了解。尤其是網頁的過去現在和未來都有哪些變化，應該怎麼布局更合理。WUI設計師要掌握的知識非常多，比如網頁的常規尺寸，字體字型大小，配色等內容，還需要WUI同學會一點HTML及CSS的知識。所以網頁UI設計師的身價目前普遍要高於平面設計師。

MUI 手機端用戶界面（Mobile User Interface，簡稱 MUI）是專指手機端人機交互界面的設計。手機端用戶界面的設計有點類似網頁端設計，但是由於顯示媒介不同，造成的尺寸和交互方式也不同，WUI是通過滑鼠和鍵盤和界面進行交互，而手機端頁面主要是通過手指進行點擊長按滑動晃動等方式。所以設計的風格也截然不同。但設計的原理是相通的。手機端由於受到屏幕尺寸的限制，所以方寸之間每一像素都很珍貴，所以我們在設計手機端的UI界面的時候一定主要像素對齊等細節。