1page.title=Designing for Auto
2page.tags="design","Auto"
3@jd:body
4
5<div class="sidebox-wrapper">
6<div class="sidebox">
7  <h2><strong>UI Guidelines</strong></h2>
8  <ul>
9  <li><a href="{@docRoot}shareables/auto/AndroidAuto-audio-apps.pdf">
10    <strong>Auto Audio Apps</strong></a>
11  </li>
12  <li><a href="{@docRoot}shareables/auto/AndroidAuto-messaging-apps.pdf">
13    <strong>Auto Messaging Apps</strong></a>
14  </li>
15  <li><a href="{@docRoot}shareables/auto/AndroidAuto-custom-colors.pdf">
16    <strong>Auto Color Customization</strong></a>
17  </li>
18 </ul>
19</div>
20</div>
21
22<a class="notice-developers" href="{@docRoot}training/auto/index.html">
23  <div>
24    <h3>Developer Docs</h3>
25    <p>Building Apps for Auto</p>
26  </div>
27</a>
28
29<a href="http://www.youtube.com/watch?v=vG9c5egwEYY"
30        class="notice-developers-video">
31<div>
32    <h3>Video</h3>
33    <p>Designing For Drivers</p>
34</div>
35</a>
36
37
38<p>Android Auto provide a standardized user interface and user interaction
39model that works across vehicles. As a designer, you do not
40need to worry about vehicle-specific hardware differences. This page
41describes some of the key screens that users will encounter in the
42Auto user interface. To dive deeper into how to design for
43the Auto user interface (UI), see the Auto UI guidelines in the sidebar.</p>
44
45<p class="note"><strong>Important:</strong> Google takes driver distraction
46very seriously. There are specific design requirements your app must meet to
47qualify as an Auto app on Google Play. By adhering to these
48requirements, you can reduce the effort for building and testing your app. For
49more information, see <a href="{@docRoot}distribute/essentials/quality/auto.html">Auto App Quality</a>.</p>
50
51<br>
52
53<h2 id="overview-screen">Overview Screen</h2>
54
55<p>When users first connect their Android device to the car, they are presented
56with the Overview screen. This screen displays contextual cards based on the
57user’s location, time of day, and so on. The user can also use this screen to view
58notifications from their messaging apps and select a message to send a response
59by voice input.</p>
60
61<div class="auto-img-container-single">
62  <div class="auto-img-container">
63    <img src="{@docRoot}auto/images/ui/gearhead_overview.png" alt="Overview screen" />
64  </div>
65  <p class="img-caption" style="margin-top:0px">
66    <strong>Figure 1.</strong> The Overview screen may show contextual cards and
67new messages.
68  </p>
69</div>
70
71<h2 id="launchapp">Audio App Launcher</h2>
72
73<p>Tapping on the headphones icon in the Activity Bar lets the
74  user see all audio apps installed on the user’s handheld device and select
75  one of them from a scrollable list.</p>
76
77<div class="auto-img-container-single">
78  <div class="auto-img-container">
79    <img src="{@docRoot}auto/images/ui/gearhead_lens_switching.png" alt="Launcher" />
80  </div>
81  <p class="img-caption" style="margin-top:0px">
82    <strong>Figure 2.</strong> The audio app launcher shows available audio apps.
83  </p>
84</div>
85
86<h2>Primary App UI</h2>
87
88<p>After the user selects an audio app, the display shows the primary app UI.
89Auto presents the app in a standardized UI, but you can customize
90this UI to show your own icons, app name, and background images
91(such as the album art).</p>
92
93<div class="auto-img-container-single">
94  <div class="auto-img-container">
95    <img src="{@docRoot}auto/images/ui/gearhead_generic_UI.png" alt="Generic audio app UI" />
96  </div>
97  <p class="img-caption" style="margin-top:0px">
98    <strong>Figure 3.</strong> Generic audio app UI.
99  </p>
100</div>
101
102<div class="auto-img-container-single">
103  <div class="auto-img-container">
104    <img src="{@docRoot}auto/images/ui/gearhead_custom_UI.png" alt="Customized audio app UI" />
105  </div>
106  <p class="img-caption" style="margin-top:0px">
107    <strong>Figure 4.</strong> Example of the Google Play Music app UI.
108  </p>
109</div>
110
111<h3 id="useractions">User Actions</h3>
112
113<p>The media control card in the primary app UI supports up to four main actions,
114four auxiliary actions on the overflow bar, and the <em>Return</em> action. You can
115use standard controls and customize the actions and icons.</p>
116
117<div class="auto-img-container-single">
118  <div class="auto-img-container">
119    <img src="{@docRoot}auto/images/ui/gearhead_custom_user_actions.png" alt="Customized user actions" />
120  </div>
121  <p class="img-caption" style="margin-top:0px">
122    <strong>Figure 5.</strong> Example of user actions in the Google Play Music app.
123  </p>
124</div>
125
126<h3 id="drawerlist">Drawer List</h3>
127
128<p>For browse actions, the display shows the drawer transition. After the
129transition from the primary app UI to the list UI, the drawer appears in the
130center. The customized list UI shows the media containers and the audio files
131provided by the media service in your app. You can also customize drawers with
132icons for list items.</p>
133
134<div class="auto-img-container-single">
135  <div class="auto-img-container">
136    <img src="{@docRoot}auto/images/ui/gearhead_drawer_generic.png"
137    alt="Generic drawers" style="border:3px solid black" />
138  </div>
139  <p class="img-caption" style="margin-top:0px">
140    <strong>Figure 6.</strong> Example of the drawer layout template with generic list items.
141  </p>
142</div>
143
144<div class="auto-img-container-single">
145  <div class="auto-img-container">
146    <img src="{@docRoot}auto/images/ui/gearhead_drawers_customized.png"
147    alt="Customized drawers" style="border:3px solid black" />
148  </div>
149  <p class="img-caption" style="margin-top:0px">
150    <strong>Figure 7.</strong> Example of the the drawer layout in the Google Play Music app.
151  </p>
152</div>
153
154
155<h2 id="daynighttransitions">Day and Night Transitions</h2>
156
157<p>All the UIs support different color schemes for day and night. The platform
158provides the state (day or night) and makes adjustments automatically.</p>
159
160<div class="auto-img-container-single">
161  <div class="auto-img-container">
162    <img src="{@docRoot}auto/images/ui/gearhead_day.png" alt="Audio app in day mode" />
163  </div>
164  <p class="img-caption" style="margin-top:0px">
165    <strong>Figure 8.</strong> Example of the Google Play Music app in day mode.
166  </p>
167</div>
168
169<div class="auto-img-container-single">
170  <div class="auto-img-container">
171    <img src="{@docRoot}auto/images/ui/gearhead_night.png" alt="Audio app in night mode" />
172  </div>
173  <p class="img-caption" style="margin-top:0px">
174    <strong>Figure 9.</strong> Example of the Google Play Music app in night mode.
175  </p>
176</div>
177
178<h3 class="rel-resources clearfloat">Related resources</h3>
179
180<div class="resource-widget resource-flow-layout col-13" data-query=
181"collection:design/auto/auto_ui_guidelines"
182data-sortorder="-timestamp" data-cardsizes="6x3" data-maxresults="6">
183</div>
184
185
186
187