展示聯(lián)系人列表
幫助用戶將一個聯(lián)系人添加到當(dāng)前聯(lián)系人按鈕所在的視圖中使用添加聯(lián)系人按鈕讓用戶在不需要使用鍵盤的情況下就可以方便地訪問到聯(lián)系人。舉個例子，在新建郵件的界面中，用戶可以點擊該按鈕來在郵件中添加收件人，而不需要用鍵盤輸入收件人的名字。

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

日期時間選擇器

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

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

API 注釋

想要了解如何在代碼中定義添加日期時間選擇器，請參考 UIDatePicker.

日期時間選擇器：

最多可以展示4個獨立的滑輪，每一個滑輪表示一個不同的值，比如月份或小時等
在每個滑輪的中央使用深色字體來表示當(dāng)前選中的值
日期時間選擇器的大小與 iPhone 鍵盤的大小相同，并且不可更改
包括四種模式，每一種模式代表了一組不同的值:
日期和時間。日期和時間模式（默認(rèn)模式）包含日期、小時、和分鐘，以及一個可選的AM/PM值。
時間。時間模式包括小時和分鐘，以及可選的 AM/PM 值。
日期。日期模式包括月份，天以及年三個值。
倒計時器。倒計時器模式展示了小時和分鐘值。你可以精確地設(shè)定總共的倒計時間，倒計時的最大值為23小時59分鐘。使用日期時間選擇器來讓用戶選擇時間，而不是讓用戶自己輸入一個包含了日期、時間等多個部分的時間值。

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

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

詳情展開按鈕

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

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

API 注釋

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

詳情展開按鈕以一個單獨的視圖展示特定項目的更多詳情信息與功能。

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

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

信息按鈕

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

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

API 注釋

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

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

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

標(biāo)簽

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

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

API 注釋

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

標(biāo)簽可以：

展示任意數(shù)量的靜態(tài)文本
禁止除了復(fù)制文本外的任何用戶交互行為你可以使用標(biāo)簽來命名或解釋你的部分 UI，又或者用它來給用戶提供一些簡單的信息。標(biāo)簽最適合拿來展示相對簡單的文本信息。

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

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

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

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

API 注釋

你可以在代碼中使用 UIApplication 的 networkActivityIndicatorVisible 來控制該活動指示器的可見性。

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

出現(xiàn)在狀態(tài)欄中，當(dāng)網(wǎng)絡(luò)活動正在進(jìn)行時它會旋轉(zhuǎn)，在活動停止時它則消失
不支持用戶交互行為當(dāng)你的 app 正在鏈接網(wǎng)絡(luò)，而這個連接過程將會持續(xù)好幾秒的時候，你可以通過網(wǎng)絡(luò)活動指示器來給用戶以反饋。如果進(jìn)程所需時間很短，則不需要用到它，因為很可能在用戶注意到它之前，它就消失了。

頁面控件

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

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

API 注釋

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

頁面控件：

包含一系列圓點，圓點的個數(shù)代表了當(dāng)前打開的視圖數(shù)量（從左到右，這些圓點代表了視圖打開的先后順序）
默認(rèn)情況下，使用不透明點來標(biāo)識當(dāng)前打開的視圖，使用半透明點來表示所有其它視圖
不支持用戶訪問不連續(xù)的視圖
當(dāng)視圖數(shù)量超過頁面寬度可承載的氛圍時，點的大小和間距并不會因此變?。ㄈ绻枰@示的點超過一定數(shù)量，系統(tǒng)會把它截斷）
默認(rèn)情況下不支持視圖之間導(dǎo)航；你必須實現(xiàn)視圖到視圖之間的導(dǎo)航并適當(dāng)?shù)馗马撁婵丶顟B(tài) 當(dāng)告知用戶有多少打開的視圖的需求比幫助用戶選擇特定的視圖更重要時，使用頁面控件。頁面控件是為所有視圖均平等的場景而設(shè)計的。

不要使用頁面控件來顯示視圖中的層次結(jié)構(gòu)或其他復(fù)雜的排列。頁面控件不顯示視圖是如何相互關(guān)聯(lián)的，而且不表明哪個視圖對應(yīng)于每個點，因此它不能幫助用戶導(dǎo)航到特定的視圖。

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

