Hello, button -- the webpage design button

 

When talking about the button, you have to mention the Link first, because in most people's views, it seems that the button is similar to the link, and it completes a page Jump. In fact, buttons and links are different.

Let's talk about their differences first.

Button: The Button Represents "doing something", that is, clicking the button represents a function, which has consequences and is hard to recover. For example, a typical Google or QQ mailbox. Like information search, reply, and registration, they all share the same thing: they are doing one thing, and most of them are submitting forms. Technically speaking, the role of such buttons is to submit data to the background, and the "command" server does one thing.

Link: the function of a link is to "take you to another page". No matter how many links you click, you are "reading" without "doing" anything. A typical link is a text title. Click it to view details.

 

 

 

If we strictly distinguish between buttons and links, the advantage is that the logic is very clear. However, the real problem is that Websites designed based on this idea are in some areas that need to be reinforced, and some areas that need to be clicked by users, it is difficult to highlight the performance visually by using only links. Back to the current status of our game page design, there is actually no strict distinction between buttons and links, and, if there is a strict distinction, there will be a conflict with our need to express the visual priority level. Typical Case: "Go to the official website" on the boot pages of various games. Strictly speaking, this function only allows viewers to smoothly jump to another page, which is a link, but this is often a special "button ". So in the design process of the game page, do you need to strictly differentiate the differences between the two? It remains to be discussed ......

 

A summary of the buttons most people understand: there is an external box (this box can be any geometric shape, such as square, circle, elliptical, etc.) with some text on it (for example: download, registration, recharge, search, login, lottery, etc.). If these two basic conditions are met, you can click a button.

 

I. The following is a discussion on the visual performance of buttons that do not strictly distinguish between the two.

The links to be emphasized on the page will naturally be displayed in the form of buttons, especially the so-called heavyweight buttons are a very important part that facilitates the viewer to complete the page function, so for itself, it should have the effect of "eye-catching. For a button that can play a "Seduce" role, we suggest you think about it from the following aspects.

 

1. Color of the button itself

The color itself should be different from the environmental color around it, so it should be brighter and have a high contrast color.

 

2. Button position
The button location also needs to be carefully studied. The basic principle is to make it easy to find, and the particularly important button should be in the center of the screen.

 

3. Text on the button

It is very important to use the text on the button to pass it to the user. It must be concise and straightforward, such as registration, download, creation, free trial, and sometimes "click to enter". In this case, never let viewers think, the simpler, the more direct the better.

 

4. Button size
Generally, the size of a button in a page also determines its importance level, but it is not the bigger the better. The size should be moderate, because the size of the button is large to a certain extent, it may make people think that is not like a button. The subconscious thinks that it is a region, resulting in no desire to click.

5. Make it fully transparent
Your buttons cannot be crowded with other elements in the webpage. It requires a sufficient margin (margin) to be more prominent, and more padding to make the text easier to read.

6. Pay attention to the effect of moving the mouse over
Adding appropriate mouse sliding effects to more important buttons will effectively enhance the click feeling of the button, bring a good user experience to the user, and play an eye-catching role. It should be noted that it is not suitable for button concentration. Each of them increases the effect of highlighted mouse slides. This will cause visual disorder and affect the user's browsing comfort, therefore, we should emphasize the effect of adding the mouse slide appropriately.

 

 

 

Designers often encounter button modification comments during their daily work. From time to time, they hear product personnel mention "Make this button more like a button". In the face of such problems, avoid thinking and improving from the above six directions.

In fact, in our ordinary design, there are many buttons that are less important and require "low-key" processing. That is to say, in a single page, many buttons have a function priority, in this way, make sure that a bunch of buttons have a visual priority. As shown in the following figure, in addition to the size and position of the button group on the Right, it is very important to distinguish the color block. The button group on the high saturation color block is not recommended. The application of high saturation tones is often to highlight the focus rather than emphasize the whole. Therefore, we recommend that you use a large number of low saturation tones to set off a small amount of key information with high saturation.

 

 

Conclusion: Pay attention to the button performance.