編輯導(dǎo)讀：iOS是運(yùn)行于iPhone、iPad和iPod touch設(shè)備上、最常用的移動操作系統(tǒng)之一。作為互聯(lián)網(wǎng)應(yīng)用的開發(fā)者、產(chǎn)品經(jīng)理、體驗(yàn)設(shè)計(jì)師，都應(yīng)當(dāng)理解并熟悉平臺的設(shè)計(jì)規(guī)范。這有利于提高我們的工作效率，保證用戶良好的體驗(yàn)。本文是iOS設(shè)計(jì)規(guī)范系列第3篇，介紹3大界面要素（欄、視圖、控件）中的欄（Bars）。首先讓我們了解一下iOS的3大界面要素。

一、3大界面要素

Interface Essentials

大多數(shù)iOS應(yīng)用都是由UI Kit中的組件構(gòu)建的。UI Kit是一種定義通用界面元素的編程框架，這個框架不僅讓APP在視覺外觀上保持一致，同時(shí)也為個性化設(shè)計(jì)留有很大空間。

UI Kit提供的界面組件有三類：欄（Bars），視圖（Views），控件（Controls）。

欄（Bars）：

欄，可以告訴用戶在APP中當(dāng)前在所在的位置、能提供導(dǎo)航，還可能包含用于觸發(fā)操作和傳遞信息的按鈕或其他元素。包括6種：導(dǎo)航欄、搜索欄、側(cè)邊欄、狀態(tài)欄、標(biāo)簽欄、工具欄。

視圖（Views）：

包含用戶在APP中看到的基本內(nèi)容，例如：文本、圖片、動畫以及交互元素。視圖可以具有滾動、插入、刪除和排列等交互行為。

控件（Controls）：

控件，是用于觸發(fā)操作并傳達(dá)信息的。例如：按鈕、開關(guān)、文本框和進(jìn)度條，都屬于典型的控件。

iOS的6種欄（Bars）：

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

導(dǎo)航欄出現(xiàn)在頁面的頂部，位于狀態(tài)欄下方，可以給一系列層級頁面進(jìn)行導(dǎo)航。當(dāng)點(diǎn)擊進(jìn)入新頁面時(shí)，其導(dǎo)航欄的左側(cè)會出現(xiàn)一個返回按鈕，并帶有前一頁面的標(biāo)題。

有時(shí)，導(dǎo)航欄的右側(cè)也會有一個控件，如“編輯”或“完成”按鈕，用于管理活動視圖中的內(nèi)容。在拆分視圖中，導(dǎo)航欄可能會顯示在拆分視圖的單個窗格中。導(dǎo)航欄是半透明的，也可以添加背景色，并且必要時(shí)可以設(shè)置為隱藏。

某些情況下可暫時(shí)隱藏導(dǎo)航欄，以提供更沉浸的體驗(yàn)。例如，當(dāng)人們查看全屏照片時(shí)，“照片”會隱藏導(dǎo)航欄和其他界面元素。如果你的APP也用到了這個功能，切記要讓用戶使用簡單的手勢（如點(diǎn)按）來恢復(fù)導(dǎo)航欄。

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

在導(dǎo)航欄中顯示當(dāng)前視圖的標(biāo)題。在多數(shù)情況下，標(biāo)題可以幫助人們了解他們在看什么。但是如果添加導(dǎo)航欄顯得多余，則可以將標(biāo)題留為空白。例如，Notes的導(dǎo)航欄就沒有標(biāo)題說明文字，因?yàn)榈谝恍袃?nèi)容已經(jīng)有了足夠的提示。

當(dāng)需要特別強(qiáng)調(diào)上下文時(shí)，請使用大標(biāo)題。大標(biāo)題絕對不能與內(nèi)容競爭，但是在某些應(yīng)用中，大標(biāo)題的粗體會幫助人們?yōu)g覽和搜索時(shí)進(jìn)行快速定位。例如：在選項(xiàng)卡式布局中，大標(biāo)題有助于說明活動選項(xiàng)卡，并指示用戶何時(shí)已滾動到頂部。Phone 使用這種方法，而Music 則使用大標(biāo)題來區(qū)分內(nèi)容區(qū)域。在iOS 13及更高版本中，默認(rèn)情況下，大標(biāo)題導(dǎo)航欄不包含背景材質(zhì)或陰影。另外，隨著頁面滑動，大標(biāo)題要轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)題。

