开发者文档

Creating Swipe Views with Tabs

快捷的导航是良好设计的应用的基础。一般情况下,应用的逻辑层次设计是垂直的。横向导航可以扁平化应用的逻辑层次,并且使得导航更加容易。滑动视图使得用户可以通过简单的手势在条目的详细信息间切换,使得读取信息更加顺畅。

详细信息视图的滑动切换

应用的常见结构是列表/详细信息模式: 用户先在一个列表中浏览条目,例如图片,表格或者邮件,之后选择一个项目,在另一个屏幕中查看详细内容。

列表 (左边) 和详细信息 (右边) 视图。

在手机上,由于列表和详细信息处在不同的屏幕中,一般情况下,用户要查看另一个条目时,需要首先回到列表,再进入另一条目的详细信息,这种模式又称为“pogo-sticking”。

当用户想连续查看详细信息时,使用滑动手势在上一页/下一页视图间切换,以避免“pogo-sticking”模式。

通过滑动手势,在 Email 应用中连续浏览不同邮件。如果邮件内容超出了视图范围,用户滑动手势应当先被理解为浏览内容的其他部分,当内容已经达到边界时,继续滑动则会显示下一封邮件。如果直接作出从侧边滑入的手势,则应当理解为切换至下一封邮件。

通过滑动手势,在 Email 应用中连续浏览邮件超出视图的部分,而不是先切换到下一封邮件。

标签的滑动切换

在通讯录应用中使用滑动手势切换不同的顶级屏幕。

点击重放视频。

如果你的应用使用了操作栏标签,那么应当可以通过滑动切换标签。

 

检查清单

  • 使用滑动手势在详细信息视图或者标签之间切换。

  • 过渡效果伴随着用户手势。不要等用户手势执行完才切换视图。

  • 如果你之前使用后退/前进按钮切换视图,现在请使用滑动手势吧。

  • 考虑在详细信息视图中添加一些指示,告诉用户当前的条目处于整个列表的什么位置。

  • 阅读开发者文档 Implementing Lateral Navigation 一节,进一步了解如何设计滑动视图。