[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003ePrioritize driver safety by minimizing distractions and using motion purposefully in Android Automotive OS.\u003c/p\u003e\n"],["\u003cp\u003eEmploy motion to enhance user comprehension by illustrating relationships between elements and guiding interactions.\u003c/p\u003e\n"],["\u003cp\u003eDesign a flexible motion language that adapts to diverse screen sizes, shapes, and input methods.\u003c/p\u003e\n"],["\u003cp\u003eAdhere to recommended motion patterns for consistent user experiences across different app interactions like view switching, detail views, and action handling.\u003c/p\u003e\n"],["\u003cp\u003eEnsure motion transitions are smooth and intuitive by applying standard easing principles to guide user focus.\u003c/p\u003e\n"]]],[],null,["# Motion\n\n\u003cbr /\u003e\n\nMotion is a powerful tool that should be used sparingly in the driving context. It is appropriate only when it can help inform drivers without distracting their attention from the road.\n\n**Guidance at a glance (TL;DR):** \n- Avoid distracting users with unnecessary motion\n- Use motion to increase users' understanding and build their proficiency\n- Make your motion language flexible enough for all relevant hardware\n- Use the recommended motion pattern for your situation\n\n*** ** * ** ***\n\nMotion principles\n-----------------\n\nWhen designing motion for Android for Cars interfaces, keep three basic principles in mind: be safe, be informative, and be flexible. \n\n### Safe\n\nDriving is the user's primary task -- everything else is secondary. Treat the user's attention as a limited resource, and avoid using motion to create unnecessary distractions. \n\n### Informative\n\nUse motion to convey information that helps users. For example, motion can increase users' understanding of the product by demonstrating hierarchical and spatial relationships between elements. Motion can also help to build users' proficiency with the interface by indicating available interactions. \n\n### Flexible\n\nDefine a motion language that is scalable and flexible enough to adjust to screens of all sizes and shapes, as well as to all types of user input.\n\n*** ** * ** ***\n\nMotion patterns\n---------------\n\nTo support a consistent user experience across all apps, Android Automotive provides recommendations for specific motion patterns to use in the following situations:\n\n- Switching between same-level views\n- Moving to a detail view\n- Extending an existing action\n- Minimizing and expanding an action\n- Disrupting an action\n\nAll of the motion patterns in this section are based on standard easing, as discussed in the Material Design [Easing](https://material.io/design/motion/speed.html#easing) guidelines. That is, the motions speed up quickly and slow down more gradually, to draw focus to the end of the transition.\n\n*** ** * ** ***\n\n### Switching between same-level views\n\nWhen switching between views at the same level of hierarchy in an app, such as tabs in the app bar or songs in a playlist, use a side-to-side motion. The horizontal movement reinforces the idea of staying at the same level within the app.\nA swift crossfade takes the user from a navigational app to a media app and back again in Android Automotive\n\n#### Example\n\nIn Android Automotive OS, the side-to-side motion when switching from the Home tab to the Playlists tab in a media app reinforces that both tabs are top-level views of content\n\n*** ** * ** ***\n\n### Moving to a detail view\n\nWhen moving from a higher-level view of content to a detail view, use a z-depth motion that scales up the lower layer and fades it in as the higher layer fades out. This motion reinforces the parent-child relationship between the higher-level view and the detail view, drawing focus to the latter.\nFrom a parent screen, the child element lifts up and expands in place\n\n#### Example\n\nIn the Android Automotive OS media template, when the user clicks on a specific album in a grid of albums, the song list for that album scales up and expands to bring the details into focus\n\n*** ** * ** ***\n\n### Extending an existing action\n\nWhen a user is in an action and takes a related action, use a vertical (up or down) motion to introduce the secondary action on a full-screen overlay, with a scrim background, on top of the primary action. Being able to see the primary action through the scrim reinforces that the user is still in that action.\n\nWhen closing the secondary action, use the reverse of this motion. The reverse motion should take less time than the original motion, since the user is done with the secondary action and is ready to exit. \n[Duration\nMaterial Design guidelines on how long transitions should take](https://material.io/design/motion/speed.html#duration) \nHere, the secondary action rises up from the primary action on an overlay, while the primary action remains partially visible behind the scrim\n\n#### Example\n\nIn the Android Automotive OS media template, when the user taps the overflow button to expand the control bar, additional controls rise up and appear on on overlay\n\n*** ** * ** ***\n\n### Minimizing and expanding an action\n\nWhen expanding an ongoing action that has been minimized into a smaller onscreen format to allow multitasking, use an expanding window mask with a full-screen fade-in.\n\nWhen minimizing an ongoing action, use the reverse of this motion. The minimizing motion should take less time than the expanding motion, since the user is essentially leaving this action and is ready to get it out of the way. \n[Duration\nMaterial Design guidelines on how long transitions should take](https://material.io/design/motion/speed.html#duration)\nThe minimized action expands to full screen as it fades in on top of the current action\n\n#### Example\n\nIn the Android Automotive OS media template, the minimized control bar expands into the full playback view -- and then contracts back into its minimized form when the user taps the down arrow\n\n*** ** * ** ***\n\n### Disrupting an action\n\nWhen a short, non-blocking action needs to appear suddenly on top of an ongoing action, slide it down or up from the edge of the screen (with a partial scrim) or fade it into the middle (with a full scrim). Start the motion from the location closest to where you want the new action to appear.\nWhen the disruptive action should appear near the top of the screen, slide it in from the top with a partial scrim\n\n#### Example\n\nWhen a disruptive action appears in the middle of the Android Automotive OS media template, it fades in with a full scrim to focus user attention temporarily on the new action -- in this case, a request for permission to use location data"]]
