【課程背景】

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

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

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

【課程收益】

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

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

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

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

【課程特色】

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

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

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

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

【課程對象】

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

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

【課程大綱】

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

1. 用戶體驗要素五個層面的總體關系

2. 視覺層設計的定義、難點和要點

3. B/C端視覺設計的差異

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

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

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

Ø 通用組件

ü 色彩

ü 字體

ü 間距

ü 圓角

ü 分割線

ü ……

Ø 導航組件

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

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

Ø 反饋

Ø 業(yè)務組件

三、B端設計語言-Ant Design詳解

Ø 親密性

Ø 對齊

Ø 對比

Ø 重復

Ø 直截了當

Ø 足不出戶

Ø 簡化交互

Ø 提供邀請

Ø 巧用過渡

Ø 及時反應

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

四、典型頁面拆解-表格頁的設計

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

2. 表格頁設計詳解

3. 列表與表格的不同

五、表單頁設計詳解

1. 什么是表單頁

2. 表單頁設計原則

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

4. 交互與布局

5. 從能用到易用

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

1. 什么是詳情頁

2. 詳情頁設計原則

3. 詳情頁拆解

4. 看板頁拆解

5. 小結(jié)

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

1. 視覺實戰(zhàn)

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

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

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

Ø 定義模塊類型

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

Ø 布局重構(gòu)

Ø 通用視覺規(guī)范

Ø 模塊逐個拆解

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

Ø 可視化大屏設計流程和原則

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

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

1. 設計原則和理念

Ø 美學完整性

Ø 一致性

Ø 直接操控

Ø 反饋

Ø 隱喻

Ø 用戶控制

2. 設計規(guī)范

Ø 色彩體系

Ø 文字權(quán)重

Ø 間距和對齊

Ø 布局分析

Ø 圖標設計

Ø 交互動作

Ø 各種視圖

Ø 各種控件的用戶體驗

Ø ……

九、移動UI設計特性

1. 情景特性

2. 網(wǎng)絡特性

3. 物理特性

4. 觸摸手勢

5. 系統(tǒng)特性

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

十、移動UI設計方法

1. 關于輸入

2. 簡單易懂

3. 注意中斷

4. 關注內(nèi)容

5. 給個反饋

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

十一、UI設計20原則

Ø 一致性原則

Ø 容錯原則

Ø 人性化原則

Ø 7加減2

Ø 防錯

Ø 隱喻

Ø 界面可控

Ø 清晰

Ø 設計服務于交互

Ø 尊重用戶注意力

Ø 界面主題

Ø 直接操作

Ø 視覺層次主次分明

Ø 自然過渡

Ø 循序展現(xiàn)

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

Ø 默認狀態(tài)

Ø 無形的設計

Ø ……

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