Buttons are the most basic element in the interface design. If the button design is exquisite, the quality of the whole page will rise a lot.

Today I would like to share this article with you, which mainly explains what factors we should consider when designing buttons; Visually, what are the universal methods and formulas that can correctly formulate the design standards of buttons to improve the system of the whole design.

1、 What are the functions of buttons?

Before designing buttons, you need to understand the representative meaning of buttons - where to add buttons and where not to add buttons, which needs to be very particular in the systematic design idea.

Generally, buttons on the page play the following three roles:

1. Function operation of a certain type

This kind of button is common, such as buttons in some control forms, such as addition and subtraction, folding, expansion, and pull-down; This type of button will play a role in some functional forms, and is often used in interactive scenes; Therefore, in the design of such buttons, the button form should be weakened, the function should be emphasized, and the subject information should be highlighted.

2. Clear guidance for the next step

When there is too much information on the page, the user is likely to lose the information focus and forget the next step.

The more types of information, the longer it will take for users to weigh, and the greater the probability of users choosing to stop and jump out; So at this time, adding buttons at appropriate places can guide users to the next step and improve the success rate of the overall operation.

Secondly, from the experience level, it can also play a role in guiding the dynamic line of the page to a certain extent. For example, a group of cards at the bottom, after adding buttons, the action point is very clear, and there is a strong desire to click.

3. Fixed habits and clear psychological expectations

When users know that a button can point to a certain operation or obtain certain information, they will form the habit of using this button for a long time, which is very effective in improving revisiting and fixing their minds.

So if you think that the product or content you are responsible for can continue to bring value to users, it is better to design the button more eye-catching at the key nodes of the page; In this way, when the user sees this button again, the fixed habit will guide him to click continuously.

2、 What are the types of buttons?

Here I don't distinguish the type of button by its appearance, such as Hamburg button or anything else. It's not meaningful.

I mainly want to divide the types by the functions of buttons, so that you can understand them more clearly.

1. Function property button

This type of button is seen most frequently. A large number of our commonly used APPs are filled with this type of button. This type of button will play an important role in functional interaction and help users get the information they want; Secondly, on the style, in fact, the round click desire will be stronger, and the naked eye will also be more conducive to click; The square buttons are more formal and rigorous.

Formula: if it is a round button, the radius of the round corner=50% of the height is appropriate; If it is a square button, it is appropriate to control the small fillet radius of the corners below 15%. I prefer 10%.

2. Large focus button

This type of button is usually found in the strong guidance of some core pages, such as login, registration, form submission, or save, and some buttons for global operations on the page.

It should be noted that such buttons are only suitable for global operations on the page, and the number of large buttons on the page should not exceed 2. Information should be kept focused as much as possible.

Formula: based on @ 2x, the height of such large buttons ≥ 72px is appropriate. The general sizes are 80px, 88px and 96px. You can set the height according to the crowd the product is targeting.

If the page is targeted at a wide range of people, I recommend using the large version of 88px or 96px. After all, it is more convenient to operate.

3. Bottom suction button

This type of button has the highest priority in the whole page. All information on the page will focus on this button; Because the button is bottom suction, it will always float on the page and is not affected by the page length.

It should be noted that the bottom suction button must be the most important function of the page, or the next step guide of the entire page, such as Taobao's immediate purchase, or hungry, Meituan's immediate order, or the common recharge interface.

Formula: based on @ 2x, the height of the suction bottom ≥ 80px is appropriate. The common sizes are 88px, 100px and 112px. The size of the button can be determined according to the content. It is recommended that the height be kept above 72px.

What should be noted here is that the bottom sucking button needs to produce two sets of design drafts, one is the regular draft and the other is the adaptation draft of iPhone X.

The area height of the iPhone X bottom control is 68px, so the bottom suction height of the iPhone X design draft=the bottom suction height of the regular design draft+68px.

3、 What are the states of the button?

In addition, when designing buttons, don't forget to supplement the design draft of multiple states of buttons.

There are four common states:

1. Normal - normal

This is the normal display status of the button, which is the display effect in the normal page.

2. Hover suspended

