欄

欄

狀態(tài)欄

狀態(tài)欄展示了關于設備及其周圍環(huán)境的重要信息。

默認(深色)內容

淺色

狀態(tài)欄：

• 是透明的
• 始終固定在整個屏幕的上邊緣

API 注釋

你可以將全應用的狀態(tài)欄風格設計成統(tǒng)一的，或者給不同的視圖控制器定義不同的狀態(tài)欄風格。想要了解更多內容，你可以通過 UIApplication Class Reference 來了解 UIStatusBarStyle 常數(shù)，以及通過 UIViewController Class Reference 來了解更多關于 preferredStatusBarStyle 屬性的內容。

不要創(chuàng)建自定義狀態(tài)欄。用戶依賴系統(tǒng)默認狀態(tài)欄的一致性。就算你可能會在應用中隱藏它，也不宜定制一個新的 UI 來代替原有系統(tǒng)狀態(tài)欄。

避免滾動內容直接透過狀態(tài)欄顯示。你不會希望用戶在滾動的時候看到五花八門的內容和狀態(tài)欄自身的元素混合在一起。想要讓用戶感受到內容區(qū)域夠大的同時，最大限度地保證可讀性，請保證在狀態(tài)欄后面添加一塊背景，用以模糊出現(xiàn)在狀態(tài)欄后的內容。以下有一些方法可以讓滾動的內容能正常顯示在狀態(tài)欄后面：

• 使用導航控制器(navigation controller)來展示內容。導航控制器自動展示狀態(tài)欄背景，同時能確保內容視圖不會出現(xiàn)在狀態(tài)欄后面。（了解更多請參考 Navigation Controllers）。
• 在狀態(tài)欄后面放一個低調的、不會搶走用戶注意力的自定義圖形——比如一道漸變。想要保證這樣的圖形始終固定在狀態(tài)欄后面，你可以用視圖控制器(view controller)來讓它固定在滾動內容上一層，又或者可以用滾動視圖(scrolling view)來保證圖形固定在屏幕的頂部。
• 讓內容固定在導航欄區(qū)域外顯示（這個區(qū)域由應用的 statusBarFrame 屬性來定義）。如果你確定要這樣做的話，請給導航欄區(qū)域添加固定的、與屏幕背景色相同的背景色。 千萬千萬，避免在狀態(tài)欄后面疊加會分散注意力的內容。尤其是，你不能讓用戶覺得輕擊狀態(tài)欄之后可以獲取內容或激活你的應用中的控件。

隱藏狀態(tài)欄時請慎重。由于狀態(tài)欄是透明的，通常情況下不需要隱藏它。始終隱藏狀態(tài)欄意味著用戶必須退出你的應用才能知道現(xiàn)在的時間，或者了解當前環(huán)境下是否有 Wi-Fi 連接。

在用戶全屏觀看媒體時，考慮隱藏狀態(tài)欄以及所有頁面 UI。當你這么做的時候，請確保用戶在輕擊屏幕時即可重新喚起狀態(tài)欄以及相關的 UI。而除非你有充分的理由，否則最好不要重新定義一個手勢來讓用戶喚起狀態(tài)欄，因為用戶不會發(fā)現(xiàn)，就算發(fā)現(xiàn)了也難以記住。

為你的應用選擇配色協(xié)調的狀態(tài)欄顏色。默認的狀態(tài)欄內容是黑色的，在淺色應用中效果出色，而相應的淺色狀態(tài)欄則更適用于顏色較深的應用。

在適當?shù)臅r候展示網絡活動指示器(network activity indicator)。這可以提醒用戶顯示長時間的網絡接入狀態(tài)。更多詳情請參考本章第三節(jié)控件部分的網絡活動指示器部分(Network Activity Indicator)。

導航欄

導航欄能夠實現(xiàn)在應用不同信息層級結構間的導航，有時候也可用于管理當前屏幕內容。

導航欄：

• 是半透明的
• 通常位于屏幕的上方，狀態(tài)欄正下方。在橫屏視圖中，導航欄也可以包含在某一視圖中，不需要與整個屏幕等寬，比如說它可以出現(xiàn)在對分視圖控制器(split view controller)的其中一側。
• 當鍵盤被喚起、用戶使用了手勢、或者當前視圖變?yōu)樨Q屏的情況下，導航欄可以隱藏。
• 可以填充顏色(使用 tintColor 來定義導航欄中的圖標與文字顏色；使用 barTintColor 來填充導航欄背景色)

API 注釋

導航欄包含于導航控制器（一個管理顯示自定義視圖層級結構的程序對象）中。想要了解更多關于如何在代碼中定義一個導航欄的信息，請參閱 Navigation Controllers, UINavigationController Class Reference 和 UINavigationBar Class Reference.

