In 1990s, T86, an intelligent mobile handheld device launched by Sony Corporation of Japan, refreshed the user's experience of human-computer interaction interface with colorful screen, exquisite 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 20 years of development.
UI design has become a special interdisciplinary subject. Designers constantly improve the user's operating experience from all aspects by studying different disciplines such as visual thinking, psychology and ergonomics. Early software interfaces tried to simulate the texture of real objects through "skeuomorphism", thus "de-virtualizing" human-computer interaction. Since the 20th century, with the application of visual communication rules in UI design, "flattening" design has become a more mainstream design trend. The flat design is more modern, and it helps users to better understand and use the product itself through the combination of simple and simple color blocks.
The role of color in the design of 1 UI
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) The overall architecture of the display interface.
UI interface always acts directly on the customer's visual system with the help of graphic appearance. When users touch a UI interface, they often see a graphical symbol system composed of background color, other geometric color blocks, icons, buttons and other elements. Color can visually highlight the background, navigation bar, status bar, buttons and other elements, showing the logical architecture of the UI interface.
2) Clear the visual level.
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, we can distinguish the hierarchical relationship of content intuitively, and also highlight the key content through the strong contrast between colors.
3) Create 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. By comparing and coordinating colors of different color systems or the same color system, different interface styles can be created. Such as black, gray and blue, which are suitable for boys' metallic texture, and dreamy sweet colors and candy colors that girls like. Quality-oriented interface style has become one of the most important parts of user experience.
4) Color application based on ergonomics.
Because the color temperature will affect the color displayed by the light source, it is cold (white and blue) when it is greater than 6500K, and warm (yellow and red) when it is less than 6500 K. 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 backlit display screens of Iphone7 and iphone7plus of Apple mobile phones are designed with night shift function to remove the blue light on the screen and automatically adjust the screen display to warm yellow tone at night to reduce visual fatigue.
In addition, the display characteristics of electronic equipment are considered in the UI interface. Only when the contrast difference between the background color and the icon color is at least 5.38 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 also some special people, such as red-green color blindness, who need special color matching design because of their special visual needs.
2 UI color design scheme
When designing UI, it is necessary to determine the clear color collocation aversion through the analysis of products and user experience, and form a "standard color specification". On this basis, the specific interface, wireframe, icon and other details are designed. In the standard color specification, the color numbers of main color, auxiliary color and decorative color should be specified to facilitate the color unification of designers' design drafts.
1) main color
The main color accounts 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, taste and color psychology of the product itself. On the basis of the main color, the hue of the same color system can be derived through the change of lightness and purity as the range of the main color.
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 in the background.
2) Auxiliary color
Auxiliary colors play the role of auxiliary main colors, accounting for about 20% of all colors used. 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 more prominent.
3) Decorative color
Decorative colors account for 5% of all color matching, which plays 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. There should be obvious differences between lightness and saturation. Generally, colors with high lightness or saturation will be used.
3 the use of color elements 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 matching of UI design.
Tone 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 often determines the overall style and temperament of a UI interface, which is 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. Taobao, Baidu takeaway, public comment and many other e-commerce apps 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, is dominated by rational and calm blue.
The lightness of color is the lightness of color, which is the main factor to harmonize 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. Higher lightness will make colors bright and Leng Yan. However, the decrease of brightness will make the color darker and present a warm feeling.
Saturation refers to the lightness of color and is also the main factor of color harmony. The change of saturation will also make colors 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, metallic luster, etc. The freshness and sweetness of candy color and so on.
4 the application of color psychology in UI design
Colors have a strong association. Different colors will lead to different comprehensive feelings in taste, space, warmth and mood. In the choice of main colors, UI interface often uses people's association habits of colors to highlight the positioning of products. Or take the ios mobile APP as an example; In order to introduce the "Xiangha" APP of gourmet recipes, the main colors are red and orange, which is the most appetizing; The perpetual calendar APP, which is rich in China folk tradition, adopts China red, which is full of China traditional culture implication, as the main color, and uses the seal script font as the text logo which conforms to 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.
;