Q GDW 11699-2017 《信息系统用户体验设计规范》.pdf

《Q GDW 11699-2017 《信息系统用户体验设计规范》.pdf》由会员分享，可在线阅读，更多相关《Q GDW 11699-2017 《信息系统用户体验设计规范》.pdf（58页珍藏版）》请在麦多课文档分享上搜索。

1、ICS 35.080 Q/GDW 国 家 电 网 公 司 企 业 标 准 Q/GDW 11699 2017 信息系统用户体验设计规范 The design specification of information system user experience 2018 - 03 - 05 发布 2018 - 03 - 05 实施 国家电网公司 发布 Q/GDW 116992017 I 目 次 前 言 III 1 范围 . 1 2 规范性引用文件 . 1 3 术语和定义 . 1 4 缩略语 . 2 5 总体指导要求 . 2 5.1 有效告知性 . 3 5.2 预期符合性 . 3 5.3 用户可控

2、性 . 3 5.4 感观一致性 . 3 5.5 及时帮助性 . 3 5.6 错误预防性 . 3 5.7 信息识别性 . 3 5.8 使用灵活性 . 3 5.9 设计简约性 . 3 5.10 系统的引导性 3 6 视觉设计要求 . 4 6.1 VI 标准 4 6.2 界面布局 . 4 6.3 元素布局 . 4 6.4 元素匹配 . 6 6.5 文字匹配 . 7 6.6 色彩运用 . 7 7 交互设计要求 . 9 7.1 登录 . 9 7.2 表单 10 7.3 表格 12 7.4 导航 14 7.5 信息搜索（查询） 21 7.6 消息 22 7.7 界面内容跳转 27 7.8 键位设置 29

3、7.9 首次体验 29 8 控件设计要求 30 8.1 容器控件 30 Q/GDW 116992017 II 8.2 选择器控件 32 8.3 单值控件 38 8.4 地图控件 39 8.5 文本控件 40 8.6 统计图形控件 41 8.7 新颖控件 46 编制说明 . 49 Q/GDW 116992017 III 前 言 为规范信息化 项目建设中的用户体验设计，更好的支撑国家电网公司 信息化 项目建设， 制定 本标准。 本标准 由 国家电网公司 信通部 提出并解释。 本标准 由 国家电网公司 科技部归口 。 本标准 起草单位： 国网陕西省电力公司 、 南京南瑞集团公司 、 国家电网公司 信

4、息通信分 公司、 国网信息通信 产业集团 有限公司 、 国网辽宁 省 电力 有限公司 。 本标准 主要起草人： 任晓龙 、 樊涛、蒋蕾 、 王澍、刘虎、林楠 、 柏峻峰、马霁讴 、 房涛 、 郑福生、朱京、潘磊、严晴 、 巢玉坚 、 李鹏飞、 樊锐、王希、蔡怡挺、张梦梦、阮兆文 、胡游君 、 邱玉祥 、 周夏 、张一淳、张亦超、王泉啸 、 任伸 、 武玉峰 、 甘岚 、 乔治中、王欢、 董衍旭、 景峰、王雪晶、 潘飚、 杨洋、易璐、 胡苹、温晓丽、孙丽果。 本标准 为 首次发布 。 本标准 在执行过程中的意见 请 反馈至 国家电网公司 科技部。 Q/GDW 116992017 1 信息系统用户

5、体验 设计 规范 1 范围 本标准 规定 了 信息系统用户体验设计的设计原则、 视觉 设计要求 、 交互 设计要求 、 控件 设计要求 。 本标准适用于 国家电网公司 B/S架构的信息系统设计，其他架构参照执行。 2 规范性引用文件 下列文件对于 本标准 的应用是必不可少的。凡是注日期的引用文件，仅 注日期的 版本适用于 本标准 。凡是不注日期的引用文件，其最新版本（包括所有的修改单）适用于 本 文件 。 ISO/AWI 16071 人机交互的人因工效学 -软件易用性指南 （ Ergonomics - software usability guide for human computer in

6、teraction） 。 3 术语 和 定义 下列术语和定义适用于 本 文件 。 3.1 人机交互 human-computer interaction 为达到某一目标在用户与系统之间产生的一系列有序的用户行为及系统反应。 3.2 使用场景 conditions of use 产品使用中的用户、任务、设备（软硬件及材料） 的 物理和社会环境。 3.3 任务 task 为完成某目标所需的一系列活动。 3.4 用户 user 与系统进行互动的人 或群体 。 3.5 用户界面 user interface 系统和用户之间进行交互和信息交换的媒介，实现信息的内部形式与人类可以接受形式之间的转换 。 Q

