最新界面组件级交互设计规范.doc

《最新界面组件级交互设计规范.doc》由会员分享，可在线阅读，更多相关《最新界面组件级交互设计规范.doc（84页珍藏版）》请在三一办公上搜索。

1、界面交互设计规范 IT应用服务产品界面组件级交互规范V1.0 目录1概述51.1规范的目的51.2规范适用的范围51.3规范适用的人群52基本原则62.1一致性62.2简洁性62.3避免干扰和打断62.4减轻用户记忆负担62.5及时有效的反馈62.6让用户放松心态，不怕犯错73产品交互通用规范83.1受范性指示83.2操作不可用状态84组件规范104.1表格104.2单元格数据154.2.1 单元格数据展示154.2.2 通讯录174.3信息列表204.4编号和序号234.4.1 编号234.4.2 序号254.5注册表单274.6联系方式334.7图片裁切374.7.1 固定尺寸图片裁切37

2、4.7.2 自定义尺寸图片裁切394.8翻页424.9 日期输入454.9.1 通过日历选择日期454.9.2 年份跨度较大时的日期选择494.10分隔524.10.1 等量条目分隔线524.11高级加密554.12进度条584.13面包屑604.14星级评分624.15保留图标654.16弹出层674.16.1 非独占焦点层674.16.2 独占焦点层684.16.3 局部独占焦点层704.17搜索724.17.1 模糊搜索724.17.2 精确搜索744.18数据添加784.18.1 添加单个文件784.18.2 添加多个文件804.18.3 添加行834.19排序85修订记录修订人日期版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17、计意图】 让用户更加清晰的浏览信息； 方便查看选中单元格的信息。【应用条件】适用于多数据的查看、浏览和操作；例如：如短信中的收信人、邮件中的收件人等。【模式描述】组成：如下图所示：图 46 单元格数据展示应用规范：l 鼠标经过或选中此类表格的单元格时，行或列的背景色高亮显示。l 此类单元格请支持按“Shift”键进行连续选定，整行整列选定时要有箭头图标反馈给用户。l 此类单元格请支持按“Ctrl”键进行间断选定。注意事项：数据类表格是指表格所描述内容是由多个数据或一组对象（每个对象至少包含两个数据项）组成，对于展示某些信息的表格不属于数据类表格。【扩展描述】 无【效果演示】 无4.2.2 通讯

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

19、址）时则显示号码（或email地址）；l 姓名、手机号码（或email地址）两者都无的单元格自动高亮反馈给用户。 b）默认显示 默认显示表格的一个空行；如下图所示： 图 48 通讯录2 整行单元格数据被填满时，表格自动增加一行；如下图所示： 图 49 通讯录3 增加至3行时，出现滚动条；如下图： 图 410 通讯录4 c）自动匹配支持手动输入，可以输入人名或地址；输入地址时自动匹配通讯录中对应的人名； d）快捷操作为高级用户提供快捷操作,输入新人名或新地址时，可以将其添加到通讯录。如下图：图 411通讯录5注意事项： 使用时遇到两个人同名时可以采用“姓名（号码）”的方式显示。【扩展描述】 无【

20、效果演示】 查看动画 查看HTML4.3 信息列表信息列表是显示单列信息集合的一种视图展示。 【设计意图】 利于信息的展示，方便使用者检索信息； 快速定位信息条目。【应用条件】 单列信息集合； 索引类的信息列表；例如：信息列表多应用于索引类的信息列表，如：新闻列表、目录等。【模式描述】组成：项目符号、列表行，如下图所示：图 412 信息列表应用规范：l 项目符号可以是固定的符号，也可以是具有意义的图标；l 项目符号如果是图标，图标必须与应用场景相符，尽量不使用无意义的仅为装饰作用的视觉效果显著的图标作为项目符号；l 列表行的内容，可以为文字和图标，文字一般为简单的标题；l 列表行的文字内容应该

