Contents Menu Expand Light mode Dark mode Auto light/dark mode
GNOME 人机界面指南
Logo
GNOME 人机界面指南
  • 设计原则
  • 工具与资源
  • 指南
    • 应用命名
    • 应用图标
    • 指针与触摸
    • 键盘
    • UI 图标
    • UI 样式
    • 写作风格
    • 排版
    • 导航
    • 缩放与适应性
    • 可访问性
  • 模式
    • 容器
      • 窗口
      • 标题栏
      • 弹出框
      • 实用窗格
      • 列表框
      • 网格视图
      • 列表与列视图
      • 选择与编辑模式
    • 导航
      • 浏览
      • 视图切换器
      • 选项卡
      • 侧边栏
      • 搜索
    • 控件
      • 按钮
      • 菜单
      • 开关
      • 文本字段
      • 复选框
      • 单选按钮
      • 下拉列表
      • 滑块
      • 微调按钮
      • 叠加控件
    • 反馈
      • 通知
      • 提示
      • 横幅
      • 进度条
      • 进度条
      • 对话框
      • 占位页
      • 工具提示
  • 参考
    • 标准键盘快捷键
    • 调色板
    • 背景
返回顶部
编辑此页

导航#

虽然有些应用只需要一个视图来显示其用户界面,但大多数应用需要分解成一系列视图或窗口。《导航》和《容器》模式涵盖了实现此目的最常用的设计选项。本页提供了一些关于如何将它们组合在一起的通用指导。

基于窗口的导航#

不同的视图可以显示在单个窗口中,使用允许在视图之间移动的设计模式,或者它们可以显示在位于窗口上方的辅助窗口中。选择使用哪种方式取决于

  • 将内容适配到适当大小的容器

  • 遵守通用指南,例如避免堆叠辅助窗口

  • 在某些情况下,遵循约定,例如对于偏好设置和关于窗口

尽管有这些指导原则,但通常最好在现有窗口内显示多个视图,而不是显示新窗口,因为这样可以获得更流畅的体验。这对于应用程序的核心目的的任何内容或功能尤其如此。

简单导航#

许多设计模式支持少量视图的简单导航。

扁平导航#

../_images/flat.svg

最简单的导航设计模式是视图切换器,它允许在单个窗口内拥有少量等效页面。这通常足以满足具有不同类型的信息或控件以显示的应用的需求。

视图切换器具有扁平的导航结构 - 每个页面都具有同等的重要性,可以从其他任何页面打开。

《侧边栏》是另一种扁平导航模式,如果页面过多而无法容纳在视图切换器中,则可以使用它。

这些扁平导航模式可以与其他常见的导航模式结合使用。例如,视图切换器可以用于侧边栏位置,或在辅助窗口中。

分层导航#

../_images/hierarchical.svg

在分层导航中,父视图提供指向多个子视图的链接。父视图可以是图像网格或列表,每个子视图可以是辅助窗口,也可以是与父视图显示在同一窗口中的不同视图。使用浏览在父视图和子视图之间移动。

当希望提供一个显示多个项目的“概述”时,分层导航是合适的,例如照片集合或应用程序设置摘要。

复杂导航#

../_images/combined.svg

上述导航结构类型可以单独使用,这对于相对简单的结构是合适的。但是,对于更复杂的情况,内容类型各异,通常需要将它们组合成更精细的安排。

这里,一种常见的模式是将扁平的顶级导航与下面的分层导航结合起来。这使得可以浏览内容类别。

指南#

  • 确保每个视图中的内容量易于理解:不要塞得太满。

  • 每个视图应该有一个明确的焦点或主题。

  • 不要通过以非标准方式组合多种导航类型来过度复杂化导航。保持简单。

  • 避免深度嵌套的层次结构。通常,层次结构通常只有一级深度。

  • 支持标准的导航键盘快捷键。

下一页
缩放与适应性
上一页
排版
在此页上
  • 导航
    • 基于窗口的导航
    • 简单导航
      • 扁平导航
      • 分层导航
    • 复杂导航
    • 指南