欄

狀態(tài)欄

狀態(tài)欄顯示了設(shè)備和當前環(huán)境的重要信息（在 iphone 上顯示如下）。

默認（白底黑字）

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/status_bar_default_2x.png" alt="" />

淺色內(nèi)容（黑底白字）

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/status_bar_light_2x.png" alt="" />

狀態(tài)欄：

• 透明的
• 總是在設(shè)備頂部邊緣出現(xiàn)

API 備注
你可以為整個應(yīng)用設(shè)置統(tǒng)一的狀態(tài)欄樣式，也可以為單獨試圖設(shè)置合適樣式。如需了解更過關(guān)于 UIStatusBarStyle 常量和 preferredStatusBarStyle 屬性的信息，參閱 UIApplication Class Reference 和 UIViewController Class Reference。

不要創(chuàng)建自定義狀態(tài)欄。用戶會依賴于系統(tǒng)狀態(tài)欄的一致性。就算你在應(yīng)用中隱藏了它，也優(yōu)于自定義一個新的 UI 來代替它。

防止讓滾動內(nèi)容透過狀態(tài)欄顯示。當用戶滑動頁面時，你不會希望他們在狀態(tài)欄區(qū)域?qū)?yīng)用內(nèi)容和狀態(tài)欄本身混淆。為了讓用戶感覺寬敞的同時仍然保證最佳的可能性，要確保狀態(tài)欄背景會模糊其背后的內(nèi)容。這里有一些方法讓滾動內(nèi)容可以透過狀態(tài)欄隱約呈現(xiàn)：

• 使用導(dǎo)航控制器來顯示內(nèi)容。導(dǎo)航控制器會自動顯示狀態(tài)欄背景，并確保其內(nèi)容視圖不會在狀態(tài)欄后出現(xiàn)。（如需了解更多關(guān)于導(dǎo)航控制器的信息，詳見 Navigation Controllers）。
• 創(chuàng)建一個不醒目的自定義圖片——例如漸變——并放到狀態(tài)欄后顯示。為確保這張圖片顯示在狀態(tài)欄后面，你可以使用視圖控制器來保證這張圖片在滾動視圖之上，或者你可以使用滾動視圖并讓其固定在頂部。
• 定位內(nèi)容，以避開狀態(tài)欄區(qū)域（即，由應(yīng)用的 statusBarFrameproperty 定義的區(qū)域）。如果你這樣做了，要使用窗口的背景顏色以在狀態(tài)欄后提供一個固定的顏色。

避免在狀態(tài)欄后面放置干擾性內(nèi)容。尤其是，你不能讓用戶覺得輕觸狀態(tài)欄之后可以獲取內(nèi)容或激活你的應(yīng)用中的控件。

隱藏狀態(tài)欄時請慎重。由于狀態(tài)欄是透明的，通常情況下不需要隱藏它。始終隱藏狀態(tài)欄意味著用戶必須退出你的應(yīng)用中切換出去才能看到當前時間，或者是否有 Wi-Fi 連接。

在用戶全屏觀看多媒體內(nèi)容時，考慮隱藏狀態(tài)欄——和其它所有界面元素。當你這么做的時候，請確保用戶在輕觸屏幕時即可恢復(fù)狀態(tài)欄（和其它所有界面元素）。如果沒有充分的理由，則要避免重新定義一個手勢來讓用戶喚起狀態(tài)欄，因為用戶很難發(fā)現(xiàn)并難以記住這個手勢。

選擇一個和你的應(yīng)用相協(xié)調(diào)的狀態(tài)欄顏色。默認樣式以白底黑字顯示，適合用在淺色內(nèi)容的應(yīng)用的頂部。而黑底白字的狀態(tài)欄適合放在深色內(nèi)容的應(yīng)用的頂部。

在適當?shù)臅r候展示網(wǎng)絡(luò)活動指示器。網(wǎng)絡(luò)活動指示器可以出現(xiàn)在狀態(tài)欄中，以向用戶顯示長時間的網(wǎng)絡(luò)接入狀態(tài)。如需了解如何在代碼中執(zhí)行實現(xiàn)這樣的指示器，請參考 Network Activity Indicator。

導(dǎo)航欄

