界面组件级交互设计规范.docx

1、界面组件级交互设计规范界面交互设计规范 IT应用服务产品界面组件级交互规范V1.0 修订记录修订人日期版本修订内容1 概述界面交互设计规范对用户与产品交互的各个方面做了相关的描述。该规范由“组件级”、“流程级”和“系统级”三个部分构成，分别从不同的层面，为IT应用服务产品的用户界面提供规范与指导。规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进

2、行了严格的用户测试，并对各组件采取了不同应用场景的测试。本规范是界面交互设计规范三个部分中的基础层面：组件级规范。该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。1.1 规范的目的 在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利有效地进行，以保证产品界面的最终规范化实现； 从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担，改善产品的用户体验，提升产品的市场竞争力； 使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征

3、。1.2 规范适用的范围集团内的所有产品。1.3 规范适用的人群 参与产品设计的所有人员以及测试人员等。 注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。 规范演示网址：:71022 基本原则以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见界面设计指南。2.1 一致性 视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视觉上应该保持一致；否则，界面外观要予以区分； 操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时要保持视觉上的一致；

4、当操作行为不同时，在视觉上就一定要有所区别； 外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；视觉元素的外观及其操作结果，必须与用户的心理认知相符。2.2 简洁性 减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息； 简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆； 操作简单：减少冗余的操作步骤。2.3 避免干扰和打断 避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪声和其它干扰。 避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）打断用户的工作。2.4 减轻用户记忆负担 认知

5、明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要及时准确； 系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索取信息； 合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，为用户的任务提供直观易用的界面； 有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说明自身可以如何使用的外观属性）。2.5 及时有效的反馈 操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事； 受范性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果； 系统状态反馈：系统需要用户等待或系统出现错误时，要及时

6、让用户明白现状； 选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声音、触觉、语言、视觉反馈或是它们的组合）。2.6 让用户放松心态，不怕犯错 允许轻松的反向操作：在适当的时候，尽量提供撤销功能，使用户可以返回到上一步操作并重新进行选择； 让用户可以重新开始：提供“恢复初始设置”选项，让用户敢于尝试； 避免输入错误：使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表性的默认选项，以及相应的输入帮助，来方便用户准确输入信息； 提供校验等功能：对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错误； 避免埋怨：当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所

7、在，并提供有用的恢复建议。3 产品交互通用规范以下为IT应用服务产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。（此部分规范将随着组件模式的不断扩充，进行逐步添加和完善。）3.1 受范性指示受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。 对象对鼠标指针移动的响应必须即时有效； 响应形式必须明确清晰（如：鼠标移过按钮，按钮有被按下的效果）； 受范性表现必须保持高度的一致：同等功能和操作的元素受范性必须相同（如：鼠标指向链接文字时都做同样的变化）； 在鼠标指针移开时对象必须即时恢复原来状态； 命令按钮也经常被显

8、示为链接样式（文本+下划线），此时为了与普通的链接相区分，必须提供非常明显的不同于链接的受范性指示。注：具体受范性指示的效果参见视觉规范。3.2 操作不可用状态当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳定，使用户保持恒定和完整的思维模式，减少用户的认知负担。 显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形态保持一致，仅色彩、灰度和立体效果等发生变化。 操作不可用的情况主要包括： 菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：图 31菜单操作不可用 工具栏按钮不可用时不能

9、隐藏，应该显示为不可用状态，如下图所示： 图 32 工具按钮不可用 当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：图 33操作命令不可用注：具体不可用状态效果见视觉规范。 4 组件规范4.1 表格主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。【设计意图】 合理有效的组织数据信息； 帮助用户快速、有效的查看表格数据； 帮助用户快速、准确的完成对表格的操作；【应用条件】 适用于批量数据的展示和维护；【模式描述】组成： 表格

10、标题 + 表格表头+ 表格行间隔线 + 表格行如下图所示：图 41 基础表格应用规范： 表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：一个半角空格；具体视觉效果参见界面视觉规范。 表格的表头与表格主体在外观上要有区分； 表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。 【扩展描述】 根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：图 42 表格操作区分布1）标

