产品设计交互规范

广传电子商务有限公司 文档密级：内部公开产品设计交互规范 1407H 盛腾飞目录目录21概述31.1规范的目的41.2规范适用的范围41.3规范适用的人群42基本原则52.1一致性52.2简洁性52.3避免干扰和打断52.4减轻用户记忆负担52.5及时有效的反馈52.6让用户放松心态，不怕犯错63产品交互通用规范73.1受范性指示73.2操作不可用状态74组件规范94.1表格94.2单元格数据144.2.1单元格数据展示144.2.2通讯录154.3信息列表174.4编号和序号194.4.1编号194.4.2序号204.5注册表单224.6联系方式284.7图片裁切324.7.1固定尺寸324.7.2自定义尺寸344.8翻页354.9日期输入394.9.1通过日历选择日期394.9.2年份跨度较大时的日期选择434.9.3等量条目分隔线454.10高级加密484.11进度条514.12图形化面包屑534.13星级评分544.14保留图标574.15弹出层594.15.1非独占焦点层594.15.2独占焦点层604.15.3局部独占焦点层624.16搜索634.16.1模糊搜索634.16.2精确搜索654.17数据添加684.17.1添加单个文件684.17.2添加多个文件694.17.3添加行734.18排序731 概述规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。1.1 规范的目的 l 在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利有效地进行，以保证产品界面的最终规范化实现；l 从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担，改善产品的用户体验，提升产品的市场竞争力；l 使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。1.2 规范适用的范围广传项目部内的所有产品。1.3 规范适用的人群 参与产品设计的所有人员、前端开发人员及测试人员等。 注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。 772 基本原则以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见界面设计指南。2.1 一致性l 视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视觉上应该保持一致；否则，界面外观要予以区分；l 操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别； l 外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；视觉元素的外观及其操作结果，必须与用户的心理认知相符。2.2 简洁性l 减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息；l 简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆；l 操作简单：减少冗余的操作步骤。2.3 避免干扰和打断l 避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪声和其它干扰。l 避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）打断用户的工作。2.4 减轻用户记忆负担l 认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要及时准确；l 系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索取信息；l 合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，为用户的任务提供直观易用的界面；l 有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说明自身可以如何使用的外观属性）。2.5 及时有效的反馈l 操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事；l 受范性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果；l 系统状态反馈：系统需要用户等待或系统出现错误时，要及时让用户明白现状；l 选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声音、触觉、语言、视觉反馈或是它们的组合）。2.6 让用户放松心态，不怕犯错 l 允许轻松的反向操作：在适当的时候，尽量提供撤销功能，使用户可以返回到上一步操作并重新进行选择；l 让用户可以重新开始：提供“恢复初始设置”选项，让用户敢于尝试；l 避免输入错误：使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表性的默认选项，以及相应的输入帮助，来方便用户准确输入信息；l 提供校验等功能：对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错误；l 避免埋怨：当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所在，并提供有用的恢复建议。3 交互通用规范以下产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。（此部分规范将随着组件模式的不断扩充，进行逐步添加和完善。）3.1 受范性指示受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。l 对象对鼠标指针或手势滑动移动的响应必须即时有效；l 响应形式必须明确清晰（如：鼠标移过按钮或手势滑动，按钮有被按下的效果）；l 受范性表现必须保持高度的一致：同等功能和操作的元素受范性必须相同（如：鼠标指向链接文字时都做同样的变化）；l 在鼠标指针移或手势滑动时对象必须即时恢复原来状态；l 命令按钮也经常被显示为链接样式（文本+下划线），此时为了与普通的链接相区分，必须提供非常明显的不同于链接的受范性指示。3.2 操作不可用状态当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳定，使用户保持恒定和完整的思维模式，减少用户的认知负担。l 显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形态保持一致，仅色彩、灰度和立体效果等发生变化。l 操作不可用的情况主要包括： 菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：图 31菜单操作不可用 工具栏按钮不可用时不能隐藏，应该显示为不可用状态，如下图所示： 图 32 工具按钮不可用 当一个操作在用户进行了某行为（如填写或选择了某选项时）就变为可操作，则该操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：图 33操作命令不可用注：具体不可用状态效果见视觉规范。3.3 有趣高于功能产品必须充满了趣味性，必须充满了COOL，才能形成良好的传播和口碑；索然无趣的产品，最终由客户检验进而丢弃；3.4 功能高于交互明确的功能满足明确的需求，用户不会在意炫酷的交互效果；关键是功能是否能满足客户的潜在需求；3.5 交互高于UI设计的时候，首先追求便捷、快速的特点；然后要围绕具体的功能来实现UI，并不需要专门设立一个功能。 3.6 注意屏幕滚动由于移动终端屏幕特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。尽可能减少垂直方向滚动，尽可能不超过两屏。由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。尽可以隐藏不必要的按纽，突出重点，减少用户的思考。4 组件规范4.1 表格主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。【设计意图】 合理有效的组织数据信息； 帮助用户快速、有效的查看表格数据； 帮助用户快速、准确的完成对表格的操作；【应用条件】 适用于批量数据的展示和维护；【模式描述】组成： 表格标题 + 表格表头+ 表格行间隔线 + 表格行如下图所示：图 41 基础表格应用规范：l 表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：一个半角空格；具体视觉效果参见界面视觉规范。l 表格的表头与表格主体在外观上要有区分；l 表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。 【扩展描述】 根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：图 42 表格操作区分布1）标题列排序： l 表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他列标题显示，如：背景和图标高亮显示； 如下图所示： 图 43 标题列排序l 表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状态；2）表格行选中操作：l 表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状态；当两者都有时，显示复选框在上，图标被覆盖；l 在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列标题中的复选框即可选中当前列表的全部行数据。3）数据筛选区： l 当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行设计；l 页签总宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如下拉框显示的形式等； 如下图所示： 图 44 数据筛选区l 当前分类状态的的页签要高亮显示，要明显区别于其他页签；l 页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、处理中（订单）、处理完成（订单）；l 应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。4）命令按钮区： l 针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导入、导出、新增等；l 按钮的其它细则参见界面视觉规范。5）操作按钮区： l 对表格主体的数据进行操作的按钮放置在此区域。如：删除、发布、下架、上架、审核等；l 当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列表进行操作；如下图所示：图 45 操作按钮区6）翻页区： l 当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的显示；l 翻页在列表下方居中显示；l 翻页的详细功能和模式参见“翻页模式组件规范”。7）单条数据操作区： l 对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分； l 尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑其他的界面布局方式。8）表格列标题区： l 当表格的数据列较多，屏幕显示已经达到最大限度，而这些数据列又必不可少时，允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动条；l 调整列宽度时，要在整体表格边线内进行，以免整体页面变形；l 数据项内容显示部分太长时，省略多余部分并加省略号；鼠标指针停靠时，全部详细内容显示；9）数据条目设置区： l 默认显示当前页面所能显示的最大数据条目数；如：10条/页；l 还要提供几个数值选项，供用户选择；如：20、30、50；4.2 单元格数据4.2.1 单元格数据展示以单元格为单位的数据展示是指应用表格的单元格来描述每个数据对象的展示形式。【设计意图】 让用户更加清晰的浏览信息； 方便查看选中单元格的信息。【应用条件】适用于多数据的查看、浏览和操作；例如：如短信中的收信人、邮件中的收件人等。【模式描述】组成：如下图所示：图 46 单元格数据展示应用规范：l 鼠标经过或选中此类表格的单元格时，行或列的背景色高亮显示。l 此类单元格请支持按“Shift”键进行连续选定，整行整列选定时要有箭头图标反馈给用户。l 此类单元格请支持按“Ctrl”键进行间断选定。注意事项：数据类表格是指表格所描述内容是由多个数据或一组对象（每个对象至少包含两个数据项）组成，对于展示某些信息的表格不属于数据类表格。【扩展描述】 4.2.2 通讯录 通讯录是以单元格数据展示形式为基础的，集添加删除修改等功能于一体的组件。【设计意图】 用户不会再输入通讯录信息之间分隔符，更不会出现由于分隔符输入不正确而导致的错误操作； 为用户显示人名，而不显示地址，方便了查看，同时增加了自动匹配，查找，将新信息增加到通讯录和导出通讯录的功能。【应用条件】 适用于需要用户多次填写同类信息的地方。如：竞价通中的“关键词管理”；日期格式中年份的展现方式；邮件、短信产品的收信人列表。【模式描述】 组成： 如下图所示：图 47 通讯录1应用规范：a）通讯录中无此信息的高亮反馈l 通讯录中存在姓名时表格内只显示姓名；l 通讯录中没有姓名只有手机号码（或email地址）时则显示号码（或email地址）；l 姓名、手机号码（或email地址）两者都无的单元格自动高亮反馈给用户。 b）默认显示 默认显示表格的一个空行；如下图所示： 图 48 通讯录2 整行单元格数据被填满时，表格自动增加一行；如下图所示： 图 49 通讯录3 增加至3行时，出现滚动条；如下图： 图 410 通讯录4 c）自动匹配支持手动输入，可以输入人名或地址；输入地址时自动匹配通讯录中对应的人名； d）快捷操作为高级用户提供快捷操作,输入新人名或新地址时，可以将其添加到通讯录。如下图：图 411通讯录5注意事项： 使用时遇到两个人同名时可以采用“姓名（号码）”的方式显示。【扩展描述】 无4.3 信息列表信息列表是显示单列信息集合的一种视图展示。 【设计意图】 利于信息的展示，方便使用者检索信息； 快速定位信息条目。【应用条件】 单列信息集合； 索引类的信息列表；例如：信息列表多应用于索引类的信息列表，如：新闻列表、目录等。【模式描述】组成：项目符号、列表行，如下图所示：图 412 信息列表应用规范：l 项目符号可以是固定的符号，也可以是具有意义的图标；l 项目符号如果是图标，图标必须与应用场景相符，尽量不使用无意义的仅为装饰作用的视觉效果显著的图标作为项目符号；l 列表行的内容，可以为文字和图标，文字一般为简单的标题；l 列表行的文字内容应该简单易懂，能够明确的反应所要说明的信息。l 列表行内容如果折行，行距必须小于两个记录行之间的段距；l 由于信息列表多为展示信息的条目，因此信息列表的行间距要有一点留白，不要给使用者造成视觉上的负担。【扩展描述】组成：列表标题、单选按钮、多选按钮、分隔线、翻页，如下图所示：图 413 信息列表 2应用规范：l 列表标题是对列表中的信息内容的概括性标题（标题的写法请参见“标题”控件的描述）；l 单选按钮，多选按钮在需要时替换项目符号的位置；l 分隔线：在记录行太多时需要提供分隔线（请参见“分隔线”控件中的相关描述）；l 翻页（请参见“翻页”组件中的相关描述）。4.4 编号和序号4.4.1 编号用来标识某一个对象的唯一号码。一个编号就代表着一个对象。 使用编号能够更好的帮助用户记忆和或管理对象。如下图所示： 图 414 编号示例【设计意图】 更好的方便用户记忆和管理对象； 合理的使用编号，能方便用户更好的进行沟通；【应用条件】 需要用唯一号码来标识对象时； 具有真实、合理、有效的意义；例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等；【模式描述】应用规范：l 编号必需代表一个对象，不要让编号无意义的存在；l 如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视觉层次应该突出。如果用户不常使用编号而通常更关注别的属性；比如人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。【扩展描述】 4.4.2 序号序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示： 图 415 序号示例【设计意图】 使用户更好了解对象的先后顺序或按一定的顺序去了解对象； 更好的展示有先后顺序的数据；【应用条件】 需要标识一组有序对象时；例如：如歌曲排行旁、热销商品排行、点击率排行等设计中；【模式描述】应用规范：l 序号必需代表一个对象在集体中的序列，不要让序号没有意义。l 如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注对象的顺序，请不要使用序号，这样会混淆用户的注意。图 416 错误示例【扩展描述】 4.5 注册表单注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表单的操作。【设计意图】 快速高效的帮助用户完成注册； 尽量减少用户犯错； 在用户出错后，友好的有效的告知错误，并提供解决方案； 给用户提供及时有效的反馈信息。【应用条件】 超过5项表单信息填写修改时； 用户出错的频率较高时； 系统对数据的要求比较严格时；例如：应用于填写注册信息、修改密码等设计中。【模式描述】组成：各输入控件 + 必填项指示 + 格式要求提示 + 对错判断反馈 + 提交按钮 如下图所示：图 417 注册表单应用规范：表单的设计应该遵循简洁的设计原则。在注册填写时，尽可能的只提供必须填写的选项给用户，其他非必填项，可以通过选填或者在日后需要时再进行完善的方式来完成。a) 信息输入对错判断：信息输入正确时，要给与填写正确的反馈；信息输入错误的时候，要给出错误的反馈，并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示：图 418 信息输入对错判断用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要提出简要的解决方法提示。例如：在用户名填写时，可能出现的错误提示；您输入的用户名过短！您输入的用户名中不能包含字符“&（等等）”！你输入的用户名“xxx”已经被占用,请重新输入！b) 输入格式约定（注释文本）： 当用户需要输入某一项时，相应注释文本才显示出来； 对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填写的必要性，如下图所示：图 4193) 验证码： 验证码中的图示字母是随机产生的，但要注意尽可能避免显示一些不易区分的字母和数字，让用户难以辨别（如：“0和o”），如下图所示： 图 420 验证码 验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳； 验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点击链接文字（看不清，换一张）来更换验证码，如下图所示： 图 421验证码示例 用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示），如下图所示： 图 422验证码错误判断4) 提交按钮： 存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由置灰状态变为可用状态，如下图所示：图 423 注册按钮5) 成功告知 表单最终填写提交完成后，要给出“提交成功或注册成功”的相关提示，明确告知用户此操作正确完成；6) 协议 单击“我接受”意味着：您同意并接受服务协议和隐私声明。 【扩展描述】应用规范：1) 密码强弱提示 当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。如下图所示：图 424密码强弱 在输入密码时，旁边显示注释文本：明确注明密码强弱的规则和提示，如下图所示：图 425 密码强弱提示 当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给出正确的解决方法，如下图所示： 图 426 密码强弱提示对照表2) 注册进度提示 根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的进度条提示，明确的告知当前注册的进度。3) 分组线注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用参见“分组线规则”）。【注意事项】 例如婚介交友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。 如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必须使用行的背景颜色来区分必填项与非必填项。4.6 联系方式联系方式是对表单中提供给用户填写详细联系方式一种组件规定。【设计意图】 帮助用户有效、快速的填写联系方式； 减少用户输入错误的几率。【应用条件】 需要用户填写详细联系方式时。例如：网上注册，网上购物填写发货地址。【模式描述】组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。 图 427 联系方式应用规范：l “国家地区”、“省份”和“城市”要有连动关系； “国家地区”：下拉列表选框； “省份”：下拉列表选框，与选择的国家连动（选择“国家地区”，“省份”下拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京”，则后面的“城市”不用再选，自动置灰； “城市”：下拉列表选框，与选择的城市连动（选择“省份”，“城市”下拉框中选项相应变化）。城市下拉列表选项的最后一项为“其他地区”，如下图所示：图 428 其他地区l “联系电话”、“传真号码”和“手机号码”必须拆分成几个字段； “联系电话”：四个输入框字段，分别为：国家代码（可选）区号电话号码分机号； “传真号码”：三个输入框字段，分别为：国家代码（可选）区号传真电话； “手机号码”：两个输入框字段，分别为：国家代码（可选）手机号； “国家代码”此项可根据具体产品的销售人群不同自行选择是否保留；如下图所示：图 429正确示例图图 430错误示例图l 各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省份”、“城市”选择后，国家代码和区号自动显示，如下图所示：图 431 联系方式标注l “联系地址”：一个输入框，等待用户输入文本；l “邮政编码”：一个输入框（6个字符），等待用户输入文本；l 除“国家地区”、“省份”和“城市”是只能让用户选择外，其他的输入框均可手动输入和编辑，用户可以根据自己的需要进行修改。【扩展描述】组成：邮政编码帮助 如下图所示：图 432 邮政编码应用规范： l 用户手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编码的关联提示，供用户参考，l 用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打开新窗口查看本市的邮政编码。图 433 查询邮政编码【注意事项】 各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在键盘上频繁切换输入位置）； 系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的和准确的数据； 用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不清空）。4.7 图片裁切4.7.1 固定尺寸主要应用于需要用户上传固定图片尺寸的设计中，在上传时提供简单裁切的功能。上传后可以让用户得到比较理想的图片效果。【设计意图】 可以进行简单图片裁切处理，而不需要使用其它的图片处理软件 快捷方便的裁切出用户想要的图片；【应用条件】 上传的图片限制固定尺寸时； 系统对图片大小的约束严格，在200k以内时；例如：上传用户头像、产品图片、信息图片等【模式描述】组成： 预览区 + 裁切框 + 放大缩小提示标 + 滑杆 + 图片上传区域 + 清空按钮 + 数据约束 如下图所示：图 434 固定尺寸图片裁切应用规范：l 滑杆、缩放图标、清空按钮默认处于不可用状态；l 浏览上传图片后，滑杆、缩放图标、清空按钮高亮显示；l 浏览上传一张图片后，图片全部显示在预览区内；l 当上传的图片尺寸小于裁切区尺寸时，系统自动按照裁切区的尺寸成比例的放大图片后显示在裁切区内；l 鼠标向左拖动滑块缩小图片，当图片缩小到即将小于裁切区尺寸时，图片将停止缩小；l 鼠标向右拖动滑块放大图片，当图片缩放到原尺寸的1.5倍时，停止放大，此时图标状态要相应转变为不可用状态；l 点击放大或缩小图标，预览区中的图片相应放大缩小，直至无法缩小或放大，此时图标状态要相应转变为不可用状态；l 图片裁切区的尺寸与上传后的大小尺寸相一致；l 图片裁切区的尺寸可以根据具体产品的需要，设定固定尺寸；l 鼠标可以在预览区内任意移动裁切区的位置，但图片必须填充整个裁切区，不能为空，或部分为空；l 鼠标指针在裁切区内时要变为移动指针形状；l 当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错误！请重新上传！或您上传的图片大小超过200k！请重新上传！。【扩展描述】 无4.7.2 自定义尺寸应用于用户上传一些日常的没有特殊限制的图片设计中，在上传时提供简单方便快捷裁切的功能，上传后可以让用户很快地得到比较理想的图片效果。【设计意图】 减少用户的工作量和学习时间，并充分考虑到使用者的电脑水平，通过简单的图片裁切处理，用户将不需要打开其他的图片处理软件； 快捷方便的裁切处理出用户想要的图片；【应用条件】 用户可以自定义上传或插入的图片尺寸时； 系统对图片大小的约束比较宽泛，在1M以内时；例如：应用于上传照片、文档中插入图片等设计中；【模式描述】组成：图片上传区域 + 图片裁切区域 + 操作按钮 如下图所示：图 435 图片上传图 436 自定义尺寸图片裁切应用规范：l 浏览上传一张图片后，图片全部显示在预览区内；图片较大时根据窗口尺寸自动成比例压缩适应窗口大小；l 默认裁切框最大化显示在预览区内；同时鼠标经过裁切框有明确的指针反馈；l 裁切框的上下左右均可以随意拖拽裁切；l 图片裁切区的尺寸可以根据用户的需要，随意拖动裁切；l 图片裁切区的尺寸大小就是最终图片上传后的实际尺寸大小；l 鼠标可以在窗口内任意拖拽裁切框的位置，但不能超出图片自身显示区；l 当上传的图片格式或大小不符合要求时，系统给出提示如：您上传的图片格式错误！请重新上传！或您上传的图片大小超过1M！请重新上传！； l 图片的最大尺寸，可以根据具体的产品需要来设定。【扩展描述】 无4.8 翻页翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展示。翻页可以拆分为以下几部分：基础页码、上下页、首末页、跳转、Ajax 拖动条、数据统计；根据不同的应用场景，可以选择某一部分或几部分组合起来使用。如下图所示： 图 437 翻页【设计意图】 满足用户在不同场景下的不同需要； 增加操作的易用性；【应用条件】 列表数据条目较多时； 文章篇幅较长时；【模式描述】组成：页码 如下图所示：图 438页码 应用规范：l 页码少于或等于10页时，只显示应该出现的页码数； l 鼠标指针经过和按下某个页码区域（此区域高亮反馈），鼠标弹起后页面切换完成；l 当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接；l 已访问过的页码和未访问过的页码要有所区分；l 显示当前页码的前4页和后4页；前页和最后页除外，默认全部显示；l 设计时，页码的可点区域要相对较大，方便点击；如下图所示 图 439状态标注【扩展描述】1) 上下页 组成：三角符号，“”作为上一页，以“”作为下一页；如下图所示：图 440 上下页状态应用规范：l 列表的页数在11页以上时，要提供“”和“”的链接，l “上一页”和“下一页”在不可点击时变为不可用状态；具体不可用状态参见界面设计规范l 与其他元素保持适当的间隔距离；参见界面视觉规范2) 首末页组成：三角截止符号（“”首页截止图标，以“”末页截止图标）+ 文字（首页、末页），如下图所示： 图 441 首末页 应用规范：l 列表的页数在50页以上时，要提供“首页”“末页(326)”的链接；l 鼠标指针停靠到首页链接上，有明确的反馈提示，点击鼠标主键，页面切换到首页，首页变为不可用状态； l 鼠标指针停靠到末页链接上，有明确的反馈提示，点击鼠标主键，页面切换至最后一页，末页变为不可用状态；如下图所示：图 442 首末页状态标注l 末页的链接上要注明最后一页的页码数； l 与其他元素保持适当的间隔距离；参见界面视觉规范3) 跳转组成：文字（转到页）+输入框+下拉图标+页码拖动条+确定按钮 如下图所示：图 443 跳转应用规范：l 页码超过50页时，显示跳转框； l 鼠标指针移到跳转输入框上，输入框给出反馈，点击鼠标主键，光标被定位到输入框中，此时进入可输入状态，输入目标页数，鼠标点击“确定”按钮或“回车键”，页面刷新后显示信息列表；l 鼠标指针移到跳转输入框上，输入框给出反馈，点击输入框右侧的“三角”小标，下拉出现浮动层，显示出系统默认提供的部分页码，移动鼠标指针到某一页码上，被选定的页码给出高亮反馈，单击后页面刷新显示信息列表；l 用户在输入框中输入数字以外的其它字符时，系统要给出错误提示；如：您输入的字符错误，请输入数字！（具体提示内容参见“提示语规范”）l 用户拖拽滑块移动时，输入框中的页码数值同步变化；l 页码输入后可以通过“确定”按钮和“回车”键两种方式。l 与其他元素保持适当的间隔距离；参见界面视觉规范3) 数据统计 组成：统计提示文字 + 统计数值 + 数量单位 如：共7315条 应用规范：l 页码超过11页时显示；l 显示在“首页”位置之前，保持适当的间隔距离；参见界面视觉规范4.9 日期输入4.9.1 通过日历选择日期日历选择是使用日历选择控件进行日期输入。【设计意图】 使用生活中最常见的日历形式，使得日期输入的形式更加直观； 日历选择形式能够使日期输入更加方便、快捷； 能够减少用户错误输入日期的几率；【应用条件】 需要进行日期输入时； 年份跨度较小，在10年以内时；例如：2006年 日期显示的一种形式； 需要进行日期区间选择时；例如：应用于表单中时间的输入、统计查询等设计中；【模式描述】组成：输入框 + 日历的图示 + 日历显示层 如下图所示：图 444 日历输入应用规范：1) 日历l 日历中必须明确标示出当前系统日期；包括：年、月、日。如下图所示：图 445 日历标注l 年份和月份选择 如下图所示；图 446 年份和月份选择l 默认显示近10年的年份，前10后1；l 从当年往上，滑动滚动条，查看到100个年份；往下，查看到10个年份；l 点击日历中的月份12个月份全部显示在下拉层中；l 当前年份、月份均要区分于其他高亮显示；2) 日期输入l 通过键盘输入日期；当鼠标移至输入框内时，输入框中的内容被全部选中并高亮显示，鼠标移开后恢复；开始键盘输入时，默认内容将被清空；如下图所示：默认状态鼠标在输入框内点击后输入日期后l 通过日历选择输入日期；点击日历图标后，输入框、图标及文字均高亮显示，给出用户明确的反馈；选定日期要高亮显示，同时区分于当前系统日期；如下图所示： 图 447 日历选择3) 错误提示只允许输入0-9这十个数字；只要用户输入数字，无论几位系统自动按照“yyyy-mm-dd”的格式显示给用户；当月份和日期超出正常值时，系统给出提示；如“很抱歉！您输入的月份或日期过大，请重新输入！”4) 显示某一时间点要求显示当前系统默认时间不要求显示当前系统默认时间【扩展描述】组成：时间段的文本提示 + 两个日期选择 如下图所示：图 448 一段时间选择应用规范：l 时间段的文本提示“从至”；l 选定起始时间后，起始时间被回显到日期框内 ，同时截至日期日历框自动被打开，不需要用户再次点击，即可选择日期； 4.9.2 年份跨度较大时的日期选择应用于日期选择时的年份会出现跨度较大的设计中，方便快速的帮助用户正确完成时间格式的输入。适用于出生日期等方面。使得信息反馈及时明确，提示明显易懂，减少了误操作和重复操作的次数。【设计意图】 方便用户快速定位年份、月份、日期； 减少用户出错的几率； 符合此类场景下用户的心里预期；【应用条件】 年份的选择跨度较大，在10-90年之间时；例如：适用于出生日期等设计中；【模式描述】组成：输入框 +下拉层 + 年月日的文本提示 整体效果如下图：图 449 年份选择应用规范：1）手动输入年月日的输入均可以通过键盘操作的方式输入，输入内容范围在0-9十个数字之内；如下图所示：未输入鼠标聚焦到输入框输入后2）选择输入年月日的输入均可以通过鼠标点击出现列表选择的方式输入；年的选择方式；如下图所示：图 450 选择年份默认只提供显示90个年份，当前所在年份不足10年时，未来年份默认置灰显示。月的输入方式；如下图所示：图 451 选择月份日的输入方式；如下图所示：图 452 选择日期【扩展描述】无4.9.3 等量条目分隔线 等量条目分隔线是一种对包含大量记录行的列表进行等量条目分隔的视觉指示符号。【设计意图】 使页面更加有条理，看起来更清晰； 让用户清楚自己当前浏览的条目位置； 让用户感觉到一部分告一段落，减轻用户的视觉疲劳和心理负担。【应用条件】 同一页（或同一框架）中显示超过70条记录时； 列表条目之间无逻辑分组的关系。例如：论坛、评论、聊天室。【模式描述】组成：横线 + 条目数指示 如下图所示：120条目数指示横线图 453 分割线应用规范：l 分隔线只是起辅助作用，不是用户注意的重点，视觉上不能过于醒目，不能干扰用户的视觉重心；l 每20条记录出现一条分隔线；l 分隔线中间标注该分隔线分隔截至的条目数或其他指示；l 条目数指示同样不易过于醒目；l 分隔线的分隔效果需要有合适的留白来辅助完成。故在分隔线上方和下方必须留出合适的空间；l 分割线的宽度不能贯穿整个列表区域，两边需要留一些余地（否则无法起到分隔作用，还会将页面割断）。图 454 分割线宽度120【扩展描述】1） 上/下条目跳转组成： 120跳转图示跳转图示图 455 分割线的跳转图示应用规范： l 在分隔线的两端分别显示向上和向下的图示，用户通过点击它们分别可以转到上一个或下一个分隔线处；l 两个图示的视觉感觉不能太强烈，在鼠标移过时可以清晰一些以提供受范式反馈；l 图示要提供提示信息，如下图所示：120图 456 提示信息适用条件：l 在一页的数据量非常大，用户的浏览行为是比较随意和无目的性时可提供这样的上下跳转功能；2） 返回顶部组成： 120返回顶部图示图 457 返回顶部应用规范： l 在分隔线右侧显示“回到顶部”的图示；l 图示的视觉感觉不能太强烈，在鼠标移过时可以清晰一些以提供受范式反馈；l 可以加以文本说明作为反馈形式，如下图所示：120图 458 反馈形式适用条件： 一页的数据量非常大，用户需要回到顶部时；4.10 高级加密 高级加密是用户在设置比较重要的密码时，提供给用户的一种用软键盘设置密码的组件。【设计意图】 用户通过鼠标点击进行密码输入，可以避免系统自动根据敲击键盘的输入获取密码，从而增加安全性，让用户放心，增加用户对系统的信任； 合理的软键盘的外观设计，让用户可以准确和快捷的设置密码。【应用条件】 对密码的安全级别要求较高的场景。例如：银行帐号的密码；容易被盗取的IM帐号密码。【模式描述】组成：软键盘打开/关闭指示图标 + 软键盘图 459 软键盘应用规范：l 在密码输入框附近，必须有一个可以指示打开和关闭高级加密输入软键盘的图示或按钮：图示在打开和收起两种外观上切换；l 对于安全加密要给出相应的提示。l 由于软键盘点击输入的反馈远远不如键盘敲击输入的反馈强烈，再加上输入的密码以星号表示，故无法从这里给用户提供输入何字符的视觉反馈。为了保证用户点击的准确性，必须： 软键盘各按键必须非常清楚，按键与按键之间的边界也必须非常清楚； 如果有大小写指示或者shift切换，一定要明确地表明当前的状态，让用户能清楚地知道点击这个键输入的是什么字符； 鼠标在软键盘上移动，以及点击和释放某个键时，必须提供清晰的视觉反馈：如下图所示：图 460 软键盘示例小写l 每次重新启动程序或打开网络应用，软键盘的布局都应该是不一样的；l 每次键盘的顺序变化，都一定要有规律，让用户方便定位，可以较准确地找到自己想要点击的字符，避免出错，如下图所示： 图 461 顺序变化l 打开软键盘后，鼠标也可定位在输入框中用切换回键盘输入方式；l 当用户用软键盘输入时，文本区无光标指示；当鼠标点击输入区时，输入区内显示光标，指示可键盘输入。【扩展描述】1） 刷新数字区组成：“刷新数字区”提示+ 可变区域视觉提示，如下图所示：图 462 刷新数字区应用规范：l 切换按钮要明确，在位置上要与软键盘区域离开一点距离，以防止用户在点击设置密码时误点，没有留意到键盘顺序已经变化，而记错自己的设置的密码；l 刷新的数字应该与允许用户输入的数字相匹配。例如：银行帐号只能输入数字；l 用户点击切换按钮或图标，不能将软键盘全部打乱。只能提供有限的区域（如：数字区）让用户选择变换顺序，这样可以减少用户的记忆负担；l 可变换的区域在视觉上必须清楚地标识。【注意事项】可以利用安装ActiveX安全控件的方法来更好的解决安全性的问题。4.11 进度条应用于用户上网浏览页面、执行数据操作时进行等待时的设计中； 【设计意图】 避免因为等待引起用户的厌烦和误解； 让用户了解应用程序正在执行并且实时了解执行情况，并给出用户有效的即时反馈； 趣味性的进度条，能增加用户的愉悦性；【应用条件】 系统需要用户长时间等待时； 上传下载的文件较大时； 等待时间超过5秒钟时；例如：数据上传下载、页面浏览、文件打开关闭、复制、打印文档等。【模式描述】组成：进度单位+进度框 如下图所示：图 463 进度条应用规范：l 根据进度情况逐步显示进度单位，直到进度完成；l 进度条的形式参见界面视觉规范。【扩展描述】1) 百分比数值组成：百分比数值 如下图所示：图 464 百分比数值应用规范：l 根据完成的进度，实时的显示出完成部分的百分数。l 执行数据的具体操作时，需要显示百分比数值，为用户显示任务完成信息的实时对比，2)“取消”按钮组成：“取消”按钮 如下图所示：图 465 “取消”按钮应用规范：l 针对某一数据的具体操作时，在等待的过程中，用户可以对操作进行终止操作。此时需要在进度条的基础添加“取消”按钮，并且此按钮要高亮显示，提示用户进程中途可以取消。c)内容提示组成：内容提示 如下图所示： 图 466 内容提示应用规范：l 针对不同的内容，可以添加提示文字，来对进度条进行说明。进度条说明文字后必须添加“.”表示进行中。如下图所示：【注意事项】 设计有意思的趣味性的进度条，不但不会让用户反感还会增加用户的愉悦性。4.12 图形化面包屑应用于标注当前操作所在具体位置的设计中，让用户清晰的知道自己的位置，不至于“迷路”，同时提供便捷的通道，方便用户切换到其他相关页面，图形化面包屑还提供一键回到较高层次的服务，帮助那些通过搜索或者深层次链接进入到特殊但是不合适页面的用户。 【设计意图】 防止用户在浏览过程中迷失； 同时提供多入口，方便用户随时到达目标位置； 方便用户定位在页面中的位置； 合理的有效的利用空间，整合地址栏和面包屑的功能于一体； 面包屑显示用户的当前位置，帮助用户理解所处位置与整个网站的关系。 【应用条件】 系统级别较深，超过3（包含3）级以上时； 用户需要返回上一级页面时；【模式描述】组成：如下图；图 467 图形化面包屑应用规范l 面包屑与地址栏合二为一；l 路径关系要正确，路径文本要与上下文相一致；l 路径文本与分隔符保持一定的间距，如一个全角（具体参见界面视觉规范）；l 在层级之间必须使有一个含义简单明确的分隔符；l 分隔符必须使用“”表示，即体现路径间的层级关系又表示可以点击展开下拉菜单；l 点击分隔符展开下拉菜单，里面包含了当前文件夹下的所有文件夹和文件；其中当前路径文本区别与其他同级路径文本；l 面包屑的最末级，不再提供分隔符；l 每个层次都是可点选的；当你点击它时，你就会替换当前打开文件或文件夹；【扩展描述】无【注意事项】无4.13 星级评分星级评分是规定在用户对某对象进行等级评价时，用直接操作的等级图标来表现的一种形式。【设计意图】 所见即所得的操作方式，方便用户评价，增加评分的使用几率； 用星状的图形化形式来描述等级，是当前用户比较熟知的流行元素，同时也符合用户的心智模型。【应用条件】 应用在进行等级评分时。例如：文章书评、出售物品评价。【模式描述】单击星形直接评级组成：文本指示 + 星级图标 如下图所示：图 468 星级评分 应用规范：l 星级图标前给出文本提示，如：“单击星形直接评级”；l 初始打分区静态显示五颗空白星星；l 当鼠标指针移过星级图标区时： 用户鼠标指针变为手型； 在星上移动时，即时置亮所选星星及之前的所有星星，如下图所示：移至1颗星处：图 469 移至2颗星处：图 470移至3颗星处：图 471 移至4颗星处：图 472 移至5颗星处：图 473 鼠标经过和选中星星时，星星外观要及时变化；l 用户鼠标在某颗星星上按下时，该星星前面的所有星星外观有所变化，视觉效果比在移过时置亮状态的基础上有所加强，表示用户打分成功，如下图所示：移过时：图 474按下时：图 475【扩展描述】组成：文本指示 + 星级图标 + 发表评论提示单击星形直接评级发表评论图 476 发表评论 应用规范：l 当鼠标指针移过“发表评论”提示时，鼠标变为手型，并展开评论层，允许用户填写并提交评论，如下图所示：单击星形直接评级发表评论图 477l 鼠标指针移开该评论层区域，评论层消失；l 用户可以将鼠标定位于文本域，输入评论文本，点提交，评论层消失；l 页面上出现文本框“谢谢您参与评论！”，片刻后消失，如下图所示：单击星形直接评级发表评论谢谢您参与评论！图 478 评论反馈4.14 保留图标 用户经常使用的图标，作为专用图标，避免理解