【Interface&navigation】提供后代和侧向导航(58)


提供对应用程序屏幕的全部范围的访问的一种方式是公开分层导航。在本课中,我们将讨论后代导航,允许用户将屏幕层次结构“下移”到子屏幕和横向导航,允许用户访问兄弟屏幕。
【Interface&navigation】提供后代和侧向导航(58)
图1.后代和横向导航。

有两种类型的兄弟屏幕:与集合相关的屏幕和与部分相关的屏幕。与集合相关的屏幕表示由父项表示的集合中的各个项目。与部分相关的屏幕代表有关父母的不同信息部分。例如,一个部分可以显示关于对象的文本信息,而另一个部分可以提供该对象的地理位置的地图。给定父级的与部分相关的屏幕的数量通常很小。

【Interface&navigation】提供后代和侧向导航(58)
图2.与集合相关的子节点和与节相关的子节点。

可以使用列表,选项卡和其他用户界面模式提供后代和横向导航。用户界面模式与软件设计模式非常相似,是针对重复出现的交互设计问题的通用解决方案。我们将在下面的部分中探讨一些常见的横向导航模式。

按钮和简单的目标


按钮设计

有关设计指南,请阅读Android Design的按钮指南。

对于与部分相关的屏幕,在父母中提供可触摸和可键控焦距的目标通常是最直接和最熟悉的基于触摸的导航界面。这些目标的示例包括按钮,固定大小列表视图或文本链接,尽管后者不是用于基于触摸的导航的理想UI(用户界面)元素。选择其中一个目标后,将打开子屏幕,完全替换当前上下文(屏幕)。按钮和其他简单目标很少用于表示集合中的项目。

【Interface&navigation】提供后代和侧向导航(58)
图3.基于按钮的导航界面示例以及相关的屏幕地图摘录。还显示了下面讨论的仪表板模式。

用于访问不同顶级应用程序部分的基于按钮的通用模式是仪表板模式。甲仪表盘是大的,图形符号的按钮的网格构成整体,或最,父屏幕。网格通常具有2行或3行和列,具体取决于应用程序中顶级部分的数量。这种模式是以视觉丰富的方式呈现应用程序的所有部分的好方法。大触摸目标也使这个UI非常容易使用。当每个部分同样重要时,最好使用仪表板,这取决于产品决策或更好的实际使用情况。但是,这种模式在大屏幕上看起来效果不佳,并且需要用户采取额外步骤直接跳转到应用程序的内容。

更复杂的用户界面可以利用各种其他用户交互模式来改善内容的即时性和呈现的独特性,同时保持直观。

列表,网格,旋转×××和堆栈


列表和网格列表设计

有关设计指南,请阅读Android Design的列表和网格列表指南。
对于与集合相关的屏幕,特别是对于文本信息,垂直滚动列表通常是最简单和熟悉的界面。对于更多视觉或媒体丰富的内容项(例如照片或视频),可以使用垂直滚动的项目网格,水平滚动列表(有时称为轮播)或堆栈(有时称为卡片)。这些UI元素通常最好用于呈现项目集合或大型子屏幕集合(例如,故事列表或10个或更多新闻主题的列表),而不是一小组不相关的兄弟儿童屏幕。
【Interface&navigation】提供后代和侧向导航(58)
图4.带有相关屏幕地图摘录的基于列表,网格和轮播的导航界面示例。

这种模式存在几个问题。深度,基于列表的导航,称为向下钻取列表导航,其中列表导致更多列表导致更多列表,这通常是低效且繁琐的。使用此类导航访问内容所需的触摸次数通常非常高,导致用户体验不佳 - 尤其是对于移动中的用户。

使用垂直列表还可能导致用户交互尴尬,并且在较大的屏幕上使用空格很少,因为列表项通常跨越屏幕的整个宽度但具有固定的高度。缓解这种情况的一种方法是提供填充可用水平空间的附加信息,例如文本摘要。另一种方法是在与列表相邻的单独水平窗格中提供附加信息。

标签


标签设计

