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