【課程背景】

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

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

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

【課程收益】

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

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

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

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

【課程特色】

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

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

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

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

【課程對象】

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

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

【課程大綱】

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

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

2. 視覺層設(shè)計的定義、難點和要點

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

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

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

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

Ø 通用組件

ü 色彩

ü 字體

ü 間距

ü 圓角

ü 分割線

ü ……

Ø 導(dǎo)航組件

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

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

Ø 反饋

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

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

Ø 親密性

Ø 對齊

Ø 對比

Ø 重復(fù)

Ø 直截了當

Ø 足不出戶

Ø 簡化交互

Ø 提供邀請

Ø 巧用過渡

Ø 及時反應(yīng)

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

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

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

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

3. 列表與表格的不同

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

1. 什么是表單頁

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

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

4. 交互與布局

5. 從能用到易用

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

1. 什么是詳情頁

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

3. 詳情頁拆解

4. 看板頁拆解

5. 小結(jié)

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

1. 視覺實戰(zhàn)

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

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

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

Ø 定義模塊類型

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

Ø 布局重構(gòu)

Ø 通用視覺規(guī)范

Ø 模塊逐個拆解

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

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

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

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

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

Ø 美學(xué)完整性

Ø 一致性

Ø 直接操控

Ø 反饋

Ø 隱喻

Ø 用戶控制

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

Ø 色彩體系

Ø 文字權(quán)重

Ø 間距和對齊

Ø 布局分析

Ø 圖標設(shè)計

Ø 交互動作

Ø 各種視圖

Ø 各種控件的用戶體驗

Ø ……

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

1. 情景特性

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

3. 物理特性

4. 觸摸手勢

5. 系統(tǒng)特性

案例：運動App、印象筆記、clear……

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

1. 關(guān)于輸入

2. 簡單易懂

3. 注意中斷

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

5. 給個反饋

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

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

Ø 一致性原則

Ø 容錯原則

Ø 人性化原則

Ø 7加減2

Ø 防錯

Ø 隱喻

Ø 界面可控

Ø 清晰

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

Ø 尊重用戶注意力

Ø 界面主題

Ø 直接操作

Ø 視覺層次主次分明

Ø 自然過渡

Ø 循序展現(xiàn)

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

Ø 默認狀態(tài)

Ø 無形的設(shè)計

Ø ……

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