CarPlay supports several landscape-orientation display resolutions with varying pixel densities and aspect ratios. Take extra care in designing your layout so that it looks great on all possible screen sizes. The system automatically scales app icons and interfaces based on the resolution of the display, so they always appear onscreen at roughly the same size.
|800px × 480px||5:3|
|960px × 540px||16:9|
|1280px × 720px||16:9|
|1920px × 720px||8:3|
Provide useful, focused information in a clean layout that’s easy to scan from the driver’s seat. Don’t clutter the screen with nonessential details and unnecessary adornments.
Maintain an overall consistent appearance throughout your app. In general, elements with similar functions should look similar.
Ensure that primary content stands out and feels actionable. Large items catch the eye, appear more important than smaller ones, and are easy to tap. In general, place the most important content and controls in the upper half of the screen.
Use alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information. Indentation and alignment can also help communicate how groups of content are related.
Provide ample spacing for interactive elements. To ensure that controls are easy to tap while driving, a minimum tappable area of 44pt × 44pt is highly recommended for all controls, even ones that appear smaller than 44pt × 44pt.
Position controls based on driver location. If a vehicle’s built-in touchscreen is positioned to right of the driver, primary interface controls and actions are most easily accessible when placed on the leftmost portion of the screen.
Consider the impact of physical input controls. If a driver must use a rotary knob to control CarPlay, a clear visual hierarchy should communicate how to navigate sequentially and make selections.