你可以用導航欄在不同視圖間提供導航，或在上面放置管理當前視圖內容的相關控件。如果你需要提供導航欄難以承載的大量控件同時又不是非要提供導航不可，你可以考慮使用工具欄(Toolbar)。

當用戶到達一個新的層級，導航欄需要做出這樣的改變：

• 導航欄標題應該變成當前層級的標題。
• 當前標題左側放置應有返回按鈕，需要的話，返回按鈕可以以前一層級的標題命名。 使用當前視圖的標題作為導航欄標題。若覺得標題冗余，你也可以將標題留空。舉個例子，備忘錄的導航欄中就沒有當前備忘錄的標題，因為備忘錄的第一行就已經提供了所有用戶需要的內容。

考慮在應用最高層級的導航欄中放置一個分段控件。它能夠幫助你更好地扁平信息層級，也會讓用戶更容易找到所需內容。如果在導航欄中使用了分段控件，請確保返回按鈕標題命名的準確。（更多使用指引請參閱本章第三節(jié)中的分段控件。）

如果需要的話，可以考慮在導航欄位置使用提示語(prompt)來告訴用戶在當前屏幕中他們可以做什么。提示語是一句出現(xiàn)在導航欄頂部的短句。舉個例子，股票應用(Storcks)中就給用戶提供了這么一句提示，來確保用戶知道怎么去搜索自己想要的信息。

如果你需要用到提示語，請設計一句簡明扼要的單句，并在句末配以適當?shù)臉它c符號。

即使空間充足，也應當避免讓過多的控件填滿你的導航欄。一般來說，導航欄上應該不多于以下三個元素：當前視圖的標題、返回按鈕和一個針對當前的操作控件。而當你在導航欄中使用了分段控件，就不要再放標題以及其它多余控件了。

確保文字按鈕之間擁有足夠的空間。如果導航欄左邊或右邊的文字按鈕之間的間距太小，那些文字看起來會像擠在一起一樣，讓用戶難以區(qū)分。如果按鈕在導航欄中顯得太過擁擠，你可以使用 UIBarButtonSystemItemFixedSpace 常數(shù)來給他們增加適當?shù)拈g距。（想要了解更多關于這個常數(shù)的內容，請參考 UIBarButtonItem Class Reference.）

確保你自定義的導航欄在你的應用的每個視圖中都擁有一致的外觀與體驗。舉個例子，不要在同一個應用中使用不透明導航欄和半透明工具欄。在屏幕處于同一方向時，最好不要改變不同屏上導航欄的背景圖片、顏色和透明度。

確保你自定義的返回按鈕的外觀與操作仍然像一個返回按鈕。用戶知道系統(tǒng)默認的返回按鈕能幫助他們在信息層級中追蹤自己的路徑，如果你想重新設計它，請確保使用一個自定義的蒙版圖層 (custom mask image)，它可以在 iOS 中讓這些按鈕標題在系統(tǒng)各轉場中出現(xiàn)或者消失。

重要

不要創(chuàng)建多段式(multisegment)返回按鈕。返回按鈕通常是用來幫助用戶回到當前層級的父層級中去的。如果你擔心用戶在沒有了這種多節(jié)式的、如同面包屑一般的返回按鈕后會迷路，那么你也許該好好考慮如何扁平你的信息層級了。

在用戶需要專注于內容的時候，可以考慮隱藏導航欄。當你這么做的時候，請確保用戶通過一個簡單的手勢（比如一下輕擊）即可重新喚起導航欄。

工具欄

工具欄上放置著用于操作當前屏幕中各對象的控件。

工具欄：

• 是半透明的
• 在 iPhone 上，工具欄始終位于屏幕底部，而在 iPad 上則有可能出現(xiàn)在頂部
• 當鍵盤被喚起、用戶使用了手勢、或者當前視圖變?yōu)樨Q屏的情況下，工具欄可以隱藏。 API 注釋

工具欄包含在導航控制器(navigation controller)中，該控制器用于管理定制視圖中信息層級的展示形式。 想要了解如何在代碼中定義工具欄，請參考 Displaying a Navigation Toolbar 以及 UIToolbar Class Reference.

你可以在工具欄里提供一系列讓用戶對當前視圖內容進行操作的工具。

在工具欄里放置用戶在當前情景下最常用的指令。盡量避免在工具欄里提供一些僅會偶爾用到的指令。

可以在工具欄里放置分段控件以方便用戶快速切換當前內容的不同視圖或模式。在工具欄中提供應用全局的任務或者模式分段控件是不恰當?shù)?，因為工具欄中的所有操作都應當是針對當前屏幕和視圖的。如果你需要讓用戶可以快速喚起應用全局的任務、或改變全局視圖和模式，可以使用標簽欄(Tab Bar)。想要了解更多分段控件的內容，請參考下文的分段控件(Segmented Control)部分；想要了解更多標簽欄的內容，請參考下文中的標簽欄(Tab Bar)部分。

