GB/T 16902.5-2017 设备用图形符号表示规则 第5部分：图标的设计指南

　　ICS 0 1 . 080 . 0 1 A 22

　　中 华 人 民 共 和 国 国 家 标 准

　　GB/T 16902 . 5—2017

　　设备用图形符号表示规则第 5 部分：图标的设计指南

　　Rulesforthepresentationofgraphicalsymbolsforuseonequipment—

　　part5：Designguidelinesforicons

　　2017-07-31 发布 2018-02-01 实施

　　中华人民共和国国家质量监督检验检疫总局中 国 国 家 标 准 化 管 理 委 员 会

　　发

　　布

　　GB/T 16902 . 5—20 17

　　GB/T 16902 . 5—20 17

　　前 言

　　GB/T 16902 是《图形符号表示规则》系列国家标准之一 。该系列国家标准的结构和名称如下：

　　a) GB/T 16900《图形符号表示规则 总则》。

　　b ) GB/T 16901《技术文件用图形符号表示规则》，分为以下三个部分：

　　— 第 1 部分：基本规则;

　　— 第 2 部分：图形符号(包括基准符号库中的图形符号)的计算机电子文件格式规范及其交换要求;

　　— 第 3 部分：连接点、网络的分类及其编码。

　　c) GB/T 16902《设备用图形符号表示规则》，分为以下五个部分：

　　— 第 1 部分：符号原图的设计原则;

　　— 第 2 部分：箭头的形式和使用;

　　— 第 3 部分：应用导则;

　　— 第 4 部分：图形符号用作图标的重绘指南;

　　— 第 5 部分：图标的设计指南。

　　d) GB/T 16903《标志用图形符号表示规则》，分为以下三个部分：

　　— 第 1 部分：公共信息图形符号的设计原则;

　　— 第 2 部分：理解度测试方法;

　　— 第 3 部分：感知性测试方法。

　　本部分是 GB/T 16902 的第 5 部分。

　　本部分按照 GB/T 1 . 1—2009 给出的规则起草。

　　本部分由全国图形符号标准化技术委员会(SAC/TC 59)提出并归口 。

　　本部分起草单位：中国标准化研究院、华北电力大学、中机生产力促进中心、轻工业标准化研究所、东莞市美誉标识有限公司。

　　本部分主要起草人：陈永权、邹传瑜、程文刚、高永梅、张亮、白殿一、杨柞年、曾俊杰。

　　GB/T 16902 . 5—20 17

　　设备用图形符号表示规则第 5 部分：图标的设计指南

　　1 范围

　　GB/T 16902 的本部分界定了图标的作用和分类，给出了图标的设计程序、基本设计原则和设计指南。

　　本部分适用于通过设备屏幕呈现和使用的图标的设计。

　　注 ：图标除了本部分中规定的图形外还具有其他多种属性，本部分不给出这些属性和文件类型的具体细节。

　　2 规范性引用文件

　　下列文件对于本文件的应用是必不可少的。 凡是注 日期的引用文件，仅注 日期的版本适用于本文件 。凡是不注日期的引用文件，其最新版本(包括所有的修改单)适用于本文件。

　　GB/T 5465 . 2 电气设备用图形符号 第 2 部分：图形符号

　　GB/T 15565(所有部分) 图形符号 术语

　　GB/T 16273(所有部分) 设备用图形符号

　　GB/T 16900 图形符号表示规则 总则

　　GB/T 16902 . 4 设备用图形符号表示规则 第 4 部分：图形符号用作图标的重绘指南

　　GB/T 20002 . 2 标准中特定内容的起草 第 2 部分：老年人和残疾人的需求

　　ISO 7000 设备用图形符号 索引和一览表(Graphical symbols for use on equipment—Index and synopsis)

　　3 术语和定义

　　GB/T 15565 界定的以及下列术语和定义适用于本文件。

　　3.1

　　图标 icon

　　呈现在设备屏幕上表示计算机系统对象和(或)应用程序功能的可交互符号。

　　[修改 GB/T 15565 . 1—2008,定义 2 . 5 . 13 . 3]

　　注 ：图标是设备用图形符号的一种。

　　3.2

　　图标族 iconfamily

　　具有相同的基本图标和不同附加元素的一组图标。

　　3.3

　　可分辨性 discriminability

