大部分的iOS应用程序都是使用UIKit中的组件构建的。这让应用程序在整个系统中保持一致的外观，同时具有灵活的自定义。

UIKit提供的界面元素分为三大类：

一、栏（Bars）

告知用户当前所在应用中的位置，提供导航，还有可能包含按钮或其他可以用来触发功能或交流的元素。

二、视图（Views）

包含用户在应用中看到的主要内容，如文本，图形，动画和交互元素。视图支持如滚动、插入、删除和排列等行为。

三、控制（Controls）

用于触发功能及传递信息，像按钮、开关、输入框、进度条等便是极典型的控件。

1. 状态栏（Status Bars）

状态栏出现在屏幕的顶端，显示有关设备当前状态的有用信息，如时间、运营商、网络状态、电池电量等。

状态栏的两种样式

（1）亮的状态栏（Light status bar）

（2）暗的状态栏（Dark status bar）

使用系统提供的状态栏。不要用自定义的状态栏替换它。

将状态栏样式与应用设计进行协调。状态栏的视觉样式可以是亮的或暗的，可以为你的应用程序全局设置，也可以针对不同的界面单独设置。

遮盖状态栏下方的内容。状态栏的背景默认是透明的，这样会显示出状态栏下方的内容。要保证状态栏可读，可通过以下几种技巧来实现：

· 在应用中使用导航栏，它会自动显示状态栏背景并确保内容不会出现在状态栏下。

· 在状态栏下方显示自定义图像，如渐变色或纯色。

· 对状态栏下方的内容进行模糊处理。

考虑在显示全屏媒体时暂时隐藏状态栏。这样可以提供更加身临其境的体验。“照片”应用程序会在用户浏览全屏照片时隐藏状态栏和其他界面元素。

避免永久隐藏状态栏。让用户使用简单的、易于发现的手势重新显示隐藏的状态栏。在“照片”应用程序中浏览全屏照片时，只需轻点一下，即可再次显示状态栏。

使用状态栏来表示网络活动。当你的应用使用网络时，尤其是对于冗长的操作，请显示网络活动状态栏指示器（Network Activity Indicators），以便用户知道活动正在发生。

状态栏的高度变化

正常情况下状态栏的高度是20pt，当开启热点或录音或打电话后高度变为40pt，iPhone X上的状态栏高度为44pt。

2. 导航栏（Navigation Bars）

导航栏出现在屏幕的顶部，位于状态栏的下方，高度44pt，能够在有层级的应用界面间进行导航。

导航栏的构成

（1）返回按钮：位于左侧，通常标有上一个界面的标题；

（2）标题：不必要时可以没有；

（3）操作控件：位于右侧，如编辑或完成按钮，用于管理当前视图中的内容。

在拆分视图中，导航栏可能出现在拆分视图的单个窗格中。

导航栏是半透明的，也可能会有背景色，并且可以在屏幕有键盘时、手势发生时或是视图大小调整时被隐藏。

考虑在显示全屏内容时暂时隐藏导航栏。这样可以提供更加身临其境的体验。并且让用户能用简单的手势恢复导航栏，比如轻点。

提示：当不需要导航或是你需要多个控件来管理当前内容时，请使用工具栏。

导航栏标题

考虑在导航栏中显示当前视图的标题。大多数情况下，标题可以帮助用户了解正在查看的内容。但是如果导航栏的标题看起来多余，则可以将标题留空。

当你需要特别强调上下文，请使用大标题。在标签式布局中，大标题可以帮助区分布局类似的不同标签下的内容，如“音乐”应用程序。大标题不应该与内容竞争，当用户开始滚动内容时，大标题转换为标准标题。尽管“时钟”应用程序具有标签式布局，但大标题是不必要的，因为每个标签下都具有明显可识别的布局。

导航栏控件

避免导航栏拥有太多控件。一般来说，导航栏最多只能包含当前视图的标题、返回按钮以及一个管理当前视图内容的控件。如果导航栏使用了分段控件，该栏就不应再包含标题或其它控件。

使用标准的返回按钮。如果你实现了自定义的返回按钮，请确保它仍然看起来像返回按钮。

不要包含多段面包屑路径。返回按钮总是执行一个动作，即返回到上一个界面。

给文本按钮足够的空间。 如果导航栏包含多个文本按钮，在按钮之间插入固定空间项来添加分隔。

考虑在导航栏中使用分段控件让应用程序的信息层级变得扁平。如果在导航栏中使用分段控件，请仅在最高层级出现，并确保为返回按钮选择了正确的标题。

3. 搜索栏（Search Bars）