7、/GDW 116992017 2 3.6 用户体验 user experience 在人机交互（ HCI）过程中，用户对于使用的产品、系统或服务的认知印象和回应。 3.7 自适应 adaptive 可根据浏览器显示 的特性 自动调整界面宽度。 3.8 模态对话框 modal dialogue box 模态对话框 通过一个弹出的 窗口，强制用户必须完成此对话框内的操作 。 3.9 B/S 架构 browser/server B/S结构 为 一种网络结构模式 即浏览器和 服务器 结构 。 3.10 控 件 control 通过对数据和方法的封装，形成易于用户操作的、易于后台编辑的操作模块。 3.1

8、1 用户角色 user role 用户角色是指按照一定参考体系划分的用户类型，是能够代表某种用户特征、便于统一描述的众多用户个体集合。 3.12 扫视路径 scan path 因目光迅速向关注目标移动而形成的逻辑轨迹。 4 缩略语 下 列略语适用于 本 文件 。 Px：像素 （ Pixel） UI： 用户界面 （ User Interface） UE： 用户体验 （ User Experience） VI：企业视觉识别系统（ Visual Identity） HCI:人机交互（ Human-Computer Interaction） 5 总体指导要求 Q/GDW 116992017 3 5.1

9、 有效告知 性 信息系统应考虑系统与用户的反馈与交互，在适当的时候提供适当的反馈， 保证 用户随时掌握系统的运行状态。 若 用户 在操作过程中 得不到反馈，或需要待很长时间才 确认可 操作是否有效，则 说明 用户的操作体验较差。 5.2 预期符合性 界 面内信息描述应采用用户熟悉的词汇、惯用语和概念，减少新概念，降低用户的学习成本和记忆负担，并可依靠以往的经验学习和使用系统 ， 实现投运系统采用既定惯例进行设计研发。 界面设计成果应与用户的必备常识、工作环境匹配， 通过 既定惯例进行设计，使用户能够更快地掌握信息系统。 5.3 用户可控性 用户在操作中发生异常状况时，系统应提供 有效 的提示，

10、让用户有权自主中断某项操作，控制系统的状态。 因此 ， 当用户在操作中发生了异常状况时，系统应提供标记醒目的 解决 方案 ， 让用户有权自主中断某项 操作 。 5.4 感观 一致性 同一系统中相同任务或相似任务的交互 逻辑和视觉效果应保持一致 ，有效引导用户使用，降低用户的学习成本 。 5.5 及时 帮助性 及时帮助性包含以下内容： a) 因系统或用户使用出现错误时，应使用简明的语言描述问题，提供推荐解决方法 ； b) 应避免简单的描述，需结合文字，图片，声音，链接等方式详细的描述解决方案和途径，多维度下帮助用户。 5.6 错误 预防性 宜使用合理方式限制用户操作，防止错误发生。使用户能够在使

11、用的过程中，体验流畅，高效操作。 5.7 信息识别性 使用简洁明 了 的 描述方式以及形式 提示用户某项操作的功能、目的以及可能发生的结果 。 保证用户依赖识别而不是记忆来使用系统。 即通过 使用简洁明了的图形或文字提示用户某项操作的功能、目的以及可能发生的结果。 5.8 使用灵活性 针对用户的具体使用场景， 运用 合理布局和快捷键方式 ， 使 用户 操作效率 的 提高 。 5.9 设计简约性 设计简约性包含以下内容： a) 针对用户的 角色和使用场景， 应 隐藏或删除不常用或不重要的功能与信息 ； b) 通过 视觉元素 的运 用 增加美感，提升吸引力 。 使 系统的整体 效果 满足用户的预期

12、以及审美喜好。 5.10 系统的引导性 在新增功能以及复杂功能模块中 提供帮助性引导或提示， 帮助用户学习和使用系统 。 使 用户能够在较短的时间内，通过自主的方式掌握并熟悉系统的 交互逻辑 。 Q/GDW 116992017 4 6 视觉 设计要求 6.1 VI 标准 6.1.1 设计原则 VI 使用 应 保持统一性，保证 国家电网公司 形象对外传播的一致性，使品牌有效的传播 。 6.1.2 设计要求 VI标准使用性 的设计要求主要包含以下内容： a) VI 在使用中 应 严格执行相互 比例 关系，其原型，间距、字体、色值 不可 随意更改 ； b) Logo 与系统名称横向排列时，系统名称的

13、高度、颜色 应 与 Logo 保持一致 ； c) Logo 与系统名称竖向排列时， Logo 应 与系统名称左对齐，颜色 应 与 Logo 保持一致，字号 不 超过“ 国家电网公司 ”的字号。 6.2 界面 布局 6.2.1 设计原则 整体布局合规性的设计原则主要包含以下内容： a) 布局一致性 ： 同 一功能内容应保持前后布局、样式一致（或具有明确的延续性），不同功能区域区分明确 ； b) 布局合理性 ： 整体布局 应 横平竖直、间距一致， 板块 布局符合业务需求与正常逻辑 ； c) 布局间距规范性 ： 板块 之间应保持一致的空隙与间距，不得出现 板块 间距过窄或过宽的情况 ； d) 视觉引

