Create a good interactive design effect to find the article

Interactive design, showing a variety of presentation methods,

But you can also easily create a good interactive design effect by mastering the following three tips.

1. Response

Provides an operator with a response mechanism for areas that are about to produce interactive content.

Reference Example: http://glyde.com

Different content has a lot of responses to the processing method,

For example: The link with an underscore, the picture link transforms the outside border color,

The mouse across an area, changing the background color, at the same time there are some hidden operation buttons, such as delete operations.

Note: Taboo because of a block to produce a response, and let other block boundaries produce blunt dislocation.

Add: The beep is also a response.

For example: Send an email with the iphone and you will hear "swish ..." when you send it successfully.

Another reference example:

2. Transition process or transitions effect

Provides an interim or transition effect on the upcoming interaction changes.

Transition process, such as: Delay mobile, fade in and out.

Transition effects, such as: sliding, door switch, zoom, flip and so on.

Reference Example: http://glyde.com

Click on a cover, the delay to move to the operator to bring a good guide reading process.

Note: The operation to be handled frequently, while the transition process delays the time, may also cause a delayed hit.

Transition effects can sometimes reduce unwanted attitudinal change reminders:

For example, deleting a message does not require you to show that the message has been deleted.

Instead, click on the delete, the content flashes (response), and then fade away,

Because you have actually seen the removal process, you do not have to show the message deleted status change reminders.

3. Shift

The content is shifted in the case of no bomb layer or window. Reasonable use of the expansion of the content of the page, the collection.

Where the operator is about to produce an interaction, a handy operation is done in the nearest way.

Reference Example: http://gizmodo.com/

Http://www.axure.org/demo the bottom of the expansion and collection

Click on the video playback at the bottom of the address, you can also see the video right text content shift effect.

Http://www.cnn.com/2010/TECH/01/13/google.china.analysis/index.html

We conclude that all interactive processes consist of the following three elements:

1. Response: The area that can cause the trigger to provide response changes

2. Process effect: Keep people's eyes consistent

3. Shift: Do not need to eject new pages, by stretching the size of the original area to complete small function interaction, to achieve with minimal visual changes to complete the task of interactive tasks.

Note: The transition process and shift in the web development implementation, may be applied to a large number of JS library, not necessary to minimize the use of.

Article source: Mykite ' s Blog reproduced please indicate the source link.