編者按：蘋(píng)果官方人機(jī)指南技術(shù)章下篇來(lái)咯！僅僅會(huì)畫(huà)圖標(biāo)的美工不能叫UI設(shè)計(jì)師，想盡快達(dá)到合格線(xiàn)，熟讀蘋(píng)果官方的人機(jī)界面指南是最方便科學(xué)的方法之一。感謝騰訊ISUX團(tuán)隊(duì)的辛苦付出，收下這本教科書(shū)級(jí)別的設(shè)計(jì)讀物！

騰訊力作系列：

1. 《騰訊力作！超實(shí)用的IOS 9人機(jī)界面指南（1）：UI設(shè)計(jì)基礎(chǔ)》
2. 《騰訊力作！超實(shí)用的IOS 9人機(jī)界面指南（2）：設(shè)計(jì)策略》
3. 《騰訊力作！IOS 9人機(jī)界面指南（3）：IOS 技術(shù) （上）》
4. 《騰訊力作！IOS 9人機(jī)界面指南（3）：IOS 技術(shù) （下）》

文章索引

• 4.1.1 狀態(tài)欄
• 4.1.2 導(dǎo)航欄
• 4.1.3 工具欄
• 4.1.4 工具欄與導(dǎo)航標(biāo)準(zhǔn)按鈕
• 4.1.5 標(biāo)簽欄
• 4.1.6 標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)
• 4.1.7 搜索欄
• 4.1.8 范圍欄
• 4.2.1 活動(dòng)
• 4.2.2 活動(dòng)視圖控制器
• 4.2.3 集合視圖
• 4.2.4 容器視圖控制器
• 4.2.5 圖片視圖
• 4.2.6 地圖視圖
• 4.2.7 頁(yè)面視圖控制器
• 4.2.8 浮出層
• 4.2.9 滾動(dòng)視圖（Scroll View）
• 4.2.10 分欄視圖控制器
• 4.2.11 表格視圖
• 4.2.12 文本視圖
• 4.2.13 網(wǎng)絡(luò)視圖
• 4.3.1 活動(dòng)指示器
• 4.3.2 添加聯(lián)系人按鈕
• 4.3.3 日期時(shí)間選擇器
• 4.3.4 詳情展開(kāi)按鈕
• 4.3.5 信息按鈕
• 4.3.6 標(biāo)簽
• 4.3.7 網(wǎng)絡(luò)活動(dòng)指示器
• 4.3.8 頁(yè)面控件
• 4.3.9 選擇器
• 4.3.10 進(jìn)度視圖
• 4.3.11 刷新控件
• 4.3.12圓角矩形按鈕
• 4.3.13 分段控件
• 4.3.14 滑塊
• 4.3.15 步進(jìn)器
• 4.3.16 開(kāi)關(guān)按鈕
• 4.3.17 系統(tǒng)按鈕
• 4.3.18文本框
• 4.4.1 警告框
• 4.4.2 操作列表
• 4.4.3模態(tài)視圖

4.1 欄

4.1.1 狀態(tài)欄

狀態(tài)欄展示了關(guān)于設(shè)備及其周?chē)h(huán)境的重要信息。

默認(rèn)（深色）內(nèi)容

淺色

狀態(tài)欄：

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

API注釋

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

不要?jiǎng)?chuàng)建自定義狀態(tài)欄。

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

避免滾動(dòng)內(nèi)容直接透過(guò)狀態(tài)欄顯示。

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

• 使用導(dǎo)航控制器（navigation controller）來(lái)展示內(nèi)容。導(dǎo)航控制器自動(dòng)展示狀態(tài)欄背景，同時(shí)能確保內(nèi)容視圖不會(huì)出現(xiàn)在狀態(tài)欄后面。（了解更多請(qǐng)參考 Navigation Controllers）。

• 在狀態(tài)欄后面放一個(gè)低調(diào)的、不會(huì)搶走用戶(hù)注意力的自定義圖形——比如一道漸變。想要保證這樣的圖形始終固定在狀態(tài)欄后面，你可以用視圖控制器（view controller）來(lái)讓它固定在滾動(dòng)內(nèi)容上一層，又或者可以用滾動(dòng)視圖（scrolling view）來(lái)保證圖形固定在屏幕的頂部。
• 讓內(nèi)容固定在導(dǎo)航欄區(qū)域外顯示（這個(gè)區(qū)域由應(yīng)用的statusBarFrame屬性來(lái)定義）。如果你確定要這樣做的話(huà)，請(qǐng)給導(dǎo)航欄區(qū)域添加固定的、與屏幕背景色相同的背景色。

千萬(wàn)千萬(wàn)，避免在狀態(tài)欄后面疊加會(huì)分散注意力的內(nèi)容。

尤其是，你不能讓用戶(hù)覺(jué)得輕擊狀態(tài)欄之后可以獲取內(nèi)容或激活你的應(yīng)用中的控件。

隱藏狀態(tài)欄時(shí)請(qǐng)慎重。

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

在用戶(hù)全屏觀(guān)看媒體時(shí)，考慮隱藏狀態(tài)欄以及所有頁(yè)面UI。

當(dāng)你這么做的時(shí)候，請(qǐng)確保用戶(hù)在輕擊屏幕時(shí)即可重新喚起狀態(tài)欄以及相關(guān)的UI。而除非你有充分的理由，否則最好不要重新定義一個(gè)手勢(shì)來(lái)讓用戶(hù)喚起狀態(tài)欄，因?yàn)橛脩?hù)不會(huì)發(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(shí)候展示網(wǎng)絡(luò)活動(dòng)指示器（network activity indicator）。

這可以提醒用戶(hù)顯示長(zhǎng)時(shí)間的網(wǎng)絡(luò)接入狀態(tài)。更多詳情請(qǐng)參考本章第三節(jié)控件部分的網(wǎng)絡(luò)活動(dòng)指示器部分（Network Activity Indicator）。

4.1.2 導(dǎo)航欄

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

導(dǎo)航欄：

• 是半透明的

• 通常位于屏幕的上方，狀態(tài)欄正下方。在橫屏視圖中，導(dǎo)航欄也可以包含在某一視圖中，不需要與整個(gè)屏幕等寬，比如說(shuō)它可以出現(xiàn)在對(duì)分視圖控制器（split view controller）的其中一側(cè)。

• 當(dāng)鍵盤(pán)被喚起、用戶(hù)使用了手勢(shì)、或者當(dāng)前視圖變?yōu)樨Q屏的情況下，導(dǎo)航欄可以隱藏。
• 可以填充顏色（使用tintColor來(lái)定義導(dǎo)航欄中的圖標(biāo)與文字顏色；使用 barTintColor來(lái)填充導(dǎo)航欄背景色）

API注釋

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

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

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

• 導(dǎo)航欄標(biāo)題應(yīng)該變成當(dāng)前層級(jí)的標(biāo)題。
• 當(dāng)前標(biāo)題左側(cè)放置應(yīng)有返回按鈕，需要的話(huà)，返回按鈕可以以前一層級(jí)的標(biāo)題命名。

使用當(dāng)前視圖的標(biāo)題作為導(dǎo)航欄標(biāo)題。

若覺(jué)得標(biāo)題冗余，你也可以將標(biāo)題留空。舉個(gè)例子，備忘錄的導(dǎo)航欄中就沒(méi)有當(dāng)前備忘錄的標(biāo)題，因?yàn)閭渫浀牡谝恍芯鸵呀?jīng)提供了所有用戶(hù)需要的內(nèi)容。

考慮在應(yīng)用最高層級(jí)的導(dǎo)航欄中放置一個(gè)分段控件。

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

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

如果你需要用到提示語(yǔ)，請(qǐng)?jiān)O(shè)計(jì)一句簡(jiǎn)明扼要的單句，并在句末配以適當(dāng)?shù)臉?biāo)點(diǎn)符號(hào)。

即使空間充足，也應(yīng)當(dāng)避免讓過(guò)多的控件填滿(mǎn)你的導(dǎo)航欄。

一般來(lái)說(shuō)，導(dǎo)航欄上應(yīng)該不多于以下三個(gè)元素：當(dāng)前視圖的標(biāo)題、返回按鈕和一個(gè)針對(duì)當(dāng)前的操作控件。而當(dāng)你在導(dǎo)航欄中使用了分段控件，就不要再放標(biāo)題以及其它多余控件了。

確保文字按鈕之間擁有足夠的空間。

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

確保你自定義的導(dǎo)航欄在你的應(yīng)用的每個(gè)視圖中都擁有一致的外觀(guān)與體驗(yàn)。

舉個(gè)例子，不要在同一個(gè)應(yīng)用中使用不透明導(dǎo)航欄和半透明工具欄。在屏幕處于同一方向時(shí)，最好不要改變不同屏上導(dǎo)航欄的背景圖片、顏色和透明度。

確保你自定義的返回按鈕的外觀(guān)與操作仍然像一個(gè)返回按鈕。

用戶(hù)知道系統(tǒng)默認(rèn)的返回按鈕能幫助他們?cè)谛畔蛹?jí)中追蹤自己的路徑，如果你想重新設(shè)計(jì)它，請(qǐng)確保使用一個(gè)自定義的蒙版圖層 （custom mask image），它可以在iOS中讓這些按鈕標(biāo)題在系統(tǒng)各轉(zhuǎn)場(chǎng)中出現(xiàn)或者消失。

重要

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

在用戶(hù)需要專(zhuān)注于內(nèi)容的時(shí)候，可以考慮隱藏導(dǎo)航欄。

當(dāng)你這么做的時(shí)候，請(qǐng)確保用戶(hù)通過(guò)一個(gè)簡(jiǎn)單的手勢(shì)（比如一下輕擊）即可重新喚起導(dǎo)航欄。

4.1.3 工具欄

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

工具欄：

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

API注釋

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

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

在工具欄里放置用戶(hù)在當(dāng)前情景下最常用的指令。

盡量避免在工具欄里提供一些僅會(huì)偶爾用到的指令。

可以在工具欄里放置分段控件以方便用戶(hù)快速切換當(dāng)前內(nèi)容的不同視圖或模式。

在工具欄中提供應(yīng)用全局的任務(wù)或者模式分段控件是不恰當(dāng)?shù)模驗(yàn)楣ぞ邫谥械乃胁僮鞫紤?yīng)當(dāng)是針對(duì)當(dāng)前屏幕和視圖的。如果你需要讓用戶(hù)可以快速喚起應(yīng)用全局的任務(wù)、或改變?nèi)忠晥D和模式，可以使用標(biāo)簽欄（Tab Bar）。想要了解更多分段控件的內(nèi)容，請(qǐng)參考下文的分段控件（Segmented Control）部分；想要了解更多標(biāo)簽欄的內(nèi)容，請(qǐng)參考下文中的標(biāo)簽欄（Tab Bar）部分。

如果需要在工具欄上展示3個(gè)以上的項(xiàng)目，可以使用圖標(biāo)。

由于文本按鈕通常會(huì)比圖標(biāo)更占空間，所以用圖標(biāo)可以避免文字標(biāo)題們擠在一起。

保證工具欄文字按鈕之間有足夠的間距。

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

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

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

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

重要

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

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

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

另外，你還可以在工具欄中放置系統(tǒng)提供的信息按鈕（info button）.

4.1.5 標(biāo)簽欄

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

API注釋

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

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

標(biāo)簽欄：

• 是半透明的
• 始終出現(xiàn)在屏幕的底部
• 一個(gè)標(biāo)簽欄一次最多可承載5個(gè)標(biāo)簽（多于5個(gè)標(biāo)簽的時(shí)候，可以展示前4個(gè)標(biāo)簽和一個(gè)“更多”，并將其他的標(biāo)簽以列表形式收納到“更多”里面）
• 在橫屏與豎屏情況下，高度均保持一致
• 你可以在標(biāo)簽上加上紅底白字，顯示數(shù)字或者省略號(hào)的小氣泡（badge）以展示特定的應(yīng)用信息

你可以使用標(biāo)簽欄來(lái)切換對(duì)同一組數(shù)據(jù)的不同視圖模式，或者整體功能下不同的子任務(wù)。

一般而言，使用標(biāo)簽欄來(lái)組織整個(gè)應(yīng)用層面的信息結(jié)構(gòu)。

標(biāo)簽欄非常適合用于應(yīng)用的主界面中，因?yàn)樗梢院芎玫乇馄叫畔蛹?jí)，并且同時(shí)提供多個(gè)觸達(dá)同級(jí)信息類(lèi)目與模式的入口。

不要使用標(biāo)簽來(lái)讓用戶(hù)執(zhí)行對(duì)于當(dāng)前應(yīng)用與屏幕內(nèi)容的操作。

如果你需要給用戶(hù)提供操作控件，請(qǐng)使用工具欄。

即使標(biāo)簽當(dāng)前不可用，也不要把它從標(biāo)簽欄中刪除。

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

考慮在tab上加入紅色的小氣泡（Badge）以低調(diào)地傳達(dá)信息。

你可以通過(guò)添加小氣泡來(lái)告知用戶(hù)該標(biāo)簽中包含新的內(nèi)容。

根據(jù)控件的標(biāo)準(zhǔn)含義來(lái)選擇系統(tǒng)提供的圖標(biāo)。

詳情請(qǐng)查看下文中的標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)（Tab Bar Icons）。如果想自定義標(biāo)簽欄圖標(biāo)，請(qǐng)參考文檔第五章中Bar Buttons Icons里給出的建議。

在橫屏視圖中，你可能會(huì)在對(duì)分視圖（split view pane）或者浮出層（popover）內(nèi)使用標(biāo)簽欄以切換或篩選視圖中的內(nèi)容。