11、题列排序： 表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他列标题显示，如：背景和图标高亮显示； 如下图所示： 图 43 标题列排序 表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状态；2）表格行选中操作： 表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状态；当两者都有时，显示复选框在上，图标被覆盖； 在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列标题中的复选框即可选中当前列表的全部行数据。3）数据筛选区： 当数据内容可以明确的按其状态

12、、类别进行划分时，可以应用页签的形式来进行设计； 页签总宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如下拉框显示的形式等； 如下图所示： 图 44 数据筛选区 当前分类状态的的页签要高亮显示，要明显区别于其他页签； 页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、处理中（订单）、处理完成（订单）； 应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。4）命令按钮区： 针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导入、导出、新增等； 按钮的其它细则参见界面视觉规范。5）操作按钮区： 对表格主体的数据进行操作的按

13、钮放置在此区域。如：删除、发布、下架、上架、审核等； 当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列表进行操作；如下图所示：图 45 操作按钮区 按钮的其它细则参见界面视觉规范。6）翻页区： 当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的显示； 翻页在列表下方居中显示； 翻页的详细功能和模式参见“翻页模式组件规范”。7）单条数据操作区： 对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；具体参见界面视觉规范； 尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑其他的界面布局方式。8）表格列标题区： 当表格的数据列较多

14、，屏幕显示已经达到最大限度，而这些数据列又必不可少时，允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动条； 调整列宽度时，要在整体表格边线内进行，以免整体页面变形； 数据项内容显示部分太长时，省略多余部分并加省略号；鼠标指针停靠时，全部详细内容显示；9）数据条目设置区： 默认显示当前页面所能显示的最大数据条目数；如：10条/页； 还要提供几个数值选项，供用户选择；如：20、30、50；4.2 单元格数据4.2.1 单元格数据展示以单元格为单位的数据展示是指应用表格的单元格来描述每个数据对象的展示形式。【设计意图】 让用户更加清晰的浏览信息； 方便查看选中单元格的信息。【应用

15、条件】适用于多数据的查看、浏览和操作；例如：如短信中的收信人、邮件中的收件人等。【模式描述】组成：如下图所示：图 46 单元格数据展示应用规范： 鼠标经过或选中此类表格的单元格时，行或列的背景色高亮显示。 此类单元格请支持按“Shift”键进行连续选定，整行整列选定时要有箭头图标反馈给用户。 此类单元格请支持按“Ctrl”键进行间断选定。注意事项：数据类表格是指表格所描述内容是由多个数据或一组对象（每个对象至少包含两个数据项）组成，对于展示某些信息的表格不属于数据类表格。4.2.2 通讯录 通讯录是以单元格数据展示形式为基础的，集添加删除修改等功能于一体的组件。【设计意图】 用户不会再输入通讯

16、录信息之间分隔符，更不会出现由于分隔符输入不正确而导致的错误操作； 为用户显示人名，而不显示地址，方便了查看，同时增加了自动匹配，查找，将新信息增加到通讯录和导出通讯录的功能。【应用条件】 适用于需要用户多次填写同类信息的地方。如：竞价通中的“关键词管理”；日期格式中年份的展现方式；邮件、短信产品的收信人列表。【模式描述】 组成： 如下图所示：图 47 通讯录1应用规范：a）通讯录中无此信息的高亮反馈 通讯录中存在姓名时表格内只显示姓名； 通讯录中没有姓名只有手机号码（或email地址）时则显示号码（或email地址）； 姓名、手机号码（或email地址）两者都无的单元格自动高亮反馈给用户。

