产品设计交互规范

产品设计交互规范

常州广传网络技术有限公司

编写：王英

2013年11月

目录

1概述

规范的制定采用UCD（以用户为中心的设计）方法，遵循ISO9241-11部分标准的要求。设计过程以用户的使用习惯和心理需求作为出发点，在认真研究并参考了国内外各种优秀设计的基础上，制定出了适合我集团应用服务产品的设计规范。此外，为保证规范具有良好的可用性和广泛的适用性，UE研究室对设计出的每个模式都进行了严格的用户测试，并对各组件采取了不同应用场景的测试。

该规范从产品交互的通用规则和具体组件的交互模式两个方面进行了规定。在每个组件规范中，给出了模式描述和扩展描述的规范描述，供不同的应用类型和使用场景选择、组合使用。

1.1规范的目的

●在产品开发过程中，给不同部门的相关人员提供统一的规范与指导，使沟通与合作顺利

有效地进行，以保证产品界面的最终规范化实现；

●从一点一滴入手解决公司产品的可用性问题：使操作更人性化，减轻用户的认知负担，

改善产品的用户体验，提升产品的市场竞争力；

●使产品在界面外观和操作行为上形成一致，加强公司产品的品牌化特征。

1.2规范适用的范围

广传项目部内的所有产品。

1.3规范适用的人群

参与产品设计的所有人员、前端开发人员及测试人员等。

注：从正式发文之日起属于新项目范畴的必须遵循此规范，对于已有项目进行重大版本升级的项目要遵循此规范。

2基本原则

以下原则主要用来说明此规范的指导思想与设计依据。简单描述如下，以供该文档的阅读者参考和使用。具体的原则描述请参见《界面设计指南》。

2.1一致性

●视觉一致：在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视

觉上应该保持一致；否则，界面外观要予以区分；

●操作行为一致：类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时

要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别；

●外观与使用者的预期一致：保持对象与其行为相符，保持不同作用的对象外观的不同；

视觉元素的外观及其操作结果，必须与用户的心理认知相符。

2.2简洁性

●减轻视觉负担：使用尽可能少的元素，不提供与当前任务无关的信息；

●简明的文字表述：文字表述必须简明扼要、清晰易懂，内涵丰富，并易于理解和记忆；

●操作简单：减少冗余的操作步骤。

2.3避免干扰和打断

●避免干扰：明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪

声和其它干扰。

●避免打断：让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）

打断用户的工作。

2.4减轻用户记忆负担

●认知明确：产品中界面元素外观要明晰，易于辨别；产品的逻辑意义要合理，导航要

及时准确；

●系统智能化：提供默认值；帮助用户记住尽可能多的信息，最低限度地从用户那里索

取信息；

●合理的隐喻和习惯用法：使用用户熟悉的，符合使用习惯的隐喻，及通用的习惯用法，

为用户的任务提供直观易用的界面；

●有效的启示：提供具有明确引导性的启示来指导用户正确操作（启示：某对象用来说

明自身可以如何使用的外观属性）。

2.5及时有效的反馈

●操作反馈：对用户的每一步操作给出及时的反馈，告知用户成功做了某事；

●受范性反馈：界面对象的设计要在视觉上能提供即时响应鼠标操作行为的效果；

●系统状态反馈：系统需要用户等待或系统出现错误时，要及时让用户明白现状；

●选择合适的反馈形式：根据不同的情况，使用不同的反馈（如声音、触觉、语言、视

觉反馈或是它们的组合）。

2.6让用户放松心态，不怕犯错

●允许轻松的反向操作：在适当的时候，尽量提供撤销功能，使用户可以返回到上一步

操作并重新进行选择；

●让用户可以重新开始：提供“恢复初始设置”选项，让用户敢于尝试；

●避免输入错误：使用合适的选择控件（单选/多选/下拉列表/列表框等），提供最有代表

性的默认选项，以及相应的输入帮助，来方便用户准确输入信息；

●提供校验等功能：对用户的输入和选择等操作进行实时的判断，帮助用户及时更正错

误；

●避免埋怨：当用户犯错时，避免责怪和鲁莽地打断与关闭，要礼貌地指出错误所在，

并提供有用的恢复建议。

3交互通用规范

以下产品的交互设计通则，是所有的交互模式必须遵守的普遍规范，用以统一产品的交互行为。（此部分规范将随着组件模式的不断扩充，进行逐步添加和完善。）

3.1受范性指示

受范性是指鼠标指针移过可点击区域时可点击区域的视觉变化，用以说明该对象是可操作的以及何时可以进行操作。

●对象对鼠标指针或手势滑动移动的响应必须即时有效；

●响应形式必须明确清晰（如：鼠标移过按钮或手势滑动，按钮有被按下的效果）；

●受范性表现必须保持高度的一致：同等功能和操作的元素受范性必须相同（如：鼠标

指向链接文字时都做同样的变化）；

●在鼠标指针移或手势滑动时对象必须即时恢复原来状态；

●命令按钮也经常被显示为链接样式（文本+下划线），此时为了与普通的链接相区分，

必须提供非常明显的不同于链接的受范性指示。

3.2操作不可用状态

当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰），用来使界面稳定，使用户保持恒定和完整的思维模式，减少用户的认知负担。

●显示为不可用状态的按钮或文本必须保持与可用状态的位置、大小、形态保持一致，

仅色彩、灰度和立体效果等发生变化。

●操作不可用的情况主要包括：

菜单性质和导航性质的操作不可用时不能隐藏，应该显示为不可用状态，如下图所示：