14、导性 ： 应 运用视觉引导性原则，利用视觉手段对相关的内容区域加以区分或者延展。有效引导用户获取关键信息，关注重点区域 ； e) 视觉流畅性 ： 视觉流应根据任务逻辑和用户的浏览习惯来设计。视觉流设计应清晰、合理、顺畅、自然 。 6.2.2 设计要求 整体布局合规性 的设计要求主要包含以下内容： a) 视觉流 :在界面布局时， 应 将 最希望用户关注的关键信息放置于界面的左上区域，将辅助信息放置于界面的右下区域。 便于 用户对界面进行扫视时，优先获得重要信息，并根据需求适当忽略次要信息，节省阅读时间 ； b) 扫视布局 是 针对扫视的布局设计应强调主要的 UI 元素，弱化次要的。 内容 包括：

15、 1) 应 将主 UI元素放在扫视路径上 ； 2) 应 避免将重要信息放在左下角、底端或需要滚动多次的控件上 ； 3) 应 使用渐进展开 方式来隐藏次要的 UI元素 。 6.3 元素布局 6.3.1 设计原则 元素 布局合规性的设计原则主要包含以下内容： a) 元素对齐性 ： 元素对齐性包含按钮内文字与按钮的对齐， 元素与背景的对齐，图形（如图标）与图形（如图标）的对齐，表格内文字的对齐，以及标签文字的对齐方式，系统名称与 Logo对齐方式； Q/GDW 116992017 5 b) 元素自适应性 ： 自适应是处理和分析过程中 ， 根据处理数据的数据特征自动调整处理方法、处理顺序、处理参数、边

16、界条件或约束条件 ， 使其与所处理数据的统计分布特征、结构特征相适应 ， 以取得最佳的处理效果。页面中不得出现非必要的横向或者竖向滚动条，表 格内的非常规留白，局部元素移位或者整体内容区域偏移自适应问题； c) 元素间距一致性 ： 同级别视觉元素多个排列 应 保持一致的间距或者其边距 应 保持一致。 6.3.2 设计要求 元素 布局合规性 的设计要求主要包含以下内容： a) 布局间距 :板块 之间的距离不得小于 10px;不得大于 15px;且同一系统界面中所有 板块 布局的间距 应 保持一致。 板块 中的内容（如按钮、下拉框、输入框） 与四周元素边距 应 保持一致； b) Logo 与系统名

17、称的 对齐 ，内容包括： 1) 位置： Logo 应 处于头部最左侧 ， 并与左侧边缘保留适当间距； 2) 对齐方式为 ： Logo 同头部背景应垂直居中对齐 ， 系统名称同头部背景应垂直居中对齐 ，双行系统名称应左对齐 ， Logo 与系统名称应垂直居中对齐 。 c) 用户信息的位置与头部的 对齐 ，内容包括： 1) 位置： “ 用户信息 ”、 “注销 ”、“ 退出”功能 应 放在头部的最右侧，并与右侧边缘保持适当边距； 2) 对齐方式为 :应以 头部高度为基准，垂直居中对齐。 d) 正文与标题的 对齐 ，内容包括： 1) 位置： 标题 应 位于正文的正上方； 2) 对齐方式为 ： 正文与标

18、题水平居中对齐； 3) 文字 对齐 ：横向分布 1-5 字以内的文字应 与 文本对齐垂直居中对齐，横向分布 6-20 字以内的文字之间应左对齐，正文文字应左对齐。 e) 正文与标题 分布方式 ： 1) 文本间距应两两间距一致； 2) 文本及文本所在框间距应两两间距一致； 3) 文本间距应左对齐，两两间距一致。 f) 图标及按钮的 对齐 ，内容包括： 1) 图形（如图标）居 左文字居右： 应采用 垂直居中对齐 的 对齐方式 ； 2) 多个图形（如图标） 居左文字居右 ； 3) 图形（如图标）上文字下： 应采用 水平居中对齐 的对齐方式 ； 4) 多个图形（如图标）上文字下对齐 ； 5) 图形（如

19、图标）居左文字居右置于按钮内： 应采用 垂直居中对齐 的对齐方式 ； 6) 图形（如图标）上文字下置于按钮内： 应采用 水平居中对齐 的对齐方式 。 与 背景按钮 应采用 水平居中对齐和垂直居中对齐 的对齐方式 ； 7) 按钮内只含有文字 ： 对齐方式（和背景按钮） 应采用 水平居中对齐和垂直居中对齐 的对齐方式 。 g) 分组框（边框） 对齐 ， 分组框（边框）对齐方式以布局的“ 对齐 ”为基础，当 内容 不可 充满分组框空间时，可适当留白，设计时应保证对齐，内容包括： 1) 多个高分组框（边框）之间对齐 及分布 方式 ：横向对齐方式应为垂直居中对齐，横向排列间距分布方式应为两两间距一致，纵

