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