《电子产品人机交互元素及组件设计指南》标准全文及编制说明

附件2中国工业设计协会电子产品人机交互元素及组件设计指南Design guidelines for Man-machine interactive factor and component of electronic product（草案）xxxxxxxx 发布 发布目次前言 (3)1 范围 (5)2 术语和定义 (5)3 人机交互基本元素与组件 (7)3.1 按键 (7)3.1.1 物理按键 (7)3.1.2 触摸按键 (7)3.2 旋钮 (8)3.3 灯环 (8)3.4 文字 (8)3.5 图标 (8)3.6 菜单 (8)3.7 音效 (8)4 设计原则 (9)4.1 聚焦场景 (9)4.2 便捷高效 (9)4.3清晰简约 (9)5 元素和组件设计指南 (9)5.1 按键设计指南 (9)5.1.1 物理按键 (9)5.1.2 触摸按键 (9)5.2 旋钮设计指南 (10)5.3 灯环设计指南 (10)5.3.1 监测灯环 (10)5.3.2 其他灯环 (10)5.4 文字设计指南 (11)文字包括三种形式： (12)5.5 图标设计指南 (12)5.6 菜单设计指南 (12)5.7 音效设计指南 (12)5.7.1 品牌时刻 (12)5.7.2 音效反馈 (12)前言本标准按照GB/T 1.1-2009给出的规则起草。

请注意本文件的某些内容可能涉及专利。

本文件的发布机构不承担识别这些专利的责任。

本标准归口单位：中国工业设计协会。

本标准起草单位：小米科技责任有限公司、北京服装学院、上海纯米电子科技有限公司、佛山市云米电器科技有限公司、上海小吉互联网科技有限公司本标准主要起草人：李媛媛，林天宇，谢焱，周珏嘉，张明，任恬，朱君，张帆，黄仲健，曹大伟，章发引言随着电子产品数量的快速增长，用户面临着各不相同的交互系统，影响用户的使用体验。

统一的交互元素及组件设计，可以帮助用户快速上手，将已经掌握的产品交互方式复制到新产品的使用中，大大降低用户的学习成本，提升产品的使用体验。

本指南对电子产品人机交互元素及组件设计进行规定，促进行业发展。

电子产品人机交互元素及组件设计指南1 范围本标准规定了电子产品人机交互基本元素与组件、交互方式、交互元素及组件设计的一般要求等。

本标准适用于对电子产品人机交互语言设计提供指导。

2 术语和定义下列术语和定义适用于本标准。

2.1电子产品 electronic product以电能为工作基础的产品，如：空气净化器，新风机，电饭煲，电扇，智能手机，智能手表，台灯，冰箱，洗衣机等。

2.2人机交互 Man-machine interactive人与电子产品之间使用某种方式，如触摸，语音，体感，光感等，为完成确定任务的信息交换过程。

2.3元素 factor某些指定的对象集在一起就成为一个集合，其中每一个对象叫元素。

2.4组件 component在电子或机械设备中组装在一起形成一个功能单元的一组元件。

2.5物理按键 physical button有实体的，通过物理传递力来控制的操作的按键。

2.6触摸按键 touch button可以穿透绝缘材料（玻璃、塑料等）外壳，侦测到手指有效触摸的按键。

2.7短按 short press持续时间小于2秒的触发按键。

2.8长按 long press持续时间大于等于2秒的触发按键。

2.9高频操作 high-frequency operation按照统计的人机互动习惯，及使用的电子产品的特性，出现频率大于其他操作出现频率的操作，如电扇的调档操作相较于定时操作。

为相对参数，相较于低频操作共同定义。

2.10低频操作 low-frequency operation按照统计的人机互动习惯，及使用的电子产品的特性，出现频率低于其他操作出现频率的操作，如手机的重置手机操作相较于返回主界面操作。

为相对参数，相较于高频操作共同定义。

