The use of color in UI design

In the 1990s, the T86, an intelligent mobile handheld device launched by Japan's SONY company, featured a colorful screen, beautiful graphic buttons and smooth The operation refreshes the user’s experience of human-computer interaction interface. It has triggered new thinking among designers in the industry on style, graphics, color, operating experience, etc. in UI design. After more than twenty years of development.

UI design has become a specialized interdisciplinary subject. Through research on different disciplines such as visual thinking, psychology, and ergonomics, designers continue to improve the user's operating experience from all aspects. Early software interfaces once used "skeuomorphism" design to try to "de-virtualize" human-computer interaction by simulating the texture of real objects to more closely resemble the interaction between humans and the real world; and since the 21st century, with the With the application of visual communication rules in UI design, "flat" design (flat) has become a more mainstream design trend. Flat design is more modern and helps users better understand and use the product itself through the combination and application of simple and simple color blocks.

1 The function of color in UI design

Color, as a very important element in visual communication, plays a very important role in UI design and can be summarized into the following aspects.

1) The overall structure of the display interface

A UI interface always directly affects the customer's visual system with the help of a graphical appearance. When users come into contact with a UI interface, they often see a graphical symbol system composed of background color, other geometric color blocks, icons, buttons and other elements. Using color can very intuitively highlight the background, navigation bar, status bar, buttons and other structural elements, and show the logical structure of the UI interface.

2) Clarify the visual hierarchical relationship

Different contents in UI design belong to different hierarchical relationships, such as the sibling relationship between menus, the subordinate relationship between content, etc. Using colors of the same color system and the gap between colors of different hues can very intuitively distinguish the hierarchical relationship of content, and can also highlight key content through strong contrast between colors.

3) Create the overall style of the interface

Although the UI interface is a complex visual graphics system, the contrast and harmonious relationship between the main color, auxiliary color, and decorative color will show an obvious style tendencies. Different interface styles can be created by using contrast and harmony between different colors or the same color. For example, metallic black, gray, and blue colors are suitable for boys, and dreamy and sweet colors and candy colors that girls like. Interface style and quality have become one of the most important parts of user experience.

4) Color application based on ergonomics.

Since the color temperature will affect the color displayed by the light source, if it is greater than 6500K, it will be cooler (white-blue), and if it is less than 6500K, it will be warmer (yellow-red). Blue light exists in large quantities in computer monitors, fluorescent lamps, mobile phones, digital products, display screens, LEDs, etc. Because blue light is a high-energy short-wave light, it can seriously damage vision. Based on the consideration of ergonomic vision protection, the backlight display of Apple mobile phones Iphone7 and iphone7plus is designed with Night Shift screen blue light protection function. When turned on, the screen display will automatically adjust to a warm yellow tone at night to reduce visual fatigue.

In addition, the display characteristics of electronic devices are taken into consideration in the UI interface. The contrast difference between the background color and the icon color must be at least 5.38 to make it easy to distinguish. The color matching within this difference range will be too close and cause difficulty in recognition in the display environment.

There are also some special groups, such as those with red-green color blindness, who require special color matching designs due to their special visual needs.

　2 UI color design plan

When designing UI, it is necessary to determine clear color matching preferences through analysis of products and user experience, and form a "standard color specification". In this Based on this, detailed designs such as specific interfaces, wireframes, and icons will be carried out. The standard color specifications should stipulate the color numbers of the main primary colors, auxiliary colors, and decorative colors to facilitate the color unification of the designer's design draft.

1) Main color

The main color accounts for 75% of all colors and basically determines the visual style of the entire interface. The main color selection should conform to the temperament, appeal and color psychology of the product itself. On the basis of the main color, the same color tone can be derived through changes in brightness and purity as the main color range.

According to the visual energy value of color, generally the main colors tend to choose colors with high saturation and low brightness, which often occupy a larger area in the same interface or stand out clearly from the background.

2) Auxiliary colors

Auxiliary colors play the role of auxiliary to the main color, accounting for about 20% of all colors.

Using colors of the same color as the main color as auxiliary colors can present a soft, overall, and unified visual effect; using colors adjacent to the main color as auxiliary colors can make the interface rich in changes and create a sense of liveliness; using contrasting colors with the main color as auxiliary colors can Make the main color stand out.

3) Decorative colors

Decorative colors, which account for 5% of the total color scheme, serve as embellishments and reminders. And add personalized and interesting visual elements to the interface. The decorative color should be different from the overall tone of the interface. Generally, there should be obvious differences in brightness and saturation. Colors with high brightness or saturation are generally used.

3 The application of the three elements of color in UI design

Hue, lightness and saturation are the three elements of color. The understanding and application of these three color elements are reflected in UI design throughout the color scheme.

Hue is the primary characteristic of color and an important factor in distinguishing different colors. Hue is also the main factor in color contrast in color matching. The choice of the main color hue often determines the overall style and temperament of a UI interface, which can be bold and lively, calm and deep, elegant and fresh, or rich and gorgeous. Other auxiliary colors play a role in contrast or harmony. Therefore, the main color selection of a UI interface must conform to the characteristics of the product itself. Taking mobile apps as an example, many e-commerce apps such as Taobao, Baidu Takeout, and Dianping often use exciting and enthusiastic red and orange as the main colors; while the "Zhihu" APP, which focuses on exploration and knowledge-seeking, uses rational, Calm blue as the main color.

The brightness of a color is the brightness of the color and is the main factor in blending the color. The brightness changes of colors of the same hue can present a harmonious and unified changing relationship in the same color system, which is coordinated and layered. It is often used to design icons, menus, navigation, etc. in conjunction with the main color. The change in brightness will also bring about differences in color character. An increase in brightness will make the color brighter and appear cooler; while a decrease in brightness will make the color darker and appear warmer.

Saturation refers to the vividness of a color and is also the main factor in color reconciliation. Changes in saturation will also cause colors to show different "color characters" from strong and lively to quiet and deep. In addition, changes in saturation will also cause colors to present different textures, such as opaque, hard, and shiny metal; fresh and sweet candy colors, etc.

4 The application of color psychology in UI design

Color has a very strong association. Different colors will trigger people's different comprehensive feelings in different aspects such as taste, space, warmth and coldness, and emotions. In the selection of main colors, UI interfaces often use people's association habits with colors to highlight the positioning of the product. Still taking the ios system mobile APP as an example; take the "Xiangha" APP that introduces food recipes, the main colors are red and orange, which are most likely to induce appetite; and the Wanlian APP with rich Chinese folk traditions uses a color full of traditional Chinese cultural connotations. Chinese red is used as the main color and in line with this temperament, seal script font is used as the text logo.

In summary, due to the importance of color, the understanding and control of color has a huge impact on the design of the entire UI interface.

;