最新iOS平台设计规范三｜3大界面要素：栏(Bars)

一、3大界面要素

interface essentials

大多数ios应用都是由ui kit中的组件构建的。ui kit是一种定义通用界面元素的编程框架，这个框架不仅让app在视觉外观上保持一致，同时也为个性化设计留有很大空间。

ui kit提供的界面组件有三类：栏（bars），视图（views），控件（controls）。

栏（bars）：

栏，可以告诉用户在app中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。

视图（views）：

包含用户在app中看到的基本内容，例如：文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。

控件（controls）：

控件，是用于触发操作并传达信息的。例如：按钮、开关、文本框和进度条，都属于典型的控件。

ios的6种栏（bars）：

1. 导航栏（navigation bars）

导航栏出现在页面的顶部，位于状态栏下方，可以给一系列层级页面进行导航。当点击进入新页面时，其导航栏的左侧会出现一个返回按钮，并带有前一页面的标题。

有时，导航栏的右侧也会有一个控件，如“编辑”或“完成”按钮，用于管理活动视图中的内容。在拆分视图中，导航栏可能会显示在拆分视图的单个窗格中。导航栏是半透明的，也可以添加背景色，并且必要时可以设置为隐藏。

某些情况下可暂时隐藏导航栏，以提供更沉浸的体验。例如，当人们查看全屏照片时，“照片”会隐藏导航栏和其他界面元素。如果你的app也用到了这个功能，切记要让用户使用简单的手势（如点按）来恢复导航栏。

1）导航栏标题

在导航栏中显示当前视图的标题。在多数情况下，标题可以帮助人们了解他们在看什么。但是如果添加导航栏显得多余，则可以将标题留为空白。例如，notes的导航栏就没有标题说明文字，因为第一行内容已经有了足够的提示。

当需要特别强调上下文时，请使用大标题。大标题绝对不能与内容竞争，但是在某些应用中，大标题的粗体会帮助人们浏览和搜索时进行快速定位。例如：在选项卡式布局中，大标题有助于说明活动选项卡，并指示用户何时已滚动到顶部。phone 使用这种方法，而music 则使用大标题来区分内容区域。在ios 13及更高版本中，默认情况下，大标题导航栏不包含背景材质或阴影。另外，随着页面滑动，大标题要转换为标准标题。

隐藏大标题导航栏的边框。在ios 13及更高版本中，可以通过删除导航栏的阴影来隐藏导航栏的底部边框（当滑动内容区域时，边框会自动重新出现）。无边框样式在大标题导航栏中效果很好，因为它增强了标题和内容之间的联系感。但是，无边框样式在标准标题导航栏中可能无法很好地起作用，因为该栏的标题和按钮可能难以区分。ipad上的拆分视图是一个例外，更多的是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间的一致性。

2）导航栏控件

避免在导航栏上挤满太多控件。通常，导航栏最多只能包含视图的当前标题，后退按钮以及一个用于管理视图内容的控件。如果在导航栏中使用分段控件，则该栏不应包含标题或分段控件以外的任何控件。

使用标准的返回按钮。标准的返回按钮可以让用户通过信息层次结构来追溯自己的步骤。但是，如果你想使用自定义返回按钮，请确保它样式仍然看起来是返回，且与界面的其余部分匹配。你可以同时提供自定义的蒙版图像，以便系统在转场过渡时使用此蒙版为按钮标题设置动画效果。

不要包括多段面包屑路径。后退按钮始终执行单个操作：返回上一屏幕。如果你认为没有到当前屏幕的完整路径，因此导致用户迷路，那么可以调整app的层次结构，使其更加扁平。

给带有标题的按钮留出足够的空间。如果导航栏包含多个文本按钮，需要通过在按钮之间插入固定的空格项目来增加分隔。以此来避免按钮文本同时显示造成按钮无法区分的问题。

考虑在导航栏中使用分段控件，使app的层次结构更加扁平。如果在导航栏中使用分段控件，务必仅在层次结构的顶层使用。并确保在较低的级别选择准确的返回按钮标题。

2. 搜索栏（search bars）

搜索栏允许人们通过在字段中键入文本来搜索大量值。搜索栏可以单独显示，也可以显示在导航栏或内容视图中。当显示在导航栏中时，可以将搜索栏固定在导航栏中，以便始终可以调用。也可以将其折叠，当用户向上滑动时展开显示。

