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

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

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

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

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

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

一. 需求階段

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

二.原型階段

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

三.視覺階段

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

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

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

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

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

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

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

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

五. 優(yōu)化階段

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

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

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

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

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

典型例子：

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

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

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

典型例子：天氣通

三.卡片式

使用卡片樣式

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

百度外賣這兩個(gè)頁面用的是卡片式

四. 內(nèi)容為王

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

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

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

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

五. 大視野背景圖

用通欄的圖片作為背景

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

典型例子：airbnb

工具：ps、sketch、Illustrator等等

推薦書籍

謝謝大家閱讀