Web Button Design

Talking about the button, have to mention the link, because in most people, it seems that buttons and links, are complete a page jump. Actually, there is a certain difference between the button and the link.

Let's talk about their differences first.

Button: The button represents "to do something", that is, the click of a button to represent the operation of a function, do this thing has consequences, difficult to recover. For example, a typical GOOGLE,QQ mailbox. Like information search, reply, and register, their common denominator is: "Do" one thing, and most of them are submitted to the form. Technically, the role of such a button is to submit data to the background, "command" server to do something.

Links: The role of the link is: "Take you to another page", no matter how many times you link, are in the "see", and did not "do" anything. A typical link is a text title, and click to see the details.

If this is strictly to distinguish between buttons and links, the benefits are logically very clear. However, the reality of the problem is that the design of the Web site, in some need to be fortified places, some need to guide the user clicks, only the link is difficult to highlight the visual performance. Back to our game page design status, in fact, buttons and links are not strictly differentiated, and, if the strict distinction, and we want to express visual priority will have conflict. Typical cases: The Game guide page "into the official website", strictly speaking, its role is only to let the viewer smooth jump to another page, is a link, but this is often our special emphasis on the "button." So in the game page design process, whether the need to strictly distinguish between the difference between the two, still to be discussed ...

A summary of the buttons currently understood by most people: there is a frame (this box can be any geometry, such as square, circle, ellipse, etc.), and then there are some text (such as: Download, registration, recharge, search, login, lottery, etc.), meet the two basic conditions, we think it is a button, The essential feature of the button is that it can be clicked.

One, the following is for the lack of strict distinction between the relationship between the visual performance of the button

Currently in the page to emphasize the link will naturally be the form of a button, especially the so-called heavyweight button is to facilitate the viewer to complete the page function of a very important part, so for its own speaking, should have "seduce eyeball" effect. For a button that can play the role of "seduction", it is advisable to think from the following aspects.

1. The color of the button itself

Its color should be different from its ambient color, so it's brighter and has a high contrast color.

2. Position of the button

The position of the button also needs careful research, the basic principle is to be easy to find, especially important button should be in the center of the picture.

3. The text expression above the button

It is important to use what text is passed to the user on the button. Need to be concise, straightforward, such as: registration, download, create, free demo, and even sometimes with "click into", this point is never let the viewer to think, the simpler, the more direct the better.

4. Size of the button

Generally speaking, the size of a button in a page also determines its own important level, but it is not the larger the better, the size should be moderate, because the button to a certain extent, it will make people feel that it is not like a button, subconsciously think that is a piece of area, resulting in no click Desire.

5. Make it fully transparent

Your buttons cannot be squeezed with other elements in the Web page. It requires plenty of margin (outside) to be more prominent, and more padding (inner margin) is needed to make the text easier to read.

6. Note the effect of the mouse slide over

Give more important buttons appropriate to add some mouse effect, will be a powerful enhancement button click Sense, to bring users a good user experience, play the role of the finishing touch. Here to note that the button is not very suitable for the place, each adds a highlight of the mouse to slide over the effect, which will cause the visual clutter, affect the user's browsing comfort, so to emphasize the "appropriate" to add the mouse to slide over the effect.

Designers in the ordinary work, often encounter a number of buttons to modify the views, from time to time to hear the product staff mentioned "let this button more like a button", in the face of such problems, from the above 6 directions to think and improve.

In fact, in our usual design there are many not so high weight buttons, need to "low-key" processing, that is, in a page, a number of buttons, there is a functional priority, so be sure to make a bunch of buttons also show the priority level of vision. As the following picture, the right button group in addition to the size, position, apart from the priority, it is important to distinguish the color block, high saturation color block button group is not recommended. The application of high saturation tones is often used to highlight the focus, rather than the whole, so this situation is recommended to use a large number of low saturation tones to foil a small part of the high saturation of the key information.

Second, the game button visual performance

In many of the game's official website, you can see a variety of game buttons, relative to the general business-type button, the game button is more concerned about the performance of the texture above, such as metal, stone, glass, wood, plastic, etc., through the choice of texture to express the characteristics of the game itself.

The picture above is the Korean version of the C9 Preview Station, the button is a metal texture of the performance, browsing through the trailer, these buttons left a very deep impression on me, seriously the reason, you will find that the designer is also from the metal texture, combined with the game itself some characteristics, Try to find something different from the conventional metal buttons, such as the convex at the corner, the extension of the following middle section of the pattern, and then the delicate portrayal, and finally the entire site for a unified application, people impressive. Although the page is just some of the function button, but let me remember this site, remember the C9. Summary is, the proposal in the game button design, can combine the characteristics of the game as far as possible, investigate its unique, exquisite depiction, and then do the system's application, to achieve the unity of vision (this is particularly important in the application of the game official web).

The above three buttons are intercepted in the Korean version CF, AVA, special forces of the web screen, the same is FPS game, the button in the description of the difference is very far, of course, carefully again to browse more pages, you will find that it is all CF pages, different page buttons performance also have different, But we can find their commonality, these other buttons are basically the whole picture of the focus of the visual appeal, but also the function of the important point, their characteristics is to consider the game positioning, and then according to each of the themes to be expressed, the change of the design button, may have the characteristics of the game, perhaps more neutral, But the final effect is to achieve the overall picture of the coordination and focus of the outstanding. (The change of the button is more suitable for the design performance of various topics)

Conclusion: Please pay attention to the performance of the button.