NGBOSS2-CRM(V35)界面标准化分册V100-0530

1、QB-J-XXX-2009中国移动通信企业标准QB-J-XXX-2011NGBOSS2-CRM界面标准分册版本号：1.0.02011-XX-XX实施2011-XX-XX发布中国移动通信有限公司 发布QB-J-XXX-2011 PAGE VI目录TOC h z t QB标题1,1,QB标题2,2,QB标题3,3 HYPERLINK l _Toc 1.范围 PAGEREF _Toc h 1Q。 HYPERLINK l _Toc 2.引用文件 PAGEREF _Toc h 1k。 HYPERLINK l _Toc 3.术语、定义和缩缩略语 PAGEREF _Toc h 2C。 HYPERLINK l

2、 _Toc 4.总体说明 PAGEREF _Toc h 7Q。 HYPERLINK l _Toc 4.1.驱动力 PAGEREF _Toc h 8X。 HYPERLINK l _Toc 4.2.编写目标 PAGEREF _Toc h 8b。 HYPERLINK l _Toc 4.3.编写原则 PAGEREF _Toc h 8m。 HYPERLINK l _Toc 4.4.与NG2-CRM规范的关关系 PAGEREF _Toc h 9q。 HYPERLINK l _Toc 4.5.文档结构说说明 PAGEREF _Toc h 97。 HYPERLINK l _Toc 5.总体框架 PAGEREF

3、 _Toc h 101。 HYPERLINK l _Toc 5.1.体系结构 PAGEREF _Toc h 10t。 HYPERLINK l _Toc 5.2.用户体验设设计总则 PAGEREF _Toc h 113。 HYPERLINK l _Toc 5.2.1.保持一致性 PAGEREF _Toc h 114。 HYPERLINK l _Toc 5.2.2.错误恢恢复 PAGEREF _Toc h 12C。 HYPERLINK l _Toc 5.2.3.减轻记记忆负担 PAGEREF _Toc h 12d。 HYPERLINK l _Toc 5.2.4.系统状状态可见 PAGEREF _T

4、oc h 124。 HYPERLINK l _Toc 5.2.5.预防错错误发生 PAGEREF _Toc h 12s。 HYPERLINK l _Toc 5.2.6.贴近用用户场景 PAGEREF _Toc h 131。 HYPERLINK l _Toc 5.2.7.使用舒舒适高效 PAGEREF _Toc h 13Q。 HYPERLINK l _Toc 5.2.8.界面美美观精炼 PAGEREF _Toc h 13u。 HYPERLINK l _Toc 5.2.9.保障用用户控制和自由 PAGEREF _Toc h 14X。 HYPERLINK l _Toc 5.2.10.提供供帮助和文档

5、 PAGEREF _Toc h 148。 HYPERLINK l _Toc 5.3.设计框架 PAGEREF _Toc h 14j。 HYPERLINK l _Toc 6.信息架构 PAGEREF _Toc h 16X。 HYPERLINK l _Toc 6.1.信息分类 PAGEREF _Toc h 16D。 HYPERLINK l _Toc 6.1.1.精确分分类 PAGEREF _Toc h 16R。 HYPERLINK l _Toc 6.1.2.模糊分分类 PAGEREF _Toc h 17c。 HYPERLINK l _Toc 6.2.信息组织 PAGEREF _Toc h 17e。

6、 HYPERLINK l _Toc 6.2.1.层级结构组织 PAGEREF _Toc h 181。 HYPERLINK l _Toc 6.2.2.超链接接组织 PAGEREF _Toc h 18z。 HYPERLINK l _Toc 6.3.信息标识 PAGEREF _Toc h 19Y。 HYPERLINK l _Toc 6.4.信息导航 PAGEREF _Toc h 19z。 HYPERLINK l _Toc 6.4.1.全局导导航 PAGEREF _Toc h 20N。 HYPERLINK l _Toc 6.4.2.频道导导航 PAGEREF _Toc h 20E。 HYPERLINK

7、 l _Toc 6.4.3.上下文文导航 PAGEREF _Toc h 208。 HYPERLINK l _Toc 6.4.4.辅助导导航 PAGEREF _Toc h 20f。 HYPERLINK l _Toc 6.5.信息搜索 PAGEREF _Toc h 21n。 HYPERLINK l _Toc 7.交互设计 PAGEREF _Toc h 21b。 HYPERLINK l _Toc 7.1.表单 PAGEREF _Toc h 21A。 HYPERLINK l _Toc 7.2.控件 PAGEREF _Toc h 234。 HYPERLINK l _Toc 7.2.1.超链接接（Hype

8、rlink） PAGEREF _Toc h 23P。 HYPERLINK l _Toc 7.2.2.文本框（Text） PAGEREF _Toc h 24h。 HYPERLINK l _Toc 7.2.3.文本域域（Textarea） PAGEREF _Toc h 25X。 HYPERLINK l _Toc 7.2.4.下拉列列表（Select） PAGEREF _Toc h 25o。 HYPERLINK l _Toc 7.2.5.单选框（Radio） PAGEREF _Toc h 26r。 HYPERLINK l _Toc 7.2.6.复选框框（CheckBox） PAGEREF _Toc