在打開視圖的底部邊緣和屏幕的底部邊緣里垂直居中頁面控件。在這個位置，頁面控件是始終可見的，并且不會阻擋用戶的使用。

選擇器

選擇器展示了一組值，用戶可以從中選擇一個。

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

API 注釋

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

選擇器：

是日期時間選擇器的通用模式
包括一個或多個滑輪，每個滑輪含有一組值
當(dāng)前選中的值在中間，以深色標(biāo)識
不可以自定義大?。ㄟx擇器的大小與 iPhone 的鍵盤相同）使用選擇器可以讓用戶更容易從一系列不同的值中間進(jìn)行選擇。

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

盡可能讓讓用戶在當(dāng)前視圖中使用選擇器。不要讓他們在使用選擇器時還要進(jìn)入其它的視圖。

如果你需要展示的備選項數(shù)量很多，考慮使用表格視圖(Table View)而不是選擇器。因為表格視圖的高度較大，內(nèi)容滾動起來會更快。

進(jìn)度視圖

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

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

API 提示：

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

進(jìn)度視圖：

是一條軌跡，隨著進(jìn)程的進(jìn)行從左向右進(jìn)行填充
不支持用戶交互行為 iOS 定義了兩種進(jìn)度視圖樣式：
默認(rèn)(Default).默認(rèn)樣式適合用在 app 的主要內(nèi)容區(qū)中。

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

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

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

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

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

刷新控件

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

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

API 提示：

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

刷新控件：

看起來類似活動指示器
可以出現(xiàn)在標(biāo)題中
默認(rèn)狀態(tài)下不可見，當(dāng)用戶在表格上緣往下拖拽以刷新內(nèi)容時才出現(xiàn) 使用刷新控件，給用戶提供一個一致的方式來了解一個表格或其他視圖的內(nèi)容更新，而不需要等待下一個自動更新。

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

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

圓角矩形按鈕

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

分段控件

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

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

API 提示：

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

分段控件：

由兩個或以上的分段組成，每一個分段的寬度相同，與分段的數(shù)量成比例（分段數(shù)量越多，則寬度越?。?/li>
可以包含文字或者圖片使用分段控件來提供密切相關(guān)而又互斥的選項。

保證每個分段都容易點擊。為了保證每個分段的大小有至少44×44像素，請控制分段的數(shù)量。在 iPhone 上，1個分段控件最多包含5個分段。

盡可能地保持每個分段中的文字長度一致。因為每個分段都是等寬的，當(dāng)文本長度差異很大時看上去會很不協(xié)調(diào)。

不要在同一個分段控件中混用文字和圖片。每一個分段都僅可支持純文字或純圖片。避免在同一個分段控件中，一些分段里使用純文字，另一些分段里使用純圖。

請在必要時調(diào)整分段控件中文本的對齊方式。如果你給分段控件添加了自定義底圖，請確?？丶镒詣泳又械奈谋疽廊磺逦烙^。你可以通過 bar metrics APIs 來調(diào)整分段控件內(nèi)文本的對齊方式(想要了解如何定義 bar metrics，可以參考 UISegmentedControl 中關(guān)于自定義 API 外觀(appearance-customization APIs)的描述)。

滑塊

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

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

API 提示：

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

滑塊：

由一條水平的軌跡和一個 Thumb(滑塊中支持用戶水平拖拽的圓形控件)組成
左邊和右邊支持使用自定義圖片來表述相對的最小值與最大值的含義
填充軌道左邊緣最小值之間到 Thumb 之間的部分使用滑塊來讓用戶精準(zhǔn)地選擇自己想要的值，或者控制當(dāng)前的進(jìn)程。

如果合適的話，自定義滑塊的外觀。比如，你可以:

