Color application in UI design

In 1991s, T86, an intelligent mobile handheld device introduced by SONY Corporation of Japan, refreshed the user's experience of human-computer interaction interface with its colorful screen, beautiful graphic buttons and smooth operation. And in the industry, it has triggered designers' brand-new thinking on the style, graphics, color, operation experience and so on in UI design. After more than 21 years of development.

UI design has become a specialized interdisciplinary subject. Through the study of different disciplines such as visual thinking, psychology and ergonomics, designers constantly improve the user's operating experience from all aspects. Early software interfaces tried to "de-virtualize" human-computer interaction by simulating the texture of real objects through "skeuomorphism". Since the 21th century, with the application of visual communication rules in UI design, flat design has become a more mainstream design trend. Flat design is more modernist, which helps users to 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

As a very important element in visual communication, color plays a very important role in UI design, which can be summarized as the following aspects.

1) Overall architecture of display interface

A UI interface always acts directly on the customer's visual system with the help of graphical appearance. When users touch a UI interface, they often see a graphic symbol system composed of background color, other geometric color blocks, icons, buttons and other elements. Color can highlight the background, navigation bar, status bar, buttons and other elements intuitively, and show the logical architecture of UI interface.

2) Make clear the visual hierarchical relationship

Different contents in UI design belong to different hierarchical relationships, such as the same-level relationship between menus, the subordinate relationship between contents and so on. Using the difference between the same color and different hue colors can distinguish the hierarchical relationship of content very intuitively, and also highlight the key content through the strong contrast between colors.

3) Creating the overall style of the interface

Although the UI interface is a complex visual graphic system, it will show obvious style tendency through the contrast and harmony among the main color, auxiliary color and decorative color. Different interface styles can be created by contrasting and harmonizing the colors of different color systems or the same color system. Such as black, gray and blue, which are suitable for boys' metallic textures, and dreamy sweet colors and candy colors that girls like. It has become one of the most important parts of user experience that the interface style is oriented to quality.

4) Color application based on ergonomics.

because the color temperature will affect the color displayed by the light source, it will be cold (white and blue) when it is larger than 6511K, and warm (yellow and red) when it is smaller than 6511K. Blue light exists in computer monitors, fluorescent lamps, mobile phones, digital products, display screens, LEDs and other light. Because blue light is a kind of high-energy short-wave light, it will seriously damage vision. Based on ergonomics to protect vision, the backlight display of Iphone7 and iphone7plus of Apple mobile phones is designed with the function of Night Shift to remove blue light from the screen, which will automatically adjust the screen display to warm yellow tone at night to reduce visual fatigue.

in addition, the display characteristics of electronic devices are considered in the UI interface. Only when there is a contrast difference of at least 5.38 between the background color and the icon color can it be easily distinguished. However, the color matching within this difference range will be too close to the recognition in the display environment.

There are some special people, such as people who are red and green blind, who need special color matching design because of their special visual needs.

2 UI color design scheme

When designing the UI, we should determine the clear color collocation aversion through the analysis of products and user experience, and form a "standard color specification", and then design the specific interface, wireframe, icon and other details on this basis. In the standard color specification, the color numbers of the main main color, auxiliary color and decorative color should be specified to facilitate the color unification of designers' design drafts.

1) Main colors

The main colors account for 75% of all colors, which basically determines the visual style of the whole interface. The choice of main color should conform to the temperament, appeal and color psychology of the product itself. On the basis of the main color, the tone of the same color system can be derived through the change of lightness and purity as the main color range.

According to the energy value of color in vision, general main colors tend to choose colors with high saturation and low lightness, which often occupy a large area in the same interface or stand out from the background obviously.

2) Auxiliary colors

Auxiliary colors play the role of auxiliary main colors, accounting for about 21% of all colors. Using the same color as the main color as the auxiliary color can present a soft, integral and unified visual effect; Using the adjacent color of the main color as the auxiliary color can make the interface have rich changes and produce a lively feeling; Using the contrast color of the main color as the auxiliary color can make the main color stand out.

3) Decorative colors

Decorative colors, which account for 5% of all color schemes, play the role of ornament and reminder. And add personalized and interesting visual elements to the interface. Decorative colors should be distinguished from the overall tone of the interface. Generally, there should be obvious differences in lightness and saturation. Generally, colors with high lightness or saturation will be used.

3 the application of elements of color in UI design

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

hue is the primary feature of color and an important factor to distinguish different colors. Hue is also the main factor of color contrast in color matching. The choice of main color and hue often determines the overall style and temperament of a UI interface, which is either bold and lively, calm and deep, elegant and fresh, or rich and gorgeous. Other auxiliary colors play the role of contrast or harmony. Therefore, the main color selection of a UI interface should conform to the characteristics of the product itself. Take the mobile APP as an example. Many e-commerce apps such as Taobao, Baidu Takeaway, and Public Comment often use red and orange, which are easy to excite and warm, as the main colors. The "Zhihu" APP, which focuses on exploration and knowledge, uses rational and calm blue as the main color.

Brightness of color is the brightness of color, which is the main factor to reconcile colors. The brightness change of the same hue color can present a harmonious and unified change relationship in the same color system, which is harmonious and layered. It is often used to design icons, menus, navigation and so on with the main color. Brightness change and harmony will also bring about differences in color personality, and higher brightness will make colors bright and cool; However, the decrease of lightness will make the color dim and present a warm feeling.

saturation refers to the vividness of colors, and it is also the main factor of color harmony. The change of saturation will also make the color show different "color personalities" from strong and lively to quiet and deep. In addition, the change of saturation will make the color present different textures, such as opacity, hardness and luster of metal; The freshness and sweetness of candy color and so on.

4 The psychological application of color in UI design

Color has a strong association. Different colors will lead to different comprehensive feelings in taste, space, warmth, mood and other aspects. In the selection of main colors, UI interface often makes use of people's association habits of colors to highlight the positioning of products. Still take the ios mobile APP as an example; In order to introduce the "Xiangha" APP of gourmet recipes, the main color is red and orange, which are the most appetizing; The perpetual calendar APP, which is rich in China folk traditions, adopts China red, which is full of China traditional cultural meanings, as the main color, and adopts seal script font as the text logo in line with this temperament.

to sum up, because of the importance of color, the understanding and control of color has a great influence on the design of the whole UI interface. ;