9、h 27Q。 HYPERLINK l _Toc 7.2.7.按钮（Button） PAGEREF _Toc h 27T。 HYPERLINK l _Toc 7.2.8.表格（Table） PAGEREF _Toc h 28X。 HYPERLINK l _Toc 7.2.9.分页（Paging） PAGEREF _Toc h 30V。 HYPERLINK l _Toc 7.2.10.列表表（List） PAGEREF _Toc h 30d。 HYPERLINK l _Toc 7.2.11.日历控件（Calendar） PAGEREF _Toc h 31x。 HYPERLINK l _Toc 7.

10、2.12.标签签页（Tab） PAGEREF _Toc h 32H。 HYPERLINK l _Toc 7.2.13.树形形控件（Tree） PAGEREF _Toc h 347。 HYPERLINK l _Toc 7.2.14.冒泡提示（Tips） PAGEREF _Toc h 35W。 HYPERLINK l _Toc 7.2.15.消息息提示框（Message） PAGEREF _Toc h 35z。 HYPERLINK l _Toc 7.2.16.面包包屑导航（BreadcrumbNavigation） PAGEREF _Toc h 36c。 HYPERLINK l _Toc 7.2.

11、17.系统统响应状态标识（Loading） PAGEREF _Toc h 37R。 HYPERLINK l _Toc 7.2.18.图标标（Icon） PAGEREF _Toc h 38z。 HYPERLINK l _Toc 7.3.用户交互 PAGEREF _Toc h 38o。 HYPERLINK l _Toc 7.3.1.任务级级交互 PAGEREF _Toc h 38G。 HYPERLINK l _Toc 7.3.2.表单级级交互 PAGEREF _Toc h 40n。 HYPERLINK l _Toc 8.框架设计 PAGEREF _Toc h 47b。 HYPERLINK l _T

12、oc 8.1.窗体 PAGEREF _Toc h 47k。 HYPERLINK l _Toc 8.2.布局 PAGEREF _Toc h 48n。 HYPERLINK l _Toc 8.2.1.总体框框架布局 PAGEREF _Toc h 49t。 HYPERLINK l _Toc 8.2.2.登录窗窗口布局 PAGEREF _Toc h 51U。 HYPERLINK l _Toc 9.视觉 PAGEREF _Toc h 533。 HYPERLINK l _Toc 9.1.主题 PAGEREF _Toc h 53s。 HYPERLINK l _Toc 9.2.全称与简称称 PAGEREF _T

13、oc h 54o。 HYPERLINK l _Toc 9.2.1.企业名名称 PAGEREF _Toc h 54N。 HYPERLINK l _Toc 9.2.2.系统名名称 PAGEREF _Toc h 54m。 HYPERLINK l _Toc 9.3.LOGO PAGEREF _Toc h 55b。 HYPERLINK l _Toc 9.4.色彩 PAGEREF _Toc h 56i。 HYPERLINK l _Toc 9.5.字体 PAGEREF _Toc h 57D。 HYPERLINK l _Toc 9.6.图片 PAGEREF _Toc h 587。 HYPERLINK l _T

14、oc 10.技术要求 PAGEREF _Toc h 59u。 HYPERLINK l _Toc 10.1.性能要求求 PAGEREF _Toc h 59m。 HYPERLINK l _Toc 10.1.1.性能能原则 PAGEREF _Toc h 59m。 HYPERLINK l _Toc 10.1.2.指标标要求 PAGEREF _Toc h 60Y。 HYPERLINK l _Toc 10.2.页面安全全要求 PAGEREF _Toc h 60a。 HYPERLINK l _Toc 10.3.日志及交交互提升要求 PAGEREF _Toc h 61P。图 表 目 录TOC h z t 题注

15、 c表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-

16、 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- 3

17、1图标示例例38图7- 32快捷键名名称显示40图7- 33扩大鼠标标有效选择区域示示意图41图7- 34文本框内内信息提示示意图图42图7- 35控件内容容提示示意图42图7- 36一般错误误提示示意图43图7- 37焦点自动动切换格式化域示示意图43图7- 38差异数据据样式区别示意图图45图7- 39错误提示示后引导用户后续续操作示意图46图7- 40信息详情情示意图46图7- 41窗体效果果图48图8- 1总体框架布布局框图49图8- 2总体框架布布局示例49图8- 3总体框架布布局示例（自定义义标题区）50图8- 4登录窗口布布局框图51图8- 5登录窗口布布局示例52图8- 6登录

18、窗口布布局示例（短信验验证码方式）52图8- 7 LOGO组组合方式示例56图8- 8 LOGO安安全空间示例56图8- 9 LOGO与与系统名称组合示示例56图8- 10 标准色色系57图8- 11 辅助色色57图8- 12 字体示示例58前 言随着新一代业务运营支支撑系统（NGBOSS）的建设，各省CRM系统在面向客户开展营销、销售、服务等方面提供了高效、有序的运营支撑。而在日常的业务办理过程中，现有CRM系统对一些业务办理方面的界面标准要求还需要进一步完善。u。为了提高用户的工作效效率，实现界面标标准化，总部业务务支撑系统部特制制定本规范，对CRM界面设计原则、要求等方面进行规规范，以指