17、b）默认显示 默认显示表格的一个空行；如下图所示： 图 48 通讯录2 整行单元格数据被填满时，表格自动增加一行；如下图所示： 图 49 通讯录3 增加至3行时，出现滚动条；如下图： 图 410 通讯录4 c）自动匹配支持手动输入，可以输入人名或地址；输入地址时自动匹配通讯录中对应的人名； d）快捷操作为高级用户提供快捷操作,输入新人名或新地址时，可以将其添加到通讯录。如下图：图 411通讯录5注意事项： 使用时遇到两个人同名时可以采用“姓名（号码）”的方式显示。4.3 信息列表信息列表是显示单列信息集合的一种视图展示。 【设计意图】 利于信息的展示，方便使用者检索信息； 快速定位信息条目。【

18、应用条件】 单列信息集合； 索引类的信息列表；例如：信息列表多应用于索引类的信息列表，如：新闻列表、目录等。【模式描述】组成：项目符号、列表行，如下图所示：图 412 信息列表应用规范： 项目符号可以是固定的符号，也可以是具有意义的图标； 项目符号如果是图标，图标必须与应用场景相符，尽量不使用无意义的仅为装饰作用的视觉效果显著的图标作为项目符号； 列表行的内容，可以为文字和图标，文字一般为简单的标题； 列表行的文字内容应该简单易懂，能够明确的反应所要说明的信息。 列表行内容如果折行，行距必须小于两个记录行之间的段距； 由于信息列表多为展示信息的条目，因此信息列表的行间距要有一点留白，不要给使用

19、者造成视觉上的负担。【扩展描述】组成：列表标题、单选按钮、多选按钮、分隔线、翻页，如下图所示：图 413 信息列表 2应用规范： 列表标题是对列表中的信息内容的概括性标题（标题的写法请参见“标题”控件的描述）； 单选按钮，多选按钮在需要时替换项目符号的位置； 分隔线：在记录行太多时需要提供分隔线（请参见“分隔线”控件中的相关描述）； 翻页（请参见“翻页”组件中的相关描述）。4.4 编号和序号4.4.1 编号用来标识某一个对象的唯一号码。一个编号就代表着一个对象。 使用编号能够更好的帮助用户记忆和或管理对象。如下图所示： 图 414 编号示例【设计意图】 更好的方便用户记忆和管理对象； 合理的使

20、用编号，能方便用户更好的进行沟通；【应用条件】 需要用唯一号码来标识对象时； 具有真实、合理、有效的意义；例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等；【模式描述】应用规范： 编号必需代表一个对象，不要让编号无意义的存在； 如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视觉层次应该突出。如果用户不常使用编号而通常更关注别的属性；比如人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。4.4.2 序号序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示： 图 415 序号示例【设计

21、意图】 使用户更好了解对象的先后顺序或按一定的顺序去了解对象； 更好的展示有先后顺序的数据；【应用条件】 需要标识一组有序对象时；例如：如歌曲排行旁、热销商品排行、点击率排行等设计中；【模式描述】应用规范： 序号必需代表一个对象在集体中的序列，不要让序号没有意义。 如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注对象的顺序，请不要使用序号，这样会混淆用户的注意。图 416 错误示例4.5 注册表单注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表单的操作。【设计意图】 快速高效的帮助用户完成注册； 尽量减少用户犯错； 在用户出错后，友好的有效的告知错误，

22、并提供解决方案； 给用户提供及时有效的反馈信息。【应用条件】 超过5项表单信息填写修改时； 用户出错的频率较高时； 系统对数据的要求比较严格时；例如：应用于填写注册信息、修改密码等设计中。【模式描述】组成：各输入控件 + 必填项指示 + 格式要求提示 + 对错判断反馈 + 提交按钮 如下图所示：图 417 注册表单应用规范：表单的设计应该遵循简洁的设计原则。在注册填写时，尽可能的只提供必须填写的选项给用户，其他非必填项，可以通过选填或者在日后需要时再进行完善的方式来完成。a) 信息输入对错判断：信息输入正确时，要给与填写正确的反馈；信息输入错误的时候，要给出错误的反馈，并给出具体的错误原因要高