隱藏大標(biāo)題導(dǎo)航欄的邊框。在iOS 13及更高版本中，可以通過刪除導(dǎo)航欄的陰影來隱藏導(dǎo)航欄的底部邊框（當(dāng)滑動內(nèi)容區(qū)域時(shí)，邊框會自動重新出現(xiàn)）。無邊框樣式在大標(biāo)題導(dǎo)航欄中效果很好，因?yàn)樗鰪?qiáng)了標(biāo)題和內(nèi)容之間的聯(lián)系感。但是，無邊框樣式在標(biāo)準(zhǔn)標(biāo)題導(dǎo)航欄中可能無法很好地起作用，因?yàn)樵摍诘臉?biāo)題和按鈕可能難以區(qū)分。iPad上的拆分視圖是一個例外，更多的是通過在這兩種視圖中使用無邊框樣式來保持主視圖和輔助視圖之間的一致性。

2）導(dǎo)航欄控件

避免在導(dǎo)航欄上擠滿太多控件。通常，導(dǎo)航欄最多只能包含視圖的當(dāng)前標(biāo)題，后退按鈕以及一個用于管理視圖內(nèi)容的控件。如果在導(dǎo)航欄中使用分段控件，則該欄不應(yīng)包含標(biāo)題或分段控件以外的任何控件。

使用標(biāo)準(zhǔn)的返回按鈕。標(biāo)準(zhǔn)的返回按鈕可以讓用戶通過信息層次結(jié)構(gòu)來追溯自己的步驟。但是，如果你想使用自定義返回按鈕，請確保它樣式仍然看起來是返回，且與界面的其余部分匹配。你可以同時(shí)提供自定義的蒙版圖像，以便系統(tǒng)在轉(zhuǎn)場過渡時(shí)使用此蒙版為按鈕標(biāo)題設(shè)置動畫效果。

不要包括多段面包屑路徑。后退按鈕始終執(zhí)行單個操作：返回上一屏幕。如果你認(rèn)為沒有到當(dāng)前屏幕的完整路徑，因此導(dǎo)致用戶迷路，那么可以調(diào)整APP的層次結(jié)構(gòu)，使其更加扁平。

給帶有標(biāo)題的按鈕留出足夠的空間。如果導(dǎo)航欄包含多個文本按鈕，需要通過在按鈕之間插入固定的空格項(xiàng)目來增加分隔。以此來避免按鈕文本同時(shí)顯示造成按鈕無法區(qū)分的問題。

考慮在導(dǎo)航欄中使用分段控件，使APP的層次結(jié)構(gòu)更加扁平。如果在導(dǎo)航欄中使用分段控件，務(wù)必僅在層次結(jié)構(gòu)的頂層使用。并確保在較低的級別選擇準(zhǔn)確的返回按鈕標(biāo)題。

2. 搜索欄（Search Bars）

搜索欄允許人們通過在字段中鍵入文本來搜索大量值。搜索欄可以單獨(dú)顯示，也可以顯示在導(dǎo)航欄或內(nèi)容視圖中。當(dāng)顯示在導(dǎo)航欄中時(shí)，可以將搜索欄固定在導(dǎo)航欄中，以便始終可以調(diào)用。也可以將其折疊，當(dāng)用戶向上滑動時(shí)展開顯示。

使用搜索欄而不是僅僅通過“搜索”文字來實(shí)現(xiàn)搜索。文字沒有用戶所期望的標(biāo)準(zhǔn)搜索欄外觀。

啟用“清空”按鈕。大多數(shù)搜索欄都包含一個刪除關(guān)鍵詞內(nèi)容的“清空”按鈕。

適當(dāng)時(shí)啟用“取消”按鈕。大多數(shù)專門的搜索欄，都包含一個立即終止搜索的“取消”按鈕。

如有必要，請?jiān)谒阉鳈谥刑峁┨崾竞蜕舷挛?。搜索欄的字段可以包含占位符文本，例如“搜索服裝，鞋子和配飾”或僅“搜索”，以提醒要搜索的上下文。帶有適當(dāng)標(biāo)點(diǎn)符號的簡潔的單行提示也可以直接出現(xiàn)在搜索欄上方，以提供指導(dǎo)。股票使用提示讓人們知道他們可以輸入公司名稱或股票代碼。

