The power of default styles in hyperlinks and button designs

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The default style, is the most original ecological style. It's like a button you use often or a hyperlink with a blue underline. In this article, Stalkers m will discuss the application of default styles in design from two elements.

Default style for hyperlinks

The default style hyperlink is the most commonly used element in a Web page, which can be said to be essential. We set hyperlinks and also want people to click and use it. So what do we take to make people know that this is a hyperlink? You can say, "Here's a hyperlink, come on, click Me." However, when people see these words, it is necessary to think, in practice, people do not want to think. So, the purpose of our design is to make people look like a hyperlink that can be clicked. Here are a few hyperlinks, I added a style to them, please look at the following figure:

Could you tell me which one of these is the hyperlink that you can click on? Obviously, the first hyperlink is the default style, the blue underline style, has been deeply rooted in the hearts of any one who often surf the internet, see this is a clickable hyperlink. But there is a very obvious problem, the blue underline style is too ugly. And it's not like my design style. Then, we might consider three of the following.

Now, our task has become, how to let these three hyperlinks in the back, make people think this is a clickable hyperlink. At this point, we need to combine specific contexts. Take a look at this picture below, I have added the above three hyperlinks to the article:

This is a more common article environment, and when hyperlinks are in the article, we find something. Now please tell me, where are the four links and exactly which link can be clicked? Obviously, the first underline can be clicked. Then the red, blue links can also be easily found, but the black is gone. Because it's the same style as the article.

When we leave the first one, please tell me again, which is the hyperlink that can be clicked? Obviously, the blue hyperlink behind the red, because blue is the default color for hyperlinks, is the iconic color, so we would think that Blue is a clickable hyperlink. If you exclude the blue link, what else do you click? At this point, you will find a red hyperlink in the black Word. This is what your brain will do for a short time, what is this red hyperlink, why is everything else black, is it red? Does it have a special function that is not clickable? Or I can move the mouse up and see.

When we moved the mouse up, we found that the mouse turned into a small hand, red also changed color, but also underlined. OK, this is the hyperlink that you can click.

As for the black hyperlink, the stalker M will not be able to find it, and what happens to the mouse may turn into a small hand. But the average person is unable to notice.

In this case, we can analyze how a hyperlink should be defined:

Use the default blue and even underline as much as possible. If the style does not match, please use the color that is different from other text, this is a different text, it has special meaning.

When the mouse is moving up, define: hover, let it change color, and underline, because this is a hyperlink default style, after this processing, can make people believe that this is a hyperlink.

If you don't have a reasonable color, or if your work doesn't use a variety of colors, try making the font bigger or smaller or more skewed, making the hyperlinks different, and that's a question.

If you cannot reasonably complete the above three, do not use the default style.

Default style for buttons

Buttons are also used for more extensive page elements, usually for form submissions, or other places to click. There are usually three types of definitions

The first is by default, and the second is just a simple border that removes the default style, and the third can represent a custom button that uses a picture background.

When you first see these three buttons, it's obvious that the first one is the button that most wants the button, and it lets people create a click. Except for the first two? Here's the thing to note, the third one is a discoloration treatment, and when the mouse moves above, it becomes this:

The default button style and can not meet the style of our site, so our current task is to make the back two buttons, become like clickable button. We mainly analyze why the next two buttons are not like the one that can be clicked, what are the features and differences.

1, look like a button, where the third is more like a button than the second, because it is rounded, oval, it is easier than the straight box to give people the feeling of a button.

2, to have a 3d highlight, the button is a prominent thing, give a kind of 3d prominent feeling more easy to believe that this is a button can be clicked, such as Taobao purchase button

You can create this outstanding effect by adding shadows or gradients.

3, to have a change effect, timely and visitors to communicate, tell them that this is a button can be clicked.

4, if your design is not good to complete the above three points, please use the default style.

Original: http://www.qianxingzhem.com/post-1230.html