如果這些標(biāo)簽是用于切換或者過(guò)濾當(dāng)前視圖中的內(nèi)容的話(huà)，你可以這么做。然而通常情況下，在對(duì)分視圖和浮出層底部使用分段控件效果會(huì)更好，因?yàn)橐曈X(jué)上看起來(lái)更為協(xié)調(diào)。更多詳情請(qǐng)參考文檔本章第三節(jié)中的分段控件。

避免讓過(guò)多的標(biāo)簽填滿(mǎn)你的標(biāo)簽欄。

放置太多標(biāo)簽會(huì)讓用戶(hù)難以選中他想要點(diǎn)擊的那一個(gè)。而同時(shí)每添加一個(gè)標(biāo)簽，意味著你的應(yīng)用程序又復(fù)雜了一分。

盡可能地在橫屏與豎屏情況下都展示相同數(shù)量的標(biāo)簽。

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

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

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

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

重要

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

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

4.1.7 搜索欄

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

API注釋

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

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

• 占位符文本（Placeholder text）。占位符文本通常會(huì)寫(xiě)明控件的功能（比如上圖里的 “Search”字樣），或者提示用戶(hù)輸入的文本將在哪里搜索（如“Google”）。

• 書(shū)簽按鈕（The Bookmarks button）。書(shū)簽按鈕可以讓用戶(hù)方便地找到他們需要的內(nèi)容。例如在地圖中搜索時(shí)，用戶(hù)可以通過(guò)書(shū)簽按鈕快速選中書(shū)簽地址、最近搜索記錄、或通訊錄。

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

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

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

• 結(jié)果列表圖標(biāo)（The results list icon）。結(jié)果圖標(biāo)說(shuō)明此次搜索有搜出結(jié)果。當(dāng)用戶(hù)點(diǎn)擊它時(shí)會(huì)出現(xiàn)用戶(hù)最近一次搜索的搜索結(jié)果。

• 提示（Prompt）。描述性標(biāo)題，我們稱(chēng)之為提示。描述性標(biāo)題是一個(gè)短而完整的句子，為搜索欄提供介紹或指引應(yīng)用特定信息。

在你的應(yīng)用中使用搜索欄讓用戶(hù)進(jìn)行搜索。不要使用文本框，因?yàn)槲谋究虻耐庥^(guān)不符合用戶(hù)對(duì)搜索的預(yù)期。

在iOS 8以及之后的版本里，你可以通過(guò)UISearchDisplayController簡(jiǎn)單快捷地把搜索欄放在導(dǎo)航欄中。請(qǐng)注意，當(dāng)搜索的視圖控制器包含在導(dǎo)航控制器里面的時(shí)候——比如在郵件應(yīng)用（Mail）中那樣，當(dāng)用戶(hù)激活搜索時(shí)，搜索欄會(huì)自動(dòng)上浮，平鋪到原來(lái)導(dǎo)航欄的位置上。

根據(jù)搜索功能在你的應(yīng)用中的重要程度來(lái)選擇搜索欄的樣式。

如果搜索在你的應(yīng)用中是最基礎(chǔ)的功能，請(qǐng)使用突出樣式（the prominent style）；如果搜索不是用戶(hù)常用的功能，那么可以使用弱化樣式（the minimal style）。

4.1.8 范圍欄

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

API注釋

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

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

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

4.2 內(nèi)容視圖

4.2.1 活動(dòng)

每個(gè)活動(dòng)表示一個(gè)系統(tǒng)提供的或自定義的服務(wù)——它可以通過(guò)訪(fǎng)問(wèn)活動(dòng)視圖控制器（Activity view controller）來(lái)作用于某些特定的內(nèi)容。

API注釋

想要了解如何在代碼中定義活動(dòng)，請(qǐng)參考UI Activity Class Reference.想要了解如何將活動(dòng)視圖控制器整合到你的應(yīng)用中，請(qǐng)參考Activity View Controller.

動(dòng)作與分享擴(kuò)展程序也可以在活動(dòng)視圖控制器中展示。想要了解更多關(guān)于這些擴(kuò)展程序的內(nèi)容，請(qǐng)參考Share and Action Extensions.

活動(dòng)是：

• 一種可定制對(duì)象，代表著某個(gè)可以讓用戶(hù)在app中執(zhí)行操作的服務(wù)
• 以圖標(biāo)的形式呈現(xiàn)，外觀(guān)與欄按鈕圖標(biāo)相似

用戶(hù)通過(guò)點(diǎn)擊活動(dòng)的圖標(biāo)來(lái)啟動(dòng)某樣活動(dòng)。點(diǎn)擊之后該項(xiàng)服務(wù)通常會(huì)立刻執(zhí)行，當(dāng)這項(xiàng)服務(wù)過(guò)于復(fù)雜時(shí)，系統(tǒng)將會(huì)進(jìn)一步索取更多的信息之后才會(huì)為用戶(hù)執(zhí)行該服務(wù)。

使用活動(dòng)來(lái)讓用戶(hù)執(zhí)行你的應(yīng)用所提供的服務(wù)。請(qǐng)注意，iOS本身提供了若干內(nèi)置的服務(wù)，如打印，轉(zhuǎn)發(fā)到Twitter，發(fā)送信息和Airplay等等，你不需要再額外為這些內(nèi)置任務(wù)創(chuàng)建活動(dòng)。

為你應(yīng)用的各種服務(wù)設(shè)計(jì)一套精簡(jiǎn)的線(xiàn)性模板圖標(biāo)（Template image）。后臺(tái)會(huì)將會(huì)把這種模板圖標(biāo)作為剪影遮罩，組合成用戶(hù)最終看到的圖標(biāo)效果。想設(shè)計(jì)出好看的模版圖標(biāo)，可以遵循以下原則：

• 使用透明度適當(dāng)?shù)暮谏虬咨?/li>
• 不要使用陰影
• 進(jìn)行抗鋸齒處理

一個(gè)活動(dòng)模版圖大小應(yīng)該保持在70×70像素左右（高分辨率下），在區(qū)域里居中顯示。

為每一個(gè)活動(dòng)設(shè)計(jì)清晰簡(jiǎn)練的文字標(biāo)題。

標(biāo)題將會(huì)出現(xiàn)在活動(dòng)菜單圖標(biāo)的下方。一般來(lái)說(shuō)短標(biāo)題效果最好，因?yàn)樗谄聊簧系娘@示效果更好并且更容易本地化。如果你的標(biāo)題文字過(guò)長(zhǎng)，iOS會(huì)將縮小文本，仍然過(guò)長(zhǎng)的話(huà)則會(huì)被截?cái)唷Ｒ话愣裕詈媚鼙苊庠诨顒?dòng)標(biāo)題中提及你的公司或產(chǎn)品名稱(chēng)。

4.2.2 活動(dòng)視圖控制器

活動(dòng)視圖控制器是一個(gè)臨時(shí)視圖，當(dāng)中羅列了一系列可以針對(duì)頁(yè)面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)。

API注釋

想要了解如何在代碼中定義活動(dòng)視圖控制器，請(qǐng)參考UIActivityView Class Reference.想要了解如何設(shè)計(jì)一個(gè)提供自定義服務(wù)的活動(dòng)菜單，請(qǐng)參閱上文中關(guān)于活動(dòng)彩蛋的內(nèi)容。

活動(dòng)視圖控制器：

• 顯示了讓用戶(hù)可以針對(duì)當(dāng)前內(nèi)容執(zhí)行操作的一系列的可配置服務(wù)
• 根據(jù)所處的場(chǎng)景不同，可能出現(xiàn)在操作列表或浮出層中

使用活動(dòng)視圖控制器來(lái)為用戶(hù)提供一系列針對(duì)當(dāng)前內(nèi)容的服務(wù)。這些服務(wù)可以是系統(tǒng)自帶的，比如復(fù)制，分享到twitter，打印等等，也可以是自定義的。活動(dòng)視圖控制器通常用作讓用戶(hù)把他們選中的內(nèi)容復(fù)制到他們的社交媒體賬戶(hù)上。

不要?jiǎng)?chuàng)建一個(gè)自定義按鈕來(lái)觸發(fā)活動(dòng)視圖控制器。

用戶(hù)更習(xí)慣點(diǎn)擊動(dòng)作按鈕后使用系統(tǒng)提供的服務(wù)。你應(yīng)該學(xué)會(huì)如何更好地利用用戶(hù)這一既定習(xí)慣，而不是強(qiáng)迫他們以一種全新的方式來(lái)完成同樣的事情。

確保控制器中的操作適用于當(dāng)前場(chǎng)景。

你可以適當(dāng)?shù)卦诨顒?dòng)視圖控制器中增減系統(tǒng)操作，或增加自定義操作。例如，如果你不希望用戶(hù)打印某張圖片，你可以把打印功能從控制器中刪除。

注意

你不能改變系統(tǒng)默認(rèn)服務(wù)在控制器中的順序。同時(shí)，所有系統(tǒng)服務(wù)都應(yīng)該出現(xiàn)在自定義服務(wù)之前。

4.2.3 集合視圖

集合視圖用于管理一系列有序的項(xiàng)，并以一種自定義的布局來(lái)呈現(xiàn)它們。

API注釋

想要了解如何在代碼中定義集合視圖，請(qǐng)參考Collection View Programming Guide for iOS.

集合視圖：

• 可包含裝飾視圖，以從視覺(jué)上區(qū)分項(xiàng)的子集或者提供裝飾性項(xiàng)目，例如自定義背景。
• 布局切換時(shí)支持自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。（默認(rèn)情況下，當(dāng)用戶(hù)導(dǎo)入、移動(dòng)或者刪除項(xiàng)的時(shí)候，會(huì)出現(xiàn)系統(tǒng)默認(rèn)的動(dòng)畫(huà)效果。）
• 支持開(kāi)發(fā)者額外定義手勢(shì)識(shí)別來(lái)執(zhí)行自定義操作。默認(rèn)情況下，集合視圖可以識(shí)別輕擊（tap）某項(xiàng)以選中，和長(zhǎng)按（touch-and-hold）某項(xiàng)進(jìn)行編輯。

使用集合視圖來(lái)讓用戶(hù)查看和操作一系列不適合以列表形式呈現(xiàn)的項(xiàng)。由于集合視圖的布局不是一個(gè)嚴(yán)格的線(xiàn)性布局，因此尤其適合用來(lái)展示一些尺寸不一致的項(xiàng)。

集合視圖支持廣泛的自定義，因此我們要盡量避免把心思都放在進(jìn)行全新的設(shè)計(jì)上。集合視圖是用來(lái)幫助用戶(hù)更好地完成任務(wù)的，視圖本身并不是用戶(hù)體驗(yàn)的焦點(diǎn)所在。以下指南可以幫助你設(shè)計(jì)出用戶(hù)體驗(yàn)更好的集合視圖：

表格視圖（table view）更適用的時(shí)候，不要使用集合視圖。

有時(shí)候用戶(hù)會(huì)覺(jué)得以列表呈現(xiàn)的信息更容易閱讀和理解，例如將文本信息放在滾動(dòng)列表中的時(shí)候，用戶(hù)閱讀和處理起來(lái)會(huì)更為簡(jiǎn)單和高效。

讓視圖中的項(xiàng)更容易選中。

如果用戶(hù)很難點(diǎn)中集合視圖中的項(xiàng)，他們是不會(huì)愿意用你的應(yīng)用的。跟所有用戶(hù)可以點(diǎn)擊的UI對(duì)象一樣，請(qǐng)確保你的集合視圖中每一個(gè)項(xiàng)的最小點(diǎn)擊區(qū)域有44×44pt，尤其是在iPhone上。

當(dāng)你要讓整個(gè)布局進(jìn)行動(dòng)態(tài)變化時(shí)，請(qǐng)務(wù)必謹(jǐn)慎。

集合視圖允許你在用戶(hù)瀏覽和操作項(xiàng)的時(shí)候調(diào)整視圖的布局。但當(dāng)你決定調(diào)整它的時(shí)候，請(qǐng)確保這個(gè)動(dòng)態(tài)變化是有意義且容易跟蹤的。沒(méi)有明確目的而貿(mào)然改變集合視圖的布局會(huì)讓用戶(hù)對(duì)應(yīng)用留下難用、不符合預(yù)期等負(fù)面的印象。更有甚者，如果用戶(hù)此時(shí)關(guān)注的項(xiàng)在變化中消失了，用戶(hù)會(huì)覺(jué)得這個(gè)應(yīng)用超出了他們的控制能力。

4.2.4 容器視圖控制器

容器視圖控制器采用自定義的方式來(lái)管理和呈現(xiàn)它的視圖控制器或一系列子視圖。系統(tǒng)定義的容器視圖控制器典型例子包括標(biāo)簽欄視圖控制器（Tab bar view controller）、導(dǎo)航視圖控制器（navigation view controller）和對(duì)分視圖控制器（split view controller）。

API注釋

想要了解如何在代碼中定義容器視圖控制器，請(qǐng)參考UIViewController Class Reference.

容器視圖控制器不存在任何預(yù)先定義好的外觀(guān)或者行為。

用容器視圖控制器來(lái)呈現(xiàn)內(nèi)容，使用戶(hù)可以通過(guò)控制器來(lái)以自定義的方式進(jìn)行導(dǎo)航。

先問(wèn)問(wèn)你自己是不是必須用到容器視圖控制器。

