Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to improve the advanced sense of UI design". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas to study and learn "how to improve the advanced sense of UI design".

Visual element

Today, with the increasing maturity of Internet products, you will find that all App are becoming more and more similar, as if they are products designed by the same set of templates. And this universal design will lead to serious homogenization, so that the design is not exquisite, the product does not have temperament and brand sense. Whether an App design is exquisite and full of design sense depends on its details, which means that when we carry out the design, we should start from the subtleties and delve into how to create a moving UI design from many aspects. This section summarizes 12 simple and intuitive small details to improve the sense of design, to learn together.

1. Use color shades to build a hierarchy

When styling UI text, the most common mistake is to rely too much on font size differences to create contrast. Simply use font size contrast, the contrast is not enough, try to combine color and word weight to create a better contrast effect.

Each color has a visual weight, which helps to establish a hierarchy in the content. Give different importance to elements by using the depth of the color. You can even use two or three colors if you can:

The main content is dark gray (such as headlines, but do not use pure black)

Secondary content is grayed out (such as product introduction)

Auxiliary content is in light gray (such as release date)

Similarly, in UI design, two different word weights are usually enough to create an excellent sense of hierarchy:

Most text has a normal word weight (400 to 500, depending on the font)

Use a heavier word weight for text that needs to be emphasized (600 to 700, depending on the font)

The word weight of the main title of △ is 600. the text weight of other green dots is 400.

You should try not to let the text weigh less than 400 words, because this part of the font itself is already small, and less than 400 will make it poor readability. If you still need to reduce the word weight, make the font lighter, or replace it with other fonts that are more recognizable and have a relatively small weight.

Gray text should be processed separately under colorless / color background.

Do not use gray text on a colored background. Changing black text to gray on a white background (or using gray text on a black background) is a good way to dilute its visual effects.

But in a colored background, there are usually two ways to reduce the contrast with the background color:

One is to reduce the opacity of the white text, and the other is to make the text closer to the background color rather than gray.

The designer position information on the left of △ reduces the opacity of the white text, and the picture on the right shows the color with the same hue as the background.

