UI知識，新手如何自學(xué)UI設(shè)計？(4)

什么是UI設(shè)計

UI的本意是用戶界面，是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。

個人認為UI設(shè)計不僅僅是豐富原型稿和產(chǎn)品經(jīng)理交接，一定程度上囊括了交互和視覺的部分責(zé)任。

日常任務(wù)和可交付成果

日常任務(wù)分為幾個階段，包括需求階段、原型階段、視覺階段、前端及開發(fā)階段、優(yōu)化階段。在整個項目流程中，UI設(shè)計師處于承上啟下的關(guān)鍵位置。

一. 需求階段

參與討論，了解并挖掘需求。進行用戶需求分析任務(wù)，協(xié)助產(chǎn)品經(jīng)理細化需求，從商業(yè)需求文檔到產(chǎn)品需求文檔。

二.原型階段

同步商業(yè)需求文檔進程，交互設(shè)計師輸出各階段所需的產(chǎn)品原型，也即線框圖。并組織評審和討論會（UI設(shè)計師也參加，可以深入的了解線框圖的邏輯），在評審和討論后，交互設(shè)計師輸出一個確認版的線框圖以及交互說明文檔。

三.視覺階段

視覺階段包括界面設(shè)計階段，界面輸出階段。

1.界面設(shè)計階段

根據(jù)原型設(shè)計階段的界面原型，對界面原型進行視覺效果的處理，該階段確定整個界面的色調(diào)、風(fēng)格、界面、窗口、圖標、皮膚的表現(xiàn)。

界面設(shè)計完成后也要組織評審會，評審要面對rd或fe的質(zhì)疑。

2.界面輸出階段（一般初學(xué)者自學(xué)時對這部分會比較迷茫，我將會在下篇文章單獨講下這部分）

界面輸出也就是切圖以及標注，并輸出整體界面的視覺規(guī)范。

四.前端以及開發(fā)階段

配合好開發(fā)人員完成相關(guān)的界面結(jié)合，驗收視覺以及前端、開發(fā)成果。根據(jù)他們的反饋，改進交互設(shè)計，并與產(chǎn)品經(jīng)理協(xié)調(diào)。

五. 優(yōu)化階段

觀測核心數(shù)據(jù)變化，進行可用性測試和用戶調(diào)研，以便優(yōu)化下個版本

當(dāng)下的UI界面設(shè)計趨勢

一.單一主色調(diào)

用簡單的色階，配套灰階來展現(xiàn)信息層次

優(yōu)點：起到了很好的信息傳達效果，減少多余信息的干擾，使用戶專注于主要信息獲取。

典型例子：

二.數(shù)據(jù)可視化

用直觀的餅圖，扇形圖，折線型，柱狀圖等豐富的表現(xiàn)方式

優(yōu)點：可以在更小的屏幕空間內(nèi)更立體的展示內(nèi)容

典型例子：天氣通

三.卡片式

使用卡片樣式

優(yōu)點：保證了卡片和卡片之間的獨立性，又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計。

百度外賣這兩個頁面用的是卡片式

四. 內(nèi)容為王

真正有價值的app，一定是內(nèi)容取勝。

新浪利用字體排版，盡可能的內(nèi)容前置，弱化圖標和操作讓用戶集中注意力于內(nèi)容閱讀上。

優(yōu)點：讓用戶聚集于內(nèi)容上

典型例子：滴滴試駕里面的車品電商頁面

五. 大視野背景圖

用通欄的圖片作為背景

優(yōu)點：提升視覺表現(xiàn)力度，又豐富了App情感化元素，這種設(shè)計方法，對字體和排版設(shè)計要求更高，難度也多，但極容易渲染氣氛。

典型例子：airbnb

工具：ps、sketch、Illustrator等等

推薦書籍

謝謝大家閱讀