12e95bdc53
checklist item references. Also add information about alpha/beta Play Store channel. Reference the design spec for the 6-tap specification. bug: 20012569 bug: 20721846 bug: 19702807 Change-Id: Id42b64f36fa837b158f034d8e55f8e6d93709bb0
178 lines
6.4 KiB
Plaintext
178 lines
6.4 KiB
Plaintext
page.title=Designing for Auto
|
||
page.tags="design","Auto"
|
||
@jd:body
|
||
|
||
<a class="notice-developers" href="{@docRoot}training/auto/index.html">
|
||
<div>
|
||
<h3>Developer Docs</h3>
|
||
<p>Building Apps for Auto</p>
|
||
</div>
|
||
</a>
|
||
|
||
<div class="sidebox-wrapper">
|
||
<div class="sidebox">
|
||
<h2><strong>UI Guidelines</strong></h2>
|
||
<ul>
|
||
<li><a href="{@docRoot}shareables/auto/AndroidAuto-audio-apps.pdf">
|
||
<strong>Auto Audio Apps</strong></a>
|
||
</li>
|
||
<li><a href="{@docRoot}shareables/auto/AndroidAuto-messaging-apps.pdf">
|
||
<strong>Auto Messaging Apps</strong></a>
|
||
</li>
|
||
<li><a href="{@docRoot}shareables/auto/AndroidAuto-custom-colors.pdf">
|
||
<strong>Auto Color Customization</strong></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<p>Android Auto provide a standardized user interface and user interaction
|
||
model that works across vehicles. As a designer, you do not
|
||
need to worry about vehicle-specific hardware differences. This page
|
||
describes some of the key screens that users will encounter in the
|
||
Auto user interface. To dive deeper into how to design for
|
||
the Auto user interface (UI), see the Auto UI guidelines in the sidebar.</p>
|
||
|
||
<p class="note"><strong>Important:</strong> Google takes driver distraction
|
||
very seriously. There are specific design requirements your app must meet to
|
||
qualify as an Auto app on Google Play. By adhering to these
|
||
requirements, you can reduce the effort for building and testing your app. For
|
||
more information, see <a href="{@docRoot}distribute/essentials/quality/auto.html">Auto App Quality</a>.</p>
|
||
|
||
<br>
|
||
|
||
<h2 id="overview-screen">Overview Screen</h2>
|
||
|
||
<p>When users first connect their Android device to the car, they are presented
|
||
with the Overview screen. This screen displays contextual cards based on the
|
||
user’s location, time of day, and so on. The user can also use this screen to view
|
||
notifications from their messaging apps and select a message to send a response
|
||
by voice input.</p>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_overview.png" alt="Overview screen" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 1.</strong> The Overview screen may show contextual cards and
|
||
new messages.
|
||
</p>
|
||
</div>
|
||
|
||
<h2 id="launchapp">Audio App Launcher</h2>
|
||
|
||
<p>Tapping on the headphones icon in the Activity Bar lets the
|
||
user see all audio apps installed on the user’s handheld device and select
|
||
one of them from a scrollable list.</p>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_lens_switching.png" alt="Launcher" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 2.</strong> The audio app launcher shows available audio apps.
|
||
</p>
|
||
</div>
|
||
|
||
<h2>Primary App UI</h2>
|
||
|
||
<p>After the user selects an audio app, the display shows the primary app UI.
|
||
Auto presents the app in a standardized UI, but you can customize
|
||
this UI to show your own icons, app name, and background images
|
||
(such as the album art).</p>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_generic_UI.png" alt="Generic audio app UI" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 3.</strong> Generic audio app UI.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_custom_UI.png" alt="Customized audio app UI" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 4.</strong> Example of the Google Play Music app UI.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 id="useractions">User Actions</h3>
|
||
|
||
<p>The media control card in the primary app UI supports up to four main actions,
|
||
four auxiliary actions on the overflow bar, and the <em>Return</em> action. You can
|
||
use standard controls and customize the actions and icons.</p>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_custom_user_actions.png" alt="Customized user actions" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 5.</strong> Example of user actions in the Google Play Music app.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 id="drawerlist">Drawer List</h3>
|
||
|
||
<p>For browse actions, the display shows the drawer transition. After the
|
||
transition from the primary app UI to the list UI, the drawer appears in the
|
||
center. The customized list UI shows the media containers and the audio files
|
||
provided by the media service in your app. You can also customize drawers with
|
||
icons for list items.</p>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_drawer_generic.png"
|
||
alt="Generic drawers" style="border:3px solid black" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 6.</strong> Example of the drawer layout template with generic list items.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_drawers_customized.png"
|
||
alt="Customized drawers" style="border:3px solid black" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 7.</strong> Example of the the drawer layout in the Google Play Music app.
|
||
</p>
|
||
</div>
|
||
|
||
|
||
<h2 id="daynighttransitions">Day and Night Transitions</h2>
|
||
|
||
<p>All the UIs support different color schemes for day and night. The platform
|
||
provides the state (day or night) and makes adjustments automatically.</p>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_day.png" alt="Audio app in day mode" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 8.</strong> Example of the Google Play Music app in day mode.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="auto-img-container-single">
|
||
<div class="auto-img-container">
|
||
<img src="{@docRoot}auto/images/ui/gearhead_night.png" alt="Audio app in night mode" />
|
||
</div>
|
||
<p class="img-caption" style="margin-top:0px">
|
||
<strong>Figure 9.</strong> Example of the Google Play Music app in night mode.
|
||
</p>
|
||
</div>
|
||
|
||
<h3 class="rel-resources clearfloat">Related resources</h3>
|
||
|
||
<div class="resource-widget resource-flow-layout col-13" data-query=
|
||
"collection:design/auto/auto_ui_guidelines"
|
||
data-sortorder="-timestamp" data-cardsizes="6x3" data-maxresults="6">
|
||
</div>
|
||
|
||
|
||
|