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

The content of this article mainly focuses on what are the eight practical skills to improve the efficiency of UI design. The content of the article is clear and clear. It is very suitable for beginners to learn and is worth reading. Interested friends can follow the editor to read together. I hope you can get something through this article!

When designing, do you dwell on various possibilities, such as making the text bigger or smaller, or increasing (or decreasing) the white space around the elements, whether the color should be darker or lighter? I will share some tips on how to solve these common problems and how to make the design more consistent and user-friendly.

There are countless ways to combine elements in the interface, so you need to set some rules and boundaries, otherwise the design workflow may be difficult to proceed smoothly. You may struggle with all the possibilities and try to choose the best one among the many "right" options. By setting (and following) some basic rules, the design can be more unified.

The following is for junior designers, you don't need a lot of experience to quickly master these skills.

△ systematic thinking is very important the importance of consistency in interface design

Let's get this straight from the beginning. You want your design to look good and trustworthy, and you need to avoid confusion at all costs. In order to achieve this, it is very important to have a complete systematic thinking.

Developers also expect designers to make good use of systematic thinking, they like well-organized design, so that their work will be easier.

Size design system of a given size

It doesn't matter whether you resize the text, resize the picture, or adjust the white space, as long as you need to determine the size of each element. I bet you've come across a situation like this: you once chose a size for an element and changed it five minutes later, but it didn't take long to change it again, maybe countless times in the end.

Which size is the best? It may be a size you've tried, but you should avoid this endless time-wasting trap!

First select the basic unit: 8-pixel grid

In order to make the whole design look more concise, it is best to set the reference units before determining all the dimensions. It's up to you to decide how much to choose, but usually, the best choice is to stick to some proven rules. One of the rules is to resize and move elements in multiples of 8 pixels. This rule will make decisions more efficient.

Px and dp: the word "dp" is also used in interface design and prototyping. "dp" is an acronym for "density independent pixels". "this unit is based on a 160dpi screen. One dp equals one pixel on a 160dpi screen, two pixels on a 320dpi screen, and so on. The mathematical conversion formula is'px = dp * (dpi/160)'.

Note: if you are using a smaller element or object, you can also use a 4-pixel increment instead of an 8-pixel increment-occasionally making further adjustments as needed.

But why 8 pixels?

There are several reasons why 8 is often like a "magic number":

8 pixels is a sufficient minimum "increment".

8 is a good number because it is divisible by 4 and 2.

If you use 8, you can easily resize any element without half a pixel, such as 8 / 2 = 4, 4 / 2 = 2, and 2 / 2 = 1. On the other hand, if you start with 10, you get 5 pixels, then 2.5 pixels, then 1.25 pixels. When designing the interface, avoid half the pixels as much as possible. By using full pixels, the elements in the design will be aligned to precise pixel boundaries and eventually look clearer.

Multiples of 8 (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc.) are intertwined with binary values (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, etc.). (Caiyun Note: very program friendly)

Finally, these numbers are also easy to remember.

What are the advantages of using an 8-pixel grid?

As a designer, decision-making time is very valuable. This will make you faster and more efficient.

If docked with the developer, this can create a system to help the team improve efficiency. If the developer needs to make some quick changes, he can adjust the value to an increment of 8 pixels. This ensures consistency and regularity.

When people visit the website you design, they will feel comfortable and enhance trust and user experience.

An effective method for △ to use 8px Grid

Results of △ using 8px grid

Use a grid to lay out all elements

1. Horizontal grid

I believe you have already used the grid when designing the website, and using the grid can help you accurately place all the elements on the interface.

The mesh forms the skeleton of the interface and determines where the elements can be placed. Templating defines clear boundaries so that the design is more consistent. With the grid system, it is easier to decide where to put the elements. As you become more experienced, it will be easier to adjust the interface.

But how do you create this grid? We will discuss the specific issues below. Basically, the number and size of columns may be random, depending on your needs. The more detailed the design, the more columns the grid needs. If you are still in doubt, you should ask an experienced colleague for help.

△ horizontal grid

two。 Vertical grid

Similar to horizontal grids, it is important to maintain vertical distance consistency in your design, and like rows in a spreadsheet, they help keep text evenly spaced.

How big should these lines be? Again, it depends on your needs. However, I recommend using 8 pixels or multiples of 8 (such as 16) to redefine the boundaries where elements or text are to be aligned.

△ vertical grid

Choose the correct font size

If you look closely at some well-designed fonts, you will find that the font size is consistent. There's a reason for that.

Note: remember that you only need two, maybe three font sizes in your design. However, how to choose the right fonts and make them work together is beyond the scope of this tutorial.

First define some key font sizes to be used throughout the project. (for example, it would be foolish to use 30, 31and 32 pixels. Instead, these three very similar sizes should be merged into one.)