用戶(hù)會(huì)更習(xí)慣諸如對(duì)分視圖、或者是標(biāo)簽欄視圖這類(lèi)他們所熟知的東西。你必須確保你設(shè)計(jì)的控制器的優(yōu)點(diǎn)不會(huì)由于用戶(hù)不熟悉、不認(rèn)識(shí)、不會(huì)用而白費(fèi)功夫。

確保你的容器內(nèi)容控制器在橫屏與豎屏模式都可用。

很重要的一點(diǎn)是，你的容器視圖控制器無(wú)論在橫屏還是豎屏中，體驗(yàn)都應(yīng)該是一致的。

一般來(lái)說(shuō)，避免太過(guò)花哨的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

如果你采用了故事板（storyboard）的設(shè)計(jì)方法來(lái)設(shè)計(jì)你的視圖控制器，你往往自然而然地會(huì)為它自定義一些動(dòng)畫(huà)。但絕大多數(shù)情況下，這些花哨的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)會(huì)讓用戶(hù)分心，讓他們忘記了當(dāng)前要做的事，還可能降低你的應(yīng)用整體的美感。

4.2.5 圖片視圖

圖片視圖用以展示一張單獨(dú)的圖片，或者一系列動(dòng)態(tài)圖片。

API注釋

想要了解如何在代碼中定義圖片視圖，請(qǐng)參考UIImageView.

圖片視圖：

• 不存在任何預(yù)先定義好的外觀(guān)，同時(shí)在默認(rèn)狀態(tài)下它不支持用戶(hù)的交互行為。
• 可以檢測(cè)圖片本身及其父視圖（parent view）的屬性，并決定這個(gè)圖片是否應(yīng)該被拉伸、縮放、調(diào)整到適合屏幕的大小，或者固定在一個(gè)特定的位置。

在iOS 7及以上版本里，包含了模版圖片（template image）的圖片視圖會(huì)把當(dāng)前的色調(diào)（tint color）應(yīng)用到圖片上。

請(qǐng)務(wù)必確保圖片視圖中的每一張圖片都保持相同的尺寸和比例。如果你的圖片尺寸各不相同，圖片視圖將會(huì)逐一對(duì)它們進(jìn)行調(diào)整；而當(dāng)你的圖片比例不一，渲染的時(shí)候很可能會(huì)出錯(cuò)。

4.2.6 地圖視圖

地圖視圖呈現(xiàn)地理數(shù)據(jù)，同時(shí)支持系統(tǒng)內(nèi)置地圖應(yīng)用的大部分功能（如下圖所示）。

API注釋

想要了解如何在代碼中定義圖片視圖，請(qǐng)參考MapKit Framework Reference.

地圖視圖：

• 通常以標(biāo)準(zhǔn)地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來(lái)展示地理區(qū)域
• 可以展示以單點(diǎn)標(biāo)注的備注，以及疊加圖層（繪制路徑或二維區(qū)域繪制輪廓的）
• 支持編程時(shí)定義的，或用戶(hù)所控制的縮放和移動(dòng)

利用地圖視圖可以給用戶(hù)提供一個(gè)可交互的地理區(qū)域視圖。如果你在開(kāi)發(fā)一個(gè)導(dǎo)航類(lèi)應(yīng)用（routing app），可以使用地圖視圖來(lái)展示你給用戶(hù)的路徑。

一般來(lái)說(shuō)，允許用戶(hù)在視圖中進(jìn)行交互行為。

用戶(hù)習(xí)慣了在系統(tǒng)內(nèi)置地圖中進(jìn)行交互，因此他們會(huì)有預(yù)期，能在你所提供的地圖中進(jìn)行類(lèi)似的行為。

使用標(biāo)準(zhǔn)的地圖標(biāo)注顏色。

地圖上標(biāo)注了一系列地點(diǎn)。因?yàn)橛脩?hù)習(xí)慣了內(nèi)置地圖的各個(gè)標(biāo)注的顏色，所以最好避免在你的應(yīng)用中重新定義這些顏色的含義。定義顏色時(shí)，請(qǐng)遵循以下這些標(biāo)準(zhǔn)：

• 紅色表示目的地
• 綠色表示起點(diǎn)
• 紫色表示用戶(hù)指定的地點(diǎn)（User-Specified Point）

4.2.7 頁(yè)面視圖控制器

頁(yè)面視圖控制器通過(guò)滾動(dòng)（Scrolling）或翻頁(yè) （Page-curl transition style）兩種方式來(lái)處理長(zhǎng)度超過(guò)一頁(yè)的內(nèi)容。下圖是iOS模擬器中的翻頁(yè)樣式：

API注釋

想要了解如何在代碼中定義圖片視圖，請(qǐng)參考Page View Controllers.

頁(yè)面視圖控制器：

• 帶滾動(dòng)條的頁(yè)面視圖控制器沒(méi)有默認(rèn)的外觀(guān)。

帶翻頁(yè)效果的控制器可以在兩頁(yè)中間增加書(shū)脊（book spine）的效果

• 可以根據(jù)指定的轉(zhuǎn)場(chǎng)來(lái)模擬出頁(yè)面切換時(shí)的動(dòng)畫(huà)。

使用滾動(dòng)條效果的時(shí)候，當(dāng)前頁(yè)面將滾動(dòng)到下一頁(yè)；而使用翻頁(yè)效果時(shí)，頁(yè)面上會(huì)出現(xiàn)一個(gè)模擬實(shí)體書(shū)或筆記本翻頁(yè)效果的翻頁(yè)動(dòng)畫(huà)

使用頁(yè)面視圖控制器來(lái)展示那些線(xiàn)性的內(nèi)容（比如一個(gè)故事的文本），或者是一些可以被自然地拆分成塊的內(nèi)容（比如日歷）。

如果需要的話(huà)，設(shè)計(jì)一種自定義的方式讓用戶(hù)可以以非線(xiàn)性的方式來(lái)獲取內(nèi)容。

頁(yè)面視圖控制器讓用戶(hù)從一頁(yè)移動(dòng)到前一頁(yè)或者后一頁(yè)，而并不支持用戶(hù)在并不相鄰的頁(yè)面間快速切換。如果你希望在頁(yè)面視圖控制器中展示一些非線(xiàn)性的內(nèi)容——比如說(shuō)字典，或者書(shū)籍的目錄——那么你就需要自定義一種方式，讓用戶(hù)可以隨意地到達(dá)不同的內(nèi)容區(qū)塊。

4.2.8 浮出層

浮出層是當(dāng)用戶(hù)輕點(diǎn)某個(gè)控件或頁(yè)面中的某一區(qū)域時(shí)浮出的，半透明的臨時(shí)視圖。

API注釋

在iOS 8以及以上版本里，你可以使用UIPopoverPresentationController來(lái)展示一個(gè)浮出層。UIPopoverPresentationController定義了一種委托，讓你可以調(diào)整浮出層的內(nèi)容樣式，讓它能夠更好地適應(yīng)當(dāng)前的屏幕內(nèi)容。舉個(gè)例子，在橫屏視圖中，你的內(nèi)容可能會(huì)全部承載在浮出層內(nèi)部；而在豎屏的情況下，浮出層可以以一種全屏模態(tài)視圖的樣式出現(xiàn)。

浮出層：

• 是一個(gè)自包含的模態(tài)視圖
• 在橫屏環(huán)境中，浮出層會(huì)包含一個(gè)箭頭，指向其出處
• 背景是半透明的，并且會(huì)模糊其背后的內(nèi)容（毛玻璃效果）
• 可以包含多種對(duì)象和視圖，比如：
• 表格，圖片，地圖，文本，網(wǎng)頁(yè)或者自定義視圖
• 導(dǎo)航欄，工具欄，和標(biāo)簽欄
• 可以操作當(dāng)前app視圖中的對(duì)象的各種控件或?qū)ο?/li>

（默認(rèn)情況下， 浮出層中的表格視圖，導(dǎo)航欄和工具欄的背景都是透明的，這樣會(huì)讓浮出層的毛玻璃效果展示出來(lái)）

在橫屏的情況下，動(dòng)作列表總是出現(xiàn)在浮出層里。

使用浮出層來(lái)展示與當(dāng)前焦點(diǎn)或被選中對(duì)象相關(guān)的額外信息，或者相關(guān)的一系列項(xiàng)。

重要

這一個(gè)部分的指引僅適用于在橫屏情況下的UI與用戶(hù)體驗(yàn)。如果你想在豎屏環(huán)境中展示全屏的浮出層，請(qǐng)參閱下文中的模態(tài)視圖相關(guān)內(nèi)容。

避免提供“取消浮出層”按鈕。浮出層應(yīng)當(dāng)在它不需要的時(shí)候自動(dòng)關(guān)閉。如果要決定什么時(shí)候不再需要浮出層，請(qǐng)考慮如下場(chǎng)景：

一般來(lái)說(shuō)，在用戶(hù)點(diǎn)擊浮出層以外的區(qū)域的時(shí)候，保存用戶(hù)輸入的內(nèi)容。

不是每一個(gè)浮出層都會(huì)讓用戶(hù)明確地確認(rèn)取消操作，因此用戶(hù)可能會(huì)誤操作。只有當(dāng)用戶(hù)點(diǎn)擊“取消”按鈕時(shí)，才清空他們?cè)诟〕鰧又休斎氲膬?nèi)容。

讓浮出層中的箭頭盡可能直接地指向其出處。

這樣有助于用戶(hù)這個(gè)浮出層是從哪里來(lái)的，以及他們與哪些任務(wù)和對(duì)象相關(guān)。

確保用戶(hù)在看不到浮出層背后的內(nèi)容的時(shí)候仍然能順利使用浮出層。

浮出層會(huì)模糊背后的內(nèi)容而且用戶(hù)不能把它拖拽到其它位置。

確保同一時(shí)間內(nèi)屏幕上只有一個(gè)浮出層。你不應(yīng)該同時(shí)展示超過(guò)一個(gè)浮出層（或者外觀(guān)和行為跟浮出層很相似的模態(tài)視圖）。尤其應(yīng)當(dāng)避免同時(shí)展示一連串或者一系列浮出層，從一個(gè)浮出層中彈出另一個(gè)浮出層。

不要在浮出層上面再展示一個(gè)模態(tài)視圖。

除了告警框（alert）外，浮出層中不應(yīng)當(dāng)有任何模態(tài)視圖。

可能的話(huà)，讓用戶(hù)可以?xún)H點(diǎn)擊一下就關(guān)閉當(dāng)前浮出層并開(kāi)啟一個(gè)新的浮出層。

這在若干欄按鈕每個(gè)都會(huì)喚起一個(gè)浮出層的時(shí)候尤其好用，因?yàn)樗鼫p少了用戶(hù)的額外點(diǎn)擊。

不要把浮出層設(shè)計(jì)得太大。浮出層不應(yīng)當(dāng)占據(jù)整個(gè)屏幕。相反，它的大小應(yīng)當(dāng)恰好能承載當(dāng)中的內(nèi)容，又能清楚地指向浮出層的喚起出處。浮出層的高度是不固定的，因此你可以用它來(lái)承載一個(gè)很長(zhǎng)的項(xiàng)目列表。但一般來(lái)說(shuō)，還是應(yīng)當(dāng)避免需要滾動(dòng)浮出層才能開(kāi)啟一個(gè)任務(wù)。請(qǐng)注意，系統(tǒng)可能會(huì)調(diào)整浮出層的寬高，以讓它能夠更好地適應(yīng)屏幕的尺寸。

在浮出層中使用標(biāo)準(zhǔn)的UI控件和視圖。

一般來(lái)說(shuō)，包含標(biāo)準(zhǔn)控件和視圖的浮出層看上去最理想，而且更容易讓用戶(hù)理解。

確保自定義浮出層仍然長(zhǎng)得像一個(gè)浮出層。

盡管使用UIPopoverBackgroundView API能夠很容易自定義浮出層的多種外觀(guān)屬性，還是應(yīng)當(dāng)避免設(shè)計(jì)出一個(gè)用戶(hù)可能無(wú)法辨識(shí)的浮出層外觀(guān)。如果你對(duì)浮出層的改動(dòng)過(guò)大，用戶(hù)就不能憑借之前的經(jīng)驗(yàn)來(lái)理解如何用你的app里的浮出層了。

當(dāng)浮出層可見(jiàn)的時(shí)候，想要改變它的尺寸的話(huà)請(qǐng)務(wù)必謹(jǐn)慎。

當(dāng)你要在浮出層里展示同樣信息的精簡(jiǎn)或拓展視圖時(shí)，你可能需要改變浮出層的大小。當(dāng)你一定要這么做的時(shí)候，使用轉(zhuǎn)場(chǎng)動(dòng)畫(huà)往往是個(gè)好主意，因?yàn)檫@不會(huì)讓人覺(jué)得一個(gè)新的彈出窗口取代了原來(lái)的窗口。

4.2.9 滾動(dòng)視圖（Scroll View）

滾動(dòng)視圖方便用戶(hù)瀏覽尺寸超越滾動(dòng)視圖邊界的圖片（下圖中地球的圖片無(wú)論是長(zhǎng)度還是寬度都超過(guò)了）。

API注釋

想要了解如何在代碼里定義滾動(dòng)視圖，請(qǐng)參考UIScrollView.

滾動(dòng)視圖：