19、导各省公司司进一步深化CRM系统的建设。e。本标准主要包括：总体体框架、用户体验设计原则则、信息架构、界面设计、用户交互、技术要要求等。N。本标准由中移有限业2011XX号印发。本标准由中国移动通信有有限公司业务支撑系统统部提出并归口。本标准由标准归口部门负负责解释。本标准起草单位：中国移移动通信有限公司司业务支撑系统部部。本标准主要起草人： PAGE 62范围本规范规定了NGBOSS2-CRM界面标准准化的建设要求，供中中国移动内部和厂厂商共同使用，适用于中国移动动各省（直辖市、自治区）NGBOSS2-CRM系统工程程中CRM界面标标准化的建设。K。根据NGBOSS2-CRM系统的建建设要求

20、，本规范范重点关注“CRM界面”标准化。CRM界界面标准化通过规规范用户体验设计计原则、信息架构构、界面设计、用用户交互实现统一一的界面设计风格格；在CRM的应应用上提供标准化化界面，提高用户户的工作效率和业业务支撑能力。U。本规范对CRM界面标标准化的设计原则和界面要求进行规范范，制定相关设计计原则、技术要求求等内容的统一标标准。对此，中国移动动特制订中国移移动通信NGBOSS2-CRM界面标准准化（1.0版）（以以下简称CRM界面标准化化分册），旨在在规范各省（直辖辖市、自治区）NGBOSS2-CRM系统建设设中CRM界面标标准要求。J。引用文件表2- SEQ 表2- * ARABIC 1

21、规范性引用用文件n。1NGBOSS1-BOSS业业务规范V2.0.0中国移动通信有限公司司2NGBOSS1-BOSS技技术规范V2.0.0中国移动通信有限公司司3NGBOSS1-BOSS(V2.0)编制制说明v1.0.0中国移动通信有限公司司4NGBOSS1-BOSS(V2.0)系统统流程框架规范V1.0.0中国移动通信有限公司司5NGBOSS1-CRM业业务规范V2.0.0中国移动通信有限公司司6NGBOSS1-CRM技技术规范V2.0.0中国移动通信有限公司司7NGBOSS1-CRM(V2.0)编制制说明v1.0.0中国移动通信有限公司司8NGBOSS1-CRM(V2.0)系统统流程框架规

22、范V1.0.0中国移动通信有限公司司9NGBOSS1-CRM多工作台业务规范V2.0.0中国移动通信有限公司司10NGBOSS2-CRM(V3.0)多工工作台管理分册V1.0.0.doc中国移动通信有限公司司术语、定义和缩略语下列术语和定义适用于于本规范：表3- SEQ 表3- * ARABIC 1术语与定义义i。字母名词解释A安全空间特指LOGO与其他页页面元素之间保留留的空白区域，防防止页面上的其他他信息干扰LOGO的的识别性和完整性性。B布局指对象分区大小、位置置、在容器中的比比例及各分区相互互位置关系的外观观展现。B表单是一种可以由用户输入入，收集客户端数数据，并提交给服服务器端的一个

23、图图形界面。B表头是表格中的第一行单元元格。B标准色指企业为塑造独特的企企业形象而确定的的某一特定的色彩彩或一组色彩系统统，运用在所有的的视觉传达设计的的媒体上，通过色色彩特有的知觉刺刺激与心理反应，以以表达企业的经营营理念和产品服务务的特质。B表单级交互指用户与页面表单中的的控件、菜单等元元素产生的交互行行为。C窗体窗体是在Web浏览器器中呈现HTML/脚本的应用程序序。C错误恢复错误恢复是帮助用户识识别错误，诊断错错误并从错误中恢恢复；并为用户提提供回退、撤销或或弥补的方案。C超链接是一种允许我们同其他他页面或站点之间间进行连接的页面面元素。C重定向是通过各种的方法将各各种网络请求重新新定

24、个方向转到其其它位置。C超链接组织是指在信息内容或分组组之间通过超链接接引用形式实现的的信息组织方式。C层级结构组织是指按照自顶向下的层层级结构形式将信信息分层组织的方方式。注：“层级结构”源于英文翻译Hierarchy。F分辨率是指屏幕上显示的像素素个数，分辨率1024768的意思是水平像素数为1024个，垂直像素数768个。分辨率越高，像素的数目越多，感应到的图像越精密。F非模态窗口不独占用户的输入，用用户打开该类型窗窗体后，仍然可以以与其它界面进行行交互。F分层加载将数据的显示过程分层层次进行，首次加加载最上层的信息息，后边根据数据据条件再加载下层层信息，如应用在在树形控件中，首首次加载

25、只加载根根节点，点击根节节点时根据此节点点属性加载其子节节点。F辅助色指企业为塑造独特的企企业形象而确定的的某一特定的色彩彩或一组色彩系统统，运用在所有的的视觉传达设计的的媒体上，通过色色彩特有的知觉刺刺激与心理反应，以以表达企业的经营营理念和产品服务务的特质。F辅助导航是指通过站点地图页面面、索引目录页面面或系统指南页面面等形式提供的辅辅助信息导航方式式。G工作区是系统功能的主要展示示区域，可容纳各各种信息或资源，进进行各类操作。J进度条进度条即计算机在处理理文件时，实时的的，以图片形式显显示处理文件的速速度，完成度，剩剩余未完成文件的的大小和可能需要要处理时间，一般般以长方形条状显显示。K