This is the hover state of the button, which usually only appears when using the mouse; When the mouse pointer stays on the button, the special feedback sent by the button is suspended; This type of form has no effect in mobile terminal interaction, so this state does not need to be considered in mobile interface design.

Formula: Under normal conditions, the Hover state can be increased by 10% black , the principle is as follows:

3. Pressed Click Status

This is the pressed state of the button, which is the effect of the button after being clicked or pressed.

Formula: In the APP design, we can set a standard value for the effect after clicking, so that the development can realize it.

The commonly used values are the button to reduce the transparency by 20%, or to increase the darkness by 20%, both of which can be used.

Generally, I suggest that the button on the bright color should use the dark overlay (add 20% black), and the button on the dark color should use the transparency reduction (change the transparency to 80%). For the implementation principle, refer to the Hover state configuration diagram.

4. Disable - Disabled

When the information is not filled in completely or certain conditions are not met, the button will appear in a non clickable state and be disabled; At this time, the button will be disabled.

This disabled state can be used in many scenarios, whether on the web or in apps. Therefore, it is recommended to set a set of standard design specifications to avoid repeatedly defining this effect.

Formula: the size and size of disabled state remain unchanged, and only color values are used for differentiation; It is recommended to use gray or opaque colors. The common disabled colors are # CCC or # 999. The style should be as weak as possible to avoid invalid clicks.

4、 Button style and size

In the current mobile Internet design, although there are many types of buttons, the style has gradually become unified, and more are the differences in color values and details.

In terms of general style, buttons can be divided into these types: flattening, light imitation, heavy imitation and game buttons.

1. Flattening button

This type of button is designed to be used most frequently, with simple information, convenient operation and form following function.

Here I would also like to share some of my experience in designing flattening buttons, such as height, width, and color value of shadows.

Formula: button height, which is usually 2.4 times the font size of the text, and then take a multiple integer of 4. For example, if the font size is 24, then the button height=57.6, and the nearest multiple of 4 is 56; So height=56, fillet=10%, rounded to 6px.

In addition, if you think it is inappropriate, you can also increase or decrease the unit to 8, such as 56, 64, 72, 80, 88px.

Button width: if it is not a global button, it is usually OK that the width of the button=the width of the maximum number of words+the height of the button; Taking the above example as an example, if the button height=56 and the text width=96, then the button width=56+96=152.

2. Light simulation button

These buttons have become very popular in recent years, and even QQ and Taobao have begun to use them in large areas; Because such buttons can keep the information simple while still have a strong desire to click, and can also add a sense of quality to the page visually.

Formula: gradient direction, horizontal gradient is recommended, with heavy color on the right and light color on the left.

I have written the shadow color value before. Do you remember that the shadow color=50% of the button's alpha, x=0, y=20% of the button's height, blur value=50% of the button's height, expansion=- 15% of the button's height, advanced and simple, perfect!

If the students feel that the diffuse shadow is too big, they can also manually adjust it simply, which will not hinder them. (This formula is only applicable to Sketch. Students using PS can also study it by themselves according to this logic.)

In addition, in fact, this shadow formula does not have much basis. Most of them are my own original summary, simple and easy to use.

For example, you can feel the effect of the following button styles after using the formula:

3. Re simulation and game button

In some marketing pages, the style of buttons usually needs to be more gamification.

Most of the game like buttons will be created by using elements in the game scene and imitating objects.

Usually, the game like buttons need to be composed of several key parts. Students who have learned sketch should know that three-dimensional objects usually have several characteristics, including highlights, bright parts, dark parts, projection and reflection.

If we need to draw a button used in marketing or game scenes, we only need to ensure that the button has the characteristics of highlight, light, dark, projection and reflection; Then a little more plump, and you can have an effect immediately.

Of course, the examples I mentioned are the most basic versions. If you want to do more, it is no problem. This can be determined by case by case.

There are not many formulas to sum up, but more about the basic art level of designers~~

5. New pseudo button

When I was writing this article, I suddenly saw a new pseudo control design style, which made me feel bright.

Although the design is visually layered and beautiful, it is difficult to promote it in a large area in a short time, because it will still cost a lot to develop and implement.