大部分的iOS應(yīng)用程序都是使用UIKit中的組件構(gòu)建的。這讓應(yīng)用程序在整個(gè)系統(tǒng)中保持一致的外觀，同時(shí)具有靈活的自定義。

UIKit提供的界面元素分為三大類：

一、欄（Bars）

告知用戶當(dāng)前所在應(yīng)用中的位置，提供導(dǎo)航，還有可能包含按鈕或其他可以用來觸發(fā)功能或交流的元素。

二、視圖（Views）

包含用戶在應(yīng)用中看到的主要內(nèi)容，如文本，圖形，動(dòng)畫和交互元素。視圖支持如滾動(dòng)、插入、刪除和排列等行為。

三、控制（Controls）

用于觸發(fā)功能及傳遞信息，像按鈕、開關(guān)、輸入框、進(jìn)度條等便是極典型的控件。

1. 狀態(tài)欄（Status Bars）

狀態(tài)欄出現(xiàn)在屏幕的頂端，顯示有關(guān)設(shè)備當(dāng)前狀態(tài)的有用信息，如時(shí)間、運(yùn)營(yíng)商、網(wǎng)絡(luò)狀態(tài)、電池電量等。

狀態(tài)欄的兩種樣式

（1）亮的狀態(tài)欄（Light status bar）

（2）暗的狀態(tài)欄（Dark status bar）

使用系統(tǒng)提供的狀態(tài)欄。不要用自定義的狀態(tài)欄替換它。

將狀態(tài)欄樣式與應(yīng)用設(shè)計(jì)進(jìn)行協(xié)調(diào)。狀態(tài)欄的視覺樣式可以是亮的或暗的，可以為你的應(yīng)用程序全局設(shè)置，也可以針對(duì)不同的界面單獨(dú)設(shè)置。

遮蓋狀態(tài)欄下方的內(nèi)容。狀態(tài)欄的背景默認(rèn)是透明的，這樣會(huì)顯示出狀態(tài)欄下方的內(nèi)容。要保證狀態(tài)欄可讀，可通過以下幾種技巧來實(shí)現(xiàn)：

·?在應(yīng)用中使用導(dǎo)航欄，它會(huì)自動(dòng)顯示狀態(tài)欄背景并確保內(nèi)容不會(huì)出現(xiàn)在狀態(tài)欄下。

·?在狀態(tài)欄下方顯示自定義圖像，如漸變色或純色。

·?對(duì)狀態(tài)欄下方的內(nèi)容進(jìn)行模糊處理。

考慮在顯示全屏媒體時(shí)暫時(shí)隱藏狀態(tài)欄。這樣可以提供更加身臨其境的體驗(yàn)?！罢掌睉?yīng)用程序會(huì)在用戶瀏覽全屏照片時(shí)隱藏狀態(tài)欄和其他界面元素。

避免永久隱藏狀態(tài)欄。讓用戶使用簡(jiǎn)單的、易于發(fā)現(xiàn)的手勢(shì)重新顯示隱藏的狀態(tài)欄。在“照片”應(yīng)用程序中瀏覽全屏照片時(shí)，只需輕點(diǎn)一下，即可再次顯示狀態(tài)欄。

使用狀態(tài)欄來表示網(wǎng)絡(luò)活動(dòng)。當(dāng)你的應(yīng)用使用網(wǎng)絡(luò)時(shí)，尤其是對(duì)于冗長(zhǎng)的操作，請(qǐng)顯示網(wǎng)絡(luò)活動(dòng)狀態(tài)欄指示器（Network Activity Indicators），以便用戶知道活動(dòng)正在發(fā)生。

狀態(tài)欄的高度變化

正常情況下狀態(tài)欄的高度是20pt，當(dāng)開啟熱點(diǎn)或錄音或打電話后高度變?yōu)?0pt，iPhone X上的狀態(tài)欄高度為44pt。

2. 導(dǎo)航欄（Navigation Bars）

導(dǎo)航欄出現(xiàn)在屏幕的頂部，位于狀態(tài)欄的下方，高度44pt，能夠在有層級(jí)的應(yīng)用界面間進(jìn)行導(dǎo)航。

導(dǎo)航欄的構(gòu)成

（1）返回按鈕：位于左側(cè)，通常標(biāo)有上一個(gè)界面的標(biāo)題；

（2）標(biāo)題：不必要時(shí)可以沒有；

（3）操作控件：位于右側(cè)，如編輯或完成按鈕，用于管理當(dāng)前視圖中的內(nèi)容。

在拆分視圖中，導(dǎo)航欄可能出現(xiàn)在拆分視圖的單個(gè)窗格中。

導(dǎo)航欄是半透明的，也可能會(huì)有背景色，并且可以在屏幕有鍵盤時(shí)、手勢(shì)發(fā)生時(shí)或是視圖大小調(diào)整時(shí)被隱藏。

