精简版 | iOS人机交互指南——各种bar(导航栏、搜索栏、工具栏等)

导航栏

  1. 考虑在当前页面的导航栏上现实标题
  2. 考虑在导航栏上现实分段控制。Segmented Controls
  3. 避免在导航栏上挤太多控件。
  4. 不要提供应用路径。
  5. 给文字标题足够空间,可以参考UIBarButtonSystemItemFixedSpace
  6. 当展示全屏内容时,考虑暂时隐藏导航栏。
  7. 使用标准的的返回按钮。
  8. 更多实现细节可参考UINavigationBar

搜索栏

有两种样式。搜索栏可以自动隐藏在导航栏后面。

  • 使用导航栏而不是输入栏来实现搜索功能。
  • 提供清空和取消按钮。
  • 选择合适的搜索栏样式,如果搜索功能是应用的主要功能,使用标准样式。如果搜索不经常用使用minimal样式。
  • 如果有必要的话,在搜索栏上提供提示和内容。
    精简版 | iOS人机交互指南——各种bar(导航栏、搜索栏、工具栏等)_第1张图片
  • 考虑在搜索上提供自动搜索结果。
  • 更多实现细节可参考UISearchController和UISearchBar。
  • 可以在搜索栏下增加Scope Bar对结果进行筛选。

状态栏

来自Apple官网
  • 使用系统提供的状态栏。
  • 根据自己的设计选择状态栏的样式。
  • 遮挡导航栏下的内容。
    • 使用导航时会自动显示状态栏,内容不会出现在状态栏下。
    • 显示图片的话,使用半透明或实色的导航栏。
    • 为导航栏后的内容提供模糊。
  • 在显示全屏内容时,考虑隐藏状态栏。
  • 避免永久的隐藏状态栏。
  • 在状态栏上显示网络状态。可参考Network Activity Indicatiors
  • 更多实现细节可以参考UIApplication中的UIStatusBarStyle和UIViewController中的preferredStatusBarStyle

Tab Bar

精简版 | iOS人机交互指南——各种bar(导航栏、搜索栏、工具栏等)_第2张图片
来自Apple官网
  • 一般来说,使用tab bar来组织内容。
  • 当功能不能使用时,不要移除或禁止对应的tab
  • 严格使用tab bar作为导航。如果你需要提供操作的话,使用toolbar。可参考Toolbars
  • 避免有太多的tab。
  • 通过tab上的角标来显示新的消息。
  • 确保内容与当前tab对应。
  • 更多实现细节可参考UITabBar

Tool Bar

精简版 | iOS人机交互指南——各种bar(导航栏、搜索栏、工具栏等)_第3张图片
来自Apple官网
  • 提供相关的、经常使用的toolbar按钮。
  • 考虑下使用图标还是文字按钮。
  • 避免在toolbar上使用分段控件。
  • 为文字按钮提供足够的空间。可参考UIBarButtonSystemItemFixedSpace
  • 更多实现细节可参考UIToolBar

你可能感兴趣的:(精简版 | iOS人机交互指南——各种bar(导航栏、搜索栏、工具栏等))