21、简单易懂，能够明确的反应所要说明的信息。l 列表行内容如果折行，行距必须小于两个记录行之间的段距；l 由于信息列表多为展示信息的条目，因此信息列表的行间距要有一点留白，不要给使用者造成视觉上的负担。【扩展描述】组成：列表标题、单选按钮、多选按钮、分隔线、翻页，如下图所示：图 413 信息列表 2应用规范：l 列表标题是对列表中的信息内容的概括性标题（标题的写法请参见“标题”控件的描述）；l 单选按钮，多选按钮在需要时替换项目符号的位置；l 分隔线：在记录行太多时需要提供分隔线（请参见“分隔线”控件中的相关描述）；l 翻页（请参见“翻页”组件中的相关描述）。【效果演示】 无4.4 编号和序号4.

22、4.1 编号用来标识某一个对象的唯一号码。一个编号就代表着一个对象。 使用编号能够更好的帮助用户记忆和或管理对象。如下图所示： 图 414 编号示例【设计意图】 更好的方便用户记忆和管理对象； 合理的使用编号，能方便用户更好的进行沟通；【应用条件】 需要用唯一号码来标识对象时； 具有真实、合理、有效的意义；例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等；【模式描述】应用规范：l 编号必需代表一个对象，不要让编号无意义的存在；l 如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视觉层次应该突出。如果用户不常使

23、用编号而通常更关注别的属性；比如人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。【扩展描述】 无【效果演示】 无4.4.2 序号序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示： 图 415 序号示例【设计意图】 使用户更好了解对象的先后顺序或按一定的顺序去了解对象； 更好的展示有先后顺序的数据；【应用条件】 需要标识一组有序对象时；例如：如歌曲排行旁、热销商品排行、点击率排行等设计中；【模式描述】应用规范：l 序号必需代表一个对象在集体中的序列，不要让序号没有意义。l 如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注对象的顺序，请不要使用序号，这

24、样会混淆用户的注意。图 416 错误示例【扩展描述】 无【效果演示】 无4.5 注册表单注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表单的操作。【设计意图】 快速高效的帮助用户完成注册； 尽量减少用户犯错； 在用户出错后，友好的有效的告知错误，并提供解决方案； 给用户提供及时有效的反馈信息。【应用条件】 超过5项表单信息填写修改时； 用户出错的频率较高时； 系统对数据的要求比较严格时；例如：应用于填写注册信息、修改密码等设计中。【模式描述】组成：各输入控件 + 必填项指示 + 格式要求提示 + 对错判断反馈 + 提交按钮 如下图所示：图 417 注册表单应用规范：

25、表单的设计应该遵循简洁的设计原则。在注册填写时，尽可能的只提供必须填写的选项给用户，其他非必填项，可以通过选填或者在日后需要时再进行完善的方式来完成。a) 信息输入对错判断：信息输入正确时，要给与填写正确的反馈；信息输入错误的时候，要给出错误的反馈，并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示：图 418 信息输入对错判断用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要提出简要的解决方法提示。例如：在用户名填写时，可能出现的错误提示；您输入的用户名过短！您输入的用户名中不能包含字符“&（等等）”！你输入的用户名“xxx”已经被占用,请重新

26、输入！b) 输入格式约定（注释文本）： 当用户需要输入某一项时，相应注释文本才显示出来； 对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填写的必要性，如下图所示：图 4193) 验证码： 验证码中的图示字母是随机产生的，但要注意尽可能避免显示一些不易区分的字母和数字，让用户难以辨别（如：“0和o”），如下图所示： 图 420 验证码 验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳； 验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点击链接文字（看不清，换一张）来更换验证码，如下图所示： 图 421验证码示例 用户在输入框内输入验证