26、快捷键快捷键是指为用户提供供通过键盘操作迅迅速定位并激活相相应功能的能力，以以提高用户的操作作效率。K控件控件是指显示在表单上上的图形对象，也也就是允许用户控控制程序的图形用用户界面对象。M模态窗口模态窗口就是相对于父父窗体独立打开，用用户想要对对话框框以外的应用程序序进行操作时，必必须首先对该对话话框进行响应。M冒泡提示冒泡提示是鼠标移动到到控件上时显示帮帮助性提示的一个个悬浮层。M面包屑导航 面包屑导航（Bread Crumb Navigation）是在用户界面中的导航提示，是用户浏览站点信息过程中跟踪当前页面位置以及如何返回的一种方法。P频道导航是指在全局导航体系下下，某个具体栏目目内的

27、信息内容的的导航方式。Q全局导航是指在对系统进行信息息分类组织标识基础上，提供供覆盖整个系统的的导航方式，可以以按照层级结构信息组织织方式通过其自顶顶向下浏览系统各各个信息区域的内内容。R任务级交互指从任务开始到结束的的完整生命周期内内，用户与系统之之间整体交互的全全过程。S视觉视觉是指用户对文字、标志、图形等界界面元素表达的信信息的一种感知方方式。S色彩色彩是人们接触事物时时的第一直观认知知，是页面中视觉觉上最为敏感的元元素。S视觉引导视觉引导是指在界面设设计中，通过合理理的色彩、排版牵牵引视觉的移动，将将信息顺畅的传达达给用户；可避免免周围文字、图像像的干扰，使视线线的移动连贯而不不间断。

28、S上下文导航是指与页面内容相结合合的一种非结构化化导航方式，在用用户浏览到页面信信息内容时，显示示该信息上下文相相关的超文本链接接。S上下文帮助指帮助信息可以和页面面控件关联在一起起，从而显示给用用户有针对性的帮帮助。S水印水印是指用于页面的半半透明图像，为整整个系统添加一个个全局的标志以及及防拷屏。SSQL注入（Structured Query Language）注入，就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。T提示信息提示信息为客户接触过过程中系统提供的的相关营销服务提提示、业务知识描描述、产品资费说说明等信息，可通通

29、过界面提示、免免填单打印等方式式，面对营销人员员或客户进行信息息提示。T图形用户界面图形用户界面或图形用用户接口(Graphical User Interface，GUI)是指采用图形方方式显示的计算机机操作环境用户接接口。W网页组件又叫web组件，网页页组件包含各种常常用的界面组件，如如：表格、树、联联动下拉框等，可可轻松构造出令人人耳目一新的，具具有RIA (Rich Internet Application) 特征的Web 应用界面。X悬浮层相对文档或窗口定位的的一个层，其空间间垂直位置应高于于文档或窗口。X信息架构着重于对信息系统所管管理内容的分类、组织、内容标识识、导航和搜索的的结构

30、化分析和设设计，从而让用户户可以高效、便捷捷的发现和使用信信息系统的内容。注：“信息架构”源于英文翻译Information Architecture。X信息标识是指将一组具有相同特特征的信息组合在在一起时，需要通通过精炼的标题名名称对其进行命名名，概括其特征，使使用户便于通过标标题名称快速了解解到这一组信息含含义，实现对信息息的准确理解和定定位。注：“信息标识”源于英文翻译Information Labeling。X信息导航是指在对信息分类和组组织的基础上，通通过对用户信息浏浏览方式的分析和和设计，帮助用户户对结构化的分组组信息进行导航，实实现信息的准确和和快速定位。信息息导航一般包括全全局

31、导航、频道导导航、上下文导航航和辅助导航等常常见导航形式。注注：“信息导航”源于英文翻译Information Navigation。X信息搜索通过输入要查找内容的的关键词让用户快快速定位目标信息息内容的一种手段段。注：“信息搜索”源于英文翻译Information Search。Y用户体验用户体验是以“用户至至上”为原则的一种人人机交互过程，以以及因此产生的应应用、流程以及审审美价值体验。注注：“用户体验”源于英文翻译User Experience。Y用户语言用户语言是指用户熟悉悉的词、短语和概概念等用户方便理理解的语言，而不不是设计设计者得得语言。Y用户交互用户交互是指用户在使使用系统时，

32、为满满足其目标和动机机，按照内在的逻逻辑结构或流的组组织，所产生的动动态行为方式。注注：“信息导航”源于英文翻译User Interaction。Y业务操作向导指在较为复杂的业务办办理过程中，为条条理化业务流程、减少用户查找相应业务务功能页面的频次次，以页面引导的的形式分步骤展现现相关业务功能页页面。Y用户特指CRM及IT系统统操作员。Z遮罩脚本操作Div而对页页面产生封锁效果果的Div层。Z主题主题是指可传达某一信信息的一系列风格格一致的界面元素素集合，主要可包包括字体、色彩、图片等。Z站点地图站点地图又称网站地图图是一个展示网站站所有功能链接的的导航页面。浏览览者可通过站点地地图浏览所有页

33、面面，站点地图最起起码要包括您的主主要的内容链接或或者栏目链接。下列缩略语适用于本规规范：表3- SEQ 表3- * ARABIC 2缩略语缩写英文描述中文描述BOSSBusiness Operation Support System业务运营支撑系统CRMCustomer Relationship Management客户关系管理CSSCascading Style Sheets层叠样式表DHTMLDynamic HyperText Mark-up Language动态HTMLHTMLHyperText Mark-up Language超文本标记语言HTTPHyperText Transfer

