Devil hidden in the details: Web Interactive button Big thing

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

When a product completes the core requirements, we can slowly get ready to start studying the details.

A product can talk about details at almost every level: it also covers what is seen on the surface and is not visible on the surface. The details on the surface are simple enough to take time to do, to try, to make mistakes and to fix them. But not see the details such as product positioning, user experience, and so on, often rely on the accumulation of long-term experience, research and user feedback, it is difficult to clearly understand which side how to make and modify.

I have done some graphic design, profoundly understand that "if something will be held by others to see the details, then each part of the details must be pursued carefully." A poster leaflet printed out, easily copied hundreds of copies of thousands of, and then thousands of people tens of thousands of people to watch, think of this will have to carefully handle every detail on the screen. So designers often spend a whole afternoon, not why, just is to stare at the manuscript on the screen, slowly to fine-tune the screen each title, each text font and color, size and spacing, kerning and line spacing ... Wait a minute.

I have also been involved in a number of animation creation, profound experience of "and if something to move up, need to take into account the details will be more": such as the 10 laws of animation, objects when the landing of the deformation (different materials, different animation style of the performance will affect the degree of deformation), animation character performance when the preparatory action ... And so on, although not do not affect the overall performance, but the lack of it will make viewers feel less flavor.

And after making the user interface. Once again, "if something can interact with the user, the details that need to be added are multiplied". Because we can never expect the user to do something beyond what you expected at the point in time.

The pursuit of detail is a time-consuming task, but we have to have the attitude of pursuing detail.

The interactive details of the button

The most common interactive element on a Web page: A button, a button on a Web page typically contains three interactive effects: normal, Hover, and Active (pressed). Typically, web designers use the three-image replacement to do this (whether using three separate images or using CSS Sprite).

There was a time when Flash SWF became the popular darling of the Internet, and the visual authoring interface made many creators less repulsive, becoming one of the most web designers to learn. The default button component in Flash also provides the same interactive effect: up, over, and down (where the fourth Hit is the sensing area). Because of the animation features of Flash, users can add animation components to each state, allowing the user to add dynamic effects to the interaction of the button.

OK, now we can add a dynamic effect to the button, such as the following situation: We put in over inside a black color block animation section. The animation effect is triggered when the user moves the mouse over the button:

In the interactive experience lively a lot of but there is something missing: Because over the block detection is "when the mouse moved to the block when" trigger the animation effect, and when the "mouse away from the block" but there is no corresponding to the shadow, resulting in the entire animation effect is hard to be truncated. The devil hides in the detail (the devil is in the details), if we want to get a complete experience, we must take into account this easily overlooked part, that is, not just the cursor moved to the top of the button animation effect, the effect of the cursor left is included in the design considerations of one of the details, The ideal state is shown in the following illustration:

To take this effect into account, you have to use program control to achieve the goal (whether it is Flash or css/javascript, etc.). Through the control of the program language can effectively achieve the desired effect, so that the designer's creative imagination is more extensive, but also has no good use of pictures, so that the creative elasticity is lower, and another browser and platform to support the problem.

More details

"If something is able to interact with the user, then the details are multiplied," as in the same example, after we slow down the animation, we find another question: "If the user is halfway through the animation, the mouse will leave the other place?" Take the following button component as an example, the animation will be abruptly cut off (because the shadow is forced to jump out to the next shadow).

In contrast, it is safer to do so, because when the user's "cursor left the sensor area that is forced to interrupt the animation show" will not encounter the problem of animation scheduling: Imagine if the cursor left, the animation is slow to perform, the user quickly repeated the cursor entry, departure, entry, leave the action, Is it another disaster? Given this problem, if you use program control, you must carefully take into account the details of this section.

A small button, with a simple animation, but because of the involvement with users to interact with the part, that will involve so many "details" out. Although the pursuit of details is time-consuming, most of the time I am afraid will be considered "this part does not affect the product function", "This is not the core of the product" and so on and was hastily brought. But as the famous designer Charles Eames said, "the details themselves are not details, they are the essence of the product." "They have been thoroughly tempered, carefully designed by the design of the chair style, until now are still wonderful design."