　　一个图标与可能出现在其相邻空间或相似使用环境中的其他图标之间易于区分开的程度。

　　3.4

　　可识别性 recognisability

　　基于以前相同或相似图标的识别经验而识别出一个新图标的容易程度。

　　GB/T 16902 . 5—20 17

　　3.5

　　可学习性 learnability

　　在理解图标的含义后，图标所表示的对象和(或)功能能够被回想起来的容易程度。

　　3.6

　　像素 pixel

　　数字图像中最小的显示元素。

　　3.7

　　状态 state

　　与图标当前所允许的交互动作相关的图标情形。

　　注 ：图标的不同状态，如“选中”“可用”“不可用”等。

　　3.8

　　变化 variations

　　保留了可分辨性等基本感知特征的允许使用的图标修改。

　　注 ：图标包括两种基本变化，即状态变化和风格变化。

　　3.9

　　状态变化 statevariations

　　图标用于表示状态信息的变化。

　　3 . 10

　　风格变化 stylevariations

　　图标为适应特定设计风格或特定软件系统技术的变化。

　　4 图标的作用和分类

　　4 . 1 图标的作用

　　图标在图形界面中用以表示对象和(或)功能，尤其适用于在单个应用程序范围内和多个应用程序间重复使用的常见对象和(或)功能。 图标具有以下作用：

　　— 节约屏幕显示空间;

　　— 有助于快速识别图形界面上的对象或功能;

　　— 在图形界面中为对象和功能提供了一种不依赖于文化和语言的表示方式，从而使软件界面适用于尽可能多的用户。

　　4 . 2 图标的分类

　　根据使用环境和使用目的不同，图标可以有不同的分类。 常见的图标分类有：

　　— 根据图标的功能，图标可划分为对象图标、指针图标、工具图标和操作图标等;

　　— 根据图标在图形界面上的表现形式，图标可划分为静态图标、根据用户输入改变的交互式图标和根据设备状态改变的动态图标等;

　　— 根据图标的外观，图标可划分为平面效果图标和立体效果图标等。

　　5 设计程序

　　设计图标时，应遵守 GB/T 16900 规定的标准化程序并按照以下步骤进行设计：

　　a) 描述图标的用途、使用环境及使用方法;

　　b ) 确定图标的目标使用人群和特殊需求(见 GB/T 20002 . 2) ;

　　GB/T 16902 . 5—20 17

　　c ) 查询 GB/T 5465 . 2、GB/T 16273、ISO 7000 等标准，确定是否存在含义相同或相近的标准图形符号可供改编或符号要素可供选用;

　　d) 按照第 6 章的规定进行图标的图形设计;

　　e) 形成可能的图标设计方案;

　　f) 对图标的易理解性、可分辨性、可识别性等感知质量进行测试，并对设计进行适当调整;

　　g) 为图标创建唯一的名称并编写清晰、明确的说明。

　　6 设计指南

　　6 . 1 通则

　　6 . 1 . 1 一致性

　　一致性是图标设计中的重要考虑因素，图标设计中需要考虑的一致性主要包括：

　　a) 图标的含义在同一应用程序中应始终保持一致;

　　b ) 当一个图标的图形用作其他图标的要素时，在所有使用该要素的图标图形中该要素的含义应保持一致，示例见图 1 ;

　　注：表示邮件的图形可与表示文件夹或文档的图形组合形成新的图标，并在两个新图标中保持含义不变。

　　图 1 图标图形用作其他图标要素的示例

　　c) 宜成套设计图标，一套图标内每个图标的视觉外观宜保持一致。 即同一套图标中，所有图标均宜以相似的图形风格和真实程度呈现。

　　注：一致性将视觉语言结合起来，可以使用户对图标更快地理解和联想。

　　6 . 1 . 2 可分辨性

　　6 . 1 . 2 . 1 同一图标的不同状态间应具有可分辨性，即图标当前状态(包括但不限于：选中、可用、不可用)的图形应与该图标表示其他状态的图形之间有清晰的区分。

　　6 . 1 . 2 . 2 使用在同一应用程序中的多个图标相互之间应具有可分辨性。 在设计图标时，图标的轮廓形状宜尽可能多样化以便易于区分和识别。

　　6 . 1 . 2 . 3 图标在使用环境中与包括背景在内的其他相邻对象之间应具有可分辨性。

