diff options
Diffstat (limited to 'docs/html/design/get-started/principles.jd')
| -rw-r--r-- | docs/html/design/get-started/principles.jd | 102 |
1 files changed, 51 insertions, 51 deletions
diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd index 73ec3a6..172a4e4 100644 --- a/docs/html/design/get-started/principles.jd +++ b/docs/html/design/get-started/principles.jd @@ -14,8 +14,8 @@ creativity and design thinking. Deviate with purpose. <h2 id="enchant-me">Enchant Me</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="delight-me">Delight me in surprising ways</h4> <p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to @@ -23,7 +23,7 @@ experience. Subtle effects contribute to a feeling of effortlessness and a sense force is at hand.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_delight.png"> @@ -32,15 +32,15 @@ force is at hand.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4> <p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_real_objects.png"> @@ -49,8 +49,8 @@ needed to perform a task while making it more emotionally satisfying.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="make-it-mine">Let me make it mine</h4> <p>People love to add personal touches because it helps them feel at home and in control. Provide @@ -58,7 +58,7 @@ sensible, beautiful defaults, but also consider fun, optional customizations tha primary tasks.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_make_it_mine.png"> @@ -67,15 +67,15 @@ primary tasks.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="get-to-know-me">Get to know me</h4> <p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_get_to_know_me.png"> @@ -84,14 +84,14 @@ over, place previous choices within easy reach.</p> <h2 id="simplify-my-life">Simplify My Life</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="keep-it-brief">Keep it brief</h4> <p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_keep_it_brief.png"> @@ -100,15 +100,15 @@ over, place previous choices within easy reach.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="pictures-faster-than-words">Pictures are faster than words</h4> <p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_pictures.png"> @@ -117,15 +117,15 @@ than words.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="decide-for-me">Decide for me but let me have the final say</h4> <p>Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_decide_for_me.png"> @@ -134,15 +134,15 @@ unhappy. Just in case you get it wrong, allow for 'undo'.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4> <p>People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_information_when_need_it.png"> @@ -151,15 +151,15 @@ digestible chunks. Hide options that aren't essential at the moment, and teach p <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="always-know-where-i-am">I should always know where I am</h4> <p>Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_navigation.png"> @@ -168,8 +168,8 @@ use transitions to show relationships among screens. Provide feedback on tasks i <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="never-lose-my-stuff">Never lose my stuff</h4> <p>Save what people took time to create and let them access it from anywhere. Remember settings, @@ -177,7 +177,7 @@ personal touches, and creations across phones, tablets, and computers. It makes easiest thing in the world.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_never_lose_stuff.png"> @@ -186,15 +186,15 @@ easiest thing in the world.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4> <p>Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_looks_same.png"> @@ -203,15 +203,15 @@ Avoid modes, which are places that look similar but act differently on the same <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4> <p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_important_interruption.png"> @@ -220,8 +220,8 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax <h2 id="make-me-amazing">Make Me Amazing</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="give-me-tricks">Give me tricks that work everywhere</h4> <p>People feel great when they figure things out for themselves. Make your app easier to learn by @@ -229,7 +229,7 @@ leveraging visual patterns and muscle memory from other Android apps. For exampl may be a good navigational shortcut.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_tricks.png"> @@ -238,8 +238,8 @@ may be a good navigational shortcut.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="its-not-my-fault">It's not my fault</h4> <p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your @@ -247,7 +247,7 @@ app. If something goes wrong, give clear recovery instructions but spare them th If you can fix it behind the scenes, even better.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_error.png"> @@ -256,15 +256,15 @@ If you can fix it behind the scenes, even better.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="sprinkle-encouragement">Sprinkle encouragement</h4> <p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> @@ -273,8 +273,8 @@ even if it's just a subtle glow.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4> <p>Make novices feel like experts by enabling them to do things they never thought they could. For @@ -282,7 +282,7 @@ example, shortcuts that combine multiple photo effects can make amateur photogra only a few steps.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_heavy_lifting.png"> @@ -291,15 +291,15 @@ only a few steps.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4 id="make-important-things-fast">Make important things fast</h4> <p>Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/principles_make_important_fast.png"> |