如果需要在工具欄上展示3個以上的項目，可以使用圖標。由于文本按鈕通常會比圖標更占空間，所以用圖標可以避免文字標題們擠在一起。

保證工具欄文字按鈕之間有足夠的間距。如果按鈕之間間距過小，會讓蚊子看起來擠在一起，讓用戶覺得它們難以區(qū)分。如果按鈕在導航欄中顯得太過擁擠，可以用 UIBarButtonSystemItemFixedSpace 常數(shù)來增加他們之間的間距。（想要了解更多關于這個常數(shù)的內容，請參考 UIBarButtonItem Class Reference.）

工具欄與導航標準按鈕

iOS 提供了一系列工具欄與導航欄上的內置標準按鈕。想要了解如何設計自定義圖標，請參考本文第五章欄按鈕圖標(Bar Button Icons)部分。工具欄和導航欄圖標的顏色可以通過 tintColor 屬性來設定。

想要了解每一個按鈕所對應的標志名稱及其含義，請參閱 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem 部分。

重要

跟所有標準按鈕和圖標相同，應當根據文檔中說明的圖標含義，而不是只憑圖標外觀來使用這些工具欄圖標和導航欄圖標。這樣能夠保證在關聯(lián)特定意義的按鈕改變了外觀的情況下，你的應用中的 UI 仍然是可用而有意義的。

表格 41-1 工具欄與導航欄標準按鈕 (Standard buttons available for toolbars and navigation bars)

除了表格41-1里展示的標準按鈕之外，你還可以使用系統(tǒng)提供的編輯、取消、保存、完成、撤銷、重做等等按鈕來支持編輯或其它操作。這些按鈕的標題即是按鈕的操作內容。想要了解每一個按鈕的名稱及其含義，請參閱 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem. 另外，你還可以在工具欄中放置系統(tǒng)提供的信息按鈕(info button).

標簽欄

標簽欄讓用戶在不同的子任務、視圖和模式中進行切換。

API 注釋

標簽欄包含在標簽欄控制器中，該控制器用于管理自定義視圖的展示形式。想要了解如何在代碼中定義標簽欄，請參考 Tab Bar Controllers 和 UITabBar.

標簽欄位于屏幕底部，并應該保證在應用內任何位置都可用。標簽欄是半透明的，展示圖標和文字內容，每一項均保持等寬。當用戶選中某個標簽時，該標簽呈現(xiàn)適當?shù)母吡翣顟B(tài)。

標簽欄：

• 是半透明的
• 始終出現(xiàn)在屏幕的底部
• 一個標簽欄一次最多可承載5個標簽（多于5個標簽的時候，可以展示前4個標簽和一個“更多”，并將其他的標簽以列表形式收納到“更多”里面）
• 在橫屏與豎屏情況下，高度均保持一致
• 你可以在標簽上加上紅底白字，顯示數(shù)字或者省略號的小氣泡(badge)以展示特定的應用信息 你可以使用標簽欄來切換對同一組數(shù)據的不同視圖模式，或者整體功能下不同的子任務。

一般而言，使用標簽欄來組織整個應用層面的信息結構。標簽欄非常適合用于應用的主界面中，因為它可以很好地扁平信息層級，并且同時提供多個觸達同級信息類目與模式的入口。

不要使用標簽來讓用戶執(zhí)行對于當前應用與屏幕內容的操作。如果你需要給用戶提供操作控件，請使用工具欄。

即使標簽當前不可用，也不要把它從標簽欄中刪除。讓某些標簽時而出現(xiàn)時而隱藏，會讓用戶覺得你的應用 UI 不穩(wěn)定而且難以預測。最好的解決方式是確保每個標簽都可用，然后給用戶解釋某個標簽的內容不可用的原因。舉個例子，當用戶沒有在設備中保存任何歌曲，在系統(tǒng)音樂應用的歌曲標簽頁里就可以教育用戶如何去下載一首歌。

考慮在 tab 上加入紅色的小氣泡(Badge)以低調地傳達信息。你可以通過添加小氣泡來告知用戶該標簽中包含新的內容。

根據控件的標準含義來選擇系統(tǒng)提供的圖標。詳情請查看下文中的標簽欄標準圖標(Tab Bar Icons)。如果想自定義標簽欄圖標，請參考文檔第五章中 Bar Buttons Icons 里給出的建議。

在橫屏視圖中，你可能會在對分視圖(split view pane)或者浮出層(popover)內使用標簽欄以切換或篩選視圖中的內容。如果這些標簽是用于切換或者過濾當前視圖中的內容的話，你可以這么做。然而通常情況下，在對分視圖和浮出層底部使用分段控件效果會更好，因為視覺上看起來更為協(xié)調。更多詳情請參考文檔本章第三節(jié)中的分段控件。

