【课程背景】

在用户体验为王的时代，无论是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

Ø 防错

Ø 隐喻

Ø 界面可控

Ø 清晰

Ø 设计服务于交互

Ø 尊重用户注意力

Ø 界面主题

Ø 直接操作

Ø 视觉层次主次分明

Ø 自然过渡

Ø 循序展现

Ø 内嵌“帮助”

Ø 默认状态

Ø 无形的设计

Ø ……

案例：表单填写界面、计时器设计、验证码输入界面……