动效能够提升 UI 的表现力与易用性。

Motion helps make a UI expressive and easy to use.

原则

  • 信息化

动效展示了元素之间的空间和层次关系，当前页面上有哪些可执行的操作，以及如果采取操作将会发生什么。
Motion design informs users by highlighting relationships between elements, action availability, and action outcomes.

  • 重点

动效将用户的注意力集中引导在重要的事情上，而不会造成不必要的干扰。
Motion focuses attention on what’s important, without creating unnecessary distraction.

  • 表现力

动效在用户使用产品时，为常见的交互增添趣味性，同时也能更好地表达品牌的个性和风格。
Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.

层级

动效通过展示元素彼此之间的层级关系来帮助用户在应用中进行定位。

Motion helps orient users by showing how elements in a transition are related.

mio-staging_mio-design_1581631970573_assets_1YPr8zZCKmsmcmGG-wwWVHIkTUthFl3Zu_01-hierarchy-parentchild.mp4> 动效反映父元素（收件箱）和子元素（收件箱邮件）之间的层次结构。

Motion reflects the hierarchy between a parent element (the inbox) and a child element (the inbox message).

mio-staging_mio-design_1581631970573_assets_1dTI9ahXlzajACIyt3cPZQVVbYwfrhSLs_01-hierarchy-menu.mp4> 视频中的动效将打开“菜单”的操作与“菜单”图标结合在一起。

Motion unites the menu icon with the resulting action of an open menu.

mio-staging_mio-design_1581631970573_assets_1SONPbhqfx-jBFc8Jgdskbnk58xMBBL6-_01-hierarchy-peer.mp4> 视频中的动效展示了通过 Tabs 进行切换的两个页面位于同一层级。

Motion indicates the hierarchical relationship between “Dogs” and “Cats,” peer items in the navigation.

品牌传达

动效提供了及时的反馈和用户进行操作之后页面的状态。

Motion is used to express a brand’s personality and style.

过渡

Transitions can be customized to match the style of a brand. mio-staging_mio-design_1581631970573_assets_1DYxy5mMPKSXIYGGF7P8KxexRTNgXg6wO_00-basil.mp4Basil’s brand of stylized recipe content is communicated with customized transitions that include parallax and emphasized easing. Transition adjustments are discussed further in the customization section of the motion system.

Icons and illustrations

Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience.

mio-staging_mio-design_1581631970573_assets_1InaguRuMD0EdKe2XwVIjRjUF8Y4sCMoI_01-icons-polish.mp4Animating icons can playfully reinforce or add to the icon’s meaning.

mio-staging_mio-design_1581631970573_assets_1ikSGJ5m1D-_I7gXZAmjyZNDBe3se4OaR_01-icons-owl.mp4The icon animations in Owl, an educational app, are designed to reflect its colorful brand.

mio-staging_mio-design_1581631970573_assets_1QDevbDr_J7pa2qhKGYbgzSSKDBUbVPqW_04-crane-launch.mp4Crane’s animated logo adds polish and an extra moment of delight.

mio-staging_mio-design_1581631970573_assets_1fN7qkucsRgDSzu7yWLxJ210eodVkSLrP_04-juggler.mp4Character animation can make system errors more palatable.

Motion can be used to emphasize key points in a user journey. mio-staging_mio-design_1581631970573_assets_1IRC4MUSGkZRVEzhy_NsXbn1LNY-s1CXJ_03-reply-inboxzero.mp4An animation to reward the user for a task can make key moments in the user journey more memorable.

反馈

Motion provides timely feedback and indicates the status of user or system actions. mio-staging_mio-design_1581631970573_assets_1z6dDhHsJVKsK1yo5ut1bq1au09AcdQJu_02-feedback-password.mp4Animated elements responding to keypad input provide feedback to show if the action was successful.

mio-staging_mio-design_1581631970573_assets_1F8lpbkMfxdFXxPew4Obili19koaJg-wC_02-feedback-loading.mp4Animated list items are placeholders that convey content is loading.

mio-staging_mio-design_1581631970573_assets_1QQBwPH1U5rRCZD2--D7emHrL-yZztO-d_02-feedback-touch.mp4Motion of a card makes selection, positioning, and release visible.

用户引导

动效能够引导用户如何执行操作并提供有用的建议。

Motion helps users understand how to perform actions.

mio-staging_mio-design_1581631970573_assets_10a1NSUMOmlFvwfFJVcp9DCrJ2yC2nD_t_03-usereducation-gesture.mp4The swipe-to-open action is animated to invite and encourage the necessary gesture.

mio-staging_mio-design_1581631970573_assets_1FKrErbk3x4qOWnle4lXxcr8POfwgOmaF_03-usereducation-cart.mp4The motion path of an item into a shopping cart teaches users the location of the selected item.