定義 Thumb 的外觀，讓用戶一看就知道滑塊當(dāng)前的狀態(tài)
在軌跡的左右兩端使用自定義圖片來告訴用戶滑塊的最小值和最大值所代表的含義。比如說，一個圖調(diào)整圖片尺寸的滑塊可以在最小值的左邊放一張小圖，在最大值的右邊放一張大圖。
根據(jù) Thumb 所在的位置和當(dāng)前滑塊的狀態(tài)來為滑塊的軌跡定義不同的顏色 不要使用滑塊來顯示音量控制。如果你需要顯示一個音量滑塊，當(dāng)你使用 MPVolumeView 類的時候請使用系統(tǒng)提供的音量滑塊。請注意，當(dāng)當(dāng)前活動的音頻輸出設(shè)備不支持音量控制時，音量滑塊以適當(dāng)?shù)脑O(shè)備名稱替換。

步進(jìn)器

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

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

API 提示：

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

步進(jìn)器：

是一個兩段控件，其中一段默認(rèn)顯示減號，另一端默認(rèn)顯示加號
支持自定義圖片
不展示用戶更改的值當(dāng)用戶想要對數(shù)值進(jìn)行小幅度調(diào)整時，可以使用步進(jìn)器。

當(dāng)用戶需要大幅度調(diào)整數(shù)值的時候，不要使用步進(jìn)器。用戶可能會在打印機(jī)里使用步進(jìn)器來確定打印份數(shù)，因為這個值的變化幅度通常并不大；而當(dāng)用戶需要選擇打印的頁碼范圍時，使用步進(jìn)器就會讓操作變得繁瑣，因為用戶很可能要點很多下才能選定頁數(shù)。

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

開關(guān)按鈕

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

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

API 提示：

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

開關(guān)按鈕：

顯示了一個項存在二元狀態(tài)
僅在表格視圖中可用在表格中使用開關(guān)按鈕來讓用戶從某一項的兩個互斥狀態(tài)中指定一個，比如是/否(Yes/No)，開/關(guān)(On/Off)。

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

系統(tǒng)按鈕

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

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

API 提示：

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

系統(tǒng)按鈕：

默認(rèn)狀態(tài)下不含邊界，也不含背景圖
可以是圖標(biāo)或者文字標(biāo)題
支持自定義樣式，如描邊或者加背景圖(想要自定義按鈕外觀，可以使用 UIButtonTypeCustom 類型的按鈕，并且提供背景圖片) 使用系統(tǒng)按鈕來執(zhí)行某個動作。當(dāng)你為系統(tǒng)按鈕命名時，請遵循以下方法：
使用動詞或動詞短語來描述按鈕所代表的動作。這種命名方法告訴用戶這個按鈕是可交互的，也提示了用戶點擊之后會執(zhí)行什么操作
使用標(biāo)題式大寫(title-style capitalization，每個單詞的首字母均大寫)。除了冠詞，并列連詞以及少于4個字母的介詞外，標(biāo)題中每個單詞的首字母均大寫。
標(biāo)題不要太長。太長的標(biāo)題會被截斷，讓用戶難以理解其含義以 iPhone 為例，給數(shù)字按鍵添加圓形邊框強(qiáng)化了用戶撥電話號碼時的心理模型，而結(jié)束(End)和隱藏(Hide)按鈕的背景色讓用戶擁有了更大的點擊范圍。

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

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

文本框

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

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

API 提示：

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

文本框

高度固定，包含圓角
當(dāng)用戶點擊它時，自動喚起輸入鍵盤
可以包含系統(tǒng)提供的按鈕，如書簽按鈕(Bookmarks)
可以展示多種文字樣式(了解更多請參考 UITextView) 使用文本框來獲取用戶輸入的少量信息。

你可以自定義一個文本框，幫助用戶更好地理解如何使用它。舉個例子，你可以在文本框的左側(cè)或者右側(cè)加入自定義圖形，或者加入系統(tǒng)按鈕，如書簽按鈕等。一般來說，文本框的左側(cè)用于表述文本框的含義，而右側(cè)用于展示附加的功能，如書簽。

合適的話，在文本框右側(cè)加入清除按鈕。輕擊清除按鈕變可清空當(dāng)前框內(nèi)輸入的全部內(nèi)容，無論你原本打算在這個按鈕上面展示什么其它圖片。

如果可以幫助用戶理解的話，可以在文本框中加入提示文字。當(dāng)文本框里沒有任何其它提示文字時，會展示占位符文本(placeholder text)，如名字、地址等。

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

上一篇：品牌推廣下一篇：HealthKit