一、UI是什麼?

最近有不少想學UI設計的同學都在咨詢我一些問題,他們想學UI設計但好像反而不知道UI設計到底是什麼。對UI這個行業的瞭解僅僅局限於一些朋友或網上查資料以及部分培訓機構的老師對他們講的門檻低、易入門、工資高、好就業等等,但對UI到底是怎麼?做這個行業的工作內容到底在做什麼都還是比較迷茫。我就僅以我個人的拙見,簡單的和大傢分享一下UI設計到底是個什麼樣行業。

書面解釋

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

個人理解

通過顯示器呈現出的界面。包括單不限於:手機界面、電腦界面、智能手表界面、銀行的取號機界面、機場的航班顯示板等等。隻要是通過顯示器呈現出的界面,不管是帶交互還是不帶交互的都可以理解為是UI界面。而設計UI界面的工作就叫UI設計,做UI設計工作的崗位就叫UI設計師。

UI界面

二、UI的分類?

1、移動端(GUI)

移動端多指手機端UI設計,也叫GUI設計,是現在最常見的UI,也是大部分UI設計的主要工作。

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

手機源生UI界面:比如蘋果、華為、小米等手機廠商的手機界面;

手機源生UI界面

APP UI界面:指手機安裝的一些APP,例如京東、淘寶、微信等所有安裝在我們手機上的APP,也是大部分UI設計的主要工作;

APP UI界面

小程序UI界面:內置在微信或支付寶等第三方平臺的小程序,近幾年因為小程序的開發成本低、推廣便捷等優勢也成為大部分公司喜愛的一種項目承載方式,所以我們日常做小程序的工作也慢慢多瞭起來,設計方式和APP UI的方式是一樣的。

小程序UI界面

2、PC端

PC端就是我們所說的電腦端,雖然隨著智能手機的崛起導致大傢對電腦的依賴性變低,但大部分公司一樣會有不少PC端UI設計的需求,現在最常見的就是企業官網和B端後臺的UI設計。

PC端UI大致可分為PC源生UI界面、 客戶端UI界面、網頁端UI界面三大類

PC源生UI界面:比如蘋果、windows系統的電腦源生UI;

PC源生UI界面

客戶端UI界面:電腦上安裝的軟件UI界面,比如飛書、英雄聯盟端遊、PS、AI等操作軟件、一些公司的後臺等,通俗來說就是需要安裝之後才能使用的軟件統稱為客戶端,而這些軟件的界面就統稱客戶端UI。

客戶端UI界面

網頁端UI:通過瀏覽器輸入網址打開的網頁,比如企業官網、站酷、花瓣等門戶型網站等。

網頁端U

在這裡來說移動端和PC端卻是共通的;移動端和PC端都有各自的源生系統UI,移動端的APP UI和PC端的客戶端UI也都是需要安裝在各自設備上的軟件,移動端的小程序和PC端的網頁也都是內置到第三方的,小程序是內置到微信、支付寶等第三方APP上面,PC端網頁則是內置到瀏覽器內。

3、其他UI界面

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

其他UI界面

三、UI界面的構成

一個UI界面通常來說由三部分組成:配色、排版和圖標。當然,這是我個人的理解,可能是不對的。後面的內容我就以現在UI設計師最常做的工作,也就是APP UI界面設計舉例。

1、配色

這個應該很好理解,任何APP或網頁等UI界面都會有自己的主色,也有相應的顏色搭配。一般我們對某個軟件的潛意識印象就是它的主色,比如微信的綠色、京東的紅色、淘寶的橙色等等,我們在設計UI界面的時候都會優先確定好該UI界面或是該APP的主色,以及相應的輔助色、點綴色等,這就是該APP項目的整體配色。而怎樣去給不同類型的項目制定相應的主色,及根據主色和想表達的視覺感受去搭配相應的輔助和點綴色,是需要一些理論知識和大量的配色練習的,配色理論知識我會在後面的課程中講到,練習的話就需要你們自己去多看多練瞭。

2、排版

對一個UI界面來說我覺得最重要的可能就是排版瞭,一個界面好不好看往往就是由排版來決定的。而且排版不僅僅隻對UI重要,對平面設計、美工、線下印刷來說一樣非常重要。特別是對平面來說,比如一些書籍或企業畫冊來說,是沒有多餘配色的,整本書或企業畫冊全部是由少部分的圖片和大部分的文字進行排版來完成,所以紮實的排版公司就尤為重要。

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

排版的四大基本原則:對齊、對比、親密性、重復,在《寫給大傢看的設計書》這本書中,有非常詳細的講解,基本上把這四大基本原則吃透瞭大傢排版就不會有太大問題瞭。

3、圖標

圖標在UI界面中也占有不小的比重,一般我們對界面風格的體現都是從圖標風格上體現出來。因為我們實際工作中設計的UI並不會像大傢在網上看到的那麼炫酷,整個界面的配色排版都有強烈的視覺沖擊力,反而往往是比較樸素的,圖標就成為瞭樸素UI界面中的一大亮點和風格體現點。

UI界面的構成

四、UI設計師的工作

  • UI從產品經理那裡取得原型圖後,通過各種途徑盡可能多的先找一些同類型產品進行比較和參考,做到心中對該項目有明確的認知和規劃;
  • 根據項目的類型、用戶群體、核心價值觀體現等通過分析後選擇符合項目要求的設計風格和配色;
  • 制定UI設計規范、設計相應的UI設計稿,完成後和相關的人員進行視覺稿評審;
  • 評審通過後將切圖、標註等交付給開發,由開發來研發整個項目;
  • 開發完成瞭項目的基本研發工作後對開發的產出進行UI走查工作,盡可能保證開發人員對UI設計稿的高度還原;
  • 開發的產出被通過後,輔助開發完成項目的上線工作,此階段可能需要提供APP的啟動LOGO、啟動頁、引導頁等。

五、一張UI稿經歷的階段

1、原型圖(低保真圖):產品經理產出,確定界面的大致功能和簡單的佈局

2、UI視覺稿(高保真圖):UI設計產出,完整的設計稿,包含瞭項目的配色、排版、圖標繪制、交互狀態等等

3、研發稿:開發對UI視覺稿的代碼還原,可運行的完整項目

4、上線版:最後呈現給用戶使用的效果

一張UI稿經歷的階段


以上就是個人對UI設計的一些簡單分享。