1 page.title=Swipe Views 2 @jd:body 3 4 <p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally 5 built in a hierarchical fashion, there are instances where horizontal navigation can flatten 6 vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views 7 allow the user to efficiently move from item to item using a simple gesture and thereby make 8 browsing and consuming data a more fluent experience.</p> 9 <h2 id="detail-views">Swiping Between Detail Views</h2> 10 11 <p>An app's data is often organized in a master/detail relationship: The user can view a list of 12 related data items, such as images, chats, or emails, and then pick one of the items to see the 13 detail contents in a separate screen.</p> 14 15 <img src="{@docRoot}design/media/swipe_views.png"> 16 <div class="figure-caption"> 17 Master (left) and detail (right) views. 18 </div> 19 20 <p>On a phone, since the master and detail are on separate screens, this typically requires the user to 21 jump back and forth between the list and the detail view, aka "pogo-sticking".</p> 22 <p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by 23 using the swipe gesture to navigate to the next/previous detail view.</p> 24 25 <img src="{@docRoot}design/media/swipe_views2.png"> 26 <div class="figure-caption"> 27 Navigating between consecutive Email messages using the swipe gesture. 28 </div> 29 30 <h2 id="between-tabs">Swiping Between Tabs</h2> 31 32 <div class="layout-content-row"> 33 <div class="layout-content-col span-5"> 34 35 <div class="framed-galaxynexus-port-span-5"> 36 <video class="play-on-hover" autoplay> 37 <source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4"> 38 <source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm"> 39 <source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg"> 40 </video> 41 </div> 42 <div class="figure-caption"> 43 People app with swipe gesture navigation between top-level screens. 44 <div class="video-instructions"> </div> 45 </div> 46 47 </div> 48 <div class="layout-content-col span-8"> 49 50 <p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> 51 <div class="vspace size-2"> </div> 52 53 <h2 id="checklist">Checklist</h2> 54 55 <ul> 56 <li> 57 <p>Use swipe to quickly navigate between detail views or tabs.</p> 58 </li> 59 <li> 60 <p>Transition between the views as the user performs the swipe gesture. Do not wait for the 61 gesture to complete and then transition between views.</p> 62 </li> 63 <li> 64 <p>If you used buttons in the past for previous/next navigation, replace them with 65 the swipe gesture.</p> 66 </li> 67 <li> 68 <p>Consider adding contextual information in your detail view that informs the user about the 69 relative list position of the currently visible item.</p> 70 </li> 71 </ul> 72 73 </div> 74 </div> 75