考慮在搜索欄下方提供有用的快捷方式和其他內(nèi)容。使用搜索欄下方的區(qū)域可幫助人們更快地獲取內(nèi)容。例如，Safari會在您點(diǎn)擊搜索字段后立即顯示您的書簽。選擇一個即可直接進(jìn)入，而無需輸入任何搜索詞。當(dāng)您在搜索字段中鍵入時(shí)，“股票”會顯示結(jié)果列表。隨時(shí)點(diǎn)按一個，而無需再輸入任何字符。

可以將搜索欄下添加范圍欄，縮小搜索范圍。

不鼓勵使用范圍欄，應(yīng)當(dāng)努力改善搜索結(jié)果。如果在搜索中有明確定義的類別，則范圍欄會很有用。但是，最好是改善搜索結(jié)果，因此沒有必要進(jìn)行范圍界定。

3. 側(cè)邊欄（Sidbars）

側(cè)邊欄在iPhone上使用較少，更多的用在iPad。它提供了應(yīng)用程序的導(dǎo)航，在側(cè)邊欄中選擇一項(xiàng)可以使人們導(dǎo)航到特定的內(nèi)容。例如，“郵件”中的邊欄顯示所有郵箱的列表。人們可以選擇一個郵箱來訪問其郵件列表，然后選擇要顯示在內(nèi)容窗格中的特定郵件。

在iPhone上側(cè)邊欄又分為半屏和全屏，手機(jī)QQ、滴滴打車都從原來都半屏改為了全屏，曹操專車采用的是半屏。

您可以通過使用邊欄樣式列表并將其放置在拆分視圖的主列中來創(chuàng)建邊欄。視圖相關(guān)內(nèi)容后面會講。

將正確的外觀應(yīng)用于邊欄。要創(chuàng)建側(cè)欄，請使用集合視圖列表布局的側(cè)欄外觀。

使用邊欄在應(yīng)用程序級別組織信息。補(bǔ)充工具欄是拉平信息層次結(jié)構(gòu)并同時(shí)提供對多個對等信息類別或模式的訪問的一種好方法。使用側(cè)邊欄可快速導(dǎo)航到應(yīng)用程序的關(guān)鍵部分或文件夾和播放列表之類的頂級內(nèi)容集合。

盡可能讓用戶自定義邊欄的內(nèi)容。由于側(cè)邊欄為您的應(yīng)用程序提供導(dǎo)航，因此可以使用它來提供快捷方式，使用戶可以快速訪問他們關(guān)心的內(nèi)容。最好由用戶決定哪些項(xiàng)目最重要。

不要阻止用戶隱藏側(cè)邊欄。允許用戶隱藏側(cè)邊欄以為其內(nèi)容創(chuàng)造更多空間，并使用內(nèi)置的邊緣滑動手勢再次顯示側(cè)邊欄。避免在默認(rèn)情況下隱藏邊欄。

側(cè)邊欄中的標(biāo)題要保持簡潔明了。省略不必要和多余的詞。例如，“郵件”使用更簡潔的術(shù)語（例如“標(biāo)記”和“草稿”）從每個郵箱的標(biāo)題中省略了“消息”一詞。

不要在側(cè)邊欄中顯示超過兩個層次的層次結(jié)構(gòu)。當(dāng)數(shù)據(jù)層次結(jié)構(gòu)深于兩個級別時(shí)，請?jiān)诓鸱忠晥D界面的補(bǔ)充列中使用列表視圖。

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

狀態(tài)欄出現(xiàn)在屏幕的上邊緣，并顯示有關(guān)設(shè)備當(dāng)前狀態(tài)的有用信息，例如時(shí)間，移動電話和電池電量。狀態(tài)欄中顯示的實(shí)際信息取決于設(shè)備和系統(tǒng)配置。

使用系統(tǒng)提供的狀態(tài)欄。用戶期望狀態(tài)欄在系統(tǒng)范圍內(nèi)保持一致，所以不要用自定義狀態(tài)欄替換它。

選擇樣式相協(xié)調(diào)的狀態(tài)欄。狀態(tài)欄的文本和指示器的視覺樣式可以是淺色或深色，可以針對APP進(jìn)行全局設(shè)置，也可以針對不同的屏幕單獨(dú)設(shè)置。

深色狀態(tài)欄的效果在淺色內(nèi)容至少效果很好，而淺色狀態(tài)欄的效果在深色內(nèi)容上效果很好。