34、 Protocol超文本传输协议NGBOSSNew Generation Business Operation & Support System新一代业务运营支撑系系统OPOperation Platform工作台URLUniform / Universal Resource Locator网页地址UEUser Experience用户体验，以“用户至至上”为原则的一种人人机交互过程，以以及因此产生的应应用、流程以及审审美价值体验。VIVisual Identity以标志、标准字、标准准色为核心展开的的完整的、系统的的视觉表达体系。总体说明中国移动NGBOSS的的系统建设全面提提升了市场服务质

35、质量和客户满意度度，在助力中国移移动塑造卓越品牌牌、打造一流服务务体系、提升与挖挖掘客户价值等方方面提供了强有力力的支撑。E。NGBOSS-CRM系系统在结构和功能能方面的调整和优优化为业务的高速速发展提供了可靠靠保障。目前，中国电信行业已已正式进入了全业业务竞争时代，市场的竞争进入了了三足鼎立的格局局，业务发展面临的的竞争变得日益激激烈。这一背景下下，NGBOSS-CRM系统建设设需要充分贯彻“客户为根、服务务为本”的指导思想，秉秉承高效低成本的的运营理念，进一一步提升支撑能力力和服务水平，增增强核心竞争力。m。驱动力CRM系统为中国移动动面对客户开展营营销、销售、服务务提供了高效、持持久、

36、有序的运营营支撑。为应对日日益激烈的全业务务竞争，需要对CRM系系统支撑能力提出更高高层次的要求，落实到CRM界界面设计层面，体现为下述三个个方面：J。一致性方面：用户对页页面风格、业务术语、信息标识、交互方式等一致性有了更高的的要求，需要CRM系系统提供更加一致的操作体验。t。友好性方面：在使用过过程中，用户对界界面设计的合理性，视觉布布局的协调性，用用户交互的友好性性有了更高的要求求；需要从界面外观、提示信信息等方面进一步步完善。T。易操作性：用户需要通通过直观的提示或或帮助进行相关的业务处理，减少用户对业务功功能理解的偏差；需要通过减轻记记忆负担降低用户户的机械记忆量，提提高工作效率。2

37、。编写目标为满足用户使用CRM系系统的更高要求，从一致致性、友好性和易易用性等方面提升升CRM界面标准准，本规范需要实实现以下目标：5。秉承以用户为中心的用用户体验设计理念念，进一步加强对对用户体验诉求的搜搜集和分析，规范用户体验设计计原则,为持续提升CRM系系统交互界面易用用性提供理论指导导。u。通过改进信息架构分析析和用户交互行为为分析方法，优化化界面设计方法，规范CRM系统界界面和交互方式，实实现信息组织的有有效性、完整性、合理性，为实现现一致的用户体验提供保障。0。统一框架和视觉设计方方法，规范窗体、布局局、视觉等设计方法，提升界面规范化程度，加强用户户交互友好性，降降低用户学习成本本

38、，提高工作效率率。P。编写原则本规范的编写基于以下下基本原则：本规范针对中国移动CRM系统界面标标准化建设提出总总体要求。本规范参考中国移动NGBOSS相关关规范，就CRM界面标标准在CRM系统统的定位给予说明明。S。本规范针对CRM系统统结构的展现子层层给出具体的要求求。本规范给出了CRM界界面设计的要求说说明，各省公司结结合自身实际的业业务需求进行相关关功能调整和扩充充。7。本规范针对CRM界面面标准化在用户体验设计原则则、信息架构、界界面设计、用户交交互、性能指标、安全可靠性等方方面提出技术要求。x。与NG2-CRM规范范的关系本规范为NG2-CRM规规范的分册内容之之一，主要涉及CRM

39、界界面规范的内容；CRM界面分册册的建设纳入NG2-CRM的建设范范畴。x。从系统结构上，CRM界界面标准规范对CRM系系统展现子层提出出要求。b。文档结构说明第一章：范围，说明本本规范的适用范围围。第二章：规范性引用文文件，列示本规范范的引用文件，说说明和相关规范的的继承关系。7。第三章：术语、定义和和缩略词，列示和和说明本规范中的的术语、定义和缩缩略词。O。第四章：总体说明，对对本规范的编写驱驱动力、目标和原原则进行说明。第五章：总体框架，对对CRM界面标准准化在NG2-CRM系统结结构中的展现子层层提出相关要求，对对CRM界面标准准应遵循的用户体验总体设设计原则进行定义义；对设计框架进行

40、整体体描述。R。第六章：信息架构，详详细描述信息系统统所管理内容的分分类、组织、标识识、导航和搜索的的结构化分析和设设计方法。8。第七章：交互设计，详详细描述CRM界界面交互设计中表表单和控件等需要要遵循的规则，并并从任务和表单两两个层次来描述用户与与系统交互的典型型场景及设计要求求。X。第八章：框架设计，详详细描述CRM界界面设计中窗体、布局需要遵循的的规则。E。第九章：视觉，详细描描述CRM界面中中主题、全称与简简称、LOGO、色彩、字体、图图片等六个要素的的设计规则。L。第十章：技术要求，对对CRM界面标准准化涉及到的性能能要求和安全要求求给出说明。V。总体框架CRM界面标准化分册册作为