導(dǎo)航欄能夠?qū)崿F(xiàn)在應(yīng)用不同信息層級結(jié)構(gòu)間的導(dǎo)航，有時候也可用于管理當前屏幕內(nèi)容。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/nav_bar_iphone_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/nav_bar_ipad_7_2x.png" alt="" />

導(dǎo)航欄：

• 半透明的
• 通常位于應(yīng)用頁面頂部，狀態(tài)欄正下方

在橫向常規(guī)環(huán)境中，一個導(dǎo)航欄也可以不延長屏幕顯示在一個視圖上，如分裂的一個窗格視圖控制器。

• 鍵盤出現(xiàn)，用戶的手勢，或視圖控制器轉(zhuǎn)換為一個垂直緊湊的環(huán)境時，可以隱藏。
• 可以染色。（使用 tintColor 色彩欄按鈕項;使用 barTintColor 設(shè)置狀態(tài)欄背景色）。

API 備注
導(dǎo)航欄包含在導(dǎo)航控制器（navigation controller）中，該控制器是一個用于管理自定義視圖中信息層級展示形式的編程對象。想要了解如何在代碼中定義你的導(dǎo)航欄內(nèi)容，請參考 Navigation Controllers,UINavigationController Class Reference, 和 UINavigationBar Class Reference。

使用導(dǎo)航欄可以在各個視圖之間導(dǎo)航，并能夠提供管理視圖中條目的控件（如果合適的話）。如果你需要提供更多的控件而且不需要啟用導(dǎo)航，考慮使用工具欄代替（如需了解更多信息，請參閱 Toolbar）。

當用戶在導(dǎo)航層級中進入一個新的層級，會發(fā)生兩個變化：

• 導(dǎo)航欄標題可以適時變成新層級的標題。
• 在導(dǎo)航欄左側(cè)顯示返回按鈕，并以上一級頁面的標題命名。

如果導(dǎo)航欄需要一個標題，那就使用當前視圖的標題作為導(dǎo)航欄的標題。如果覺得給導(dǎo)航欄增加標題毫無必要，你也可以將標題留空。例如，便簽并沒有當前便簽的標題，因為內(nèi)容的第一行已經(jīng)給了用戶其所需要的所有情境。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/nav_bar_title_not_required_2x.png" alt="" />

可以考慮在應(yīng)用的最頂層導(dǎo)航欄中放置分段控件。這樣會非常有助于扁平化你的信息層級，也會讓用戶更容易找到所需內(nèi)容。如果在導(dǎo)航欄中使用了分段控件，請確保選擇一個準確的返回按鈕標題。（更多詳情請參考 Segmented Control）。

必要時，可以考慮使用提示語告訴用戶當前頁面可以做什么。提示語是一句緊靠著導(dǎo)航欄頂部的簡短句子。例如，股票使用一個提示語，以確保用戶知道如何找到他們想要的信息。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/prompt_stocks_2x.png" alt="" />

如果你需要使用提示語，那就寫一句足夠簡短并以合適標點結(jié)尾的話。

避免用過多的控件將導(dǎo)航欄擠滿，即使看上去還有大量的空間。一般來說，導(dǎo)航欄應(yīng)至多包含當前視圖的標題，返回按鈕和一個管理視圖內(nèi)容的控件。如果你在導(dǎo)航欄中使用了分段控件，那就不應(yīng)該顯示標題，而且也不應(yīng)該包含分段控件以外的任何控件。

確保文字按鈕之間有足夠的間隔。如果在導(dǎo)航欄中那些或左或右的按鈕之間沒有足夠的間隔，按鈕上的文字就會被擠到一起，而這會讓用戶很難區(qū)分它們。如果導(dǎo)航欄里按鈕的標題看起來太近，可以使用 UIBarButtonSystemItemFixedSpace 在它們之間增加適當?shù)拈g距。（如需了解更多信息，請參閱 UIBarButtonItem Class）。

盡可能確保自定義的導(dǎo)航欄外觀在整個你的應(yīng)用中保持一致。例如，不要將不透明的導(dǎo)航欄和半透明的工具欄組合在一起。同樣，最好要避免在同一方向的不同頁面中使用不同的導(dǎo)航欄圖像、顏色或透明度。