考慮在顯示全屏內(nèi)容時(shí)暫時(shí)隱藏導(dǎo)航欄。這樣可以提供更加身臨其境的體驗(yàn)。并且讓用戶能用簡(jiǎn)單的手勢(shì)恢復(fù)導(dǎo)航欄，比如輕點(diǎn)。

提示：當(dāng)不需要導(dǎo)航或是你需要多個(gè)控件來管理當(dāng)前內(nèi)容時(shí)，請(qǐng)使用工具欄。

導(dǎo)航欄標(biāo)題

考慮在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題。大多數(shù)情況下，標(biāo)題可以幫助用戶了解正在查看的內(nèi)容。但是如果導(dǎo)航欄的標(biāo)題看起來多余，則可以將標(biāo)題留空。

當(dāng)你需要特別強(qiáng)調(diào)上下文，請(qǐng)使用大標(biāo)題。在標(biāo)簽式布局中，大標(biāo)題可以幫助區(qū)分布局類似的不同標(biāo)簽下的內(nèi)容，如“音樂”應(yīng)用程序。大標(biāo)題不應(yīng)該與內(nèi)容競(jìng)爭(zhēng)，當(dāng)用戶開始滾動(dòng)內(nèi)容時(shí)，大標(biāo)題轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)題。盡管“時(shí)鐘”應(yīng)用程序具有標(biāo)簽式布局，但大標(biāo)題是不必要的，因?yàn)槊總€(gè)標(biāo)簽下都具有明顯可識(shí)別的布局。

導(dǎo)航欄控件

避免導(dǎo)航欄擁有太多控件。一般來說，導(dǎo)航欄最多只能包含當(dāng)前視圖的標(biāo)題、返回按鈕以及一個(gè)管理當(dāng)前視圖內(nèi)容的控件。如果導(dǎo)航欄使用了分段控件，該欄就不應(yīng)再包含標(biāo)題或其它控件。

使用標(biāo)準(zhǔn)的返回按鈕。如果你實(shí)現(xiàn)了自定義的返回按鈕，請(qǐng)確保它仍然看起來像返回按鈕。

不要包含多段面包屑路徑。返回按鈕總是執(zhí)行一個(gè)動(dòng)作，即返回到上一個(gè)界面。

給文本按鈕足夠的空間。?如果導(dǎo)航欄包含多個(gè)文本按鈕，在按鈕之間插入固定空間項(xiàng)來添加分隔。

考慮在導(dǎo)航欄中使用分段控件讓應(yīng)用程序的信息層級(jí)變得扁平。如果在導(dǎo)航欄中使用分段控件，請(qǐng)僅在最高層級(jí)出現(xiàn)，并確保為返回按鈕選擇了正確的標(biāo)題。

3. 搜索欄（Search Bars）

用戶通過搜索欄在大量的信息中進(jìn)行查找。高度可以自定義，一般設(shè)計(jì)為44pt。

搜索欄可以單獨(dú)顯示，也可以在導(dǎo)航欄或內(nèi)容視圖中顯示。當(dāng)顯示在導(dǎo)航欄中時(shí)，搜索欄可以固定到導(dǎo)航欄，以便始終可以訪問，或者可以折疊搜索欄，直到用戶向下滑動(dòng)才顯示。

搜索欄的構(gòu)成

搜索欄包含一個(gè)搜索框（含有占位文本和清除按鈕），以及在搜索框外用來退出搜索的取消按鈕。

讓用戶通過搜索欄而不是文本框去搜索。

如有必要，請(qǐng)?jiān)谒阉鳈谥刑峁┨崾竞蜕舷挛摹?/b>搜索欄的占位符文本可以提醒正在搜索的上下文，如“搜索服裝、鞋子和配件”或簡(jiǎn)單的“搜索” 。也可以在搜索欄正上方展示一行帶有適當(dāng)標(biāo)點(diǎn)的簡(jiǎn)潔文字，比如“股票”應(yīng)用。

考慮在搜索欄下方提供有用的快捷方式和其他內(nèi)容。例如，當(dāng)你在搜索欄中輸入時(shí)，股票會(huì)顯示結(jié)果列表，無需再輸入更多字符，選擇一個(gè)即可進(jìn)入。

范圍欄（Scope Bars）

范圍欄可以添加到搜索欄中，以便人們優(yōu)化搜索范圍。高度可自定義，一般為30pt~44pt。

優(yōu)化搜索結(jié)果而不只是添加范圍欄。當(dāng)用戶想在明確的類別中搜索時(shí)，范圍欄會(huì)非常有用。但是更好的做法是優(yōu)化搜索結(jié)果，這樣用戶就無需通過范圍欄進(jìn)行篩選了。

4. 標(biāo)簽欄（Tab Bars）

標(biāo)簽欄出現(xiàn)在屏幕的底部，高度49pt，提供在應(yīng)用程序不同部分之間快速切換的功能。

標(biāo)簽欄是半透明的，也可以具有背景色，在橫豎屏都保持一致的高度，并且在出現(xiàn)鍵盤時(shí)會(huì)被隱藏。

