1. Congener color collocation the colour of 0° is congener color from distance on color ring, be like blue and shallow blue, red and pink. The visual effect of similar color collocation is unified, fresh and implicit, as shown in the picture below.
2. Complementary color matching color ring in the opposite two colors complement each other, complementary color contrast is strong, can convey energy, vitality, excitement and other meanings. By selecting colors suitable for APP style and controlling the lightness, purity and usage ratio of complementary colors, the interface can produce obvious contrast and visual impact, as shown in the figure below.
3. Adjacent color collocation color ring is in 90 degrees between the two colors for adjacent color, such as red and yellow, green and blue. The collocation effect of adjacent colors is soft, quiet and harmonious, but improper processing will also produce monotonous and fuzzy feeling. At this time, the visual effect can be enhanced by adjusting the brightness and purity of colors, as shown in the figure below.
4. With tonal collocation with tonal collocation is the same degree and purity, different hue color combination. For example, the ICONS in the Alipay interface have different colors, but they do not appear chaotic when combined together, but very harmonious, as shown in the picture below.
5. Refer to the color scheme of competing products
Competing products are competitors’ products. At the initial stage of APP design, product managers and designers will analyze competing products on the market. Color matching of competing products is an important part of analysis, and designers can initially determine the color matching direction of the interface in this part. If you need to make a fast-food APP, you can choose competing products for analysis at the beginning of design and refer to the color matching of competing products, as shown in the picture on the right.
6. Refer to the iOS HMI guide for color schemes
In the iOS Man-machine Interface guide, Apple gives eight colors that were chosen by trial and error to stand out when used alone or in combination, on a light background or on a dark background, as shown below.
Solid colors with large areas of solid colors can cause visual fatigue, and should be avoided for interface content that requires a long time to view. Take a look at the wechat interface of the mobile phone. From the navigation bar to the icon, no solid color is used, as shown in the picture on the right.
About the grey
Gray in the interface is usually used as the background to highlight the main text. Avoid 40% to 70% gray in the application. As can be clearly seen from the figure on the right, the text recognition on the 60% grey background is poor.
