c9506415d5
ce470e17fd4298c1b8aa9a5fd7493bde7a6be840 8874ab0473f4db10e71bf0537c0703db03bac4ee bdd8d0fada73dabbda7f6f174c17317d1e30a79e 6443ca4cd9406ed8e9ba55461d4b2eb677aad17a 5ac5a324b377c8c5f29a3d368ebfdc76b0d02e3e 1edd4ae5c4748bd9d1e64f65dc554790063d59b8 be13fa0b7ac7929e65b1f3e40b2834ed0d9ed7ff 6a681afd38d9881154207436e5e145856e9d2f75 353474c0acdad9b8ffdb86d3d5f32137885dd720 2b1584c1d53cd1070d5157c07158828b4baf8844 Had to revert these because they're not ready to be published. Change-Id: I704cf0df1db9aa159295bdf78e97cef9605addc6
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>
|