　　6 . 1 . 2 . 4 在图标的预期使用环境中，无论状态变化还是风格变化均应始终保持其可分辨性。

　　6 . 1 . 3 易理解性和可学习性

　　6 . 1 . 3 . 1 图标在其预期使用环境中宜具有易理解性。 如果首次理解不是图标的可用性需求，则图标宜具有可学习性。

　　6 . 1 . 3 . 2 在图标的预期使用环境中，无论状态变化还是风格变化均应始终保持其易理解性。

　　6 . 1 . 3 . 3 图标的设计宜考虑到老年人和残障人士的使用需求。 方便老年人和残障人士使用的图标在设计上宜强调功能如何满足用户的使用需求，不应在图标的图形中突出用户的缺陷。

　　GB/T 16902 . 5—20 17

　　6 . 1 . 4 隐喻

　　6 . 1 . 4 . 1 隐喻是图标设计中的一种基本表现途径，图标利用图形通过隐喻来传达信息。 使用有效的隐喻可增加图标的可识别性，只有在无法使用隐喻方法时才考虑使用抽象的几何符号。

　　注：隐喻是一种直接把甲事物(喻体)当做乙事物(本体)的修辞方式。 在隐喻环境(例如，桌面)中，图标提供了对象与其功能之间的在视觉及概念上的关联。

　　6 . 1 . 4 . 2 图标所表示的任何隐喻都宜与该图标的功能直接相关。 在使用隐喻设计图标时：

　　a) 应选择合适的隐喻对象;

　　b ) 宜考虑隐喻对象与用户认知的一致性;

　　c) 宜确保隐喻的唯一性。

　　6 . 2 现有图形符号或符号要素的选取

　　6 . 2 . 1 应优先选用含义相同或相近的标准设备用图形符号改编为图标，标准设备用图形符号在改编成相应的图标时应符合 GB/T 16902 . 4 的要求，示例见图 2 。

　　GB/T 5465 . 2(5440)“可编程定时器，一般符号”

　　改编为图标的 GB/T 5465 . 2(5440)

　　(放大尺寸和图标尺寸)

　　图 2 标准图形符号改编为图标的示例

　　6 . 2 . 2 如果没有标准的设备用图形符号可供改编，则设计图标时：

　　a) 宜使用其他广泛认知的符号或符号要素;

　　b ) 宜使用通用的图形，隐去图形的次要细节;

　　c) 宜避免使用特定文化专有的符号。

　　注：特定文化专有符号包括但不限于：

　　— 神学和宗教符号;

　　— 身体部位和手势;

　　— 颜色的特定应用等。

　　6 . 3 图标的绘制

　　6 . 3 . 1 可以使用图标编辑器实用工具或直接使用像素绘图方式绘制图标，并通常在一个正方形或矩形的网格(单元格)内使用色块(代表单个像素)绘制。

　　6 . 3 . 2 单元格上图标的图形轮廓所围成的区域内宜为不透明，图形轮廓以外的其他区域可为不透明、透明或半透明。

　　6 . 3 . 3 设计图标时宜考虑到图标及其关键细节以不同尺寸、不同分辨率或不同纵横比显示时的需求，确保图标及其关键细节能够保持其易理解性和可分辨性。

　　GB/T 16902 . 5—20 17

　　6 . 3 . 4 宜基于图标的预期使用环境优化图标的设计尺寸，以确保图标在图形界面上具有足够的可选择性的同时能够与相邻的其他界面元素分隔开，避免用户误选。

　　注：常见的图标尺寸有 16 × 16 像素、32 × 32 像素、48 × 48 像素、64 × 64 像素等。

　　6 . 3 . 5 在绘制图标时，线条的绘制、层叠要素的处理等具体绘制方法宜参考 GB/T 16902 . 4 给出的指

　　南。例如，按 11.5°、22.5°、45.0°、67.5°和 78.5°绘制斜线，即像素形成的台阶以 1 ∶ 3、1 ∶ 2、1 ∶ 1、2 ∶ 1 和

　　3 ∶ 1 的比率变化，能够确保所绘制的斜线具有规则的外观，如图 3 所示。

　　图 3 规则斜线示例(放大尺寸和原始尺寸)

　　6 . 4 文字的使用

　　宜避免在图标的图形中使用特定语言的文字或缩略语，除非所用文字的含义能够被广泛识别和易于理解。