• 沒(méi)有預(yù)定義的外觀(guān)
• 在剛出現(xiàn)或者當(dāng)用戶(hù)對(duì)它進(jìn)行操作的時(shí)候會(huì)短暫地閃爍
• 響應(yīng)速度和對(duì)各個(gè)操作手勢(shì)的識(shí)別都應(yīng)當(dāng)讓用戶(hù)感到自然。當(dāng)用戶(hù)在視圖中拖拽內(nèi)容，內(nèi)容隨之滾動(dòng)；當(dāng)用戶(hù)輕掃屏幕時(shí)，內(nèi)容將快速滾動(dòng)——直到用戶(hù)再次觸摸屏幕或內(nèi)容已經(jīng)到達(dá)底部時(shí)停止。
• 可以應(yīng)用在頁(yè)模式（paging mode）中，在此模式下用戶(hù)可以通過(guò)拖拽和輕擊等手勢(shì)來(lái)瀏覽一頁(yè)的內(nèi)容

使用滾動(dòng)視圖來(lái)允許用戶(hù)在固定的空間內(nèi)瀏覽大尺寸或大量的視圖。

適當(dāng)?shù)刂С挚s放操作。

如果放大和縮小對(duì)于當(dāng)前內(nèi)容是有用的話(huà)，你可以支持用戶(hù)通過(guò)捏或者雙擊來(lái)對(duì)當(dāng)前視圖進(jìn)行縮放。而若是支持了縮放操作的話(huà)，你還應(yīng)當(dāng)根據(jù)用戶(hù)當(dāng)前的任務(wù)來(lái)設(shè)定在當(dāng)前情景下允許縮放的最大值和最小值。如果你允許一個(gè)字符被放大到充滿(mǎn)整個(gè)屏幕的話(huà)，用戶(hù)會(huì)很難閱讀當(dāng)前內(nèi)容。

在頁(yè)模式滾動(dòng)視圖中，可以考慮使用頁(yè)面控件（page control）。

當(dāng)你想要展示分頁(yè)、分屏或者分塊的內(nèi)容，可以使用頁(yè)面控件來(lái)讓用戶(hù)知道當(dāng)前內(nèi)容一共有多少塊，以及他們當(dāng)前瀏覽的是第幾個(gè)。

當(dāng)你在滾動(dòng)視圖中使用頁(yè)面控件的時(shí)候，最好禁用同一方向的滾動(dòng)指示器（scroll indicator）。這樣一來(lái)可以讓用戶(hù)聚焦到頁(yè)碼控件上，并讓他們有了一種唯一且清晰的方式來(lái)瀏覽當(dāng)前內(nèi)容。想要了解更多，請(qǐng)參考下文控件中的頁(yè)面控件部分內(nèi)容。

一般來(lái)說(shuō)，一次只展示一個(gè)滾動(dòng)視圖。

由于用戶(hù)滾動(dòng)屏幕時(shí)動(dòng)作幅度經(jīng)常都會(huì)很大，如果在一屏中同時(shí)存在不止一個(gè)滾動(dòng)視圖，他們很容易會(huì)碰到另一個(gè)。如果你確實(shí)要在同屏中放兩個(gè)滾動(dòng)視圖，可以考慮給他們?cè)O(shè)定不同的滾動(dòng)方向，來(lái)避免用戶(hù)想要滾動(dòng)一個(gè)視圖的時(shí)候誤操作。比如iPhone上的股票應(yīng)用，縱向滾動(dòng)上半部分會(huì)展示股票報(bào)價(jià)，橫向滾動(dòng)下半部分時(shí)則展示該公司的特定信息。

4.2.10 分欄視圖控制器

分欄視圖控制器是一個(gè)用于管理兩個(gè)相鄰視圖控制器顯示的全屏視圖控制器。

API注釋

每一個(gè)對(duì)分視圖控制器的子視圖負(fù)責(zé)管理一個(gè)窗格的展現(xiàn)。對(duì)分視圖控制器本身負(fù)責(zé)展示這些子視圖控制器與管理不同屏幕方向下對(duì)分視圖的轉(zhuǎn)場(chǎng)效果。想要了解更多如何在代碼里定義對(duì)分視圖，請(qǐng)參考UISplitViewController Class Reference和SplitControllers.

在iOS 7及之前的版本里，對(duì)分視圖控制器僅適用于iPad.

默認(rèn)情況下，對(duì)分視圖控制器通過(guò)當(dāng)前的尺寸來(lái)管理其子視圖。舉個(gè)例子，對(duì)分視圖：

• 可以在橫屏環(huán)境中展示并排展示兩個(gè)窗格
• 可以讓主窗格在詳情窗格上方顯示，也可以在不需要的時(shí)候（尤其是豎屏情況下）隱藏主窗格。

你可以指定特殊的展示環(huán)境下對(duì)分視圖的版式，并且通過(guò)請(qǐng)求對(duì)分視圖控制器聚焦于這個(gè)版式，以此改變窗格的排列方式。

對(duì)分視圖控制器包含廣泛的對(duì)象和視圖，諸如：

• 表格，圖像，地圖，文本，網(wǎng)絡(luò)，或自定義視圖
• 導(dǎo)航欄，工具欄，或標(biāo)簽欄

注意

即使左側(cè)窗格通常被稱(chēng)為主窗格，右側(cè)窗格被稱(chēng)為詳情窗格，但在代碼中并沒(méi)有強(qiáng)制固定這種從屬關(guān)系。

使用對(duì)分視圖控制器，在左側(cè)主窗格展示固定的信息，在右側(cè)詳情窗格展示相關(guān)的詳情或從屬信息。以這種設(shè)計(jì)模式，當(dāng)用戶(hù)選擇類(lèi)主視圖中的某一項(xiàng)，右側(cè)詳情窗格應(yīng)當(dāng)展示相應(yīng)與這一項(xiàng)相關(guān)的內(nèi)容。（你應(yīng)當(dāng)在代碼中實(shí)現(xiàn)這個(gè)效果。）

避免創(chuàng)建一個(gè)比主窗格更窄的詳情窗格。

如果右側(cè)詳情窗格比左側(cè)主窗格窄，對(duì)分視圖控制器將不能占滿(mǎn)整個(gè)屏幕，產(chǎn)生視覺(jué)不平衡的整體效果。

避免在兩側(cè)窗格中都同時(shí)展示導(dǎo)航欄。

這樣會(huì)讓用戶(hù)很難分清這兩個(gè)窗格的從屬關(guān)系。

一般來(lái)說(shuō)，始終顯示左側(cè)主窗格中當(dāng)前選中的項(xiàng)。

盡管右側(cè)窗格中的內(nèi)容會(huì)變化，但它應(yīng)當(dāng)始終保持著與當(dāng)前選中窗格的相關(guān)性。這樣的體驗(yàn)有助于用戶(hù)理解左側(cè)窗格項(xiàng)與右側(cè)窗格內(nèi)容的關(guān)系。

合適的話(huà)，給用戶(hù)提供不止一種獲取主窗格的方式。

默認(rèn)情況下，豎屏方向時(shí)只會(huì)展示右側(cè)窗格，因此你需要向用戶(hù)提供一個(gè)按鈕（通常位于導(dǎo)航欄上）來(lái)讓用戶(hù)喚起和隱藏主窗格。對(duì)分視圖控制器也支持輕掃手勢(shì)來(lái)執(zhí)行呼出和隱藏的動(dòng)作。除非你的app有定義輕掃的手勢(shì)執(zhí)行其他功能，否則你應(yīng)當(dāng)支持用戶(hù)輕掃以喚起左側(cè)窗格。

4.2.11 表格視圖

表格視圖以一個(gè)可滾動(dòng)的單列多行的形式來(lái)展示數(shù)據(jù)。

API注釋

想要了解如何在代碼中定義表格視圖，請(qǐng)參考Tabel View Programming Guide for the iOS以及UITableView.

表格視圖：

• 以容易進(jìn)行分段或分組的單列形式展示數(shù)據(jù)
• 用戶(hù)可以通過(guò)點(diǎn)擊來(lái)選中某行，或通過(guò)控件來(lái)添加、移除、多選、查看詳情或者展開(kāi)另一個(gè)表格視圖

iOS定義了兩種表格樣式：

分組型（Grouped）。

表格行以分組形式展示，可以有頁(yè)眉和頁(yè)腳。分組表格視圖中至少含有一組列表，而每一組中至少包含一項(xiàng)內(nèi)容。與平鋪型不同，分組型表格沒(méi)有索引。

平鋪型（Plain）。

平鋪型表格可被分為若干帶標(biāo)簽的段落，表格右側(cè)可能會(huì)出現(xiàn)垂直的表格索引。每行開(kāi)頭可以有頁(yè)眉，尾部可以有頁(yè)腳（也可以沒(méi)有）。

在這兩種樣式中，當(dāng)用戶(hù)選中某一行時(shí)，該行會(huì)短暫地高亮。當(dāng)選中某行將展開(kāi)另外一屏內(nèi)容的時(shí)候，該行會(huì)短暫地高亮，然后新一屏內(nèi)容滑入。當(dāng)用戶(hù)回到前一屏?xí)r，之前選中的那一行同樣會(huì)短暫地高亮，提醒用戶(hù)他們先前選中了什么（但并不會(huì)一直保持高亮）。

除了以上表格中列舉的元素外，iOS定義了刷新控件，讓用戶(hù)可以刷新當(dāng)前的表格內(nèi)容。想要了解更多關(guān)于刷新控件的用法，可以參考文檔本章第三節(jié)控件中的刷新控件。iOS提供了若干表格視圖元素（table-view elements）來(lái)擴(kuò)展表格視圖的功能。除了特別標(biāo)明外，這些元素只適用于表格視圖。

iOS定義了在平鋪型表格和分組型表格中最常用到的四種單元格布局樣式。每種單元格樣式都有最適合展示的信息類(lèi)型。

重要

從編程角度來(lái)說(shuō)，這些樣式應(yīng)用于單元格中，用以控制表格里每一列的繪制方式。

默認(rèn)型（Default）（UITableViewCellStyleDefault）。

默認(rèn)型樣式包括左側(cè)的圖標(biāo)（可選），和圖標(biāo)右邊左對(duì)齊的文字標(biāo)題。

默認(rèn)型樣式適合展示一系列無(wú)須通過(guò)附加信息便可以區(qū)分的項(xiàng)。

副標(biāo)題型（Subtitled）（UITableViewCellStyleSubtitle）。

副標(biāo)題型包括左側(cè)圖標(biāo)（可選），圖標(biāo)右邊左對(duì)齊展示的文字標(biāo)題，以及在標(biāo)題下方同樣左對(duì)齊展示的副標(biāo)題。

左對(duì)齊的文本標(biāo)簽讓用戶(hù)可以更快速地掃視表格。這種樣式適用于列表各項(xiàng)較為相似的情況，用戶(hù)可以通過(guò)副標(biāo)題中的詳細(xì)信息來(lái)區(qū)分列表中的各項(xiàng)。 （UITableViewCellStyleSubtitle）。副標(biāo)題型包括左側(cè)圖標(biāo)（可選），圖標(biāo)右邊左對(duì)齊展示的文字標(biāo)題，以及在標(biāo)題下方同樣左對(duì)齊展示的副標(biāo)題。

Value 1 （UITableViewCellStyleValue1）.在Value 1樣式下，標(biāo)題左對(duì)齊，副標(biāo)題用較細(xì)的字體右對(duì)齊。

Value 2 （UITableViewCellStyleValue2）.Value 2樣式藍(lán)色字體標(biāo)題右對(duì)齊，黑色字體的副標(biāo)題左對(duì)齊，混排在同一行中。這種樣式通常不包含圖片。

Value 2的布局中，文本和副標(biāo)題中間的垂直間距會(huì)讓用戶(hù)專(zhuān)注于副標(biāo)題的第一個(gè)單詞。

重要

以上四種單元格樣式均支持添加表格視圖元素，如勾選或展開(kāi)標(biāo)志。添加這些元素會(huì)縮小標(biāo)題以及副標(biāo)題單元格的可用寬度。

使用表格視圖可以簡(jiǎn)潔而高效地展示少量或者大量信息。舉例來(lái)說(shuō)，你可以通過(guò)表格視圖來(lái)：

• 展示用戶(hù)可選的選項(xiàng)列表。你可以使用選中標(biāo)記來(lái)告知用戶(hù)當(dāng)前選中了哪些項(xiàng)。

無(wú)論是平鋪型還是分組性，用戶(hù)點(diǎn)擊某一行中的某一項(xiàng)時(shí)都可以顯示一個(gè)選項(xiàng)列表。當(dāng)用戶(hù)點(diǎn)選了一個(gè)不屬于表格行的按鈕或者其他UI元素的時(shí)候，可以使用平鋪型表格視圖來(lái)展示喚起的選項(xiàng)列表。

• 展示層級(jí)信息。平鋪型表格樣式非常適合展示層級(jí)信息。表格中的每項(xiàng)都指向承載于另一個(gè)列表中的不同子信息。用戶(hù)可以沿著這些層級(jí)結(jié)構(gòu)的路徑來(lái)點(diǎn)擊每一層列表中的項(xiàng)。以展開(kāi)標(biāo)志告知用戶(hù)點(diǎn)擊這一列中的任何位置，都將展開(kāi)新的列表以展示其子類(lèi)信息。
• 展示可以在概念上進(jìn)行分組的信息。平鋪型和分組型列表都允許你通過(guò)提供頁(yè)眉和頁(yè)腳來(lái)對(duì)信息進(jìn)行分組和分段。

你可以用頁(yè)眉頁(yè)腳視圖（header-footer view）——即UITableViewHearderFooterView中的一個(gè)實(shí)例——來(lái)展示頁(yè)眉和頁(yè)腳的文字，或圖片。想要了解如何在代碼中定義頁(yè)眉頁(yè)腳視圖，請(qǐng)參考UITableViewHeaderFooterView Class Reference.

使用表格視圖時(shí)，可遵循以下這些指引：

