iOS 7 App交互設(shè)計(jì)指南-UI Elements-Bars

可以說智能手機(jī)領(lǐng)域是蘋果開創(chuàng)并引領(lǐng)，他們?yōu)閕Phone制定的交互與設(shè)計(jì)為其它智能機(jī)所沿用。蘋果起草的面向App開發(fā)者的交互指南同樣可以做為整個行業(yè)的規(guī)范，相信不久后Android App的設(shè)計(jì)也逐漸會向蘋果的扁平化改變——我們一直在按照蘋果的風(fēng)格來做Android不是嗎？

狀態(tài)欄（The Status Bar）

狀態(tài)欄展示了一些與設(shè)備相關(guān)的重要信息，以及當(dāng)前的環(huán)境。

你可以設(shè)置整個app狀態(tài)欄的風(fēng)格，或者你可以讓單獨(dú)的視圖控制器酌情設(shè)置。你可以分別查看UIApplication Class Reference和UIViewController Class Reference，來學(xué)習(xí)更多關(guān)于UIStatusBarStyle常量和preferredStatusBarStyle屬性相關(guān)內(nèi)容。

外觀和行為

狀態(tài)欄是透明的。不管設(shè)備處于什么方向，狀態(tài)欄總是在屏幕的上邊緣，并且包含了用戶所需信息，比如網(wǎng)絡(luò)連接、時間和電視電量等。

使用指南

雖然你不會像使用其他UI元素那樣使用狀態(tài)欄，但理解它在你app中的功能非常重要。

隱藏狀態(tài)欄之前要三思。由于狀態(tài)欄是透明的，所以通常并不需要隱藏它。永久性地隱藏狀態(tài)欄意味著用戶必須離開你的app才能查看時間，或者了解網(wǎng)絡(luò)連接情況。

考慮隱藏狀態(tài)欄—以及其他app UI，當(dāng)用戶正在興致勃勃地全屏觀看視頻的時候。如果你有隱藏狀態(tài)欄的需要，要保證用戶點(diǎn)擊屏幕就能找回狀態(tài)欄和適當(dāng)?shù)腢I元素。避免使用自定義手勢來重新展示狀態(tài)欄，因?yàn)橛脩舨幌矚g探索并記住這些手勢，除非你有足夠充分的理由。

不要創(chuàng)建自定義狀態(tài)欄。用戶依賴于系統(tǒng)提供的一致性的狀態(tài)欄。雖然你可能在app中隱藏狀態(tài)欄，但也并不推薦使用自定義UI來代替系統(tǒng)提供的狀態(tài)欄。

為你的app選擇適合狀態(tài)欄內(nèi)容的顏色。系統(tǒng)默認(rèn)的狀態(tài)欄是黑色的，適合淺色的app內(nèi)容。顏色比較亮的狀態(tài)欄適合深色的app內(nèi)容。

盡可能不要在狀態(tài)欄下方放置讓用戶分心的內(nèi)容。尤其是，你不想暗示用戶應(yīng)該點(diǎn)擊狀態(tài)欄訪問內(nèi)容，或者激活app中的控件。

如果合適，顯示網(wǎng)絡(luò)活動指示器。網(wǎng)絡(luò)活動指示器可以出現(xiàn)在狀態(tài)欄上，用來向用戶展示網(wǎng)絡(luò)訪問正在發(fā)生。想了解如何在代碼中實(shí)現(xiàn)這個指示器，可以查看“Network Activity Indicator”。

導(dǎo)航欄（Navigation Bar）

導(dǎo)航條能夠?qū)崿F(xiàn)不同信息層級間的導(dǎo)航，并能管理屏幕上的內(nèi)容。

導(dǎo)航欄包含在導(dǎo)航控制器中。導(dǎo)航控制器是一個用來管理自定義視圖的層級展示的編程對象。想了解更多關(guān)于在代碼中定義導(dǎo)航控制器的內(nèi)容，可查看“Navigation Controllers”和“Navigation Bars”。

外觀和行為

導(dǎo)航欄位于app屏幕的上方邊緣，導(dǎo)航欄之下。導(dǎo)航欄通常會居中排版展示當(dāng)前屏幕或者視圖的標(biāo)題。當(dāng)用戶在層級信息間來回瀏覽時，他們可以點(diǎn)擊返回按鈕或者輕掃設(shè)備邊緣返回上一個屏幕。另外，用戶可以點(diǎn)擊導(dǎo)航欄上的內(nèi)容特定控件來管理屏幕內(nèi)容。

