[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThese guidelines offer layout designs that scale across various screen sizes, using elements like padding and keylines defined for Automotive OS components.\u003c/p\u003e\n"],["\u003cp\u003eLayouts consider app working space, screen-size categories (standard, wide, extra wide, super wide, short, standard, tall), padding, keylines, and flex areas for adaptability.\u003c/p\u003e\n"],["\u003cp\u003eSpacing utilizes an 8dp grid, with padding for fixed spacing (P0-P8) and keylines (KL0-KL4) for variable spacing based on screen width.\u003c/p\u003e\n"],["\u003cp\u003eScaling strategies include flex areas, optional minimum/maximum widths, keylines, and padding, with examples like minimized control bar and grids illustrating adaptation.\u003c/p\u003e\n"],["\u003cp\u003eScreen sizes are categorized based on width and height, impacting keyline spacing, component scaling, and element visibility.\u003c/p\u003e\n"]]],[],null,["# Layout\n\n\u003cbr /\u003e\n\nThis section provides design guidelines for screen layouts that can be scaled across a range of screen sizes.\n\nThe padding and keyline values defined here are used in [Components](/cars/design/automotive-os/components/overview),\n[Media specs](/cars/design/gas-customization/specs/media-specs), [Notification Center specs](/cars/design/gas-customization/specs/notification-center-spec), and [Dialer specs](/cars/design/gas-customization/specs/dialer-specs).\n\n**Guidance at a glance (TL:DR):** \n- Base layouts on appropriate screen-size categories\n- Use an 8dp grid for alignment\n- Set margin widths to 12% of app working space \n- Place scroll bars and navigation aids in margins\n- Use padding for fixed spacing between elements\n\n*** ** * ** ***\n\nKey layout concepts\n-------------------\n\n- **App working space:** The area of the screen available to an app after accounting for screen space occupied by car maker and system UI features\n- **Screen-size categories:** A set of 4 screen-width ranges (standard, wide, extra wide, and super wide), and 3 screen-height ranges (short, standard, and tall), where \"screen\" refers to the app working space rather than the full space from edge to edge\n- **Padding:** A set of spacing values that specify fixed vertical and horizontal spacing between elements and components in a layout\n- **Keylines:** A set of variable-width spacing values -- determined by width categories -- that indicate horizontal space between a margin or component edge and an element in a layout\n- **Flex area:** A part of a component, sometimes assigned a minimum or maximum value, that can be scaled to fit screen size\n\n*** ** * ** ***\n\nApp working space\n-----------------\n\nAn app's working space is the available screen area remaining after accounting for screen space occupied by car-maker and system-UI features. The app working space is intended to contain left and right margins and the app canvas, which is the app's primary content area.\n\nEach margin should be equal to 12% of the app working space width. Margins typically contain scroll bars and navigational affordances for the app.\nExamples of various app working spaces **Note:** To allow for a wider app canvas at smaller screen sizes, the passenger-side margin can be omitted.\n\n*** ** * ** ***\n\nScreen sizes\n------------\n\nReference-spec layouts are keyed to a set of screen-size categories based on the width and height of the [app working space](#app_working_space).\n\nIn specs throughout these guidelines, these categories are referred to by name. For example, \"Wide\" refers to all screen widths in the range from 930dp to 1279dp.\n\nScreen-size categories affect recommendations for:\n\n- Keyline spacing in components and elements\n- Scaling of component flex areas\n- When to hide or display optional elements, such as album art on the minimized control bar\n\n| **Note:** Reference layouts for different screen sizes may sometimes recommend different padding values between elements.\n\n### Width categories\n\n| | Standard | Wide | Extra wide | Super wide |\n|--------------------|--------------|---------------|----------------|------------|\n| Screen-width range | 690 -- 929dp | 930 -- 1279dp | 1280 -- 1919dp | ≥ 1920dp |\n\n### Height categories\n\n| | Short | Standard | Tall |\n|---------------------|------------|---------------|----------|\n| Screen-height range | 0 -- 609dp | 610 -- 1199dp | ≥ 1200dp |\n\n*** ** * ** ***\n\nSpacing\n-------\n\nReference-spec layouts are structured on an 8dp grid. In practice, this means UI components and elements in specs are spaced apart by multiples of 8dp.\n\nThere are two types of spacing:\n\n- **Padding**, for fixed-width and fixed-height spacing\n\n- **Keylines**, for variable-width spacing\n\n*** ** * ** ***\n\nPadding\n-------\n\nPadding establishes fixed-width and fixed-height spacing between components in a reference-spec layout. It can also dictate fixed spacing between elements within a component, such as the space between adjacent number targets on the dialpad component. Typically, the closer the relationship is between two elements, the narrower the padding between them.\n\nThere are 9 padding values, designated as P0 -- P8.\n\nHere are the padding values and their corresponding sizes:\n\n| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |\n|-----|-----|------|------|------|------|------|------|------|\n| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |\n\n| **Note:** Padding sizes of 4dp and 12dp are provided for better alignment of elements in smaller components. These values should be used sparingly, since they are not multiples of 8dp. If a larger padding value (above 96dp) is needed, a custom number that aligns with the 8dp grid can be used.\n\nUnlike [keylines](#keylines) which change spacing values based on screen-width categories, padding values remain constant. For example, P1 is always 8dp. In some cases, however, the distance between a particular set of components or elements may have different padding values in the reference-spec layouts for different screen sizes. For example, the recommended vertical spacing between grid items is P4 for short screens and P5 for standard and tall screens.\n\n*** ** * ** ***\n\nKeylines\n--------\n\nRather than indicating padding between elements in a reference spec, keylines specify how far an element is from the nearest margin or edge of a component. Keylines change value based on screen width. They offer a convenient way to scale a layout to different screen sizes while maintaining proportional, horizontal spacing of elements.\n\nThere are 5 keylines, designated as KL0 to KL4.\n\nHere are the keyline values for each screen width:\n\n| Screen width | Standard | Wide | Extra wide | Super wide |\n|--------------|----------|-------|------------|------------|\n| **KL0** | 16dp | 24dp | 24dp | 32dp |\n| **KL1** | 24dp | 32dp | 32dp | 48dp |\n| **KL2** | 96dp | 112dp | 112dp | 112dp |\n| **KL3** | 112dp | 128dp | 128dp | 152dp |\n| **KL4** | 148dp | 168dp | 168dp | 168dp |\n\n*** ** * ** ***\n\nScaling strategies\n------------------\n\nReference-spec layouts provide guidelines for scaling apps to different screen sizes. To help with smooth scaling, specs typically include:\n\n- A **flex area**, which is a part of a component that car makers should expand or contract to fit within their specific screen size\n- **Optional recommended minimum and maximum widths** for the flex area, intended to prevent scaling components to undesirable sizes\n- **Keylines** used to maintain proportional, horizontal spacing of elements, which scale differently based on screen-width category\n- **Padding**, for specifying fixed spacing between components and elements\n\nOptionally, some specs specify whether to hide or display certain elements based on screen width.\n\n### Example 1: Minimized control bar\n\nThe *minimized control bar* is an example of a component for which the reference-spec layout recommends flexing the component width and hiding a non-essential element at smaller screen sizes.\nMinimized control bar spec\n\nThe spec for a minimized control bar includes 2 scaling guidelines:\n\n1. The square element at left (typically used for album art) should appear only when the screen width is 930dp or greater, and\n2. The flexible-width section in the middle should never be narrower than 440dp and can be scaled up for wider screens as long as the entire component width does not exceed 1028dp.\n\nThe animation below shows how the minimized control bar can be scaled to wider and narrower screens by following the recommendations in the reference layouts.\n\n\u003cbr /\u003e\n\nMinimized control bar animation\n\n### Example 2: Grids\n\n*Grids* are an example of components that can be placed and sized in columns and rows within a layout.\nGrid adaptive specs\n\nThe recommended number of columns (3 on narrower screens, 4 on wider screens) depends on the screen size. Column width and row height can be adjusted within a screen category as long as grids are never less than recommended minimum widths.\nThe animation below shows how grids can be scaled to wider and narrower screens by following the recommendations in the reference layouts.\nGrid adaptive animation"]]
