界面交互设计规范
—— IT应用服务产品界面组件级交互规范
V1.0
1
IT应用服务产品界面交互规范——界面组件级规范
目录
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
2
IT应用服务产品界面交互规范——界面组件级规范
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
3
IT应用服务产品界面交互规范——界面组件级规范
修订记录
修订人 日期 版本 修订内容 4
IT应用服务产品界面交互规范——界面组件级规范
1 概述
《界面交互设计规范》对用户与产品交互的各个方面做了相关的描述。该规范由“组件级”、“流程级”和“系统级”三个部分构成，分别从不同的层面，为IT应用服务产品的用户界面提供规范与指导。
规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。
本规范是界面交互设计规范三个部分中的基础层面：组件级规范。该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。
1.1 规范的目的
在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利
有效地进行，以保证产品界面的最终规范化实现；
从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担，改善产品的用户体验，提升产品的市场竞争力；
使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。
1.2 规范适用的范围
集团内的所有产品。
1.3 规范适用的人群
参与产品设计的所有人员以及测试人员等。
注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。
规范演示网址：http://105pattern.105shop2.ce.net.cn:7102
5
IT应用服务产品界面交互规范——界面组件级规范
2 基本原则
以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。
2.1 一致性
视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视
觉上应该保持一致；否则，界面外观要予以区分；
操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别；
外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；视觉元素的外观及其操作结果，必须与用户的心理认知相符。
2.2 简洁性
减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息；
简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆； 操作简单：减少冗余的操作步骤。
2.3 避免干扰和打断
避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪声和其它干扰。
避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）打断用户的工作。
2.4 减轻用户记忆负担
认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要及时准确；
系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索取信息；
合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，为用户的任务提供直观易用的界面；
有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说明自身可以如何使用的外观属性）。
2.5 及时有效的反馈
6
IT应用服务产品界面交互规范——界面组件级规范
操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事； 受范性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果； 系统状态反馈：系统需要用户等待或系统出现错误时，要及时让用户明白现状； 选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声音、触觉、语言、视觉反馈或是它们的组合）。
2.6 让用户放松心态，不怕犯错
允许轻松的反向操作：在适当的时候，尽量提供撤销功能，使用户可以返回到上一步操作并重新进行选择；
让用户可以重新开始：提供“恢复初始设置”选项，让用户敢于尝试；
避免输入错误：使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表性的默认选项，以及相应的输入帮助，来方便用户准确输入信息；
提供校验等功能：对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错误；
避免埋怨：当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所在，并提供有用的恢复建议。
7
IT应用服务产品界面交互规范——界面组件级规范
3 产品交互通用规范
以下为IT应用服务产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。（此部分规范将随着组件模式的不断扩充，进行逐步添加和完善。）
3.1 受范性指示
受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。
对象对鼠标指针移动的响应必须即时有效；
响应形式必须明确清晰（如：鼠标移过按钮，按钮有被按下的效果）；
受范性表现必须保持高度的一致：同等功能和操作的元素受范性必须相同（如：鼠标指向链接文字时都做同样的变化）； 在鼠标指针移开时对象必须即时恢复原来状态；
命令按钮也经常被显示为链接样式（文本+下划线），此时为了与普通的链接相区分，必须提供非常明显的不同于链接的受范性指示。
注：具体受范性指示的效果参见视觉规范。
3.2 操作不可用状态
当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳定，使用户保持恒定和完整的思维模式，减少用户的认知负担。
显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形态保持一致，仅色彩、灰度和立体效果等发生变化。 操作不可用的情况主要包括：
菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：
8
IT应用服务产品界面交互规范——界面组件级规范
图 3-1菜单操作不可用
工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图 3-2 工具按钮不可用
当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：
图 3-3操作命令不可用
注：具体不可用状态效果见视觉规范。
9
IT应用服务产品界面交互规范——界面组件级规范
4 组件规范
4.1 表格
主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。 【设计意图】
✓ 合理有效的组织数据信息；
✓ 帮助用户快速、有效的查看表格数据； ✓ 帮助用户快速、准确的完成对表格的操作；
【应用条件】
适用于批量数据的展示和维护； 【模式描述】
组成： 表格标题 + 表格表头+ 表格行间隔线 + 表格行 如下图所示：
图 4-1 基础表格
应用规范：
10
IT应用服务产品界面交互规范——界面组件级规范
表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以
“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：一个半角空格；具体视觉效果参见《界面视觉规范》。 表格的表头与表格主体在外观上要有区分；
表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。
【扩展描述】
根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：
图 4-2 表格操作区分布
1）标题列排序：
表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他列标题显示，如：背景和图标高亮显示； 如下图所示：
11
IT应用服务产品界面交互规范——界面组件级规范
图 4-3 标题列排序
表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状
态； 2）表格行选中操作：
表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状
态；当两者都有时，显示复选框在上，图标被覆盖； 在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时
此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列标题中的复选框即可选中当前列表的全部行数据。
3）数据筛选区：
当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行
设计； 页签总宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如
下拉框显示的形式等； 如下图所示：
图 4-4 数据筛选区
当前分类状态的的页签要高亮显示，要明显区别于其他页签；
页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、
处理中（订单）、处理完成（订单）； 应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。 4）命令按钮区：
针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导入、导出、新增等； 按钮的其它细则参见《界面视觉规范》。 5）操作按钮区：
对表格主体的数据进行操作的按钮放置在此区域。如：删除、发布、下架、上架、
审核等； 当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列
12
IT应用服务产品界面交互规范——界面组件级规范
表进行操作；如下图所示：
图 4-5 操作按钮区
按钮的其它细则参见《界面视觉规范》。 6）翻页区：
当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的
显示； 翻页在列表下方居中显示；
翻页的详细功能和模式参见“翻页模式组件规范”。 7）单条数据操作区：
对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；具体参见
《界面视觉规范》； 尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑其他的界面布局方式。 8）表格列标题区：
当表格的数据列较多，屏幕显示已经达到最大限度，而这些数据列又必不可少时，
允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动条； 调整列宽度时，要在整体表格边线内进行，以免整体页面变形；
数据项内容显示部分太长时，省略多余部分并加省略号；鼠标指针停靠时，全部
详细内容显示；
13
IT应用服务产品界面交互规范——界面组件级规范
9）数据条目设置区：
默认显示当前页面所能显示的最大数据条目数；如：10条/页； 还要提供几个数值选项，供用户选择；如：20、30、50；
【效果演示】
查看动画 查看HTML 14
IT应用服务产品界面交互规范——界面组件级规范
4.2 单元格数据
4.2.1 单元格数据展示
以单元格为单位的数据展示是指应用表格的单元格来描述每个数据对象的展示形式。 【设计意图】
✓ 让用户更加清晰的浏览信息； ✓ 方便查看选中单元格的信息。
【应用条件】
适用于多数据的查看、浏览和操作；
例如：如短信中的收信人、邮件中的收件人等。
【模式描述】
组成：如下图所示：
图 4-6 单元格数据展示
应用规范：
鼠标经过或选中此类表格的单元格时，行或列的背景色高亮显示。 此类单元格请支持按“Shift”键进行连续选定，整行整列选定时要有箭头图
标反馈给用户。
此类单元格请支持按“Ctrl”键进行间断选定。 注意事项：
数据类表格是指表格所描述内容是由多个数据或一组对象（每个对象至少包含两个数据项）组成，对于展示某些信息的表格不属于数据类表格。 【扩展描述】
无 【效果演示】
15
IT应用服务产品界面交互规范——界面组件级规范
无
16
IT应用服务产品界面交互规范——界面组件级规范
4.2.2 通讯录
通讯录是以单元格数据展示形式为基础的，集添加删除修改等功能于一体的组件。 【设计意图】
✓ 用户不会再输入通讯录信息之间分隔符，更不会出现由于分隔符输入不正确而导致
的错误操作； ✓ 为用户显示人名，而不显示地址，方便了查看，同时增加了自动匹配，查找，将新
信息增加到通讯录和导出通讯录的功能。 【应用条件】
✓ 适用于需要用户多次填写同类信息的地方。
如：竞价通中的“关键词管理”；日期格式中年份的展现方式；邮件、短信产品的收信人列表。 【模式描述】
组成： 如下图所示：
图 4-7 通讯录1
应用规范：
a）通讯录中无此信息的高亮反馈
通讯录中存在姓名时表格内只显示姓名；
通讯录中没有姓名只有手机号码（或email地址）时则显示号码（或
email地址）；
姓名、手机号码（或email地址）两者都无的单元格自动高亮反馈给
用户。
b）默认显示
默认显示表格的一个空行；如下图所示：
17
IT应用服务产品界面交互规范——界面组件级规范
图 4-8 通讯录2
整行单元格数据被填满时，表格自动增加一行；如下图所示：
图 4-9 通讯录3
增加至3行时，出现滚动条；如下图：
图 4-10 通讯录4
c）自动匹配
支持手动输入，可以输入人名或地址；输入地址时自动匹配通讯录中对应的人名；
d）快捷操作
为高级用户提供快捷操作,输入新人名或新地址时，可以将其添加到通讯录。如下图：
图 4-11通讯录5
注意事项：
使用时遇到两个人同名时可以采用“姓名（号码）”的方式显示。
18
IT应用服务产品界面交互规范——界面组件级规范
【扩展描述】
无 【效果演示】
查看动画 查看HTML 19
IT应用服务产品界面交互规范——界面组件级规范
4.3 信息列表
信息列表是显示单列信息集合的一种视图展示。 【设计意图】
✓ 利于信息的展示，方便使用者检索信息； ✓ 快速定位信息条目。 【应用条件】
✓ 单列信息集合； ✓ 索引类的信息列表；
例如：信息列表多应用于索引类的信息列表，如：新闻列表、目录等。 【模式描述】
组成：项目符号、列表行，如下图所示：
图 4-12 信息列表
应用规范：
项目符号可以是固定的符号，也可以是具有意义的图标；
项目符号如果是图标，图标必须与应用场景相符，尽量不使用无意义的仅为装饰作用的视觉效果显著的图标作为项目符号；
列表行的内容，可以为文字和图标，文字一般为简单的标题； 列表行的文字内容应该简单易懂，能够明确的反应所要说明的信息。 列表行内容如果折行，行距必须小于两个记录行之间的段距；
由于信息列表多为展示信息的条目，因此信息列表的行间距要有一点留白，不要给使用者造成视觉上的负担。
20
IT应用服务产品界面交互规范——界面组件级规范
【扩展描述】
组成：列表标题、单选按钮、多选按钮、分隔线、翻页，如下图所示：
图 4-13 信息列表 2
应用规范：
列表标题是对列表中的信息内容的概括性标题（标题的写法请参见“标题”控件的描述）； 单选按钮，多选按钮在需要时替换项目符号的位置；
分隔线：在记录行太多时需要提供分隔线（请参见“分隔线”控件中的相关描述）； 翻页（请参见“翻页”组件中的相关描述）。
【效果演示】
21
IT应用服务产品界面交互规范——界面组件级规范
无
22
IT应用服务产品界面交互规范——界面组件级规范
4.4 编号和序号
4.4.1 编号
用来标识某一个对象的唯一号码。一个编号就代表着一个对象。 使用编号能够更
好的帮助用户记忆和或管理对象。如下图所示：
图 4-14 编号示例
【设计意图】
✓ 更好的方便用户记忆和管理对象；
✓ 合理的使用编号，能方便用户更好的进行沟通； 【应用条件】
✓ 需要用唯一号码来标识对象时； ✓ 具有真实、合理、有效的意义；
例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等； 【模式描述】
应用规范：
编号必需代表一个对象，不要让编号无意义的存在；
如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供
编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视觉层次应该突出。如果用户不常使用编号而通常更关注别的属性；比如人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。
【扩展描述】
无 【效果演示】
23
IT应用服务产品界面交互规范——界面组件级规范
无
24
IT应用服务产品界面交互规范——界面组件级规范
4.4.2 序号
序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示：
图 4-15 序号示例
【设计意图】
✓ 使用户更好了解对象的先后顺序或按一定的顺序去了解对象； ✓ 更好的展示有先后顺序的数据； 【应用条件】
✓ 需要标识一组有序对象时；
例如：如歌曲排行旁、热销商品排行、点击率排行等设计中； 【模式描述】
应用规范：
序号必需代表一个对象在集体中的序列，不要让序号没有意义。 如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注
对象的顺序，请不要使用序号，这样会混淆用户的注意。
25
IT应用服务产品界面交互规范——界面组件级规范
图 4-16 错误示例
【扩展描述】
无 【效果演示】
无
26
IT应用服务产品界面交互规范——界面组件级规范
4.5 注册表单
注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表单的操作。 【设计意图】
✓ 快速高效的帮助用户完成注册； ✓ 尽量减少用户犯错；
✓ 在用户出错后，友好的有效的告知错误，并提供解决方案； ✓ 给用户提供及时有效的反馈信息。
【应用条件】
✓ 超过5项表单信息填写修改时； ✓ 用户出错的频率较高时； ✓ 系统对数据的要求比较严格时； 例如：应用于填写注册信息、修改密码等设计中。 【模式描述】
组成：各输入控件 + 必填项指示 + 格式要求提示 + 对错判断反馈 + 提交按钮
如下图所示：
27
IT应用服务产品界面交互规范——界面组件级规范
图 4-17 注册表单
应用规范：
表单的设计应该遵循简洁的设计原则。在注册填写时，尽可能的只提供必须填写的选项给用户，其他非必填项，可以通过选填或者在日后需要时再进行完善的方式来完成。
a) 信息输入对错判断：
信息输入正确时，要给与填写正确的反馈；信息输入错误的时候，要给出错误的反馈，并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示：
28
IT应用服务产品界面交互规范——界面组件级规范
图 4-18 信息输入对错判断
用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要提出简要的解决方法提示。
例如：在用户名填写时，可能出现的错误提示；
您输入的用户名过短！
您输入的用户名中不能包含字符“&（等等）”！ 你输入的用户名“xxx”已经被占用,请重新输入！ b) 输入格式约定（注释文本）：
当用户需要输入某一项时，相应注释文本才显示出来；
对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填写的必要性，如下图所示：
图 4-19
3) 验证码：
验证码中的图示字母是随机产生的，但要注意尽可能避免显示一些不易区分的字母和数字，让用户难以辨别（如：“0和o”），如下图所示：
图 4-20 验证码
29
IT应用服务产品界面交互规范——界面组件级规范
验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳；
验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点击链接文字（看不清，换一张）来更换验证码，如下图所示：
图 4-21验证码示例
用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示），如下图所示：
图 4-22验证码错误判断
4) 提交按钮：
存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由置灰状态变为可用状态，如下图所示：
图 4-23 注册按钮
5) 成功告知
表单最终填写提交完成后，要给出“提交成功或注册成功”的相关提示，明确告知用户此操作正确完成；
30
IT应用服务产品界面交互规范——界面组件级规范
6) 协议
单击“我接受”意味着：您同意并接受服务协议和隐私声明。 【扩展描述】
应用规范： 1) 密码强弱提示
当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。 如下图所示：
图 4-24密码强弱
在输入密码时，旁边显示注释文本：明确注明密码强弱的规则和提示，如下图所示：
图 4-25 密码强弱提示
当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给出正确的解决方法，如下图所示：
图 4-26 密码强弱提示对照表
31
IT应用服务产品界面交互规范——界面组件级规范
2) 注册进度提示
根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的进度条提示，明确的告知当前注册的进度。 3) 分组线
注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用参见“分组线规则”）。 【注意事项】
✓ 例如婚介交友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。 ✓ 如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必
须使用行的背景颜色来区分必填项与非必填项。 【效果演示】 查看HTML 32
IT应用服务产品界面交互规范——界面组件级规范
4.6 联系方式
联系方式是对表单中提供给用户填写详细联系方式一种组件规定。 【设计意图】
✓ 帮助用户有效、快速的填写联系方式； ✓ 减少用户输入错误的几率。 【应用条件】
✓ 需要用户填写详细联系方式时。 例如：网上注册，网上购物填写发货地址。 【模式描述】
组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、
“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。
图 4-27 联系方式
应用规范：
“国家地区”、“省份”和“城市”要有连动关系；
“国家地区”：下拉列表选框；
“省份”：下拉列表选框，与选择的国家连动（选择“国家地区”，“省份”下
拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京”，则后面的“城市”不用再选，自动置灰；
“城市”：下拉列表选框，与选择的城市连动（选择“省份”，“城市”下拉框中选项相应变化）。城市下拉列表选项的最后一项为“其他地区”，如下图所示：
33
IT应用服务产品界面交互规范——界面组件级规范
图 4-28 其他地区
“联系电话”、“传真号码”和“手机号码”必须拆分成几个字段；
“联系电话”：四个输入框字段，分别为：国家代码（可选）—区号—电话号
码—分机号；
“传真号码”：三个输入框字段，分别为：国家代码（可选）—区号—传真电话；
“手机号码”：两个输入框字段，分别为：国家代码（可选）—手机号； “国家代码”此项可根据具体产品的销售人群不同自行选择是否保留； 如下图所示：
图 4-29正确示例图
34
IT应用服务产品界面交互规范——界面组件级规范
图 4-30错误示例图
各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省
份”、“城市”选择后，国家代码和区号自动显示，如下图所示：
图 4-31 联系方式标注
“联系地址”：一个输入框，等待用户输入文本；
“邮政编码”：一个输入框（6个字符），等待用户输入文本；
除“国家地区”、“省份”和“城市”是只能让用户选择外，其他的输入框均可手动输入和编辑，用户可以根据自己的需要进行修改。
【扩展描述】
组成：邮政编码帮助 如下图所示：
35
IT应用服务产品界面交互规范——界面组件级规范
图 4-32 邮政编码
应用规范：
用户手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编
码的关联提示，供用户参考， 用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打
开新窗口查看本市的邮政编码。
图 4-33 查询邮政编码
【注意事项】
✓ 各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用
户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在键盘上频繁切换输入位置）； ✓ 系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的和准确的数据； ✓ 用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不
清空）。 【效果演示】
查看动画 查看HTML 36
IT应用服务产品界面交互规范——界面组件级规范
4.7 图片裁切
4.7.1 固定尺寸
主要应用于需要用户上传固定图片尺寸的设计中，在上传时提供简单裁切的功能。上传后可以让用户得到比较理想的图片效果。
【设计意图】
✓ 可以进行简单图片裁切处理，而不需要使用其它的图片处理软件 ✓ 快捷方便的裁切出用户想要的图片； 【应用条件】
✓ 上传的图片固定尺寸时；
✓ 系统对图片大小的约束严格，在200k以内时； 例如：上传用户头像、产品图片、信息图片等 【模式描述】
组成： 预览区 + 裁切框 + 放大缩小提示标 + 滑杆 + 图片上传区域 + 清空按钮 + 数据约束 如下图所示：
图 4-34 固定尺寸图片裁切
应用规范：
滑杆、缩放图标、清空按钮默认处于不可用状态； 浏览上传图片后，滑杆、缩放图标、清空按钮高亮显示； 浏览上传一张图片后，图片全部显示在预览区内；
37
IT应用服务产品界面交互规范——界面组件级规范
当上传的图片尺寸小于裁切区尺寸时，系统自动按照裁切区的尺寸成比例的放大
图片后显示在裁切区内； 鼠标向左拖动滑块缩小图片，当图片缩小到即将小于裁切区尺寸时，图片将停止
缩小； 鼠标向右拖动滑块放大图片，当图片缩放到原尺寸的1.5倍时，停止放大，此时
图标状态要相应转变为不可用状态； 点击放大或缩小图标，预览区中的图片相应放大缩小，直至无法缩小或放大，此
时图标状态要相应转变为不可用状态； 图片裁切区的尺寸与上传后的大小尺寸相一致；
图片裁切区的尺寸可以根据具体产品的需要，设定固定尺寸；
鼠标可以在预览区内任意移动裁切区的位置，但图片必须填充整个裁切区，不能
为空，或部分为空； 鼠标指针在裁切区内时要变为移动指针形状；
当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错
误！请重新上传！或您上传的图片大小超过200k！请重新上传！。
【扩展描述】 无 【效果演示】
无
38
IT应用服务产品界面交互规范——界面组件级规范
4.7.2 自定义尺寸
应用于用户上传一些日常的没有特殊的图片设计中，在上传时提供简单方便快捷裁切的功能，上传后可以让用户很快地得到比较理想的图片效果。 【设计意图】
✓ 减少用户的工作量和学习时间，并充分考虑到使用者的电脑水平，通过简单的图片裁
切处理，用户将不需要打开其他的图片处理软件； ✓ 快捷方便的裁切处理出用户想要的图片； 【应用条件】
✓ 用户可以自定义上传或插入的图片尺寸时； ✓ 系统对图片大小的约束比较宽泛，在1M以内时； 例如：应用于上传照片、文档中插入图片等设计中； 【模式描述】
组成：图片上传区域 + 图片裁切区域 + 操作按钮 如下图所示：
图 4-35 图片上传
39
IT应用服务产品界面交互规范——界面组件级规范
图 4-36 自定义尺寸图片裁切
应用规范：
浏览上传一张图片后，图片全部显示在预览区内；图片较大时根据窗口尺寸自动
成比例压缩适应窗口大小； 默认裁切框最大化显示在预览区内；同时鼠标经过裁切框有明确的指针反馈； 裁切框的上下左右均可以随意拖拽裁切；
图片裁切区的尺寸可以根据用户的需要，随意拖动裁切； 图片裁切区的尺寸大小就是最终图片上传后的实际尺寸大小；
鼠标可以在窗口内任意拖拽裁切框的位置，但不能超出图片自身显示区； 当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错
误！请重新上传！或您上传的图片大小超过1M！请重新上传！； 图片的最大尺寸，可以根据具体的产品需要来设定。
【扩展描述】 无 【效果演示】
40
IT应用服务产品界面交互规范——界面组件级规范
查看动画 41
IT应用服务产品界面交互规范——界面组件级规范
4.8 翻页
翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展示。翻页可以拆分为以下几部分：基础页码、上下页、首末页、跳转、Ajax 拖动条、数据统计；根据不同的应用场景，可以选择某一部分或几部分组合起来使用。如下图所示：
图 4-37 翻页
【设计意图】
✓ 满足用户在不同场景下的不同需要； ✓ 增加操作的易用性； 【应用条件】
✓ 列表数据条目较多时； ✓ 文章篇幅较长时； 【模式描述】
组成：页码 如下图所示：
图 4-38页码
应用规范：
页码少于或等于10页时，只显示应该出现的页码数；
鼠标指针经过和按下某个页码区域（此区域高亮反馈），鼠标弹起后页面切换完
成； 当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接； 已访问过的页码和未访问过的页码要有所区分；
显示当前页码的前4页和后4页；前９页和最后９页除外，默认全部显示； 设计时，页码的可点区域要相对较大，方便点击；如下图所示
图 4-39状态标注
【扩展描述】
42
IT应用服务产品界面交互规范——界面组件级规范
1) 上下页
组成：三角符号，“”作为上一页，以“”作为下一页；如下图所示：
图 4-40 上下页状态
应用规范：
列表的页数在11页以上时，要提供“”和“”的链接，
“上一页”和“下一页”在不可点击时变为不可用状态；具体不可用状态参见《界
面设计规范》 与其他元素保持适当的间隔距离；参见《界面视觉规范》
2) 首末页
组成：三角截止符号（“”首页截止图标，以“”末页截止图标）+ 文字（首页、末页），如下图所示：
图 4-41 首末页
应用规范：
列表的页数在50页以上时，要提供“首页”“末页(326)”的链接；
鼠标指针停靠到首页链接上，有明确的反馈提示，点击鼠标主键，页面切换到首
页，首页变为不可用状态； 鼠标指针停靠到末页链接上，有明确的反馈提示，点击鼠标主键，页面切换至最
后一页，末页变为不可用状态；如下图所示：
图 4-42 首末页状态标注
末页的链接上要注明最后一页的页码数；
与其他元素保持适当的间隔距离；参见《界面视觉规范》
3) 跳转
组成：文字（转到…页）+输入框+下拉图标+页码拖动条+确定按钮 如下图所示：
43
IT应用服务产品界面交互规范——界面组件级规范
图 4-43 跳转
应用规范：
页码超过50页时，显示跳转框；
鼠标指针移到跳转输入框上，输入框给出反馈，点击鼠标主键，光标被定位到输
入框中，此时进入可输入状态，输入目标页数，鼠标点击“确定”按钮或“回车键”，页面刷新后显示信息列表； 鼠标指针移到跳转输入框上，输入框给出反馈，点击输入框右侧的“三角”小标，下拉出现浮动层，显示出系统默认提供的部分页码，移动鼠标指针到某一页码上，被选定的页码给出高亮反馈，单击后页面刷新显示信息列表； 用户在输入框中输入数字以外的其它字符时，系统要给出错误提示；如：您输入
的字符错误，请输入数字！（具体提示内容参见“提示语规范”） 用户拖拽滑块移动时，输入框中的页码数值同步变化； 页码输入后可以通过“确定”按钮和“回车”键两种方式。 与其他元素保持适当的间隔距离；参见《界面视觉规范》
3) 数据统计
组成：统计提示文字 + 统计数值 + 数量单位
如：共7315条
应用规范：
页码超过11页时显示；
显示在“首页”位置之前，保持适当的间隔距离；参见《界面视觉规范》
【效果演示】 查看动画 44
IT应用服务产品界面交互规范——界面组件级规范
4.9 日期输入
4.9.1 通过日历选择日期
日历选择是使用日历选择控件进行日期输入。 【设计意图】
✓ 使用生活中最常见的日历形式，使得日期输入的形式更加直观； ✓ 日历选择形式能够使日期输入更加方便、快捷； ✓ 能够减少用户错误输入日期的几率； 【应用条件】
✓ 需要进行日期输入时；
✓ 年份跨度较小，在10年以内时；例如：2006年 ✓ 日期显示的一种形式； ✓ 需要进行日期区间选择时；
例如：应用于表单中时间的输入、统计查询等设计中； 【模式描述】
组成：输入框 + 日历的图示 + 日历显示层 如下图所示：
图 4-44 日历输入
应用规范：
1) 日历
日历中必须明确标示出当前系统日期；包括：年、月、日。 如下图所示：
45
IT应用服务产品界面交互规范——界面组件级规范
图 4-45 日历标注
年份和月份选择 如下图所示；
图 4-46 年份和月份选择
默认显示近10年的年份，前10后1；
从当年往上，滑动滚动条，查看到100个年份；往下，查看到10个年份； 点击日历中的月份12个月份全部显示在下拉层中； 当前年份、月份均要区分于其他高亮显示； 2) 日期输入
通过键盘输入日期；
当鼠标移至输入框内时，输入框中的内容被全部选中并高亮显示，鼠标移开后恢复；开始键盘输入时，默认内容将被清空； 如下图所示：
默认状态 鼠标在输入框内点击后 46
IT应用服务产品界面交互规范——界面组件级规范
输入日期后 通过日历选择输入日期；
点击日历图标后，输入框、图标及文字均高亮显示，给出用户明确的反馈；选定日期要高亮显示，同时区分于当前系统日期；如下图所示：
图 4-47 日历选择
3) 错误提示
只允许输入0-9这十个数字；只要用户输入数字，无论几位系统自动按照
“yyyy-mm-dd”的格式显示给用户；当月份和日期超出正常值时，系统给出提示；如“很抱歉！您输入的月份或日期过大，请重新输入！” 4) 显示某一时间点
要求显示当前系统默认时间 不要求显示当前系统默认时间 【扩展描述】
组成：时间段的文本提示 + 两个日期选择 如下图所示：
图 4-48 一段时间选择
应用规范：
时间段的文本提示“从…至…”；
47
IT应用服务产品界面交互规范——界面组件级规范
选定起始时间后，起始时间被回显到日期框内 ，同时截至日期日历框自动被
打开，不需要用户再次点击，即可选择日期；
【效果演示】 无
48
IT应用服务产品界面交互规范——界面组件级规范
4.9.2 年份跨度较大时的日期选择
应用于日期选择时的年份会出现跨度较大的设计中，方便快速的帮助用户正确完成时间格式的输入。适用于出生日期等方面。使得信息反馈及时明确，提示明显易懂，减少了误操作和重复操作的次数。
【设计意图】
✓ 方便用户快速定位年份、月份、日期； ✓ 减少用户出错的几率；
✓ 符合此类场景下用户的心里预期； 【应用条件】
✓ 年份的选择跨度较大，在10-90年之间时； 例如：适用于出生日期等设计中； 【模式描述】
组成：输入框 +下拉层 + 年月日的文本提示 整体效果如下图：
图 4-49 年份选择
应用规范： 1）手动输入
年月日的输入均可以通过键盘操作的方式输入，输入内容范围在0-9十个数字之内； 如下图所示：
未输入
49
IT应用服务产品界面交互规范——界面组件级规范
鼠标聚焦到输入框 输入后 2）选择输入
年月日的输入均可以通过鼠标点击出现列表选择的方式输入； 年的选择方式；如下图所示：
图 4-50 选择年份
默认只提供显示90个年份，当前所在年份不足10年时，未来年份默认置灰显示。
月的输入方式；如下图所示：
图 4-51 选择月份
日的输入方式；如下图所示：
50
IT应用服务产品界面交互规范——界面组件级规范
图 4-52 选择日期
【扩展描述】
无
【效果演示】
查看HTML
51
IT应用服务产品界面交互规范——界面组件级规范
4.10 分隔
4.10.1 等量条目分隔线
等量条目分隔线是一种对包含大量记录行的列表进行等量条目分隔的视觉指示符号。 【设计意图】
✓ 使页面更加有条理，看起来更清晰； ✓ 让用户清楚自己当前浏览的条目位置；
✓ 让用户感觉到一部分告一段落，减轻用户的视觉疲劳和心理负担。 【应用条件】
✓ 同一页（或同一框架）中显示超过70条记录时； ✓ 列表条目之间无逻辑分组的关系。 例如：论坛、评论、聊天室。 【模式描述】
组成：横线 + 条目数指示 如下图所示：
120 条目数指示 横线
图 4-53 分割线
应用规范：
分隔线只是起辅助作用，不是用户注意的重点，视觉上不能过于醒目，不能干扰
用户的视觉重心； 每20条记录出现一条分隔线；
分隔线中间标注该分隔线分隔截至的条目数或其他指示； 条目数指示同样不易过于醒目；
分隔线的分隔效果需要有合适的留白来辅助完成。故在分隔线上方和下方必须留
出合适的空间； 分割线的宽度不能贯穿整个列表区域，两边需要留一些余地（否则无法起到分隔
作用，还会将页面割断）。
52
IT应用服务产品界面交互规范——界面组件级规范
120
【扩展描述】
1） 上/下条目跳转 组成：
120
跳转图示
跳转图示
图 4-54 分割线宽度
图 4-55 分割线的跳转图示
应用规范：
在分隔线的两端分别显示向上和向下的图示，用户通过点击它们分别可以转到上
一个或下一个分隔线处； 两个图示的视觉感觉不能太强烈，在鼠标移过时可以清晰一些以提供受范式反
馈； 图示要提供提示信息，如下图所示：
120
图 4-56 提示信息
适用条件：
在一页的数据量非常大，用户的浏览行为是比较随意和无目的性时可提供这样的
上下跳转功能； 2） 返回顶部 组成：
120
返回顶部图示
图 4-57 返回顶部
应用规范：
在分隔线右侧显示“回到顶部”的图示；
53
IT应用服务产品界面交互规范——界面组件级规范
图示的视觉感觉不能太强烈，在鼠标移过时可以清晰一些以提供受范式反馈； 可以加以文本说明作为反馈形式，如下图所示：
120
图 4-58 反馈形式
适用条件：
一页的数据量非常大，用户需要回到顶部时； 【效果演示】 无
54
IT应用服务产品界面交互规范——界面组件级规范
4.11 高级加密
高级加密是用户在设置比较重要的密码时，提供给用户的一种用软键盘设置密码的组件。 【设计意图】
✓ 用户通过鼠标点击进行密码输入，可以避免系统自动根据敲击键盘的输入获取密码，
从而增加安全性，让用户放心，增加用户对系统的信任； ✓ 合理的软键盘的外观设计，让用户可以准确和快捷的设置密码。 【应用条件】
✓ 对密码的安全级别要求较高的场景。
例如：银行帐号的密码；容易被盗取的IM帐号密码。 【模式描述】
组成：软键盘打开/关闭指示图标 + 软键盘
图 4-59 软键盘
应用规范：
在密码输入框附近，必须有一个可以指示打开和关闭高级加密输入软键盘的图示
或按钮：图示在打开和收起两种外观上切换； 对于安全加密要给出相应的提示。
由于软键盘点击输入的反馈远远不如键盘敲击输入的反馈强烈，再加上输入的密
码以星号表示，故无法从这里给用户提供输入何字符的视觉反馈。为了保证用户点击的准确性，必须：
软键盘各按键必须非常清楚，按键与按键之间的边界也必须非常清楚； 如果有大小写指示或者shift切换，一定要明确地表明当前的状态，让用户能清楚地知道点击这个键输入的是什么字符；
55
IT应用服务产品界面交互规范——界面组件级规范
鼠标在软键盘上移动，以及点击和释放某个键时，必须提供清晰的视觉反馈：如下图所示：
图 4-60 软键盘示例
每次重新启动程序或打开网络应用，软键盘的布局都应该是不一样的； 每次键盘的顺序变化，都一定要有规律，让用户方便定位，可以较准确地找到自
己想要点击的字符，避免出错，如下图所示：
图 4-61 顺序变化
打开软键盘后，鼠标也可定位在输入框中用切换回键盘输入方式；
当用户用软键盘输入时，文本区无光标指示；当鼠标点击输入区时，输入区内显
示光标，指示可键盘输入。
【扩展描述】
1） 刷新数字区
组成：“刷新数字区”提示+ 可变区域视觉提示，如下图所示：
56
IT应用服务产品界面交互规范——界面组件级规范
图 4-62 刷新数字区
应用规范：
切换按钮要明确，在位置上要与软键盘区域离开一点距离，以防止用户在点击设
置密码时误点，没有留意到键盘顺序已经变化，而记错自己的设置的密码； 刷新的数字应该与允许用户输入的数字相匹配。例如：银行帐号只能输入数字； 用户点击切换按钮或图标，不能将软键盘全部打乱。只能提供有限的区域（如：
数字区）让用户选择变换顺序，这样可以减少用户的记忆负担； 可变换的区域在视觉上必须清楚地标识。
【注意事项】
可以利用安装ActiveX安全控件的方法来更好的解决安全性的问题。
【效果演示】
查看动画
57
IT应用服务产品界面交互规范——界面组件级规范
4.12 进度条
应用于用户上网浏览页面、执行数据操作时进行等待时的设计中； 【设计意图】
✓ 避免因为等待引起用户的厌烦和误解；
✓ 让用户了解应用程序正在执行并且实时了解执行情况，并给出用户有效的即时
反馈； ✓ 趣味性的进度条，能增加用户的愉悦性；
【应用条件】
✓ 系统需要用户长时间等待时； ✓ 上传下载的文件较大时； ✓ 等待时间超过5秒钟时；
例如：数据上传下载、页面浏览、文件打开关闭、复制、打印文档等。 【模式描述】
组成：进度单位+进度框 如下图所示：
图 4-63 进度条
应用规范：
根据进度情况逐步显示进度单位，直到进度完成； 进度条的形式参见《界面视觉规范》。
【扩展描述】
1) 百分比数值
组成：百分比数值 如下图所示：
图 4- 百分比数值
应用规范：
根据完成的进度，实时的显示出完成部分的百分数。
执行数据的具体操作时，需要显示百分比数值，为用户显示任务完成信息的实时
对比，
2)“取消”按钮
58
IT应用服务产品界面交互规范——界面组件级规范
组成：“取消”按钮 如下图所示：
图 4-65 “取消”按钮
应用规范：
针对某一数据的具体操作时，在等待的过程中，用户可以对操作进行终止操作。
此时需要在进度条的基础添加“取消”按钮，并且此按钮要高亮显示，提示用户进程中途可以取消。 c)内容提示
组成：内容提示 如下图所示：
图 4-66 内容提示
应用规范：
针对不同的内容，可以添加提示文字，来对进度条进行说明。进度条说明文字后
必须添加“...”表示进行中。如下图所示：
【注意事项】
设计有意思的趣味性的进度条，不但不会让用户反感还会增加用户的愉悦性。 【效果演示】
查看动画 查看HTML 59
IT应用服务产品界面交互规范——界面组件级规范
4.13 图形化面包屑
应用于标注当前操作所在具体位置的设计中，让用户清晰的知道自己的位置，不至于“迷
路”，同时提供便捷的通道，方便用户切换到其他相关页面，图形化面包屑还提供一键回到较高层次的服务，帮助那些通过搜索或者深层次链接进入到特殊但是不合适页面的用户。
【设计意图】
✓ 防止用户在浏览过程中迷失；
✓ 同时提供多入口，方便用户随时到达目标位置； ✓ 方便用户定位在页面中的位置；
✓ 合理的有效的利用空间，整合地址栏和面包屑的功能于一体；
✓ 面包屑显示用户的当前位置，帮助用户理解所处位置与整个网站的关系。
【应用条件】
✓ 系统级别较深，超过3（包含3）级以上时； ✓ 用户需要返回上一级页面时；
【模式描述】
组成：如下图；
图 4-67 图形化面包屑
应用规范
面包屑与地址栏合二为一；
路径关系要正确，路径文本要与上下文相一致；
路径文本与分隔符保持一定的间距，如一个全角（具体参见《界面视觉规范》）； 在层级之间必须使有一个含义简单明确的分隔符；
分隔符必须使用“”表示，即体现路径间的层级关系又表示可以点击展开
下拉菜单；
60
IT应用服务产品界面交互规范——界面组件级规范
点击分隔符展开下拉菜单，里面包含了当前文件夹下的所有文件夹和文件；
其中当前路径文本区别与其他同级路径文本； 面包屑的最末级，不再提供分隔符；
每个层次都是可点选的；当你点击它时，你就会替换当前打开文件或文件夹；
【扩展描述】
无 【注意事项】
无 【效果演示】 无
61
IT应用服务产品界面交互规范——界面组件级规范
4.14 星级评分
星级评分是规定在用户对某对象进行等级评价时，用直接操作的等级图标来表现的一种形
式。
【设计意图】
✓ 所见即所得的操作方式，方便用户评价，增加评分的使用几率；
✓ 用星状的图形化形式来描述等级，是当前用户比较熟知的流行元素，同时也符合用户
的心智模型。 【应用条件】
✓ 应用在进行等级评分时。 例如：文章书评、出售物品评价。 【模式描述】
组成：文本指示 + 星级图标 如下图所示：
单击星形直接评级
图 4-68 星级评分
应用规范：
星级图标前给出文本提示，如：“单击星形直接评级”； 初始打分区静态显示五颗空白星星； 当鼠标指针移过星级图标区时：
用户鼠标指针变为手型；
在星上移动时，即时置亮所选星星及之前的所有星星，如下图所示：
移至1颗星处：
图 4-69
移至2颗星处：
图 4-70
62
IT应用服务产品界面交互规范——界面组件级规范
移至3颗星处：
图 4-71
移至4颗星处：
图 4-72
移至5颗星处：
图 4-73
鼠标经过和选中星星时，星星外观要及时变化；
用户鼠标在某颗星星上按下时，该星星前面的所有星星外观有所变化，视觉效果
比在移过时置亮状态的基础上有所加强，表示用户打分成功，如下图所示：
移过时：
图 4-74
按下时：
图 4-75
【扩展描述】
组成：文本指示 + 星级图标 + 发表评论提示
单击星形直接评级
发表评论
图 4-76 发表评论
应用规范：
当鼠标指针移过“发表评论”提示时，鼠标变为手型，并展开评论层，允许用户
填写并提交评论，如下图所示：
63
IT应用服务产品界面交互规范——界面组件级规范
单击星形直接评级
发表评论
图 4-77
鼠标指针移开该评论层区域，评论层消失；
用户可以将鼠标定位于文本域，输入评论文本，点提交，评论层消失； 页面上出现文本框“谢谢您参与评论！”，片刻后消失，如下图所示：
单击星形直接评级
发表评论 谢谢您参与评论！
图 4-78 评论反馈
【效果演示】
查看动画 查看HTML
IT应用服务产品界面交互规范——界面组件级规范
4.15 保留图标
用户经常使用的图标，作为专用图标，避免理解上的歧义和误解。 【设计意图】
✓ 用户经常使用的图标，作为专用图标，避免理解上的歧义和误解； 【应用条件】
✓ 具体应用参见表格中各个图标的具体说明； 【模式描述】
名称 示 三角 箭头 手机 信封 软盘 打印机 方气泡 对勾 叉 叹号 问号 钳子 竖等
图说明 一侧出现浮动层是应用 存在下拉层时应用 降序排序时应用 升序排序时应用 置顶 置底 手机通知 邮件通知 保存 打印 批注 √ × ！ ？ 65
正确 错误、关闭 警告提示 帮助说明 设置 暂停 IT应用服务产品界面交互规范——界面组件级规范
于号 圆气泡 五星 反馈打分 图 4-79 保留图标
留言回复等 应用规范：
【扩展描述】
无
【效果演示】
无
保留图示的应用范围只能确定在以上几方面，要避免在其它设计中使用。以上提出了部分的保留图示，在以后的设计中可以根据应用的情况不断完
善和添加； 国际通用的图标必须保持原有意义。
66
IT应用服务产品界面交互规范——界面组件级规范
4.16 弹出层
4.16.1 非独占焦点层
应用于弹出层的信息对产品主界面操作流程没有必然影响的一些非持续性的任务中；如
站内消息、模块设置等。如下图所示：
图 4-80 非独占焦点层 【设计意图】
✓ 适时的友好的提醒告知用户； 【应用条件】
✓ 不影响用户的操作流程；
✓ 提示信息对用户来说只是参考和辅助作用； 例如：站内消息、模块设置等设计中。 【模式描述】
应用规范：
弹出层的位置需要根据具体操作的位置相应调整； 弹出层可以用鼠标随意拖拽它在屏幕中的显示位置； 主界面的操作不受弹出层的影响；
【扩展描述】
无 【效果演示】
查看动画 查看HTML
67
IT应用服务产品界面交互规范——界面组件级规范
4.16.2 独占焦点层
应用于弹出层的信息对产品主界面操作流程有直接影响的设计中；适用于分权限查看操作、系统超时、信息发送、接收过程等，如下图所示：
图 4-81 独占焦点层
【设计意图】
✓ 紧急有效的提醒用户；
✓ 保护并防止影响用户之前的操作； 【应用条件】
✓ 提示信息对用户来说紧急而且特殊； ✓ 操作对系统整体后果影响巨大；
例如：适用于分权限查看操作、系统超时、信息发送、接收过程等
【模式描述】
应用规范：
点击弹出层后，直接影响主界面操作流程，此时主页面处于不可用状态； 不可用状态的视觉表现参见《界面视觉规范》 主页面处于不可用状态时，不能进行任何操作；
必须对弹出层进行处理操作后，主界面才可以恢复继续进行其它操作； 弹出层要居中显示；
68
IT应用服务产品界面交互规范——界面组件级规范
弹出层不可以用鼠标拖拽，无法变换位置。
【扩展描述】
无
【效果演示】
查看动画 查看HTML
69
IT应用服务产品界面交互规范——界面组件级规范
4.16.3 局部独占焦点层
应用于弹出层的信息对产品主界面的局部操作流程有直接影响的设计中；适用于不同会员分权限查看、操作某部分信息等；如下图所示：
图 4-82 局部独占焦点层
【设计意图】
✓ 提示信息对用户来说紧急而且特殊； ✓ 保护并防止影响用户的某些具体操作； 【应用条件】
✓ 提示信息对用户来说紧急而且特殊； ✓ 操作对系统局部的影响巨大；
例如：适用于不同会员分权限查看、操作某部分信息等；
【模式描述】
应用规范：
弹出层要显示在局部范围之内，且居中（局部之内）显示； 弹出层不可以用鼠标拖拽，无法变换位置；
70
IT应用服务产品界面交互规范——界面组件级规范
点击弹出层后，直接影响主界面局部的操作流程，此时只需将页面的
相应局部置为不可用状态即可； 局部处于不可用状态的部分，不能进行任何操作； 页面其他部分，可以进行正常操作；
必须对弹出层进行处理操作后，局部页面才可以继续进行操作；
【扩展描述】
无 【效果演示】
查看动画 查看HTML71
IT应用服务产品界面交互规范——界面组件级规范
4.17 搜索
4.17.1 模糊搜索
模糊搜索是只要用户知道要查找的大概内容和范围时，给用户提供的按照输入的关键字
进行查询的方式。 【设计意图】
✓ 帮助用户正确使用模糊搜索； ✓ 帮助用户方便快捷地输入关键词信息； ✓ 减少无效输入的几率，提高搜索的准确性。 【应用条件】
✓ 用户对于要查找的信息没有具体明确的数据限定时； 例如：查找包含某主题的图书、文章等相关资源。 【模式描述】
组成：搜索输入框 + 搜索按钮 如下图所示：
图 4-83 模糊搜索
应用规范：
搜索输入框中给出默认的提示文本（如：请输入商品名称关键词），以灰色字体
显示； 提示文本的内容要简洁并能够指导用户查询；
当用户鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入； 当用户鼠标移到输入框外单击时，默认的提示文本重新显示；
点击“搜索”，系统根据输入的关键词搜索出相关内容，要求对搜索结果有相应
文本统计或描述，如：“抱歉，没有找到与“xxxx” 相关的信息。请检查输入字词有无错误。请换用另外的查询字词。请改用较常见的字词。”；或“约有123条信息符合您的搜索条件，以下是1-15条。”； 搜索结果提示页面规范参见《提示规范文档》。
【扩展描述】
组成：类别选择下拉框
72
IT应用服务产品界面交互规范——界面组件级规范
类别选择下拉框
图 4-84 分类模糊搜索
应用规范：
模糊搜索可以配合另外的精确搜索条件（如：单选、多选等）一起使用； 下拉框中默认显示“全部××”选项，提示用户可以进行选择（如：全部类别）。
【效果演示】
查看HTML
73
IT应用服务产品界面交互规范——界面组件级规范
4.17.2 精确搜索
精确搜索是在搜索的内容可以设定多种组合条件时，提供给用户的按照设定的限定条件进行查询的方式。 【设计意图】
✓ 帮助用户快速有效的完成精确搜索；
✓ 默认值帮助用户方便快捷地设定各条件信息，减少无效输入。 【应用条件】
✓ 信息量较大，用户很难通过其它途径获知时； ✓ 可以通过具体属性缩小搜索范围； ✓ 对象包含多个属性。 【模式描述】
组成：各种不同的搜索条件选框+搜索按钮：
图 4-85 精确搜索
应用规范：
搜索条件要合理，容易理解。
各控件的排列顺序，主要依照该条件的关键程度以及用户对该条件的熟知程度，
其次依照控件的视觉布局效果； 精确搜索根据搜索条件，提供输入框、选择下拉框或单选控件； 在输入框中默认显示文本“不限”；
当用户鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入； 当用户鼠标移到输入框外单击时，默认的提示文本重新显示； 在选择下拉列表框中默认显示选项文字“不限”； 在单选组中默认选中第一项；
点击“搜索”，系统根据输入的关键词搜索出相关内容，要求对搜索结果有相应
文字统计或描述，如：“抱歉，没有找到相关的信息。请检查输入字词有无错误。请换用另外的查询字词。请改用较常见的字词。”或：“约有123条信息符合您的
74
IT应用服务产品界面交互规范——界面组件级规范
搜索条件，以下是1-15条。”；
搜索结果提示页面规范参见《提示规范文档》。
【扩展描述】
组成：标签 如图所示：
页签
图 4-86 分类精确搜索
应用规范：
多类别搜索时，可以使用页签表示不同的类别。默认是第一个页签的搜索条件。页签的顺序遵循该条件的关键程度以及用户对该条件的熟知程度，其次依照控件的视觉布局效果。
75
IT应用服务产品界面交互规范——界面组件级规范
图 4-87 错误与正确示例
当前选中的类别必须足够明显，并能清晰的表明页签与各搜索项是一体的关系； 不同页签里的搜索项，要与当前页签相符。 应用规范：
可提升为标签的项目包含的选项不应该超过3项（三项以上考虑应用其它的控件
表现，比如下拉选框）； 该选项可作为划分类型，一般为用户进行筛选的第一项条件；
【注意事项】
不强制用户填写哪条或者几条选项，故每一项搜索条件前面不添加任何单选或复选框； 当高级搜索点击“搜索”后，页面应该在适当位置显示搜索结果，且保留用户刚
刚设置的搜索条件，并且提供“重置”按钮，恢复为默认：
【效果演示】
76
IT应用服务产品界面交互规范——界面组件级规范
查看HTML
77
IT应用服务产品界面交互规范——界面组件级规范
4.18 数据添加
4.18.1 添加单个文件
添加单个文件主要应用于引用、下载、浏览单个文档、图片或压缩文件的设计中。 【模式描述】
组成：添加文件框 + 添加指示按钮+ 添加操作窗体
图 4-88 添加单个文件
应用规范：
选定图标或按钮释义要清楚，参见《界面视觉规范》； 对于表格的操作请遵循表格的相关规范； 弹出层只有点击关闭按钮才能被关闭；
点击按钮“从下载库添加”，弹出一个浮动层，在层中可以通过搜索关键字
和翻页查找的方法，找到用户需要的文件，点击“选用”按钮后数据被读回，层窗口关闭； 当选择的文件大小超过约束范围，系统给出提示，“对不起，您选择的文件
太大！请选择500k以内的文件！”
78
IT应用服务产品界面交互规范——界面组件级规范
根据具体产品的功能要求，如果允许从本地浏览上传文件，同时并保存到库
文件中时，可以在弹出层中添加“从本机上传”的链接入口。
【扩展描述】
无 【注意事项】
文件选定后，点击“选用”的同时此窗口关闭，数据被显示；此窗口不需要再有“确定”按钮。 【效果演示】
查看动画 79
IT应用服务产品界面交互规范——界面组件级规范
4.18.2 添加多个文件
添加多个文件主要应用于引用、下载、浏览多个文档、图片或压缩文件的设计中，如：产品说明书下载、相关资讯、相关商品等。
【应用场景】
适用于左侧数据文件不会发生变化的设计中。 【模式描述】
组成：添加文件列表 + 添加指示按钮+ 添加操作窗体 效果如下图所示：
图 4- 添加多个文件
应用规范：
对于表格的操作请遵循表格的相关规范； 弹出层只有点击关闭按钮才能被关闭；
点击按钮“从下载库添加”，弹出一个浮动层，在层中可以通过搜索关键字
80
IT应用服务产品界面交互规范——界面组件级规范
和翻页查找的方法，选择用户需要的文件添加到已添加文件列表中，在确定关闭前还可以对所选文件进行最后的筛选；
根据具体产品的业务需求，设定适当的数据约束范围；
添加按钮要求包含文本标签和代表方向的箭头。；如 “添加>>”;
已经添加过的数据和信息要给出明确的提示，避免用户重复多次添加；当添
加的内容重复时，要给出提示；如下图所示：
图 4-90 添加行
选择到需要的文件确定关闭层以后，所选的文件被读取回，并罗列显示在页
面中；如下图所示：
图 4-91 删除文件
当读取回的文件路径过长时，要使用”…”；但要保持路径的前后半段清晰显
示，中间部分用“…”代替；如“D:\\MyPortal\\... \\数商运营系统\\images\\dabas.gif” 文件名要显示完整；
选择的文件还可以进行删除操作；选中后点击删除按钮即可；如下图所示：
81
IT应用服务产品界面交互规范——界面组件级规范
图 4-92 插入文件
当选择的文件数量超过约束范围，系统给出提示，“对不起，您选择的文件
数量超出，不能完成添加！” 根据具体产品的功能要求，如果允许从本地浏览上传多个文件，同时并保存到库文件中时，可以在弹出层中添加“从本机上传”的链接入口。 注意事项：
文件批量从左侧初选到右侧，文件本身仍然存在；
选定的文件被读回显示后，如果有个文件不符合要求可以被删除，但仅仅是
取消选择，并不是真正意义上的删除数据。
【扩展描述】
无 【效果演示】
查看动画 查看HTML
82
IT应用服务产品界面交互规范——界面组件级规范
4.18.3 添加行
添加行应用于添加维护的数据项和数据量相对有限的设计中，如：订单包装维护、配送地区维护等。采用整行添加的方式，减少页面的跳转；更加直观；
【模式描述】
组成：原数据列表 + 添加的行 效果如下图所示：
图 4-93 添加行
应用规范：
每个数据项的约束，要根据输入的数据进行判断和提示，一般不显示在页面
中； 默认显示一条数据添加行；
正确添加内容后，点“确定”数据被保存；
点击“编辑”，该数据行切换为编辑状态；如果数据添加行中存在没有保存
的信息时，系统必须给出提示，如“当前添加的信息是否要保存”，选“是”则保存数据再继续对所选数据行进行编辑修改操作；选“否”则不保存数据再继续对所选数据行进行编辑修改操作；编辑效果如下图所示：
图 4-94 编辑数据
无论添加还是编辑 ，始终保持对一条数据进行操作，其他情况下都要给出相应
变更提示，如：“当前的添加的信息是否要保存”。参见《提示语规范》。 【扩展描述】
无 【效果演示】
83
IT应用服务产品界面交互规范——界面组件级规范
查看动画 查看HTML
84
IT应用服务产品界面交互规范——界面组件级规范
4.19 排序
主要应用于分类或者多条数据内容的顺序排列的设计中；通过点击排序图标（置顶、置底、向上、向下）和拖动排序两种方式共存的方法满足不同用户的操作习惯和需求。
【设计意图】
✓ 让用户简单、直观、快速的达到排序目的； ✓ 增加用户参与互动的娱乐性； ✓ 满足不同用户的操作习惯； 【应用条件】
✓ 数据或分类属于同一级别，数据或分类的顺序可以由用户自行设定时；
例如：适用于商品类别、资讯类别、下载等相关业务的类别和内容的排序操作中；
【模式描述】
组成：类别名称 + 排序图标 + 鼠标拖动 效果如下图所示：
图 4-95 排序
应用规范：
默认排序图标不可用(不可用状态，参见《界面视觉规范》)；如下图所示：
85
IT应用服务产品界面交互规范——界面组件级规范
图 4-96 排序图标
只有当鼠标选中某一个分类或内容时，排序图标才被激活，处于可操作状态；同
时出现提示“鼠标拖动排序”；如下图所示：
图 4-97 拖动排序
鼠标经过数据行时，鼠标变为可移动的十字箭头形状；
鼠标选中某一分类后，拖动分类进行排序，此时会有一条基准线出现，它所在的位置，就是分类要拖放到的目标位置；此时所选分类的背景变为半透明半模糊状，释放鼠标后，此分类的顺序被成功变更。如下图所示：
86
IT应用服务产品界面交互规范——界面组件级规范
图 4-98
选取某一分类后，还可以通过连续点击右侧的排序箭头图标进行排序操作；对于
头尾两个分类不存在置顶、置底操作时，相应图标也要进行置灰操作； 鼠标经过图标时要有提示，置顶、向上、向下、置底；如下图所示：
图 4-99
当分类或者信息条目过多时（超出一屏显示时），排序箭头则需要跟随所选排序
内容进行上下浮动显示；
【扩展描述】
无 【效果演示】
查看动画 查看HTML
87
因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1
违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务