41、NG2-CRM规范的组成部分，本规范对CRM界面标准化在NG2-CRM系统结构中的展现子层提出相关要求，对CRM界面的总体设计原则、信息架构、界面设计和用户交互进行整体描述。i。体系结构NG2-CRM系统结结构如下图所示：图5- SEQ 图5- * ARABIC 1 NG2-CRM系统结构构u。展现子层是接入层对展展示的内容及形式式进行管理的平台台，由展示逻辑构构成。它接收接入入适配的请求，调调用业务层的服务务或流程，将返回回结果按照展示逻逻辑加工成相应的的展示内容（包括括页面、文本菜单单、语音菜单等）。M。为解决系统信息分类和和组织不清晰、界界面布局和视觉风风格不统一、用户户交互不友好等问问

42、题，CRM界面面标准对展现子层层提出具体要求如如下：J。通过对信息进行分类、组织和标识，实实现信息内容的合合理区分，通过信信息导航和搜索,实实现对信息和功能能的快速定位，减减少用户机械记忆忆量和降低学习难难度。h。通过对CRM界面布局局划分、导航入口口、公司LOGO和系统名称等进行规范，增强界面一致性体验。B。通过对文字、标志、图图形等界面视觉样样式和色系进行规规范，增加视觉引引导、主题更换等等能力，提供友好好的界面外观。U。通过对窗体和控件应用用规则、样式设置置进行规范，降低低误操作概率、减减少人机交互次数数，提高交互效率率。1。用户体验设计总则用户体验设计总则以人人机工程、认知心心理、用户

43、体验设设计领域理论和以以人为中心的交互互系统设计过程国国家标准（ISO 9241-210）为指导，遵循业界最佳实践经验总结，归纳出适用于业务支撑系统用户体验设计的方法和规则。Z。用户体验设计总则包括括：保持一致性、错误恢复、减轻轻记忆负担、系统统状态可见、预防防错误发生、贴近近用户场景、使用用舒适高效、界面面美观精炼、保障障用户控制和自由由、提供帮助和文文档。h。保持一致性 保持一致性原则是指同同一类型的操作，系系统在内容组织、外观布局和整个个交互过程方面的的设计应该相似或或相近。包括以下下三个方面：v。信息内容一致：如业务务术语、菜单名称称、口径解释等一一致。界面外观一致：如界面面色彩、窗体

44、布局局和控件外观等一一致。交互方式一致：如键盘盘快捷键操作、输输入焦点切换等一一致。当系统承载的业务种类繁繁多，新业务新功功能不断涌现时，保持一致性原则则可以减轻用户培培训工作量以及系系统开发工作量。Z。错误恢复错误恢复原则是指系统统在出现异常情况况时，为用户提供供错误诊断、错误误解释，并且支持操作撤销、业业务回退等功能。V。 错误恢复原则可以以帮助保证业务受受理的连续性，在在错误发生时，能能恢复到上步操作作，减少重复工作作，加快业务受理理速度。n。减轻记忆负担减轻记忆负担原则是指指系统尽可能不强强迫用户记忆大量量的信息，让用户户看到界面就会操操作。包括以下三三个方面：E。系统中可选项都是可见

45、见的，如：在用户户操作中提供业务务选项提示，而不不是要求去记忆这这些选项。9。信息架构合理，提供必必要的信息，帮助助用户识别后继动动作，而不是需要要用户回忆或思考考自己已做操作内内容。1。图标、色彩含义等符合合用户认知经验或或约定俗成的习惯惯。如：用红色暗暗示禁止或重要警警告。t。减轻记忆负担原则可以以减少用户的机械械记忆量、降低工工作疲劳感。系统状态可见系统状态可见原则是指指应该及时向用户反馈系统当前状态态。包括以下两个个方面：A。对于正常操作，应能马马上通过色彩、页页面布局等明显变变化向用户反馈操操作结果。y。对于系统异常（如程序序级错误），应能能够及时截获，并并使用易于理解的的信息提示用

46、户，避避免直接展示代码码错误。O。系统状态可见原则可以以提升用户的操作作信心，同时让系系统维护工作也更更方便。t。预防错误发生预防错误发生原则是指指系统自身能预防防用户产生错误操作，而不是在错误发发生后才进行提示示。包括以下三个个方面：J。预防用户因缺乏相关知知识产生的错误操操作；如：业务办办理时，通过事前前业务互斥提示，避避免业务冲突产生生。m。预防用户产生对规则理理解不当的错误操操作；如：固化年年月日输入格式化化，可避免日期格格式输入错误。W。预防用户快速机械操作作产生的错误；如如：删除重要数据据时，提示框中默默认焦点应是“取消”按钮，避免快速速回车造成错误提提交。f。预防错误发生原则可以

47、以极大地减少误操操作的发生概率，降降低人为疏忽导致致的损失。2。贴近用户场景贴近用户场景原则是指指系统应以用户为中中心，使用用户易易于理解的语言，符合用户的工作习惯。包括以下两两个方面：8。系统说明信息应站在用用户角度，使用用用户熟悉的词、短短语和概念。系统结构符合用户对真真实世界的理解；如：系统功能菜菜单组合符合实际际业务需求。D。贴近用户场景原则可以以避免开发人员使使用晦涩难懂的计计算机语言和技术术实现逻辑，让系系统与真实业务场场景匹配度高，让让用户只需关注业业务而不用去关注注技术。t。使用舒适高效使用舒适高效原则是指指系统能够给不同同能力级别用户提提供舒适的交互功功能。包括以下两两个方面