20、向对齐方式应为左对齐，纵向排列间距分布方式应为两两间距一致； 2) 分组框（边框）标题 对齐方式为 与左边框及上、下边框的间距需保持统一。 Q/GDW 116992017 6 h) 表格控件 对齐 ，内容包括： 1) 表头信息（含数字、字母、汉字）对齐及分布方式 ：信息之间横向对齐方式应为垂直居中对齐，信息之间竖向对齐方式应为水平居中对齐，表头信息与表头背景横向分布方式应为两两间距一致，表头信息 与表头背景竖向分布方式应为两两间距一致； 2) 表格内容信息（含数字、字母、汉字、图形（如图标）、按钮）对齐方式 ：表内汉字对齐方式应为左对齐，且距离左边框需保持与上下边框一致的间距，表内数字及英文对

21、齐方式应为右对齐，且距离右边框需保持与上下边框一致的间距，表内信息与表格背景对齐方式应为垂直居中对齐； 3) 多个表格之间的对齐 及分布 方式 为：横向对齐方式应为顶对齐，纵向对齐方式应为左对齐，横向排列间距分布方式应为两两间距一致，纵向排列间距分布方式应为两两间距一致 。 i) 弹出框与界面的对齐 方式 应 为 垂直居中对齐与水平居 中对齐； j) 复 选框与单选框控件的 对齐 ，内容包括： 1) 复选框、单选框与标签信息之间横向对齐方式 应 为 垂直居中对齐； 2) 多个横向排列间距 分布方式 应 为 两两间距一致； 3) 多个竖向排列间距 分布方式 应 为 两两间距一致。 k) 下拉列表

22、控件的对齐 ，内容包括： 1) 下拉框列表项之间竖向 对齐方式 应 为 左对齐； 2) 多个下拉框横向 对齐方式 应 为 顶对齐； 3) 多个下拉框竖向 对齐方式 应 为 左对齐或右对齐； 4) 多个横向排列间距 分布方式 应 为 两两间距一致； 5) 多个竖向排列间距 分布方式 应 为 两两间距一致。 l) 搜索框控件 对齐 :搜索框 出现下拉提示搜索结果时，其对齐方式参考“下拉列表控件对齐方式”； m) 树形控件对齐 ，内容包括： 1) 各级标题之间竖向 对齐方式 应 为 左对齐； 2) 多个竖向排列间距 分布方式 应 为 两两间距一致。 n) 输入文本控件对齐 ，内容包括： 1) 输入框

23、与框内文字之间横向 对齐方式 应 为 垂直居中对齐； 2) 多个横向排列间距 分布方式 应 为 两两间距一致； 3) 多个竖向排列间距 分布方式 应 为 两两间距一致。 o) 翻页按钮与表格之间的 对齐方式 应 为 竖向排列 时 水平居中对齐。 6.4 元素匹配 6.4.1 设计原则 元素 匹配 性的设计原则主要包含以下内容： a) 同级元素一致性 ： 同级别元素的颜色、尺寸、质感、视角、方向 应 保持一致，且界面中的所有元素的设计风格 应 保持一致； b) 图形 元素准确性 ： 界面中图形元素样式 应 满足描述内容，避免误导 或使用户识别困难，并适当增加辅助文字说明以提高图形元素的识别性；

24、c) 图形元素比性 ： 图形元素整体大小 以及图形元素内置元素比例关系 应 协调，使视觉效果 应 美观舒适，操作高效； d) 图形元素清晰识别性：嵌入图片精度应不小于 72dpi，清晰的图片会给予用户更好的视觉体验 。 6.4.2 设计要求 Q/GDW 116992017 7 元素 匹配 性 的设计要求主要包含以下内容： a) 图形格式 ： 图形（如图标）制作的输出格式为 JPEG、 PNG、 GIF、 ICON 格式， 应根据 图形所在系统需要输出不同格式的图形， 内容包括： 1) GIF 应在 有简单动 画需求的图形推荐 使用此格式 ； 2) JPEG 应在 有背景色的图形使用此格式，有损

25、压缩，不支持透明色； 3) PNG-8 和 PNG-24 应在 使用较少颜色变化的界面中， 使用 此种格式 ； 4) Icon 一般用于系统图标、软件图标，这种图形扩展名为 *.icon、 *.ico。 b) 图形清晰度 ： 无论何种图形都 应 支持 32 位，且边缘平滑； c) 图标尺寸 ： 系统中图标的尺寸， 应根据 图标的用途进行调整，缩放时应严格遵守宽高比 ； d) 图形元素状态方式 ， 内容包括： 1) 当鼠标点击按钮时，按钮状态应产生变化，颜色相较于滑过状态加深或者变为其它颜色并体现点击角度； 2) 当鼠标滑过 按钮时，按钮状态应发生变化； 3) 当按钮未具备实际功能时，按钮状态应

