一、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)。