確保自定義的返回按鈕的外觀和行為看上去仍然是一個返回按鈕。用戶知道，標準的返回按鈕可以讓他們在信息層級之間原路返回。如果你決定要用自定義圖像替代掉系統(tǒng)自帶的返回箭頭，請確保這是一個自定義的蒙版圖層。iOS 會使用蒙版，讓按鈕標題在過渡為返回箭頭期間漸入或漸出。

要點
不要創(chuàng)建多節(jié)的返回按鈕。通常，返回按鈕會將用戶帶到當前頁面的父級頁面。如果你認為用戶只有在顯示一個面包屑路徑式的多節(jié)控件時才不會迷路，那多半意味著你需要扁平化你的信息層級。

考慮隱藏導(dǎo)航欄，當用戶希望把重點放在內(nèi)容。如果這樣做，一定要保證用戶可用一個簡單的動作恢復(fù)導(dǎo)航欄，比如輕觸。

導(dǎo)航欄（和工具欄）可見的地圖

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/nav_bar_visible_2x.png" alt="" />

導(dǎo)航欄（和工具欄）可見的地圖

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/nav_bar_hidden_2x.png" alt="" />

工具欄

工具欄包含了對頁面或視圖中對象進行操作的控件。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/mail_toolbar_iphone_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/mail_toolbar_ipad_2x.png" alt="" />

工具欄：

• 半透明的
• 在 iphone 上始終在屏幕或視圖底部出現(xiàn)，在 ipad 上也可以在屏幕或視圖頂部出現(xiàn)。
• 當鍵盤出現(xiàn)，用戶做一個手勢或視圖控制器轉(zhuǎn)換到一個垂直的界面時，工具欄可隱藏。

API 備注
工具欄通常包含于導(dǎo)航控制器（一個管理一系列自定義視圖顯示的程序?qū)ο螅┲?。如需了解更多關(guān)于如何在代碼中定義一個工具欄的更多信息，請參閱 Displaying a Navigation Toolbar 和 UIToolbar Class Reference。

使用工具欄可以向用戶提供一系列當前情境下可用的操作。

包含當前情境下最常用的指令。盡可能避免讓工具欄提供一些只會偶爾用到的指令。

考慮使用分段控件，用來切換當前情境中的不同視圖或模式。最好不要在工具欄中使用分段控件來顯示應(yīng)用級任務(wù)或模式，因為工具欄對應(yīng)的就是當前頁面或視圖。如果你需要讓用戶在你的應(yīng)用中接觸基本任務(wù)、視圖或模態(tài)窗口，那就使用標簽欄作為替代。如需了解更多關(guān)于分段控件的信息，請參閱 Segmented Control；請參閱如需了解更多關(guān)于標簽欄的信息，請參閱 Tab Bar。

如果需要在工具欄中放置超過三個項目，請使用圖標。由于文字按鈕通常會比圖標更占空間，因此很難做到讓文字標題不擠到一起。

確保文本標題之間有足夠間隔。如果在工具欄中兩個或更多按鈕之間沒有足夠的間隔，按鈕上的文字就會被擠到一起，而這會讓用戶很難區(qū)分它們。如果工具欄里按鈕的標題看起來太近，可以使用 [UIBarButtonSystemItemFixedSpace] 在它們之間增加適當?shù)拈g距。（如需了解更多信息，請參閱 UIBarButtonItem Class Reference）。

工具欄和導(dǎo)航欄按鈕

iOS 提供了大量的標準工具欄和導(dǎo)航欄按鈕，這些按鈕被用在了內(nèi)置應(yīng)用當中。如需了解如何設(shè)計自定義的條欄目圖標，請參閱 Bar Button Icons。工具欄和導(dǎo)航欄上的項目可以使用 tintColor 屬性著色。

如需了解表 35-1 中符號名稱和按鍵的對應(yīng)關(guān)系，請參閱 UIBarButtonItem Class Reference 中關(guān)于 UIBarButtonSystemItem 的內(nèi)容。

要點
和所有標準的按鈕和圖標一樣應(yīng)當根據(jù)按鈕的含義而不是外觀來決定其用途。這樣，即便對應(yīng)著特定含義的按鈕改變了樣子，你的應(yīng)用的 UI 仍然可以繼續(xù)使用。

表 37-1 工具欄和導(dǎo)航欄適用的標準按鈕