26、暗示用户不可点击或者用其它控件代替。 e) 结构形状 ： 图形（如图标）的结构、形状和细节，统一视角、倒角、质感， 应 保持一致； f) 视觉效果 ： 系统中的图形（如图标） 涉及 灯光、特效、阴影和立体效果 应 在视觉效果上统一。 6.5 文字匹配 6.5.1 设计原则 文字匹配 性 的设计原则主要包含以下内容： a) 字体匹配性 ： 非特殊中文 应 使用 微软雅黑或宋体字体， 非特殊数字、英文 应 使用 Arial 字体，特殊文字字体 应 使用 图片形式输出； b) 字号匹配性 ： 不得有过大或 过小的字体出现，字体字号过大或过小影响界 面美观，且不易用户阅读； c) 文字准确性 ： 系统

27、中 不应 出现错字、别字。 6.5.2 设计要求 文字匹配性 的设计要求 针对 B/S架构系统， 主要包含以下内容： a) 字体 使用 ： 应 使用常用字体， 不 得 出现 生僻字体。“宋体”及“微软雅黑” 应作为 系统界面的通用 中文 字体，默认尺寸为 12px,“ Arial”应作为系统界面的 非特殊数字、英文 ，默认尺寸为 12px； b) 特殊字体 ： 应 以图片的形式输出； d) 常见的字体的样式分为：正常、粗体、斜体， 内容包括： 1) 正常：应用于全系统，默认全部使用正常字体，界面都是以正常 Normal 为标准； 2) 粗体：应用于标题或关键信息； 3) 斜体：一般情况下不使用

28、。除视觉混乱之外，很多浏览器 不可 显示斜体字，也 不可 补偿由于字母倾斜引起的空白变化。普通字体易于阅读，斜体字往往难以阅读 。 6.6 色彩运用 6.6.1 设计原则 色彩运用合理 性的设计原则主要包含以下内容： Q/GDW 116992017 8 a) 色彩选择准确性 ： 一般情况下，在 国家电网公司 信息系统中，红 、黄、绿为预警颜色，文字不应运用于非预警、非状态显示的普通颜色； b) 色彩选择合理性 ： 冷暖色调、对比色调、邻近色调颜色的合理搭配。保持视觉美观，相关视觉信息颜色区分得宜。 6.6.2 设计要求 色彩运用合理 性 的设计要求主要包含以下内容： a) 辅助决策类系统 ，

29、内容包括 ： 1) 主色 适用范围为 “系统 banner”、“未选中按钮状态”、“单色图标填充色或未选中状态的背景色”、“系统名称及 Logo（在白色或浅灰色背景下）”，但不 作 为界面整体背景色使用； 2) 主色风格标准色色值 为 #3EAFCD、 #38A9C4、 #2A9EB5、 #299CB3、 #2396AB、 #1C90A3、 #168A99、#0E8390、 #077C88、 #00767F， 渐变色色值为 #3EAFCD-#00767F； 3) “边框”、“文字正常及高亮、划过、选中状态”、 “ 单色图标不可用、划过和选中状态”、“标题栏” 标准色色值 为 #DCDCDC、

30、#D8D8D8、 #D3D3D3、 #D0D0D0、 #CACACA、 #C7C7C7、 #C1C1C1、#BEBEBE、 #B8B8B8、 #B4B4B4， 渐变色色值为 #DCDCDCB4B4B4； 4) “正常状态”文字 标准色色值 为 #FFFFFF、 #CCCCCC、 #B3B3B3、 #999999、 #808080、 #666666、#4D4D4D、 #333333、 #1A1A1A、 #000000， 渐变色色值为 #FFFFFF-#000000； 5) “高亮、划过、选中状态”文字 标准色色值为 蓝色调、橙色调色值为： #41C3F5、 #41AAF5、#FBB03C、 #F

31、7931E； 6) 图标不可用状态 标准色色值 为 #B3B3B3、 #999999； 7) 单色图标或按钮划过（选中）状态 标准色色值 为 #41C3F5、 #41AAF5； 8) 标题栏色彩风格 标准色色值 为 #DCF0F0、 #D8EDEF、 #D5EAF、 #D2E8EF、 #CFE5EE、 #CBE1EE、#C8DFED、 #C5DCEC、 #C1D9EB、 #BED7EB， 渐变色色值为 #3EAFC-00767F。 b) 业务操作类系统 ， 内容包括： 1) 适用范围 为 “系统 banner”、“未选中按钮状态”、 “ 单色图标填 充色或未选中状态的背景色”、“系统名称及 L