用户通过搜索栏在大量的信息中进行查找。高度可以自定义，一般设计为44pt。

搜索栏可以单独显示，也可以在导航栏或内容视图中显示。当显示在导航栏中时，搜索栏可以固定到导航栏，以便始终可以访问，或者可以折叠搜索栏，直到用户向下滑动才显示。

搜索栏的构成

搜索栏包含一个搜索框（含有占位文本和清除按钮），以及在搜索框外用来退出搜索的取消按钮。

让用户通过搜索栏而不是文本框去搜索。

如有必要，请在搜索栏中提供提示和上下文。搜索栏的占位符文本可以提醒正在搜索的上下文，如“搜索服装、鞋子和配件”或简单的“搜索” 。也可以在搜索栏正上方展示一行带有适当标点的简洁文字，比如“股票”应用。

考虑在搜索栏下方提供有用的快捷方式和其他内容。例如，当你在搜索栏中输入时，股票会显示结果列表，无需再输入更多字符，选择一个即可进入。

范围栏（Scope Bars）

范围栏可以添加到搜索栏中，以便人们优化搜索范围。高度可自定义，一般为30pt~44pt。

优化搜索结果而不只是添加范围栏。当用户想在明确的类别中搜索时，范围栏会非常有用。但是更好的做法是优化搜索结果，这样用户就无需通过范围栏进行筛选了。

4. 标签栏（Tab Bars）

标签栏出现在屏幕的底部，高度49pt，提供在应用程序不同部分之间快速切换的功能。

标签栏是半透明的，也可以具有背景色，在横竖屏都保持一致的高度，并且在出现键盘时会被隐藏。

标签栏可以包含任意数量的标签，但可见的标签数量因设备大小和横竖屏模式而异。如果由于水平空间有限而无法显示某些标签，则最后一个可见的标签将变为“更多”标签。

使用标签栏来组织应用程序级别的信息。标签栏使应用的信息扁平化，提供了几个相似重量级的信息类别。

严格使用标签栏进行导航。标签栏按钮不应该用于执行操作。如果需要对当前视图中的元素操作，请使用工具栏。

避免有太多标签。每个额外的标签都会减少单个标签的可点击区域，并增加应用程序的复杂性。一般来说，在iPhone上使用3到5个标签，在iPad上则可稍微多几个。

当其功能不可用时，不要删除或禁用选项卡。确保始终启用所有标签，并解释标签内容不可用的原因。例如，如果iOS设备上没有歌曲，则“音乐”应用程序中的“我的音乐”标签将介绍如何下载歌曲。

始终在与标签栏相关的视图切换内容。选择一个标签应始终影响直接与标签栏相关的视图，而不是屏幕上其他视图。例如，选择分割视图左侧的选项卡不应导致分割视图的右侧突然更改。在弹窗中选择一个选项卡不应该导致弹出窗口后面的视图发生变化。

确保标签栏图标在视觉上一致和平衡。系统为常见用例提供了一系列预定义的图标，也可以创建自己的图标。

使用徽章（Badge）低调地传达信息。你可以在标签上展示徽章（包含白色文字和数字或感叹号的红色椭圆），来暗示该标签视图含有新信息。

iPhone X 安全区域

在iPhone X中，让标签栏在安全区域内，与屏幕底部距离34pt。避免将触发交互行为的按钮放在屏幕的最底部，因为用户会在屏幕底端使用手势进入主屏或切换应用。

5. 工具栏（Toolbars）

工具栏出现在屏幕的底部，包含用于执行与当前视图或内容相关的操作按钮。高度通常设计成44pt。

工具栏是半透明的，也可能具有背景色，并且当用户不太可能需要时通常隐藏。例如，在Safari中滚动页面时，为了防止影响阅读，工具栏会隐藏，可以通过点击屏幕底部使其再次显示。当前屏幕有键盘时，工具栏也会被隐藏。

考虑图标或文字按钮是否适合你的应用程序。当你需要三个以上的工具栏按钮时，图标运行良好。当你有三个或更少的按钮时，文字有时会更清晰。文本的使用还允许按钮显示某些计数。

避免在工具栏中使用分段控件。分段控件允许人们切换上下文，而工具栏是特定于当前屏幕的。如果您需要提供切换上下文的方式，请考虑使用标签栏。

给文本按钮足够的空间。如果工具栏包含多个文本按钮，在按钮之间插入固定空间项来添加分隔。

提示：区分选项卡栏和工具栏。标签栏可让用户在应用的不同部分之间快速切换。工具栏包含用于执行与当前上下文相关的操作的按钮。标签栏和工具栏永远不会同时出现在同一个视图中。