1page.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 5built in a hierarchical fashion, there are instances where horizontal navigation can flatten 6vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views 7allow the user to efficiently move from item to item using a simple gesture and thereby make 8browsing 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 12related data items, such as images, chats, or emails, and then pick one of the items to see the 13detail 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 21jump 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 23using 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
