Creating beautiful, usable and efficient UI interfaces takes time to polish the design details. This article discusses how to improve the high-level sense of UI design from two aspects of visual and emotional design.
Visual elements
Today, as Internet products become more and more mature, you will find that all apps are more and more similar, and they seem to be products designed from the same template. This kind of universal design will lead to serious homogeneity, which makes the design not exquisite, and the products have no temperament and brand sense. Whether an App design is exquisite and full of design sense depends on its details, which means that when we design, we should start from the details and study how to create a touching UI design from various aspects. This section summarizes 12 simple and intuitive little details to improve design.
1. Use color shades to build hierarchies
Yiliusheji.com notes that when styling UI text, the most common mistake is relying too much on font size differences to create contrast. Using font size contrast alone is not enough to create contrast. Try combining color and font weight to create better contrast.
Each color has a visual weight, which helps establish a hierarchy in the content. Give different importance to elements by using shades of color. You can even use two or three colors if you can:
- Use dark grey for main content (such as headings, but not solid black)
- Use gray for secondary content (like product introductions)
- Use light gray for supporting content (such as release date)
Similarly, in UI design, two different word weights are often enough to create a good sense of hierarchy:
Most text has a normal font weight (400 to 500, depending on the font)
Use heavy word weights (600 to 700, depending on the font) for text that needs emphasis
The main inscription weighs 600, and the other green dots weigh 400
You should try not to make the text less than 400, because this is already a small font size that makes it unreadable. If you still need to reduce the font weight, make the font lighter, or replace it with a more recognizable font with a smaller font weight.
Grey text should be handled separately on colorless/colored backgrounds
Don’t use gray text on a colored background. On a white background, changing black text to gray (or using gray text on a black background) is a great way to tone down the visuals.
However, there are usually two ways to reduce the contrast between a color background and the background color:
One is to reduce the opacity of white text; Second, let the text gradually approach the background color rather than changing it to gray.
On the left, the designer’s job information is in white with reduced opacity, and on the right, it is in the same color as the background
Secondly, when it comes to long content, large areas of dark bold type can give people a sense of heaviness and jump. This problem can be easily solved by choosing a color like dark gray (#4F4F4F) to make the text easier to recognize.
2. Match the colors
Choose a base color and adjust the tones and shades to add balance. Avoid using too many colors when designing. If the project allows, simply use a fixed palette and add consistency to the design by adjusting the saturation and brightness of the base colors.
3. Clean shadows
Shadow is the most common visual expression in UI design. It can increase the depth of elements, make them stand out from the background, attract the user’s attention, and also enhance the visual level of the picture. Instead of using a wide range of diffuse blur shadows, using subtle vertical offset shadows is more obvious and natural, mimicking the most common feature of light sources, the shadow created by light falling from above.
This soft shade gives a clean impression and adds to the delicacy of the picture. If the range of shadows is too small or the color is too dark, the location is not shifted, but clustered around the elements, which will flatten the picture, make the vision become thick, and present an unrefined picture.
The shadow is not necessarily black, and there is another kind of diffuse shadow that simulates the color of the element itself and casts it on the background. Since the shadow is consistent with the tone of the element, it presents a very harmonious picture feeling. In UI design, this technique should not be used too much, otherwise the various color combinations will be dazzling.
4. Personalized icon design
A good designer can draw a unified icon, while a good designer can create a unique icon. Can we add more creativity to its visual expression while pursuing consistency in size, rounded corners, line width and color scheme? For example, the following set of icon design, no matter in the graphics of innovation, or color collocation are showing unparalleled creativity.
As the global navigation of an App, TAB bar plays a crucial role, and its design affects the visual style of the whole product. In general, most apps use the iOS standard design style (gray by default, select fill brand color), which is too common and too common. To make the TAB bar icon design delicate and personalized, you can enrich the visual performance of each selected icon, for example, add background and expression to the icon, which is vivid and interesting, but also increase the user’s good impression, leaving a deep impression on people.
3D stereoscopic icon design is a popular trend in recent years. It looks very delicate and gorgeous, but after a long time, it will cause slight visual fatigue and increase users’ cognitive cost because of its complex structure. It is commonly used in takeout food applications.
5. Design sense of Tab
Tab is one of the most common controls in App Design, which is derived from the Material Design specification. Many iOS products now use this navigation style, and the segmentation selector, which was originally part of the iOS specification, has become less common.
In the form of visual expression, Tab and Tab bar are also divided into selected and unselected states. Its design is relatively simple. Usually, a group of text labels are used to distinguish the two states by color or by adding a small bar under the label. Because it is simple, but the more difficult to design color, to develop a great design imagination, jump out of the design specifications of the limit, in order to find a perfect program. For example, Tab selection of Xiami Music is a section of audio wave line, combined with the size of the text comparison, a rich sense of design and product characteristics of the Tab was created.
We can also draw inspiration from the DNA of a brand, which is a great source of familiarity. Extract from the brand image has a unique temperament of the visual rich as Tab selected state of the small strip, so as to establish a visual connection, so that users have a consistent feeling from the inside out. For example, the smile symbol in the hornet’s nest brand image and the pig’s head in the flying Pig Travel brand image are extended to the design of Tab, which not only makes the interface vision unique, but also further strengthens the user’s cognition of the brand image.
6. Frameless design to simplify
In UI design, there are a lot of decorative elements, such as the border around the card, such as the line list, although the borders, line is a good way to separate the two elements, but it is not the only way to use too much will make the whole layout design are lower, more or less will interfere with the user to browse the line of sight, make information content lose focus, Therefore, unnecessary decorative elements can be reduced. We can divide the visual level of elements in the following ways to make the picture clean and tidy:
Use the shadow
Shadows can also create a sense of boundaries, and are more subtle than border lines. They don’t seem obtrusive and distract the user, making the content more focused.
Use different background colors to distinguish them
Often, the background of adjacent elements only needs to be subtly different to distinguish them. So, all you need to do is use different background colors for different blocks and try to remove the dividing line because you don’t need it.
Add extra white space
Creating separations between elements does not have to be represented by wireframes, just by adding white space to separate them. Grouping elements through white space and spacing is a common technique in UI design.
7. Unify design elements
Each interface in the App has many elements, and those similar elements should maintain a uniform design style. Usually the TAB bar icon in the personal center is a humanoid silhouette that represents the user and therefore can be continued in the interface that displays the user’s avatar and image. If the graphics have a unique appearance, such as oval rectangles, they can also be used as a visual symbol that carries over to other interfaces and becomes the appearance of graphics or buttons. In this way, the entire interface is linked by a unified design element, giving the user a consistent sense of consistency.
8. Fonts that fit the product’s temperament
Choose the font in line with the temperament of the product, which can be consistent with the positioning of the product and deliver the right emotional awareness to the user. Although the default font can meet the design requirements of most apps. One problem, however, is that the universal fonts of the system are not featured, and may not be effective in certain situations. For example, in sports apps, thick italics are more suitable to convey the feeling of power, explosive force and speed. After changing into system fonts, the overall feeling of momentum will be much weaker.
9. The third-party ICONS have the same style
Most apps support three-way logins, which can reduce the time cost of signing up. The third party icon entry is often displayed at the bottom of the sign-up page, which is the most often overlooked by designers, and is often directly resized and placed without redesign. A well-designed App should not omit any details. We can optimize the design of third-party ICONS based on the icon style of our own App.
10. Look for color in pictures
Beautiful graphic design in App, can bring users such as spring breeze visual enjoyment, it is very important. We often see the design style of text superimposed on the background of the image. In order to reduce the interference of the text caused by the complex background of the image, the common practice is to superimpose a semi-transparent black mask to make the white text clearly visible, but this is not the optimal method. We can extract the main color from the image to overlay the background with the fill color, so that the text, color blocks and the image blend together, the image becomes advanced and design.
11. Improve picture quality
The quality of pictures affects the style of the whole App and the mood of users. High-quality pictures give people pleasant visual enjoyment and produce good associations. Low-quality images will instantly drag down the texture of the App. In App design, a beautiful picture needs to go through cutting and color mixing before it can be used from collection to online. Even if it is an ordinary commodity picture, we can adjust it to a uniform size after matting, plus a clean background, can immediately improve the aesthetic feeling of the commodity, the interface vision will become beautiful and clean.
12. Card design
Nowadays, in UI interface design, card design has been a very common design form, which is conducive to information stratification and integration, divided into a clearer organizational structure, to achieve simplified processing of complex content, improve space utilization. At the same time, card design usually relies on visual elements. Strong visual elements are an advantage of card design and a good way to improve the sense of design quality.
Emotional design
Psychology believes that emotion is the attitude experience generated by people to whether objective things meet their needs. Only when the product touches the user’s heart, causes him to have the emotional change, then the product is no longer cold, he sees through the thing in front of him, is the designer for his use experience, to every devil detail carefully pondering, people will have the pleasure, love and happiness of emotion. Emotional design is not vigorous, sometimes just a copy, an illustration, an animation can move people, users get a pleasant experience. Making design superior is not just about the visual level, these simple and beautiful design details are full of positive emotions, it is to meet the functionality and ease of use of the product, the pursuit of a higher level of goal.
1. Suggestive text
Language is the most direct weapon of emotional design. Compared with cold words, anthropomorphic dialogues can gain users’ favorable impression and give products new vitality. For example, the push notifications of App, because users receive too many pushes every day, they are already at peace! That’s when you need a cheap, efficient PUSH copy to capture the hearts of your users. The original user of the disturbance into a joke, let a person see a smile.
2. Drop-down refresh
Pull-down refresh is a common operation for users in App use. The common pull-down refresh design is in the form of ICONS and text. This design is simple and intuitive, but it has no sense of design and cannot trigger any emotions of users.
Pull-down refresh is a temporary state, and enriching its design details does not cause it to be out of step with the product interface. Instead, a well-designed pull-down refresh design can make the product feel good to the user. For example, when uc headlines is refreshed, a running deer pops up, indicating that it is loading new content at a fast pace. The deer image continues the brand logo. As an information product, the speed of content update is crucial, and the deer running is just a metaphor for this point. Users also feel good about the product in this happy mood, instantly making the drop-down refresh vivid and interesting.
3. Profile picture design
The personal center page is closely related to the user information, and the virtual image of the user can be displayed here. The common design is a form of user profile picture plus login text, and this default profile picture design cannot be recognized by users.
Many products have moved away from the rigid default profile picture, giving users more choice. Give the product some personality charm, can make the product full of vitality, eliminate the cold human-machine interface interaction, help users and products to establish a friendly relationship. For example, Meituan Takeout and Liping, their respective identities represent the temperament of the product and the attributes of users, so that users can have a sense of identity.
4. The default page defuses negative emotions
The usual state is that the current page has no content or appears when there is no network state. The common design is the form of icon and prompt text, this simple design will cause a big psychological gap for users, into negative emotions. This is where emotional design can play a big role, as it is designed to reduce users’ frustration when they see a content-free interface. Designers can give play to a lot of space, according to product attributes and brand extension graphics, combined with dynamic effects or illustrations and other emotional design, can be very rich page content. For example, the blank page lying flat presents a kind of mean and adorable scene, which makes users smile and makes the product full of fun.
5. Fretting effect of the label bar
Emotional design is becoming more and more rich, and icon design is rising to show animation effects. Through the use of dynamic effects, TAB bar switching is no longer rigid. Users no longer feel monotonous when switching between pages frequently. The well-designed dynamic effect can relieve users’ anxious mood when waiting, shorten users’ waiting time psychologically, and make the brand more popular.
6. Simulate user behavior
If a product can simulate the user’s behavior and put the user into a real situation, the user will have a deep identification with the product. “Tides,” for example, plays different background music to create the atmosphere, depending on the time of day, scene and season. The sound of rain, thunder, wind, tide and so on makes people feel immersive.
Emotional design can shorten the distance between users and products, reflect the concern for humanity at a deeper level, and bring people emotional pleasure and touching. Understanding the user’s behavior and empathizing to meet the user’s needs leads to emotional communication. For example, when you take a screenshot of a picture, it will automatically show when you open the wechat dialog box, anticipating your need to send screenshots in advance.
For another example, many audiences are used to waiting for the Easter eggs at the end of the movie, because many times they sit in the theater and wait for the Easter eggs, but there are no Easter eggs. The result can only be wasted time. When you buy a movie ticket on Taobaoticao, you will find an Easter egg alert on the movie details page, telling you if the movie has Easter eggs and where they will appear in the movie. With this tip, there’s no need to waste time on uncertain Easter egg expectations.
7. Interesting details
As the saying goes: Interesting soul is one in a million, so it can be seen that fun can lead to communication and make people have a positive mood. In UI design, some interesting designs are invisible and need to be discovered by users themselves. When users find this egg, they will get a sense of joy and fun and enhance their desire to explore the product. For example, you will open the New World (⊙ O ⊙) in the Eerie Zone of Station B and press the return icon for about 10 seconds. (Friendly reminder: remember to wear headphones or turn down the volume.) In fact, after 10 seconds, a black box will appear at the bottom of the web page indicating “try to enter letters and discover the secret of eerie”. According to the prompt obediently input letters will appear ghost livestock star across your screen!
Some interesting designs are explicit, designed to elicit positive emotions from the user’s interaction with the product. For example, if you become a member of Youku Video, you can not only enjoy rich film and television resources, but also let your ID use the avatar of the relevant role in the drama when sending bullets. Bullet screen with role – playing avatar, let the speech more drama into the feeling. On the one hand, the setting of this egg strengthens the sense of nobility and privilege of membership, on the other hand, it also enricifies the diversification of the danmu area, which can be said to kill two birds with one stone.
In summary: the “advanced feel” of UI design means that the visual level should start from the small point of view, to create a sophisticated design of the graphics; On the other hand, we should start from the emotional design, so that users can have emotional resonance with the product and get a higher level of use experience.