75 lines
2.8 KiB
Plaintext
75 lines
2.8 KiB
Plaintext
page.title=Swipe Views
|
|
@jd:body
|
|
|
|
<p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
|
|
built in a hierarchical fashion, there are instances where horizontal navigation can flatten
|
|
vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
|
|
allow the user to efficiently move from item to item using a simple gesture and thereby make
|
|
browsing and consuming data a more fluent experience.</p>
|
|
<h2 id="detail-views">Swiping Between Detail Views</h2>
|
|
|
|
<p>An app's data is often organized in a master/detail relationship: The user can view a list of
|
|
related data items, such as images, chats, or emails, and then pick one of the items to see the
|
|
detail contents in a separate screen.</p>
|
|
|
|
<img src="{@docRoot}design/media/swipe_views.png">
|
|
<div class="figure-caption">
|
|
Master (left) and detail (right) views.
|
|
</div>
|
|
|
|
<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
|
|
jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
|
|
<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
|
|
using the swipe gesture to navigate to the next/previous detail view.</p>
|
|
|
|
<img src="{@docRoot}design/media/swipe_views2.png">
|
|
<div class="figure-caption">
|
|
Navigating between consecutive Email messages using the swipe gesture.
|
|
</div>
|
|
|
|
<h2 id="between-tabs">Swiping Between Tabs</h2>
|
|
|
|
<div class="layout-content-row">
|
|
<div class="layout-content-col span-5">
|
|
|
|
<div class="framed-galaxynexus-port-span-5">
|
|
<video class="play-on-hover" autoplay>
|
|
<source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4">
|
|
<source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm">
|
|
<source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg">
|
|
</video>
|
|
</div>
|
|
<div class="figure-caption">
|
|
People app with swipe gesture navigation between top-level screens.
|
|
<div class="video-instructions"> </div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="layout-content-col span-8">
|
|
|
|
<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
|
|
<div class="vspace size-2"> </div>
|
|
|
|
<h2 id="checklist">Checklist</h2>
|
|
|
|
<ul>
|
|
<li>
|
|
<p>Use swipe to quickly navigate between detail views or tabs.</p>
|
|
</li>
|
|
<li>
|
|
<p>Transition between the views as the user performs the swipe gesture. Do not wait for the
|
|
gesture to complete and then transition between views.</p>
|
|
</li>
|
|
<li>
|
|
<p>If you used buttons in the past for previous/next navigation, replace them with
|
|
the swipe gesture.</p>
|
|
</li>
|
|
<li>
|
|
<p>Consider adding contextual information in your detail view that informs the user about the
|
|
relative list position of the currently visible item.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|