使用搜索栏而不是仅仅通过“搜索”文字来实现搜索。文字没有用户所期望的标准搜索栏外观。

启用“清空”按钮。大多数搜索栏都包含一个删除关键词内容的“清空”按钮。

适当时启用“取消”按钮。大多数专门的搜索栏，都包含一个立即终止搜索的“取消”按钮。

如有必要，请在搜索栏中提供提示和上下文。搜索栏的字段可以包含占位符文本，例如“搜索服装，鞋子和配饰”或仅“搜索”，以提醒要搜索的上下文。带有适当标点符号的简洁的单行提示也可以直接出现在搜索栏上方，以提供指导。股票使用提示让人们知道他们可以输入公司名称或股票代码。

考虑在搜索栏下方提供有用的快捷方式和其他内容。使用搜索栏下方的区域可帮助人们更快地获取内容。例如，safari会在您点击搜索字段后立即显示您的书签。选择一个即可直接进入，而无需输入任何搜索词。当您在搜索字段中键入时，“股票”会显示结果列表。随时点按一个，而无需再输入任何字符。

可以将搜索栏下添加范围栏，缩小搜索范围。

不鼓励使用范围栏，应当努力改善搜索结果。如果在搜索中有明确定义的类别，则范围栏会很有用。但是，最好是改善搜索结果，因此没有必要进行范围界定。

3. 侧边栏（sidbars）

侧边栏在iphone上使用较少，更多的用在ipad。它提供了应用程序的导航，在侧边栏中选择一项可以使人们导航到特定的内容。例如，“邮件”中的边栏显示所有邮箱的列表。人们可以选择一个邮箱来访问其邮件列表，然后选择要显示在内容窗格中的特定邮件。

在iphone上侧边栏又分为半屏和全屏，手机qq、滴滴打车都从原来都半屏改为了全屏，曹操专车采用的是半屏。

您可以通过使用边栏样式列表并将其放置在拆分视图的主列中来创建边栏。视图相关内容后面会讲。

将正确的外观应用于边栏。要创建侧栏，请使用集合视图列表布局的侧栏外观。

使用边栏在应用程序级别组织信息。补充工具栏是拉平信息层次结构并同时提供对多个对等信息类别或模式的访问的一种好方法。使用侧边栏可快速导航到应用程序的关键部分或文件夹和播放列表之类的*内容集合。

尽可能让用户自定义边栏的内容。由于侧边栏为您的应用程序提供导航，因此可以使用它来提供快捷方式，使用户可以快速访问他们关心的内容。最好由用户决定哪些项目最重要。

不要阻止用户隐藏侧边栏。允许用户隐藏侧边栏以为其内容创造更多空间，并使用内置的边缘滑动手势再次显示侧边栏。避免在默认情况下隐藏边栏。

侧边栏中的标题要保持简洁明了。省略不必要和多余的词。例如，“邮件”使用更简洁的术语（例如“标记”和“草稿”）从每个邮箱的标题中省略了“消息”一词。

不要在侧边栏中显示超过两个层次的层次结构。当数据层次结构深于两个级别时，请在拆分视图界面的补充列中使用列表视图。

4. 状态栏（status bars）

状态栏出现在屏幕的上边缘，并显示有关设备当前状态的有用信息，例如时间，移动电话和电池电量。状态栏中显示的实际信息取决于设备和系统配置。

使用系统提供的状态栏。用户期望状态栏在系统范围内保持一致，所以不要用自定义状态栏替换它。

选择样式相协调的状态栏。状态栏的文本和指示器的视觉样式可以是浅色或深色，可以针对app进行全局设置，也可以针对不同的屏幕单独设置。

深色状态栏的效果在浅色内容至少效果很好，而浅色状态栏的效果在深色内容上效果很好。

隐藏状态栏下的内容。默认情况下，状态栏的背景是透明的，是可以看到背后的内容的。保持状态栏可读，并不意味着其背后的内容是可交互的。有几种常见的技术可以做到这一点：

• 在app中使用导航栏，该导航栏会自动显示状态栏背景，并确保内容不会显示在状态栏背后
• 在状态栏背后显示自定义图像，如渐变色或纯色
• 在状态栏背后放置模糊的视图

显示全屏媒体时，请考虑暂时隐藏状态栏。当用户尝试关注媒体时，状态栏可能会分散注意力。暂时隐藏这些元素以提供更沉浸的体验。例如，当用户浏览全屏照片时，“照片”应用程序将隐藏状态栏和其他界面元素。

