GB/T 16902.5-2017 Rules for the representation of graphic symbols for equipment Part 5: Design guidelines for icons GB/T16902.5-2017 |tt||Standard compressed package decompression password: www.bzxz.net
This part of GB/T 16902 defines the role and classification of icons, and gives the design procedures, basic design principles and design guidelines for icons. This part applies to the design of icons presented and used through the device screen. Note: Icons have many other attributes in addition to the graphics specified in this part. This part does not give specific details of these attributes and file types.　

ICS 01.080.01
National Standard of the People's Republic of China
GB/T16902.5—2017
Rules for the presentation of graphical symbols for use on equipment-Part 5: Design guidelines for icons2017-07-31Released
General Administration of Quality Supervision, Inspection and Quarantine of the People's Republic of ChinaStandardization Administration of China
2018-02-01Implementation
GB/T16902.5—2017
Normative referenced documents
Terms and definitions
Function and classification of icons
Function of icons
Classification of icons
Design procedure
Design guide
Selection of existing graphic symbols or symbol elementsDrawing of icons
Use of text
Use of color
Special version of icons
Animation effect of icons
GB/T16902.5—2017
GB/T16902 is one of the national standards in the series of "Rules for the Representation of Graphic Symbols". The structure and name of this series of national standards are as follows: GB/T16900 "General Rules for the Representation of Graphical Symbols". a)
b) GB/T16901 "Rules for the Representation of Graphical Symbols for Technical Documents", divided into the following three parts: - Part 1: Basic rules;
- Part 2: Computer electronic file format specifications for graphic symbols (including graphic symbols in the reference symbol library) and their exchange requirements;
Part 3: Classification and coding of connection points and networks. GB/T16902 "Rules for the Representation of Graphical Symbols for Equipment", divided into the following five parts: e
Part 1: Design principles for symbol originals; - Part 2: Form and use of arrows
- Part 3: Application guidelines;
- Part 4: Redrawing guidelines for graphic symbols used as icons: - Part 5: Design guidelines for icons.
d) GB/T16903 "Rules for the Representation of Graphical Symbols for Signs" is divided into the following three parts: Part 1: Design principles for public information graphic symbols; Part 2: Comprehension test methods; Part 3: Perceptual test methods.
This part is Part 5 of GB/T16902. This part was drafted in accordance with the rules given in GB/T1.1-2009. This part was proposed and managed by the National Technical Committee for Standardization of Graphic Symbols (SAC/TC59). The drafting units of this part are: China National Institute of Standardization, North China Electric Power University, China Machinery Productivity Promotion Center, Light Industry Standardization Research Institute, Dongguan Meiyu Sign Co., Ltd.
The main drafters of this part are: Chen Yongquan, Zou Chuanyu, Cheng Wengang, Gao Yongmei, Zhang Liang, Bai Dianyi, Yang Zhuinian, Zeng Junjie. 1 Scope
Rules for the representation of graphic symbols for equipment
Part 5: Design guidelines for icons
GB/T16902.5—2017
This part of GB/T16902 defines the role and classification of icons, and gives the design procedures, basic design principles and design guidelines for icons.
This part applies to the design of icons presented and used through the device screen. Note: Icons have many other attributes in addition to the graphics specified in this part. This part does not give specific details of these attributes and file types. 2 Normative references
The following documents are indispensable for the application of this document. For any dated referenced document, only the dated version applies to this document. For any undated referenced document, its latest version (including all amendments) applies to this document. GB/T5465.2 Graphical symbols for electrical equipment Part 2: Graphical symbols GB/T15565 (all parts) Terminology of graphic symbols GB/T16273 (all parts) Graphical symbols for equipment GB/T16900 Rules for the representation of graphic symbols General GB/T16902.4 Rules for the representation of graphic symbols for equipment Part 4: Guidelines for redrawing of graphic symbols used as icons GB/T20002.2 Drafting of specific content in standards Part 2: Needs of the elderly and disabled ISO7000 Graphical symbols for use as equipment Index and Synopsis
3 Terms and definitions
The terms and definitions defined in GB/T15565 and the following terms and definitions apply to this document. 3.1
Icon icon
An interactive symbol that represents a computer system object and (or) application function, presented on the device screen. [Modified GB/T15565.1—2008, definition 2.5.13.3] Note: An icon is a type of graphic symbol for equipment. 3.2
icon familyiconfamily
A group of icons with the same basic icon and different additional elements. 3.3
discriminabilitydiscriminability
The degree to which an icon can be easily distinguished from other icons that may appear in its adjacent space or similar usage environment. 3.4
recognisability
The ease with which a new icon can be recognized based on previous experience with the recognition of the same or similar icons. 1
GB/T16902.5—2017
learnability
The ease with which the object and (or) function represented by the icon can be recalled after understanding the meaning of the icon. 3.6
Pixelpixel
The smallest display element in a digital image.
Statestate
The state of an icon related to the interactive actions currently allowed by the icon. Note: Different states of an icon, such as "selected", "available", "unavailable", etc. 3.8
Variations
Allowable icon modifications that retain basic perceptual characteristics such as distinguishability Note: Icons include two basic variations, namely state variations and style variations. 3.9
Statevariations
Icons are used to indicate changes in state information
Stylevariations
Icons are used to adapt to changes in specific design styles or specific software system technologies. 4 Roles and classification of icons
4.1 Role of icons
Icons are used to represent objects and (or) functions in graphical interfaces, especially for common objects and (or) functions that are reused within a single application and between multiple applications. Icons have the following functions: - Save screen display space;
2 Help to quickly identify objects or functions on the graphical interface: - Provide a cultural and language-independent representation method for objects and functions in the graphical interface, so that the software interface is suitable for as many users as possible.
4.2 Classification of icons
Depending on the usage environment and purpose, icons can be classified differently. Common icon classifications include: - Based on the function of the icon, icons can be divided into object icons, pointer icons, tool icons, and operation icons, etc.; - Based on the form of the icon on the graphical interface, icons can be divided into static icons, interactive icons that change according to user input, and dynamic icons that change according to device status, etc.; - Based on the appearance of the icon, icons can be divided into flat effect icons and three-dimensional effect icons, etc. 5 Design procedures
When designing icons, the standardized procedures specified in GB/T16900 should be followed and the design should be carried out according to the following steps: a) Describe the purpose, usage environment and usage method of the icon; b) Determine the target user group and special needs of the icon (see GB/T20002.2); 2
GB/T16902.5—2017
c) Check GB/T5465.2GB/T16273, ISO70Q0 and other standards to determine whether there are standard graphic symbols with the same or similar meanings that can be adapted or symbol elements that can be selected; d) Carry out graphic design of icons in accordance with the provisions of Chapter 6 e) Form possible icon design plans;
Test the perceived qualities of icons such as comprehensibility, distinguishability, and recognizability, and make appropriate adjustments to the design; f)
g) Create a unique name for the icon and write a clear and unambiguous description. 6 Design Guidelines
6.1 General
6.1.1. Consistency
Consistency is an important consideration in icon design. The consistency that needs to be considered in icon design mainly includes: a) The meaning of icons should always be consistent in the same application; b) When the graphics of an icon are used as elements of other icons, the meaning of the element should be consistent in all icon graphics that use the element. See Figure 1 for an example;
Note: The graphic representing an email can be combined with the graphic representing a folder or document to form a new icon, and the meaning remains unchanged in the two new icons. Figure 1 Example of icon graphics used as elements of other icons c) Icons should be designed as a set, and the visual appearance of each icon in a set should be consistent. That is, in the same set of icons, all icons should be presented in a similar graphic style and degree of authenticity. Note: Consistency combines visual language, which can enable users to understand and associate icons more quickly. 6.1.2 Distinguishability
6.1.2.1 Different states of the same icon should be distinguishable, that is, the graphic of the current state of the icon (including but not limited to: selected, available, unavailable) should be clearly distinguished from the graphic of the icon representing other states. 6.1.2.2 Multiple icons used in the same application should be distinguishable from each other. When designing icons, the outlines of icons should be as diverse as possible to make them easy to distinguish and identify. 6.1.2.3 Icons should be distinguishable from other adjacent objects, including the background, in the environment in which they are used. 6.1.2.4 In the expected environment in which the icon is used, the icon should remain distinguishable regardless of changes in state or style. 6.1.3 Understandability and learnability www.bzxz.net
Icons should be understandable in their expected environment. If first-time understanding is not a usability requirement for icons, icons should be learnable.
6.1.3.2 In the expected environment in which the icon is used, the icon should remain understandable regardless of changes in state or style. 6.1.3.3 The design of icons should take into account the needs of the elderly and people with disabilities. Icons that are convenient for the elderly and people with disabilities should emphasize how the function meets the user's needs in design, and should not highlight the user's defects in the icon graphics. 3
GB/T16902.5-—2017
6.1.4 Metaphor
6.1.4.1 Metaphor is a basic way of expression in icon design. Icons use graphics to convey information through implicit means. Using effective metaphors can increase the recognizability of icons. Abstract geometric symbols should only be considered when implicit means cannot be used. Note: Metaphor is a rhetorical method that directly regards thing A (metaphor) as thing B (subject). In a metaphorical environment (for example, the desktop), icons provide visual and conceptual associations between objects and their functions. 6.1.4.2 Any metaphor represented by an icon should be directly related to the function of the icon. When using metaphors to design icons: a) choose appropriate metaphor objects; b) consider the consistency between the metaphor object and user cognition; c) ensure the uniqueness of the metaphor.
6.2 Selection of existing graphic symbols or symbol elements 6.2.1 Standard equipment graphic symbols with the same or similar meanings should be preferred for adaptation into icons. Standard equipment graphic symbols should comply with the requirements of GB/T16902.4 when adapted into corresponding icons. See Figure 2 for an example. L
GB/T5465.2 (5440) "Programmable timer, general symbol" adapted into an icon of GB/T5465.2 (5440) (enlarged size and icon size)
Figure 2 Example of standard graphic symbols adapted into icons 6.2.2 If there is no standard equipment graphic symbol available for adaptation, when designing an icon: a) other widely recognized symbols or symbol elements should be used; b) general graphics should be used, and minor details of the graphics should be hidden; c) symbols specific to a specific culture should be avoided. Note: Specific cultural symbols include but are not limited to: - theological and religious symbols;
- body parts and gestures;
- specific application of colors, etc.
6.3 Icon drawing
6.3.1 Icons can be drawn using an icon editor utility or directly using pixel drawing methods, and are usually drawn using blocks of color (representing individual pixels) within a square or rectangular grid (cell). 6.3.2 The area enclosed by the graphic outline of the icon on the cell should be opaque, and other areas outside the graphic outline can be opaque, transparent or semi-transparent.
6.3.3 When designing icons, it is advisable to consider the needs of icons and their key details when displayed at different sizes, different resolutions or different aspect ratios, to ensure that the icons and their key details can maintain their comprehensibility and distinguishability. 4
GB/T16902.5—2017
6.3.4 The design size of icons should be optimized based on the expected use environment of the icons to ensure that the icons have sufficient selectability on the graphical interface and can be separated from other adjacent interface elements to avoid user misselection. Note: Common icon sizes include 16×16 pixels, 32×32 pixels, 48×48 pixels, 64×64 pixels, etc. 6.3.5 When drawing icons, the specific drawing methods such as line drawing and the processing of overlapping elements should refer to the guidelines given in GB/T16902.4. For example, drawing oblique lines at 11.5°22.5°45.0°67.5 and 78.5, that is, the steps formed by pixels change at a ratio of 1:3, 1:2, 1:1, 2:1 and 3:1, can ensure that the drawn oblique lines have a regular appearance, as shown in Figure 3. Figure 3 Example of regular oblique lines (enlarged size and original size) 6.4 Use of text
It is advisable to avoid using text or abbreviations in a specific language in the graphics of icons, unless the meaning of the text used can be widely recognized and easily understood.
Note: Using text in icon graphics will make the icon related to a specific language, thereby limiting the usability of the icon. Text also prolongs the time it takes to identify an icon, and even if an explanation is provided, some users may not understand it. 6.5 Use of Color
6.5.1 Generally, color should not be used as the sole information element to distinguish an icon or an icon state, unless the color itself is a functional element of the icon.
6.5.2 When color is used in an icon to convey a meaning: a) color should not be used as the primary means of conveying that meaning; b) the meaning of the color should be consistent throughout the application; the color should be easily recognizable by the user; i
d) the color should be from the standard color palette provided by the system. Note: In addition to black and white, it is best not to use more than 6 colors in an icon. 6.5.3 It is best to use widely recognizable colors and color combinations as the primary colors of an icon. Note: People with color perception disorders have difficulty distinguishing color combinations such as "red-green" and "blue-yellow". 6.5.4 The colors in an icon should use different hues and brightnesses to ensure that the different color components of the icon can be normally distinguished on different types of display screens (for example, black and white displays). 6.6 Changes
6.6.1 State changes
6.6.1.1 Icons should use unique state changes to distinguish different states, so that the change of the icon state can indicate the end of a process, the blocking of a function, or the inability to use a function. Icons with different state changes should form an icon family. 6.6.1.2 Icon state changes should be used consistently. For example, the convention used to indicate the state change of an object icon also applies to all other icons in the program. Icons showing different state changes are shown in Figure 4. 5
GB/T16902.5-—2017
Closed folder
6.6.2 Style changes
b) Selected folder
Examples of icon changes to indicate different states
Unavailable folder
When icons are changed to adapt to a specific design style or specific system technology, the basic perceptual characteristics of the icon, such as distinguishability and recognizability, should be retained.
6.6.2.2 The line style changes used in icons may involve the following line attributes: line type, line width, line end, line connection, and line color. Figure 5 shows an example of an icon that remains distinguishable when the line width changes. N
Example of icon changes based on line width attributes
6.6.2.3 The style changes related to corners used in icons may involve the following corner attributes: rounded corners, right angles, beveled corners, etc. Figure 6 shows examples of different corner attributes.
Figure 6 Examples of different corner attributes
6.6.2.4 The realism of icons can be increased by adding layered details to icons. Using photographic images or adding shadows can achieve a three-dimensional effect for icons. Figure 7 shows an example of an icon that changes in layered details. L
Figure 7 Example of icon layered details changes
6.6.2.5 When designing icons, it is advisable to consider some additional elements that may be automatically added by the operating system. For example, the icons presented on the computer desktop usually have a "shortcut" arrow automatically added to the bottom. The style changes caused by the additional elements should not reduce the recognizability of the icon.
6.7 Specialized version of icons
GB/T16902.5—2017
In the existing icons, other graphic or symbolic elements can be added to limit the original meaning of the icon to generate an icon dedicated to a certain object or function, that is, a special version of the icon, as shown in Figure 8. Note: Insert other symbols into the icon representing "document" to provide more specialized information. The new icon represents a specific type of document. Figure 8 Example of generating a special version of an icon
6.8 Animation effects of icons
The use of icons with animation effects can attract the attention of users. When icons use animation effects, the icon's comprehensibility and recognizability should not be reduced. The flash frequency range of the animation should be between 1Hz and 3Hz, and the duty cycle should be 50%. Note: The maximum flashing frequency of 3 Hz is a regulation for protecting people with photosensitive epilepsy. 7 Testing
7.1 After the icon design is completed, the new icon should be tested for its comprehensibility, distinguishability, and recognizability in different usage environments and the design should be adjusted appropriately.
7.2 When testing the icon, the target population participating in the test should include the elderly and the disabled.
Tip: This standard content only shows part of the intercepted content of the complete standard. If you need the complete standard, please go to the top to download the complete standard document for free.