系统体验
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
重点关注系统体验、应用体验和其他功能,以设计人像参考体验。
竖屏参考设计以主屏幕为基础,包含以下永久性系统界面元素:
主屏幕
主屏幕为驾驶员提供了一个全方位的起点,所有控件都可轻松访问。它可满足大多数驾驶员的需求,因此驾驶员可以专注于道路导航,而无需在应用之间切换。
驾驶员无需离开此界面,即可访问以下内容:
- 顶部的状态栏,其中包含快速控制选项和个人资料选择器
- 屏幕正文中的基础层,通常运行导航应用
- 底部的控制栏和系统导航栏
控制条
控制栏包含用于控制媒体(视频和音乐)、播客、蓝牙、电台和正在进行的通话的控件。
对于媒体应用和手机应用,控制栏位于屏幕下半部分的导航栏上方。当用户接听来电时,控件会从媒体控件变为通话控件。
媒体控件可用于播放、暂停、快退和快进。它们还允许用户标记喜爱项,并访问其他自定义控件(如有)。
正在进行的通话的控制功能
手机控件可用于将扬声器静音、切换到蓝牙以及取消通话。

状态栏
状态栏显示在屏幕顶部,其中包含个人资料选择器、快捷控件以及时间和天气信息。

- 快捷控件:
- 蓝牙:蓝牙状态
- 连接:WLAN、移动网络和热点
- 亮度显示:允许用户调整屏幕亮度级别
- 时钟:以数字形式显示当前时间
- 天气信息:显示外部温度
- 个人资料选择器:显示当前使用的用户个人资料,并允许用户根据需要选择其他个人资料
对于左舵和右舵汽车,状态栏的元素显示顺序相同。
用户可以在“设置”中开启和关闭天气显示。
如需了解有关自定义状态栏的最佳实践和指南,请参阅状态栏最佳实践。
快速控制
状态栏上的快捷控件可让您轻松访问蓝牙、连接和显示屏亮度。
付款资料选择器
状态栏上的个人资料选择器可让您快速选择个人资料,并通过快捷方式访问个人资料设置。
状态栏最佳实践
应用开发者的最佳实践:
- 使用透明度以避免遮盖应用内容:如果应用部分位于状态栏后面,而不是完全位于状态栏下方,应用开发者应将状态栏设为透明。
- 有策略地应用颜色:如果应用完全位于状态栏下方,那么应用开发者应为状态栏选择颜色。
系统导航栏
系统导航栏包含应用启动器、数字助理、通知中心和舒适性控制的控件。
系统导航栏位于屏幕底部,显示以下控件:

- 车内温度:车内温度
- 应用启动器:可供司机使用的应用
- 数字助理:访问所选的数字助理,例如 Google 助理
- 通知中心:访问通知中心
- 气候控制:访问车辆中的气候控制系统
如需有关自定义系统导航栏的指导,请参阅系统导航栏自定义。
应用启动器
应用启动器显示在主要应用空间中,采用标准应用启动器网格视图。应用按字母顺序 (A-Z) 排序。用户可以根据自己的偏好重新排序应用。
数字助理
点按此功能后,系统会调用当前活跃的数字助理进行语音通信。

