(三)高级篇____7、设计高效的导航——提供纵向和横向的导航
目录[隐藏] |
一种提供接入一个应用程序所有屏幕的方法是现实分层导航。这节课我们讨论两种导航方式:一、后代导航,它可以让用户从屏幕层级上"向下"进入一个子屏幕；二、横向导航，它允许用户接入同一级的兄弟屏幕（sibling screens）.
图 1.Descendant and lateral navigation
有两种类型的兄弟屏幕：集合相关(collection-related)和部分相关(section-related)屏幕。集合相关屏幕指的是一个父屏幕集合中每一个独立的项目(individual items)。部分相关屏幕代表的是父屏幕不同部分的信息。例如，一个部分可能显示的是一个事物的文本信息，而别一个提供了这个事物地理位置的地图信息。对于一个给定的父屏幕，其部分相关屏幕的数量一般是很少的。
图 2.集合相关子屏幕与部分相关子屏幕
后代导航与横向导航可能由列表，标签或是其它用户接口模式提供。用户接口模式，很像软件设计模式，是对于交互设计问题的一般性的，通信的解决方案。我们将会在接下来的几个章节中探讨一些通用的横向导航模式。
按键与简单的目标-Buttons and Simple Targets
按键设计
更多的向导信息，请阅读Android按键设计向导。
对于部分相关屏幕，在父屏幕中提供可触摸的和键盘聚焦的目标，通常是最直接和最类似于基于触摸的导航接口。这样的目标范例有：按键，固定大小的列表视图，或是文本链接。虽然最后一个（文本链接）不是一个基于触摸导航的理想UI（用户接口），但也属于部分相关屏幕范例的一种。当选中这些目标中的一个，子屏幕将被开启，完全替代现有的内容（屏幕）。按键和其他这些简单目标几乎不被用来表示集合中的项目。
图 3.基于按键的导航接口和相关的屏幕地图摘要。同时也展示了下文中将讨论的仪表盘设计模式
一个通用的，基于按键的模式，可以用来接入不同的顶层应用的分类(top-level application sections)，即仪表盘模式。一个仪表盘是一个网格状的，大的图标按键，它组成了整个或是大部分的父屏幕。网格通常有两三排和两三列,这主要取决于应用中顶层分类(top-level sections)的数量。这种模式是一个极佳的呈现方法,其使用了一个丰富的视觉方式来展示应用中所有的分类。大的触控目标也让这个UI操作起来非常的方便.仪盘表模式在每一部分几乎同等重要时使用是最佳的,其重要性是由产品决策或是实际的使用所决定的。然而，当这种模式运行在大屏幕上时，其视觉效果并不好，而且要求用户使用额外的步骤来跳转到应用的内容。
更精致的用户接口可以更好的使用更多其它的用户接口模式来提升内容的直接性和展示的唯一性，同时保持直观性。
列表，网格，旋转木马和堆-List,Grids,Caousels,and Stacks
对集合相关的屏幕，尤其是文本信息，垂直滚动列表经常是最直接和最常用的接口类型。对于更多视觉内容或是多媒体内容的项目，如照片或视频，可以使用垂直滚动的网格项目，水平滚动的列表（有时称为旋转木马<carousels>），或堆（有时称为卡片<cards>）作为替代。这些UI元素通常更适合于呈现项目集合或是大的子屏幕集（例如，一个故事列表，或是超过10个新闻主题的列表），而不是小的不相关集或兄弟子屏幕(sibling child screens)。
图 4.基于列表，网格，旋转木马（carousel）的导航接口范例，以及相关的屏幕地图摘要。
这种模式会有以下几个问题。深度，基于列表的导航，也被称作下拉列表导航,在列表中添加列表，将导致过多的列表存在而使用导航很没有效率且变得很笨重。通常情况下，利用这种导航方式，在你找到所需的特定的一条内容之前，你可能要触摸屏幕N次，这将导致很不好的用户体验－尤其是对于那急比较着急的用户。
使用垂直列表也可能导致很糟糕的用户互动和很差劲的屏幕使用率，在大屏幕上，会有很多空白的地方，因为列表里的项通常可以横向拉伸占满整个屏幕，但却只有固定的高度。可以通过提供更多的信息来弥补这个问题，如：文字总结，它可以充满可用的水平空间。别一种方法是，挨着着列表，提供一个独立的水平框，其中添加一些额外的信息。
标签-Tabs
标签设计
关于设计指导原则，请参阅Android设计之标签指导。
在后向导航中，使用标签是一种非常流行的解决方案。这种模式允许把兄弟（sibling）屏幕分组，在父屏幕中，每一个标签容器可以把子屏幕嵌入在其中，否则将会是完全分开的上下文(contexts)。标签最适合于小(4个或更少)的部分相关（section-related）屏幕的组合。
图 5.范例：手机和平板上基于标签导航的接口以及相关地图摘要。
当使用标签时，要使用几个最佳的践方法(best practices)。标签应该在直接相关的屏幕中始终保持一致。当选择一个标签时，应该只有设计好的内容区域发生变化，并且标签指示器应该始终保持有效。此外，标签的转换不应该被当作历史记录储存。例如，如果一个用户从A标签转换到B标签，当按返回键时（更多信息请见下一节课），不应该重新返回到标签A。标签通常是水平放置的，但是，其它的标签导航呈现形式，如在动作栏(Android设计中的图形文件)中的下拉列表，有时也是很适合的。最后，也是最重要的，标签应当使用运行在屏幕的最上方，而不应该在放在屏幕的底部。
相比较于简单的基于列表或是按键的导航方式，使用标签有几个显而易见的直接好处。
- 因为有一个，初始就被选中的标签，所以用户将可以直接接入父屏幕中这个标签的内容。
- 用户可以在几个标签中进行快带的导航，而不需要返回到父屏幕中。
注意：当在转换标签时，保持转换的及时性是很重要的；当加载内容时不要显示对话框而阻止访问选项卡指示器。
一个常见的准则是减少标签内容可用的空间来满足标签指示器的显示。这样的结果通常是被接受的，并且这样的权衡通常也是为了更好的使用这种模式。你也可以自由地更改标签指示器，显示文本和/或图标来优化垂直空间的使用。当调用指示器的高度时，应该确保标签指示器足够大，能够让用户的手指准确无误的点击。
水平分页（滑动视图）
滑动视图设计
更多设计指导准则，请参阅Android设计之滑动视图模式向导。
另一种流行的后代导航模式是水平分页，也称为滑动视图。这种模式在集合相关的兄弟屏幕上使用效果最佳，如一个分类列表（世界，商业，科技，以及健康故事）。和标签一样，这种模式也允许在父屏幕布局中嵌入子屏幕，并为其分组。
图 6.范例：水平分页导航接口以及相关的屏幕地图摘要。
在水平分页UI中，一次只呈现一个单独的子屏幕（这里也称作页面）。用户可以通过触摸或是向想要前往的相临屏幕的方向拖曳来导航到其它兄弟屏幕。这种手势互动经常由其它的UI元素来辅助完成，这些元素可以指示当前的页面以及可用的页面，可以帮助用户发现并提供更多的上下文信息。这个实践方法在为部分相关的兄弟屏幕做后代导航时使用时尤其需要。这种元素的实例包括打勾标记(tick marks)，滚动标签（scroll labels），标签（tabs）。
图 7.分页辅助UI元素示例。
当子屏幕中包含水平平衡曲面（如地图）时，应该避免使用这种模式，因为这些冲突互动可能会影响你的屏幕的使用性。
此外，对于兄弟相关的屏幕，当兄弟屏幕的数量比较小，并且内容的类型上有些相似时，使用水平分页是最合适的。在这种情况下，这个模式可以与标签一起使用，把标签放在内容区域的上部以达到视觉上接口的最大化。对于集合相关的屏幕，当屏幕之间按某种自然顺序关联时使用水平分页模式是最直观的，例如，当每个页面代表的是一个连续的日期。 对于无限集合（同样还是日期），特别是那些两边都有内容的情况下，这种分页机制可以有很好的工作效果。
下一节课，我们将讨论可以允许用户向上（后）导航回之前被访问过的屏幕的机制。
浙公网安备 33010602011771号