導(dǎo)航欄是半透明的，欄中所有的控件都是無邊界的。

在iPhone上，導(dǎo)航欄經(jīng)常展示了整個屏幕的寬度，改變設(shè)備的持有方向可自動改變導(dǎo)航欄的高度。在iPad上，導(dǎo)航欄的高度不會按比例更改。

在iPad上，導(dǎo)航欄可以在某個視圖中展示，比如split?view的某個窗格，而不會貫通整個屏幕。

使用指南

導(dǎo)航欄可以用來在不同的視圖中導(dǎo)航，或者提供一些控件來管理視圖中的項(xiàng)目。

將當(dāng)前視圖的標(biāo)題作為導(dǎo)航欄的標(biāo)題。當(dāng)用戶瀏覽到新的信息層級中時，會發(fā)生兩件事：

1.圖像標(biāo)題變?yōu)樾聦蛹壍臉?biāo)題。

2.返回按鈕應(yīng)該出現(xiàn)在標(biāo)題的左邊，并且按鈕應(yīng)該展示上一個信息層級的標(biāo)題。

確保導(dǎo)航欄中的文字易讀。系統(tǒng)字體提供了最大的可讀性，不過你可以指定不同的字體，如果合適的話。

考慮在app的頂層的導(dǎo)航欄中放置一個分段控件。這么做有利于讓你的信息層級扁平化，可以讓用戶更容易發(fā)現(xiàn)他們要找的東西。如果你在導(dǎo)航欄中使用了分段控件，要確保選擇了正確的返回按鈕標(biāo)題。（更多使用指南，可參看“Segmented Control”）。

避免額外的控件讓導(dǎo)航欄變得擁擠，即使看起來還有充足的空間。一般來說，一個導(dǎo)航欄最多包括當(dāng)前視圖標(biāo)題、返回按鈕以及一個用來管理視圖內(nèi)容的控件。相反，如果你在導(dǎo)航欄中使用了分段控件，那么導(dǎo)航欄不能展示標(biāo)題了，也不應(yīng)該再包含分段控件以外的任何控件。

要確保文本標(biāo)題按鈕有足夠的空間。導(dǎo)航欄中，如果左邊和右邊多個按鈕項(xiàng)目之間沒有足夠的空間，那么文本標(biāo)題就會擁擠到一起，很難讓人區(qū)分開。如果導(dǎo)航欄中的按鈕標(biāo)題看起來太接近，那可以用UIBarButtonSystemItemFixedSpace在它們中間添加適當(dāng)?shù)目臻g。（學(xué)習(xí)更多關(guān)于這個內(nèi)容的常量，可參看“UIBarButtonItem Class Reference”）

根據(jù)文檔意義來使用系統(tǒng)提供的按鈕。更多信息可參看Toolbar and Navigation Bar Buttons。如果決定創(chuàng)建自己的導(dǎo)航欄控件，可參看“Bar Button?Icons”。

如果合適，定制導(dǎo)航欄的外觀以配合app的外觀。比如，你可以提供一個自定義背景圖片或者給導(dǎo)航欄指定顏色和透明度。某些情況下，使用一個可縮放圖片是個不錯的選擇。關(guān)于“創(chuàng)建可縮放圖像”相關(guān)內(nèi)容，可查看“Creating Resizable Images”。注意要為iOS 7 app提供一個高度合適的背景圖片。了解更多信息，可在“iOS 7 UI Transition Guide（中文版）（英文版）”中查看“Navigation Bar”這一節(jié)。

確定自定義導(dǎo)航欄的外觀和你app的外觀、風(fēng)格一致。比如，不要把一個不透明的導(dǎo)航欄和一個半透明的工具欄組合在一起。當(dāng)設(shè)備處于同一方向（橫屏或者豎屏）時，避免改變不同屏幕上導(dǎo)航欄的圖片、顏色或透明度。

要確保自定義返回按鈕看起來像返回按鈕。用戶知道標(biāo)準(zhǔn)的返回按鈕可以讓他們回到上一層級信息中。如果你決定用自定義圖片取代系統(tǒng)提供的，要確保你也提供了的自定義mask image。iOS 7可用它來讓按鈕標(biāo)題在轉(zhuǎn)場過程中顯露出來，或者消失。?

