How to improve the high-level sense of UI design? Let’s see the in-depth analysis of experts!

Perfection is not because there is nothing to add, but because there is nothing to take away.

Creating a beautiful, usable, and efficient UI interface requires time to polish the design details. This article discusses how to enhance the sophistication of UI design from the perspectives of visual and emotional design.

Visual Elements

As Internet products become more and more mature, you will find that all apps are more and more similar, as if they are designed from the same template. This universal design will lead to serious homogeneity, making the design unrefined, and the product lacking temperament and brand sense. Whether an app design is refined and has a sense of design depends on its details, which means that when we design, we must start from the subtleties and study from many aspects how to create a touching UI design. This section summarizes 12 simple and intuitive details to enhance the sense of design. Let's learn together.

1. Use color depth to create hierarchy

When styling UI text, the most common mistake is to rely too much on font size differences to create contrast. Simply using font size contrast is not enough to create contrast. Try combining color and weight to create better contrast.

Each color has a visual weight, which helps to establish hierarchy in your content. By using shades of color, you can give elements different levels of importance. You can even go with two or three colors if you can:

• Use dark gray for main content (such as headings, but never pure black)
• Use gray for secondary content (such as product descriptions)
• Use light grey for auxiliary content (such as release date)

Similarly, in UI design, two different weights are usually enough to create a good sense of hierarchy:

• Most text is in normal weight (400 to 500, depending on the font)
• Use a heavier weight for text that needs emphasis (600 to 700, depending on the font)

You should try not to make the weight of the body text lower than 400, because the font size of this part is already small, and lower than 400 will make the readability poor. If you still need to reduce the weight, you can make the font lighter or replace it with other fonts with stronger recognition and relatively smaller weight.

Gray text should be treated separately on plain/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 good way to weaken its visual effect.

But in a colored background, if you want to reduce the contrast between the background color and the background color, there are usually two ways:

One is to reduce the opacity of white text; the other is to make the text gradually approach the background color instead of changing it to gray.

