WEB交互设计规范.docxVIP

WEB版交互设计规范文档说明及修订记录文档类型：产品规范适用范围：WEB 版交互设计适用人员：WEB 版交互设计相关人员备注说明：规范中的图为仅为示意图，最终以视觉出具的UI规范为准修订记录：时间修订人修订记录目录文档说明及修订记录2一、交互设计原则61.1.一致性61.2.简洁性61.3.避免干扰和打断61.4.减轻用户记忆负担71.5.及时有效的反馈71.6.用户控制71.7.减少用户犯错81.8.向导化的帮助81.9.适应性及可扩展性81.10.人性化设计9二、基础控件交互102.1.按钮102.2.图标112.3.链接132.4.弹层152.5.浮层182.6.工具提示192.7.翻页控件202.8.页签232.9.日期控件252.10.文本框262.11.表格412.12.单选按钮462.13.复选框492.14.下拉列表522.15.组合框54三、页面框架573.1.一级页面框架573.2.二级及以上页面框架58四、功能命名及相对应图标59五、提示语605.1.下载页605.2.会员页605.3.积分页615.4.群组页615.5.论坛页625.6.注册页625.7.登录页635.8.个人中心635.9.客服中心665.10.体验中心665.11.安全中心66六、其他规范686.1.快捷键规范686.2.跳页规范68交互设计原则在产品设计的过程中，为了保证交互设计的质量，需在设计的过程中遵守以下基本原则：一致性一致性包含外部一致性和内部一致性。外部一致性主要是指产品对用户已有习惯、经验的保持和传递。内部一致性是指系统内部界面、操作的统一性。其目的均是为了减少用户的学习时间、减轻用户的认知负担。外部一致性系统用语应与用户的专业术语保持一致。系统的操作方式应适当继承用户已有的操作习惯。内部一致性系统视觉一致性（整体框架、相同功能页面的布局、操作按钮位置、命名等）。操作行为一致，类似场景的界面设计，其操作方式必须保持一致。外观与使用者的预期一致。简洁性界面应该在满足用户需求的基础上尽量保持简洁，主要包含以下几个方面：界面内容界面不要显示与用户当前操作无关的信息。简明的文字表述文字表述应简明扼要、清晰易懂，内涵丰富，并易于理解和记忆。操作简单减少冗余、不必要的操作步骤，整个操作过程要自然、简单。减轻用户视觉负担界面元素的视觉展现上应简洁，应服务于内容。在颜色的使用上应考虑缓解用户视觉疲劳。避免干扰和打断避免干扰明确用户在特定界面中的首要任务和目标，在设计中应尽可能避免界面上的视觉噪声和其它无用信息的干扰。避免打断让用户的操作连贯顺畅，避免使用模态对话框打断用户的工作。减轻用户记忆负担认知明确产品中界面元素外观要明晰，易于辨别。产品的逻辑意义要合理，导航要及时准确。系统智能化提供默认值，帮助用户记住尽可能多的信息，最低限度地从用户那里索取信息。合理的隐喻和习惯用法使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，为用户的任务提供直观易用的界面。有效的启示提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说明自身可以如何使用的外观属性）。及时有效的反馈操作反馈对用户的每一步操作给出及时的反馈，告知用户操作结果。反馈结果要对用户有用，如操作失败，要告知用户失败的原因,解决方法等。受范性反馈视觉设计上，对于可操作的界面元素应提供即时响应鼠标操作行为的效果。系统状态反馈需要用户等待或系统出现错误时，要及时让用户清楚计算机在干什么。用户控制系统应该让用户感觉自己在控制软件而不是被软件控制，主要表现在如下几个方面：允许定制系统应允许用户根据自己的需要和喜好来定制界面。允许中断操作任何时候，都应允许用户反悔、中断操作。对于不可中断或反悔的操作，应提示用户，应让用户感觉是自己在控制软件。允许返回允许用户返回之前的页面、操作等。清晰合理的信息架构和页面布局清楚的标识用户当前的位置及状态。导航结构清晰，保证用户能够顺利快速的找到所需要的功能或信息，避免层级太深，尽量保证深度不超过3级，宽度在9个信息块之内。导航的设计上应优先宽度、其次是深度。当系统复杂时，可采用主导航+辅助导航的形式。备注：深度过大的网站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。减少用户犯错允许轻松的返回操作在适当的时候，尽量提供撤销功能，使用户可以返回到上一步操作并重新进行选择。让用户可以重新开始提供“恢复初始设置”选项，让用户敢于尝试。避免输入错误对于有特定格式要求的操作，应通过设计来减少用户犯错。如：使用合适的控件，提供合理的默认选项，提示等方式。提供校验等功能对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错误。避免埋怨当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所在，并提供有用的恢复建议。向导