除了以上在表 37-1 中顯示的按鈕外，你也可以在應(yīng)用中使用系統(tǒng)自帶的編輯、取消、保存、完成、重做和撤銷等按鈕，用來支持編輯或其它類型內(nèi)容的操作。每個按鈕的外觀由其標題決定，如需了解符號名稱和按鈕的對應(yīng)關(guān)系，請參閱 UIBarButtonItem Class Reference 中的 UIBarButtonSystemItem 。

最后，你也可以在工具欄中使用系統(tǒng)自帶的信息按鈕。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/info_button_2x.png" alt="" />

標簽欄

標簽欄賦予了用戶在不同子任務(wù)、視圖和模態(tài)之間切換的能力。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/music_tab_bar_iphone_2x.png" alt="" />

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/music_tab_bar_ipad_2x.png" alt="" />

API 備注
標簽欄包含于標簽欄控制器中，這是一個可以管理一系列自定義視圖顯示的程序?qū)ο?。如需了解更多關(guān)于如何在代碼中定義標簽欄的更多信息，參閱 Tab Bar Controllers 和 UITabBars。

標簽欄：

• 半透明的
• 通常出現(xiàn)在屏幕底部
• 橫向屏幕同時顯示不超過 5 個標簽（如果有更多標簽，標簽欄會顯示其中 4 個并增加一個更多標簽，再將其他的標簽以列表形式收納其中）。
• 標簽欄高度不隨設(shè)備方向改變而改變
• 可以用徽標來顯示和應(yīng)用有關(guān)的特有信息（一個紅底白字并顯示數(shù)字或感嘆號的橢圓形）

使用標簽可以讓用戶在同一組數(shù)據(jù)的不同視圖中切換，或是在和應(yīng)用整體功能相關(guān)的不同子任務(wù)中。

一般來說，標簽欄可以用來在應(yīng)用層面上組織信息。標簽欄非常適合于應(yīng)用的主界面中，因為它可以很好地扁平化信息層級，并同時提供了進入多個不同信息分類或模態(tài)的入口。

不要用標簽欄來讓用戶對當前模態(tài)或頁面上的元素進行操作。如果你需要為用戶提供這些操作，你可以使用工具欄作為替代（如需了解更多使用準側(cè)，請參閱 Toolbar）。

在某個標簽的功能不可用時，不要移除它。如果某個標簽所代表的部分功能在當前情境下不可用了，相比移除這個標簽，更好的做法是顯示一個禁用的標語。如果你在某些情況下已處理表親而其他時候又沒有，這會讓你的應(yīng)用的界面變得不穩(wěn)定且不可預(yù)測。最好的解決方案是確保所有標簽都可用，但解釋標簽內(nèi)容不可用的原因。比如，如果用戶的ios設(shè)備中沒有歌曲，在音樂應(yīng)用的歌曲標簽中就會顯示一個頁面去說明如何下載歌曲。

考慮在標簽上使用徽標以低調(diào)地傳達信息。你可以在標簽欄圖標上顯示徽標來暗示該視圖或模態(tài)中有信息。

在橫向常規(guī)界面中，你可能會在分欄視圖或彈出窗口中用到標簽欄。如果這些標簽是用于切換或過濾視圖內(nèi)容，你就可以這樣做。不過，在彈出窗口或分欄視圖窗格的底部使用分段控件效果往往會更好。因為分段控件的外觀和分欄視圖或彈出窗口的外觀更協(xié)調(diào)（如需了解使用分段控件的更多信息，請參閱 Segmented Control）。

避免讓過多的標簽擠滿標簽欄。在標簽欄放置過多的標簽會讓用戶很難點中他們需要的標簽。每多一個標簽，你的應(yīng)用又多了一份復(fù)雜。

水平常規(guī)界面，避免使用更多這一標簽。在水平常規(guī)界面運行的應(yīng)用，專門用一個頁面顯示一列多余的標簽是很浪費空間的。

盡可能橫屏豎屏都顯示一樣的標簽。橫屏豎屏都顯示相同的標簽可以給用戶一種應(yīng)用的視覺穩(wěn)定感。橫屏方向時，你應(yīng)該將同樣的標簽沿屏幕寬度居中。

標簽欄圖標

