In a graphical user interface, icons convey attributes or tasks. An effective icon clearly represents its function and is easy to remember; an ineffective icon reduces the usability of an application by making it appear obscure and unapproachable.
Icons are used in different ways. They can either resemble what they represent—for example, a book used to represent a dictionary—or they can provide a characteristic of something, such as a gas pump to represent a gas station. Icons can also be symbolic representations, which may or may not be clear to the user. An example of this type of icon is the light bulb icon found in many Windows-based applications, which turns on and off the TipWizard.
Icons are most often used on buttons, but they can be used for progress indicators as well. When a Windows CE color icon has a Windows 95 equivalent, both icons use the same design and color. However, you must create a 16-color version and a grayscale version of the icon to ensure that it displays correctly on both color and 2-bpp devices.
Note The icon editor in the Windows CE Toolkit for Visual C++ 5.0 can create icon (.ico) files that retain both 16-color and 2-bpp gray versions of an icon.
In addition to using Windows 95 icon equivalents, you can create your own icons using the standard Windows 16-color palette. To add dimensionality to an icon, use highlights and shadows, but remember, the icons you create must translate correctly to 2-bpp gray if your device supports both grayscale and color displays. The following table shows how the 16-color palette translates to four grays.
Color | Red | Green | Blue | Gray Conversion |
---|---|---|---|---|
Black | 0 | 0 | 0 | Black |
White | 255 | 255 | 255 | White |
Dark gray | 128 | 128 | 128 | Dark gray |
Light gray | 192 | 192 | 192 | Light gray |
Dark red | 128 | 0 | 0 | Black |
Red | 255 | 0 | 0 | Dark gray |
Dark yellow | 128 | 128 | 0 | Dark gray |
Yellow | 255 | 255 | 0 | Light gray |
Dark green | 0 | 128 | 0 | Black |
Green | 0 | 255 | 0 | Dark gray |
Dark cyan | 0 | 128 | 128 | Dark gray |
Cyan | 0 | 255 | 255 | Light gray |
Dark blue | 0 | 0 | 128 | Black |
Blue | 0 | 0 | 255 | Dark gray |
Dark magenta | 128 | 0 | 128 | Dark gray |
Magenta | 255 | 0 | 255 | Light gray |