界面组件级交互设计规范

IT 应用服务产品界面交互规范 界面组件级规范 1 界面交互设计规范 IT 应用服务产品界面组件级交互规范 V1 0 IT 应用服务产品界面交互规范 界面组件级规范 2 目录 1 概述 5 1 1 规范的目的 5 1 2 规范适用的范围 5 1 3 规范适用的人群 5 2 基本原则 6 2 1 一致性 6 2 2 简洁性 6 2 3 避免干扰和打断 6 2 4 减轻用户记忆负担 6 2 5 及时有效的反馈 6 2 6 让用户放松心态 不怕犯错 7 3 产品交互通用规范 8 3 1 受范性指示 8 3 2 操作不可用状态 8 4 组件规范 10 4 1 表格 10 4 2 单元格数据 15 4 2 1 单元格数据展示 15 4 2 2 通讯录 17 4 3 信息列表 20 4 4 编号和序号 23 4 4 1 编号 23 4 4 2 序号 25 4 5 注册表单 27 4 6 联系方式 33 4 7 图片裁切 37 IT 应用服务产品界面交互规范 界面组件级规范 3 4 7 1 固定尺寸图片裁切 37 4 7 2 自定义尺寸图片裁切 39 4 8 翻页 42 4 9 日期输入 45 4 9 1 通过日历选择日期 45 4 9 2 年份跨度较大时的日期选择 49 4 10 分隔 52 4 10 1 等量条目分隔线 52 4 11 高级加密 55 4 12 进度条 58 4 13 面包屑 60 4 14 星级评分 62 4 15 保留图标 65 4 16 弹出层 67 4 16 1 非独占焦点层 67 4 16 2 独占焦点层 68 4 16 3 局部独占焦点层 70 4 17 搜索 72 4 17 1 模糊搜索 72 4 17 2 精确搜索 74 4 18 数据添加 78 4 18 1 添加单个文件 78 4 18 2 添加多个文件 80 4 18 3 添加行 83 4 19 排序 85 IT 应用服务产品界面交互规范 界面组件级规范 4 修订记录 修订人 日期 版本 修订内容 IT 应用服务产品界面交互规范 界面组件级规范 5 1 概述 界面交互设计规范 对用户与产品交互的各个方面做了相关的描述 该规范由 组件级 流程级 和 系统级 三个部分构成 分别从不同的层面 为 IT 应用服务产品的用户界面提 供规范与指导 规范的制定采用 UCD 以用户为中心的设计 方法 遵循 ISO9241 11 部分标准的要求 设 计过程以用户的使用习惯和心理需求作为出发点 在认真研究并参考了国内外各种优秀设计的 基础上 制定出了适合我集团应用服务产品的设计规范 此外 为保证规范具有良好的可用性 和广泛的适用性 UE 研究室对设计出的每个模式都进行了严格的用户测试 并对各组件采取了 不同应用场景的测试 本规范是界面交互设计规范三个部分中的基础层面 组件级规范 该规范从产品交互的通 用规则和具体组件的交互模式两个方面进行了规定 在每个组件规范中 给出了模式描述和扩 展描述的规范描述 供不同的应用类型和使用场景选择 组合使用 1 1 规范的目的 在产品开发过程中 给不同部门的相关人员提供统一的规范与指导 使沟通与合作顺 利有效地进行 以保证产品界面的最终规范化实现 从一点一滴入手解决公司产品的可用性问题 使操作更人性化 减轻用户的认知负担 改善产品的用户体验 提升产品的市场竞争力 使产品在界面外观和操作行为上形成一致 加强公司产品的品牌化特征 1 2 规范适用的范围 集团内的所有产品 1 3 规范适用的人群 参与产品设计的所有人员以及测试人员等 注 从正式发文之日起属于新项目范畴的必须遵循此规范 对于已有项目进行重大版本升 级的项目要遵循此规范 规范演示网址 7102 IT 应用服务产品界面交互规范 界面组件级规范 6 2 基本原则 以下原则主要用来说明此规范的指导思想与设计依据 简单描述如下 以供该文档的阅读 者参考和使用 具体的原则描述请参见 界面设计指南 2 1 一致性 视觉一致 在同一产品内 所有的同类界面元素在相同的应用环境下 界面外观在 视觉上应该保持一致 否则 界面外观要予以区分 操作行为一致 类似场景的界面设计 其操作方式必须保持一致 当操作行为相同 时要保持视觉上的一致 当操作行为不同时 在视觉上就一定要有所区别 外观与使用者的预期一致 保持对象与其行为相符 保持不同作用的对象外观的不 同 视觉元素的外观及其操作结果 必须与用户的心理认知相符 2 2 简洁性 减轻视觉负担 使用尽可能少的元素 不提供与当前任务无关的信息 简明的文字表述 文字表述必须简明扼要 清晰易懂 内涵丰富 并易于理解和记 忆 操作简单 减少冗余的操作步骤 2 3 避免干扰和打断 避免干扰 明确用户在特定界面中的首要任务和目标 尽可能避免该界面上的视觉 噪声和其它干扰 避免打断 让用户的操作连贯顺畅 避免使用模态对话框 弹出的独占焦点的对话 框 打断用户的工作 2 4 减轻用户记忆负担 认知明确 产品中界面元素外观要明晰 易于辨别 产品的逻辑意义要合理 导航 要及时准确 系统智能化 提供默认值 帮助用户记住尽可能多的信息 最低限度地从用户那里 索取信息 合理的隐喻和习惯用法 使用用户熟悉的 符合使用习惯的隐喻 及通用的习惯用 法 为用户的任务提供直观易用的界面 有效的启示 提供具有明确引导性的启示来指导用户正确操作 启示 某对象用来 说明自身可以如何使用的外观属性 IT 应用服务产品界面交互规范 界面组件级规范 7 2 5 及时有效的反馈 操作反馈 对用户的每一步操作给出及时的反馈 告知用户成功做了某事 受范性反馈 界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果 系统状态反馈 系统需要用户等待或系统出现错误时 要及时让用户明白现状 选择合适的反馈形式 根据不同的情况 使用不同的反馈 如声音 触觉 语言 视觉反馈或是它们的组合 2 6 让用户放松心态 不怕犯错 允许轻松的反向操作 在适当的时候 尽量提供撤销功能 使用户可以返回到上一 步操作并重新进行选择 让用户可以重新开始 提供 恢复初始设置 选项 让用户敢于尝试 避免输入错误 使用合适的选择控件 单选 多选 下拉列表 列表框等 提供最有代 表性的默认选项 以及相应的输入帮助 来方便用户准确输入信息 提供校验等功能 对用户的输入和选择等操作进行实时的判断 帮助用户及时更正 错误 避免埋怨 当用户犯错时 避免责怪和鲁莽地打断与关闭 要礼貌地指出错误所在 并提供有用的恢复建议 IT 应用服务产品界面交互规范 界面组件级规范 8 3 产品交互通用规范 以下为 IT 应用服务产品的交互设计通则 是所有的交互模式必须遵守的普遍规范 用以统 一产品的交互行为 此部分规范将随着组件模式的不断扩充 进行逐步添加和完善 3 1 受范性指示 受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化 用以说明该对象是可操作 的以及何时可以进行操作 对象对鼠标指针移动的响应必须即时有效 响应形式必须明确清晰 如 鼠标移过按钮 按钮有被按下的效果 受范性表现必须保持高度的一致 同等功能和操作的元素受范性必须相同 如 鼠 标指向链接文字时都做同样的变化 在鼠标指针移开时对象必须即时恢复原来状态 命令按钮也经常被显示为链接样式 文本 下划线 此时为了与普通的链接相区分 必须提供非常明显的不同于链接的受范性指示 注 具体受范性指示的效果参见视觉规范 3 2 操作不可用状态 当用户在某些时候不能进行某些操作时 该命令按钮或命令文本 或其它的形式 在外观 上应显示为不可用状态 如置灰 用来使界面稳定 使用户保持恒定和完整的思维模式 减少 用户的认知负担 显示为不可用状态的按钮或文本必须保持与可用状态的位置 大小 形态保持一致 仅色彩 灰度和立体效果等发生变化 操作不可用的情况主要包括 菜单性质和导航性质的操作不可用时不能隐藏 应该显示为不可用状态 如下 图所示 IT 应用服务产品界面交互规范 界面组件级规范 9 图 3 1 菜单操作不可用 工具栏按钮不可用时不能隐藏 应该显示为不可用状态 如下图所示 图 3 2 工具按钮不可用 当一个操作在用户进行了某行为 如填写或选择了某选项时 就变为可操作 则该操作不可用时不能隐藏 应该显示为不可用状态 如下图所示 图 3 3 操作命令不可用 注 具体不可用状态效果见视觉规范 IT 应用服务产品界面交互规范 界面组件级规范 10 4 组件规范 4 1 表格 主要应用于大批量数据的展示 查看 维护等方面 基础表格是表格本身最原始的一 些属性集合 针对表格在不同场景下的状况 在扩展设计中会一一罗列出来 设计意图 合理有效的组织数据信息 帮助用户快速 有效的查看表格数据 帮助用户快速 准确的完成对表格的操作 应用条件 适用于批量数据的展示和维护 模式描述 组成 表格标题 表格表头 表格行间隔线 表格行 如下图所示 图 4 1 基础表格 应用规范 IT 应用服务产品界面交互规范 界面组件级规范 11 表格的标题 标题文字要与其它文字有所区别 如 加粗显示 标题文字内容以 内容 操作 的形式描述 标题文字前需要有相应的标题图标 文字与图标之 间间隔一定的距离 如 一个半角空格 具体视觉效果参见 界面视觉规范 表格的表头与表格主体在外观上要有区分 表格行间隔线 表格的主体内容用表格线区分 表格线的粗细要适中 如 1px 扩展描述 根据应用场景的不同 可以对基础表格进行扩展 可以为表格增加数据筛选区 命令 按钮区 操作按钮区 表格主体区 翻页区 操作按钮区 整体效果如下图所示 图 4 2 表格操作区分布 1 标题列排序 表格列标题可以排序时 表格的列标题要体现出当前排序状态 并要区分于其他 列标题显示 如 背景和图标高亮显示 如下图所示 IT 应用服务产品界面交互规范 界面组件级规范 12 图 4 3 标题列排序 表格列标题进行切换时 原列标题恢复初始状态 切换到的列标题显示为排序状 态 2 表格行选中操作 表格中的第一列 既可表示对行的选择如复选框 同时还可以用图标标示数据状 态 当两者都有时 显示复选框在上 图标被覆盖 在对表格行进行选中 点选行的任意位置即可选中 时 此行要高亮显示 同时 此行前复选框为选中状态 同时还可以进行多行选择 需要全选时 只需勾选列 标题中的复选框即可选中当前列表的全部行数据 3 数据筛选区 当数据内容可以明确的按其状态 类别进行划分时 可以应用页签的形式来进 行设计 页签总宽度在表格宽度的 75 之内为佳 超出此范围时 需应用其他设计形式 如下拉框显示的形式等 如下图所示 图 4 4 数据筛选区 当前分类状态的的页签要高亮显示 要明显区别于其他页签 页签内的文字 需要简单明了 相同内容的文字省略 如上图中未处理 订单 处理中 订单 处理完成 订单 应用页签设计时 页签类别要划分明确合理 如按照数据状态或分类进行划分 4 命令按钮区 针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内 如 导入 导出 新增等 按钮的其它细则参见 界面视觉规范 5 操作按钮区 对表格主体的数据进行操作的按钮放置在此区域 如 删除 发布 下架 上 架 审核等 IT 应用服务产品界面交互规范 界面组件级规范 13 当列表的数据超过一屏显示时 在列表上方也要显现操作按钮区 方便用户对 列表进行操作 如下图所示 图 4 5 操作按钮区 按钮的其它细则参见 界面视觉规范 6 翻页区 当列表中的数据量超过默认的数据显示条数时 应用翻页模式来处理多条数据 的显示 翻页在列表下方居中显示 翻页的详细功能和模式参见 翻页模式组件规范 7 单条数据操作区 对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分 具体参见 界面视觉规范 尽量不要在此处安排太多的操作 太多的操作给使用者过多的判断负担 应考 虑其他的界面布局方式 8 表格列标题区 当表格的数据列较多 屏幕显示已经达到最大限度 而这些数据列又必不可少 时 允许通过鼠标拖动的方式来对数据列的宽度进行改变 同时可以使用横向 滚动条 调整列宽度时 要在整体表格边线内进行 以免整体页面变形 数据项内容显示部分太长时 省略多余部分并加省略号 鼠标指针停靠时 全部 IT 应用服务产品界面交互规范 界面组件级规范 14 详细内容显示 9 数据条目设置区 默认显示当前页面所能显示的最大数据条目数 如 10 条 页 还要提供几个数值选项 供用户选择 如 20 30 50 IT 应用服务产品界面交互规范 界面组件级规范 15 4 2 单元格数据 4 2 1 单元格数据展示 以单元格为单位的数据展示是指应用表格的单元格来描述每个数据对象的展示形 式 设计意图 让用户更加清晰的浏览信息 方便查看选中单元格的信息 应用条件 适用于多数据的查看 浏览和操作 例如 如短信中的收信人 邮件中的收件人等 模式描述 组成 如下图所示 图 4 6 单元格数据展示 应用规范 鼠标经过或选中此类表格的单元格时 行或列的背景色高亮显示 此类单元格请支持按 Shift 键进行连续选定 整行整列选定时要有箭头图 标反馈给用户 此类单元格请支持按 Ctrl 键进行间断选定 注意事项 数据类表格是指表格所描述内容是由多个数据或一组对象 每个对象至少包 含两个数据项 组成 对于展示某些信息的表格不属于数据类表格 IT 应用服务产品界面交互规范 界面组件级规范 16 4 2 2通讯录 通讯录是以单元格数据展示形式为基础的 集添加删除修改等功能于一体的组件 设计意图 用户不会再输入通讯录信息之间分隔符 更不会出现由于分隔符输入不正确而导 致的错误操作 为用户显示人名 而不显示地址 方便了查看 同时增加了自动匹配 查找 将 新信息增加到通讯录和导出通讯录的功能 应用条件 适用于需要用户多次填写同类信息的地方 如 竞价通中的 关键词管理 日期格式中年份的展现方式 邮件 短信产品的收信 人列表 模式描述 组成 如下图所示 图 4 7 通讯录 1 应用规范 a 通讯录中无此信息的高亮反馈 通讯录中存在姓名时表格内只显示姓名 通讯录中没有姓名只有手机号码 或 email 地址 时则显示号码 或 email 地址 姓名 手机号码 或 email 地址 两者都无的单元格自动高亮反馈给 用户 b 默认显示 默认显示表格的一个空行 如下图所示 IT 应用服务产品界面交互规范 界面组件级规范 17 图 4 8 通讯录 2 整行单元格数据被填满时 表格自动增加一行 如下图所示 图 4 9 通讯录 3 增加至 3 行时 出现滚动条 如下图 图 4 10 通讯录 4 c 自动匹配 支持手动输入 可以输入人名或地址 输入地址时自动匹配通讯录中对应的人 名 d 快捷操作 为高级用户提供快捷操作 输入新人名或新地址时 可以将其添加到通讯录 如下图 图 4 11 通讯录 5 注意事项 使用时遇到两个人同名时可以采用 姓名 号码 的方式显示 IT 应用服务产品界面交互规范 界面组件级规范 18 4 3 信息列表 信息列表是显示单列信息集合的一种视图展示 设计意图 利于信息的展示 方便使用者检索信息 快速定位信息条目 应用条件 单列信息集合 索引类的信息列表 例如 信息列表多应用于索引类的信息列表 如 新闻列表 目录等 模式描述 组成 项目符号 列表行 如下图所示 图 4 12 信息列表 应用规范 项目符号可以是固定的符号 也可以是具有意义的图标 项目符号如果是图标 图标必须与应用场景相符 尽量不使用无意义的仅 为装饰作用的视觉效果显著的图标作为项目符号 列表行的内容 可以为文字和图标 文字一般为简单的标题 列表行的文字内容应该简单易懂 能够明确的反应所要说明的信息 列表行内容如果折行 行距必须小于两个记录行之间的段距 由于信息列表多为展示信息的条目 因此信息列表的行间距要有一点留白 不要给使用者造成视觉上的负担 IT 应用服务产品界面交互规范 界面组件级规范 19 扩展描述 组成 列表标题 单选按钮 多选按钮 分隔线 翻页 如下图所示 图 4 13 信息列表 2 应用规范 列表标题是对列表中的信息内容的概括性标题 标题的写法请参见 标题 控件的描述 单选按钮 多选按钮在需要时替换项目符号的位置 分隔线 在记录行太多时需要提供分隔线 请参见 分隔线 控件中的相 关描述 翻页 请参见 翻页 组件中的相关描述 IT 应用服务产品界面交互规范 界面组件级规范 20 4 4 编号和序号 4 4 1编号 用来标识某一个对象的唯一号码 一个编号就代表着一个对象 使用编号能够更 好的帮助用户记忆和或管理对象 如下图所示 图 4 14 编号示例 设计意图 更好的方便用户记忆和管理对象 合理的使用编号 能方便用户更好的进行沟通 应用条件 需要用唯一号码来标识对象时 具有真实 合理 有效的意义 例如 订单列表中订单的编号 酒店客房管理中客房的实际编号等等 模式描述 应用规范 编号必需代表一个对象 不要让编号无意义的存在 如果用户更关注编号 也就是说编号对于用户是第一位的 则必须提供 编号 比如 酒店系统中对房号的关注就比人名要重要 所以编号的视 觉层次应该突出 如果用户不常使用编号而通常更关注别的属性 比如 人名 物品名等 可以默认不显示编号 当用户需要时能够查到编号 IT 应用服务产品界面交互规范 界面组件级规范 21 4 4 2序号 序号是用来标识一组有序对象的数字 它具有先后顺序的含义 如下图所示 图 4 15 序号示例 设计意图 使用户更好了解对象的先后顺序或按一定的顺序去了解对象 更好的展示有先后顺序的数据 应用条件 需要标识一组有序对象时 例如 如歌曲排行旁 热销商品排行 点击率排行等设计中 模式描述 应用规范 序号必需代表一个对象在集体中的序列 不要让序号没有意义 如果用户关注对象的排列顺序 则必须提供序号 如果用户根本不关注 对象的顺序 请不要使用序号 这样会混淆用户的注意 IT 应用服务产品界面交互规范 界面组件级规范 22 图 4 16 错误示例 IT 应用服务产品界面交互规范 界面组件级规范 23 4 5 注册表单 注册表单应用于对用户的输入格式有一定的要求的设计中 帮助用户更好的完成填写表 单的操作 设计意图 快速高效的帮助用户完成注册 尽量减少用户犯错 在用户出错后 友好的有效的告知错误 并提供解决方案 给用户提供及时有效的反馈信息 应用条件 超过 5 项表单信息填写修改时 用户出错的频率较高时 系统对数据的要求比较严格时 例如 应用于填写注册信息 修改密码等设计中 模式描述 组成 各输入控件 必填项指示 格式要求提示 对错判断反馈 提交按钮 如下图所示 IT 应用服务产品界面交互规范 界面组件级规范 24 图 4 17 注册表单 应用规范 表单的设计应该遵循简洁的设计原则 在注册填写时 尽可能的只提供必须填写的选 项给用户 其他非必填项 可以通过选填或者在日后需要时再进行完善的方式来完成 a 信息输入对错判断 信息输入正确时 要给与填写正确的反馈 信息输入错误的时候 要给出错误的反馈 并给出具体的错误原因要高亮反馈 同时注释语位置整体给出反馈提示 如下图所示 IT 应用服务产品界面交互规范 界面组件级规范 25 图 4 18 信息输入对错判断 用户在输入错误时 要针对不同的输入内容给出相应明确的错误提示 必要的时候 要提出简要的解决方法提示 例如 在用户名填写时 可能出现的错误提示 您输入的用户名过短 您输入的用户名中不能包含字符 已经添加过的数据和信息要给出明确的提示 避免用户重复多次添加 当 添加的内容重复时 要给出提示 如下图所示 图 4 90 添加行 选择到需要的文件确定关闭层以后 所选的文件被读取回 并罗列显示在 页面中 如下图所示 图 4 91 删除文件 当读取回的文件路径过长时 要使用 但要保持路径的前后半段清晰显 示 中间部分用 代替 如 D MyPortal 数商运营系统 images dabas gif 文件名要显示完整 选择的文件还可以进行删除操作 选中后点击删除按钮即可 如下图所示 IT 应用服务产品界面交互规范 界面组件级规范 72 图 4 92 插入文件 当选择的文件数量超过约束范围 系统给出提示 对不起 您选择的文件 数量超出 不能完成添加 根据具体产品的功能要求 如果允许从本地浏览上传多个文件 同时并保 存到库文件中时 可以在弹出层中添加 从本机上传 的链接入口 注意事项 文件批量从左侧初选到右侧 文件本身仍然存在 选定的文件被读回显示后 如果有个文件不符合要求可以被删除 但仅仅 是取消选择 并不是真正意义上的删除数据 IT 应用服务产品界面交互规范 界面组件级规范 73 4 18 3 添加行 添加行应用于添加维护的数据项和数据量相对有限的设计中 如 订单包装维护 配 送地区维护等 采用整行添加的方式 减少页面的跳转 更加直观 模式描述 组成 原数据列表 添加的行 效果如下图所示 图 4 93 添加行 应用规范 每个数据项的约束 要根据输入的数据进行判断和提示 一般不显示在页 面中 默认显示一条数据添加行 正确添加内容后 点 确定 数据被保存 点击 编辑 该数据行切换为编辑状态 如果数据添加行中存在没有保存 的信息时 系统必须给出提示 如 当前添加的信息是否要保存 选 是 则保存数据再继续对所选数据行进行编辑修改操作 选 否 则不保存数 据再继续对所选数据行进行编辑修改操作 编辑效果如下图所示 图 4 94 编辑数据 无论添加还是编辑 始终保持对一条数据进行操作 其他情况下都要给出相应 变更提示 如 当前的添加的信息是否要保存 参见 提示语规范 4 19排序 主要应用于分类或者多条数据内容的顺序排列的设计中 通过点击排序图标 置顶 置底 向上 向下 和拖动排序两种方式共存的方法满足不同用户的操作习惯和需求 添 加文件列表 IT 应用服务产品界面交互规范 界面组件级规范 74 设计意图 让用户简单 直观 快速的达到排序目的 增加用户参与互动的娱乐性 满足不同用户的操作习惯 应用条件 数据或分类属于同一级别 数据或分类的顺序可以由用户自行设定时 例如 适用于商品类别 资讯类别 下载等相关业务的类别和内容的排序操作中 模式描述 组成 类别名称 排序图标 鼠标拖动 效果如下图所示 图 4 95 排序 应用规范 默认排序图标不可用 不可用状态 参见 界面视觉规范 如下图所示 图 4 96 排序图标 IT 应用服务产品界面交互规范 界面组件级规范 75 只有当鼠标选中某一个分类或内容时 排序图标才被激活 处于可操作状态 同时出现提示 鼠标拖动排序 如下图所示 图 4 97 拖动排序 鼠标经过数据行时 鼠标变为可移动的十字箭头形状 鼠标选中某一分类后 拖动分类进行排序 此时会有一条基准线出现 它所在 的位置 就是分类要拖放到的目标位置 此时所选分类的背景变为半透明半模 糊状 释放鼠标后 此分类的顺序被成功变更 如下图所示 图 4 98 选取某一分类后 还可以通过连续点击右侧的排序箭头图标进行排序操作 对 于头尾两个分类不存在置顶 置底操作时 相应图标也要进行置灰操作 鼠标经过图标时要有提示 置顶 向上 向下 置底 如下图所示 IT 应用服务产品界面交互规范 界面组件级规范 76 图 4 99 当分类或者信息条目过多时 超出一屏显示时 排序箭头则需要跟随所选排序 内容进行上下浮动显示