27、码后，要及时给出反馈提示（不要到提交时才给出提示），如下图所示： 图 422验证码错误判断4) 提交按钮： 存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由置灰状态变为可用状态，如下图所示：图 423 注册按钮5) 成功告知 表单最终填写提交完成后，要给出“提交成功或注册成功”的相关提示，明确告知用户此操作正确完成；6) 协议 单击“我接受”意味着：您同意并接受服务协议和隐私声明。 【扩展描述】应用规范：1) 密码强弱提示 当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。如下图所示：图 424密码强弱 在输入密码时，旁边显示注释文本：明确注明密

28、码强弱的规则和提示，如下图所示：图 425 密码强弱提示 当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给出正确的解决方法，如下图所示： 图 426 密码强弱提示对照表2) 注册进度提示 根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的进度条提示，明确的告知当前注册的进度。3) 分组线注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用参见“分组线规则”）。【注意事项】 例如婚介交友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。 如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必须使用行

29、的背景颜色来区分必填项与非必填项。【效果演示】 查看HTML4.6 联系方式联系方式是对表单中提供给用户填写详细联系方式一种组件规定。【设计意图】 帮助用户有效、快速的填写联系方式； 减少用户输入错误的几率。【应用条件】 需要用户填写详细联系方式时。例如：网上注册，网上购物填写发货地址。【模式描述】组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。 图 427 联系方式应用规范：l “国家地区”、“省份”和“城市”要有连动关系； “国家地区”：下拉列表选框； “省份”：下拉列表选框，与选择的国

30、家连动（选择“国家地区”，“省份”下拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京”，则后面的“城市”不用再选，自动置灰； “城市”：下拉列表选框，与选择的城市连动（选择“省份”，“城市”下拉框中选项相应变化）。城市下拉列表选项的最后一项为“其他地区”，如下图所示：图 428 其他地区l “联系电话”、“传真号码”和“手机号码”必须拆分成几个字段； “联系电话”：四个输入框字段，分别为：国家代码（可选）区号电话号码分机号； “传真号码”：三个输入框字段，分别为：国家代码（可选）区号传真电话； “手机号码”：两个输入框字段，分别为：国家代码（可选）手机号； “国家代码”此项可根

31、据具体产品的销售人群不同自行选择是否保留；如下图所示：图 429正确示例图图 430错误示例图l 各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省份”、“城市”选择后，国家代码和区号自动显示，如下图所示：图 431 联系方式标注l “联系地址”：一个输入框，等待用户输入文本；l “邮政编码”：一个输入框（6个字符），等待用户输入文本；l 除“国家地区”、“省份”和“城市”是只能让用户选择外，其他的输入框均可手动输入和编辑，用户可以根据自己的需要进行修改。【扩展描述】组成：邮政编码帮助 如下图所示：图 432 邮政编码应用规范： l 用户手动输入邮政编码时，系统根据“省

32、份”、“城市”给出一些不同地区邮政编码的关联提示，供用户参考，l 用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打开新窗口查看本市的邮政编码。图 433 查询邮政编码【注意事项】 各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在键盘上频繁切换输入位置）； 系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的和准确的数据； 用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不清空）。【效果演示】 查看动画 查看HTML4.7 图片

33、裁切4.7.1 固定尺寸主要应用于需要用户上传固定图片尺寸的设计中，在上传时提供简单裁切的功能。上传后可以让用户得到比较理想的图片效果。【设计意图】 可以进行简单图片裁切处理，而不需要使用其它的图片处理软件 快捷方便的裁切出用户想要的图片；【应用条件】 上传的图片限制固定尺寸时； 系统对图片大小的约束严格，在200k以内时；例如：上传用户头像、产品图片、信息图片等【模式描述】组成： 预览区 + 裁切框 + 放大缩小提示标 + 滑杆 + 图片上传区域 + 清空按钮 + 数据约束 如下图所示：图 434 固定尺寸图片裁切应用规范：l 滑杆、缩放图标、清空按钮默认处于不可用状态；l 浏览上传图片后，

