【課程背景】

在用戶體驗(yàn)為王的時(shí)代，無論是C端產(chǎn)品還是B端的產(chǎn)品，都需要重視用戶體驗(yàn)設(shè)計(jì)對產(chǎn)品價(jià)值的賦能，而用戶體驗(yàn)設(shè)計(jì)最終落到了具體的界面設(shè)計(jì)的細(xì)節(jié)中，包括布局、規(guī)范、審美、設(shè)計(jì)邏輯等。

在我公司給很多企業(yè)產(chǎn)品研發(fā)團(tuán)隊(duì)做培訓(xùn)、咨詢的過程中，發(fā)現(xiàn)一些產(chǎn)品團(tuán)隊(duì)對于基本的設(shè)計(jì)規(guī)范的底層認(rèn)知薄弱，導(dǎo)致做出來的圖形界面違反了設(shè)計(jì)的一些通用性的規(guī)則如一致性、親密性、對齊對比、狀態(tài)可見、防錯(cuò)容錯(cuò)等，對于設(shè)計(jì)組件構(gòu)建的必要性和重要性也缺乏概念，對于B端產(chǎn)品的設(shè)計(jì)方法和C端產(chǎn)品的設(shè)計(jì)方法的異同點(diǎn)也缺乏系統(tǒng)專業(yè)的認(rèn)知，以及在產(chǎn)品界面設(shè)計(jì)完成之后如何判斷界面設(shè)計(jì)是否合理、高效等缺乏科學(xué)的方法論做指導(dǎo)。

針對以上若干問題，本課程在《以用戶為中心的產(chǎn)品設(shè)計(jì)全流程實(shí)戰(zhàn)》課程基礎(chǔ)之上，將視覺設(shè)計(jì)階段所需要的各種知識、工具、思維等方面獨(dú)立抽取出來，結(jié)合大量的培訓(xùn)和咨詢案例，研究國內(nèi)外各種經(jīng)典用戶體驗(yàn)設(shè)計(jì)語言、方法、工具和思維模式，并不斷總結(jié)，從而推出該課程，案例、模板、經(jīng)驗(yàn)、教訓(xùn)等貫穿全課程。以期達(dá)到提高企業(yè)研發(fā)團(tuán)隊(duì)工作效率，做出規(guī)范美觀的，符合設(shè)計(jì)原則，與產(chǎn)品目標(biāo)和價(jià)值匹配的界面的目標(biāo)。

【課程收益】

Ø 快速提升對界面美學(xué)的把握，提高對設(shè)計(jì)的認(rèn)知水平，使得原有的產(chǎn)品設(shè)計(jì)質(zhì)量得到明顯的提升。

Ø 掌握移動端的設(shè)計(jì)特性+架構(gòu)+方法+表現(xiàn)技法以及移動端設(shè)計(jì)規(guī)范IOS和Material設(shè)計(jì)規(guī)范的核心思想和理念;

Ø 掌握B端產(chǎn)品設(shè)計(jì)規(guī)范和主流B端設(shè)計(jì)語言Ant design、element、zandesign的核心設(shè)計(jì)原則和設(shè)計(jì)方法;

Ø 掌握大屏設(shè)計(jì)的交互原理和視覺設(shè)計(jì)流程、方法、工具等……

【課程特色】

全面：系統(tǒng)完整的建立用戶體驗(yàn)設(shè)計(jì)的思維模型，強(qiáng)調(diào)動手實(shí)戰(zhàn)，快速見效。設(shè)計(jì)思維與產(chǎn)品研發(fā)全流程緊密結(jié)合，涵蓋C端和B端所需的用戶體驗(yàn)設(shè)計(jì)知識，從移動端、信息化平臺到傳統(tǒng)的BS網(wǎng)站、CS客戶端等都可以很好的運(yùn)用此套課程體系的知識。

案例跟蹤：通過經(jīng)典案例的從功能定位到設(shè)計(jì)完成的全程跟蹤，使所有的知識點(diǎn)都能得到印證和落地，更加直觀、細(xì)致，提高經(jīng)驗(yàn)積累。

原型驅(qū)動：授課過程中采用原型驅(qū)動授課模式，從原型案例入手講解知識點(diǎn)。

隨堂演練：適度的作業(yè)練習(xí)、研討、點(diǎn)評讓學(xué)員參與到學(xué)習(xí)過程中，而不是被動的灌輸知識。做到課程結(jié)束即可有課量化的前后作品對比的效果。

【課程對象】

產(chǎn)品經(jīng)理、UIUE設(shè)計(jì)師、用戶研究員、交互設(shè)計(jì)師、數(shù)據(jù)分析師、項(xiàng)目經(jīng)理、前后端開發(fā)工程師、產(chǎn)品運(yùn)營、需求分析師等。

