Recently, I have been working on the summary of interaction specifications. While constantly sorting out the logic of page-to-page jumps, I found that the logical relationship between pages could not be well combined with the dynamic effect of page-to-page jumps. Although the switching effect is only a few tenths of a second, it can affect the user’s cognition of the logic between pages to a certain extent. In order to output detailed specifications, I spent a lot of time playing with the company’s online products and excellent apps at home and abroad, especially those developed by Apple and Google. (If something is not answered in the design specification, find the answer in the native APP!)
Transition dynamic effect is also the most widely used dynamic effect in APP, connecting two pages. Through a reasonable dynamic effect so that households can more clearly where I came from, where now, how to return to a series of problems. When contacting the product for the first time, the appropriate dynamic effect makes the logical relationship between product pages consistent with the cognitive model established by users themselves, and the feedback after operation conforms to the psychological expectation of users. (Part of this perception and expectation comes from the habit of using electronic devices for long periods of time, and part comes from the knowledge of physical environments in the real world.)
I have divided the current mainstream transition animations into four categories, combined with some usage scenarios and examples.
The pop-up
Scene:
It mostly appears on information content pages, and users focus most of their attention on content information itself. When the information is insufficient or the presentation form does not meet their own requirements, temporary call tools to add and edit the page content. You stay on the temporary page for a short time and just want to get back to the content itself after a quick operation.
Example:
Social apps like Tweeter publish tweets; Tool class APP such as Creating notes in Evernote; Basically, most of the tools at the top of apple’s native apps work this way
The following is not entirely a page to page switch, but the usage scenarios are similar and grouped together
When more functions may need more than one button and it is not good to stack so many temporary call tools on the page, a series of functions can be triggered by a button, while the main information content page does not leave the user’s sight, always remind the user of the original intention you come here.
The main functions of the app are concentrated on one page, and the navigation entry for calling up other pages pops up on the side, but these secondary pages are also temporary calling up
Example:
Fast and contact communication on Facebook; Apps that have a lot to do with maps, such as Uber and Google Maps. (However, in order to maximize the feed flow space, Linkedin hid the navigation in the slideout sidebar, which was very inconvenient. As a professional social network, the information published by the people you follow is only a part of the APP’s function, and the discovery of people and work is also relatively important, so there is a need to switch between pages frequently. However, such navigation design makes users pay a lot of cost in the process of switching options, and they are not willing to bother to switch, and the APP gradually loses some important functions originally belonging to workplace social networking.)
Lateral spreads
Scene:
When the page sees the existence of a parent set and child set, it is also the most common transition dynamic effect. Basically seeing this dynamic effect, the user forms a mental model of the tree — what is similar in attributes, of the same magnitude, and of the relationships between different levels.
The gradient amplifier
Scene:
A page is filled with posts of the same level, like a wall full of messages and photos, and users sometimes need to take a closer look at what’s on it, easily switching between quick browsing and detailed viewing. The biggest difference between the switching effect of gradient amplification and the left-right sliding switching is that the former is mostly used in the display panel, while the latter is mainly used in the list of information form. Switching back and forth to details in a panel of posts always feels counterintuitive, contrary to what people are conditioned to know in the physical world.
Example:
Guardian news stream, Snapchat interests discover photos in your social feed stream, Apple’s native App Photo stream
other
There are many other switch animations, most of which are highly modeled after the physical world. For example, the iBook’s e-book page flipping mimics the real world’s book flipping, and Flipboard’s article switching style really feels like a Flip.
Animations in products are not limited to animation between transitions, but also animations of controls and page elements. The style, duration and amplitude of animation of the product will affect the user experience to a certain extent. Grasp this kind of experience should study psychology content well more, feel this is a more research more interesting field!