[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThe media app template consists of an app bar, browseable content space, and playback controls, offering flexibility in arrangement for car makers.\u003c/p\u003e\n"],["\u003cp\u003ePrimary navigation within the app bar uses tabs for easy access to top-level content views like Home and Playlists.\u003c/p\u003e\n"],["\u003cp\u003eApp controls, located in the app bar, provide access to in-app search and settings functions via overlays.\u003c/p\u003e\n"],["\u003cp\u003eThe browseable content space allows users to scroll, navigate through content hierarchies, and select items for detailed views.\u003c/p\u003e\n"],["\u003cp\u003ePlayback controls are available as a minimized control bar for basic functions and a full control bar in playback view for expanded control.\u003c/p\u003e\n"]]],[],null,["# Spatial model\n\n\u003cbr /\u003e\n\nThis introduction to the media app template describes its main elements, the basic functions they provide, and the architecture that holds them together.\n\nMore detailed descriptions of how each element works are provided in the sections that follow this one. For a guide to these sections, refer to the [overview](/cars/design/automotive-os/apps/media/overview) for this section.\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe media template includes the following:\n\n- **App bar** -- Features **primary app navigation** and **app controls** (for in-app search and settings) and includes an app icon\n- **Browseable content space** -- Displays content in either a grid view (shown here) or a list view\n- **Playback controls** -- The minimized control bar shown here includes basic media metadata and playback controls, and it also provides access to a playback overlay with more controls\n\n1. App bar with primary navigation tabs and app controls \n2. Browseable content space \n3. Playback controls (shown here on minimized control bar)\n\nThis sample layout shows just one possible arrangement of these elements. For example, car makers can decide to stack primary navigation and app controls rather than keeping them in a single horizontal bar, depending on the screen dimensions. The navigation hierarchy is described in more detail in the sections that follow.\n\n*** ** * ** ***\n\nPrimary navigation\n------------------\n\nThe primary navigation in the app bar consists of exposed tabs (except in rare cases where the screen is too small).\n\nThis example shows a typical tab arrangement: \nUsers can select tabs such as Home and Playlists on the app bar to navigate to these top-level views of media content. Selecting a tab on the app bar replaces the current view with a different top-level app view.\n\n*** ** * ** ***\n\nApp controls\n------------\n\nApp controls (shown at upper right in the example below) occupy the portion of the app bar not used for branding or primary navigation. They provide access to in-app search and settings functions for the current media app.\n\nSelecting an app control opens an overlay. For example, the Settings affordance shown here opens an overlay that displays the Settings interface. When users close the overlay, they return to their previous location in the app. \nSelecting the Settings affordance on the app bar opens an overlay that allows users to access app settings. When an app control is selected, it opens an overlay on top of the browsable content, and the app bar changes to an app header.\n\n*** ** * ** ***\n\nBrowseable content space\n------------------------\n\nWithin the browsable content space, users can scroll through content and navigate through z-space into individual items, down consecutive levels of hierarchy.\n\nBecause navigating through multiple levels increases the driver's cognitive load, Google recommends keeping the information architecture relatively flat, with as few levels as possible. \nThe top level of browsable content lets users choose from a grid (as shown here) or list. Making a selection from browsable content opens the next level down with more detail.\n\n*** ** * ** ***\n\nPlayback controls\n-----------------\n\nPlayback controls in media apps can appear in either of two forms, depending on the circumstances:\n\n- Minimized control bar (available across views)\n- Playback view (overlay with full control bar)\n\nThese two forms alternate along the bottom of the screen in the animated example that follows.\n\n### Minimized control bar\n\nThe minimized control bar floats at the highest level of the browsable content space, above the content. It provides information about what's currently playing, along with basic affordances for user control of playback.\n\nOnce content begins playing, the minimized control bar remains available while a user is browsing media content. It persists until a new media app is selected or until the user taps the minimized control bar to display the playback view.\n\n### Playback view\n\nThe full control bar is available only in playback view, and it also floats above the content. In addition to the affordances available from the minimized control bar, the full control bar can provide more extensive controls defined by each media app. \nSelecting the minimized control bar anywhere outside of the touch targets for its controls expands it to a full-screen playback overlay (the playback view), as shown here. The playback view overlay sits on top of the browsable content space, and the minimized control bar is replaced by the full control bar with additional controls."]]
