Website Interaction Design Analysis: Still flourish where the icing on the cake

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Browser, as an artifact, to help us Open a myriad of web world window. And she has developed to this day, but also the birth of one after another version of the Bosom God, someone may love her fancy, someone obsessed with her speed ... We, as restructuring engineers, must pay more attention to his behind the technological innovation, that is CSS3 support! Last time, Garfield has shown us the exaggerated CSS3 animation. And this time, we start from the details, see CSS3 Encounter Weibo, will give people what to expect.

Of course, before this, we must first understand the next visit to the weibo.com of the artifacts accounted for:

PS: (data from Sina Weibo, "Product data analysis backstage" January 2012 browser ratio)

The icon can be seen, IE6, and support CSS3 browser, also occupies a considerable share, it means that we can have more choice to give up the compatibility of IE6, in addition, can also support the CSS3 of the high version of the browser to do more consideration.

and specifically in what detail can consider the icing on the cake? This article only to do a discussion of what CSS3 effect can be in the product details, and we will be in this article, as soon as possible in the micro-Bo optimization, the mention of these step-by-step online!

Use pseudo class to promote user experience

For example, the text, when browsing the Web page, often use the mouse to reverse the selection of some text content, used to facilitate reading. At this time, the page text is usually presented with a highlight white text + blue background color display. The following figure:

But the Micro Bo main station has the different skin, deep shallow. When encountered a dark skin background, still show the blue bottom white, the effect is not particularly handsome. At this time, in fact, you can consider using pseudo-class selection for the Web page text highlighting to provide a design, to change the effect of the reverse election display. The mouse selects the text to set the corresponding background color and text color, even transparent. Simple a property reflects the product of the user's concern for the operation, thereby enhancing user experience.

Using gradient color to enhance visual impact

With the wide use of CSS3, text color gradient effect is more and more favored by designers and front-end engineers. A good gradient allows the text to look textured, as if engraved on paper, giving the user a good visual feel. We can simulate text gradients by using CSS3-supported text transparency and displaying a background gradient. Plus some transition animation effects, we can even simulate a simple marquee effect. The following figure:

Ha ha. But don't take this design seriously. This is just a demonstration, does not represent our UDC taste.

Use mouse interaction to elevate pleasure

mouse clicks (click), sliding over (hover), activation (active) operations are still the most important interactions on the WEBPC side of today. Most of the interactive operations on Sina Weibo come from this. V4 wide version As an example of the current micro-Bo main station can have mouse interaction module roughly include: Top guide, left-hand side of the navigation, medal list, feed area, the right side of the skin selection button, skin selection of the bomb layer ...

For example, the left side of the navigation of the medal bar, where the downward expansion of the operation area, while the mouse is sliding out of the background color transformation, but slightly blunt. For a long time, perhaps the user will feel tired of this transformation. It doesn't matter, now we can use CSS3 to live here. The emergence of CSS3 transition attributes (transitions) can be a good solution to this problem. By setting the transition time, you can make this effect have a process change effect, let the mouse slide over the change effect, with soft fade fade to deal with. This will improve the abrupt visual changes, while giving people an elegant feeling of operation.

So stretch imagine, when clicked the medal to expand the operation area, the medal module from the original line, become all unfold. Bang, dozens of medals jumped out, that the expansion of the effect can also be used just that soft way to unfold it? Before the birth of CSS3, this effect can only be achieved through JS. And now, this effect to the CSS animation is more appropriate. CSS3 can not only control the expanded speed function, but also set the transparency of the expanded content. Of course, only the advanced browser can enjoy Oh, Pro ~

Use the animation effect to attract the eyeball

In the photographic works, pay attention to the layout do not die too, to give the photo "Stay Breath". In the web design, this statement also has its meaning. First look at our microblog home, the various modules squeezed together, looking a bit stuffy layout, at this time, the top right corner of the Rainbow button became the crowning point of the pen.

In fact, this design is a continuation of the previous Sina blog design. As shown in

Perhaps because of the cost of implementation of the reasons, Sina blog here using flash designed the mouse to slide the animation. We look at the current Sohu Weibo example, the mouse across, soft expansion:

He mainly through the JS time to control the button outer class name 123 switch, in the continuous switching three times after the simulation of the soft expansion effect.

And now Sina Weibo situation is the user mouse over, Rainbow simple jump, if feel "Reiki" less point, so good, we can try to add some effect to see.

The use of CSS3 simple plus some of the stars cheerful rotation fly out, and then fade out the effect. This gives people a cheerful and lively feeling, as if clicked there will be some surprises. This will not only meet the many Internet products today want to add a lively sense of the requirements of the page, but also make our page is not too stuffy, but also to arouse the user's click Desire. In turn, the five-pointed stars fly out of the 4 instantaneous state, the following figure:

Is it very path? Of course, this is just a demonstration, does not represent our UDC taste.

Using the button polymorphic effect to enhance the intuitive feeling

When we design, we will consider the three states of the button (even if there is no active, at least to ensure that link and hover bar). The three-state button to simulate the user's click Process, a good button design can significantly increase the user's click, especially on some of the electrical business site, a button produced whether sophisticated, attractive to click, or even directly affect the final volume of the electricity business site.

And the arrival of CSS3, through animation, gradient plus the button transition effect, shadow and other attributes of the use, you can more detailed simulation of the entire user clicks, so that the user in the process of the entire operation of the interaction has become pleasant and comfortable. For example, the following figure I do this combination of CSS3 3D simulation of the stereo keyboard effect. You can see the z, X, N, m keys are pressed effect, the rest is not pressed the effect, if the user in the long hold down the button, there will also be key to simulate the process of being pressed animation. When pressed, the light projection does not change, and the sense of smoothness of the text changes. This will be more sophisticated simulation of the user click Process

See this, you reader may smile, you are all on paper ah, are not yet on the line of the idea. Of course, the road is a step by step, rice is a stutter, we can not take so many optimization ideas one step on the line, but in fact we have some details online is used to css3 some of the characteristics.

For example, in the first line of micro-public welfare in a number of mouse across all use the transition properties, making the mouse smooth effect soft and elegant.

There are voting items, the user mouse over the participant small head, there are 0.2 seconds of transition and 2 pixel green shadow spread effect, so that the user can be a good reminder of the current user.

In fact, many interactive details can not be reflected in the design of the manuscript, which requires our engineers have a certain sensitivity and intuition, it is best to be in the UE after the release of the manuscript with the interactive designers to discuss some specific and feasible interactive program, and thus improve the use of our products experience.

and CSS3 involved in the domestic browser accounted for the current situation, can not be used in large areas. But I think, as a member of the industry, starting from the details, and gradually improve their site in the high version of the browser in the details of the quality, how much will affect the advanced version of the browser. If you upgrade your browser by looking at this article and start experimenting with Firefox and Chrome, this article is successful. For the first time in UDC blog posts, let you laughed.