用戶(hù)選擇列表項(xiàng)時(shí)，始終給與反饋。

當(dāng)用戶(hù)點(diǎn)擊可選的列表項(xiàng)時(shí)會(huì)認(rèn)為被點(diǎn)擊的項(xiàng)都應(yīng)短暫地高亮一下。在點(diǎn)擊后，用戶(hù)期望出現(xiàn)新的視圖，或者出現(xiàn)一個(gè)復(fù)選標(biāo)記以表明先前點(diǎn)擊的項(xiàng)已經(jīng)被選中或激活。

如果表格的內(nèi)容龐大而且復(fù)雜，不要在所有數(shù)據(jù)都加載完之后才一起顯示出來(lái)。

可以首先展示文本信息，圖片等較為復(fù)雜的內(nèi)容則在加載完后再顯示。這樣可以將有用的信息立即傳達(dá)給用戶(hù)，同時(shí)也提高了應(yīng)用的響應(yīng)能力。

在等待信息加載的時(shí)候，可以考慮展示“過(guò)期”信息。

盡管我們并不推薦在數(shù)據(jù)頻繁變化的應(yīng)用中這樣做，它還是可以幫助更多的靜態(tài)應(yīng)用程序立即給到用戶(hù)有用的信息。當(dāng)然在你這么做之前，請(qǐng)認(rèn)真衡量你應(yīng)用中數(shù)據(jù)的變化頻率，并弄清楚你的目標(biāo)用戶(hù)有多需要立即獲取最新的信息。

如果信息加載速度很慢或者非常復(fù)雜，你需要告訴用戶(hù)加載正在進(jìn)行中。

如果表格中所有內(nèi)容都很復(fù)雜，我們很難即時(shí)地給用戶(hù)展示任何內(nèi)容。在這種極端情況下，切勿顯示空白的表格，因?yàn)檫@會(huì)讓用戶(hù)以為應(yīng)用掛了。此時(shí)應(yīng)當(dāng)在屏幕中央展示一個(gè)活動(dòng)指示器（activity indicator）和一個(gè)信息標(biāo)簽（information label），比如“加載中…”，讓用戶(hù)知道加載仍然在進(jìn)行。

如果合適的話(huà)，為刪除按鈕自定義一個(gè)名稱(chēng)。

如果這能讓用戶(hù)更好地理解應(yīng)用的相關(guān)功能的話(huà)，你可以創(chuàng)建一個(gè)合適的標(biāo)題，來(lái)取代“刪除”這個(gè)字樣。

盡量使用簡(jiǎn)潔的文字標(biāo)簽，以避免被截?cái)唷?/strong>

繁冗的文字和詞組不方便用戶(hù)瀏覽和理解。以上所有單元格樣式均會(huì)自動(dòng)截?cái)辔谋荆谋窘財(cái)嗨斐傻膯?wèn)題可大可小，取決于你采用的單元格樣式，以及被截?cái)嗔四囊徊糠治淖帧?/p>

如果你想以一種非標(biāo)準(zhǔn)的形式來(lái)布局你的表格，最好是自定義一種單元格樣式，而不是在現(xiàn)有的表格樣式上進(jìn)行改動(dòng)。如何創(chuàng)建自定義單元格樣式，請(qǐng)參考Table View Programming Guide for iOS中的Customizing Cells部分。

4.2.12 文本視圖

文本視圖可以接收和展示多行文本。

API注釋

想了解如何在代碼中定義文本視圖，參考Text Views.

文本視圖：

• 是一個(gè)可定義為任何高度的矩形
• 當(dāng)內(nèi)容太多超出視圖的邊框時(shí)，文本視圖支持滾動(dòng)
• 支持自定義字體、顏色和對(duì)齊方式（默認(rèn)情況下，文本視圖會(huì)以左對(duì)齊的黑色系統(tǒng)字體顯示）
• 可以支持用戶(hù)編輯，當(dāng)用戶(hù)輕擊文本視圖內(nèi)部時(shí)，將喚起鍵盤(pán)（鍵盤(pán)的布局和類(lèi)型取決于用戶(hù)的系統(tǒng)語(yǔ)言設(shè)置）

始終確保文字的易讀性。

雖然你可以使用屬性字符串將不同的字體、字色和對(duì)齊方式串聯(lián)在同一個(gè)文本視圖內(nèi)，但保持文本的可讀性是必不可少的。最好是可以支持動(dòng)態(tài)文本（Dynamic Type）和UIFont method preferredFontForTextStyle來(lái)展示文本框中的文本。想要了解更多動(dòng)態(tài)文本的指引，可以參閱本文第一章中顏色與字體里的部分；想要了解更多編程相關(guān)的內(nèi)容，可以參閱Text Styles.

根據(jù)輸入內(nèi)容的類(lèi)型來(lái)指定不同的鍵盤(pán)類(lèi)型。

舉例來(lái)說(shuō)，你希望用戶(hù)能更方便地輸入網(wǎng)址、密碼或者電話(huà)號(hào)碼。但請(qǐng)注意，由于鍵盤(pán)的布局以及輸入方法是由用戶(hù)的系統(tǒng)語(yǔ)言設(shè)置決定的，這是你不能控制的。

iOS提供了各種不同的鍵盤(pán)類(lèi)型，以便用戶(hù)輸入不同類(lèi)型的文本。想要了解可用鍵盤(pán)類(lèi)型，可以參考UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤(pán)，請(qǐng)參考Managing the Keyboard.

4.2.13 網(wǎng)絡(luò)視圖

網(wǎng)絡(luò)視圖是一個(gè)可以展示豐富的HTML內(nèi)容的區(qū)域。（下圖是iPhone自帶的郵件應(yīng)用，網(wǎng)絡(luò)視圖指的是下圖中導(dǎo)航欄和標(biāo)簽欄中間的區(qū)域）

API注釋

想要了解如何在代碼中定義網(wǎng)絡(luò)視圖，請(qǐng)參考Web Views.

網(wǎng)絡(luò)視圖：

• 展示網(wǎng)絡(luò)內(nèi)容
• 會(huì)自動(dòng)處理頁(yè)面中的內(nèi)容，比如把頁(yè)面中的電話(huà)號(hào)碼轉(zhuǎn)化成電話(huà)鏈接（譯者按：phone link，點(diǎn)擊之后iPhone將自動(dòng)撥打該號(hào)碼）。

如果你有一個(gè)網(wǎng)頁(yè)或者網(wǎng)絡(luò)應(yīng)用，你大約會(huì)用網(wǎng)絡(luò)視圖來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的iOS App，來(lái)對(duì)你的網(wǎng)頁(yè)或者應(yīng)用進(jìn)行一個(gè)封裝。如果你打算用網(wǎng)絡(luò)視圖來(lái)訪(fǎng)問(wèn)你所控制的網(wǎng)頁(yè)內(nèi)容，請(qǐng)務(wù)必閱讀Safari Web Content Guide.

不要用網(wǎng)絡(luò)視圖來(lái)創(chuàng)建一個(gè)看起來(lái)像迷你網(wǎng)絡(luò)瀏覽器的應(yīng)用。

用戶(hù)期望使用iOS自帶的Safari來(lái)瀏覽網(wǎng)頁(yè)內(nèi)容，因此我們并不推薦你在自己的app里復(fù)制這種以被廣泛應(yīng)用的功能。

4.3 控件

4.3.1 活動(dòng)指示器

活動(dòng)指示器表明任務(wù)或進(jìn)程正在進(jìn)行中，如下圖所示。

API注釋

想要了解如何在代碼中定義活動(dòng)指示器，可以參考UIActivityIndicatorView Class Reference.

活動(dòng)指示器：

• 當(dāng)任務(wù)進(jìn)行和加載時(shí)旋轉(zhuǎn)，任務(wù)完成后自動(dòng)消失
• 不支持用戶(hù)交互行為

在工具欄或主視圖中使用活動(dòng)指示器來(lái)告知用戶(hù)任務(wù)或加載正在進(jìn)行中，但并不提示該過(guò)程何時(shí)會(huì)結(jié)束。

不要使用靜止的活動(dòng)指示器。用戶(hù)會(huì)以為該進(jìn)程停滯了。

用活動(dòng)指示器來(lái)讓用戶(hù)知道進(jìn)程仍在進(jìn)行中。有些時(shí)候，告訴用戶(hù)進(jìn)程沒(méi)有停止比告訴他們何時(shí)完成更加重要。

設(shè)計(jì)一個(gè)與應(yīng)用的風(fēng)格協(xié)調(diào)的活動(dòng)指示器。可以的話(huà)，讓活動(dòng)指示器的尺寸和顏色與它所在的背景協(xié)調(diào)。

4.3.2 添加聯(lián)系人按鈕

添加聯(lián)系人按鈕讓用戶(hù)將現(xiàn)有聯(lián)系人添加到文本框或者其它文字視圖中。

API注釋

想要了解如何在代碼中定義添加聯(lián)系人按鈕，請(qǐng)參考UIButton.

添加聯(lián)系人按鈕：

• 展示聯(lián)系人列表
• 幫助用戶(hù)將一個(gè)聯(lián)系人添加到當(dāng)前聯(lián)系人按鈕所在的視圖中

使用添加聯(lián)系人按鈕讓用戶(hù)在不需要使用鍵盤(pán)的情況下就可以方便地訪(fǎng)問(wèn)到聯(lián)系人。舉個(gè)例子，在新建郵件的界面中，用戶(hù)可以點(diǎn)擊該按鈕來(lái)在郵件中添加收件人，而不需要用鍵盤(pán)輸入收件人的名字。

由于添加聯(lián)系人按鈕屬于鍵盤(pán)輸入聯(lián)系人方法的替代品，我們不推薦在不支持鍵盤(pán)輸入的界面中使用添加聯(lián)系人按鈕。

4.3.3 日期時(shí)間選擇器

日期時(shí)間選擇器展示關(guān)于日期和時(shí)間的組件，比如小時(shí)，分鐘，天，以及年。

API注釋

想要了解如何在代碼中定義添加日期時(shí)間選擇器，請(qǐng)參考UIDatePicker.

日期時(shí)間選擇器：

• 最多可以展示4個(gè)獨(dú)立的滑輪，每一個(gè)滑輪表示一個(gè)不同的值，比如月份或小時(shí)等
• 在每個(gè)滑輪的中央使用深色字體來(lái)表示當(dāng)前選中的值
• 日期時(shí)間選擇器的大小與iPhone鍵盤(pán)的大小相同，并且不可更改
• 包括四種模式，每一種模式代表了一組不同的值:

• 日期和時(shí)間。日期和時(shí)間模式（默認(rèn)模式）包含日期、小時(shí)、和分鐘，以及一個(gè)可選的AM/PM值。
• 時(shí)間。時(shí)間模式包括小時(shí)和分鐘，以及可選的AM/PM值。
• 日期。日期模式包括月份，天以及年三個(gè)值。
• 倒計(jì)時(shí)器。倒計(jì)時(shí)器模式展示了小時(shí)和分鐘值。你可以精確地設(shè)定總共的倒計(jì)時(shí)間，倒計(jì)時(shí)的最大值為23小時(shí)59分鐘。

使用日期時(shí)間選擇器來(lái)讓用戶(hù)選擇時(shí)間，而不是讓用戶(hù)自己輸入一個(gè)包含了日期、時(shí)間等多個(gè)部分的時(shí)間值。

盡量地讓用戶(hù)在當(dāng)前內(nèi)容中使用日期選擇器。

盡量地讓用戶(hù)在當(dāng)前內(nèi)容中使用日期選擇器。最好避免用戶(hù)在使用日期選擇器的時(shí)候要進(jìn)入另外一個(gè)界面。在水平方向的常規(guī)環(huán)境，日期時(shí)間選擇器可能會(huì)出現(xiàn)在一個(gè)浮層中，或者嵌入在當(dāng)前內(nèi)容里。

有必要的時(shí)候，改變分鐘滑輪的單位刻度。

在默認(rèn)情況下，分鐘滑輪包含從0到59共60個(gè)值，如果你要展示一個(gè)顆粒度較大的時(shí)間，你可以讓分鐘滑輪的單位刻度變大，只要這個(gè)刻度可以整除60。比如說(shuō)你可能會(huì)設(shè)定每15分鐘為一個(gè)刻度，此時(shí)分鐘滑輪就有4個(gè)值，0、15、30、45。

4.3.4 詳情展開(kāi)按鈕

詳情展開(kāi)按鈕展示了與該項(xiàng)相關(guān)的更多詳細(xì)信息與功能描述。

API注釋

想要了解如何在代碼中定義詳情展開(kāi)按鈕，可以參考UITableViewCell Class Reference和UIButton.

詳情展開(kāi)按鈕以一個(gè)單獨(dú)的視圖展示特定項(xiàng)目的更多詳情信息與功能。

當(dāng)詳情展開(kāi)按鈕在表格行中出現(xiàn)時(shí)，點(diǎn)擊表格行的其它區(qū)域不會(huì)激活此按鈕，只會(huì)選中該行，或者觸發(fā)app中其它自定義的行為。

一般來(lái)說(shuō)，你會(huì)在一個(gè)表格視圖中使用詳情展開(kāi)按鈕來(lái)讓用戶(hù)知道更多關(guān)于這個(gè)列表項(xiàng)的信息。當(dāng)然你也可以將這個(gè)按鈕用在其它類(lèi)型的視圖中來(lái)為用戶(hù)展示更多與特定項(xiàng)目相關(guān)的信息和功能。

4.3.5 信息按鈕

信息按鈕展示了app的配置信息，有時(shí)候它會(huì)出現(xiàn)在當(dāng)前視圖的背面。

