Let cool text interactive effects light up your Web page

In web design, if the site homepage color processing good, can make the whole site icing on the cake. And the ingenious use of some interactive effect, not only make the Web page flash, even in the promotion of user awareness and sensory experience can play an irreplaceable role.

What we are talking about here is the interaction between the user and the target object by means of the mouse hovering, sliding, clicking, and dragging.

This series of articles on the design of Web pages, we will first share the interactive effect of text.

The scene of the text interaction process should be this:

When a user browses to a Web page, he notices some text, and when he hovers, slides, clicks, drags (interacts) with the text (interactive object), he sees that the text has changed (interactive feedback).

These changes can be font size changes, color changes, or some dynamic effects. A good interactive effect can arouse the user's curiosity, increase their browsing time, and make them very impressed with your Web page.

When it comes to text color changes, here are three small specifications for the color of the page text:

> The same site needs to set the main text color, special circumstances can have 2 kinds of auxiliary text color.

> Text color is dark gray, recommended #333333 to #666666 between the color, if you choose other text color as the main body tone, security can be used not more than 30% of the color.

> Blue text is generally used in most hyperlink locations and should be used sparingly elsewhere.

The most important point is that the specification can be applied flexibly, but be sure to consider the overall color of the page.

The following figure is a common text color recommendation, can be used as a reference:

Then formally introduce several examples of text interaction effects.

1. Text color change and underline

When the mouse hovers, the text color changes and the underline is often used for hyperlinks in Web pages, although most sites will set the hyperlink text color to the blue underlined style (general, traditional, user habits, high readability), but this is not the only style.

Hyperlinks should also consider the user's reading experience, in addition to the need to stand out from a large section of text. Many web site hyperlinks are designed to improve the user experience in the continuous optimization of innovation.

In the M&m's active Web site, the small icon in the button itself has a dynamic effect, it is easy to attract attention.

When the mouse hovers over the button text, the text color and icon change, the user can be clear that this is a link. This kind of effect lets the user experience the interaction with the website, and it also has a kind of appeal, hint and encourage the user to click to try.

In the Apple website, the effect of hyperlinks is the mouse over the text appears underlined.

Although the text color is not specifically set, the small arrow on the right side of the text has a guiding effect that lets the user know that it can be clicked. When we put the mouse on the text, the bottom of the text appears with a text and color underline, strengthen the link characteristics.

The above two cases have adopted the typical characteristics of hyperlinks, that is, when the mouse hovers over the text color changes, text appears underlined, such a form can be achieved with the user's good interaction.

2. New information appears

In 10 years after the site, this part of the design shows the name of each category, when we hover the mouse over a category, the interaction will appear new text information, and then the text overall upward movement, to the user showed the popularity of each category.

The following figure:

When the user first sees this part, the content of the section is clean and clear, he can directly click into the category of interest, and when he does not know which category to choose, you can hover through the mouse to get new information to understand the popularity of each category.

The site looks dynamic, but also provides a way for users to choose.

3. Button effect

Anyforweb website Head "About Us" design for the button style, originally red wireframe red text, when the mouse hovers into white text and red button style.

This hover effect shows the unique small details of the site, users inadvertently found, feel a taste of interactive experience.

4. Text hover Dynamic effect

Below is a few typical text hover hover effect on the net, hope can give designer some inspiration.

In the actual website design, many cool interactive effects are from foreign websites, they pay attention to the interaction design and user experience, and in these areas than domestic development earlier. But at present some domestic companies also began to pay attention to this piece, some new Chinese websites began to appear very good text interaction, success attracted a lot of users attention.

A good interactive website will be more and more favored by users, will also become the development trend of web design.

So we designers also need to act quickly, through continuous learning and try to accumulate experience, and then with some suitable little ideas, let us design the Web bling~bling~