【課程背景】

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

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

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

【課程收益】

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

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

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

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

【課程特色】

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

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

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

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

【課程對(duì)象】

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

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

【課程大綱】

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

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

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

3. B/C端視覺(jué)設(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ì)語(yǔ)言-Ant Design詳解

Ø 親密性

Ø 對(duì)齊

Ø 對(duì)比

Ø 重復(fù)

Ø 直截了當(dāng)

Ø 足不出戶

Ø 簡(jiǎn)化交互

Ø 提供邀請(qǐng)

Ø 巧用過(guò)渡

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

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

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

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

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

3. 列表與表格的不同

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

1. 什么是表單頁(yè)

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

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

4. 交互與布局

5. 從能用到易用

六、典型頁(yè)面拆解-詳情與看板

1. 什么是詳情頁(yè)

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

3. 詳情頁(yè)拆解

4. 看板頁(yè)拆解

5. 小結(jié)

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

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

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

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

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

Ø 定義模塊類(lèi)型

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

Ø 布局重構(gòu)

Ø 通用視覺(jué)規(guī)范

Ø 模塊逐個(gè)拆解

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

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

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

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

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

Ø 美學(xué)完整性

Ø 一致性

Ø 直接操控

Ø 反饋

Ø 隱喻

Ø 用戶控制

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

Ø 色彩體系

Ø 文字權(quán)重

Ø 間距和對(duì)齊

Ø 布局分析

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

Ø 交互動(dòng)作

Ø 各種視圖

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

Ø ……

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

1. 情景特性

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

3. 物理特性

4. 觸摸手勢(shì)

5. 系統(tǒng)特性

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

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

1. 關(guān)于輸入

2. 簡(jiǎn)單易懂

3. 注意中斷

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

5. 給個(gè)反饋

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

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

Ø 一致性原則

Ø 容錯(cuò)原則

Ø 人性化原則

Ø 7加減2

Ø 防錯(cuò)

Ø 隱喻

Ø 界面可控

Ø 清晰

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

Ø 尊重用戶注意力

Ø 界面主題

Ø 直接操作

Ø 視覺(jué)層次主次分明

Ø 自然過(guò)渡

Ø 循序展現(xiàn)

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

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

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

Ø ……

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