iOS 為標簽欄提供了標準圖標，見表 37-2。如需了解如何設(shè)計自定義標簽欄圖標，請參閱 Bar Button Icons。標簽欄圖標可以使用 tintColor屬性著色。

想要了解符號名稱和按鍵的對應(yīng)關(guān)系，請參閱 UITabBarItem Class Reference 中的關(guān)于 UITabBarSystemItem 的文檔。

要點
和所有標準按鈕盒圖標一樣，你需要根據(jù)按鈕的語義含義去決定其用途，而不是外觀。這會讓你的應(yīng)用的界面符合直覺，即使是相關(guān)含義的圖標外觀被改變了。

下表用于標簽欄的標準標簽圖標

搜索欄

搜索欄可以接收用戶輸入的文本并將其作為一次搜索輸入（如下圖所示）。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_2x.png" alt="" />

API 備注
如需了解如何在代碼中定義搜索欄，請參閱 UISearch Bars。如需了解有關(guān)搜索欄的顯示，請參閱 UISearchDisplayController。

搜索欄可以顯示一些可選的元素，如這些:

• 占位符文本。此文本可能會說明這個控件的功能（例如，“搜索”）或者提醒用戶在何種搜索情境之下（例如，“Google”）。
• 書簽按鈕。此按鈕可以給用戶提供一種快捷方式，再次抵達他們想要輕松找到的信息。例如，地圖搜索模式中的書簽按鈕可以讓人訪問收藏的位置、最近搜索和聯(lián)系人。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_bookmarks_2x.png" alt="" />

書簽按鈕只在搜索欄中沒有用戶輸入的或非占位符文本時顯示。當搜索欄包含這樣的文本時，則顯示清除按鈕以使用戶可以清除文本。

• 清除按鈕。大多數(shù)搜索欄都包含清除按鈕，用戶輕點一下就能清除搜索欄中的內(nèi)容。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_clear_2x.png" alt="" />

當搜索欄中包含任意文本時，顯示清除按鈕以使用戶清除文本。如果搜索欄中沒有任何用戶輸入的或非占位符的文本時，則隱藏清除按鈕。

• 結(jié)果列表圖標。此圖標用來表示搜索結(jié)果。當用戶點擊這個圖標時，應(yīng)用就顯示他們最近搜索的結(jié)果。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_results_2x.png" alt="" />

• 提示語。一個放置在搜索欄中的描述性標題，稱之為提示語。通常來說，提示語是一個簡短的句子，以提供引導(dǎo)或搜索欄在應(yīng)用中所處的情境。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_prompt_2x.png" alt="" />

使用搜索欄可以在應(yīng)用中進行搜索。不要用一個文本框表示搜索因為它沒有用戶預(yù)期的搜索欄的樣子。

在 iOS8 和更高版本中，使用 UISearchController 會讓在導(dǎo)航欄中放一個搜索欄變得容易。請注意，搜索視圖控制器包含于導(dǎo)航控制器中，當用戶進入搜索時，搜索欄會自動在導(dǎo)航欄中漸變呈現(xiàn)，如郵件這個例子一樣。

選擇一個與應(yīng)用內(nèi)搜索功能重要性一致的搜索欄風格。如果在你的應(yīng)用中搜索是一個基本功能，你可能傾向于使用突顯的搜索欄風格；如果在你的應(yīng)用中用戶不需經(jīng)常進行搜索，你可能就傾向于精簡的搜索欄風格。

突顯的搜索欄風格（在郵件中顯示）

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_prominent_2x.png" alt="" />

精簡的搜索欄風格（在音樂中顯示）

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/search_bar_minimal_2x.png" alt="" />

范圍欄

范圍欄隨搜索欄一起出現(xiàn)，它允許用戶定義搜索范圍。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/scope_bar_2x.png" alt="" />

API 備注
如需了解如何在代碼中定義搜索欄和范圍欄，請參閱 UISearch Bars。

當搜索欄出現(xiàn)時，范圍欄也會在其附近出現(xiàn)。范圍欄的外觀會和搜索欄保持一致。

當用戶想要在明確定義或清晰分類的范圍內(nèi)搜索時，范圍欄會非常有用。當然更好的做法是提升搜索結(jié)果質(zhì)量，讓用戶不需要對搜索進行篩選。