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

This article shows you 7 tips to improve the visual experience of UI. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can gain something through the detailed introduction of this article.

In the design process of UI, there are many skills that do not require deep design knowledge, but they can make your UI and web interface look significantly improved. Experience and skills in improving design can often make people take fewer detours.

Let's talk less. Let's take a look at the details below.

1. Button color highlights the importance

When providing users with multiple choices, you can simply and quickly design through whether the emotion conveyed by color is positive or negative.

In fact, the color meaning of red and green buttons has straddled the physical world and digital design, and we can see similar designs on many physical products every day, including traffic lights, warning signs, and physical buttons.

Green indicates traffic and red indicates prohibition. If users need to buy a funnel, you want interested users to click on it instead of canceling it.

In addition, if your site or APP involves several interactions of different importance, in addition to identifying the corresponding text label content, you can further distinguish the hierarchy with or without color filling:

This is a simple example, distinguished by a color-filled button, a ghost button (no color fill, with a border), and a no border and no fill button.

In a few cases, buttons that have an important, destructive, or restrictive impact on the system should also be highlighted, but red can be used for emphasis and warning. At this point, the relatively "non-negative" button is seen as a less important operation:

In short, in fact, the core that users use to distinguish buttons depends on perception rather than complex logical judgment, the basic rules of design are above, but it is more important to design based on emotion and perception.

two。 Distinguish levels by word weight and light and shade

Especially when building the visual level of text content, there are many attributes available, and it is too simple to use only size differences to build.

In many cases, it can be distinguished by color, word weight, light and shade. We can make the more important text larger, thicker, brighter, or use darker black to render.

Use these attributes comprehensively to build a visual hierarchy.

3. Use blanks to isolate elements

Two elements are not related to each other, so if you want to separate them, it seems like a matter of course to use a split line. Sure, but this is really a very old-fashioned and clumsy way of presentation. What you need is a presentation that is better, more elegant and more relevant to the present.

Instead of simply using the split line, you can use white space, or negative space, to separate it. The dividing line is largely an ugly and uncontrollable visual noise, but it is much better to leave it blank.

In most cases, deleting separated lines is a faster way, but more often you need to adjust the size of the white space appropriately.

Using split lines to separate content not only takes longer to scan the page, but also the increased information noise affects the overall hierarchy.

4. Replace the border with shadows

If you want to highlight some elements, you don't have to rely on strokes. Using shadows can have the same effect, and using it alone will look cleaner. Stroke + shadow will appear too messy.

The use of small, less aggressive shadows undoubtedly makes the effect easier and less obtrusive.

△ login form

5. Use color bars to improve visual tonality

If you think the content block is too monotonous, you can enhance the visual attributes of the block according to your purpose. Adding a color bar to one side of the content area can not only improve the visual properties, but also give emotion to the content of this area.

The color bar can be monochrome or gradual, depending on what kind of visual experience you want to convey. This color bar can also have good functionality. Of course, this is largely used on relatively plain pages, and it's not very useful if the page itself is already very fancy.

For example, red and green are used to identify different states, or color bars can be used to identify the Tab or control that is triggered.

6. Distinguish blocks by background color

In fact, it is also to distinguish between content blocks and levels, this method is equally elegant and fast, and can be regarded as an almost effortless design technique.

In order to distinguish the elements of two different blocks, it is also possible to simply use different backgrounds to distinguish. In essence, it adopts a card-like design idea-classifying content with different cards.

Relatively speaking, the use of different but less significant color blocks as the background can not only ensure the overall cleanliness, but also play a distinguishing role.

7. Make the best use of "Zi"

Who doesn't like beautiful fonts? Of course I like them all, but the functions of fonts are actually different. From the highly readable text that presents the text to the highly decorative visual fonts, different fonts need to deal with different functions.

Take a quick look at several different types of fonts:

1. Serif fonts: Serif itself means serif, so there is usually a small decorative serif at the end of the character. Serifs, in addition to decoration, can also enhance the readability of fonts. A common serif font: Georgia,Times New Roman,Cambria.

two。 Sans serif fonts: Sans-Serif fonts, which are relatively more modern. When serif is removed, the lines feel stronger, cleaner, and better suited to some of the display needs of the digital age. A common sans serif font: Helvetica,Montserrat,Gotham.

It is generally believed that serif fonts are more suitable for long-term reading and are more commonly used in printed matter. However, the serifs and corners of serif fonts are mostly sharper and will be regarded as visual noise to some extent. In the era when the screen resolution can not meet the requirements, the display of serif fonts is very difficult. Of course, with the improvement of screen resolution, this problem almost does not exist, but it still exists on small font size and low resolution and small screen.

3. Handwritten fonts: handwritten fonts are usually considered to be handwritten fonts, and when presented, there are often consecutive strokes, which are closer to the effect of traditional handwritten fonts. Handwritten fonts are more casual and interesting. Common handwritten fonts include: Alex Brush,Great Vibes,Sofia.

4. Sex fonts displayed: the sex fonts displayed are a function-oriented classification, which usually refers to the fonts used for title display, posters, badges, etc., which are more expressive and visual features are more prominent. to put it bluntly, it is to attract the attention of users. Common sex fonts displayed include: Algerian,Curlz,Gigi,Umbra.

In web design, only serif fonts and sans serif fonts are used in most cases. In English websites, a serif font + a sans serif font is usually used. Note that if you have fonts of different thickness and weight, it is better to use fonts in the same font family. In Chinese, open source and free commercial "Siyuan boldface" and "Siyuan Song style" is a very common choice in design.

In visual design, I insist on using two fonts and rarely use three fonts, which are most often used in commercial or artistic projects that emphasize vision, such as Banner and posters.

What are the above 7 tips to improve the visual experience of UI? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.