通知卡片
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-25。
[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eNotification cards in Android Automotive OS are designed to minimize driver distraction and come in three versions: Heads-up, Notification Center, and Grouped-notification.\u003c/p\u003e\n"],["\u003cp\u003eThese cards are flexible components with elements like headers, content, actions, and icons, and their layout adapts to different screen sizes for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eStyling includes specific typography, color palettes, and sizing for elements like icons and avatars to maintain consistency and readability.\u003c/p\u003e\n"],["\u003cp\u003eMotion design is incorporated for Heads-up arrival, swipe-to-dismiss, and grouped-notification expand/collapse for intuitive user interaction.\u003c/p\u003e\n"],["\u003cp\u003eExamples are provided for various notification types like calls, messages, car warnings, and navigation across different card versions and display modes.\u003c/p\u003e\n"]]],[],null,["# Notification card\n\n\u003cbr /\u003e\n\nNotification cards communicate small amounts of timely information from the system or from an app.\n\nThe design of these cards for Android Automotive OS is intended to minimize distraction for drivers. The cards come in three basic versions:\n\n- **Heads-up notification (HUN) card:** Used for a notification that appears briefly over the current screen\n- **Notification Center card:** Used for notifications listed in the Notification Center\n- **Grouped-notification card:** Combines multiple Notification Center cards in one card\n\nWithin these versions, designs can also vary slightly depending on the category of the message. For example, call notifications have different buttons and icons than navigation notifications. \n[Notification Center specs\nSpecs, style guidelines, and more](/cars/design/gas-customization/specs/notification-center-spec)\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe notification card is a flexible component that can include a variety of elements. It has three main versions:\n\n- **HUN card:** This version is wider than the Notification Center card and appears on top of the current screen until dismissed\n- **Notification Center card:** This version is narrower than the HUN card and appears with other such cards in the Notification Center, in a vertical list\n- **Grouped-notification card:** This version of the Notification Center card combines multiple related notifications in one card, with controls for expanding to show the individual notifications\n\nVariants of these versions by message type are shown in [Styles](#styles).\nShown here are HUN and Notification Center versions of the same notification card, featuring the following elements: \n1. Header \n2. Content (with and without optional message preview, which can be hidden when the car is driving) \n3. Actions \n4. Large icon Shown here is a grouped-notification card in both its collapsed and expanded versions, featuring the following elements: \n1. Header \n2. Content \n3. Expand/collapse action \n4. Expand/collapse indicator\n\n*** ** * ** ***\n\nSpecs -- HUN card\n-----------------\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Standard HUN\n\n### HUN with avatar\n\n### Message HUN with preview\n\n### Message HUN with multiple messages\n\n### Large-image HUN\n\n*** ** * ** ***\n\nSpecs -- Notification Center card\n---------------------------------\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Standard notification\n\n### Message notification with preview\n\n### Message notification with multiple messages\n\n### Single action notification\n\n*** ** * ** ***\n\nSpecs -- Grouped-notification card\n----------------------------------\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Grouped notification -- Collapsed\n\n### Grouped notification -- Expanded\n\n*** ** * ** ***\n\nScaling layouts\n---------------\n\nThese reference layouts show how to adapt notifications to accommodate screens of various widths and heights. (Width and height categories are defined in the [Layout](/cars/design/automotive-os/design-system/layout) section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs. \n[Layout\nMargins, keylines, and padding for various screen sizes](/cars/design/automotive-os/design-system/layout) \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Standard-width screens\n\nHUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\n### Wide screens\n\nHUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\n### Extra-wide and super-wide screens\n\nHUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\n### Vertical spacing of notifications on screens of various heights\n\nThe vertical-spacing specs in this section are for HUN cards only. For information about vertical spacing of cards in the Notification Center, see the [Notification Center specs](/cars/design/gas-customization/specs/notification-center-spec).\n\n#### Short screens\n\nHUN card\n\n#### Tall and standard-height screens\n\nHUN card\n\n*** ** * ** ***\n\nStyles\n------\n\n[Typography guidelines\nScale and grid references, typographic examples, and more](/cars/design/automotive-os/design-system/typography) \n[Color guidelines\nPalettes, elevation and opacity values, and more](/cars/design/automotive-os/design-system/color)\n\n### Typography\n\n| Type style | Typeface | Weight | Size (dp) |\n|------------|----------|---------|-----------|\n| Body 1 | Roboto | Regular | 32 |\n| Body 3 M | Roboto | Medium | 24 |\n| Body 3 | Roboto | Regular | 24 |\n\n### Color\n\n| Element | Color(day mode) | Color (night mode) |\n|----------------------|------------------|--------------------|\n| Primary type / icons | White | White @ 88% |\n| Secondary type | White @ 72% | White @ 60% |\n| Secondary icon | 3rd-party accent | 3rd-party accent |\n| Divider hairline | White 22% | White 12% |\n| Card background | Grey 868 | Grey 900 |\n| Gradient Scrim | Black 100% - 0% | Black 100% - 20% |\n\n### Sizing\n\n| Element | Size (dp) |\n|----------------------------|-----------|\n| Primary icon | 44 |\n| Secondary icon | 36 |\n| Medium avatar | 76 |\n| Rounded corner radius (R2) | 8 |\n\n*** ** * ** ***\n\nExamples\n--------\n\nHUN cards: Call, Message, Car warning, and Navigation Notification Center cards: Call, Message, and Car warning \nGrouped-notification cards: Messages, expanded and collapsed - day Grouped-notification cards: Messages, expanded and collapsed - night\n\n*** ** * ** ***\n\nMotion\n------\n\nThe following motions are an important part of the notification experience:\n\n- HUN arrival motion\n- Swipe motion for dismissing a notification\n- Grouped-notification expand and collapse motions\n\n### HUN arrival\n\nThe motion of a HUN sliding down from the top of the screen helps users notice its arrival -- and it also provides a hint about accessing notifications via downward swipe if the Notification Center is implemented as a pull-down shade\n\n### Swipe-to-dismiss\n\nThe dragging motion when a user swipes sideways on a notification provides visual confirmation that it is being dismissed, then the upward motion of the next notification fills in the hole in the list\n\n### Grouped-notification expand and collapse\n\nHaving a grouped-notification card stretch downward provides a smooth transition from the collapsed to the expanded state"]]