32、ogo（在白色或浅灰色背景下）”，但不 作 界面整体背景色使用 ； 2) 主色 标准色色值 为 #95CF66、 #85C762、 #74C05E、 #65B75B、 #53B158、 #42A852、 #33A251、#229A4B、 #129247、 #008A43， 渐变色色值为 #95CF66-#008A43； 3) 边框色 标准色色值 为 #A0BE82、 #9ABD82、 #94BC82、 #8EBB82、 #89BA82、 #82B982、 #7BB882、#74B782、 #6DB682、 #64B482， 渐变色 色值为 #A0BE82-#64B482； 4) “ 正常状态”

33、文字 标准色色值 为 #FFFFFF、 #CCCCCC、 #B3B3B3、 #999999、 #808080、 #666666、#4D4D4D、 #333333、 #1A1A1A、 #000000， 渐变色色值为 #FFFFFF-#000000； 5) “ 高亮、划过、选中状态”文字 标准色色值 为 #5DBC48、 #16964B、 #F7C908、 #FBB03C； 6) 图标不可用、单色图标或按钮划过（选中状态）色彩风格 标准色色值 为 单色图标不可用状态 标准色色值 为 #B3B3B3、 #999999； 7) 单色图标划过（选中）状态 标准色色值 为 #5DBC48、 #1694B；

34、 8) 标题栏色彩风格 标准色色值 为 #E5E8D6、 #D9E4CB、 #CDE0C1、 #BEDEB7、 #B1DAAD、 #A5D8A2、#99D499、 #8CCF8F、 #7FCE84、 #71C979， 渐变色色值为 #E5E8D6-#71C979。 c) 监视控制类系统 ， 内容包括： Q/GDW 116992017 9 1) 主色选择适用范围为 “系统 banner”、“未选中按钮状态”、 “ 单色图标填充色或未选中状态的背景色”、“系统名称及 LogoLogo（在白色或浅灰色背景下）”，但不 作 为界面整体背景色使用 ； 2) 主色 标准色色值 为 #7AD0BF、 #6C

35、CBB9、 #5FC7B4、 #52C1AD、 #44BBA6、 #37B6A0、 #2AB099、#1DAC94、 #0EA78E、 #00A187， 渐变色色值为 #7AD0BF-#00A187； 3) 辅色 边框 标准色色值 为 #DCDCDC、 #D8D8D8、 #D3D3D3、 #D0D0D0、 #CACACA、 #C7C7C7、 #C1C1C1、#BEBEBE、 #B8B8B8、 #B4B4B4， 渐变色色值为 #DCDCDCB4B4B4； 4) 正常状态文字 辅 标准色色值 为 #FFFFFF、 #CCCCCC、 #B3B3B3、 #999999、 #808080、 #66666

36、6、#4D4D4D、 #333333、 #1A1A1A、 #000000， 渐变色色值为 #FFFFFF-#000000； 5) 高亮、划过、选中状态文字 辅色 标准色色值 为 #2AB099、 #096D68、 #F7C908、 #ECAF19； 6) 单色图标不可用状态 辅色 标准色色值 为 #B3B3B3、 #999999； 7) 单色图标划过（选中）状态 辅色 标准色色值 为 #34F7F7、 #258E8B； 8) “监视控制类系统” 标题栏 标准色色值 为 #F6F6F8、 #F3F5F8、 #F1F4F8、 #EFF3F7、 #ECF1F7、#EAF1F6、 #E8EFF6、 #

37、E6EEF6、 #E3EDF5、 #E1ECF5。 渐变色色值为 ： #F6F6F8-#E1ECF5。 7 交互 设计要求 7.1 登录 7.1.1 设计原则 登录 的设计原则主要包含以下内容： a) 简约性 ： 登录界面的交互设计应简单，降低用户认知成本，带来高效的用户体验； b) 帮助性 ： 系统应 对用户的操作提供帮助提示，引导用户正确操作； c) 信息易识别性 ： 系统登录信息应符合用户的视觉扫视规律，输入焦点应易被发现； d) 可控性 ： 用户 应 决定在登录的过程中以及登录后是否继续使用系统或退出系统； e) 容错性 ： 用户操作错误应给予错误提示，帮助用户修正错误； 不规范的操作

38、和输入应当给予告警，帮助用户规范使用系统 ； f) 错误提示及时性 ： 用户操作错误时应尽快给用户反馈错误提示，帮助用户快速 了 解错误的原因； g) 错误提示明确性 ： 错误提示描述 应 准确 易懂，帮助用户解决目前问题； h) 高效性 ： 应 增加快捷操作键，方便用户快捷操作 ； i) 安全性 ： 遵照 国家电网公司 对系统安全性的要求，提示的语言 避免 任何用户 应 通过信息提示进行口令猜测。 7.1.2 设计要求 登录 的设计要求主要包含以下内容： a) 登录界面中 ，应 出现“版权信息”、“服务条款”、“隐私 权政策”、“公司备案信 息”内容，并将其统一放置于登录界面底部； b) 帮