標(biāo)簽欄可以包含任意數(shù)量的標(biāo)簽，但可見的標(biāo)簽數(shù)量因設(shè)備大小和橫豎屏模式而異。如果由于水平空間有限而無法顯示某些標(biāo)簽，則最后一個(gè)可見的標(biāo)簽將變?yōu)椤案唷睒?biāo)簽。

使用標(biāo)簽欄來組織應(yīng)用程序級(jí)別的信息。標(biāo)簽欄使應(yīng)用的信息扁平化，提供了幾個(gè)相似重量級(jí)的信息類別。

嚴(yán)格使用標(biāo)簽欄進(jìn)行導(dǎo)航。標(biāo)簽欄按鈕不應(yīng)該用于執(zhí)行操作。如果需要對(duì)當(dāng)前視圖中的元素操作，請(qǐng)使用工具欄。

避免有太多標(biāo)簽。每個(gè)額外的標(biāo)簽都會(huì)減少單個(gè)標(biāo)簽的可點(diǎn)擊區(qū)域，并增加應(yīng)用程序的復(fù)雜性。一般來說，在iPhone上使用3到5個(gè)標(biāo)簽，在iPad上則可稍微多幾個(gè)。

當(dāng)其功能不可用時(shí)，不要?jiǎng)h除或禁用選項(xiàng)卡。確保始終啟用所有標(biāo)簽，并解釋標(biāo)簽內(nèi)容不可用的原因。例如，如果iOS設(shè)備上沒有歌曲，則“音樂”應(yīng)用程序中的“我的音樂”標(biāo)簽將介紹如何下載歌曲。

始終在與標(biāo)簽欄相關(guān)的視圖切換內(nèi)容。選擇一個(gè)標(biāo)簽應(yīng)始終影響直接與標(biāo)簽欄相關(guān)的視圖，而不是屏幕上其他視圖。例如，選擇分割視圖左側(cè)的選項(xiàng)卡不應(yīng)導(dǎo)致分割視圖的右側(cè)突然更改。在彈窗中選擇一個(gè)選項(xiàng)卡不應(yīng)該導(dǎo)致彈出窗口后面的視圖發(fā)生變化。

確保標(biāo)簽欄圖標(biāo)在視覺上一致和平衡。系統(tǒng)為常見用例提供了一系列預(yù)定義的圖標(biāo)，也可以創(chuàng)建自己的圖標(biāo)。

使用徽章（Badge）低調(diào)地傳達(dá)信息。你可以在標(biāo)簽上展示徽章（包含白色文字和數(shù)字或感嘆號(hào)的紅色橢圓），來暗示該標(biāo)簽視圖含有新信息。

iPhone X 安全區(qū)域

在iPhone X中，讓標(biāo)簽欄在安全區(qū)域內(nèi)，與屏幕底部距離34pt。避免將觸發(fā)交互行為的按鈕放在屏幕的最底部，因?yàn)橛脩魰?huì)在屏幕底端使用手勢(shì)進(jìn)入主屏或切換應(yīng)用。

5. 工具欄（Toolbars）

工具欄出現(xiàn)在屏幕的底部，包含用于執(zhí)行與當(dāng)前視圖或內(nèi)容相關(guān)的操作按鈕。高度通常設(shè)計(jì)成44pt。

工具欄是半透明的，也可能具有背景色，并且當(dāng)用戶不太可能需要時(shí)通常隱藏。例如，在Safari中滾動(dòng)頁面時(shí)，為了防止影響閱讀，工具欄會(huì)隱藏，可以通過點(diǎn)擊屏幕底部使其再次顯示。當(dāng)前屏幕有鍵盤時(shí)，工具欄也會(huì)被隱藏。

考慮圖標(biāo)或文字按鈕是否適合你的應(yīng)用程序。當(dāng)你需要三個(gè)以上的工具欄按鈕時(shí)，圖標(biāo)運(yùn)行良好。當(dāng)你有三個(gè)或更少的按鈕時(shí)，文字有時(shí)會(huì)更清晰。文本的使用還允許按鈕顯示某些計(jì)數(shù)。

避免在工具欄中使用分段控件。分段控件允許人們切換上下文，而工具欄是特定于當(dāng)前屏幕的。如果您需要提供切換上下文的方式，請(qǐng)考慮使用標(biāo)簽欄。

給文本按鈕足夠的空間。如果工具欄包含多個(gè)文本按鈕，在按鈕之間插入固定空間項(xiàng)來添加分隔。

提示：區(qū)分選項(xiàng)卡欄和工具欄。標(biāo)簽欄可讓用戶在應(yīng)用的不同部分之間快速切換。工具欄包含用于執(zhí)行與當(dāng)前上下文相關(guān)的操作的按鈕。標(biāo)簽欄和工具欄永遠(yuǎn)不會(huì)同時(shí)出現(xiàn)在同一個(gè)視圖中。