【課程時(shí)間】1天(6小時(shí)/天)

【課程大綱】

一、用戶體驗(yàn)要素整體介紹和UI界面視覺設(shè)計(jì)的定義

1. 用戶體驗(yàn)要素五個(gè)層面的總體關(guān)系

2. 視覺層設(shè)計(jì)的定義、難點(diǎn)和要點(diǎn)

3. B/C端視覺設(shè)計(jì)的差異

二、B端產(chǎn)品設(shè)計(jì)規(guī)范

1. 為什么建立設(shè)計(jì)規(guī)范

2. 什么是設(shè)計(jì)規(guī)范

Ø 通用組件

ü 色彩

ü 字體

ü 間距

ü 圓角

ü 分割線

ü ……

Ø 導(dǎo)航組件

Ø 數(shù)據(jù)錄入組件

Ø 數(shù)據(jù)展示

Ø 反饋

Ø 業(yè)務(wù)組件

三、B端設(shè)計(jì)語言-Ant Design詳解

Ø 親密性

Ø 對齊

Ø 對比

Ø 重復(fù)

Ø 直截了當(dāng)

Ø 足不出戶

Ø 簡化交互

Ø 提供邀請

Ø 巧用過渡

Ø 及時(shí)反應(yīng)

案例：B端后臺產(chǎn)品各種表單和界面設(shè)計(jì)

四、典型頁面拆解-表格頁的設(shè)計(jì)

1. 表格頁構(gòu)成

2. 表格頁設(shè)計(jì)詳解

3. 列表與表格的不同

五、表單頁設(shè)計(jì)詳解

1. 什么是表單頁

2. 表單頁設(shè)計(jì)原則

3. 表單的構(gòu)成

4. 交互與布局

5. 從能用到易用

六、典型頁面拆解-詳情與看板

1. 什么是詳情頁

2. 詳情頁設(shè)計(jì)原則

3. 詳情頁拆解

4. 看板頁拆解

5. 小結(jié)

七、數(shù)據(jù)可視化大屏設(shè)計(jì)

1. 視覺實(shí)戰(zhàn)

Ø 數(shù)據(jù)可視化和設(shè)計(jì)流程

Ø 可視化設(shè)計(jì)規(guī)范

2. PC數(shù)據(jù)概覽頁設(shè)計(jì)

Ø 定義模塊類型

Ø 確定模塊優(yōu)先級

Ø 布局重構(gòu)

Ø 通用視覺規(guī)范

Ø 模塊逐個(gè)拆解

3. 數(shù)據(jù)可視化大屏設(shè)計(jì)

Ø 可視化大屏設(shè)計(jì)流程和原則

案例：某數(shù)據(jù)可視化大屏視覺效果分析

八、C端產(chǎn)品設(shè)計(jì)規(guī)范-IOS+安卓Materialdesign設(shè)計(jì)規(guī)范要點(diǎn)解讀

1. 設(shè)計(jì)原則和理念

Ø 美學(xué)完整性

Ø 一致性

Ø 直接操控

Ø 反饋

Ø 隱喻

Ø 用戶控制

2. 設(shè)計(jì)規(guī)范

Ø 色彩體系

Ø 文字權(quán)重

Ø 間距和對齊

Ø 布局分析

Ø 圖標(biāo)設(shè)計(jì)

Ø 交互動作

Ø 各種視圖

Ø 各種控件的用戶體驗(yàn)

Ø ……

九、移動UI設(shè)計(jì)特性

1. 情景特性

2. 網(wǎng)絡(luò)特性

3. 物理特性

4. 觸摸手勢

5. 系統(tǒng)特性

案例：運(yùn)動App、印象筆記、clear……

十、移動UI設(shè)計(jì)方法

1. 關(guān)于輸入

2. 簡單易懂

3. 注意中斷

4. 關(guān)注內(nèi)容

5. 給個(gè)反饋

案例：銀行密碼登錄框、Chirp、微信、facebook、大眾點(diǎn)評clear……

十一、UI設(shè)計(jì)20原則

Ø 一致性原則

Ø 容錯(cuò)原則

Ø 人性化原則

Ø 7加減2

Ø 防錯(cuò)

Ø 隱喻

Ø 界面可控

Ø 清晰

Ø 設(shè)計(jì)服務(wù)于交互

Ø 尊重用戶注意力

Ø 界面主題

Ø 直接操作

Ø 視覺層次主次分明

Ø 自然過渡

Ø 循序展現(xiàn)

Ø 內(nèi)嵌“幫助”

Ø 默認(rèn)狀態(tài)

Ø 無形的設(shè)計(jì)

Ø ……

案例：表單填寫界面、計(jì)時(shí)器設(shè)計(jì)、驗(yàn)證碼輸入界面……