Secondly, when it comes to long-form content, large areas of dark bold text can feel heavy and jumpy. This problem can be easily solved by choosing a color like dark gray (#4F4F4F) to make the text easier to recognize.

2. Unify the color tone

Choose a base color and adjust the hue and color shade to add balance. Avoid using too many colors in your design. If the project allows, just use a fixed color palette and use this simple way to add consistency to the design by adjusting the saturation and lightness of the base color.

3. Clean shadows

Shadow is the most common visual expression technique in UI design. It can increase the depth of elements, make them stand out from the background, attract the user's attention, and enhance the visual hierarchy of the picture. Compared with the use of large-scale diffuse blur shadows, the use of subtle vertical offset shadows is more obvious and more natural. It simulates the most common light source characteristics, the shadow effect created by light shining from top to bottom.

This soft shadow is clean and adds to the refinement of the picture. If the shadow is too small or too dark, and the position is not offset but gathered around the element, it will make the picture flatter, make the vision heavy, and present an unrefined picture.

Shadows are not necessarily black. There is also a diffuse shadow that simulates the color of the element itself and projects it onto the background. Since the shadow is consistent with the color of the element, it presents a very harmonious picture. In UI design, this technique should not be used too much, otherwise the various color combinations presented will be dazzling.

4. Personalized icon design

Qualified designers can draw icons with a unified style, while excellent designers can create icons with a unique style. Can we add more creativity to its visual expression while pursuing consistent size, rounded corners, line width and color matching? For example, the following set of icon designs show unparalleled creativity in both graphic innovation and color matching.

The tab bar plays a vital role as the global navigation of an app, and its design affects the visual style of the entire product. Usually, most apps use the iOS standard design style (gray by default, brand color when selected), which is too common. To make the tab bar icon design exquisite and full of personality, you can enrich the visual performance of each selected icon, such as adding backgrounds and expressions to the icons, which makes them lively and interesting, increases the user's favorability, and leaves a deep impression.

3D icon design has been a popular trend in recent years. It looks very delicate and gorgeous, but it will cause slight visual fatigue after looking at it for a long time. At the same time, its complex structure will increase the user's cognitive cost. It is generally more common in takeaway food applications.

5. Tab design

Tab is one of the most common controls in App design, which is derived from the design specification of Material Design. Now many iOS products have begun to use this navigation bar style for design, and the segment selector that originally belonged to the iOS specification has become less common.

In terms of visual expression, Tab and tab bar are also divided into selected and unselected states. Its design is relatively simple, usually using a set of text labels, distinguishing the two states by color or adding a small strip under the label. Because it is simple, it is more difficult to design it well. It takes great design imagination and breaking away from the limitations of design specifications to find a perfect solution. For example, the selected state of Xiami Music's Tab is a section of audio wave line, combined with the size contrast of the text, a Tab with a sense of design and in line with product characteristics is created.

We can also draw inspiration from brand genes. Brands are an excellent source of images that users are familiar with. We can extract visual icons with unique temperament from brand images as small long strips in the selected state of the Tab, so as to establish a visual connection and give users a consistent feeling from the inside out. For example, the smile symbol in the Mafengwo brand image and the pig head in the Fliggy Travel brand image are both extended to the Tab design, which not only makes the interface visually unique, but also further strengthens the user's perception of the brand image.

6. Frameless design is simple and concise

In UI design, there are many decorative elements, such as the border of the card, the dividing line of the list, etc. Although the border and dividing line are a good way to separate two elements, they are not the only way. Excessive use will reduce the design sense of the entire layout, more or less interfere with the user's browsing vision, and make the information content lose attention. Therefore, unnecessary decorative elements can be reduced. We can divide the visual hierarchy of elements through the following methods to make the picture clean and tidy:

Use Shadows

Shadows can also create a sense of boundaries, and are more subtle than border dividing lines. They do not appear abrupt, will not distract users, and make the content more focused.

Use different background colors to distinguish

Usually, the backgrounds of adjacent elements only need to be subtly different to be distinguishable. 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 at all.

Add extra white space

To create a separation effect between elements, you don’t have to use wireframes. Just add 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 unified design style. Usually, the tab bar icon of the personal center is a human silhouette, which represents the user, so it can be continued in the interface that displays the user's avatar and user image. If the graphic has a unique appearance, such as an ellipse or rectangle, it can also be used as a visual symbol and continued to other interfaces to become the appearance of the graphic or button. In this way, the entire interface is connected by a unified design element, giving users a consistent sense of consistency.

8. Fonts that match the product’s temperament

Choosing a font that matches the product's temperament can match the product's positioning and convey the correct emotional awareness to users. Although the default font can meet the design needs of most apps, there is a problem that the universality of the system font is not special and has little effect in some specific situations. For example, in sports apps, it is more suitable to use a thick italic font to convey the feeling of strength, explosiveness, and speed. After changing to the system font, the overall feeling becomes much weaker in momentum.

9. Unify the style of third-party icons

Most apps support third-party login, which can reduce the time cost of user registration. Usually, the third-party icon entrance is displayed at the bottom of the registration page, which is also the most often overlooked content of designers. Often, third-party icons are directly adjusted to the same size and placed in a neat position without redesigning them. A well-designed app should not miss 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 images

Beautiful graphic design in the app can bring users a visual enjoyment like spring breeze, which is very important. We often see the design style of text superimposed on the background of the picture. In order to reduce the interference of complex picture background on the text, the usual practice is to superimpose a semi-transparent black mask to make the white text clearly visible, but this is not the best way. We can extract the main color from the picture to superimpose the background fill color, so that the text, color blocks and pictures are integrated together, and the picture becomes advanced and full of design sense.

11. Improve image quality

The quality of the picture affects the style of the entire App and the user's emotions. High-quality pictures give people a pleasant visual enjoyment and generate beautiful associations. Low-quality pictures will instantly lower the texture of the App. In App design, a beautiful picture needs to go through the process of cropping, color adjustment, etc. from collection to online before it can be used. Even if it is an ordinary product picture, we can immediately enhance the beauty of the product by cutting it out and adjusting it to a uniform size, and add a clean background, and the interface will become beautiful and neat.

12. Card-based design

In the current UI interface design, card-style design has become a very common design form. It is conducive to information layering and integration, dividing a clearer organizational structure, simplifying the processing of complex content, and improving space utilization. At the same time, card-style design usually relies heavily on visual elements. Strong visual elements are an advantage of card-style design and a good way to improve the quality of design.

Emotional Design

Psychology believes that emotion is the attitude and experience of people towards whether objective things meet their needs. Only when the product touches the user's heart and makes him change his emotions, the product will no longer be cold. What he sees through the things in front of him is the designer's careful consideration of every devilish detail for his user experience, and people will feel happy, fond and happy. Emotional design is not grand and spectacular. Sometimes just a copy, an illustration, or an animation can touch people's hearts and give users a pleasant user experience. Making the design advanced is not just about the visual level. These simple and beautiful design details are full of positive emotions. It is to pursue a higher level goal after satisfying the functionality and ease of use of the product.

1. Prompt text

Language is the most direct weapon for emotional design. Compared with cold words, personified dialogue can win users' favor and give new vitality to the product. For example, App push notifications, because users receive too many push notifications every day, they have long been calm! At this time, you need a low-cost and high-efficiency push copy to stir the hearts of users. Turn the original disturbance to users into a funny thing, so that people can smile knowingly.

2. Pull down to refresh

Pull-down to refresh is an operation that users often perform when using apps. The common pull-down to refresh design is in the form of an icon plus text. This design is simple and intuitive, but has no sense of design and cannot trigger any emotions in users.

Pull-down refresh is a temporary state. Enriching its design details will not make it incompatible with the product interface. On the contrary, a design-rich pull-down refresh design can make the product gain the favor of users. For example, when UC Toutiao pulls down to refresh, a running deer will pop out, suggesting that new content is being loaded at a rapid pace. The image of the deer continues the brand logo. As an information product, the speed of content update is crucial, and the running deer is a metaphor for this. Users also develop a good impression of the product in this happy mood, which instantly makes the pull-down refresh lively and interesting.

3. Avatar Design

The personal center page is closely related to user information, and the user's virtual image is displayed here. The common design is a user avatar plus login text. This default avatar design cannot gain user recognition.

Many products now have abandoned the rigid default avatars and given users more choices. Giving products some personality charm can make them more vibrant, eliminate the cold interaction of the human-computer interface, and help users establish a friendly connection with the product. For example, Meituan Waimai and Tangping, their respective identities represent the temperament of the product and the attributes of the user, allowing users to have a sense of identity.

4. Default page to resolve negative emotions

Usually, the current page has no content or appears without network. The common design is in the form of icons plus prompt text. This simple design will cause a great psychological gap for users and make them fall into negative emotions. Emotional design can play a huge role at this time. It uses design methods to reduce the frustration of users when they see an interface with no content. Designers have a lot of room to play. According to product attributes and brand extension graphics, combined with emotional designs such as motion effects or illustrations, the page content can be enriched well. For example, a lying blank page presents a cute scene, which makes users smile and makes the product full of fun.

5. Tab bar micro-animation

Emotional design is becoming more and more abundant, and icon design can even display animation effects. Through the use of dynamic effects, the tab bar switching is no longer rigid. Users no longer feel monotonous when switching pages frequently. Well-designed dynamic effects can relieve users' anxiety when waiting, shorten the waiting time psychologically, and make the brand more popular.

6. Simulate user behavior

If a product can simulate user behavior and put users into real situations, users will have a deep sense of identification with the product. For example, "Tide" will play different background music to create an atmosphere according to the time scene and seasonal changes. The sound of rain, thunder, wind, tide, etc. makes people feel immersive at all times.

Emotional design can bring users and products closer, reflect the care for humanity at a deeper level, and bring people emotional pleasure and touch. By understanding the user's behavior and thinking from their perspective to meet their needs, emotional communication will occur. For example, when you take a screenshot of a picture, the picture will be automatically displayed when you open the WeChat dialog box, predicting your need to send a screenshot in advance.

For example, many viewers are used to waiting for the Easter egg at the end of the movie, because many times they sit in the theater waiting for the Easter egg but there is no Easter egg, which is a waste of time. When buying movie tickets on Tao Piaopiao, you will find an Easter egg reminder on the movie details page, telling you whether the movie has an Easter egg and where the Easter egg will appear in the movie. With this reminder information, you don't have to waste time waiting for the uncertain Easter egg.

7. Interesting details

As the saying goes: interesting souls are one in a million, which shows that interestingness can trigger communication and make people have positive emotions. In UI design, some interesting designs are invisible and need to be discovered by users themselves. When users find this easter egg, they will get joy and fun, which enhances the user's desire to explore the product. For example, open the ghost animal area of ​​​​Bilibili on the computer and press and hold the return icon for about 10 seconds, you will open a new world in the ghost animal area (⊙o⊙) (Friendly reminder: remember to wear headphones or turn down the volume) In fact, after pressing and holding "Return to the top" for 10 seconds, a black box prompt will appear at the bottom of the webpage "Try to enter letters and discover the ghost animal secrets." Follow the prompts and enter the letters obediently, and a ghost animal star will appear across your screen!

Some interesting designs are explicit, with the goal of allowing users to communicate with the product and generate positive emotions. For example, becoming a Youku video member not only allows you to enjoy a wealth of film and television resources, but also allows your ID to use the avatars of the characters in the series when posting barrages. The barrages with role-playing avatars make the speech more immersive. The setting of this easter egg not only strengthens the dignity and privilege of membership, but also enriches the diversity of the barrage area, which can be said to kill two birds with one stone.

In general: the "high-end sense" of UI design means starting from the details on the visual level to create exquisite and design-rich pictures; on the other hand, it means starting from emotional design to make users resonate emotionally with the product and obtain a higher level of user experience.

Final Thoughts

The best way to learn is to summarize and talk about the knowledge points accumulated in daily life so that you can truly own them. In the new year, I hope every designer can continue to maintain the passion and love for design and life. I hope this article will be helpful to you.