Secondly, when it comes to long content, a large area of dark bold characters will give people a sense of heaviness, and very leaping. This problem can be easily solved by choosing a color such as dark gray (# 4F4F4F), making the text easier to recognize.

two。 Uniform tone

Select a base color, and then adjust the tone and color depth to increase balance. Avoid using too many colors when designing. If the project allows, simply use a fixed swatch to increase the consistency of the design by adjusting the saturation and lightness of the base color.

3. Clean shadows

Shadow is the most common visual expression in UI design. It can increase the depth of elements, make it stand out from the background, attract users' attention, and enhance the visual hierarchy of the picture. Compared to using a wide range of diffuse blurred shadows, the effect of using subtle vertical offset shadows is more obvious and more natural, which simulates the most common light source characteristics, the shadow effect created by light shining down from top to bottom.

This soft shadow shows cleanliness, adding to the delicacy of the picture. If the range of the shadow is too small or the color is too dark, and the position is not offset, but gathered around the elements, it will make the picture more flat, make the vision thicker, and show an imdelicate sense of painting.

Shadows are not necessarily black, and another kind of diffuse shadow is that the color of the simulation element itself is projected on the background. Because the shadow is consistent with the hue of the element, it presents a very harmonious picture. In UI design, this technique should not be used too much, otherwise a variety of color collocation will be dazzling.

4. Individual icon design

Qualified designers can draw icons with a unified style, while good designers can create icons with unique styles. Can we add more creativity to its visual expression while pursuing the same size, fillet, linewidth and color? For example, the following set of icon designs show unparalleled creativity in both graphic innovation and color matching.

As a global navigation of App, the label bar plays a vital role, and its design affects the visual style of the whole product. In general, most App use the iOS specification design style (default gray, select fill brand color), such a design is too common, too common. If you want to make the label bar icon exquisite and full of personality, you can enrich the visual performance of each selected icon, such as adding background and expression to the icon, which not only appears lively and interesting, but also increases the user's good impression and leaves a deep impression.

3D three-dimensional icon design is a popular trend in recent years, which looks very exquisite and gorgeous, but watching it for a long time will cause slight visual fatigue and increase the cognitive cost of users because of its complex structure. It is more common in the application of take-out food.

5. Tab's sense of design

Tab is one of the most common controls in App design, which comes from the design specification of Material Design. Now many iOS products also begin to use this navigation bar style for design, while the segment selector originally part of the iOS specification has become less common.

In the form of visual expression, Tab and label bar are also divided into selected state and unselected state, its design is relatively simple, usually using a set of text tags, through the color or add a small bar under the label to distinguish the two states. Because it is simple, but the more difficult to design color, to give full play to the design imagination, jump out of the limitations of design norms, in order to find a perfect solution. For example, the Tab selection of Xiami Music is an audio wave line. Coupled with the size comparison of the text, a Tab with a rich sense of design and in line with the characteristics of the product is created.

We can also get inspiration from brand genes, which is an excellent source as an image that users are familiar with. Extract the visual tycoon with unique temperament from the brand image as a small bar selected by Tab, so as to establish a visual connection and let users have a consistent feeling from the inside to the outside. For example, the smile symbol in the hornet nest brand image and the pig head in the flying pig travel brand image are extended to the design of Tab, which not only makes the interface visual unique, but also further strengthens users' awareness of the brand image.

6. Frameless design to simplify and simplify

In UI design, there are many decorative elements, such as the border of the card, the split line of the list, etc., although the frame, split line is a good way to separate the two elements, but it is not the only way, using too much will reduce the design sense of the entire layout, more or less will interfere with the user's line of sight, so that information content lose attention, so you can reduce unnecessary decorative elements. We can divide the visual hierarchy of the elements in the following ways to make the picture clean and tidy:

Use Shadow

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

Use different background colors to distinguish

Usually, the background of adjacent elements only needs to be subtly different to allow people to distinguish them. So all you have to do is use different background colors in different blocks and try to delete the split 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 show it through wireframe, just increase the white space and let them separate. Grouping elements through white space and spacing is a common technique in UI design.

7. Unified design elements

There are many elements in every interface in App, and those similar elements should maintain a unified design style. Usually the label bar icon in the personal center is a human silhouette, which represents the user, so it can be used continuously in the interface that displays the user's profile picture and user image. If a graphic has a unique appearance, such as an elliptical rectangle, it can also be extended to other interfaces as a visual symbol and become the appearance of a graphic or button. In this way, the entire interface is connected by unified design elements, giving users a consistent sense of consistency.

8. Fonts that conform to the temperament of the product

Choosing the font in line with the product temperament can be consistent with the positioning of the product and pass on the correct emotional consciousness to the user. Although the default font can meet most App design requirements. However, there will be a problem is that the universality of the system font does not have any features, and it has little effect in some specific situations. For example, in the sports App, it is more suitable for the stout italics to convey the feeling of strength, explosive force and speed. After changing to the system font, the overall feeling becomes much weaker.

9. The style of the third-party icon is unified.

Most App supports three-party login, which can reduce the time cost of user registration. The entry of third-party icons is usually displayed at the bottom of the registration landing page, which is what designers most often ignore, often directly resizing and placing third-party icons 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 colors in the picture

The beautiful picture and text design in App can bring users visual enjoyment such as spring breeze, it 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 the complex picture background to the text, the usual practice is to stack a semi-transparent black mask to make the white text visible clearly, but this is not the best way. We can extract the main tone from the picture to overlay the background of the fill color, so that the text, color blocks and pictures together, the picture becomes advanced and full of design.

11. Improve picture quality

The quality of the picture affects the style of the whole App and the mood of the user. High-quality pictures give people pleasant visual enjoyment and produce beautiful associations. And low-quality pictures will instantly lower the texture of App. In App design, a beautiful picture needs to be cropped, colored and so on before it can be used from collection to launch. Even if it is an ordinary commodity picture, we adjust it to a uniform size after matting, coupled with a clean background, we can immediately enhance the beauty of the product, and the interface vision will become beautiful and tidy.

twelve。 Card design

In the current UI interface design, card design has been a very common form of design, it is conducive to information layering and integration, divided into a clearer organizational structure, to achieve the simplification of complex content, and improve space utilization. At the same time, card design usually depends on visual elements, which is not only an advantage of card design, but also a good way to improve the quality of design.

Emotional design

According to psychology, emotion is the attitude experience of whether objective things meet their own needs or not. Only when the product touches the user's heart and causes him to have emotional changes, then the product is no longer cold. Through what he sees in front of him, what he sees is the designer's deliberation on every devil detail for his use experience. People will have feelings of happiness, love and happiness. Emotional design is not vigorous, sometimes just a copy, an illustration, an animation can move people, so that users get a pleasant experience. To make the design advanced is not only 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 dialogue can gain the favor of users and give products new vitality. For example, App those push push notifications, because users receive too much PUSH every day, already feel at ease! At this time, you need a low-cost and efficient PUSH copywriter to touch the hearts of user owners. Turn the original disturbance to the user into a kind of amusement, let people see a knowing smile.

two。 Drop-down refresh

Drop-down refresh is a common operation for users in the use of App. The common drop-down refresh design is in the form of icon and text. This design is simple and intuitive, but it has no sense of design and can not arouse any emotion of the user.

Drop-down refresh is a temporary state, enriching its design details will not cause incompatibility with the product interface, on the contrary, a drop-down refresh design with a rich sense of design can make the product popular with users. For example, the uc headline in the drop-down refresh will pop up a running deer, suggesting that the new content is being loaded quickly, deer image continues the brand logo. As an information product, the speed of content update is very important, and the running deer is a metaphor for this. Users also like the product in this happy mood, which instantly makes the drop-down refresh lively and interesting.

3. Avatar 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 in the form of a user avatar plus login text. This default avatar design can not get the user's sense of identity.

Now many products have given up the rigid default avatar, giving users more choices. Giving the product some personality charm can make the product full of vitality, eliminate the cold interaction of the man-machine interface, and help users to establish a friendly relationship with the product. For example, Meituan takeout and lie flat, their respective identities represent the temperament of the product and the attributes of users, so that users have a sense of identity.

4. The default page resolves negative emotions

The usual state is that the current page has no content or a page that appears in a network-free state. The common design is in the form of icon and prompt text, this simple design will cause a big gap in the user's psychology and fall into negative emotions. Emotional design can play a huge role at this time, through design means to reduce the frustration of users when they see a content-free interface. Designers can play a lot of space, according to product attributes and brand extension graphics, combined with dynamic effects or illustrations and other emotional design, can well enrich the content of the page. For example, the flat blank page presents a cheap and cute scene, which makes the user smile and makes the product interesting.

5. Label bar fretting effect

Emotional design has become more and more abundant, and icon design has risen to show animation effects. Through the use of dynamic effects, the tab bar switch is no longer rigid. When users switch pages frequently, they no longer feel monotonous. The well-designed dynamic effect can alleviate the anxious mood of users while waiting, shorten the waiting time psychologically, and make the brand more deeply rooted in the hearts of the people.

6. Simulate user behavior

If a product can simulate the behavior of the user and put the user into the real situation, the user will have a deep sense of identity 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 and tide makes people feel the immersive situation all the time.

Emotional design can shorten the distance between users and products, reflect the concern for human nature at a deeper level, and bring emotional pleasure and emotion to people. Emotional communication occurs when you have an insight into the behavior of the user and think of others to meet the needs of the user. For example, when you take a screenshot and open the Wechat dialog box, the picture will be automatically displayed, predicting in advance your need to send a screenshot.

For example, many audiences are used to waiting for eggs at the end of the movie, because often sitting in the cinema waiting for eggs but waiting for no eggs can only waste time. When you buy a movie ticket on Taobao, you will find an egg reminder on the movie details page to tell you if the movie has eggs and where the eggs will appear. With this hint, you don't have to waste time expecting uncertain eggs.

7. Interesting detail design

As the saying goes: one in a million interesting souls, it can be seen that fun can trigger communication and then make people have positive emotions. In UI design, some interesting designs are invisible and need to be discovered by users themselves. When users find the egg, they will get a joy and fun to enhance the user's desire to explore the product. For example, press the return icon of bilibili on the computer for about 10 seconds, and you will open the ⊙ o ⊙ (friendly reminder: remember to put on headphones or turn down the volume). In fact, 10 seconds after pressing "return to the top", a black box appears at the bottom of the page prompting "try to enter letters and discover the secrets of ghosts and animals". Follow the prompts to enter the letters obediently and there will be ghosts and animal stars across your screen!

Some interesting designs are explicit, designed to allow users to communicate with the product and generate positive emotions. For example, if you become a Youku video member, you can not only enjoy rich film and television resources, but also let your ID use the avatars of the characters related to the series during the barrage. The on-screen comment with role-playing avatar makes the speech feel more like a part of the show. On the one hand, the setting of this colored egg strengthens the sense of dignity and privilege of membership, on the other hand, it also enriches the diversity of the on-screen comment area, which can be said to kill two birds with one stone.

Generally speaking: the "advanced sense" of UI design means that at the visual level, we should start from the subtleties to create exquisite and rich design pictures; on the other hand, we should proceed from emotional design to make users and products have emotional resonance and get a higher level of experience.

Thank you for your reading, the above is the content of "how to improve the advanced sense of UI design". After the study of this article, I believe you have a deeper understanding of how to improve the advanced sense of UI design, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.