Standard font size has two benefits:

The design will be more consistent and elegant.

It will speed up the design process and make you more efficient.

Font size

When defining font size, make sure that you do not increase the size in the same increments. When zooming in on the text, it should be nonlinear. This means that the larger the text you create, the larger the increment should be.

△ has a system of font size

Suppose there is a text with a font size of 12 pixels, you want to enlarge it, and then try to use 14 pixels, you are satisfied. But then imagine you have a big title (40 pixels) and you want to make it bigger. Can you increase the size from 40 pixels to 42 pixels? Of course not. Visually, the text needs to be changed more. You may need to increase it by 24 pixels at design time to get a larger 64-pixel title.

In short, this means that the larger the text, the greater the increment you need to use. This very simple principle applies not only to text, but also to button size, whitespace, and all other elements. (Caiyun Note: the size difference between the two elements must be obvious, if it is very close, it will give people the impression that something is wrong.)

It is usually based on a geometric series. This is a very useful chart showing the font scale:

△ geometric series

However, an effective method for typesetting is to use a set of experienced font sizes. The scale is 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels.

△ validated font size ratio

Row height

Once you have defined all the font sizes, pay attention to the line height. For row height, use an increment of 4 pixels again. For example, for 16-pixel text, we set the row height to 24 pixels. If you want to make the text more breathing, increase the line height by 4 pixels to 28.

Define colors in a project

There are too many combinations of colors, and if you don't define the depth of the color in advance, you will waste too much time. You can't confine yourself to clear colors such as black, white and blue. For each color, other tones are needed, and it is important to set them in advance so that colors can be systematic throughout the design project. Prepare 5 to 10 tones for each color. I like to define 9 tones for each color.

Let's take a closer look at the depth of the color.

Why does each color have 9 tones?

The first advantage is color naming. Whether you are using design software or CSS code, you will benefit from this technique. Each shadow is assigned a number, such as 100, 200, 300, 400, 500, 600, 700, 800, and 900. Why hundreds? From the definition of self-weight in css, article link: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).

Second, 9 is a convenient number that defines the color. The best way to prepare these tones is to prepare a row of nine squares and fill them with colors. In the middle is the base color, and then, define the brightest hue (on the far left) and the darkest hue (on the far right). The next step is to set the color between the tones.

△ has nine tones for each color

Prepare different sizes, types, and states of elements

At design time, countless icons, buttons, and other components are usually used. Again, it is best to prepare several sizes in advance and limit the options to as few as possible. During the design process, do not add other sizes, and do not try to resize the components to meet your needs. On the contrary, using only those that have been defined will make the whole design more consistent and cleaner.

Let's take the button as an example. In the beginning, you need to define their hierarchy. To do this, create a button that contains the primary action, a button that contains the secondary action, or another button that packages the secondary action. For each button, specify its state (active, inactive) and color variation. In short, try to reduce the number of elements to the most important elements (Caiyun Note: the aim is to minimize the time of selection, ensure consistency, and improve design efficiency and quality).

An example of △ button style

Define the attributes of other elements

UI designers often use projection in their designs. However, for inexperienced designers, projection can sometimes be a struggle. When making a projection, you must set the distance of the projection along the x-axis and y-axis, as well as the blur radius, color, and transparency. Projections can take a lot of time to adjust, which is why they should be prepared before delving into the design. Prepare projection components in advance (using the same methods as colors), and then apply them throughout the design process.

In addition, be careful to determine all other attributes of the element you use, such as corner radius, transparency, and color gradient.

An example of △ Shadow style

Leave blank

It is important to adjust the blank space properly. Whether you adjust the element from the outside (blank) or from the inside (fill), you should once again rely on the magic number 8, increasing the offset by 8 pixels (4 pixels for small elements). As with font size, the larger the spacing, the larger the increment (again, it is best to define these increments in advance).

△ blank

In order to make the design clear and consistent, define some boundaries and clear processes throughout the process.

When designing each element, keep the following points in mind:

See if it has been used in the design. If so, reuse more.

Follow the horizontal and vertical rhythm and resize the element using the steps defined at the beginning.

To avoid complex decisions and endless pixel wars, an appropriate system is needed.

Do not create the same element twice. If there is order in the design, your work will be better and more efficient, the design will be able to iterate faster, and the docking with development will be smoother. Developers will set variables in advance according to the design style you do, so define them clearly. In the end, you will get a clean design, and developers will be able to write better and more sustainable code.

Thank you for your reading. I believe you have some understanding of the question of "what are the 8 practical skills to improve the efficiency of UI design?" go ahead and practice it. If you want to know more about it, you can follow the website! The editor will continue to bring you better articles!

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.