|
高级UIUE用户体验设计-视觉篇（B/C） 起到引导作用的MVP录课版本大纲 【课程背景】 在用户体验为王的时代，无论是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 Ø 防错 Ø 隐喻 Ø 界面可控 Ø 清晰 Ø 设计服务于交互 Ø 尊重用户注意力 Ø 界面主题 Ø 直接操作 Ø 视觉层次主次分明 Ø 自然过渡 Ø 循序展现 Ø 内嵌“帮助” Ø 默认状态 Ø 无形的设计 Ø …… 案例：表单填写界面、计时器设计、验证码输入界面……
| 