　　注：在图标图形中使用文字将使图标与特定语言相关，因而会限制图标的可使用性。 文字还会延长图标的识别时间，而且即使提供了解释，某些用户也可能无法理解。

　　6 . 5 颜色的使用

　　6 . 5 . 1 通常情况下，颜色不应作为区分图标或图标状态的唯一信息要素，除非颜色本身就是图标的功能性要素。

　　6 . 5 . 2 在图标中使用颜色传递某种含义时：

　　a) 不宜将颜色用作传递该含义的主要手段;

　　b ) 颜色在该应用程序中的含义宜始终保持一致;

　　c) 该颜色宜能够被用户迅速识别;

　　d) 该颜色宜来自系统提供的标准调色板。

　　注：除黑色和白色外，图标中使用的其他颜色最好不要超过 6 种 。

　　6 . 5 . 3 宜使用可以被广泛识别的颜色和颜色组合作为图标的主要颜色。

　　注：具有色彩感知障碍的人很难辨别“红-绿”和“蓝-黄”这样的颜色组合。

　　6 . 5 . 4 图标中的颜色宜使用不同的色调和亮度，以确保在不同类型的显示屏(例如，黑白显示屏)上能够正常区分图标中不同颜色的组成部分。

　　6 . 6 变化

　　6 . 6 . 1 状态变化

　　6 . 6 . 1 . 1 图标的不同状态宜使用独特的状态变化进行区分，以便通过图标状态的改变显示某一进程的结束、某一功能被阻止或功能无法使用。 图标不同的状态变化宜形成一个图标族。

　　6 . 6 . 1 . 2 图标状态变化的使用应具有一致性，例如，用来表示对象图标状态变化的约定同样也适用于程序中的其他所有图标。 图标表示不同状态的变化如图 4 所示。

　　GB/T 16902 . 5—20 17

　　a)关闭的文件夹 b)选中的文件夹 c)不可用的文件夹

　　图 4 图标表示不同状态的变化示例

　　6 . 6 . 2 风格变化

　　6 . 6 . 2 . 1 图标为适应特定的设计风格或特定的系统技术而进行变化时，应保留图标的可分辨性、可识别性等基本感知特征。

　　6 . 6 . 2 . 2 图标中使用的线条风格变化可涉及如下线条属性：线型、线宽、线条末端、线条连接以及线条颜色等。 图 5 所示是图标在线宽改变情况下仍保持可分辨性的示例。

　　图 5 图标基于线宽属性的变化示例

　　6 . 6 . 2 . 3 图标中使用的有关拐角的风格变化可涉及如下拐角属性：圆角、直角、斜角等。 图 6 所示是不同拐角属性的示例。

　　图 6 不同拐角属性的示例

　　6 . 6 . 2 . 4 在图标中通过添加层次细节可增加图标的真实感。 使用摄影图片或添加阴影等可获得图标的立体效果。 图 7 所示是图标在层次细节上变化的示例。

　　图 7 图标层次细节变化的示例

　　6 . 6 . 2 . 5 在设计图标时宜考虑到操作系统可能自动添加的一些附加要素，例如，在计算机桌面上呈现的图标，其下部通常会被自动添加“快捷方式”箭头等。 附加要素引起的风格变化不宜降低图标的可识别性。

　　GB/T 16902 . 5—20 17

　　6 . 7 图标的专用版本

　　在现有图标中可通过附加其他图形或符号要素来限定该图标的原有含义，生成专为某种对象或功能使用的图标，即图标的专用版本，如图 8 所示。

　　注：在表示“文档”的图标中插入其他符号，通过该符号提供更为专用的信息，新图标表示特定类型的文档。

　　图 8 生成图标专用版本的示例

　　6 . 8 图标的动画效果

　　使用带动画效果的图标能够吸引用户的注意。 当图标使用动画效果时不应降低图标的易理解性和可识别性。 动画的闪烁频率范围宜为 1 Hz~3 Hz之间，占空比宜为 50%。

　　注：最大 3 Hz 的闪烁频率是为保护光敏性癫痫人群所做出的规定。

　　7 测试

　　7 . 1 图标设计完成后宜以不同的使用环境对新图标的易理解性、可分辨性、可识别性等进行测试并对设计进行适当调整。

　　7 . 2 在对图标进行测试时，参与测试的目标人群宜包括老年人和残障人士。