23、亮反馈，同时注释语位置整体给出反馈提示。如下图所示：图 418 信息输入对错判断用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要提出简要的解决方法提示。例如：在用户名填写时，可能出现的错误提示；您输入的用户名过短！您输入的用户名中不能包含字符“&（等等）”！你输入的用户名“xxx”已经被占用,请重新输入！b) 输入格式约定（注释文本）： 当用户需要输入某一项时，相应注释文本才显示出来； 对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填写的必要性，如下图所示：图 4193) 验证码： 验证码中的图示字母是随机产生的，但要注意尽可能避免显示一些不易

24、区分的字母和数字，让用户难以辨别（如：“0和o”），如下图所示： 图 420 验证码 验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳； 验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点击链接文字（看不清，换一张）来更换验证码，如下图所示： 图 421验证码示例 用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示），如下图所示： 图 422验证码错误判断4) 提交按钮： 存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由置灰状态变为可用状态，如下图所示：图 423 注册按钮5) 成功告知 表单最终填写提交完成后

25、，要给出“提交成功或注册成功”的相关提示，明确告知用户此操作正确完成；6) 协议 单击“我接受”意味着：您同意并接受服务协议和隐私声明。 【扩展描述】应用规范：1) 密码强弱提示 当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。如下图所示：图 424密码强弱 在输入密码时，旁边显示注释文本：明确注明密码强弱的规则和提示，如下图所示：图 425 密码强弱提示 当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给出正确的解决方法，如下图所示： 图 426 密码强弱提示对照表2) 注册进度提示 根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要

26、给出注册的进度条提示，明确的告知当前注册的进度。3) 分组线注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用参见“分组线规则”）。【注意事项】 例如婚介交友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。 如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必须使用行的背景颜色来区分必填项与非必填项。4.6 联系方式联系方式是对表单中提供给用户填写详细联系方式一种组件规定。【设计意图】 帮助用户有效、快速的填写联系方式； 减少用户输入错误的几率。【应用条件】 需要用户填写详细联系方式时。例如：网上注册，网上购物填写发货地址。【模式描述】

27、组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。 图 427 联系方式应用规范： “国家地区”、“省份”和“城市”要有连动关系； “国家地区”：下拉列表选框； “省份”：下拉列表选框，与选择的国家连动（选择“国家地区”，“省份”下拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京”，则后面的“城市”不用再选，自动置灰； “城市”：下拉列表选框，与选择的城市连动（选择“省份”，“城市”下拉框中选项相应变化）。城市下拉列表选项的最后一项为“其他地区”，如下图所示：图 428 其他地

28、区 “联系电话”、“传真号码”和“手机号码”必须拆分成几个字段； “联系电话”：四个输入框字段，分别为：国家代码（可选）区号电话号码分机号； “传真号码”：三个输入框字段，分别为：国家代码（可选）区号传真电话； “手机号码”：两个输入框字段，分别为：国家代码（可选）手机号； “国家代码”此项可根据具体产品的销售人群不同自行选择是否保留；如下图所示：图 429正确示例图图 430错误示例图 各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省份”、“城市”选择后，国家代码和区号自动显示，如下图所示：图 431 联系方式标注 “联系地址”：一个输入框，等待用户输入文本； “邮

29、政编码”：一个输入框（6个字符），等待用户输入文本； 除“国家地区”、“省份”和“城市”是只能让用户选择外，其他的输入框均可手动输入和编辑，用户可以根据自己的需要进行修改。【扩展描述】组成：邮政编码帮助 如下图所示：图 432 邮政编码应用规范： 用户手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编码的关联提示，供用户参考， 用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打开新窗口查看本市的邮政编码。图 433 查询邮政编码【注意事项】 各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在键盘上频繁切换输入位置）； 系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的和准确的数据； 用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不清空）。4.7 图片裁切4.7.1 固定尺寸主要应用于需要用户上传固定图片尺寸的设计中，在上传时提供简单裁切的功能。上传后可以让用户得到比较理想的图片效果。【设计意图】 可以进行简单图片裁切处理，而不需要使用其它的图片处理软件 快捷方便的裁切出用户想要的图片；【应用条件】 上传的图片限制固定尺寸时； 系统对