48、：T。提高系统自动化程度，尽尽量减少用户不必必要的动作；如：提供合适的默认认值，减少用户输输入。s。用户能方便地操作使用用频率较高的功能能；如：为常用功能能提供快捷键。o。使用舒适高效原则既能能满足初级用户快快速上手的需要，又又能发挥熟练用户户主观能动性，提提高操作效率。6。界面美观精炼界面美观精炼原则是指指界面符合用户的的审美要求，同时应去掉无关信息。包括以下四个方方面：e。界面元素大小适中，颜颜色适当。界面布局密度均匀，分分组间距合理。可移动元素（如：滚动动条）的速度适中中且明显可见。交互中不包含无关的信信息，不常用的信信息按需获取。界面美观精炼原则让用用户能够在使用中中感觉轻松愉悦，不不

49、会感到疲劳，体体会到工作的乐趣趣。C。保障用户控制和自由保障用户控制和自由原原则是指系统应给予用户户适当的控制权。包括以以下三个方面：q。可让用户选择在何时离离开、返回上一步步状态或终止任务务。在用户误操作的情况下下，需提供一个明明显的“紧急退出”标志来帮助用户离离开。0。系统需要在不可逆转的的命令执行之前给给予用户足够的警警告。保障用户控制和自由可可以帮助用户清晰晰的了解并控制其当前任务，提升用用户对系统的控制制能力和交互体验。v。提供帮助和文档提供帮助和文档原则是是指系统有完善的的帮助功能和详细细的说明文档，指指导用户使用系统统。包括以下三个个方面：O。帮助功能和说明文档易易于查找；如：页

50、页面模块上提供在在线帮助的入口。z。帮助信息和说明文档易易于理解。帮助内容易于应用；如如：可以从帮助内内容直接打开对应应功能。完善的帮助和文档可以以帮助用户方便快快速学习和使用系统功能。设计框架CRM界面设计架构包包括；结构层、框框架层、表现层。图5- SEQ 图5- * ARABIC 2中国移动CRM界界面设计框架g。结构层：交互设计与信信息架构结构层确定各个将要呈呈现给用户的选项项的模式和顺序，其其重点关注理解用用户、用户的工作作方式和思考方式式。d。信息架构是对信息内容容的分类、组织、标识、导航和搜搜索进行结构化分分析和设计，让用用户可以高效、便便捷的发现和使用用系统的内容。B。交互设计

51、是对用户和系系统的交互操作进进行定义，方便用用户完成相关操作作。A。界面层：框架设计、导导航设计和信息设设计在充满概念的结构层中中开始形成了大量量的需求，在界面面层将更进一步地提炼炼并确定详细的界面面外观、导航和信信息设计。T。框架设计包括窗体、布布局等。导航设计是对界面元素素的设计，方便用用户浏览信息，本本规范不做统一要要求。x。信息设计是对信息展现现方式的设计，方方便用户理解，本本规范不做统一要要求。V。表现层：视觉设计在五层模型的顶端，重重点关注视觉设计计，内容、功能和和美学汇集到一起起来产生最终设计计，从而满足其他层面的所所有目标。K。视觉设计是对界面元素素的图片化处理（观观感中的“观

52、”），包括主题、色彩、字体、图图片等元素。m。信息架构信息架构着重于对信息息系统所管理内容容的分类、组织、标识、导航和搜搜索的结构化分析析及设计，从而让让用户可以高效、便捷的发现和使使用系统的内容。信信息架构设计的效效果体现在系统界界面上，但其设计计原则和方法也涵涵盖了系统基础数数据结构设计的要要求。Q。信息架构的一般设计原原则为：信息内容有效性信息内容精准，表述信信息的文字、表格格或图像应精炼准准确，不产生歧义义；信息内容对用户户是最新的、有价值的的，不会出现过时的的信息。v。信息内容完整性信息内容的分类和组织织能够涵盖系统所所管理的信息范围围，不应出现信息息内容游离于信息息组织结构之外；人

53、机交互中，系系统反馈给用户的的信息内容应足够够支撑用户操作所所需，减少用户的的额外信息请求。R。信息结构合理性信息结构层次合理、清清晰，从一般到具具体，信息分类和和组织贴合用户对事物已已经形成的认知和和经验。 H。信息分类信息分类是指通过对信信息内容的分析，将将具有相同特征的的信息内容进行归归类的过程；它包包括了信息精确分分类和模糊分类两两种方式。信息分分类是信息架构设设计的基础，只有有对信息按一定规规则分类整理后，才才能更进一步进行行组织和使用，否否则信息系统所包包含的信息对用户户来说只会是难以以理解并且毫无意意义的数据或代码码。q。精确分类精确分类是指通过采用用字母顺序、时间间顺序或地理位

