NGBOSS2-CRM界面标准化分册V100-0530.doc

中国移动通信企业标准QB-J-XXX-2011NGBOSS2-CRM界面标准分册版本号：1.0.02011-XX-XX实施2011-XX-XX发布中国移动通信有限公司 发布62 / 68目录1.范围12.引用文件13.术语、定义和缩略语24.总体说明74.1.驱动力84.2.编写目标84.3.编写原则84.4.与NG2-CRM规范的关系94.5.文档结构说明95.总体框架105.1.体系结构105.2.用户体验设计总则115.2.1.保持一致性115.2.2.错误恢复125.2.3.减轻记忆负担125.2.4.系统状态可见125.2.5.预防错误发生125.2.6.贴近用户场景135.2.7.使用舒适高效135.2.8.界面美观精炼135.2.9.保障用户控制和自由145.2.10.提供帮助和文档145.3.设计框架146.信息架构166.1.信息分类166.1.1.精确分类166.1.2.模糊分类176.2.信息组织176.2.1.层级结构组织186.2.2.超链接组织186.3.信息标识196.4.信息导航196.4.1.全局导航206.4.2.频道导航206.4.3.上下文导航206.4.4.辅助导航206.5.信息搜索217.交互设计217.1.表单217.2.控件237.2.1.超链接（Hyperlink）237.2.2.文本框（Text）247.2.3.文本域（Textarea）257.2.4.下拉列表（Select）257.2.5.单选框（Radio）267.2.6.复选框（CheckBox）277.2.7.按钮（Button）277.2.8.表格（Table）287.2.9.分页（Paging）307.2.10.列表（List）307.2.11.日历控件（Calendar）317.2.12.标签页（Tab）327.2.13.树形控件（Tree）347.2.14.冒泡提示（Tips）357.2.15.消息提示框（Message）357.2.16.面包屑导航（BreadcrumbNavigation）367.2.17.系统响应状态标识（Loading）377.2.18.图标（Icon）387.3.用户交互387.3.1.任务级交互387.3.2.表单级交互408.框架设计478.1.窗体478.2.布局488.2.1.总体框架布局498.2.2.登录窗口布局519.视觉539.1.主题539.2.全称与简称549.2.1.企业名称549.2.2.系统名称549.3.LOGO559.4.色彩569.5.字体579.6.图片5810.技术要求5910.1.性能要求5910.1.1.性能原则5910.1.2.指标要求6010.2.页面安全要求6010.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图标示例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登录窗口布局示例（短信验证码方式）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系统对一些业务办理方面的界面标准要求还需要进一步完善。为了提高用户的工作效率，实现界面标准化，总部业务支撑系统部特制定本规范，对CRM界面设计原则、要求等方面进行规范，以指导各省公司进一步深化CRM系统的建设。本标准主要包括：总体框架、用户体验设计原则、信息架构、界面设计、用户交互、技术要求等。本标准由中移有限业2011XX号印发。本标准由中国移动通信有限公司业务支撑系统部提出并归口。本标准由标准归口部门负责解释。本标准起草单位：中国移动通信有限公司业务支撑系统部。本标准主要起草人： 1. 范围本规范规定了NGBOSS2-CRM界面标准化的建设要求，供中国移动内部和厂商共同使用，适用于中国移动各省（直辖市、自治区）NGBOSS2-CRM系统工程中CRM界面标准化的建设。根据NGBOSS2-CRM系统的建设要求，本规范重点关注“CRM界面”标准化。CRM界面标准化通过规范用户体验设计原则、信息架构、界面设计、用户交互实现统一的界面设计风格；在CRM的应用上提供标准化界面，提高用户的工作效率和业务支撑能力。本规范对CRM界面标准化的设计原则和界面要求进行规范，制定相关设计原则、技术要求等内容的统一标准。对此，中国移动特制订中国移动通信NGBOSS2-CRM界面标准化（1.0版）（以下简称CRM界面标准化分册），旨在规范各省（直辖市、自治区）NGBOSS2-CRM系统建设中CRM界面标准要求。2. 引用文件表2- 1规范性引用文件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)系统流程框架规范V1.0.0中国移动通信有限公司9NGBOSS1-CRM多工作台业务规范V2.0.0中国移动通信有限公司10NGBOSS2-CRM(V3.0)多工作台管理分册V1.0.0.doc中国移动通信有限公司3. 术语、定义和缩略语下列术语和定义适用于本规范：表3- 1术语与定义字母名词解释A安全空间特指LOGO与其他页面元素之间保留的空白区域，防止页面上的其他信息干扰LOGO的识别性和完整性。B布局指对象分区大小、位置、在容器中的比例及各分区相互位置关系的外观展现。B表单是一种可以由用户输入，收集客户端数据，并提交给服务器端的一个图形界面。B表头是表格中的第一行单元格。B标准色指企业为塑造独特的企业形象而确定的某一特定的色彩或一组色彩系统，运用在所有的视觉传达设计的媒体上，通过色彩特有的知觉刺激与心理反应，以表达企业的经营理念和产品服务的特质。B表单级交互指用户与页面表单中的控件、菜单等元素产生的交互行为。C窗体窗体是在Web浏览器中呈现HTML/脚本的应用程序。C错误恢复错误恢复是帮助用户识别错误，诊断错误并从错误中恢复；并为用户提供回退、撤销或弥补的方案。C超链接是一种允许我们同其他页面或站点之间进行连接的页面元素。C重定向是通过各种的方法将各种网络请求重新定个方向转到其它位置。C超链接组织是指在信息内容或分组之间通过超链接引用形式实现的信息组织方式。C层级结构组织是指按照自顶向下的层级结构形式将信息分层组织的方式。注：“层级结构”源于英文翻译Hierarchy。F分辨率是指屏幕上显示的像素个数，分辨率1024768的意思是水平像素数为1024个，垂直像素数768个。分辨率越高，像素的数目越多，感应到的图像越精密。F非模态窗口不独占用户的输入，用户打开该类型窗体后，仍然可以与其它界面进行交互。F分层加载将数据的显示过程分层次进行，首次加载最上层的信息，后边根据数据条件再加载下层信息，如应用在树形控件中，首次加载只加载根节点，点击根节点时根据此节点属性加载其子节点。F辅助色指企业为塑造独特的企业形象而确定的某一特定的色彩或一组色彩系统，运用在所有的视觉传达设计的媒体上，通过色彩特有的知觉刺激与心理反应，以表达企业的经营理念和产品服务的特质。F辅助导航是指通过站点地图页面、索引目录页面或系统指南页面等形式提供的辅助信息导航方式。G工作区是系统功能的主要展示区域，可容纳各种信息或资源，进行各类操作。J进度条进度条即计算机在处理文件时，实时的，以图片形式显示处理文件的速度，完成度，剩余未完成文件的大小和可能需要处理时间，一般以长方形条状显示。K快捷键快捷键是指为用户提供通过键盘操作迅速定位并激活相应功能的能力，以提高用户的操作效率。K控件控件是指显示在表单上的图形对象，也就是允许用户控制程序的图形用户界面对象。M模态窗口模态窗口就是相对于父窗体独立打开，用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。M冒泡提示冒泡提示是鼠标移动到控件上时显示帮助性提示的一个悬浮层。M面包屑导航 面包屑导航（Bread Crumb Navigation）是在用户界面中的导航提示，是用户浏览站点信息过程中跟踪当前页面位置以及如何返回的一种方法。P频道导航是指在全局导航体系下，某个具体栏目内的信息内容的导航方式。Q全局导航是指在对系统进行信息分类组织标识基础上，提供覆盖整个系统的导航方式，可以按照层级结构信息组织方式通过其自顶向下浏览系统各个信息区域的内容。R任务级交互指从任务开始到结束的完整生命周期内，用户与系统之间整体交互的全过程。S视觉视觉是指用户对文字、标志、图形等界面元素表达的信息的一种感知方式。S色彩色彩是人们接触事物时的第一直观认知，是页面中视觉上最为敏感的元素。S视觉引导视觉引导是指在界面设计中，通过合理的色彩、排版牵引视觉的移动，将信息顺畅的传达给用户；可避免周围文字、图像的干扰，使视线的移动连贯而不间断。S上下文导航是指与页面内容相结合的一种非结构化导航方式，在用户浏览到页面信息内容时，显示该信息上下文相关的超文本链接。S上下文帮助指帮助信息可以和页面控件关联在一起，从而显示给用户有针对性的帮助。S水印水印是指用于页面的半透明图像，为整个系统添加一个全局的标志以及防拷屏。SSQL注入（Structured Query Language）注入，就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。T提示信息提示信息为客户接触过程中系统提供的相关营销服务提示、业务知识描述、产品资费说明等信息，可通过界面提示、免填单打印等方式，面对营销人员或客户进行信息提示。T图形用户界面图形用户界面或图形用户接口(Graphical User Interface，GUI)是指采用图形方式显示的计算机操作环境用户接口。W网页组件又叫web组件，网页组件包含各种常用的界面组件，如：表格、树、联动下拉框等，可轻松构造出令人耳目一新的，具有RIA (Rich Internet Application) 特征的Web 应用界面。X悬浮层相对文档或窗口定位的一个层，其空间垂直位置应高于文档或窗口。X信息架构着重于对信息系统所管理内容的分类、组织、内容标识、导航和搜索的结构化分析和设计，从而让用户可以高效、便捷的发现和使用信息系统的内容。注：“信息架构”源于英文翻译Information Architecture。X信息标识是指将一组具有相同特征的信息组合在一起时，需要通过精炼的标题名称对其进行命名，概括其特征，使用户便于通过标题名称快速了解到这一组信息含义，实现对信息的准确理解和定位。注：“信息标识”源于英文翻译Information Labeling。X信息导航是指在对信息分类和组织的基础上，通过对用户信息浏览方式的分析和设计，帮助用户对结构化的分组信息进行导航，实现信息的准确和快速定位。信息导航一般包括全局导航、频道导航、上下文导航和辅助导航等常见导航形式。注：“信息导航”源于英文翻译Information Navigation。X信息搜索通过输入要查找内容的关键词让用户快速定位目标信息内容的一种手段。注：“信息搜索”源于英文翻译Information Search。Y用户体验用户体验是以“用户至上”为原则的一种人机交互过程，以及因此产生的应用、流程以及审美价值体验。注：“用户体验”源于英文翻译User Experience。Y用户语言用户语言是指用户熟悉的词、短语和概念等用户方便理解的语言，而不是设计设计者得语言。Y用户交互用户交互是指用户在使用系统时，为满足其目标和动机，按照内在的逻辑结构或流的组织，所产生的动态行为方式。注：“信息导航”源于英文翻译User Interaction。Y业务操作向导指在较为复杂的业务办理过程中，为条理化业务流程、减少用户查找相应业务功能页面的频次，以页面引导的形式分步骤展现相关业务功能页面。Y用户特指CRM及IT系统操作员。Z遮罩脚本操作Div而对页面产生封锁效果的Div层。Z主题主题是指可传达某一信息的一系列风格一致的界面元素集合，主要可包括字体、色彩、图片等。Z站点地图站点地图又称网站地图是一个展示网站所有功能链接的导航页面。浏览者可通过站点地图浏览所有页面，站点地图最起码要包括您的主要的内容链接或者栏目链接。下列缩略语适用于本规范：表3- 2缩略语缩写英文描述中文描述BOSSBusiness Operation Support System业务运营支撑系统CRMCustomer Relationship Management客户关系管理CSSCascading Style Sheets层叠样式表DHTMLDynamic HyperText Mark-up Language动态HTMLHTMLHyperText Mark-up Language超文本标记语言HTTPHyperText Transfer Protocol超文本传输协议NGBOSSNew Generation Business Operation & Support System新一代业务运营支撑系统OPOperation Platform工作台URLUniform / Universal Resource Locator网页地址UEUser Experience用户体验，以“用户至上”为原则的一种人机交互过程，以及因此产生的应用、流程以及审美价值体验。VIVisual Identity以标志、标准字、标准色为核心展开的完整的、系统的视觉表达体系。4. 总体说明中国移动NGBOSS的系统建设全面提升了市场服务质量和客户满意度，在助力中国移动塑造卓越品牌、打造一流服务体系、提升与挖掘客户价值等方面提供了强有力的支撑。NGBOSS-CRM系统在结构和功能方面的调整和优化为业务的高速发展提供了可靠保障。目前，中国电信行业已正式进入了全业务竞争时代，市场的竞争进入了三足鼎立的格局，业务发展面临的竞争变得日益激烈。这一背景下，NGBOSS-CRM系统建设需要充分贯彻“客户为根、服务为本”的指导思想，秉承高效低成本的运营理念，进一步提升支撑能力和服务水平，增强核心竞争力。4.1. 驱动力CRM系统为中国移动面对客户开展营销、销售、服务提供了高效、持久、有序的运营支撑。为应对日益激烈的全业务竞争，需要对CRM系统支撑能力提出更高层次的要求，落实到CRM界面设计层面，体现为下述三个方面：1、 一致性方面：用户对页面风格、业务术语、信息标识、交互方式等一致性有了更高的要求，需要CRM系统提供更加一致的操作体验。2、 友好性方面：在使用过程中，用户对界面设计的合理性，视觉布局的协调性，用户交互的友好性有了更高的要求；需要从界面外观、提示信息等方面进一步完善。3、 易操作性：用户需要通过直观的提示或帮助进行相关的业务处理，减少用户对业务功能理解的偏差；需要通过减轻记忆负担降低用户的机械记忆量，提高工作效率。4.2. 编写目标为满足用户使用CRM系统的更高要求，从一致性、友好性和易用性等方面提升CRM界面标准，本规范需要实现以下目标：1、 秉承以用户为中心的用户体验设计理念，进一步加强对用户体验诉求的搜集和分析，规范用户体验设计原则,为持续提升CRM系统交互界面易用性提供理论指导。2、 通过改进信息架构分析和用户交互行为分析方法，优化界面设计方法，规范CRM系统界面和交互方式，实现信息组织的有效性、完整性、合理性，为实现一致的用户体验提供保障。3、 统一框架和视觉设计方法，规范窗体、布局、视觉等设计方法，提升界面规范化程度，加强用户交互友好性，降低用户学习成本，提高工作效率。4.3. 编写原则本规范的编写基于以下基本原则：1、 本规范针对中国移动CRM系统界面标准化建设提出总体要求。2、 本规范参考中国移动NGBOSS相关规范，就CRM界面标准在CRM系统的定位给予说明。3、 本规范针对CRM系统结构的展现子层给出具体的要求。4、 本规范给出了CRM界面设计的要求说明，各省公司结合自身实际的业务需求进行相关功能调整和扩充。5、 本规范针对CRM界面标准化在用户体验设计原则、信息架构、界面设计、用户交互、性能指标、安全可靠性等方面提出技术要求。4.4. 与NG2-CRM规范的关系1、 本规范为NG2-CRM规范的分册内容之一，主要涉及CRM界面规范的内容；CRM界面分册的建设纳入NG2-CRM的建设范畴。2、 从系统结构上，CRM界面标准规范对CRM系统展现子层提出要求。4.5. 文档结构说明第一章：范围，说明本规范的适用范围。第二章：规范性引用文件，列示本规范的引用文件，说明和相关规范的继承关系。第三章：术语、定义和缩略词，列示和说明本规范中的术语、定义和缩略词。第四章：总体说明，对本规范的编写驱动力、目标和原则进行说明。第五章：总体框架，对CRM界面标准化在NG2-CRM系统结构中的展现子层提出相关要求，对CRM界面标准应遵循的用户体验总体设计原则进行定义；对设计框架进行整体描述。第六章：信息架构，详细描述信息系统所管理内容的分类、组织、标识、导航和搜索的结构化分析和设计方法。第七章：交互设计，详细描述CRM界面交互设计中表单和控件等需要遵循的规则，并从任务和表单两个层次来描述用户与系统交互的典型场景及设计要求。第八章：框架设计，详细描述CRM界面设计中窗体、布局需要遵循的规则。第九章：视觉，详细描述CRM界面中主题、全称与简称、LOGO、色彩、字体、图片等六个要素的设计规则。第十章：技术要求，对CRM界面标准化涉及到的性能要求和安全要求给出说明。5. 总体框架CRM界面标准化分册作为NG2-CRM规范的组成部分，本规范对CRM界面标准化在NG2-CRM系统结构中的展现子层提出相关要求，对CRM界面的总体设计原则、信息架构、界面设计和用户交互进行整体描述。5.1. 体系结构NG2-CRM系统结构如下图所示：图5- 1 NG2-CRM系统结构展现子层是接入层对展示的内容及形式进行管理的平台，由展示逻辑构成。它接收接入适配的请求，调用业务层的服务或流程，将返回结果按照展示逻辑加工成相应的展示内容（包括页面、文本菜单、语音菜单等）。为解决系统信息分类和组织不清晰、界面布局和视觉风格不统一、用户交互不友好等问题，CRM界面标准对展现子层提出具体要求如下：1、 通过对信息进行分类、组织和标识，实现信息内容的合理区分，通过信息导航和搜索,实现对信息和功能的快速定位，减少用户机械记忆量和降低学习难度。2、 通过对CRM界面布局划分、导航入口、公司LOGO和系统名称等进行规范，增强界面一致性体验。3、 通过对文字、标志、图形等界面视觉样式和色系进行规范，增加视觉引导、主题更换等能力，提供友好的界面外观。4、 通过对窗体和控件应用规则、样式设置进行规范，降低误操作概率、减少人机交互次数，提高交互效率。5.2. 用户体验设计总则用户体验设计总则以人机工程、认知心理、用户体验设计领域理论和以人为中心的交互系统设计过程国家标准（ISO 9241-210）为指导，遵循业界最佳实践经验总结，归纳出适用于业务支撑系统用户体验设计的方法和规则。用户体验设计总则包括：保持一致性、错误恢复、减轻记忆负担、系统状态可见、预防错误发生、贴近用户场景、使用舒适高效、界面美观精炼、保障用户控制和自由、提供帮助和文档。5.2.1. 保持一致性 保持一致性原则是指同一类型的操作，系统在内容组织、外观布局和整个交互过程方面的设计应该相似或相近。包括以下三个方面：1、 信息内容一致：如业务术语、菜单名称、口径解释等一致。2、 界面外观一致：如界面色彩、窗体布局和控件外观等一致。3、 交互方式一致：如键盘快捷键操作、输入焦点切换等一致。当系统承载的业务种类繁多，新业务新功能不断涌现时，保持一致性原则可以减轻用户培训工作量以及系统开发工作量。5.2.2. 错误恢复错误恢复原则是指系统在出现异常情况时，为用户提供错误诊断、错误解释，并且支持操作撤销、业务回退等功能。 错误恢复原则可以帮助保证业务受理的连续性，在错误发生时，能恢复到上步操作，减少重复工作，加快业务受理速度。5.2.3. 减轻记忆负担减轻记忆负担原则是指系统尽可能不强迫用户记忆大量的信息，让用户看到界面就会操作。包括以下三个方面：1、 系统中可选项都是可见的，如：在用户操作中提供业务选项提示，而不是要求去记忆这些选项。2、 信息架构合理，提供必要的信息，帮助用户识别后继动作，而不是需要用户回忆或思考自己已做操作内容。3、 图标、色彩含义等符合用户认知经验或约定俗成的习惯。如：用红色暗示禁止或重要警告。减轻记忆负担原则可以减少用户的机械记忆量、降低工作疲劳感。5.2.4. 系统状态可见系统状态可见原则是指应该及时向用户反馈系统当前状态。包括以下两个方面：1、 对于正常操作，应能马上通过色彩、页面布局等明显变化向用户反馈操作结果。2、 对于系统异常（如程序级错误），应能够及时截获，并使用易于理解的信息提示用户，避免直接展示代码错误。系统状态可见原则可以提升用户的操作信心，同时让系统维护工作也更方便。5.2.5. 预防错误发生预防错误发生原则是指系统自身能预防用户产生错误操作，而不是在错误发生后才进行提示。包括以下三个方面：1、 预防用户因缺乏相关知识产生的错误操作；如：业务办理时，通过事前业务互斥提示，避免业务冲突产生。2、 预防用户产生对规则理解不当的错误操作；如：固化年月日输入格式化，可避免日期格式输入错误。3、 预防用户快速机械操作产生的错误；如：删除重要数据时，提示框中默认焦点应是“取消”按钮，避免快速回车造成错误提交。预防错误发生原则可以极大地减少误操作的发生概率，降低人为疏忽导致的损失。5.2.6. 贴近用户场景贴近用户场景原则是指系统应以用户为中心，使用用户易于理解的语言，符合用户的工作习惯。包括以下两个方面：1、 系统说明信息应站在用户角度，使用用户熟悉的词、短语和概念。2、 系统结构符合用户对真实世界的理解；如：系统功能菜单组合符合实际业务需求。贴近用户场景原则可以避免开发人员使用晦涩难懂的计算机语言和技术实现逻辑，让系统与真实业务场景匹配度高，让用户只需关注业务而不用去关注技术。5.2.7. 使用舒适高效使用舒适高效原则是指系统能够给不同能力级别用户提供舒适的交互功能。包括以下两个方面：1、 提高系统自动化程度，尽量减少用户不必要的动作；如：提供合适的默认值，减少用户输入。2、 用户能方便地操作使用频率较高的功能；如：为常用功能提供快捷键。使用舒适高效原则既能满足初级用户快速上手的需要，又能发挥熟练用户主观能动性，提高操作效率。5.2.8. 界面美观精炼界面美观精炼原则是指界面符合用户的审美要求，同时应去掉无关信息。包括以下四个方面：1、 界面元素大小适中，颜色适当。2、 界面布局密度均匀，分组间距合理。3、 可移动元素（如：滚动条）的速度适中且明显可见。4、 交互中不包含无关的信息，不常用的信息按需获取。界面美观精炼原则让用户能够在使用中感觉轻松愉悦，不会感到疲劳，体会到工作的乐趣。5.2.9. 保障用户控制和自由保障用户控制和自由原则是指系统应给予用户适当的控制权。包括以下三个方面：1、 可让用户选择在何时离开、返回上一步状态或终止任务。2、 在用户误操作的情况下，需提供一个明显的“紧急退出”标志来帮助用户离开。3、 系统需要在不可逆转的命令执行之前给予用户足够的警告。保障用户控制和自由可以帮助用户清晰的了解并控制其当前任务，提升用户对系统的控制能力和交互体验。5.2.10. 提供帮助和文档提供帮助和文档原则是指系统有完善的帮助功能和详细的说明文档，指导用户使用系统。包括以下三个方面：1、 帮助功能和说明文档易于查找；如：页面模块上提供在线帮助的入口。2、 帮助信息和说明文档易于理解。3、 帮助内容易于应用；如：可以从帮助内容直接打开对应功能。完善的帮助和文档可以帮助用户方便快速学习和使用系统功能。5.3. 设计框架CRM界面设计架构包括；结构层、框架层、表现层。图5- 2中国移动CRM界面设计框架1、 结构层：交互设计与信息架构结构层确定各个将要呈现给用户的选项的模式和顺序，其重点关注理解用户、用户的工作方式和思考方式。信息架构是对信息内容的分类、组织、标识、导航和搜索进行结构化分析和设计，让用户可以高效、便捷的发现和使用系统的内容。交互设计是对用户和系统的交互操作进行定义，方便用户完成相关操作。2、 界面层：框架设计、导航设计和信息设计在充满概念的结构层中开始形成了大量的需求，在界面层将更进一步地提炼并确定详细的界面外观、导航和信息设计。框架设计包括窗体、布局等。导航设计是对界面元素的设计，方便用户浏览信息，本规范不做统一要求。信息设计是对信息展现方式的设计，方便用户理解，本规范不做统一要求。3、 表现层：视觉设计在五层模型的顶端，重点关注视觉设计，内容、功能和美学汇集到一起来产生最终设计，从而满足其他层面的所有目标。视觉设计是对界面元素的图片化处理（观感中的“观”），包括主题、色彩、字体、图片等元素。6. 信息架构信息架构着重于对信息系统所管理内容的分类、组织、标识、导航和搜索的结构化分析及设计，从而让用户可以高效、便捷的发现和使用系统的内容。信息架构设计的效果体现在系统界面上，但其设计原则和方法也涵盖了系统基础数据结构设计的要求。信息架构的一般设计原则为：1、 信息内容有效性信息内容精准，表述信息的文字、表格或图像应精炼准确，不产生歧义；信息内容对用户是最新的、有价值的，不会出现过时的信息。2、 信息内容完整性信息内容的分类和组织能够涵盖系统所管理的信息范围，不应出现信息内容游离于信息组织结构之外；人机交互中，系统反馈给用户的信息内容应足够支撑用户操作所需，减少用户的额外信息请求。3、 信息结构合理性信息结构层次合理、清晰，从一般到具体，信息分类和组织贴合用户对事物已经形成的认知和经验。 6.1. 信息分类信息分类是指通过对信息内容的分析，将具有相同特征的信息内容进行归类的过程；它包括了信息精确分类和模糊分类两种方式。信息分类是信息架构设计的基础，只有对信息按一定规则分类整理后，才能更进一步进行组织和使用，否则信息系统所包含的信息对用户来说只会是难以理解并且毫无意义的数据或代码。6.1.1. 精确分类精确分类是指通过采用字母顺序、时间顺序或地理位置等分类方式对信息进行精确、无重叠的分类。精确分类优点是只要知道信息内容精确关键字，就可以准确的定位信息；同时精确分类方法易于设计、维护和使用；缺点是需要记忆信息内容的精确关键字，不符合人的信息记忆方式，且信息分类越多，用户需记忆的关键字就越繁杂。精确分类适合于通过字母顺序方式对技术术语、业务名词以及在线帮助等信息内容分类， 也适合于通过时间顺序或地理位置方式对日报、月报等信息内容分类。精确分类的设计规则为：1、 精确分类方式要适合检索，与用户记忆的精确关键字要匹配（如按照拼音字母检索人物名称与用户习惯记忆人名相符）。2、 精确分类方式要尽量减少信息浏览的层级，减少用户定位到目标信息内容的步骤。6.1.2. 模糊分类模糊分类是指以用户需求为导向，按照主题、任务、角色等主观性或概括性的分类关键字对信息进行分类。这种分类的优点是符合用户一般认知经验，分类结果和用户经验知识匹配度高，易于理解和接受；缺点是信息内容分类有重叠，分类方法不易于设计、维护和使用。模糊分类一般是业务相关的，是在充分了解用户业务使用场景和操作目的后，归纳总结得出的结果。良好的模糊分类不仅可以使用户快速准确地检索或浏览系统所管理的信息内容，还可以间接帮助用户学习使用系统和提升业务知识。模糊分类是信息分类的主要分类方式，主要目的是将信息系统涵盖或管理的信息内容组织成结构化的体系。这种结构化的体系可以是自顶向下的分层结构（如：系统多级功能菜单），也可以是网络化的结构（如：CRM模块关联、知识库知识点关联）。模糊分类设计规则为：1、 分类关键字的选择要考虑目标用户群的接受层次（如：知识经验、文化背景等），避免分类过复杂或专业性过强。2、 整体分类体系在不影响实用性前提下，要构建一个较为严谨的和现实相一致的层级结构体系。3、 信息内容或用户需求发生变化时，新增和调整分类结果不会对已构建的信息结构组织体系造成较大影响。6.2. 信息组织信息组织是指通过对信息内容和分组之间、信息分组和信息分组之间关联关系的分析，构建一个结构化、符合逻辑的组织结构。该组织结构既可以是金字塔式的自顶向下的层级结构，也可以是类似超链接形式的网络化的结构。信息内容组织时应考虑到目标用户群及具体场景。按目标用户群和应用场景的不同，信息内容可以仅归属一个分组，也可以同时归属多个分组。6.2.1. 层级结构组织 层级结构组织是指按照自顶向下的层级结构形式将信息分层组织的方式。如下图所示：图6- 1层级结构组织层级结构信息组织方式一般用于对系统整体内容的分层组织，为系统的整体导航结构设计提供基础。层级结构信息组织设计规则为：1、 信息层级结构尽量窄而浅，并且尽量保持结构的平衡。2、 分组的排列顺序要综合考虑分组使用频率和分组之间的逻辑关系。6.2.2. 超链接组织超链接组织是指在信息内容或分组之间通过超链接引用形式实现的信息组织方式；如下图所示，超链接的组织形式优点是可以使信息形成网状结构，以适应人类思维的非线性特点；缺点是导航是非线性跳转，检索效率较低，用户容易在查找信息的过程中迷失。图6- 2超链接组织超链接信息组织一般用于页面内容的上下文导航中，可以方便信息分组的相互关联和引用。超链接信息组织设计规则为：1、 超链接组织只作为辅助手段组织信息内容，不用于对系统整体信息内容的组织。2、 超链接组织中的目标内容与源信息内容关联性要强。6.3. 信息标识信息标识是指将一组具有相同特征的信息组合在一起时，需要通过精炼的标题名称对其命名，概括其特征，便于用户对信息的准确理解和定位。信息标识广泛用于信息系统的各个方面，大到导航菜单项、页面或模块标题等信息分组，小到页面内的一个界面元素（如：文本标签中的内容）。信息标识的设计规则为：1、 标识用词应当为用户所熟悉和易于理解。2、 标识用词简洁明了、概括性强，同样的信息在系统不同页面出现时标识应保持一致。3、 除了是约定俗成的或广为传播的，不要使用英文缩写。4、 处于同一层级的信息分类或分组，语法格式要保持一致性和连贯性，尽量采用统一的语法格式、字数相同。5、 文字长度要适宜，能够明确表达信息含义情况下尽量选择较短的标识。6.4. 信息导航在对信息分类和组织的基础上，通过对用户信息浏览方式的分析和设计，帮助用户对结构化的分组信息进行导航，实现信息的准确和快速定位。信息导航包括全局导航、频道导航、上下文导航和辅助导航等形式。信息导航设计原则为：1、 为用户显示清晰、一致的系统层级结构组织。2、 让用户在浏览到任何页面时，都容易获知当前页面处于系统哪个功能域，当前页面以及上级页面的位置。6.4.1. 全局导航全局导航是指在信息分类组织标识基础上，提供覆盖整个系统的导航方式，通过自顶向下浏览系统各个信息区域的内容。全局导航设计规则为：1、 全局导航在系统首页要能够清晰显示系统所管理的内容分类，与一般页面内容上的视觉要有区别。2、 全局导航一般位于页面顶端，避免需要滚动页面才能访问。3、 全局导航应使用简单，单击就可以进入，避免弹出式菜单等复杂操作。4、 全局导航的信息组织的宽度和深度要合理，避免超过两级。5、 全局导航中显示的分组内容和分组顺序可以根据目标用户需求进行调整。6.4.2. 频道导航频道导航是指在全局导航体系下，某个具体栏目内信息内容的导航方式。 频道导航一般用于系统某个功能域内的导航设计，可以将全局导航过深的层级拆分到一个子栏目内，在局部范围内形成快捷的信息导航。频道导航设计规则遵循信息导航的设计原则。6.4.3. 上下文导航上下文导航是指与页面内容相结合的一种非结构化导航方式，在用户浏览到页面信息内容时，显示该信息上下文相关的超链接。上下文导航一般用于页面中信息内容的关联引用，可以直接有效的将分布在不同页面中的信息内容通过上下文语境联系在一起，方便用户高效、快捷访问。上下文导航设计规则为：1、 超链接名称应当与要到达的目标页面的标题相符。2、 要有当前页面所处位置提示，避免用户导航迷失。6.4.4. 辅助导航辅助导航是指通过站点地图、索引目录或系统指南等形式提供的辅助导航方式。辅助导航一般用于对系统主要导航方式的补充，提供给用户提供多样化的导航方式，又不会破坏整体导航体系的结构。辅助导航设计规则为：1、 全局导航不能一次表达系统所有层级分类时，可以通过站点地图给出系统导航全貌。2、 辅助导航通过单独的页面展示导航内容（如：站点地图页面、索引目录页面）。3、 通过辅助导航页面可以间接访问到所需要的信息内容页面。4、 辅助导航入口易于发现。6.5. 信息搜索信息搜索通过输入要查找内容的关键词让用户快速定位目标信息内容的一种手段。信息搜索设计规则为：1、 用户关注的内容作为优先搜索的范围。2、 输入搜索关键词时，可以通过搜索范围栏目的选择，缩小搜索的范围。3、 搜索框简单明了，一般位于页面的顶端。4、 支持记忆用户输入的关键词，在下次搜索时自动进行模糊匹配。5、 支持对当前搜索结果进行再次搜索。6、 支持在搜索结果中显示内容摘要和关键词信息。7、 支持返回的搜索结果按照用户需求进行排序，将内容相关度高的结果排在前面显示。7. 交互设计交互设计是对用户和系统的交互操作进行定义，方便用户完成相关操作。本章节阐述了CRM界面交互设计中表单和控件等需要遵循的规则，并从任务和表单两个层次来描述用户与系统交互的典型场景及设计要求。7.1. 表单表单是一种可以由用户输入，收集客户端数据，并提交给服务器端的一个图形界面。【规则】1、 建议表单内部有帮助信息，将表单主要任务目标、注意事项等描述在表单前申明，便于用户及时获得导引。2、 数据显示集中原则：各种列表在页面中往往是传递信息的核心，尽量集中的表现，并将相关联的数据恰当的组织起来，方便查看、编辑等。3、 表单内任务较少使用的表单项可以通过DHTML、服务器端控件等隐藏技术减少用户使用中的干扰因素。4、 表单中控件应有完整的状态控制，如在操作中灰显不可使用的控件。5、 信息显示中需过滤可能出现的用户不能识别的HTML特殊字符。6、 表单格式尽量保持业务的原始票据格式或字段排列顺序，方便用户的集中录入。7、 经常使用的功能按钮（如：新增、编辑等）保证不需滚动页面即可操作；长页面可以考虑页首、页尾均放置功能按钮。8、 提交按钮醒目，位置符合习惯。9、 界面退出或关闭的按钮建议放在不易被点击的位置。10、 表单内控件大小、对齐方式，使之符合内容版式的需要。【样式】1、 表单内标签内容采用右对齐方式。2、 表单内信息内容采用左对齐方式。3、 表单内控件采用左右两边对齐方式。4、 表单根据页面具体情况,保持合理边距，建议值2px。5、 表单内的行间距，建议值为5px。6、 表单支持采用空白或边框线进行分组。7、 表单内分组区域间的间隔，建议值为5px。8、 表单内的必填信息统一在标签前面添加红色*号标注。【图示】图7- 1 表单示例7.2. 控件控件是指显示在表单上的图形对象，也就是允许用户控制程序的图形用户界面对象，如文本框、复选框、命令按钮等。本章节主要描述CRM界面中涉及到的控件在样式、交互等方面应满足的要求，其中控件设计的总体要求如下：1、 分栏目的标题使用精简明晰的描述性文字，提高用户的友好感知度。2、 第三方控件在执行过程中不能破坏页面原布局。7.2.1. 超链接（Hyperlink）超链接是一种允许用户同其他页面或站点之间进行连接的页面元素。【规则】1、 文字链接需包括三种状态：初始状态，鼠标悬停状态，已访问状态,每种状态必须通过不同颜色进行区分。2、 支持设立错误链接页面，当页面出现死链接或链接错误时，统一使用该页面反馈给用户。3、 建议内部系统的链接使用相对路径，在当前页面显示内容；外部系统链接需使用绝对路径，新开页面显示内容。【样式】链接字体颜色：与整体色彩匹配，并根据不同交互场景做出变换。【图示】图7- 2超链接初始状态示例图7- 3超链接鼠标悬停状态示例图7- 4超链接已访问状态示例7.2.2. 文本框（Text）文本框是页面上用于创建用户可输入单行文本的编辑框。【规则】1、 普通文本框激活前采用系统默认样式，激活后支持输入框背景变色或内凹，此时光标为闪烁状态。2、 密码框是一种特殊的文本框，输入内容不应明文体现，建议使用*或遮掩。【样式】1、 文本框高度：21px。2、 文本框长度：与其内容长度相适应。3、 提示标签与文本框间距：1px。4、 文本框中的第一个文字与文本框间距：2px。【图示】图7-