Basic dynamic effect of UI--1

Content from meaningful transitions, very early known for the dynamic station, which provides some of the most common most basic dynamic mode, careful observation of our mobile phone in the dynamic effect, a lot of is nothing more than a combination of a variety of basic dynamic effect, so study these basic dynamic effect is very valuable. But there has been no translation, here to bring you to the upper part of the dynamic effect, at the same time will be accompanied by cases, so that everyone better understand.

(i) pointing to sexual activity First, preface:The directional sexual action can effectively describe the logical relationship between objects and visually describe the current motion state of the object through visual effects. In general, pointing to sexual activity can give users a clear sense of the location of objects and objects, as well as the hierarchical structure of information. second, the classification of the direction of the dynamic effect: 1. SlideApplication scenario: When the user needs to navigate the information presented in a list. Motion Description: The list of messages moves with the user's sliding interactive gestures. The object will automatically move to the proper position, maintaining a sense of uniformity. Consistency: is a directional transition dynamic, and the slide of an object depends on the direction of the user's swipe gesture. Advantages: Through the direction of the transition, effectively help the user to clear the arrangement of objects. User experience: It looks like a long ribbon is being smoothed. Case: Spectacle: 1. The slide of the front part of the animation is attached with elasticity, which deepens the physical feeling. 2. After the second half of attention to the list and calendar scattered when the flash, a slight amplification, creating a sense of the lens. 3. Finally stack, unfold the effect. 2. EjectApplication: When the user interacts with a single object. Motion Description: The object will be converted from thumbnail to full screen view (the center of the object will also move to the middle of the screen at the same time). Consistency: The inverse effect is that the object is converted from a full-screen view to a thumbnail image. Advantage: Be able to tell the user clearly, which object is magnified. User experience: The object is enlarged. Case: Highlights: The bottom tab bar icon moves up in three directions, and an X icon pops up below, while the 3 small icons pop up. 3. MinimizingApplication: When the user wants to minimize an object. Motion Description: The object shrinks and moves to the corresponding position on the screen. Consistency: The opposite effect is to enlarge, from thumbnail to full screen. Pros: The ability to clearly tell the user where a minimized object can be found. User experience: objects are shrinking. Case in fact: the best example of zooming in and out is probably the IOS7 open app/return home screen, which is also good. This dynamic effect, that is, as a starting screen, to a certain extent, alleviate the user anxiety, but also logo, enhance the brand effect, the final application after the start of the narrowing, can be very good contact context, so that users do not feel abrupt. 4 Toggle ObjectsApplication: When the user switches between objects. Motion Description: The current object moves to the back, and a new object (application) moves to the front. Pros: The ability to explain the switching between objects/applications is clear. User experience: The original object retracts, new objects appear. Case: It may not be so popular now that this magnitude of the effect is too large, because it can cause users to feel abrupt. 5. Expand the StackApplicable occasions: When the user opens a stack of objects. Motion Description: A stacked pile of objects is unfolded. Consistency: Stacks a group of objects. Advantages: Able to clearly tell the user, the arrangement of objects. User experience: The object seems to have spread. 6. Turning pagesApplicable occasions: When the user turns the page. Motion Description: When the user implements a swipe gesture, there is a general effect of turning pages in life. Consistency: Pointing to sexual activity, the direction of the page turn depends on the pointing of the finger slide. Advantage: This dynamic transition can clearly show the information architecture of the list information. User experience: It seems to be similar to the real-life page. Case: Flipboard and paper is the representative of the Wind page, but Steller is also good (300k, image quality compression comparison). 7. Add to ListApplication: When the user needs to add an object to the saved list. Motion Description: The new object will slide into the list, and the old content in the list will be squeezed away (is the initiative to give way or be squeezed away, the effect can be tried on its own), thereby freeing up space. Consistency: The opposite transition action is to delete an object from the list. Pros: This transition effect clearly shows the reordering of the list, letting the user know where the old information is and where the new information is. User experience: The old list seems to make room for new objects. Case: This animation is faster, actually under the task of children's shoes can be seen, is by folding the above list up "push" to make room for new projects. 8. Fixed labelWhere applicable: When the user scrolls through a list with labels (common head pinning, refer to IOS7 's phonebook list). Motion Description: Labels are always at the top of the list, taking into account navigation and content browsing. Advantage: This dynamic effect can clearly describe the relationship between the content and the label. User experience: Labels remain at the top of the list. Case: Navigation bar, now not popular rigid fixed, but the drop gesture appears, the swipe gesture disappears, increase the readable area. 9. Toggle ScreenApplication: When the content needs to be rotated and rearranged according to the rotation of the device. Motion Description: The content rotates with the rotation of the screen and is aligned with the device rotation. Consistency: The rotation of the content depends on the rotation of the device. Advantages: The ability to smooth the transition of the content while the device rotates. User experience: Content appears to be liquid, with screen rotation. 10. Button Label ConversionApplication: Navigation between the same level. Motion Description: Depending on the conversion of the content, the button is visually converted to a label. Consistency: headings move and change with content. Pros: The ability to clearly display the dependencies between tags and content, allowing users to understand the architecture. User experience: The button is converted to a label. 11. Divide and closeApplication: When the user separates/binds the object. Motion Description: Objects are separated/combined according to the user's interaction behavior. Consistency: separation and integration. Advantages: It allows users to clearly feel the relationship between objects. User experience: Separation and integration. 12. ScrollingApplication: When the user moves the object horizontally or vertically. Motion Description: Points to scrolling based on user gestures. Pros: Great for viewing list information. Albumatic applications 13. PanningApplication: When the user moves the object horizontally or vertically. Pros: Ideal for map interfaces. 14. Scroll barApplication: When scrolling the list. Motion Description: When the information on the screen scrolls, the scroll bar also scrolls proportionally. Pros: The ability to tell users where they are currently, and also to let users know the length of the information. User experience: 15. Page Number IndicatorApplication: When turning pages, switching screen contents. Motion Description: The movement of a solid point tells the user that the page has been switched, and also tells the user the number of pages. Pros: The ability to tell the user which page is currently on, and how many pages are in total. User experience: 16. Save IndicatorApplicable occasions: When the user adds bookmarks, downloads, saves. Motion Description: Once a user saves and downloads an object, the object copies a copy and shrinks and moves to the save indicator. Pros: The ability to prompt users to download where content can be found, to tell the user that the object has been added. User experience: The downloaded object flew to the download folder.

Basic dynamic effect of UI--1