An interactive design for the Apes

Editor's note: When I saw this text, I went back to my own Learning Web page when I knew there was programming and I didn't know it. Most of the forums are also about how to use Frame to implement a page partition, how to make rounded corners, and write a large section of JavaScript code or Flash only to make the page look a little more dazzling. Later, 2.0 of css1.0, HTML 4.0 4.1 and today's HTML 5 also gradually eliminated the performance style of the label. Visual communication began to enter the eyes of the program ape and product manager, from the Web page to the current APP, after the brutal growth stage, only those features and visual communication of the same excellent products to laugh until the end.

Apple brought a refreshing feeling to the industry in the 2007, and countless apps show almost limitless new concepts, but not every novel idea can be called design. Designers need to undergo rigorous training in order to turn ideas into final design, and throughout the transformation process, countless ideas can not afford to carefully scrutiny. Designers more time to observe life, observation of nature, inspiration is not at any time, but a rigorous training of the designer can be the ordinary life of the details of the process into the design, and ultimately to create a qualified or even excellent products.

The author of this article, Pasquale D ' Silva, an interactive designer and product designer at Elepath, explains from an interactive perspective some of the qualities that an excellent design should have, or how a good product can communicate with the user naturally.

Have to say, there are too many programs ape or art (note, is art, the real designer doesn't do that. When art is mistaken, when design is beautiful, the real important interaction part is ignored, you can see, a large number of products are almost static, many operations are extremely strange, such as you want to add an entry to the list, It appears stiffly, and if you want to delete it, it just disappears. This product manager, you have not considered the user's feelings, have not considered the product's feelings, this completely illogical things also loss you do.

Of course, there are some products that interact, but sadly, those interactions are entirely used for another form of beautification, and geniuses know what those people are thinking.

The real revolutionary significance of the interaction is that it brings the magical attributes of time into the static products, through the definition of action, speed, manifestation, etc., so that the operation of the product embodies a sense of reality, so that users can naturally understand the meaning of each action. But it's not something that people in high school can understand when they're chasing girls and looking down on nerds.

Some simple examples

The purpose of these examples is to introduce the essence of animation to your readers, and to tell you how the timeline and space are meant for animation. And the meaning of animation for interaction is self-evident.

Example: Buffering effect

The following three demo shows how to control the effect of an entire animation in the most traditional animation.

In these three 25-frame animations, the designer only needs to define the first frame, the last frame, and the keyframe (frame 13th), while the remaining 22 frames are automatically populated by the computer, but the computer is not as smart as it can be, and it only has a linear fill of blank frames. Good animators and action designers spend a lot of time learning how to control the computer's work in accordance with their own design. Interested readers can do some experiments on their own, the focus of this article is to explain the concept, so not too much ink on the technical aspects.

Another slightly more complicated example: the real sense that interactive animation can create

The purpose of these examples is to tell the designers that some of the old functions that interaction can replace and what they have not done before can be achieved.

Example inserts an element

Here are three demos for adding/removing elements to the list to show the effects of different interactive animations

Demo 1 without any processing, both blunt and rough, can not give people any sense of nature.
Demo 2 added some key frames to make the action more smooth, so the animation has been able to give users some hint.
The last demo is the most natural state, as we usually insert a book into the bookshelf, we need to make room before inserting/removing.

Example one last demo design is a clear one, because this is the same as in life, users do not need other prompts to know the meaning of this action. This interaction is not very useful on the previous touchscreen, but it is significant for today's ubiquitous apps.

Example two expansion/pop-up menu

The same is three demo, respectively, showing the different unfolding effects brought about by the difference of feeling.

The first is the most typical expansion style, but does not have the experience of consistency, this action does not exist in reality, so there is no way to let users easily understand its meaning.
Look at the second one, does this style give you more information?
The last style can be used to highlight key elements that can be highlighted.
Remember, do not try to put a variety of styles in a product/feature, which can cause users to be unclear.

The second two demo design can replace the old navigation bar, users can easily remember their movements, so that they know where they are.

Of course, all the examples are not snake balm and need to be used as appropriate. The purpose here is to make it clear that a neat but logical animation is useful for improving the http://www.aliyun.com/zixun/aggregation/8201.html "> Product experience."

Want to know more about the effect of animation in specific products, you can experience the next thinglist, this is my cooperation with Kyle Bragger for the Elepath development of a product. The following figure shows the APP's demonstration of how to load content.

The design principle of the action interface

You see, I can't put a very specific product name in here, but some products are really go extreme, one is extremely beautiful interface but not a little interaction, the other is to take interactive animation when decoration completely lost the essence of interaction. So I've listed the following principles to define real interactions:

A crisp animation
Two, the rhythm is consistent, the transition nature

Some people's thoughts make me very silent, they never think they can add time elements to the interface. Don't you know that interaction can provide more useful information to users, or do you think it's too complicated for you?

At first, the document was used to train in-house staff, and later we thought it would be more useful to discuss it openly, and I would like to exchange views with more peers. If you are interested in Twitter @pasql. or participate in our discussion in branch.

Reader benefits: Some materials worth reading or viewing (the original four links, but two of them have been invalid, so only the following two):

The Animator ' s survival Kit by Richard Williams

Prologue–designing fictional interfaces for Iron Mans 2

Source: http://www.36kr.com/p/203418.html