避免永久隐藏状态栏。如果没有状态栏，人们必须离开您的应用程序才能检查时间或查看他们是否具有wi-fi连接。人们可以使用简单的可发现手势重新显示隐藏的状态栏。在“照片”应用中浏览全屏照片时，只需轻按一次即可再次显示状态栏。

5. 标签栏（tab bars）

标签栏出现在页面底部，可以在app的不同模块之间快速切换。标签栏是半透明的，也可添加背景颜色。所有页面的标签栏应保持相同的高度，并且在弹出键盘时隐藏。

标签栏可能包含n个标签，但可见标签的数量因设备大小和方向而异。如果由于水平空间有限而无法显示某些标签，则最后一个标签会变为“更多”标签，从而需要在另一个页面上显示的其他标签。

通常，使用标签栏在应用程序级别组织信息。标签栏是拉平信息层次结构并同时提供对多个对等信息类别或模式的访问的一种好方法。

严格使用标签栏进行导航。不要使用标签栏按钮来启用操作。如果需要提供对当前视图中的元素起作用的控件，请改用工具栏。

争取获得正确数量的标签。标签太多会减少每个标签的可点击区域，并增加应用程序的复杂性，这会使人们更难找到信息。选项卡太少也可能是一个问题，因为它会使您的界面显得断开。尽管“更多”选项卡可以显示更多的选项卡，但它需要额外的点击才能显示出来，并且可能会浪费空间。仅包括基本选项卡，并使用信息层次结构所需的最少数量的选项卡。通常，在iphone上使用三到五个标签；如果需要，在ipad上可以接受更多一些。

当人们导航到您应用中的其他区域时，请不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。模态视图例外。因为模态视图为人们提供了一种单独的体验，使他们在完成后便会被解雇，所以这不是应用程序整体导航的一部分。

选项卡功能不可用时，请勿删除或禁用该选项卡。如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。例如，如果ios设备上没有歌曲，则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。

始终在附加视图中切换上下文。为了使您的界面具有可预测性，选择一个选项卡应始终影响直接连接到选项卡栏的视图，而不影响屏幕上其他位置的视图。例如，在拆分视图的左侧选择一个选项卡不应导致拆分视图的右侧突然改变。在弹出窗口中选择选项卡不应导致弹出窗口后面的视图发生变化。

使用标记进行轻微提示。可以在标签上做标记 – 包含白色文本的红色椭圆（即小红点），或者一个数字或一个感叹号，用以提示用户有新信息，并且新信息与该视图或模式是相关联的。

确保标签栏标志符号在视觉上保持一致和平衡。在ios 13及更高版本中，您可以使用sf符号来表示选项卡栏项目。在所有版本的ios中，系统api提供了一系列预设图标。当然你也可以自定义图标。在纵向方向上，标签栏标志符号可以显示在标签标题上方；在横向方向上，字形和标题可以并排出现。根据设备和方向，系统会显示常规或紧凑的标签栏。

6. 工具栏（tool bars）

工具栏出现在页面的底部，其中包含执行与当前视图或内容相关操作的按钮。工具栏是半透明的，也可以添加背景颜色，并在用户不需要它们时应该隐藏起来。

例如：在safari中，当你开始滚动页面时，工具栏会自动隐藏，因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。当弹出键盘时，工具栏也会被隐藏。

tips：了解选项卡栏和工具栏之间的区别很重要，因为两种类型的栏都出现在应用程序屏幕的底部。标签栏可让人们在应用程序的不同部分之间切换，例如“时钟”应用程序中的“警报”，“秒表”和“计时器”选项卡。工具栏包含用于执行与当前上下文有关的动作的按钮，例如创建项目，删除项目，添加注释或拍照。标签栏和工具栏永远不会在同一视图中同时出现。

提供相应的工具栏按钮。工具栏应该是当前页面中有意义并且常用的命令。

思考图标或文本标题按钮哪个更适合。当你需要3个以上的工具栏按钮时，图标的效果更好。如果是3个或3个以下的按钮，文本按钮可以更清晰。但需要考虑给文本标题的按钮足够的空间。

避免在工具栏中使用分段控件。分段控件允许用户切换上下文，而工具栏只对当前页面提供操作。如果你需要切换页面，请考虑使用标签栏。

本文介绍了3大界面要素中的栏(bars)，参考资料apple developer-human interface guidelines。下一篇介绍视图(views)。