隱藏狀態(tài)欄下的內(nèi)容。默認(rèn)情況下，狀態(tài)欄的背景是透明的，是可以看到背后的內(nèi)容的。保持狀態(tài)欄可讀，并不意味著其背后的內(nèi)容是可交互的。有幾種常見的技術(shù)可以做到這一點(diǎn)：

• 在APP中使用導(dǎo)航欄，該導(dǎo)航欄會自動顯示狀態(tài)欄背景，并確保內(nèi)容不會顯示在狀態(tài)欄背后
• 在狀態(tài)欄背后顯示自定義圖像，如漸變色或純色
• 在狀態(tài)欄背后放置模糊的視圖

顯示全屏媒體時(shí)，請考慮暫時(shí)隱藏狀態(tài)欄。當(dāng)用戶嘗試關(guān)注媒體時(shí)，狀態(tài)欄可能會分散注意力。暫時(shí)隱藏這些元素以提供更沉浸的體驗(yàn)。例如，當(dāng)用戶瀏覽全屏照片時(shí)，“照片”應(yīng)用程序?qū)㈦[藏狀態(tài)欄和其他界面元素。

避免永久隱藏狀態(tài)欄。如果沒有狀態(tài)欄，人們必須離開您的應(yīng)用程序才能檢查時(shí)間或查看他們是否具有Wi-Fi連接。人們可以使用簡單的可發(fā)現(xiàn)手勢重新顯示隱藏的狀態(tài)欄。在“照片”應(yīng)用中瀏覽全屏照片時(shí)，只需輕按一次即可再次顯示狀態(tài)欄。

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

標(biāo)簽欄出現(xiàn)在頁面底部，可以在APP的不同模塊之間快速切換。標(biāo)簽欄是半透明的，也可添加背景顏色。所有頁面的標(biāo)簽欄應(yīng)保持相同的高度，并且在彈出鍵盤時(shí)隱藏。

標(biāo)簽欄可能包含N個標(biāo)簽，但可見標(biāo)簽的數(shù)量因設(shè)備大小和方向而異。如果由于水平空間有限而無法顯示某些標(biāo)簽，則最后一個標(biāo)簽會變?yōu)椤案唷睒?biāo)簽，從而需要在另一個頁面上顯示的其他標(biāo)簽。

通常，使用標(biāo)簽欄在應(yīng)用程序級別組織信息。標(biāo)簽欄是拉平信息層次結(jié)構(gòu)并同時(shí)提供對多個對等信息類別或模式的訪問的一種好方法。

嚴(yán)格使用標(biāo)簽欄進(jìn)行導(dǎo)航。不要使用標(biāo)簽欄按鈕來啟用操作。如果需要提供對當(dāng)前視圖中的元素起作用的控件，請改用工具欄。

爭取獲得正確數(shù)量的標(biāo)簽。標(biāo)簽太多會減少每個標(biāo)簽的可點(diǎn)擊區(qū)域，并增加應(yīng)用程序的復(fù)雜性，這會使人們更難找到信息。選項(xiàng)卡太少也可能是一個問題，因?yàn)樗鼤鼓慕缑骘@得斷開。盡管“更多”選項(xiàng)卡可以顯示更多的選項(xiàng)卡，但它需要額外的點(diǎn)擊才能顯示出來，并且可能會浪費(fèi)空間。僅包括基本選項(xiàng)卡，并使用信息層次結(jié)構(gòu)所需的最少數(shù)量的選項(xiàng)卡。通常，在iPhone上使用三到五個標(biāo)簽；如果需要，在iPad上可以接受更多一些。

當(dāng)人們導(dǎo)航到您應(yīng)用中的其他區(qū)域時(shí)，請不要隱藏標(biāo)簽欄。標(biāo)簽欄可為您的應(yīng)用啟用全局導(dǎo)航，因此它在任何地方都應(yīng)保持可見。模態(tài)視圖例外。因?yàn)槟B(tài)視圖為人們提供了一種單獨(dú)的體驗(yàn)，使他們在完成后便會被解雇，所以這不是應(yīng)用程序整體導(dǎo)航的一部分。

選項(xiàng)卡功能不可用時(shí)，請勿刪除或禁用該選項(xiàng)卡。如果在某些情況下可以使用標(biāo)簽，但在其他情況下則無法使用，則應(yīng)用程序的界面將變得不穩(wěn)定且不可預(yù)測。確保所有選項(xiàng)卡始終處于啟用狀態(tài)，并說明為什么選項(xiàng)卡內(nèi)容不可用。例如，如果iOS設(shè)備上沒有歌曲，則“音樂”應(yīng)用中的“立即收聽”選項(xiàng)卡將說明如何下載歌曲。