39、助性信息或提示应及时给予用户反馈； c) “用户名”和“密码”标签的对齐方式 应 设置为“非字形”对齐方式，即标签右对齐，内容左对齐； d) 登录按钮在登录框中 应 居中对齐； e) 在 “用户名输入框” 中 应 容纳系统中最长的用户名； Q/GDW 116992017 10 f) 登录界面背景图 应 与登录框在视觉上 区分层次，引导用户将注视焦点放在登录框区域，使用户视觉焦点居中； g) 在 登录过程中， 应 出现“正在登录中”的状态提示； h) 在登录过程中，应 将 “登录”按钮变为“取消”按钮； i) 在登录过程中， “用户名”和“密码”输入框 应 为 不可编辑状态； j) 在登 录过程

40、中， 若点击“取消”按钮， 系统应取消登录，回到登录前界面，已输入的用户名和密码信息应保留； k) 在 用户输入格式错误时， 应 进行错误提示； l) 若用户名为固定格式（如邮箱 ），在用户输入错误且用户名输入框失去焦点时，应及时进行错误提示； m) 在 用户名为空时 ，应禁用密码填写功能 ， 并 对用户名输入框进行提示； n) 在 未输入密码直接点击登录时， 应 对密码输入框进行提示 ； o) 在 错误提示 中 应 优先使用“原地提示”模式，具体参见“消息”部分中的“错误消息”章节 ； p) 用户名输入框 应 作为当前界面默认输入焦点。 将 “ Enter”键作为默认“登录”快捷键。 将 “

41、 Tab”键作为输入焦点自动换行快捷键； q) 焦点切换顺序为：用户名、密码、登录按钮，循环切换； r) 在 密码或用户名错误时， 应 仅提示“用户名或密码错误”，不给予具体的错误描述； s) 在 “用户名”、“密码”输入框 应具备 清空功能 。 7.2 表单 7.2.1 单页表单 7.2.1.1 设计原则 表单 的设计原则主要包含以下内容： a) 信息易识别性 ： 表单中标 签位置应符合用户阅读习惯，提高信息的识别性，方便用户阅读和理解； b) 帮助性 ： 针对表单复杂输入项操作， 应 提供帮助标识或提示，减少用户认知负担； c) 反馈性 ： 应 给予用户操作结果反馈，明确告知用户当前状态；

42、 d) 容错性 ： 用户操作 错误时 应 给予 给用户反馈错误提示，帮助用户快速从错误中恢复； e) 高效性 ： 表单填写应便于用户记忆和使用，减轻用户输入负担； f) 礼貌性 ： 表单措辞 应 使用 简洁易懂的反馈提示语言，避免造成用户理解错误； g) 防错性 ： 通过对表单进行特殊设计，有效防止用户在填写过程中出错。 7.2.1.2 设计要求 表单 的设计要求主要包含以下内容： a) 表单标签对齐方式 应 统一。 使用 “非字形”对齐方式，即标签内容右对齐 ； b) 在 标签内容过长或因多列显示造成显示空间不足时， 应 将 标签放置于输入框上方，同输入框左对齐，且标签与输入框间距 不 过大

43、； c) 必填项 应 出现 标识符号，且 统一放置于标签左侧 ； d) 必填项标识符号 应 默认使用红色“ *”符号表示； e) 表单中“流程结束性”按钮 应 放置于表单下方，如提交、保存、关闭按钮； f) 对易产生歧义的选项 应 提供填写帮助，帮助提示应统一放置于输入框内， 与输入框左对齐，使用灰色文字，字号小于标签字号且提示文字应精炼； Q/GDW 116992017 11 g) 用户输入内容是否正确 应实现自动检测 ，错误提示内容参见 “消息”中“错误消息”章节； h) 在 表单填写过程中或完成时， 应自动检测 自动检查组合项是否填写完整，并提示用户未填项； i) 组合项需手动输入时，填

44、完第一项后焦点 应 自动跳到组合项的下一项； j) 在 表单未填写完或 未保存离开界面时， 应 提示用户离开操作确认，防止误操作引起的内容丢失； k) 反馈提示语言 应 简洁友好 ， 不 责备用户 ； l) 在 表单填写内容具有一定范围或输入内容具有针对性时， 应 使用下拉列表或选择框，减少用户输入； m) 当 用户输入时， 应 展开常用输入项或系统推荐项，辅助用户填写； n) 在 展开下拉列表时， 应 将选中项与输入框对齐； o) 针对复杂输入项， 应 提供帮助标识； p) 若 使用多种输入模式， 应 在传统输入基础上，增加图形体验。 7.2.2 分组表单 7.2.2.1 设计原则 分组表单

