A brief talk on the four main pages between the jump rotation effect

Recently has been doing the work of the summary of interactive norms, in the continuous comb between the logic of the page, found that the logical relationship between the pages and the page jump between the dynamic effect of a good combination. Although only a fraction second switching dynamic effect, but can to some extent affect the user's knowledge of the logic of the page. In order to output detailed specifications, spent a lot of time playing with the company's online products and excellent apps at home and abroad, especially Apple, Google's own development of the app. (If some aspects don't give an answer in the design code, find the answer in the native app!)

The transition is also the most dynamic application in the app, connecting two pages. Through the reasonable dynamic effect lets the household be able to be clearer to me from where, now is, how goes back and so on a series of questions. The first contact product, the appropriate dynamic effect makes the logical relationship between the product pages coincide with the cognitive model established by the user itself, and the feedback after operation conforms to the user's psychological expectation. (This perception and expectation is partly from the habit of using electronic devices for a long time, partly from the physical environment of the real world).

I've divided the current mainstream transitions into four categories, combined with a few usage scenarios and examples.

　　Pop

Scene:

Most of the information on the content page, the user will focus on the content of the information itself. When the information is not enough or the form does not conform to its own requirements, the temporary invoke tool to add, edit and other operations of the content of the page. Temporary page stay time is short, just want to quickly operation and then back to the content of the information itself.

Example:

Social apps like tweeter publish tweets; tools app like Evernote New notes; Basically most of the tools on the top of Apple's native app are in this way.

The following is not entirely a switch between pages, but the use of scenarios is similar and grouped into one category.

When more functions may need more than one button and not so many temporary call tools heap on the page, then through a button to trigger a series of functions or a series of secondary content navigation, while the main content of the page does not leave the user's view, always remind users you come here to the original intention.

App main function is still concentrated on a page, side pop-up pull out other pages of navigation, but these secondary pages are also temporary pull.

Example:

Fast and contact Communications in Facebook; apps like Uber Google Maps that have a lot to do with maps. (But LinkedIn is very inconvenient to keep navigation hidden in the Sideslip sidebar as much as possible to maximize the space of the feed stream, and as a social worker, the people who pay attention to the information published are only part of the app function and find that people and work are also relatively important functions, so pages need to switch frequently.) And such navigation design allows users to switch options in the process of paying a lot of costs, long time is not willing to go to the trouble of switching, slowly app lost the original part of the workplace social networking important functions. )

　　Slide

Scene:

When the page sees the parent collection, it is also the most common kind of transition activity. Basically see this dynamic, users will be in the mind to form a tree model-which content is similar in attributes, the same magnitude, and the relationship between different levels.

　　Gradient Zoom

Scene:

The page post a lot of the same level of information, just like plastered with information, photos of the wall, users sometimes need to close to see what is above, in the quick and concrete viewing between the switch easily. The most important difference between the switching dynamic effect of the gradient amplification and the dynamic effect of the left-right sliding switch is that the former is mostly used in the panel where the display information is posted, and the latter is mainly used for listing information in the form. Switch to the left and right in the panel where the information is posted. It always gives people a feeling of not meeting the psychological expectations, contrary to the habits and perceptions that people form in the physical world.

Example:

Guardian News Stream, Snapchat interest in discovering social feeds stream photos in Apple native app photo Photo stream

　　Other

There are many other toggle animations, most of which are highly imitative of the physical reality of the world. For example, ibook E-book flipping is the effect of imitating the book in the real world, and the style of Flipboard article switch really is the feeling of flip.

Animation in the product is not limited to the dynamic between transitions, but also controls, page elements animation. The animation style, duration and amplitude of the product will affect the user experience to some extent. Grasp this experience to learn more about the psychological aspects of the content, think this is a more interesting field of study!