API注釋

想要了解如何在代碼中定義信息按鈕，可以參考UIButton.

iOS包含了兩種信息按鈕樣式：適用于淺色內(nèi)容上的深色按鈕，以及適用于深色內(nèi)容上的淺色按鈕。

使用信息按鈕來(lái)顯示app的配置信息或選項(xiàng)。你可以根據(jù)自己app的UI風(fēng)格來(lái)選擇最為協(xié)調(diào)的信息按鈕樣式。

4.3.6 標(biāo)簽

標(biāo)簽用于放置靜態(tài)文本。

API注釋

想要了解如何在代碼中定義標(biāo)簽，可以參考UILabel Class Reference.

標(biāo)簽可以：

• 展示任意數(shù)量的靜態(tài)文本
• 禁止除了復(fù)制文本外的任何用戶(hù)交互行為

你可以使用標(biāo)簽來(lái)命名或解釋你的部分UI，又或者用它來(lái)給用戶(hù)提供一些簡(jiǎn)單的信息。標(biāo)簽最適合拿來(lái)展示相對(duì)簡(jiǎn)單的文本信息。

保證你的標(biāo)簽清晰易讀。

最好支持動(dòng)態(tài)文本（Dynamic Type），并使用 UIFont 中的preferredFontForTextStyle來(lái)獲得標(biāo)簽中的展示文本。如果你要用自定義字體的話(huà)，請(qǐng)慎重選擇字體種類(lèi)，不要以犧牲清晰度為代價(jià)來(lái)?yè)Q取花哨的顏色和字體效果。（想要了解關(guān)于app中字體使用的指南，可以參考 Color and Typography;想要了解更多動(dòng)態(tài)文本的內(nèi)容，可以參考 Text Programming Guide for iOS 里面 的 Text Styles 部分。）

4.3.7 網(wǎng)絡(luò)活動(dòng)指示器

網(wǎng)絡(luò)活動(dòng)指示器在狀態(tài)欄中出現(xiàn)，表示網(wǎng)絡(luò)活動(dòng)正在進(jìn)行。

API注釋

你可以在代碼中使用 UIApplication的networkActivityIndicatorVisible 來(lái)控制該活動(dòng)指示器的可見(jiàn)性。

網(wǎng)絡(luò)活動(dòng)指示器：

• 出現(xiàn)在狀態(tài)欄中，當(dāng)網(wǎng)絡(luò)活動(dòng)正在進(jìn)行時(shí)它會(huì)旋轉(zhuǎn)，在活動(dòng)停止時(shí)它則消失
• 不支持用戶(hù)交互行為

當(dāng)你的app正在鏈接網(wǎng)絡(luò)，而這個(gè)連接過(guò)程將會(huì)持續(xù)好幾秒的時(shí)候，你可以通過(guò)網(wǎng)絡(luò)活動(dòng)指示器來(lái)給用戶(hù)以反饋。如果進(jìn)程所需時(shí)間很短，則不需要用到它，因?yàn)楹芸赡茉谟脩?hù)注意到它之前，它就消失了。

4.3.8 頁(yè)面控件

頁(yè)面控件告訴用戶(hù)當(dāng)前共打開(kāi)了多少個(gè)視圖，還有他們正處在其中哪一個(gè)。

API注釋

想要了解如何在代碼中定義頁(yè)面控件，可以參考UIPageControls.

頁(yè)面控件：

• 包含一系列圓點(diǎn)，圓點(diǎn)的個(gè)數(shù)代表了當(dāng)前打開(kāi)的視圖數(shù)量（從左到右，這些圓點(diǎn)代表了視圖打開(kāi)的先后順序）
• 默認(rèn)情況下，使用不透明點(diǎn)來(lái)標(biāo)識(shí)當(dāng)前打開(kāi)的視圖，使用半透明點(diǎn)來(lái)表示所有其它視圖
• 不支持用戶(hù)訪(fǎng)問(wèn)不連續(xù)的視圖
• 當(dāng)視圖數(shù)量超過(guò)頁(yè)面寬度可承載的氛圍時(shí)，點(diǎn)的大小和間距并不會(huì)因此變小（如果需要顯示的點(diǎn)超過(guò)一定數(shù)量，系統(tǒng)會(huì)把它截?cái)啵?/li>
• 默認(rèn)情況下不支持視圖之間導(dǎo)航；你必須實(shí)現(xiàn)視圖到視圖之間的導(dǎo)航并適當(dāng)?shù)馗马?yè)面控件狀態(tài)

當(dāng)告知用戶(hù)有多少打開(kāi)的視圖的需求比幫助用戶(hù)選擇特定的視圖更重要時(shí)，使用頁(yè)面控件。頁(yè)面控件是為所有視圖均平等的場(chǎng)景而設(shè)計(jì)的。

不要使用頁(yè)面控件來(lái)顯示視圖中的層次結(jié)構(gòu)或其他復(fù)雜的排列。

頁(yè)面控件不顯示視圖是如何相互關(guān)聯(lián)的，而且不表明哪個(gè)視圖對(duì)應(yīng)于每個(gè)點(diǎn)，因此它不能幫助用戶(hù)導(dǎo)航到特定的視圖。

避免顯示太多點(diǎn)。

超過(guò)10個(gè)點(diǎn)就很難讓用戶(hù)一目了然，而超過(guò)20個(gè)視圖在序列中訪(fǎng)問(wèn)起來(lái)非常耗時(shí)。如果用戶(hù)可以在你的應(yīng)用程序打開(kāi)超過(guò)20個(gè)視圖，請(qǐng)考慮給視圖一個(gè)不同的展示方式，以提供關(guān)于視圖的詳細(xì)信息，使其支持不連續(xù)的導(dǎo)航。

在打開(kāi)視圖的底部邊緣和屏幕的底部邊緣里垂直居中頁(yè)面控件。

在這個(gè)位置，頁(yè)面控件是始終可見(jiàn)的，并且不會(huì)阻擋用戶(hù)的使用。

4.3.9 選擇器

選擇器展示了一組值，用戶(hù)可以從中選擇一個(gè)。

API注釋

想要了解如何在代碼中定義選擇器，可以參考UIPickerView Class Reference.

選擇器：

• 是日期時(shí)間選擇器的通用模式
• 包括一個(gè)或多個(gè)滑輪，每個(gè)滑輪含有一組值
• 當(dāng)前選中的值在中間，以深色標(biāo)識(shí)
• 不可以自定義大小（選擇器的大小與iPhone的鍵盤(pán)相同）

使用選擇器可以讓用戶(hù)更容易從一系列不同的值中間進(jìn)行選擇。

一般來(lái)說(shuō)，當(dāng)用戶(hù)對(duì)整組值都比較熟悉的時(shí)候，可以使用選擇器。

由于當(dāng)滑輪靜止的時(shí)候，大部分的數(shù)值會(huì)被隱藏，最好是在用戶(hù)對(duì)所有數(shù)值均有預(yù)期的情況下才使用選擇器。當(dāng)你需要展示一大組用戶(hù)并不熟悉的選項(xiàng)，此種選擇器可能不太適合。

盡可能讓讓用戶(hù)在當(dāng)前視圖中使用選擇器。

不要讓他們?cè)谑褂眠x擇器時(shí)還要進(jìn)入其它的視圖。

如果你需要展示的備選項(xiàng)數(shù)量很多，考慮使用表格視圖（Table View）而不是選擇器。

因?yàn)楸砀褚晥D的高度較大，內(nèi)容滾動(dòng)起來(lái)會(huì)更快。

4.3.10 進(jìn)度視圖

進(jìn)度視圖展示了任務(wù)或進(jìn)程的進(jìn)度（下圖是iOS默認(rèn)郵件App的工具欄）。

API提示：

想要了解更多如何在代碼中定義進(jìn)度視圖，可以參考UIProgressView Class Reference.

進(jìn)度視圖：

• 是一條軌跡，隨著進(jìn)程的進(jìn)行從左向右進(jìn)行填充
• 不支持用戶(hù)交互行為

iOS定義了兩種進(jìn)度視圖樣式：

• 默認(rèn)（Default）.默認(rèn)樣式適合用在app的主要內(nèi)容區(qū)中。

• 進(jìn)度條（Bar）.此樣式比默認(rèn)樣式細(xì)，適合用在工具欄中。

當(dāng)一個(gè)任務(wù)存在明確的進(jìn)程，可以使用進(jìn)度條來(lái)給與用戶(hù)反饋，尤其在需要明確告訴用戶(hù)這個(gè)任務(wù)大約需要多少時(shí)間完成的時(shí)候。

可以的話(huà)，請(qǐng)根據(jù)你的app的風(fēng)格來(lái)設(shè)計(jì)進(jìn)度條的外觀(guān)。你可以自定義進(jìn)度條的底色以及軌跡顏色，也可以直接使用圖片。

4.3.11 刷新控件

刷新控件執(zhí)行用戶(hù)觸發(fā)的內(nèi)容刷新——一個(gè)典型的例子，它常在表格中出現(xiàn)（下圖展示的是iOS默認(rèn)的郵件app的mailbox列表頁(yè)）。

API提示：

想要了解更多如何在代碼中定義刷新控件，可以參考 UIRefreshControl Class Reference.

刷新控件：

• 看起來(lái)類(lèi)似活動(dòng)指示器
• 可以出現(xiàn)在標(biāo)題中
• 默認(rèn)狀態(tài)下不可見(jiàn)，當(dāng)用戶(hù)在表格上緣往下拖拽以刷新內(nèi)容時(shí)才出現(xiàn)

使用刷新控件，給用戶(hù)提供一個(gè)一致的方式來(lái)了解一個(gè)表格或其他視圖的內(nèi)容更新，而不需要等待下一個(gè)自動(dòng)更新。

就算你使用了刷新控件，也不要因此就不支持內(nèi)容自動(dòng)刷新。盡管用戶(hù)喜歡在執(zhí)行刷新操作時(shí)內(nèi)容立刻刷新，他們也同樣會(huì)喜歡內(nèi)容自動(dòng)刷新。如果過(guò)于一來(lái)用戶(hù)自己執(zhí)行所有刷新操作的話(huà)，那些不會(huì)自動(dòng)刷新的用戶(hù)就會(huì)疑惑，為何你app中的數(shù)據(jù)永遠(yuǎn)都不更新。一般來(lái)說(shuō)，刷新控件給了用戶(hù)多一個(gè)選擇，讓他們可以立刻獲得最新的內(nèi)容，但同時(shí)，你也不能奢望用戶(hù)會(huì)主動(dòng)獲取所有的更新信息。

只有在必要的時(shí)候才加短標(biāo)題。特別需要注意的是，不要使用短標(biāo)題來(lái)描述刷新控件怎么使用。

4.3.12圓角矩形按鈕

iOS7及更新版本中已經(jīng)不再使用圓角矩形按鈕，而是使用了新的系統(tǒng)按鈕——類(lèi)型為UIButtonTypeSystem的UI按鈕 （UIButton） 。使用指南可參考System Button.

4.3.13 分段控件

分段控件是一組分段的線(xiàn)性集合，每一個(gè)分段的作用類(lèi)似按鈕，點(diǎn)擊之后將切換到相應(yīng)的視圖。

API提示：

想要了解更多如何在代碼中定義分段控件，可以參考 Segmented Controls

分段控件：

• 由兩個(gè)或以上的分段組成，每一個(gè)分段的寬度相同，與分段的數(shù)量成比例（分段數(shù)量越多，則寬度越小）
• 可以包含文字或者圖片

使用分段控件來(lái)提供密切相關(guān)而又互斥的選項(xiàng)。

保證每個(gè)分段都容易點(diǎn)擊。

為了保證每個(gè)分段的大小有至少44×44像素，請(qǐng)控制分段的數(shù)量。在iPhone上，1個(gè)分段控件最多包含5個(gè)分段。

盡可能地保持每個(gè)分段中的文字長(zhǎng)度一致。

因?yàn)槊總€(gè)分段都是等寬的，當(dāng)文本長(zhǎng)度差異很大時(shí)看上去會(huì)很不協(xié)調(diào)。

不要在同一個(gè)分段控件中混用文字和圖片。

每一個(gè)分段都僅可支持純文字或純圖片。避免在同一個(gè)分段控件中，一些分段里使用純文字，另一些分段里使用純圖。

請(qǐng)?jiān)诒匾獣r(shí)調(diào)整分段控件中文本的對(duì)齊方式。

如果你給分段控件添加了自定義底圖，請(qǐng)確保控件里自動(dòng)居中的文本依然清晰美觀(guān)。你可以通過(guò)bar metrics APIs 來(lái)調(diào)整分段控件內(nèi)文本的對(duì)齊方式（想要了解如何定義bar metrics，可以參考 UISegmentedControl 中關(guān)于自定義API外觀(guān)（appearance-customization APIs）的描述）。

4.3.14 滑塊

滑塊允許用戶(hù)在一個(gè)限定范圍內(nèi)調(diào)整某個(gè)數(shù)值或進(jìn)程（下圖展示的是iOS設(shè)置中亮度設(shè)置的滑塊，滑塊的左邊和右邊均為自定義圖形）。

API提示：

想要了解更多如何在代碼中定義滑塊，可以參考 Sliders

滑塊：

• 由一條水平的軌跡和一個(gè)Thumb（滑塊中支持用戶(hù)水平拖拽的圓形控件）組成
• 左邊和右邊支持使用自定義圖片來(lái)表述相對(duì)的最小值與最大值的含義
• 填充軌道左邊緣最小值之間到Thumb之間的部分