有关设计指南,请阅读Android Design的选项卡指南。

使用标签是一种非常流行的横向导航解决方案。该模式允许对兄弟屏幕进行分组,因为父屏幕中的标签内容容器可以嵌入子屏幕,否则这些子屏幕将是完全独立的上下文。选项卡最适合与小组相关的小组(4个或更少)。
【Interface&navigation】提供后代和侧向导航(58)
图5.带有相关屏幕地图摘录的手机和平板电脑基于标签的导航界面示例。

使用制表符时会应用几种最佳做法。标签应该在直接相关的屏幕上保持不变。选择选项卡时,只应更改指定的内容区域,并且选项卡指示器应始终可用。此外,不应将制表符开关视为历史记录。例如,如果用户从选项卡切换阿到另一个标签乙,按下 后退按钮(多个上,在下一课)不应该重新选择标签甲。标签通常是水平布局的,但标签导航的其他演示文稿(例如使用操作栏中的下拉列表(Android设计中的模式文档))有时是合适的。最后,也是最重要的,标签应始终沿着屏幕顶部运行,并且不应与屏幕底部对齐。

与简单的基于列表和按钮的导航相比,选项卡有一些明显的直接好处:

由于只有一个最初选择的选项卡,用户可以从父屏幕立即访问该选项卡的内容。
用户可以在相关屏幕之间快速导航,而无需先重新访问父级。

注意:切换标签时,保持此标签切换的即时性非常重要; 不要通过在加载内容时显示模式对话框来阻止对选项卡指示器的访问。

一个常见的批评是,必须为选项卡指示器保留空间,从而减少选项卡内容的可用空间。这种结果通常是可以接受的,并且权衡通常有利于使用这种模式。您还可以随意自定义选项卡指示器,显示文本和/或图标以充分利用垂直空间。但是,在调整指示器高度时,请确保标签指示器足够大,以便人手指无误地触摸。

水平分页(滑动视图)


滑动视图设计

有关设计指南,请阅读Android Design的滑动视图模式指南。

另一种流行的横向导航模式是水平寻呼,也称为滑动视图。此模式最适用于与集合相关的兄弟屏幕,例如类别列表(世界,商业,技术和健康故事)。与标签一样,此模式还允许对屏幕进行分组,即父级显示嵌入在其自己的布局中的子屏幕的内容。
【Interface&navigation】提供后代和侧向导航(58)
图6.具有相关屏幕地图摘录的水平分页导航界面示例。

在水平分页UI中,一次一个地呈现单个子屏幕(这里称为页面)。用户可以通过在所需的相邻页面的方向上水平触摸和拖动屏幕来导航到兄弟屏幕。该手势交互通常由指示当前页面和可用页面的另一UI元素补充,以帮助发现并向用户提供更多上下文。当使用此模式进行与剖面相关的兄弟屏幕的横向导航时,这种做法尤为必要。此类元素的示例包括刻度线,滚动标签和制表符。
【Interface&navigation】提供后代和侧向导航(58)
图7.示例分页伴随UI元素。

当子屏幕包含水平平移表面(例如地图)时,最好避免这种模式,因为这些相互冲突的交互可能会阻止屏幕的可用性。

另外,对于与兄弟相关的屏幕,水平分页是最合适的,其中内容类型有一些相似性,而兄弟姐妹的数量相对较小。在这些情况下,此模式可与内容区域上方的选项卡一起使用,以最大化界面的直观性。对于与集合相关的屏幕,当屏幕之间存在自然有序关系时,水平分页是最直观的,例如,如果每个页面代表连续的日历日。对于无限集合(再次,日历日),特别是那些内容在两个方向上的集合,这种分页机制可以很好地工作。

在下一课中,我们将讨论允许用户导航我们的信息层次结构并返回以前访问过的屏幕的机制。

联系我

QQ:94297366
微信打赏:https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公众号推荐:

【Interface&navigation】提供后代和侧向导航(58)

猜你喜欢

转载自blog.51cto.com/4789781/2170487