在iPhone上，將設(shè)備持有方向改變時導(dǎo)航欄高度的自動變化考慮進(jìn)去。特別的，確保自定義導(dǎo)航欄圖標(biāo)和橫屏?xí)r的稍窄一點(diǎn)的導(dǎo)航欄也很配。不要用編程的方式指定航欄的高度；你應(yīng)該充分使用UIBarMetrics常量來保證你的內(nèi)容非常“合身”。

工具欄（Toolbar）

工具欄中的控件可以執(zhí)行跟屏幕或視圖上對象相關(guān)的動作。

工具欄被包含在一個導(dǎo)航控制器中（管理自定義視圖層次展示的對象）。想了解如何在代碼中定義工具欄，可以參看“View Controller?Catalog for iOS”中“Displaying a Navigation Toolbar”一節(jié)和“Toolbar”。

外觀和行為

在iPhone上，工具欄總是出現(xiàn)在屏幕或視圖的底部邊緣，但在iPad上，它可以出現(xiàn)在上邊緣。 ?

工具欄是半透明的，工具欄上的項(xiàng)目間距均等地有序排列著。工具欄項(xiàng)目的精確設(shè)置可以根據(jù)不同視圖而有所不同，因?yàn)檫@些項(xiàng)目要針對當(dāng)前視圖的下下文來決定。

在iPhone上，設(shè)備從豎屏改為橫屏?xí)r，可自動改變工具欄的高度。在iPad上面，工具欄的高度不會因旋轉(zhuǎn)設(shè)備持有方向而改變。

使用指南

使用工具欄來提供一系列用戶可以在當(dāng)前環(huán)境中采取的行動。?

使用工具欄給用戶提供可以在當(dāng)前上下文環(huán)境中使用的指令。一個替代選擇是在工具欄上放置分段控件，從而方便用戶從不同視角訪問app的數(shù)據(jù)和應(yīng)用的不同模式（可查看“Segmented Control”了解使用指南）。

如果你需要在工具欄上展示3個以上的項(xiàng)目，可使用圖標(biāo)。由于文本標(biāo)題按鈕比圖標(biāo)占用了更多空間，所以使用圖標(biāo)可以阻止標(biāo)題擁擠到一處。

確保文本標(biāo)題按鈕有足夠的空間。如果工具欄中的圖標(biāo)間沒有足夠的空間，文本標(biāo)題就會擠到一塊兒，用戶很難把它們區(qū)分開來。如果工具欄中的按鈕標(biāo)題看起來太接近，那可以用UIBarButtonSystemItemFixedSpace在它們中間添加適當(dāng)?shù)目臻g。（更多關(guān)于這個常量的內(nèi)容，可參看“UIBarButtonItem Class Reference”）

根據(jù)文檔使用系統(tǒng)提供的工具欄項(xiàng)目。更多信息可參看Toolbar and Navigation Bar Buttons。如果你決定創(chuàng)建自己工具欄項(xiàng)目，可參看“Bar?Button Icons”。

在iPhone上，為因設(shè)備方向旋轉(zhuǎn)而產(chǎn)生的工具欄高度變化做好準(zhǔn)備。尤其是要確保你的自定義工具欄圖標(biāo)可以很好的適應(yīng)設(shè)備橫屏模式下較細(xì)的bar。不要以編程方式指定工具欄的高度，相反要充分使用UIBarMetrics常量來確定內(nèi)容適配得當(dāng)。

工具欄和導(dǎo)航欄按鈕（Toolbar and Navigation Bar Buttons）

iOS提供了許多用戶在工具欄和導(dǎo)航欄中看到的標(biāo)準(zhǔn)按鈕。

符號名稱和用途描述可以參看Table 33-1。在“UIBarButtonItem Class Reference”中查看“UIBarButtonSystemItem”這一小節(jié)。

重要：跟所有標(biāo)準(zhǔn)按鈕和圖標(biāo)一樣，有必要根據(jù)其文檔意義來使用工具欄圖標(biāo)和導(dǎo)航欄圖標(biāo)。尤其是，注意根據(jù)語義意義來使用按鈕，而不是根據(jù)其外觀。即便關(guān)聯(lián)特定意義的按鈕改變了外觀，app的UI仍然有意義。

除了Table 33-1中列出的按鈕，你也可以使用系統(tǒng)提供的編輯、取消、保存、確定以及恢復(fù)等按鈕來支持編輯或其他類型的操作。這當(dāng)中每個按鈕的外觀都有自己的文本標(biāo)題。了解這些按鈕的符號名稱和按鈕用法，可參看“UIBarButtonItem Class Reference”中的“UIBarButtonSystemItem”一節(jié)。

