中国轻工业联合会发布.docx
《中国轻工业联合会发布.docx》由会员分享，可在线阅读，更多相关《中国轻工业联合会发布.docx（23页珍藏版）》请在冰豆网上搜索。
中国轻工业联合会发布
中国轻工业联合会发布
家用和类似用途电器用户界面设计通则
GeneralrulesofUIdesignforhouseholdandsimilarelectricalappliances
（征求意见稿）
在提交反馈意见时，请将您知道的相关专利连同支持性文件一并附上
1前言
本文件按照GB/T1.1－2020《标准化工作导则第1部分：
标准化文件的结构和起草规则》给出的规则起草。
本文件由：
本文件起草单位：
本文件主要起草人：
本文件首次发布。
家用和类似用途电器用户界面设计通则
1范围
本文件规定了家用和类似用途电器产品显示控制区域交互及视觉设计的准则及图标、中英文字体等元素的使用规范。
本文件适用于（但不限于）数码管、彩色触控屏幕等类型。
不包含LCD、OLED及其它超前类显示屏。
本文件适用于冰箱、洗衣机、空调等家用和类似用途产品。
2规范性引用文件
下列文件中的内容通过文中的规范性引用而构成本文件必不可少的条款。
其中，注日期的引用文件，仅该日期对应的版本适用于本文件，不注日期的引用文件，其最新版本（包括所有修改单）适用于本文件。
GB/T16902.4设备用图形符号表示规则-屏幕和显示器用图
GB/T16964.1信息技术字型信息交换-体系结构
GB/T35455家用和类似用途电器工业设计评价规则
3术语和定义
下列术语和定义适用于本标准：
3.1
用户界面设计userinterfacedesign
用户界面（UserInterface，简称UI），在人和机器的互动过程（HumanMachineInteraction）中，有一个层面，即我们所说的界面（Interface）。
用户界面设计包含交互设计和视觉设计。
3.2
交互设计interactiondesign
交互指的是产品与它的使用者之间的互动过程，交互设计是秉承以用户为中心的设计理念，以用户体验度为原则，对互动机制进行分析、预测、定义、规划、描述和探索的工作。
3.3
视觉设计visualdesign
视觉设计是可见信息的体验设计，是针对眼睛功能的主观形式的表现手段和结果。
视觉设计包含视觉传达设计、概念探究、语言挖掘、可视化效果最终呈现等工作。
3.4
图形设计graphicUIdesign
简称GUI，即图形化的人机交互用户界面设计。
3.5
图标icon
图标是具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。
在实际应用中包括：
程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。
图标的视觉体验主要由易学习性、使用效率、主观满意度三方面组成。
3.6
字体font
“字体”通常是指Typeface与Font的合称。
Font是指某套具有同样样式、尺寸的字形；Typeface则是一或多个Font在一或多个尺寸的集合。
在视觉设计标准中使用的字体是指“Font”。
注：
GB/T16964.1中将typeface译为“字体名称”，font译为“字型”。
3.7
按键button
按键分为物理按键（physicalbutton）与触摸按键（touchbutton）。
4产品体验原则
4.1一致性
跨平台的产品体验保持一致性；产品设计迭代遵循一致性规律，培养用户的操作习惯，保持体验的连续性，以便用户更快地接受新产品。
4.2易识别
产品的体验应匹配用户群体的实际状况（年龄、学历、文化、时代等），使用轻松易懂的表达方式；使用用户熟悉的语言和概念，而不是技术术语，晦涩难懂的语言会增加用户对功能的识别难度。
4.3清晰而及时的反馈
产品不该使用户感到无助或迷茫，产品对用户的任何操作都应该给出正确、及时的反馈；产品基于不同场景带给用户不同的体验，当屏与屏之间产生互动的时候（比如产品本机与APP），应提供清晰而及时的反馈；减少用户的等待时间。
4.4美
尊重用户对美的追求，给用户美的享受是产品体验的基本特征；美不仅是产品外观的美感，也是操控体验的舒适之美。
4.5降低记忆负担
降低用户对产品的记忆负担；把需要记忆的内容提高展示层级。
4.6快速获取信息
清晰的信息层级展示，突出重点，弱化和剔除无关信息；及时地显示用户在意的信息；语言简洁，便于理解；产品的使用说明应该是明显的或易于获取的。
4.7防错
在操作过程中给予用户明确的指导；相对于出现错误提示，更好的方式是防止错误的发生。
4.8容错
帮助用户从错误中恢复，将损失降到最低；如果错误已经发生，提供最便捷的解决方案。
4.9趣味性
为用户营造轻松愉悦的操作环境，使用颜色、声音、动画等元素增强产品的操作体验；为用户提供更多趣味性的体验；为用户添加一些惊喜元素，但不能成为用户使用产品的障碍。
4.10人性化的帮助
使用更直观的方式指导用户；让用户理解产品，在有必要时提供帮助文档；信息提示的优先级：
无需提示＞一次性提示＞常驻提示＞帮助文档。
5UI设计通则
5.1通用交互规则
5.1.1锁定/解锁规则
明确区分锁定/解锁状态，有清晰的反馈提示，包括：
显示控制区域锁定及解除、安全锁定（门锁、童锁）及解除。
5.1.2电源规则
【电源】键为触摸按键的情况下，点击面板上的【电源】键接通电源；通电后长按【电源】键2~3秒，断开电源。
【电源】键为物理按键的情况下，按下【电源】键接通电源；再次按下【电源】键即可断开电源。
5.1.3功能显示规则
功能选中时，状态指示灯常亮显示；功能禁用时，状态指示灯熄灭；操作进行中或警示提醒时，状态指示灯按每秒1~2次的频率闪烁。
5.2文字与图标排布规则
当按键内只含有文字，文字与按键水平、垂直居中对齐，如图1a）所示。
当按键内只含有图标，图标与按键水平、垂直居中对齐，如图1b）所示。
当按键与按键外的文字组合时，按键在上，文字在下，按键与文字水平居中对齐，如图1c）所示。
当按键内含有图标和文字，图标在上，文字在下，图标与文字水平居中对齐，如图1d）所示。
为增强按键可阅读性及美观性，所使用的中文字体高度不宜小于2.5mm，最小字距不宜小于0.5mm；英文单词高度不宜小于2mm，字母间距不宜小于0.25mm。
当文字与图标同在按键内时，文字与图标之间的距离不宜小于1mm，当文字位于按键之外时，文字与按键之间的距离不宜小于2mm。
单独文字形式、单独图标形式、图标与文字组合形式的面积都不宜大于按键总面积的60%。
a）
b）
c）
d）
图1文字与图标排布规则示意
5.3图标设计
5.3.1图标形态及比例
在图标设计时须使用基本网格，如图2所示，以保持与其它图标比例一致性，保持几何图形和谐度。
图2基本网格示意
5.3.2图标设计规则
图标设计规则应首先符合GB/T16902.4的要求。
图标的设计应符合用户的认知，且具有一定的示意性。
在进行图标设计时，基本尺寸单位是mm，（使用的基础内框尺寸为10mmx10mm，基本线条粗细不宜小于0.5mm），如图3所示。
图3图标设计基础内框及线条形态示意
所有情况下，须保持图标的缩放比例横纵一致，不宜拉长或压扁，如图4a）所示；放大或缩小图标时，须将线条扩展后进行，不宜随意改变线型粗细比例，如图4b）所示。
正确形式，如图4c）所示。
线的粗细及结尾形态应保持一致，以保障图标整体和谐性。
a）
b）
c）
图4图标设计演示示意
5.4字体标准
5.4.1中英文字体
文字符号应保证字体的可识别性，笔画粗细均匀，符合国标（GB/T35455）中4.3.3节规定。
轮廓化后，中文字体高度不小于2.5mm，字间距不小于0.5mm；英文字体的高度不宜小于2mm，字母间距不小于0.25mm，如图5所示。
图5中英文字体最小尺寸示意
5.4.2段式数码字体
段式数码字体的显示需符合一般用户的认知及容易识别（0、1、2、3、4、5、6、7、8、9）,如图6所示。
段式数码字体各笔画间距不宜小于0.7mm，如图7所示。
图6段式数码字体举例示意
图7数码字体笔画间距示意
段式数码字体不能随意缩放纵横比例，如图8所示。
图8数字使用错误与使用正确情况示意
6各产品UI设计细则
6.1冰箱UI设计规范
6.1.1操作规则
竖型屏显示操作顺序为从上至下，如图9（a）所示；横型屏显示操作顺序为从左至右，如图9（b）所示。
（a）
（b）
图9操作顺序示意
6.1.2基本显示与操作
6.1.2.1.图标显示状态
冰箱通用功能含运行状态、关闭状态、等待状态。
以“Wi-Fi”功能为例：
运行状态，文字与图标常亮显示；关闭状态，文字与图标熄灭；等待状态，文字与图标闪烁显示。
如图10所示。
图10图标显示状态示意
6.1.2.2.解锁
【解锁】图标指示灯亮，表示显示控制区域处于锁定状态，按键在非锁定的状态下，20秒以上不进行操作，则自动进入锁定状态。
锁定状态下，无法进行模式和温度的调节。
在锁定状态下，长按解锁键2~3秒，【解锁】图标指示灯灭，冰箱进入解锁状态，可对模式和温度进行调节，如图11所示。
图11解锁状态示意
6.1.2.3.运行模式切换
已选中模式相对应的指示灯常亮。
在解锁状态下，点击【模式】键，切换模式。
6.1.2.4.单循环式温区温度设定
6.1.2.4.1.冷藏室
解锁状态下，点击【冷藏调节】键。
显示区闪烁显示冷藏室当前设定温度。
指示灯闪烁状态下，连续点击【冷藏调节】键，循环调节温度，如图12所示。
图12冷藏室温度循环调节示意
6.1.2.4.2.变温室
解锁状态下，点击【变温调节】键。
显示区闪烁显示变温室当前设定温度。
指示灯闪烁状态下，连续点击【变温调节】键，循环调节温度，如图13所示。
图13变温室温度循环调节示意
停止操作5秒后，温度显示停止闪烁，设定生效。
6.1.2.4.3.冷冻室
解锁状态下，点击【冷冻调节】键。
显示区闪烁显示冷冻室当前设定温度。
指示灯闪烁状态下，连续点击【冷冻调节】键，循环调节温度，如图14所示。
图14冷冻室温度循环调节示意
6.1.2.5.布局建议
冰箱竖版显示建议布局分为：
显示区、控制区顺序，如图15所示。
图15竖版显示布局示意
冰箱横版显示建议布局分为：
温区显示与选择区、温度显示与调节区、模式选择与显示区。
如图16所示。
图16横版显示建议布局示意
6.1.2.5.1.温区温度设定
按下【温区选择】键，切换至需要调节温度的相应温区。
按下【温度调节】键，温度档位显示相应温区原设定温度，随后每按下一次【温度调节】键，显示区闪烁显示设定温度，继续点击，相应温区设定温度循环显示，不同温区的温度区间不同。
停止操作5秒后，温度显示停止闪烁，设定生效。
6.1.2.5.2.运行模式设定
解锁状态下，按下【模式】键，相应模式开启，模式指示图标点亮，连续点击【模式】键，进行模式切换，已选中模式相对应的指示灯常亮。
6.1.2.5.3.锁定冰箱面板
解锁状态下，20秒及以上不进行操作，则自动进入锁定状态。
6.1.2.5.4.面板显示控制
打开冰箱门或点击显示屏任意键，显示屏点亮；冷藏门关闭20秒后显示屏自动熄灭。
6.2洗衣机UI设计规范
6.2.1全触控显示控制区域
6.2.1.1.显示状态
全触控显示控制方式在滚筒洗衣机和波轮洗衣机上均有应用。
由于滚筒洗衣机某些机型的特殊性，无旋钮+触摸型式的滚筒洗衣机（此型式的滚筒洗衣机的电源键和启动/暂停键为物理按键，其它为触摸）也归为本类。
全触控显示控制方式洗衣机的洗涤程序和附加功能含选中状态、可选状态、禁用状态。
以"预洗"功能为例，如图17所示，选中状态，文字与图标常亮显示。
可选状态，文字与图标半亮显示。
禁用状态，文字与图标熄灭。
图17预洗功能状态示意
6.2.1.2.洗涤操作
6.2.1.2.1.电源及启动/暂停
点击面板上的【电源】键接通电源；通电后长按【电源】键2~3秒，断开电源。
洗涤程序完成后声音提示。
开机后在面板上根据洗涤需要，选择洗涤程序-设置洗涤参数，然后点击【启动/暂停】键开始运行。
在洗衣程序运行状态下，点击【启动/暂停】键；再次点击【启动/暂停】键，继续洗衣程序。
6.2.1.2.2.选择洗涤程序
关机状态下，点击【电源】键开机后，默认选中一个洗涤程序。
通过点击程序图标或文字切换洗涤程序，被选中的洗涤程序常亮显示，未选中程序半亮显示。
若不对洗涤参数进行设置，可直接使用默认参数，点击【启动/暂停】键开始洗涤程序。
6.2.1.2.3.调节洗涤参数
在待机状态下，调整洗涤参数，参数在洗涤程序允许的上下范围内循环。
建议参数调整遵循从小到大、从低到高的顺序，参数被选择时要求反馈清晰。
6.2.1.2.4.选择附加功能
部分洗涤程序可选择附加功能。
选中洗涤程序后，可选的附加功能半亮显示，选中附加功能后相应指示灯常亮。
洗涤参数调节只能在开机且非运行状态下选择，洗衣机运行期间不能更改，如需更改需点击【启动/暂停】键后，方可修改。
6.2.1.2.5.自动投放功能
带有自动投放功能的洗衣机，洗涤剂/柔顺剂自动投放说明如下：
自动投放功能由少至多选择投放量，循环进行；如图18所示。
图18自动投放功能说明示意
6.2.1.2.6.童锁功能
运行状态下长按【童锁】键2~3秒可启用童锁功能；童锁状态下长按【童锁】键2~3秒可解除童锁；待机状态下不能启用童锁功能。
启用童锁后，屏蔽除电源键外的所有按键，点击这些按键时提示“无效音”。
6.2.1.3.布局建议
洗衣机全触控显示控制区域，建议分为：
电源与启动/暂停区、洗涤程序选择区、运行状态显示区、参数调节区，如图19所示。
图19洗衣机全触控显示控制区域布局建议示意
洗涤程序选择：
点击【电源】键开机后，显示屏会显示默认的程序和参数。
用户可以在洗涤程序选择区根据所洗衣物的种类和数量选择洗衣程序。
参数调节设置：
在待机状态下，点击想要调节的参数，参数区域高亮显示，继续点击参数，参数在洗涤程序允许的上下限范围内循环。
附加功能设置：
在选择洗涤程序后可为洗涤程序添加附加功能，如：
预约、留水等。
特色功能调节：
为洗涤程序增加时间维度，点击时间模块调节时间。
6.2.2触控（物理按键）+旋钮显示控制区域
6.2.2.1.显示状态
触控+旋钮显示控制方式仅在滚筒洗衣机上使用，洗涤程序和附加功能共4种显示状态，选中状态、可选状态、禁用状态、运行状态。
以“预洗”功能为例，如图20所示。
选中状态，指示灯常亮显示。
可选状态，指示灯半亮显示。
禁用状态，指示灯熄灭。
运行状态，指示灯闪烁显示。
图20触控+旋钮的显示状态示意
6.2.2.2.洗涤操作
6.2.2.2.1.电源及启动/暂停
点击（按下）【电源】键接通电源；再次点击（按下）【电源】键即可断开电源。
洗涤程序完成后结束音提示，并在1分钟后断开电源。
通电后5分钟内，未进行操作，洗衣机将自动断开电源。
开机后在面板上根据洗涤需要，选择洗涤程序-设置洗涤参数，然后点击（按下）【启动/暂停】键开始运行。
在洗衣机运行状态下，点击（按下）【启动/暂停】键，暂停洗衣程序；再次点击（按下）【启动/暂停】键，继续洗衣程序。
6.2.2.2.2.选择洗涤程序
通过旋转旋钮选择所需要的洗涤程序。
开机时洗衣机自动选择默认的洗涤程序。
旋钮在洗涤程序启动前有效。
6.2.2.2.3.调节洗涤参数
在待机状态下，洗涤参数高亮显示，点击（按下）参数相应按键，参数在洗涤程序允许的上下限范围内循环。
6.2.2.2.4.附加功能选择
在待机状态下，点击（按下）【功能】键设置可附加功能，此功能在运行之前选择，启动后不能更改。
点击（按下）【功能】键循环选择附加功能；对应功能的指示灯常亮，其余未选中功能指示灯半亮，不可选附加功能灯灭。
洗涤操作顺序如图21所示。
图21洗涤操作顺序示意
6.2.3全物理按键显示控制区域
6.2.3.1.显示状态
应用全物理显示控制方式的波轮洗衣机指示灯显示状态分为3种：
选中状态、未选中状态、运行状态。
选中状态，指示灯常亮显示。
未选中状态，指示灯熄灭。
运行状态，指示灯闪烁显示。
如图22所示。
图22全物理显示控制显示状态示意
6.2.3.2.洗涤操作
6.2.3.2.1.电源及启动/暂停按
按下【电源】键接通电源；再次按下【电源】键即可断开电源。
洗涤程序完成后结束音提示，并在1分钟后断开电源。
通电后5分钟内，未进行操作，洗衣机将自动断开电源。
开机后在面板上根据洗涤需要，选择洗涤程序-设置洗涤参数，然后按下【启动/暂停】键开始运行。
在洗衣机运行状态下，按下【启动/暂停】键，暂停洗衣程序；再次按下【启动/暂停】键，继续洗衣程序。
6.2.3.2.2.选择洗涤程序
按下【程序】键选择所需要的洗涤程序。
开机时洗衣机自动选择默认的洗涤程序。
按键在洗涤程序启动前有效。
6.2.3.2.3.调节洗涤参数
在待机状态下，调整洗涤参数，参数在洗涤程序允许的上下范围内循环。
建议参数调整遵循从小到大、从低到高的顺序，参数被选择时要求反馈清晰。
洗涤参数在待机状态下调节，启动后不能更改。
6.3家用空调UI设计规范
6.3.1挂机
6.3.1.1.显示状态
6.3.1.1.1.指示灯
空调挂机的运行程序和附加功能共3种指示灯显示状态：
启动状态、关闭或不可用状态、配网或故障提示状态。
启动状态，指示灯常亮显示。
关闭或不可用状态，指示灯熄灭。
配网或故障提示状态，指示灯闪烁显示。
如图23所示。
图23指示灯状态示意
6.3.1.1.2.温度显示
默认显示设定温度，设定温度随调节循环显示。
故障时，闪烁显示故障提示。
如图24所示。
图24温度显示示意
6.3.1.1.3.Wi-Fi功能
设备未配对，图标灯灭。
设备配对中，图标闪烁。
设备连接成功，图标常亮。
如配对失败，图标灯灭，退出配对模式，闪烁显示故障提示，由手动或自动模式再次发起配对。
6.3.1.2.布局建议
挂机显示区域建议布局如图25所示，分为模式功能显示区与状态显示区。
挂机控制为遥控器操作，距离相对较远，应确保显示区域段式数字及图标的清晰度及可读性。
遥控器与挂机显示区的响应须及时而清晰。
图25挂机显示区域布局示意
6.3.2柜机
6.3.2.1.显示状态
6.3.2.1.1.指示灯
空调柜机的运行程序和附加功能含启动状态，关闭或不可用状态，配网或故障提示状态。
启动状态，指示灯常亮显示。
关闭或不可用状态，指示灯熄灭。
配网或故障提示状态，指示灯闪烁显示。
如图26所示。
图26指示灯状态示意
6.3.2.1.2.温度显示
默认显示设定温度，设定温度随调节循环显示。
在故障时，闪烁显示故障提示。
如图27所示。
图27温度显示示意
6.3.2.1.3.Wi-Fi功能
设备未配对，图标灯灭。
设备配对中，图标闪烁。
设备连接成功，图标常亮。
如配对失败，图标灯灭，退出配对模式，闪烁显示故障提示，由手动或自动模式再次发起配对。
当空调上电后，待机状态下，点击或按下显控区域上的【电源】键，设备开始运行。
开机后运行模式和参数，默认记忆上次运行的参数。
在运行状态下，长按【电源】键2~3秒，设备停止运行，进入待机状态，进入待机状态。
6.3.2.2.布局建议
6.3.2.2.1.通用建议
家用空调柜机的建议布局分为基础功能与高级功能两种形式。
基础功能建议布局如图28所示，分为状态显示区、控制与参数调节区。
通过“模式”、“温度+”、“温度-”、“风速”、“电源”五个按键实现柜机开机、模式选择、温度调节、风速调节等基本功能。
“辅热”等在空调遥控器上运行的部分功能也会同步显示在柜机面板中。
图28基础功能建议布局示意
高级功能建议布局如图29所示，同样分为状态显示区、控制与参数调节区。
在实现空调基本功能的基础上，为温度调节提供按压调节与滑动调节两种形式，提升产品用户体验；增加“风向”、“智能”等功能，提升空调柜机的操控性。
图29高级功能建议布局示意
6.3.2.2.2.状态显示区
显示当前设定参数、环境参数、辅助功能的启用状态、风速档位等必要参数。
6.3.2.2.3.控制与参数调节区
控制开关机、空调运行模式、温度加减与风速档位调节。
开机后，默认上次设置的参数运行，通过点击模式图标，可切换运行模式；通过点击加减按键调节温度。
6.4热水器UI设计规范
6.4.1燃气热水器
6.4.1.1.操作规则
温度、时间等最主要信息优先考虑相对居中显示，如图30所示。
图30温度/时间信息显示位置示意
6.4.1.2.功能调节
6.4.1.2.1.开关机
关机状态下，点击（按下）【电源】键开机，打开设备，电源灯点亮。
待机状态下，点击（按下）【电源】键关机，关闭设备，电源灯熄灭。
6.4.1.2.2.模式选择与水温调节
开机后，点击（按下）【模式】键，运行加热模式，选中后相关加热模式图标在显示屏上点亮。
待机状态下，点击（按下）【上调】键，水温升高；点击（按下）【下调】键，水温降低。
6.4.1.2.3.童锁功能
长按【童锁】键2~3秒，开启或关闭童锁功能。
童锁功能开启，显示屏上的童锁图标点亮；童锁功能关闭，显示屏上的童锁图标熄灭。
童锁功能开启状态下，温度设定范围为50-35℃；童锁功能关闭状态下，温度设定范围为65-35℃。
6.4.1.3.布局建议
燃气热水器显示控制区域分为状态显示区；模式与参数调节区；全局操作区三个区域；有竖版（如图31所示）与横版（如图32所示）两种建议布局。
图31竖版布局建议示意
图32横版建议布局示意
状态显示区需要显示当前温度参数、设定温度参数、加热模式、附加功能的启用状态、童锁等必要参数。
6.4.2电热水器
6.4.2.1.操作规则
操作顺序为从右至左，电源位于显控区域右方，如图33所示。
温度时间等信息优先考虑相对居中显示，如图34所示。
图33电热水器操作顺序示意
图34温度/显示信息显示位置示意
6.4.2.2.功能调节
6.4.2.2.1.开关机
关机状态下，点击（按下）【电源】键开机，打开设备，电源灯点亮。
待机状态下，点击（按下）【电源】键关机，关闭设备，电源灯熄灭。
6.4.2.2.2.模式选择与水温调节
开机后，点击（按下）【模式】键运行加热模式，选中后相关加热模式图标在显示屏上点亮；
待机状态下，点击（按下）【上调】键，水温升高；点击（按下）【下调】键，水温降低。
长按【上调】【下调】键，水温连续上或下调节。
设置温度可在35-75℃范围内调节。
6.4.2.2.3.模式选择
点击（按下）【模式】键运行加热模式，选中后相关加热模式图标在显示屏上点亮。
如图35所示。
图35模式选择示意
6.4.2.2.4.预约功能
开机状态下，点击（按下）【预约】键，可切换“预约1”、“预约2”两个预约时间段。
选中预约时间段后，点击（按下）【上调】键设置小时时段，点击（按下）【下调】键设置分钟时段。
按任意键确认或5秒后无任何操作，系统确认设置。
6.4.2.3.布局建议
电热水器显示
升级会员 