34、滑杆、缩放图标、清空按钮高亮显示；l 浏览上传一张图片后，图片全部显示在预览区内；l 当上传的图片尺寸小于裁切区尺寸时，系统自动按照裁切区的尺寸成比例的放大图片后显示在裁切区内；l 鼠标向左拖动滑块缩小图片，当图片缩小到即将小于裁切区尺寸时，图片将停止缩小；l 鼠标向右拖动滑块放大图片，当图片缩放到原尺寸的1.5倍时，停止放大，此时图标状态要相应转变为不可用状态；l 点击放大或缩小图标，预览区中的图片相应放大缩小，直至无法缩小或放大，此时图标状态要相应转变为不可用状态；l 图片裁切区的尺寸与上传后的大小尺寸相一致；l 图片裁切区的尺寸可以根据具体产品的需要，设定固定尺寸；l 鼠标可以在预览区内

35、任意移动裁切区的位置，但图片必须填充整个裁切区，不能为空，或部分为空；l 鼠标指针在裁切区内时要变为移动指针形状；l 当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错误！请重新上传！或您上传的图片大小超过200k！请重新上传！。【扩展描述】 无【效果演示】 无 4.7.2 自定义尺寸应用于用户上传一些日常的没有特殊限制的图片设计中，在上传时提供简单方便快捷裁切的功能，上传后可以让用户很快地得到比较理想的图片效果。【设计意图】 减少用户的工作量和学习时间，并充分考虑到使用者的电脑水平，通过简单的图片裁切处理，用户将不需要打开其他的图片处理软件； 快捷方便的裁切处理出用户想要

36、的图片；【应用条件】 用户可以自定义上传或插入的图片尺寸时； 系统对图片大小的约束比较宽泛，在1M以内时；例如：应用于上传照片、文档中插入图片等设计中；【模式描述】组成：图片上传区域 + 图片裁切区域 + 操作按钮 如下图所示：图 435 图片上传图 436 自定义尺寸图片裁切应用规范：l 浏览上传一张图片后，图片全部显示在预览区内；图片较大时根据窗口尺寸自动成比例压缩适应窗口大小；l 默认裁切框最大化显示在预览区内；同时鼠标经过裁切框有明确的指针反馈；l 裁切框的上下左右均可以随意拖拽裁切；l 图片裁切区的尺寸可以根据用户的需要，随意拖动裁切；l 图片裁切区的尺寸大小就是最终图片上传后的实际

37、尺寸大小；l 鼠标可以在窗口内任意拖拽裁切框的位置，但不能超出图片自身显示区；l 当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错误！请重新上传！或您上传的图片大小超过1M！请重新上传！； l 图片的最大尺寸，可以根据具体的产品需要来设定。【扩展描述】 无【效果演示】 查看动画4.8 翻页翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展示。翻页可以拆分为以下几部分：基础页码、上下页、首末页、跳转、Ajax 拖动条、数据统计；根据不同的应用场景，可以选择某一部分或几部分组合起来使用。如下图所示： 图 437 翻页【设计意图】 满足用户在不同场

38、景下的不同需要； 增加操作的易用性；【应用条件】 列表数据条目较多时； 文章篇幅较长时；【模式描述】组成：页码 如下图所示：图 438页码 应用规范：l 页码少于或等于10页时，只显示应该出现的页码数； l 鼠标指针经过和按下某个页码区域（此区域高亮反馈），鼠标弹起后页面切换完成；l 当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接；l 已访问过的页码和未访问过的页码要有所区分；l 显示当前页码的前4页和后4页；前页和最后页除外，默认全部显示；l 设计时，页码的可点区域要相对较大，方便点击；如下图所示 图 439状态标注【扩展描述】1) 上下页 组成：三角符号，“”作为上一页，以