45、 的设计原则主要包含以下内容： a) 信息易识别性 ： 表单中标 签位置应符合用户阅读习惯，提高信息的识别 性，方便用户阅读和理解； b) 帮助性 ： 应 给予用户操作结果反馈，明确告知用户当前状态； c) 容错性 ： 用户操作错误时 应 给予 给用户反馈错误提示，帮助用户快速从错误中恢复； d) 高效性 ： 表单填写应便于用户记忆和使用，减轻用户输入负担； e) 礼貌性 ： 表单措辞 应 使用 简洁易懂的反馈提示语言，避免造成用户理 解错误； f) 防错性 ： 通过对表单进行特殊设计，有效防止用户在填写过程中出错。 7.2.2.2 设计要求 该设计要求 遵循“单页表单”的所有 要求 ，此外还

46、应遵守以下 设计要求 ： a) 相关性分组，内容包括： 1) 业务相关性分组 :在表单填写项过多或内容填写相关性较强时，应根据 内容相关性进行分组 ； 2) 控件相关性分组 :在表单填写内容无明显先后顺序，且内容间相关性不强时， 应 将 表单中相似控件样式分为一组。 b) 分组标签文本 应 统一放置于各组填写区域左上角； c) 表单中“流程结束性”按钮 应 放置于表单下方 ，如提交、保存、关闭按钮； d) 对已知信息项可由系统自动显示， 应 减少用户输入 ； e) 在 表单内容分组较多时， 应 设置收起展开功能，收起展开按钮放置于分组框右侧，向上为收起，向下为展开 ； f) 点击收起展开箭头和

47、点击分组框都可完成信息的收起和展开。 7.2.3 分步表单 7.2.3.1 设计原则 分步表单 的设计原则主要包含以下内容： a) 信息易识别性 ： 表单中标 签位置应符合用户阅读习惯，提高信息的识别性，方便用户阅读和理解； Q/GDW 116992017 12 b) 帮助性 ： 针对表单复杂输入项操作， 应 提供帮助标识或提示，减少用户认知负担； c) 反馈性 ： 应 给予用户操作 结果反馈，明确告知用户当前状态； d) 容错性 ： 用户操作错误时 应 给予 给用户反馈错误提示，帮助用户快速从错误中恢复； e) 高效性 ： 表单填写应便于用户记忆和使用，减轻用户输入负担； f) 礼貌性 ：

48、表单措辞 应 使用 简洁易懂的反馈提示语言，避免造成用户理解错误； g) 防错性 ： 通过对表单进行特殊设计，有效防止用户在填写过程中出错。 7.2.3.2 设计要求 该设计要求 遵循“单页表单”和“ 分组表单”的 所有要求，此外还应遵守以下设计要求 ： a) 在 用户填写完成当前信息内容时，“下一步”按钮 方可 使用 ； b) 当跳转到下一界面时，应自动保存当前界面所填写的内容； c) 在 第二组表单中 应 出现“上一步”按钮。通过此按钮返回查看上一组内容 ； d) 当前填写内容 应自动保存 ； e) 在 分步表单提交完成后， 应 提供提交完成反馈提示 ； f) 在 提交失败时， 应 提供错

49、误反馈并提供错误解决方案及入口； g) 表单中“流程结束性”按钮 应 放置于表单下方 ，如提交、保存、关闭按钮； h) 在 表单上方 应 提示当前填写位置和填写流程，使用图形化显示。 7.3 表格 7.3.1 展示类表格 7.3.1.1 设计原则 展示类表格 的设计原则主要包含以下内容： a) 信息易识别性 ： 展示类表格中信息 应 便于用户扫视。表格中信息应根据业务需求进行排序，在必要的情况下相关的内容应连续显示， 使 信息分类有效以及便于用户识别； b) 匹配性 ： 展示类表格的信息展示顺序应符合用户的使用预期，应根据任务逻辑和用户的浏览习惯来设计，保证其合理、顺畅、自然。 7.3.1.2 设计要求 展示类表格 的设计要求主要包含以下内容： a) 所有的表格 应 使用“隔行变色”的交互展示方式，便于用户对信息进行有效区分； b) “隔行变色”的颜色应弱于表头颜色， 便于 用户识别区分，特殊展示情景例外； c) 在 表格中 应 最 设置 多字数显示限制。文本显示未完全时，末尾文字应增加“”符号 ； d) 鼠标悬浮时 应 提示完整文本 ； e) 关键信息无法完全展示时， 应 折行显示； f) 表格的对齐方式 设置 与用户的日常工作生活习惯匹配，具体参见视