系统原型与UI设计讲义

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