39、“”作为下一页；如下图所示：图 440 上下页状态应用规范：l 列表的页数在11页以上时，要提供“”和“”的链接，l “上一页”和“下一页”在不可点击时变为不可用状态；具体不可用状态参见界面设计规范l 与其他元素保持适当的间隔距离；参见界面视觉规范2) 首末页组成：三角截止符号（“”首页截止图标，以“”末页截止图标）+ 文字（首页、末页），如下图所示： 图 441 首末页 应用规范：l 列表的页数在50页以上时，要提供“首页”“末页(326)”的链接；l 鼠标指针停靠到首页链接上，有明确的反馈提示，点击鼠标主键，页面切换到首页，首页变为不可用状态； l 鼠标指针停靠到末页链接上，有明确的反馈提

40、示，点击鼠标主键，页面切换至最后一页，末页变为不可用状态；如下图所示：图 442 首末页状态标注l 末页的链接上要注明最后一页的页码数； l 与其他元素保持适当的间隔距离；参见界面视觉规范3) 跳转组成：文字（转到页）+输入框+下拉图标+页码拖动条+确定按钮 如下图所示：图 443 跳转应用规范：l 页码超过50页时，显示跳转框； l 鼠标指针移到跳转输入框上，输入框给出反馈，点击鼠标主键，光标被定位到输入框中，此时进入可输入状态，输入目标页数，鼠标点击“确定”按钮或“回车键”，页面刷新后显示信息列表；l 鼠标指针移到跳转输入框上，输入框给出反馈，点击输入框右侧的“三角”小标，下拉出现浮动层，

41、显示出系统默认提供的部分页码，移动鼠标指针到某一页码上，被选定的页码给出高亮反馈，单击后页面刷新显示信息列表；l 用户在输入框中输入数字以外的其它字符时，系统要给出错误提示；如：您输入的字符错误，请输入数字！（具体提示内容参见“提示语规范”）l 用户拖拽滑块移动时，输入框中的页码数值同步变化；l 页码输入后可以通过“确定”按钮和“回车”键两种方式。l 与其他元素保持适当的间隔距离；参见界面视觉规范3) 数据统计 组成：统计提示文字 + 统计数值 + 数量单位 如：共7315条 应用规范：l 页码超过11页时显示；l 显示在“首页”位置之前，保持适当的间隔距离；参见界面视觉规范【效果演示】 查看

42、动画4.9 日期输入4.9.1 通过日历选择日期日历选择是使用日历选择控件进行日期输入。【设计意图】 使用生活中最常见的日历形式，使得日期输入的形式更加直观； 日历选择形式能够使日期输入更加方便、快捷； 能够减少用户错误输入日期的几率；【应用条件】 需要进行日期输入时； 年份跨度较小，在10年以内时；例如：2006年 日期显示的一种形式； 需要进行日期区间选择时；例如：应用于表单中时间的输入、统计查询等设计中；【模式描述】组成：输入框 + 日历的图示 + 日历显示层 如下图所示：图 444 日历输入应用规范：1) 日历l 日历中必须明确标示出当前系统日期；包括：年、月、日。如下图所示：图 44

43、5 日历标注l 年份和月份选择 如下图所示；图 446 年份和月份选择l 默认显示近10年的年份，前10后1；l 从当年往上，滑动滚动条，查看到100个年份；往下，查看到10个年份；l 点击日历中的月份12个月份全部显示在下拉层中；l 当前年份、月份均要区分于其他高亮显示；2) 日期输入l 通过键盘输入日期；当鼠标移至输入框内时，输入框中的内容被全部选中并高亮显示，鼠标移开后恢复；开始键盘输入时，默认内容将被清空；如下图所示：默认状态鼠标在输入框内点击后输入日期后l 通过日历选择输入日期；点击日历图标后，输入框、图标及文字均高亮显示，给出用户明确的反馈；选定日期要高亮显示，同时区分于当前系统日期；如下图所示： 图 447 日历选择3) 错误提示只允许输入0-9这十个数字；只要用户输入数字，无论几位系统自动按照“yyyy-mm-dd”的格式显示给用户；当月份和日期超出正常值时，系统给出提示；如“很抱歉！您输