系统原型与UI设计

系统原型与UI设计
主要内容
界面设计基本原则
ຫໍສະໝຸດ Baidu系统界面设计流程
系统原型绘制
UI基本原则
以用户为中心
清楚一致的设计
拥有良好的直觉 特征
较快的响应速度
简单且美观
• 用户主动
• 可用户自定义 • 交互式窗口
• 统一术语
• 一致的命令 • 一致的界面
• 熟悉的隐喻
• 隐喻支持用户认 知而不是记忆 • 同常见软件保持 一致性
• 界面能很快对用 户操作作出反应
• 提供快捷键 • 不要重绘屏幕
• 易于学习
• 易于使用
• 易于感应
• 保持前台交互 • 谅解
• 操作环境一致
• 隐喻的一致性 • 文字内容清楚
UI设计逻辑
罗列所 有功能 进行设 计检测 明确主 要功能
进行初 步编排
进行逻 辑分组
逻辑分组
首要功能是什么？ 辅助功能是什么？
哪些是频繁使用，但不是首要的功能？
哪些是用户必须操作的？ 哪些是程序的处理过程中的信息？ 功能之间的逻辑关联是什么？
实际工作的操作流程是什么？
UI设计检测
第一眼见到的内容是什么？ 认为的界面功能是什么？
猜想的操作步骤是什么？
有没有期待看到的信息在界面上没有显示？ 有没有什么地方令你困惑？ 什么地方阻碍了你的操作进行？
DEMO
主要内容
界面设计基本原则
系统界面设计流程
系统原型绘制
系统原型绘制工具
白纸+笔
Word
Excel
Visio
主要内容
界面设计基本原则
系统界面设计流程
系统原型绘制
UI设计流程
• • • • • 产品的功能、用户流程、信息架构、交互细节、页面元素 只把它要做的事情和怎么做这些事情想清楚 把它怎么和用户交互想清楚，而且把所有这些都画出来 常见的产出物形式（线框图） 负责人：需求人员、产品经理
原型
模型
• 从全局的角度来做视觉设计 • 不是一步由“美工”来“美化”的工作 • 对原型设计有深刻的理解，对交互设计和尚未进行的 Code都要有充分的 了解 • 不要停留在“效果”、“风格”等表面议题 • 负责人：页面设计人员、系统设计人员 • • • • 按照原型和模型用前端技术实现 前端开发放在设计团队 前端开发是对用户体验的提升和保证 负责人：界面开发人员
实际使用和你期待的设计效果有什么出入？
C/S界面设计基本规范
窗体 菜单 工具栏 状态栏
统一术语
• • • •
业务窗口切换使用选项卡 维护功能窗口弹出窗口（最大化） 初始状态的显示内容（浏览） 整体颜色方案统一
• 界面上只提供一个菜单 • 每个主业务窗口重新调整菜单 • 一般只使用toolbar，不在使用按钮 • 把最常用的操作放到toolbar • 统一图标 • 统一显示相同的信息 • 业务窗口状态栏提供提示信息 • 操作名称 • 信息(警告信息、提示信息、帮助信息)