【課程背景】

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

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

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

【課程收益】

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

Ø 掌握移動端的設計特性+架構+方法+表現技法以及移動端設計規范IOS和Material設計規范的核心思想和理念;

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

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

【課程特色】

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

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

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

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

【課程對象】

產品經理、UIUE設計師、用戶研究員、交互設計師、數據分析師、項目經理、前后端開發工程師、產品運營、需求分析師等。

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

【課程大綱】

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

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

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

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

二、B端產品設計規范

1. 為什么建立設計規范

2. 什么是設計規范

Ø 通用組件

ü 色彩

ü 字體

ü 間距

ü 圓角

ü 分割線

ü ……

Ø 導航組件

Ø 數據錄入組件

Ø 數據展示

Ø 反饋

Ø 業務組件

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

Ø 親密性

Ø 對齊

Ø 對比

Ø 重復

Ø 直截了當

Ø 足不出戶

Ø 簡化交互

Ø 提供邀請

Ø 巧用過渡

Ø 及時反應

案例：B端后臺產品各種表單和界面設計

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

1. 表格頁構成

2. 表格頁設計詳解

3. 列表與表格的不同

五、表單頁設計詳解

1. 什么是表單頁

2. 表單頁設計原則

3. 表單的構成

4. 交互與布局

5. 從能用到易用

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

1. 什么是詳情頁

2. 詳情頁設計原則

3. 詳情頁拆解

4. 看板頁拆解

5. 小結

七、數據可視化大屏設計

1. 視覺實戰

Ø 數據可視化和設計流程

Ø 可視化設計規范

2. PC數據概覽頁設計

Ø 定義模塊類型

Ø 確定模塊優先級

Ø 布局重構

Ø 通用視覺規范

Ø 模塊逐個拆解

3. 數據可視化大屏設計

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

案例：某數據可視化大屏視覺效果分析

八、C端產品設計規范-IOS+安卓Materialdesign設計規范要點解讀

1. 設計原則和理念

Ø 美學完整性

Ø 一致性

Ø 直接操控

Ø 反饋

Ø 隱喻

Ø 用戶控制

2. 設計規范

Ø 色彩體系

Ø 文字權重

Ø 間距和對齊

Ø 布局分析

Ø 圖標設計

Ø 交互動作

Ø 各種視圖

Ø 各種控件的用戶體驗

Ø ……

九、移動UI設計特性

1. 情景特性

2. 網絡特性

3. 物理特性

4. 觸摸手勢

5. 系統特性

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

十、移動UI設計方法

1. 關于輸入

2. 簡單易懂

3. 注意中斷

4. 關注內容

5. 給個反饋

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

十一、UI設計20原則

Ø 一致性原則

Ø 容錯原則

Ø 人性化原則

Ø 7加減2

Ø 防錯

Ø 隱喻

Ø 界面可控

Ø 清晰

Ø 設計服務于交互

Ø 尊重用戶注意力

Ø 界面主題

Ø 直接操作

Ø 視覺層次主次分明

Ø 自然過渡

Ø 循序展現

Ø 內嵌“幫助”

Ø 默認狀態

Ø 無形的設計

Ø ……

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