NGBOSS2-CRM(V3.5)界面标准化分册V1.0.0-20110530.doc

目 录 1. 范围 1 2. 引用文件 1 3. 术语、定义和缩略语 2 4. 总体说明 7 4.1. 驱动力 8 4.2. 编写目标 8 4.3. 编写原则 8 4.4. 与NG2-CRM规范的关系 9 4.5. 文档结构说明 9 5. 总体框架 10 5.1. 体系结构 10 5.2. 用户体验设计总则 11 5.2.1. 保持一致性 11 5.2.2. 错误恢复 12 5.2.3. 减轻记忆负担 12 5.2.4. 系统状态可见 12 5.2.5. 预防错误发生 12 5.2.6. 贴近用户场景 13 5.2.7. 使用舒适高效 13 5.2.8. 界面美观精炼 13 5.2.9. 保障用户控制和自由 14 5.2.10. 提供帮助和文档 14 5.3. 设计框架 14 6. 信息架构 16 6.1. 信息分类 16 6.1.1. 精确分类 16 6.1.2. 模糊分类 17 6.2. 信息组织 17 6.2.1. 层级结构组织 18 6.2.2. 超链接组织 18 6.3. 信息标识 19 6.4. 信息导航 19 6.4.1. 全局导航 20 6.4.2. 频道导航 20 6.4.3. 上下文导航 20 6.4.4. 辅助导航 20 6.5. 信息搜索 21 7. 交互设计 21 7.1. 表单 21 7.2. 控件 23 7.2.1. 超链接（Hyperlink） 23 7.2.2. 文本框（Text） 24 7.2.3. 文本域（Textarea） 25 7.2.4. 下拉列表（Select） 25 7.2.5. 单选框（Radio） 26 7.2.6. 复选框（CheckBox） 27 7.2.7. 按钮（Button） 27 7.2.8. 表格（Table） 28 7.2.9. 分页（Paging） 30 7.2.10. 列表（List） 30 7.2.11. 日历控件（Calendar） 31 7.2.12. 标签页（Tab） 32 7.2.13. 树形控件（Tree） 34 7.2.14. 冒泡提示（Tips） 35 7.2.15. 消息提示框（Message） 35 7.2.16. 面包屑导航（BreadcrumbNavigation） 36 7.2.17. 系统响应状态标识（Loading） 37 7.2.18. 图标（Icon） 38 7.3. 用户交互 38 7.3.1. 任务级交互 38 7.3.2. 表单级交互 40 8. 框架设计 47 8.1. 窗体 47 8.2. 布局 48 8.2.1. 总体框架布局 49 8.2.2. 登录窗口布局 51 9. 视觉 53 9.1. 主题 53 9.2. 全称与简称 54 9.2.1. 企业名称 54 9.2.2. 系统名称 54 9.3. LOGO 55 9.4. 色彩 56 9.5. 字体 57 9.6. 图片 58 10. 技术要求 59 10.1. 性能要求 59 10.1.1. 性能原则 59 10.1.2. 指标要求 60 10.2. 页面安全要求 60 10.3. 日志及交互提升要求 61 图 表 目 录 表2- 1规范性引用文件 1 表3- 1术语与定义 2 表3- 2术语与定义 6 图5- 1 NG2-CRM系统结构 10 图5- 2中国移动CRM界面设计框架 15 图6- 1层级结构组织 18 图6- 2超链接组织 18 图7- 1 表单示例 23 图7- 2超链接初始状态示例 24 图7- 3超链接鼠标悬停状态示例 24 图7- 4超链接已访问状态示例 24 图7- 5文本框状态示例 25 图7- 6文本域默认状态示例 25 图7- 7下拉列表鼠标悬停示例 26 图7- 8单选框示例 26 图7- 9复选框示例 27 图7- 10按钮间距示例 28 图7- 11按钮状态示例 28 图7- 12有竖线表格示例 29 图7- 13无竖线表格示例 30 图7- 14分页示例 30 图7- 15有横向间隔线列表示例 31 图7- 16无横向间隔线列表示例 31 图7- 17日历控件示例 32 图7- 18标签页右键示例 33 图7- 19标签页Tips示例 33 图7- 20标签页隐藏按钮示例 33 图7- 21单选树示例 34 图7- 22复选树部分选中示例 34 图7- 23冒泡提示示例 35 图7- 24模态窗示例 36 图7- 25弹出层示例 36 图7- 26面包屑导航默认状态示例 36 图7- 27面包屑导航鼠标悬停状态 37 图7- 28进度条示例 37 图7- 29Loading示例 37 图7- 30鼠标等待示例 37 图7- 31图标示例 3