避免讓過多的標簽填滿你的標簽欄。放置太多標簽會讓用戶難以選中他想要點擊的那一個。而同時每添加一個標簽，意味著你的應用程序又復雜了一分。

盡可能地在橫屏與豎屏情況下都展示相同數(shù)量的標簽。在不同的屏幕方向下提供同樣的標簽可以讓用戶對應用建立很好的視覺穩(wěn)定感。在橫屏中，你應該將與豎屏時數(shù)量相同的標簽居中展示。在橫屏中，避免使用“更多”標簽。如果應用是橫屏的，那么把額外的操作都塞到一個“更多”里面是對空間一種糟糕的浪費。

標簽欄標準圖標

iOS 提供了一系列標簽欄標準圖標，在下面的表格35-2中有詳細展示。想要了解如何設計自定義圖標，請參考文檔第五章欄標準按鈕部分。標簽欄圖標的顏色可以通過 tintColor 屬性來設定。

想要了解每一個圖標的名稱及其含義，請參閱 UIBarItem Class Reference 中的 UITabBarSystemItem 部分。

重要

跟所有的標準按鈕與圖表相同，根據文檔說明的圖表含義而不是僅憑圖表外觀來使用這些圖標是很關鍵的。這樣能夠保證在關聯(lián)特定含義的按鈕改變了外觀的情況下，你的應用中的 UI 仍然是可用而有意義的。

表格 41-2 標簽欄標準按鈕 (Standard icons for use in the tabs of a tab bar)

搜索欄

搜索欄獲取用戶鍵入的文本，用以作為搜索的關鍵字(下圖中顯示的文本為占位符，非用戶輸入文本)。

API 注釋

想要了解如何在代碼中定義搜索欄，請參考 UISearchBar.想要了解更多如何顯示搜索欄，請參考 UISearchDisplayController.

搜索欄可能包含以下這些可選元素：

• 占位符文本(Placeholder text)。占位符文本通常會寫明控件的功能（比如上圖里的 “Search”字樣），或者提示用戶輸入的文本將在哪里搜索（如“Google”）。
• 書簽按鈕(The Bookmarks button)。書簽按鈕可以讓用戶方便地找到他們需要的內容。例如在地圖中搜索時，用戶可以通過書簽按鈕快速選中書簽地址、最近搜索記錄、或通訊錄。

書簽按鈕只有當搜索欄中沒有占位符或用戶輸入內容時才會出現(xiàn)，當搜索欄中已有文本時，書簽按鈕會被清除按鈕(Clear button)所代替。

• 清除按鈕(The Clear button)。大多數(shù)搜索欄都會提供清除按鈕，方便用戶一鍵清空輸入內容。

一旦用戶在文本框中輸入內容，清除按鈕就會出現(xiàn)，用戶可以用它來一鍵清空輸入內容；而當搜索框中沒有任何文本內容時，清空按鈕將被隱藏。

• 結果列表圖標(The results list icon)。結果圖標說明此次搜索有搜出結果。當用戶點擊它時會出現(xiàn)用戶最近一次搜索的搜索結果。

• 提示(Prompt)。描述性標題，我們稱之為提示。描述性標題是一個短而完整的句子，為搜索欄提供介紹或指引應用特定信息。 在你的應用中使用搜索欄讓用戶進行搜索。不要使用文本框，因為文本框的外觀不符合用戶對搜索的預期。

在 iOS 8 以及之后的版本里，你可以通過 UISearchDisplayController 簡單快捷地把搜索欄放在導航欄中。請注意，當搜索的視圖控制器包含在導航控制器里面的時候——比如在郵件應用(Mail)中那樣，當用戶激活搜索時，搜索欄會自動上浮，平鋪到原來導航欄的位置上。 根據搜索功能在你的應用中的重要程度來選擇搜索欄的樣式。如果搜索在你的應用中是最基礎的功能，請使用突出樣式(the prominent style)；如果搜索不是用戶常用的功能，那么可以使用弱化樣式(the minimal style)。

范圍欄

范圍欄只有在與搜索欄一起時才會出現(xiàn)，它讓用戶可以定義搜索結果的范圍。

API 注釋

想要了解如何在代碼中定義搜索欄與范圍欄，請參考 UISearchBar.

當搜索欄出現(xiàn)時，范圍欄會出現(xiàn)在它的附近。范圍欄的外觀與你所指定的搜索欄的外觀兼容。

當用戶想在明確的分類范圍內進行搜索時，使用范圍欄是非常有用的。然而，更好的選擇是優(yōu)化您的搜索結果，讓用戶不需要使用范圍欄對搜索結果進行篩選，便可以找到他們所需要的內容。