使用滑塊來(lái)讓用戶(hù)精準(zhǔn)地選擇自己想要的值，或者控制當(dāng)前的進(jìn)程。

如果合適的話(huà)，自定義滑塊的外觀(guān)。

比如，你可以:

• 定義Thumb的外觀(guān)，讓用戶(hù)一看就知道滑塊當(dāng)前的狀態(tài)
• 在軌跡的左右兩端使用自定義圖片來(lái)告訴用戶(hù)滑塊的最小值和最大值所代表的含義。比如說(shuō)，一個(gè)圖調(diào)整圖片尺寸的滑塊可以在最小值的左邊放一張小圖，在最大值的右邊放一張大圖。
• 根據(jù)Thumb所在的位置和當(dāng)前滑塊的狀態(tài)來(lái)為滑塊的軌跡定義不同的顏色

不要使用滑塊來(lái)顯示音量控制。

如果你需要顯示一個(gè)音量滑塊，當(dāng)你使用MPVolumeView類(lèi)的時(shí)候請(qǐng)使用系統(tǒng)提供的音量滑塊。請(qǐng)注意，當(dāng)當(dāng)前活動(dòng)的音頻輸出設(shè)備不支持音量控制時(shí)，音量滑塊以適當(dāng)?shù)脑O(shè)備名稱(chēng)替換。

4.3.15 步進(jìn)器

步進(jìn)器可以以常數(shù)為幅度來(lái)增減當(dāng)前數(shù)值。

API提示：

想要了解更多如何在代碼中定義步進(jìn)器，可以參考UIStepper.

步進(jìn)器：

• 是一個(gè)兩段控件，其中一段默認(rèn)顯示減號(hào)，另一端默認(rèn)顯示加號(hào)
• 支持自定義圖片
• 不展示用戶(hù)更改的值

當(dāng)用戶(hù)想要對(duì)數(shù)值進(jìn)行小幅度調(diào)整時(shí)，可以使用步進(jìn)器。

當(dāng)用戶(hù)需要大幅度調(diào)整數(shù)值的時(shí)候，不要使用步進(jìn)器。

用戶(hù)可能會(huì)在打印機(jī)里使用步進(jìn)器來(lái)確定打印份數(shù)，因?yàn)檫@個(gè)值的變化幅度通常并不大；而當(dāng)用戶(hù)需要選擇打印的頁(yè)碼范圍時(shí)，使用步進(jìn)器就會(huì)讓操作變得繁瑣，因?yàn)橛脩?hù)很可能要點(diǎn)很多下才能選定頁(yè)數(shù)。

確保步進(jìn)器所調(diào)整的值明顯可見(jiàn)。

步進(jìn)器自身不展示任何數(shù)值，所以你需要保證讓用戶(hù)知道他們正在調(diào)整哪一個(gè)數(shù)值。

4.3.16 開(kāi)關(guān)按鈕

開(kāi)關(guān)按鈕展示了兩個(gè)互斥的選項(xiàng)或狀態(tài)。

API提示：

想要了解更多如何在代碼中定義步開(kāi)關(guān)，可以參考UISwitch.

開(kāi)關(guān)按鈕：

• 顯示了一個(gè)項(xiàng)存在二元狀態(tài)
• 僅在表格視圖中可用

在表格中使用開(kāi)關(guān)按鈕來(lái)讓用戶(hù)從某一項(xiàng)的兩個(gè)互斥狀態(tài)中指定一個(gè)，比如是/否（Yes/No），開(kāi)/關(guān)（On/Off）。

你可以使用開(kāi)關(guān)按鈕來(lái)控制視圖中的其它UI元素。根據(jù)用戶(hù)的選擇，新的列表項(xiàng)可能出現(xiàn)或者消失，或從激活狀態(tài)變?yōu)椴患せ顮顟B(tài)。

4.3.17 系統(tǒng)按鈕

系統(tǒng)按鈕執(zhí)行app中定義的行為。

API提示：

在iOS 7中，UIButtonTypeRoundedRect已經(jīng)被重新定義為 UIButtonTypeSystem. 想要了解更多如何在代碼中定義系統(tǒng)按鈕，可以參考 UIButton.

系統(tǒng)按鈕：

• 默認(rèn)狀態(tài)下不含邊界，也不含背景圖
• 可以是圖標(biāo)或者文字標(biāo)題
• 支持自定義樣式，如描邊或者加背景圖（想要自定義按鈕外觀(guān)，可以使用 UIButtonTypeCustom 類(lèi)型的按鈕，并且提供背景圖片）

使用系統(tǒng)按鈕來(lái)執(zhí)行某個(gè)動(dòng)作。當(dāng)你為系統(tǒng)按鈕命名時(shí)，請(qǐng)遵循以下方法：

• 使用動(dòng)詞或動(dòng)詞短語(yǔ)來(lái)描述按鈕所代表的動(dòng)作。這種命名方法告訴用戶(hù)這個(gè)按鈕是可交互的，也提示了用戶(hù)點(diǎn)擊之后會(huì)執(zhí)行什么操作
• 使用標(biāo)題式大寫(xiě)（title-style capitalization，每個(gè)單詞的首字母均大寫(xiě)）。除了冠詞，并列連詞以及少于4個(gè)字母的介詞外，標(biāo)題中每個(gè)單詞的首字母均大寫(xiě)。
• 標(biāo)題不要太長(zhǎng)。太長(zhǎng)的標(biāo)題會(huì)被截?cái)啵層脩?hù)難以理解其含義

以iPhone為例，給數(shù)字按鍵添加圓形邊框強(qiáng)化了用戶(hù)撥電話(huà)號(hào)碼時(shí)的心理模型，而結(jié)束（End）和隱藏（Hide）按鈕的背景色讓用戶(hù)擁有了更大的點(diǎn)擊范圍。

合適的話(huà)，為內(nèi)容區(qū)域內(nèi)的系統(tǒng)按鈕描邊或者加入背景。

大多數(shù)情況下，你可以通過(guò)定義一個(gè)清晰的按鈕名稱(chēng)、選擇一個(gè)不一樣的標(biāo)題顏色或提供上下文情景提示來(lái)讓用戶(hù)知道這是一個(gè)按鈕而非普通文本。但在某些特定的內(nèi)容區(qū)域內(nèi)，為按鈕描邊或者添加背景顏色，讓用戶(hù)迅速地把注意力放到按鈕上，也是必要的。Value 2的布局中，文本和副標(biāo)題中間的垂直間距會(huì)讓用戶(hù)專(zhuān)注于副標(biāo)題的第一個(gè)單詞。

4.3.18文本框

開(kāi)關(guān)按鈕展示了兩個(gè)互斥的選項(xiàng)或狀態(tài)。

API提示：

想要了解如何在代碼中定義文本框，以及在文本框中支持圖片和按鈕，可以參考UITextField.

文本框

• 高度固定，包含圓角
• 當(dāng)用戶(hù)點(diǎn)擊它時(shí)，自動(dòng)喚起輸入鍵盤(pán)
• 可以包含系統(tǒng)提供的按鈕，如書(shū)簽按鈕（Bookmarks）
• 可以展示多種文字樣式（了解更多請(qǐng)參考 UITextView）

使用文本框來(lái)獲取用戶(hù)輸入的少量信息。

你可以自定義一個(gè)文本框，幫助用戶(hù)更好地理解如何使用它。

舉個(gè)例子，你可以在文本框的左側(cè)或者右側(cè)加入自定義圖形，或者加入系統(tǒng)按鈕，如書(shū)簽按鈕等。一般來(lái)說(shuō)，文本框的左側(cè)用于表述文本框的含義，而右側(cè)用于展示附加的功能，如書(shū)簽。

合適的話(huà)，在文本框右側(cè)加入清除按鈕。

輕擊清除按鈕變可清空當(dāng)前框內(nèi)輸入的全部?jī)?nèi)容，無(wú)論你原本打算在這個(gè)按鈕上面展示什么其它圖片。

如果可以幫助用戶(hù)理解的話(huà)，可以在文本框中加入提示文字。

當(dāng)文本框里沒(méi)有任何其它提示文字時(shí)，會(huì)展示占位符文本（placeholder text），如名字、地址等。

根據(jù)輸入內(nèi)容的類(lèi)型來(lái)指定不同的鍵盤(pán)類(lèi)型。

舉例來(lái)說(shuō)，你希望用戶(hù)能更方便地輸入網(wǎng)址、密碼或者電話(huà)號(hào)碼。iOS提供了各種不同的鍵盤(pán)類(lèi)型，以便用戶(hù)輸入不同類(lèi)型的文本。想要了解可用鍵盤(pán)類(lèi)型，可以參考 UITextInputTraits Protocol Reference中的UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤(pán)，請(qǐng)參考Managing the Keyboard部分。但請(qǐng)注意，由于鍵盤(pán)的布局以及輸入方法是由用戶(hù)的系統(tǒng)語(yǔ)言設(shè)置決定的，這是你不能控制的。

4.4臨時(shí)視圖

4.4.1 警告框

警告框用于告知用戶(hù)一些會(huì)影響到他們使用app或設(shè)備的重要信息。

API提示：

如需在代碼中使用警告框，你可以創(chuàng)建UIAlertController并且指定UIAlertControllerStyleAlert.

警告框：

• 必須包含標(biāo)題，有時(shí)候會(huì)包含正文文本
• 包含一個(gè)或多個(gè)按鈕

一般來(lái)說(shuō)，警告框警告出現(xiàn)的頻率較低，也正因?yàn)槿绱耍娴某霈F(xiàn)通常會(huì)讓用戶(hù)額外重視。請(qǐng)嚴(yán)格控制你的app中警告的個(gè)數(shù)，并且保證每一個(gè)警告都能提供重要的信息，或者有用的選項(xiàng)。

避免出現(xiàn)不必要的警告框。

一般來(lái)說(shuō)，在以下情景中，是不需要用到警告框的：

當(dāng)你在設(shè)計(jì)警告文案的時(shí)候，了解以下這些定義非常有用：

• 標(biāo)題式大寫(xiě)（Title-style capitalization）指的是除了冠詞，并列連詞以及少于4個(gè)字母且不處在第一個(gè)單詞位置上的介詞外，標(biāo)題中每個(gè)單詞的首字母均大寫(xiě)。
• 句子式大寫(xiě)（Sentence-style capitalization）指的是第一個(gè)字母大寫(xiě)，其余除了專(zhuān)有名詞和專(zhuān)有形容詞外的字母均小寫(xiě)

簡(jiǎn)明扼要地描述當(dāng)前情景，并告訴用戶(hù)他們可以做什么。

理想情況下，警告框中的文字應(yīng)該給與用戶(hù)足夠的情景和上下文聯(lián)想，讓他們可以清楚地知道為什么警告會(huì)出現(xiàn)，同時(shí)幫助他們判斷自己應(yīng)該點(diǎn)哪個(gè)按鈕。

保證標(biāo)題足夠簡(jiǎn)短，最好在一行之內(nèi)。

過(guò)長(zhǎng)的標(biāo)題讓用戶(hù)很難快速理解它的意思，還可能會(huì)被截?cái)唷?/p>

避免單個(gè)字的標(biāo)題。單字標(biāo)題，例如：錯(cuò)誤，或警告，幾乎不能提供任何有用信息。

如果可以的話(huà)，使用句子片段而非完整的句子。一個(gè)簡(jiǎn)潔清晰的狀態(tài)描述往往比一個(gè)完整的句子更容易理解。

盡可能的精煉你的標(biāo)題文字，讓警告框即使沒(méi)有下面的正文信息也能完全讓用戶(hù)理解。舉個(gè)例子，當(dāng)你使用一個(gè)問(wèn)題，或者兩個(gè)短句來(lái)作為警告框標(biāo)題的話(huà)，很可能你并不需要添加文本信息。

不用刻意避免在警告框中使用消極負(fù)面的文案。用戶(hù)們理解大多數(shù)警告框是為了告訴他們發(fā)生的問(wèn)題，或者對(duì)他們目前的狀態(tài)作出警告。因此消極但清晰直接的文案優(yōu)于積極但晦澀間接的文案。