3 人机交互基本元素与组件3.1 按键3.1.1 物理按键物理按键主要分为两种形态：a)一般物理按键，上面标识按键的名称或图标，如图1所示；b）带指示灯物理按键，指⽰灯亮表示某功能正在执行状态中或某功能被激活，如图2所示。

如：电饭煲标准煮饭灯亮时，标准煮饭功能激活。

图1 一般物理按键形态图2 带指示灯物理按键形态3.1.2 触摸按键触摸按键是电子产品的主要交互方式，适用于产品主要功能设置数量较少，且每⼀个设置下的选择数量也较少。

触摸按键嵌在圆盘区域，按键上以丝印工艺显示该按键的图标，如图3所示。

图3 触摸按键形态3.2 旋钮旋钮适用于主要菜单中可选择的并列功能较多的产品，旋钮的选择相较于电容按键的操作成本更低。

3.3 灯环灯环主要用以显示设备当前的工作状态，按用途分为两种类型：a) 监测灯环：监测类型灯环主要用于展⽰当前所监测数据的情况等级，帮助用户了解当前数据情况，如空气净化器、新风机设备上的灯环；b) 其他灯环：作用是辅助提示，主要用以显示设备当前的工作状态。

3.4 文字文字显示分为以下几种：a)中文；b)数字；注：主要用于时间、功能参数等信息。

c)文字的组合。

3.5 图标通过标准的图形化的语义帮助用户理解当前操作或产品状态。

3.6 菜单通过文字，图标等组合形式文字显示当前设备提供的服务或可执行操作的清单。

3.7 音效音效的作用主要分为两种：a) 品牌时刻：加强用户对于品牌的记忆度；b) 音效反馈：在紧急或重要使用场景下，正面的音效反馈提示用户当前操作可以继续或可以进行下⼀步操作，负面的音效反馈则提示用户当前操作需要调整。

4 设计原则4.1 聚焦场景深⼊研究使用场景，区分产品的核⼼功能和基本功能，梳理出高频操作和低频操作。

设立明确的引导和反馈帮助用户聚焦当下。

4.2 便捷高效深入调研用户使用习惯及产品属性，对于人机交互中的高频操作，减少操作步骤，降低操作复杂性，使用户可以便捷高效地完成操作；对于人机交互中的低频操作，合理分配它在系统中所处位置，减少对正常使用的干扰，适当增加操作的复杂性来规避误触的情况。

4.3清晰简约合理利用屏幕空间和多种硬件的组合形式,以清晰简洁的方式引导用户的操作并给予准确的反馈,帮助用户快速上手、降低学习和使用成本，使用户在不同产品之间感受到系统性设计带来的简约之美。

5 元素和组件设计指南5.1 按键设计指南5.1.1 物理按键物理按键的主要功能在按键上以文字或是图标的方式注明。

除却主要功能外，物理按键会使用在组合按键的操作中，触发特别的设置菜单。

物理按键与用户的主要交互方式为短按及长按。

短按操作可伴有有效操作和无效操作的按键音。

长按操作仅在开启低频的特殊状态时会使用到，例如“开启童锁”与“进⼊设置状态”等需要防止误操作的功能。

5.1.2 触摸按键由于屏幕上的触摸按键不易被发现，容易造成使用上的困难，宜在开机状态或是待机状态下点亮屏幕上的按键，引导用户操作。

由于触摸按键与屏幕上显示内容的视觉效果接近，为了帮助用户区分按键与屏幕，可采用以下两种方式加以引导：a)在开机时赋予按键跑马灯效果；b) 在按键周围添加白色边框。

5.2 旋钮设计指南旋钮的旋转设置用于选择任务场景，例如：菜单的选择、设置的选择、时间的设置。

在实际使用中，需要结合菜单的数量或设置的范围去考量旋钮每一格的大小。

对于时间的设置，还可以考虑加⼊旋钮加速旋转的功能。