始終在附加視圖中切換上下文。為了使您的界面具有可預(yù)測性，選擇一個選項(xiàng)卡應(yīng)始終影響直接連接到選項(xiàng)卡欄的視圖，而不影響屏幕上其他位置的視圖。例如，在拆分視圖的左側(cè)選擇一個選項(xiàng)卡不應(yīng)導(dǎo)致拆分視圖的右側(cè)突然改變。在彈出窗口中選擇選項(xiàng)卡不應(yīng)導(dǎo)致彈出窗口后面的視圖發(fā)生變化。

使用標(biāo)記進(jìn)行輕微提示?？梢栽跇?biāo)簽上做標(biāo)記 – 包含白色文本的紅色橢圓（即小紅點(diǎn)），或者一個數(shù)字或一個感嘆號，用以提示用戶有新信息，并且新信息與該視圖或模式是相關(guān)聯(lián)的。

確保標(biāo)簽欄標(biāo)志符號在視覺上保持一致和平衡。在iOS 13及更高版本中，您可以使用SF符號來表示選項(xiàng)卡欄項(xiàng)目。在所有版本的iOS中，系統(tǒng)API提供了一系列預(yù)設(shè)圖標(biāo)。當(dāng)然你也可以自定義圖標(biāo)。在縱向方向上，標(biāo)簽欄標(biāo)志符號可以顯示在標(biāo)簽標(biāo)題上方；在橫向方向上，字形和標(biāo)題可以并排出現(xiàn)。根據(jù)設(shè)備和方向，系統(tǒng)會顯示常規(guī)或緊湊的標(biāo)簽欄。

6. 工具欄（Tool Bars）

工具欄出現(xiàn)在頁面的底部，其中包含執(zhí)行與當(dāng)前視圖或內(nèi)容相關(guān)操作的按鈕。工具欄是半透明的，也可以添加背景顏色，并在用戶不需要它們時(shí)應(yīng)該隱藏起來。

例如：在Safari中，當(dāng)你開始滾動頁面時(shí)，工具欄會自動隱藏，因?yàn)槟憧赡苷陂喿x。你還可以點(diǎn)擊屏幕底部讓它再次出現(xiàn)。當(dāng)彈出鍵盤時(shí)，工具欄也會被隱藏。

tips：了解選項(xiàng)卡欄和工具欄之間的區(qū)別很重要，因?yàn)閮煞N類型的欄都出現(xiàn)在應(yīng)用程序屏幕的底部。標(biāo)簽欄可讓人們在應(yīng)用程序的不同部分之間切換，例如“時(shí)鐘”應(yīng)用程序中的“警報(bào)”，“秒表”和“計(jì)時(shí)器”選項(xiàng)卡。工具欄包含用于執(zhí)行與當(dāng)前上下文有關(guān)的動作的按鈕，例如創(chuàng)建項(xiàng)目，刪除項(xiàng)目，添加注釋或拍照。標(biāo)簽欄和工具欄永遠(yuǎn)不會在同一視圖中同時(shí)出現(xiàn)。

提供相應(yīng)的工具欄按鈕。工具欄應(yīng)該是當(dāng)前頁面中有意義并且常用的命令。

思考圖標(biāo)或文本標(biāo)題按鈕哪個更適合。當(dāng)你需要3個以上的工具欄按鈕時(shí)，圖標(biāo)的效果更好。如果是3個或3個以下的按鈕，文本按鈕可以更清晰。但需要考慮給文本標(biāo)題的按鈕足夠的空間。

避免在工具欄中使用分段控件。分段控件允許用戶切換上下文，而工具欄只對當(dāng)前頁面提供操作。如果你需要切換頁面，請考慮使用標(biāo)簽欄。

本文介紹了3大界面要素中的欄(Bars)，參考資料Apple Developer-Human Interface Guidelines。下一篇介紹視圖(Views)。

#專欄作家#

曉吾，微信公眾號：體驗(yàn)主義，人人都是產(chǎn)品經(jīng)理專欄作家。騰訊高級交互設(shè)計(jì)師，前創(chuàng)新工場、新浪微博交互設(shè)計(jì)師。專注社交創(chuàng)新與娛樂產(chǎn)品設(shè)計(jì)。

本文由 @曉吾 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議