盡可能地避免使用“你”，“你的”，“我”，“我的”這類(lèi)字眼。有時(shí)候，這些直接指向的字眼容易引起歧義，有時(shí)候甚至?xí)徽`認(rèn)為是一種冒犯。
適當(dāng)?shù)厥褂么髮?xiě)和標(biāo)點(diǎn)符號(hào)，尤其是在以下這些場(chǎng)景中：

如果你必須為警告框添加正文文本，請(qǐng)使用一個(gè)完整的短句。

可能的話(huà)，盡量保證句子在1到2行之間。如果句子太長(zhǎng)，用戶(hù)會(huì)需要滾動(dòng)才能看完，這樣的體驗(yàn)很糟。使用句子式大寫(xiě)，并在句末加上適當(dāng)?shù)臉?biāo)點(diǎn)符號(hào)。

避免在文本中詳細(xì)描述“該按哪個(gè)按鈕”而導(dǎo)致文本過(guò)長(zhǎng)。

理想情況下，表意明確的警告文案和邏輯清晰的按鈕文案已經(jīng)足以讓用戶(hù)正確判斷自己該按哪個(gè)按鈕了。但如果你一定要在文案中描述這些內(nèi)容，請(qǐng)遵循以下原則：

• 確定使用輕擊（tap）來(lái)描述這個(gè)選擇操作，不要用觸摸（touch）、點(diǎn)擊（click）或者選擇（choose）這類(lèi)字眼。
• 不要用引號(hào)，但保證大寫(xiě)

確保警告框在豎屏和橫屏中均顯示正常。

橫屏模式下警告框的高度會(huì)受到限制，其大小與豎屏下可能會(huì)有區(qū)別。我們推薦您限定好警告框的最大高度，保證在豎屏和橫屏模式下文字均能不需要滾動(dòng)便可完整地顯示。

一般情況下，使用兩個(gè)按鈕的警告框。

兩個(gè)按鈕的警告框是最為常見(jiàn)和有用的，因?yàn)樗畋阌谟脩?hù)在兩個(gè)按鈕中做選擇。單按鈕警告框不那么有用，因?yàn)樗ǔＶ皇瞧鸬礁嬷淖饔茫⑽唇o予用戶(hù)控制當(dāng)前狀態(tài)的能力。多于兩個(gè)按鈕的警告框太過(guò)復(fù)雜，應(yīng)該盡可能地避免使用。如果你在警告框中設(shè)計(jì)了太多按鈕，它也許會(huì)導(dǎo)致警告框被強(qiáng)制滾動(dòng)，這也是一個(gè)非常糟糕的體驗(yàn)。

提示

如果你需要在警告框中給與用戶(hù)超過(guò)2個(gè)選項(xiàng)，可以考慮使用操作列表來(lái)代替警告框。

正確地放置按鈕。

理想情況下，最容易點(diǎn)擊也最不容易點(diǎn)錯(cuò)的按鈕符合兩個(gè)條件：它代表了用戶(hù)最可能會(huì)選擇的操作，即使用戶(hù)一時(shí)不注意誤點(diǎn)了它，也不會(huì)造成嚴(yán)重問(wèn)題。尤其是：

• 如果這個(gè)按鈕不會(huì)造成損害性結(jié)果，又是用戶(hù)最有可能會(huì)選擇的操作，那么它應(yīng)該放在右邊，取消按鈕則應(yīng)該放在左邊。
• 如果這個(gè)按鈕會(huì)造成損害性后果，又是用戶(hù)最有可能會(huì)選擇的操作，那么它應(yīng)該被放在左邊，取消按鈕應(yīng)該放在右邊。

提示

一般來(lái)說(shuō)，當(dāng)警告框出現(xiàn)的時(shí)候，按Home鍵將會(huì)從該app里切回主屏幕，此時(shí)Home鍵的效果類(lèi)似于取消按鈕——當(dāng)用戶(hù)回到app中的時(shí)候，警告框?qū)⑾В僮饕膊粫?huì)被執(zhí)行。

為按鈕設(shè)計(jì)簡(jiǎn)短而邏輯清晰的文案。

好的按鈕文案一般只有1到2個(gè)單詞，描述用戶(hù)點(diǎn)擊按鈕后的結(jié)果。設(shè)計(jì)文案時(shí)可以遵循以下指南：

• 跟其它所有按鈕一樣，使用標(biāo)題式大寫(xiě)，而且不需要標(biāo)點(diǎn)符號(hào)
• 盡可能的使用與警告文案直接相關(guān)的動(dòng)詞或動(dòng)詞詞組，如”取消（Cancel）”，”查看全部（View All）”，”回復(fù)（Reply）”和“忽略（Ignore）”等
• 當(dāng)沒(méi)有更好的選擇的時(shí)候，可以使用”O(jiān)K”.避免使用”是（Yes）”或”否（No）”。
• 避免使用”你”，“你的”，“我”，“我的”這類(lèi)字眼。含有這些字眼的文案可能會(huì)指代不清，還有可能造成冒犯。

4.4.2 操作列表

操作列表展示了與用戶(hù)觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)。

API提示：

如需在代碼中使用操作列表，你可以創(chuàng)建一個(gè) UIAlertController.并指定UIAlertControllerStyleActionSheet

操作列表：

• 由用戶(hù)某個(gè)操作行為觸發(fā)
• 包含兩個(gè)或以上的按鈕

使用操作列表來(lái)：

提供完成一項(xiàng)任務(wù)的不同方法。

操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會(huì)永久占用頁(yè)面UI的空間。

在用戶(hù)完成一項(xiàng)可能有風(fēng)險(xiǎn)的操作前獲得用戶(hù)的確認(rèn)。

操作列表讓用戶(hù)有機(jī)會(huì)停下來(lái)充分考慮當(dāng)前操作可能導(dǎo)致的危險(xiǎn)結(jié)果，并為他們提供了一些其它的選項(xiàng)，尤其是在以下這些情景下：

使用紅色文字來(lái)表示可能存在破壞性的操作。

在操作列表的頂部使用文字顏色為紅色的按鈕，因?yàn)樵娇拷斜眄敳康牟僮髟饺菀滓鹩脩?hù)注意。在iPhone里，潛在風(fēng)險(xiǎn)的操作離列表底部越遠(yuǎn)，用戶(hù)在關(guān)注Home鍵的時(shí)候就越不容易誤點(diǎn)它。

避免讓用戶(hù)滾動(dòng)操作列表。

如果你的操作列表中存在過(guò)多按鈕，用戶(hù)必須要滾動(dòng)才能看完所有操作。這樣的體驗(yàn)是可能讓用戶(hù)不安，因?yàn)樗麄円ǜ嗟臅r(shí)間來(lái)充分理解每個(gè)選項(xiàng)的區(qū)別。此外，用戶(hù)在滾動(dòng)的過(guò)程中將很有可能誤點(diǎn)其它按鈕。

4.4.3模態(tài)視圖

模態(tài)視圖是一個(gè)以模態(tài)形式展現(xiàn)的視圖，它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨(dú)立的、自包含的（self-contained）功能。

API提示：

如需在代碼中使用模態(tài)視圖，你可以創(chuàng)建一個(gè) UIPresentationController. 并指定適當(dāng)?shù)臉邮剑ㄍ暾臉邮搅斜恚?qǐng)參考 Modal Presentation Styles）

模態(tài)視圖：

• 能占據(jù)整個(gè)屏幕，它也可能占據(jù)整個(gè)父視圖（parent view）的區(qū)域，或者是屏幕的一部分
• 包含完成當(dāng)前任務(wù)所需的文字和控件
• 通常也會(huì)包含一個(gè)完成任務(wù)的按鈕（點(diǎn)擊后即可完成任務(wù)，當(dāng)前模態(tài)視圖也會(huì)消失），和一個(gè)取消按鈕（點(diǎn)擊后即放棄當(dāng)前任務(wù)，同時(shí)當(dāng)前模態(tài)視圖消失）

當(dāng)需要用戶(hù)完成與你的app中的基礎(chǔ)功能相關(guān)的、獨(dú)立的任務(wù)的時(shí)候，可以使用模態(tài)視圖。模態(tài)視圖尤其適用于那些所需元素并非常駐在app主要UI中、又包含多個(gè)步驟的子任務(wù)。

根據(jù)當(dāng)前任務(wù)的種類(lèi)和你的app的整體視覺(jué)風(fēng)格來(lái)選擇適當(dāng)?shù)哪B(tài)視圖。你可以使用以下定義的任何一種模態(tài)視圖樣式：

不要讓模態(tài)視圖覆蓋在浮出層之上。

除了警告框外，沒(méi)有任何元素應(yīng)該覆蓋在彈出層上面。除非極其少有的情況下，用戶(hù)在彈出層內(nèi)進(jìn)行的操作結(jié)果必須要以模態(tài)視圖的形式展現(xiàn)，即便是這個(gè)時(shí)候，也請(qǐng)先將彈出層關(guān)閉，再出現(xiàn)模態(tài)視圖。

確保你的模態(tài)視圖看起來(lái)與你的app的整體視覺(jué)風(fēng)格相協(xié)調(diào)。

舉個(gè)例子，如果一個(gè)模態(tài)視圖中含有導(dǎo)航條和取消或完成任務(wù)的按鈕，這里的導(dǎo)航條樣式應(yīng)該與你的app中導(dǎo)航條一樣。

合適的話(huà)，在模態(tài)視圖里加入可以說(shuō)明任務(wù)內(nèi)容的標(biāo)題。

你可能還需要在模態(tài)視圖里加入一些補(bǔ)充文字，來(lái)清楚地闡明任務(wù)內(nèi)容，并提供一些任務(wù)指南。

選擇一個(gè)適當(dāng)?shù)倪^(guò)渡動(dòng)畫(huà)來(lái)展示模態(tài)視圖。

使用與你的app一致的過(guò)渡動(dòng)畫(huà)，讓用戶(hù)可以準(zhǔn)確地理解當(dāng)前頁(yè)面內(nèi)容的轉(zhuǎn)變與模態(tài)視圖的出現(xiàn)。關(guān)于這一點(diǎn)，你可以指定以下任意一種過(guò)渡動(dòng)畫(huà)：

• 垂直出現(xiàn)（Vertical）.模態(tài)視圖從底部邊緣滑入屏幕，也同樣從屏幕底部滑出（默認(rèn)模式）。
• 彈出（Flip）.當(dāng)前視圖從右往左水平滑動(dòng)，露出模態(tài)視圖。從視覺(jué)上看，模態(tài)視圖好像原來(lái)就處于當(dāng)前視圖的下面，當(dāng)前視圖移開(kāi)時(shí)，它便出現(xiàn)了。離開(kāi)模態(tài)視圖時(shí)，原先的父視圖從左邊滑回屏幕右邊。

如果你要改變當(dāng)前的過(guò)渡動(dòng)畫(huà)樣式，請(qǐng)確保這種改變對(duì)于用戶(hù)而言是有用而且有意義的。

用戶(hù)很容易便能感知到這些改變，還會(huì)認(rèn)為這些改變存在特別的意義。最好能設(shè)計(jì)出一種符合邏輯并始終保持一致的過(guò)渡方式，讓用戶(hù)容易感知并且記憶。在沒(méi)有充分理由支持的情況下，最好不要改變這些默認(rèn)的過(guò)渡方式。

本章英文原文訪(fǎng)問(wèn)地址：iOS Human Interface Guidelines
本章中文翻譯PDF下載：點(diǎn)此下載

【優(yōu)設(shè)名師訪(fǎng)談系列】

1. 曾任騰訊大粵網(wǎng)設(shè)計(jì)主管的跨域達(dá)人：《優(yōu)設(shè)訪(fǎng)談！騰訊設(shè)計(jì)師米田的設(shè)計(jì)之道與成長(zhǎng)之路》
2. 沒(méi)有聽(tīng)過(guò)馮叔的設(shè)計(jì)師不是好設(shè)計(jì)師：《優(yōu)設(shè)訪(fǎng)談！著名設(shè)計(jì)師馮鐵的設(shè)計(jì)思考與經(jīng)驗(yàn)之談》
3. 前端重構(gòu)視覺(jué)交互無(wú)一不精的設(shè)計(jì)師：《優(yōu)設(shè)訪(fǎng)談！騰訊高級(jí)交互設(shè)計(jì)師C7210的十年設(shè)計(jì)路》
4. 非議不斷前行不止，用心的設(shè)計(jì)團(tuán)隊(duì)：《優(yōu)設(shè)訪(fǎng)談！國(guó)內(nèi)知名設(shè)計(jì)團(tuán)隊(duì)專(zhuān)訪(fǎng)之滴滴DISIGN》
5. 前網(wǎng)易現(xiàn)阿里寫(xiě)的書(shū)是交互領(lǐng)域必讀：《優(yōu)設(shè)訪(fǎng)談！阿里交互設(shè)計(jì)專(zhuān)家劉津的設(shè)計(jì)管理之路》
6. 職業(yè)路徑最為清晰的科班交互設(shè)計(jì)師：《優(yōu)設(shè)訪(fǎng)談！LBE安全大師產(chǎn)品總監(jiān)曉生的職場(chǎng)進(jìn)階之路》
7. 能靠臉吃飯偏偏不的設(shè)計(jì)界「鹿晗」：《優(yōu)設(shè)訪(fǎng)談！阿里資深設(shè)計(jì)師的自學(xué)設(shè)計(jì)之路》
8. 300多人的百度設(shè)計(jì)團(tuán)隊(duì)該如何運(yùn)轉(zhuǎn)：《優(yōu)設(shè)訪(fǎng)談！國(guó)內(nèi)知名設(shè)計(jì)團(tuán)隊(duì)專(zhuān)訪(fǎng)之百度大UE》
9. 百度上海團(tuán)隊(duì)負(fù)責(zé)人的非科班設(shè)計(jì)師：《優(yōu)設(shè)訪(fǎng)談！百度設(shè)計(jì)大咖JJ YING的自學(xué)成才之路》
10. 他帶的學(xué)生已經(jīng)是國(guó)內(nèi)的設(shè)計(jì)大咖了：《優(yōu)設(shè)訪(fǎng)談！灰晝：從非科班生到首席美術(shù)總監(jiān)的15年設(shè)計(jì)路》
11. 設(shè)計(jì)的產(chǎn)品有幾億人在用的非科班生：《優(yōu)設(shè)訪(fǎng)談！騰訊電腦管家視覺(jué)負(fù)責(zé)人張曉翔的UI自學(xué)之路》
12. 英雄聯(lián)盟穿越火線(xiàn)天天愛(ài)消除都有他：《優(yōu)設(shè)訪(fǎng)談！騰訊游戲Tgideas團(tuán)隊(duì)設(shè)計(jì)總監(jiān)李若凡的十年設(shè)計(jì)路》
13. 高考一百多分現(xiàn)任UC藝術(shù)指導(dǎo)的大神：《優(yōu)設(shè)訪(fǎng)談！小火：從非科班生到UC藝術(shù)指導(dǎo)的勵(lì)志設(shè)計(jì)路》

譯文地址：騰訊ISUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com