GB/T 16902.4-2017 Rules for the representation of graphic symbols for equipment Part 4: Guidelines for redrawing graphic symbols used as icons GB/T16902.4-2017 |tt||Standard compression package decompression password: www.bzxz.net
This part of GB/T 16902 gives the redrawing principles, redrawing guidelines, and presentation forms of graphic symbols for equipment used as icons. This part applies to the redrawing of graphic symbols for equipment when they are presented and used on the device screen or display.

ICS01.080.01
National Standard of the People's Republic of China
GB/T16902.4—2017
Replaces GB/T16902.4—2010
Rules for the presentation of graphical symhols for use on equipment-Part 4: Guidelines for the adaption of graphical symbols for use as icons2017-07-31Release
General Administration of Quality Supervision, Inspection and Quarantine of the People's Republic of ChinaStandardization Administration of China
2018-02-01Implementation
GB/T16902.4—2017
Normative references
Terms and definitions
Screen or display
Auxiliary documents
Redrawing principles
Consistency
RecognizabilitywwW.bzxz.Net
Compatibility
Harmony
Redrawing guidelines
Icon size
Graphic diagram in cell Position of image
Drawing of lines
Creating icon schemes suitable for different resolutions or mediaFilling area
Arrow representation
Combined icons
Direction of icons
Expression of icons
Common expressions
Selected
Animated icons
Dynamic icons
Appendix A (Informative Appendix) Examples of redrawing equipment graphic symbols as iconsReferences
GB/T16902.4—2017
GB/T16902 is one of the series of national standards for "Rules for the Representation of Graphical Symbols". The structure and name of this series of national standards are as follows:a) GB/T16900 "General Rules for the Representation of Graphical Symbols". b) GB/T16901 "Rules for the Representation of Graphical Symbols for Technical Documents" is 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. c) GB/T16902 "Rules for the Representation of Graphical Symbols for Equipment" is divided into the following five parts: 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 4 of GB/T16902. This part is based on the rules given in GB/T1.1-2009. This part replaces GB/T16902.4-2010 "Rules for the representation of graphic symbols for equipment Part 4: Design guidelines for graphic symbols (icons) for screens and displays". Compared with GB/T16902.4-2010, the main technical changes are as follows: 1. Delete some terms in the previous version (3.3, 3.4, 3.5 of the 2010 version); 1. Delete the content related to the design of new icons in the previous version (Appendix B of the 2010 version). This part is proposed and managed by the National Technical Committee for Standardization of Graphic Symbols (SAC/TC59). Drafting units of this part: China National Institute of Standardization, China Machinery Productivity Promotion Center Mechanical Science Research Institute. The main drafters of this part: Zou Chuanyu, Bai Dianyi, Chen Yongquan, Gao Yongmei, Yang Dongbai, Zhang Liang. The original standard was first issued in 2010 (standard number: GB/T16902.4-2010), and this is the first revision. 1 Scope
Rules for the representation of graphic symbols for equipment
GB/T16902.4—2017
Part 4: Guidelines for redrawing graphic symbols used as icons This part of GB/T16902 gives the redrawing principles, redrawing guidelines, and forms of expression of graphic symbols for equipment when they are used as icons. This part applies to the redrawing of graphic symbols for equipment when they are presented and used on the device screen or display. 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, the latest version (including all amendments) applies to this document. GB/T 2893.4 Graphic symbols - Safety colors and safety signs - Part 4: Chromaticity and photometric properties of safety sign materials (ISO 3864-4: 2011, MOD)
GB/T 5465 (all parts) Graphic symbols for electrical equipment GB/T 16273 (all parts) Graphic symbols for equipment GB/T 16902.1 Rules for the representation of graphic symbols - Graphic symbols for equipment - Part 1: Prototype symbols GB/T 16902.2 Rules for the representation of graphic symbols for equipment - Part 2: Form and use of arrows GB/T 16902.5 Rules for the representation of graphic symbols for equipment - Part 5: Design guide for icons ISO 7000 Graphical symbols for use one equipment - Index and synopsis
3 Terms and definitions
The terms and definitions defined in GB/T 16902.1 and GB/T 16902.5 and the following terms and definitions apply to this document. 3.1
Anti-aliasing
Adds several transition colors with lower saturation between the line and the background color to weaken the jagged edges of curves and oblique lines and make the lines smoother.
Default
Options or properties preset by the target operating system or application software program, which can be changed by the user as needed. 4 Overview
4.1 Screen or display
In order to ensure visual clarity, graphic symbols can be redrawn under the premise of ensuring that the appearance of the original symbol remains unchanged. The redrawn graphic symbol 1) Corresponding national standards: GB/T16273 (all parts) and other relevant national standards. 1
GB/T16902.4—2017
The resulting icon can be presented and used on full-color, non-full-color and monochrome screens or displays. The size of the presented icon depends on the properties of the target operating system, screen or display (such as physical size, number of effective pixels). Appendix A gives an example of redrawing equipment graphic symbols into icons.
4.2 Auxiliary documents
When the target operating system, application software, screen or display has supporting auxiliary documents and the information conveyed by both is the same, icons, i.e. redrawn graphic symbols, should be used in the auxiliary documents. Note: Common auxiliary documents include help files, instructions, operating manuals, maintenance manuals, etc. 5 Redrawing principles
5.1 Consistency
The meaning of a graphic symbol should be consistent under different usage conditions, for example, it can be used as a graphic symbol for equipment (printed or engraved form) and as an icon.
The corresponding symbol original images of equipment graphic symbols and icons with the same meaning should be consistent. The elements and meanings used in icons should be consistent with those in GB/T5465 (all parts), GB/T16273 (all parts) and ISO7000.
5.2 Recognizability
Combined icons should consider the recognizability of each part, especially when the cell size is reduced and the details are reduced, the graphic symbol can still be recognized.
5.3 Compatibility
Due to the differences in default palettes of different operating systems, when redrawing, it is advisable to consider the default palette of the target operating system or application environment to ensure that the icon is presented and used normally. Common palettes are:
—8-bit (256 colors) icons: screens or monitors using cathode ray tubes (CRTs) and liquid crystal displays (LCDs); 2-bit (monochrome) or 4-bit (16 colors) icons: screens of copiers and household appliances In a 4-bit palette, different colors can be mixed in the color space to visually generate other colors, that is, colors with similar hue values ​​are configured in a "checkerboard" pattern.
Only colors with similar hue values ​​should be mixed in the color space (i.e., color dithering). If colors with contrasting hue values ​​are mixed, a noticeable "checkerboard" pattern will be visually created
Icons for the web should use a palette that can be displayed normally on different browsers. 5.4 Coordination
Icons in the same operating system or application environment should ensure the overall coordination of visual effects. Unless there is a special reason, icons should maintain the same color appearance and balance.
Since saturated colors are very prominent, they should be used with caution; and saturated colors should be used for special purposes, such as warnings or status changes. When warning signs specified in the standard are used as icons, their color values ​​should remain unchanged (see GB/T2893.4). Larger icons can use solid colors and gray lines to create three-dimensional effects, highlights or shadows. Smaller icons can use saturated colors and black outlines to make them easier to identify and understand. Objects or functions that are currently "unavailable" should be displayed as "gray" (i.e. colorless) icons. 2
6 Redrawing Guide
6.1 Icon Size
GB/T16902.4—2017
Existing display devices such as cathode ray tubes (CRTs), liquid crystal displays (LCDs) and plasma display panels (PDPs) have certain restrictions on the formation and presentation of icons. When icons are of regular display size, it may not be possible to keep the lines of the same width or regular arcs. Icons can be created using vector drawing tools, or they can be saved and displayed in the form of bitmaps. Note: A bitmap is a string of color blocks (representing a single pixel) within a square or rectangular grid (cell). The cell size of the icon should follow the requirements of the target operating system. In order to adapt to the cell size and color palette supported by the target operating system, different versions of the icon should be developed. If an icon of the appropriate size is not provided, the target operating system may automatically change the size of the existing icon by increasing the number of rows and columns of the pixel matrix to unify the required cell size. Note: Some operating systems can identify the effective screen resolution and color palette, and appropriately combine cells of different sizes to adapt to the current screen resolution. It is common for an icon file to contain 8 versions with different cell sizes and color palettes. 6.2 Positioning of graphic images within cells
When determining the position of images within cells, it is advisable to consider the relevant regulations of the target operating system: 1. Some systems require images to be left-aligned and bottom-aligned within cells: Some systems require images to be horizontally centered within cells, with the bottom aligned to the baseline;
1. Adjacent icons should not be visually connected, and sufficient space should be left between the outer edges of the image and the cell to avoid this situation; Whether adjacent icons are visually connected depends on many factors, such as the positioning method and storage settings of the target operating system; 1. Some operating systems require a blank (transparent) area around the image to show the state of the object (such as available, selected, running, unavailable, etc.), so the image size may be smaller than the design size of other operating systems. 6.3 Drawing of lines
6.3.1 Visual quality of lines
When drawing lines, it is not always possible to keep the width of the diagonal line constant or the curvature of the curve smooth. Anti-aliasing can improve visual quality. 6.3.2 Diagonal lines
Horizontal and vertical lines have a constant width, but it is difficult for diagonal lines to maintain the same visual thickness. For example, a diagonal line that matches the apparent thickness of a line with a width of two pixels needs to be three pixels wide, as shown in Figure 1. 3
GB/T16902.4—2017
Figure 1 Example of diagonal line width (enlarged size and original size) Only diagonal lines of 11.5°, 22.5°, 45.0°, 67.5° and 78.5 have a regular appearance, that is, the pixel values ​​change in steps at a ratio of 1:3, 1:2, 1:1, 2:1 and 3:1, as shown in Figure 2. Figure 2 Example of regular diagonal lines (enlarged size and original size) 6.3.3 Curves
To smooth the curvature of a curve, it is advisable to carefully eliminate aliasing using similar colors, but the lines may appear blurred, and this method is only effective when the line edge color and the screen background color are fixed. As shown in Figure 3, the left side of the circle has been anti-aliased, while the right side has not been processed. Figure 3 Anti-aliasing example (enlarged and original size) 6.4 Create icon schemes for different resolutions or media GB/T16902.4—2017
Simple-looking icons are easier to recognize and understand. It is advisable to design icons within a larger cell size (such as 48×48 pixels), and the main graphic elements should not exceed 3.
You can also limit the minimum number of graphic elements required to ensure that these elements are suitable for the smallest icon size; then continue to develop larger versions and add more details.
Some icon editing tools can scale a given image to a new cell size. This tool is useful and time-saving, but the resulting image still needs further editing. As the cell size increases, more details can be added to the image, or the number of graphic elements in the image can be increased to make the icon more visually rich. As the cell size decreases, it is recommended to reduce the number of graphic elements or reduce the details, as shown in Figure 4.
Note: Take GB/T5465.2 (5773) "Electronic image, interlaced" as an example. Figure 4 Examples of icons of 32×32, 24×24, and 16×16 pixels (enlarged and original sizes) 6.5 Filled area
When using graphic symbols for the target operating system, screen, or display, the original symbol should be kept intact. Display technology provides new options for distinguishing the parts of a symbol from its background. For example, each part of a graphic symbol can be filled with a different color, while the graphic symbol background can be transparent.
GB/T16902.4—2017
6.6 Representation of arrows
GB/T16902.2 specifies the basic principles for the use of arrows and their proportions. All icons designed for the same operating system or application environment should use arrows of the same form. Figure 5 is an example of using the same arrow.
Note: Take GB/T5465.2 (5067) "Image resizing\ (left) and GB/T5465.2 (5081) Speaker/microphone" (right) as examples. Figure 5 Examples of arrows used in icons (enlarged and original sizes)6.7 Combined icons
6.7.1 General principles
It is rare for an icon to consist of a single graphic element. Often, it may be necessary to combine several graphic elements so that the icon can convey information more clearly and unambiguously.
Combined icons should be based on standardized graphic symbols, such as negation elements or arrows (see GB/T 16902.1 and GB/T 16902.2). 6.7.2 Overlapping elements
When presenting multiple graphic elements, overlapping them can keep the graphic symbol at an appropriate size and make the relationship or order between the graphic elements clear. The above goals should be achieved by superimposing the effective cell areas of each graphic element so that they are stacked diagonally. In order to maintain the independence of graphic elements and highlight the main graphic elements, it is advisable to consider which parts of the image need to be hidden or displayed, which parts need to be prioritized or emphasized, that is, which parts should be placed at the top of the visual hierarchy (as shown in Figure 6) Note: Conversely, the main graphic elements will affect the design of smaller or "pocket-sized" icon schemes for other resolutions or implementation tools, which may require "refining" of the design concept.
GB/T16902.4—2017
Note: The icon on the left is composed of the two symbols of ISO7000 (0709) "dual source/main fault" and ISO7000 (0695) "counter". The icon on the right is composed of GB/T5465.2 (5440) "programmable timer, general symbol" and GB/T5465.2 (5127) "loudspeaker operating in loudspeaker mode".
Figure 6 Example of stacked structure (enlarged size and original size) When stacking graphic elements, it is advisable to avoid the visual effect of ink stains caused by the visual overlap of lines or shapes of different graphic elements to form visual "agglutination". It is advisable to select lines as single pixels or increase the line spacing to avoid this problem, as shown in Figure 7. a) "agglutinated" design
b) "non-agglutinated" design
Note: It is composed of two symbols: ISO7000 (2026) "help" and GB/T5465.2 (5464) "satellite reception mode, general symbol". Figure 7
6.7.3 Visually Continuous Lines
Examples of “Condensed” and “Non-Condensed” Designs (Enlarged and Original Sizes) When redrawing an icon containing multiple graphic elements, it is advisable to avoid the phenomenon of “continuation” (i.e., the lines of one graphic element overlap with the lines of another graphic element with a similar direction, and it looks like the lines run through the two graphic elements, creating a visual connection). This visual effect should not occur and should be avoided by reasonably overlapping or offsetting objects, as shown in Figure 8. GB/T16902.4—2017
a) “Continuous” design
b) “Non-continuous” design
Note: It is composed of two symbols: “date” in GB/T5465.2 (5662) and “lock” in GB/T16273.1 (171). Figure 8 Examples of “Continuous” and “Non-continuous” designs (enlarged size and original size) 6.7.4 Additional graphic elements
When redrawing, it is also advisable to consider that the target operating system may automatically add some additional graphic elements. For example, the lower part of the desktop icon usually has a “shortcut” arrow (as shown in Figure 9) status indicator, shared resource indicator, etc. Note: GB/T546 5.2 (5662) "date" (left) and IEC60417 (5561) "cassette" (right) examples. Figure 9 Additional element examples (enlarged size and original size) 6.8 Orientation of icons
The interpretation of the meaning of icons may depend on their orientation, and care should be taken to avoid ambiguity. Taking ISO7000 (2567) "fuse box access" as an example, the meaning of an inverted graphic symbol on the display [as shown in Figure 10a) may be different from its meaning when it is upright. For example, the inverted "fuse box access" graphic symbol may be confused with the GB/T16273.6 (1-07) "charging status" graphic symbol shown in Figure 11. 7
a) "Inverted"
b) "Upright"
GB/T16902.4—2017
Figure 10 Example of an icon with ambiguous direction (enlarged size and original size): "Fuse box access" Figure 11 GB/T16273.6 (1-07) "Charging status" (enlarged size and original size) Icon presentation forms
7.1 Common presentation forms
Common presentation forms of icons include being selected, animated or dynamic, which are used to provide additional information to users. 7.2 Selected
When the mouse moves over an icon, it may be necessary to indicate the end of a process, the blocking of a function, or the inability to use a function. In this case, it is advisable to design icons in accordance with the existing conventions and guidelines of the target operating system vendor. For example, a toolbar icon that is "grey" indicates that the function is currently unavailable.
7.3 Animated icons
Using animated icons can draw users' attention to a specific situation or indicate that an operation is in progress. For example, a printer icon can flash to indicate that the printing paper or toner is exhausted. The flashing frequency of the animated icon should comply with the requirements of GB/T16902.5 to avoid causing tension in the user and causing illness.
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.