API 注釋

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

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

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

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

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

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

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

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

導(dǎo)航欄

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/103.png" alt="" /> http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/104.png" alt="" />

導(dǎo)航欄：

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

API 注釋

導(dǎo)航欄包含于導(dǎo)航控制器（一個管理顯示自定義視圖層級結(jié)構(gòu)的程序?qū)ο螅┲小Ｏ胍私飧嚓P(guān)于如何在代碼中定義一個導(dǎo)航欄的信息，請參閱 Navigation Controllers, UINavigationController Class Reference 和 UINavigationBar Class Reference.

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

當(dāng)用戶到達一個新的層級，導(dǎo)航欄需要做出這樣的改變：

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

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

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

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

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

如果你需要用到提示語，請設(shè)計一句簡明扼要的單句，并在句末配以適當(dāng)?shù)臉?biāo)點符號。

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

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

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

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

重要

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

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

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

工具欄

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

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

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

工具欄：

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

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

你可以在工具欄里提供一系列讓用戶對當(dāng)前視圖內(nèi)容進行操作的工具。

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

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

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

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

工具欄與導(dǎo)航標(biāo)準(zhǔn)按鈕

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

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

重要

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

表格 41-1 工具欄與導(dǎo)航欄標(biāo)準(zhǔn)按鈕 (Standard buttons available for toolbars and navigation bars)

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

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

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

標(biāo)簽欄

標(biāo)簽欄讓用戶在不同的子任務(wù)、視圖和模式中進行切換。

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

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

API 注釋

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

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

標(biāo)簽欄：

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

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

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

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

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

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

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

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

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

標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)

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

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

重要

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

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

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

搜索欄

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

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

API 注釋

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

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

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

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

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

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

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

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

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

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

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

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

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

范圍欄

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

API 注釋

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

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

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

上一篇：路線選擇(Routing)下一篇：iOS 應(yīng)用解析