To the users of Photoshop software to talk about mastering the color of the UI design tutorial experience.
We have been skilled in distinguishing colors from childhood, but why when we need to use color for UI design, but often find it difficult to use the right color, to make those harmonious and decent, pleasing to design it?...... I think the reason is that we are not aware of the color and practice, and when we do design, it is easy to overuse color. As a design beginner, you need to master the basic color theory, through practice and constantly deepen the understanding of color, and finally be able to skillfully use a variety of colors, with a balanced and pleasing design.
In the beginning of the use of color, you may feel some difficulties, my advice is to look at good works and observe the beauty of things around, you can get a lot of excellent color with inspiration, so as to enhance your understanding of color. Also, at the beginning of the design, choose a soft or neutral color as a background, and use color only on elements or buttons that require user attention. As time goes on, you will do more and more well.
Base color, colors, compound color
The first step in color matching is to select a primary color, and I recommend starting with a bright, soft base color or colors. This choice is often relatively safe, and the key is to see how you can use it and choose the right color to match it.
The colors below are the colors Apple uses most often in its native app. These colors have a very good effect on visual elements like buttons, icons and menus.
And remember not to overuse color, only when you need to guide the user to operate the place to use color.
Hue, saturation, lightness (HSB or HSV)
When we need to use color, it is very important to first understand the relevant characteristics of color. Many people choose to use the RGB color model, but I would like to say that RGB is the computer for color representation, we can not say how many colors are red, green, blue composition. As a designer, HSB color model is more useful, because hue, saturation, lightness is our brain on color understanding, these attributes for us to understand and use color more meaningful.
Refers to a set of colors that are obtained by adding a 10-90% white or black opacity layer to the same color. Because their hue is the same, but can produce harmonious contrast effect, so the application of monochrome is very important in the design.
In the above example, by adjusting the transparency of the black or white layer, you can get a different monochrome and they can reconcile each other nicely.
Once you've mastered the color picker, you can get a new monochrome by dragging the brightness and saturation up and down without changing the hue.
Adjacent color (analogous)
It refers to the color adjacent to the hue ring. Obviously such a color scheme does not produce high contrast. When you feel that your design is too single in color, you can use the adjacent color to increase the color change, so that your design more level and vitality.
For example, red is the adjacent color of orange, and Orange is the adjacent color of yellow.
Increase the hue value by 30-50, you can get a new adjacent color.
Complementary color (complementary)
Refers to the two colors in the Hue ring, which are relative (180 degrees in each corner). Complementary color makes a strong contrast effect. For example, the purple button is very prominent on the yellow background. Of course, this also depends on the saturation of each color. Complementary colors are often used in the need to highlight the buttons, warnings and other places, but the use of improper also may make your design appears very abrupt, through practice to understand is the best, please remember: contrasting.
Adding a hue value to half the width of the entire hue bar (that is, the relative color in the color wheel) Gets the complementary color of the current color.
Refers to by black, white and black and white to reconcile a variety of different shades of gray series, neutral color does not belong to the cold tone is not a warm tone, it can play the role of neutralization agent. Excessive use of color makes the entire design less usable, while the neutral color can help to pull the user's attention back to the content itself.
When using a neutral color, avoid causing it to conflict with the primary color as much as possible, so it is always recommended that the saturation of the neutral color be set to a value close to 0.
Primary colors are often easy to determine, but background and text colors are sometimes difficult to grasp. Their collocation is subtle and requires the designer to have enough experience to combine them and adjust them to the best. Here are some of the neutral swatches I use frequently in the UI design.
Blue is the most used in all Web sites or app UIs, and it gives a quiet, broad, and trustworthy feeling, and commercial giants like Twitter,facebook,ibm,linkedin use blue as their primary color. And blue is also easier to use with other colors.
We should always avoid using pure black (#000) in the UI. When pure black and other colours are paired, the contrast is too obvious.
If you want to use gray, use the lightness value below 30% or above 70% Gray. The average lightness of gray appears single point and cannot match with other colors well.
In addition to the blue and gray color plates above, we can use any color to customize our own swatches, but you always need to make the colors of the swatches match.
First, slide the hue (Hue) slider to select a primary color, and then select the other monochrome, adjacent, and complementary colors associated with the primary color. Finally, by adjusting the saturation of these colors (saturation) and lightness (brightness) to increase color contrast and vitality.
By using contrast effectively, you can make your content clearer and make your reading easier. Good contrast, generally use the color of the poles, such as white and black, blue and dark blue, highlighting and low light.
The bright and dark in the UI
In some cases, you need to weigh the tone of the UI against the brand or usability. For example, in the application of ibook, when the external environment becomes dim, it automatically switches to the dark-colored reading mode.
Another example is Apple Watch, which uses a black background and is well matched to its borders.
Color principle for Bright UI
The content should be brighter than the background. By comparing the brightness, you can make the outline of the content more clear and easy to read and not overuse the color. Colors can always catch people's eyes, but overuse tends to ignore the subject's content, so use colors only where you need to highlight them, such as important buttons and the state you need to highlight.
Avoid using the average white, 90%-100% White is the most moderate.
Color principle for Dark UI
Do not use pure black, it is difficult to see the details, and the contrast with the white will appear too high. If you must use black, choose to use Dark instead, which eliminates excessive contrast when using blue to avoid using gray at the same time. Navy and Blue match better
Color also has meaning, should be used reasonably red, green, blue and neutral color to represent not recommended operation, affirmative action, link and inactive state. Avoid confusing your users with these buttons or features. For example, do not use the green button to delete operations.
As long as you look carefully, everything around you is filled with the inspiration of color. When you see a beautiful picture, a thing or a digital work, as a designer you first notice may be that beautiful and harmonious color. Then you can take a photo or make a screenshot and then extract the color. In this way, you can generate a new swatch with these extracted colors.
A very good iOS app that can help you create swatches from photos.
Color recognition by artificial means
It is ideal to create swatches manually (by the naked eye), but this requires a good understanding of color. Any color board that is automatically identified by tools is always deficient in accuracy, so it is best to use your own vision.
In the following example, I selected the Alipay application interface, by identifying the main color, secondary color, and neutral color used by the application.
The main color is generally the same as the color of the entire brand, in the Icon, button, menu will be used. Secondary color can be selected with the main color of the same color tones, you can also use such as contrasting color, adjacent color and other colors with the main color contrast. The secondary color is less used, only used in the need to arouse the attention of users, such as message reminders, discount sales and other needs of eye-catching identification places. For the background color, they are used to foil the content, also can play to reconcile the entire application tonal use. This is also why we see both the bright theme UI and the dark theme UI.
You can also choose a different color pattern, or even move the color tag to select different colors to add to your palette.
On the dribble, you can browse and save the swatches. You can use a color to find all the colors in this color for the design, thus stimulating your inspiration.
You can also choose a different color pattern, or even move the color tag to select different colors to add to your palette.
Another, I most often go to place is pintrest, above can see many designers collects the color board, below is my pintrest on the Color Board board.
Understanding the fundamentals of color, the relationship between them, and how to choose colors for color matching are important for your app design. I suggest reading the following guide to color, which, in addition to explaining the basics of color, can help you learn more about how to use color.
The color in Material design
Google's material Design guide to colors, the recommended color palette is also very helpful for Web UI or iOS design.
The sketch palette enables you to save or import global or document swatches very conveniently. The recommended swatches are also very helpful for your iOS design. We can generally start with a global swatch that contains the ios,material design, and the flat UI.
A nice gradient effect is used very much in iOS. You can create a gradient effect by selecting two matching colors, and then simply setting. Here is an excellent collection that collects a lot of gradient effects.
A color picker that can be used in sketch and Xcode. supports different formats such as Rgb,hex.
Well, the above information is a small set of Photoshop software for the users of this program to bring detailed understanding of the UI design of the color of the tutorial to share the full content of the experience, you see the software users of Photoshop here, small knitting believe you are very clear now, I hope that the above experience can give you the UI design to bring greater help.