通知中心
通知中心会将用户带到所有已保存的通知消息(包括已读和未读)。
车内环境控制
其他功能
纵向参考设计中适用于系统体验和应用体验的其他功能包括语音层和主题。
语音层
语音层是一个透明层,位于所有层以及控制栏和系统导航栏之上。
它可以运行集成到系统中的任何类型的数字助理,例如 Google 助理。
主题
您可以根据光线条件使用两种主题。
在夜间或光线较暗的环境中使用深色主题,以减少眩光。详细了解夜间浏览。
使用浅色主题有助于驾驶员和乘客在阳光直射下看清汽车屏幕。系统导航栏可以保持黑色,以便与硬件融为一体。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-26。
[null,null,["最后更新时间 (UTC):2025-07-26。"],[[["\u003cp\u003eThe portrait reference design provides drivers with a streamlined home screen experience, consolidating essential controls for navigation, media, communication, and vehicle settings.\u003c/p\u003e\n"],["\u003cp\u003eThe system UI consists of a status bar (for quick settings and profile selection), a control bar (for media and call management), and a system navigation bar (for app launching, assistant access, and climate control).\u003c/p\u003e\n"],["\u003cp\u003eThe design incorporates a voice layer for digital assistant integration and offers both light and dark themes for optimal visibility in varying light conditions.\u003c/p\u003e\n"],["\u003cp\u003eApp developers are encouraged to utilize transparency and strategic color application to ensure their apps integrate seamlessly with the system UI and maintain readability.\u003c/p\u003e\n"],["\u003cp\u003eUsers have access to an app launcher, notification center, and quick controls for common functions, all easily accessible from the persistent system UI elements.\u003c/p\u003e\n"]]],[],null,["# System experience\n\n\u003cbr /\u003e\n\nFocus on the system experience, app experience, and additional features to\ndesign your portrait reference experience.\n\nThe portrait reference design is anchored by the [Home screen](#home) and\nincludes these persistent system UI elements:\n\n- [Control bar](#control-bar)\n- [Status bar](#status-bar)\n- [System navigation bar](#system-navigation)\n\n### Home screen\n\nThe Home screen provides an all-inclusive starting point for drivers,\nwith all controls easily accessible. It addresses most drivers' needs, so\nthe driver can focus on navigating the road instead of switching between\napps.\n\nWithout leaving this screen, the driver can access:\n\n- The **status bar** at the top featuring quick controls and a profile selector\n- The **base layer** in the body of the screen, typically running a navigation app\n- **Control and system navigation bars** at the bottom \n\n\u003cbr /\u003e\n\n### Control bar\n\nThe control bar hosts controls for media (video and music), podcasts, Bluetooth,\nradio, and active calls.\n\nFor media and phone apps, the control bar sits above the navigation bar in the\nbottom half of the screen. The controls change from media to active phone call\nwhen the user accepts an incoming call.\n\n#### Media controls\n\nThe media controls provide the ability to play, pause, rewind, and forward. They\nalso allow the user to mark favorites and access additional custom controls, if\nany. \n\n\u003cbr /\u003e\n\n#### Active phone call controls\n\nThe phone controls provide the ability to mute speaker, switch to Bluetooth, and\ncancel a call.\n\n### Status bar\n\nThe status bar appears at the top of the screen and hosts the profile selector,\nquick controls, and time and weather information.\n\n1. Quick controls:\n 1. **Bluetooth**: Bluetooth status\n 2. **Connectivity**: Wi-Fi, mobile network, and hotspot\n 3. **Brightness display**: Allows user to adjust screen brightness level\n2. **Clock**: Digital display of the current time\n3. **Weather information**: Displays exterior temperature\n4. **Profile selector**: Displays user profile in current use and allows user to select a different profile if needed\n\nThe elements of the status bar appear in the same order for left-hand-drive and\nright-hand-drive cars.\n\nUsers can toggle the weather display on and off in Settings.\n\nFor best practices and guidance about customizing the status bar, see\n[Status bar best practices](#status-bar-bps).\n\n#### Quick controls\n\nThe quick controls on the status bar provide easy access to Bluetooth,\nconnectivity, and display brightness. \n\n\u003cbr /\u003e\n\n#### Profile selector\n\nThe profile selector on the status bar allows quick selection of profiles\nand access to profile settings with a shortcut. \n\n\u003cbr /\u003e\n\n#### Status bar best practices\n\nBest practices for app developers:\n\n- **Use transparency to avoid covering app content**: If the app is positioned partly behind the status bar, rather than entirely below it, app developers should leave the status bar transparent.\n- **Apply color strategically**: If the app is entirely below the status bar, then app developers should choose a color for the status bar.\n\n### System navigation bar\n\nThe system navigation bar hosts controls for the app launcher, the digital\nassistant, the Notification Center, and comfort controls.\n\nThe system navigation bar sits at the bottom of the screen and displays the\nfollowing controls:\n\n1. **Cabin temperature**: In-car temperature\n2. **App launcher**: Apps available to the driver\n3. **Digital assistant**: Access to chosen digital assistant, such as the Google Assistant\n4. **Notification Center**: Access to the Notification Center\n5. **Climate control**: Access to climate control systems in the vehicle\n\nFor guidance about customizing the system navigation bar, see\n[System navigation bar customization](/cars/design/automotive-os/product-experience/system-ui/portrait-reference/customization#sys-nav-bar).\n\n#### App launcher\n\nThe app launcher is shown in the primary app space, in a standard app\nlauncher grid view. Apps are ordered from A through Z. Users can reorder\napps based on their preference. \n\n\u003cbr /\u003e\n\n#### Digital assistant\n\nWhen tapped, this affordance invokes the currently active digital assistant for\nvoice communication.\n\n#### Notification Center\n\nThe Notification Center takes the user to all saved notification\nmessages, both read and unread. \n\n\u003cbr /\u003e\n\n#### Climate control\n\nThe climate control icon provides easy access to the climate control\nsystems of the car. \n\n\u003cbr /\u003e\n\nAdditional features\n-------------------\n\nAdditional features in the portrait reference design that apply to both the\nsystem experience and the app experience include the voice layer and themes.\n\n### Voice layer\n\nThe voice layer is a transparent layer that sits above all layers and above the\ncontrol and system navigation bars.\n\nIt can run any type of digital assistant integrated into the system, such as the\n[Google Assistant](/cars/design/integrations/google-assistant).\n\n### Themes\n\nTwo themes are available to use based on light conditions. \n\nUse Dark theme for night or low-light conditions to reduce glare. Learn more\nabout\n[glanceability at night](/cars/design/design-foundations/visual-principles#provide_glanceability_at_night).\n\nUse Light theme to help drivers and passengers see the car screens in direct\nsunlight. The system navigation can remain black to blend with the hardware."]]