你也可以在工具欄中使用系統(tǒng)提供的Info按鈕：

標(biāo)簽欄（Tab Bar）

標(biāo)簽欄可以讓用戶在不容子任務(wù)、視圖以及模式中進(jìn)行切換。

標(biāo)簽欄被包含在標(biāo)簽欄控制器中（標(biāo)簽欄控制器是一個用來管理一系列自定義視圖展示的對象）。參看“Tab Bar Controllers” 和“Tab?Bars”學(xué)習(xí)如何在代碼中定義標(biāo)簽欄。

外觀和行為

標(biāo)簽欄被置于屏幕的底部邊緣，并且應(yīng)該能在app的任何位置都能訪問到。標(biāo)簽欄是半透明的，并在標(biāo)簽上展示文本和按鈕，所有標(biāo)簽都是等距的。當(dāng)用戶選中一個標(biāo)簽，圖標(biāo)就會適當(dāng)?shù)母吡痢?/div>

在iPhone上，標(biāo)簽欄一次最多只能顯示5個標(biāo)簽；如果應(yīng)用有更多標(biāo)簽，那么標(biāo)簽欄會顯示其中四個，其余的會以列表形式出現(xiàn)在“更多”標(biāo)簽里面。

在iPad上，標(biāo)簽欄可以展示超過5個的標(biāo)簽。

一個標(biāo)簽可以展示徽標(biāo)。徽標(biāo)是一個紅色圓圈，包含白色文本，或者一個數(shù)字，或者感嘆號。用以傳達(dá)app特有的信息。

標(biāo)簽欄的高度不會因設(shè)備方向更改而改變。

使用指南

標(biāo)簽欄允許用戶從不同視圖訪問app的數(shù)據(jù)集或者跟app整個功能相關(guān)的子任務(wù)。當(dāng)你使用標(biāo)簽欄時需遵循以下指南：

不要將標(biāo)簽條用于控制屏幕內(nèi)的元素。如果需要這么做，請使用工具條。

不要使用標(biāo)簽欄為用戶提供可作用于當(dāng)前模式或者屏幕中元素的控件。如果你需要為用戶提供控件，可以用工具欄代替（使用指南可參看“Toolbar”）。

一般來說，使用標(biāo)簽欄來組織應(yīng)用層次信息。標(biāo)簽欄適合在應(yīng)用主界面中使用，可以很好地將你的信息層次扁平化，并且可以讓用戶在同一時間訪問幾個同級信息類別或者模式。

不要移除功能不可用的標(biāo)簽。如果標(biāo)簽在當(dāng)前上下文環(huán)境中不可用，那么展示一個禁用標(biāo)簽要好過移除標(biāo)簽。在某些情況下，如果你移除了標(biāo)簽，會讓用戶覺得app的UI不穩(wěn)定，不可預(yù)測。最好的方法是確保所有的標(biāo)簽都是可用的，但要解釋為什么有些標(biāo)簽是不可用的。比如，如果用戶的iOS設(shè)備上沒有任何歌曲，那么音樂app中的歌曲標(biāo)簽可用一個屏幕來解釋如何下載歌曲。

考慮為標(biāo)簽圖標(biāo)添上一個不顯眼的小徽標(biāo)來傳達(dá)信息。你可以在標(biāo)簽欄的圖標(biāo)上展示一個徽標(biāo)來指示與視圖或者模式相關(guān)的新信息。

根據(jù)文檔意義使用系統(tǒng)提供的標(biāo)簽欄圖標(biāo)。更多信息可查看“Tab Bar Icons”。如果你決定創(chuàng)建自己的標(biāo)簽欄圖標(biāo)，可以參看“Bar Button?Icons（中文?英文）”。

如果合適，可以自定義標(biāo)簽欄的外觀。比如，你可以為標(biāo)簽欄和標(biāo)簽欄圖標(biāo)提供一個自定義的顏色，只要圖標(biāo)是系統(tǒng)提供的或者是自定義的模板圖片。你也可以為標(biāo)簽欄提供一個背景圖片（注意最好提供一個可縮放的背景圖片。了解更多關(guān)于“創(chuàng)建可縮放背景圖片”，可以參看“Creating Resizable Images”中文?英文）