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

编辑指南:iOS是运行在iPhone、iPad和iPod touch设备上最常用的移动操作系统之一。作为互联网应用的开发者、产品经理和经验设计师，应该了解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证良好的用户体验。本文是iOS设计规范系列的第三篇文章，介绍了三个主要界面元素中的列。首先，我们来看看iOS的三大界面元素。

1.导航栏

导航栏出现在页面的顶部，状态栏的下方，可以浏览一系列分层页面。当您单击进入新页面时，导航栏左侧会出现一个后退按钮，标题为上一页。

有时，导航栏右侧还有一个控件，如“编辑”或“完成”按钮，用于管理活动视图中的内容。在拆分视图中，导航栏可能出现在拆分视图的单个窗格中。导航栏是半透明的，如果需要可以添加和隐藏背景色。

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

1)导航栏标题

在导航栏中显示当前视图的标题。在大多数情况下，标题可以帮助人们理解他们在看什么。但是，如果添加导航栏是多余的，您可以将标题保留为空白色。例如，Notes的导航栏没有标题文本，因为第一行有足够的提示。

当你需要强调上下文时，使用标题。标题无法与内容竞争，但在某些应用程序中，标题的粗糙程度可以帮助人们在浏览和搜索时快速定位。例如，在选项卡式布局中，标题有助于解释活动选项卡，并指示用户何时滚动到顶部。Phone使用这种方法，而Music使用标题来区分内容区域。在iOS 13及更高版本中，默认情况下，标题导航栏不包含背景材料或阴影。此外，当页面滑动时，标题应转换为标准标题。

隐藏标题导航栏的边框。在iOS 13及更高版本中，您可以通过移除导航栏的阴影来隐藏导航栏的下边框。无边框样式在标题导航栏中效果很好，因为它增强了标题和内容之间的联系。但是，无边框样式在标准标题导航栏中可能不太好用，因为栏的标题和按钮可能很难区分。iPad上的拆分视图是个例外，主视图和辅助视图在这两个视图中使用了无边框样式，更加一致。

2)导航栏控制

避免导航栏中包含太多控件。通常，导航栏只能包含视图的当前标题、后退按钮和用于管理视图内容的控件。如果在导航栏中使用分段控件，则除了标题或分段控件之外，该栏不应包含任何其他控件。

使用标准后退按钮。标准的后退按钮允许用户在信息层次结构中追踪他们的步骤。但是，如果您想使用自定义后退按钮，请确保它的样式仍然向后看，并与界面的其余部分相匹配。您还可以提供自定义蒙版图像，以便系统可以在过渡过程中使用该蒙版制作按钮标题的动画。

不要包含多个面包屑路径。后退按钮总是执行一个操作:返回到上一个屏幕。如果你认为没有到当前屏幕的完整路径，从而导致用户迷失，你可以调整APP的层次结构，使其更平坦。

为带有标题的按钮留出足够的空空间。如果导航栏包含多个文本按钮，则需要通过在按钮之间插入固定的空网格项目来增加间距。因此，可以避免由于按钮文本的同时显示而不能区分按钮的问题。

考虑在导航栏中使用分段控制，使APP的层次更加平坦。如果使用导航栏中的分段控件，请确保仅在层次结构的顶层使用它。并确保在较低的级别选择确切的后退按钮标题。

2.搜索栏

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

使用搜索栏，而不仅仅是“搜索”单词。文本没有用户期望的标准搜索栏外观。

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

根据需要启用“取消”按钮。大多数特殊搜索字段包含“取消”按钮，可立即终止搜索。

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

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

您可以在搜索栏下添加一个范围栏来缩小搜索范围。

不鼓励使用范围栏，应该努力改进搜索结果。如果搜索中有明确定义的类别，范围栏会很有用。不过，最好是提高搜索结果，所以不需要定义范围。

3.补充报道

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

在iPhone上，侧边栏分为半屏和全屏。手机QQ和滴滴打车都是由半屏改为全屏，而曹操专车采用半屏。

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

将正确的外观应用到边栏。若要创建边栏，请使用收藏视图列表布局的边栏外观。

使用边栏在应用程序级别组织信息。补充工具栏是一种很好的方法，可以对信息进行分级，并同时提供对多个对等信息类别或模式的访问。使用边栏快速导航到应用程序的关键部分或顶级内容集合，如文件夹和播放列表。

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

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

保持边栏中的标题简单明了。省略不必要和多余的词。例如，“邮件”以更简单的术语从每个邮箱的标题中省略了“消息”一词。

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

4.状态栏

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

使用系统提供的状态栏。用户希望状态栏在整个系统中是一致的，所以不要用自定义的状态栏替换它。

选择具有协调样式的状态栏。状态栏中文本和指示器的视觉样式可以是亮的也可以是暗的，可以为APP全局设置，也可以为不同屏幕独立设置。

深色状态栏的效果至少在浅色内容中非常好，而浅色状态栏的效果在深色内容中非常好。

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

使用APP中的导航栏，它会自动显示状态栏的背景，并确保内容不会显示在状态栏后面

在状态栏后面显示自定义图像，如渐变或纯色

在状态栏后面放置一个模糊视图

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

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

5.标签栏

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

标签栏可能包含n个标签，但可视标签的数量因设备的大小和方向而异。如果某些选项卡由于水平空有限而无法显示，最后一个选项卡将更改为“更多”选项卡，这要求其他选项卡显示在另一页上。

通常，您使用选项卡在应用程序级别组织信息。标签栏是一种很好的方法，可以将信息分层，同时提供对多个对等信息类别或模式的访问。

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

争取获得正确数量的标签。标签太多会减少每个标签的