54、置置等分类方式对信信息进行精确、无无重叠的分类。精精确分类优点是只只要知道信息内容容精确关键字，就就可以准确的定位位信息；同时精确确分类方法易于设设计、维护和使用用；缺点是需要记记忆信息内容的精精确关键字，不符符合人的信息记忆忆方式，且信息分分类越多，用户需需记忆的关键字就就越繁杂。U。精确分类适合于通过字字母顺序方式对技技术术语、业务名名词以及在线帮助助等信息内容分类类， 也适合于通通过时间顺序或地地理位置方式对日日报、月报等信息息内容分类。X。精确分类的设计规则为为：精确分类方式要适合检检索，与用户记忆忆的精确关键字要要匹配（如按照拼拼音字母检索人物物名称与用户习惯惯记忆人名相符）。r。精

55、确分类方式要尽量减减少信息浏览的层层级，减少用户定定位到目标信息内内容的步骤。A。模糊分类模糊分类是指以用户需需求为导向，按照照主题、任务、角角色等主观性或概概括性的分类关键键字对信息进行分分类。这种分类的的优点是符合用户户一般认知经验，分分类结果和用户经经验知识匹配度高高，易于理解和接接受；缺点是信息息内容分类有重叠叠，分类方法不易易于设计、维护和和使用。模糊分类类一般是业务相关关的，是在充分了了解用户业务使用用场景和操作目的的后，归纳总结得得出的结果。良好好的模糊分类不仅仅可以使用户快速速准确地检索或浏浏览系统所管理的的信息内容，还可可以间接帮助用户户学习使用系统和和提升业务知识。z。模糊

56、分类是信息分类的的主要分类方式，主主要目的是将信息息系统涵盖或管理理的信息内容组织织成结构化的体系系。这种结构化的的体系可以是自顶顶向下的分层结构构（如：系统多级级功能菜单），也也可以是网络化的的结构（如：CRM模模块关联、知识库库知识点关联）。x。模糊分类设计规则为：分类关键字的选择要考考虑目标用户群的的接受层次（如：知识经验、文化化背景等），避免免分类过复杂或专专业性过强。U。整体分类体系在不影响响实用性前提下，要要构建一个较为严严谨的和现实相一一致的层级结构体体系。w。信息内容或用户需求发发生变化时，新增增和调整分类结果果不会对已构建的的信息结构组织体体系造成较大影响响。2。信息组织信息

57、组织是指通过对信信息内容和分组之之间、信息分组和和信息分组之间关关联关系的分析，构构建一个结构化、符合逻辑的组织织结构。该组织结结构既可以是金字字塔式的自顶向下下的层级结构，也也可以是类似超链链接形式的网络化化的结构。信息内内容组织时应考虑虑到目标用户群及及具体场景。按目目标用户群和应用用场景的不同，信信息内容可以仅归归属一个分组，也也可以同时归属多多个分组。d。层级结构组织 层级结构组织是指按照照自顶向下的层级级结构形式将信息息分层组织的方式式。如下图所示：u。图6- SEQ 图6- * ARABIC 1层级结构组组织1。层级结构信息组织方式式一般用于对系统统整体内容的分层层组织，为系统的的

58、整体导航结构设设计提供基础。l。层级结构信息组织设计计规则为：信息层级结构尽量窄而而浅，并且尽量保保持结构的平衡。分组的排列顺序要综合合考虑分组使用频频率和分组之间的的逻辑关系。超链接组织超链接组织是指在信息息内容或分组之间间通过超链接引用用形式实现的信息息组织方式；如下下图所示，超链接接的组织形式优点点是可以使信息形形成网状结构，以以适应人类思维的的非线性特点；缺缺点是导航是非线线性跳转，检索效效率较低，用户容容易在查找信息的的过程中迷失。J。图6- SEQ 图6- * ARABIC 2超链接组织织G。超链接信息组织一般用用于页面内容的上上下文导航中，可可以方便信息分组组的相互关联和引引用。

59、B。超链接信息组织设计规规则为：超链接组织只作为辅助助手段组织信息内内容，不用于对系系统整体信息内容容的组织。a。超链接组织中的目标内内容与源信息内容容关联性要强。信息标识信息标识是指将一组具具有相同特征的信信息组合在一起时时，需要通过精炼的的标题名称对其命命名，概括其特征征，便于用户对信信息的准确理解和和定位。E。信息标识广泛用于信息息系统的各个方面面，大到导航菜单单项、页面或模块块标题等信息分组组，小到页面内的的一个界面元素（如如：文本标签中的的内容）。K。信息标识的设计规则为为：标识用词应当为用户所所熟悉和易于理解解。标识用词简洁明了、概概括性强，同样的的信息在系统不同同页面出现时标识识

60、应保持一致。1。除了是约定俗成的或广广为传播的，不要要使用英文缩写。处于同一层级的信息分分类或分组，语法法格式要保持一致致性和连贯性，尽尽量采用统一的语语法格式、字数相相同。4。文字长度要适宜，能够够明确表达信息含含义情况下尽量选选择较短的标识。4。信息导航在对信息分类和组织的的基础上，通过对对用户信息浏览方方式的分析和设计计，帮助用户对结结构化的分组信息息进行导航，实现现信息的准确和快快速定位。信息导导航包括全局导航航、频道导航、上上下文导航和辅助助导航等形式。q。信息导航设计原则为：为用户显示清晰、一致致的系统层级结构构组织。让用户在浏览到任何页页面时，都容易获获知当前页面处于于系统哪个功