1 page.title=Android Design Principles 2 @jd:body 3 4 <p>These design principles were developed by and for the Android 5 User Experience Team to keep users' best interests in mind. 6 For Android developers and designers, they continue to 7 underlie the more detailed design guidelines for different 8 types of devices.</p> 9 10 <p> 11 Consider these principles as you apply your own 12 creativity and design thinking. Deviate with purpose. 13 </p> 14 15 <h2 id="enchant-me">Enchant Me</h2> 16 17 <div class="cols"> 18 <div class="col-7of12"> 19 20 <h4 id="delight-me">Delight me in surprising ways</h4> 21 <p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to 22 experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful 23 force is at hand.</p> 24 25 </div> 26 <div class="col-5of12"> 27 28 <img src="{@docRoot}design/media/principles_delight.png"> 29 30 </div> 31 </div> 32 33 <div class="vspace size-2"> </div> 34 35 <div class="cols"> 36 <div class="col-7of12"> 37 38 <h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4> 39 <p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort 40 needed to perform a task while making it more emotionally satisfying.</p> 41 42 </div> 43 <div class="col-5of12"> 44 45 <img src="{@docRoot}design/media/principles_real_objects.png"> 46 47 </div> 48 </div> 49 50 <div class="vspace size-2"> </div> 51 52 <div class="cols"> 53 <div class="col-7of12"> 54 55 <h4 id="make-it-mine">Let me make it mine</h4> 56 <p>People love to add personal touches because it helps them feel at home and in control. Provide 57 sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder 58 primary tasks.</p> 59 60 </div> 61 <div class="col-5of12"> 62 63 <img src="{@docRoot}design/media/principles_make_it_mine.png"> 64 65 </div> 66 </div> 67 68 <div class="vspace size-2"> </div> 69 70 <div class="cols"> 71 <div class="col-7of12"> 72 73 <h4 id="get-to-know-me">Get to know me</h4> 74 <p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and 75 over, place previous choices within easy reach.</p> 76 77 </div> 78 <div class="col-5of12"> 79 80 <img src="{@docRoot}design/media/principles_get_to_know_me.png"> 81 82 </div> 83 </div> 84 85 <h2 id="simplify-my-life">Simplify My Life</h2> 86 87 <div class="cols"> 88 <div class="col-7of12"> 89 90 <h4 id="keep-it-brief">Keep it brief</h4> 91 <p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p> 92 93 </div> 94 <div class="col-5of12"> 95 96 <img src="{@docRoot}design/media/principles_keep_it_brief.png"> 97 98 </div> 99 </div> 100 101 <div class="vspace size-2"> </div> 102 103 <div class="cols"> 104 <div class="col-7of12"> 105 106 <h4 id="pictures-faster-than-words">Pictures are faster than words</h4> 107 <p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient 108 than words.</p> 109 110 </div> 111 <div class="col-5of12"> 112 113 <img src="{@docRoot}design/media/principles_pictures.png"> 114 115 </div> 116 </div> 117 118 <div class="vspace size-2"> </div> 119 120 <div class="cols"> 121 <div class="col-7of12"> 122 123 <h4 id="decide-for-me">Decide for me but let me have the final say</h4> 124 <p>Take your best guess and act rather than asking first. Too many choices and decisions make people 125 unhappy. Just in case you get it wrong, allow for 'undo'.</p> 126 127 </div> 128 <div class="col-5of12"> 129 130 <img src="{@docRoot}design/media/principles_decide_for_me.png"> 131 132 </div> 133 </div> 134 135 <div class="vspace size-2"> </div> 136 137 <div class="cols"> 138 <div class="col-7of12"> 139 140 <h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4> 141 <p>People get overwhelmed when they see too much at once. Break tasks and information into small, 142 digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p> 143 144 </div> 145 <div class="col-5of12"> 146 147 <img src="{@docRoot}design/media/principles_information_when_need_it.png"> 148 149 </div> 150 </div> 151 152 <div class="vspace size-2"> </div> 153 154 <div class="cols"> 155 <div class="col-7of12"> 156 157 <h4 id="always-know-where-i-am">I should always know where I am</h4> 158 <p>Give people confidence that they know their way around. Make places in your app look distinct and 159 use transitions to show relationships among screens. Provide feedback on tasks in progress.</p> 160 161 </div> 162 <div class="col-5of12"> 163 164 <img src="{@docRoot}design/media/principles_navigation.png"> 165 166 </div> 167 </div> 168 169 <div class="vspace size-2"> </div> 170 171 <div class="cols"> 172 <div class="col-7of12"> 173 174 <h4 id="never-lose-my-stuff">Never lose my stuff</h4> 175 <p>Save what people took time to create and let them access it from anywhere. Remember settings, 176 personal touches, and creations across phones, tablets, and computers. It makes upgrading the 177 easiest thing in the world.</p> 178 179 </div> 180 <div class="col-5of12"> 181 182 <img src="{@docRoot}design/media/principles_never_lose_stuff.png"> 183 184 </div> 185 </div> 186 187 <div class="vspace size-2"> </div> 188 189 <div class="cols"> 190 <div class="col-7of12"> 191 192 <h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4> 193 <p>Help people discern functional differences by making them visually distinct rather than subtle. 194 Avoid modes, which are places that look similar but act differently on the same input.</p> 195 196 </div> 197 <div class="col-5of12"> 198 199 <img src="{@docRoot}design/media/principles_looks_same.png"> 200 201 </div> 202 </div> 203 204 <div class="vspace size-2"> </div> 205 206 <div class="cols"> 207 <div class="col-7of12"> 208 209 <h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4> 210 <p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay 211 focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p> 212 213 </div> 214 <div class="col-5of12"> 215 216 <img src="{@docRoot}design/media/principles_important_interruption.png"> 217 218 </div> 219 </div> 220 221 <h2 id="make-me-amazing">Make Me Amazing</h2> 222 223 <div class="cols"> 224 <div class="col-7of12"> 225 226 <h4 id="give-me-tricks">Give me tricks that work everywhere</h4> 227 <p>People feel great when they figure things out for themselves. Make your app easier to learn by 228 leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture 229 may be a good navigational shortcut.</p> 230 231 </div> 232 <div class="col-5of12"> 233 234 <img src="{@docRoot}design/media/principles_tricks.png"> 235 236 </div> 237 </div> 238 239 <div class="vspace size-2"> </div> 240 241 <div class="cols"> 242 <div class="col-7of12"> 243 244 <h4 id="its-not-my-fault">It's not my fault</h4> 245 <p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your 246 app. If something goes wrong, give clear recovery instructions but spare them the technical details. 247 If you can fix it behind the scenes, even better.</p> 248 249 </div> 250 <div class="col-5of12"> 251 252 <img src="{@docRoot}design/media/principles_error.png"> 253 254 </div> 255 </div> 256 257 <div class="vspace size-2"> </div> 258 259 <div class="cols"> 260 <div class="col-7of12"> 261 262 <h4 id="sprinkle-encouragement">Sprinkle encouragement</h4> 263 <p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, 264 even if it's just a subtle glow.</p> 265 266 </div> 267 <div class="col-5of12"> 268 269 <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> 270 271 </div> 272 </div> 273 274 <div class="vspace size-2"> </div> 275 276 <div class="cols"> 277 <div class="col-7of12"> 278 279 <h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4> 280 <p>Make novices feel like experts by enabling them to do things they never thought they could. For 281 example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in 282 only a few steps.</p> 283 284 </div> 285 <div class="col-5of12"> 286 287 <img src="{@docRoot}design/media/principles_heavy_lifting.png"> 288 289 </div> 290 </div> 291 292 <div class="vspace size-2"> </div> 293 294 <div class="cols"> 295 <div class="col-7of12"> 296 297 <h4 id="make-important-things-fast">Make important things fast</h4> 298 <p>Not all actions are equal. Decide what's most important in your app and make it easy to find and 299 fast to use, like the shutter button in a camera, or the pause button in a music player.</p> 300 301 </div> 302 <div class="col-5of12"> 303 304 <img src="{@docRoot}design/media/principles_make_important_fast.png"> 305 306 </div> 307 </div> 308