旋钮设计中可考虑加入短按操作、长按操作以及按住操作等功能，用于特殊操作或紧急制动：a）短按操作可用于确认/取消、启动/暂停等操作场景；b）长按操作可用于特殊操作，例如：洗⾐机的中途加⾐、破壁机的设备设置菜单等；c）按住操作可用于需要手动控制程序进行和停止的功能，例如：破壁机的点动。

5.3 灯环设计指南5.3.1 监测灯环监测灯环可通过不同颜色表征当前监测指标或设备状态，如图4所示：——当白色灯环点亮时，表征设备处于非工作状态下或设备设置状态下；——当绿色灯环点亮时，表征监测指标优秀；——当橙色灯环点亮时，表征监测指标较差或呼唤行为；——当红色灯环点亮时，表征监测指标差或设备异常故障状态。

图4 监测灯环设计5.3.2 其他灯环其他灯环可通过不同颜色表征当前设备状态，如图5所示：——当白色灯环点亮时，表征设备处于非工作状态下或设备设置状态下；——当蓝色灯环点亮时，表征设备模式工作中；——当橙色灯环点亮时，表征呼唤行为；——当红色灯环点亮时，表征设备异常故障状态。

图 5 其他灯环设计其他灯环亦可以从简到只使用单色灯环，灯环仅在设备工作中亮起，需要用户介入某些操作时使用闪烁动效作为提示。

如图6所示：——当无灯环时，表征设备处于非工作状态下或设备设置状态下；——当灯环点亮时，表征设备模式工作中；——当灯环闪烁时，表征呼唤行为或设备异常故障状态。

图 6 其他闪烁型灯环设计5.4 文字设计指南对于文字的主要三种形式设计指南包括：a)中文：考虑屏幕硬件尺寸的限制和实际适用场景用户操作的距离，需要平衡字体的大小和可读性；b)数字：数字字体主要用于时间、功能参数等信息。

考虑到阅读上的舒适感，可选采用等宽字体；时间的表达分两种类型：时间、时⻓、计时器。

有预约功能的产品宜有时钟功能；c)组合：——单行：单行文字仅在内容简单，无需额外的辅助内容提示的情况下使用，适用于菜单、呼唤行为等。

——双行：显示内容需要参数信息、额外的操作提示帮助用户理解、或需要标题帮助用户定位时，可用双行文字显示。

注意调整文字大小凸显信息优先级，适用于菜单、操作提示、工作状态、时间设置等。

——三行：由于屏幕显示限制，三行的情况宜避免出现，仅在必要的参数信息在一行内显示不下的时候使用；或是工作状态下需要显示必要的操作提示。

适用于菜单、工作状态等。

5.5 图标设计指南图标宜清晰易读，既帮助用户更清晰地完成任务，也能够增加视觉趣味性。

5.6 菜单设计指南5.6.1菜单名称产品菜单名称宜控制在5个字以内，并且准确描述该功能。

相类似的产品之间可以采用一致的命名方式，例如：新风机和空气净化器的模式命名。

5.6.2命名规则通过文案表达区分需要用户接着执行的动作和反馈给用户的反馈信息：——动作：动词在前，例如：返回主菜单、上锁关盖。

——状态：名词在前，例如：预约取消、洗涤完成。

5.7 音效设计指南5.7.1 品牌时刻开机时，通过统一的音效在系列产品之间建立品牌记忆点。

5.7.2 音效反馈5.7.2.1 正面音效反馈正面音效反馈可表征如下：a)有效操作：宜通过按键音效反馈提示用户当下操作有效。

适用场景：使用物理按键/电容按键进行相关操作；b)操作成功：宜通过音效的反馈提示用户当下的操作成功。

适用场景：预约成功、重置滤芯/WIFI成功；c)任务启动：宜通过音效提醒用户机器开始执行任务。

适用场景：当前烹饪、洗涤或是料理任务开始；d)任务完成：宜通过音效提醒用户任务已完成；适用场景：当前烹饪、洗涤或是料理任务完成。