鍍金池/ 教程/ iOS/ 控件
內(nèi)容視圖
控件
iCloud
導(dǎo)航
網(wǎng)頁(yè)剪藏圖標(biāo)
動(dòng)畫(huà)
鍵盤(pán)和輸入頁(yè)面
設(shè)計(jì)策略
臨時(shí)視圖
撤銷(xiāo)與重做
交互與反饋
與 iOS 一體化
從概念到產(chǎn)品
品牌推廣
電子錢(qián)包
社交媒體
游戲中心
創(chuàng)建尺寸可調(diào)的圖片
案例學(xué)習(xí):從桌面到 iOS
多任務(wù)處理
蘋(píng)果支付
色彩和排版
報(bào)刊雜志圖標(biāo)
iOS 應(yīng)用解析
啟動(dòng)和終止
聲音
快速查看
適應(yīng)性和布局
編輯菜單
健康組件
語(yǔ)音輔助
iAd 富媒體廣告
為 iOS 而設(shè)計(jì)
標(biāo)志與圖形
應(yīng)用圖標(biāo)
模態(tài)情景
圖標(biāo)與圖片尺寸
路線(xiàn)選擇
在應(yīng)用中購(gòu)買(mǎi)
應(yīng)用拓展
啟動(dòng)畫(huà)面
術(shù)語(yǔ)和措辭
通知
欄按鈕圖標(biāo)
訪(fǎng)問(wèn)用戶(hù)數(shù)據(jù)
云打印

控件

活動(dòng)指示器

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

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

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í)完成更加重要。
可以的話(huà),最好可以設(shè)計(jì)一個(gè)與應(yīng)用的風(fēng)格協(xié)調(diào)的活動(dòng)指示器。根據(jù)背景風(fēng)格給活動(dòng)指示器選擇合適的尺寸和顏色。

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

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

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

API提示:
若想要了解如何在代碼中定義添加聯(lián)系人按鈕,參考Buttons.

添加聯(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)輸入收件人的名字。
因?yàn)樘砑勇?lián)系人按鈕是用來(lái)替代用鍵盤(pán)輸入聯(lián)系人方法,所以在不支持鍵盤(pán)輸入的界面中使用添加聯(lián)系人按鈕是不適用的。

日期時(shí)間選擇器

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

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

API提示:
若想要了解如何在代碼中定義日期選擇器,請(qǐng)參考 Date Pickers.

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

  • 最多可以展示4個(gè)獨(dú)立的滑輪,每一個(gè)滑輪表示一個(gè)不同的值,比如月份或小時(shí)等
  • 在每個(gè)滑輪的中央使用深色字體來(lái)表示當(dāng)前選中的值
  • 大小不可更改(與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í)間的總時(shí)長(zhǎng),倒計(jì)時(shí)的最大值為23小時(shí)59分鐘。

使用日期時(shí)間選擇器來(lái)讓用戶(hù)選擇時(shí)間,而不是讓用戶(hù)自己輸入一個(gè)包含了日期、時(shí)間等多個(gè)部分的時(shí)間值。
盡量地讓用戶(hù)在當(dāng)前界面中使用日期選擇器。最好避免用戶(hù)在使用日期選擇器的時(shí)候要進(jìn)入另外一個(gè)界面。在iPad上,日期時(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。

詳情展開(kāi)按鈕

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

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

API提示: 若想要了解如何在代碼中定義詳情展開(kāi)按鈕,可以參考 UITableViewCell Class ReferenceButtons.

詳情展開(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)的信息和功能。

信息按鈕

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

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

API提示: 若想要了解如何在代碼中定義信息按鈕,可以參考Buttons.

iOS包含了兩種信息按鈕樣式:適用于淺色內(nèi)容上的深色按鈕,以及適用于深色內(nèi)容上的淺色按鈕。
使用信息按鈕來(lái)顯示app的配置信息或選項(xiàng)。你可以根據(jù)自己app的UI風(fēng)格來(lái)選擇最為協(xié)調(diào)的信息按鈕樣式。

標(biāo)簽

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

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

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 部分。)

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

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

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

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ù)注意到它之前,它就消失了。

頁(yè)面控件

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

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

API提示:
想要了解如何在代碼中定義頁(yè)面控件,可以參考 Page Controls.

頁(yè)面控件:

  • 顯示一系列圓點(diǎn),每個(gè)圓點(diǎn)對(duì)應(yīng)一個(gè)已經(jīng)打開(kāi)的視圖(從左到右,高亮的圓點(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>
  • 系統(tǒng)默認(rèn)不支持視圖間的切換,你必須自己實(shí)現(xiàn)兩個(gè)視圖的切換并適時(shí)更新頁(yè)面控件的狀態(tài)。

當(dāng)你的目的是讓用戶(hù)知道一共打開(kāi)了多少個(gè)視圖而不是幫助他們選擇一個(gè)視圖時(shí),也就是當(dāng)你的 app 中所有的視圖都屬于同級(jí)的時(shí)候,你可以使頁(yè)面控件。

當(dāng)你的 app 結(jié)構(gòu)存在信息層級(jí),請(qǐng)不要使用頁(yè)面控件。因?yàn)轫?yè)面控件不顯示視圖之間的關(guān)系,也不能讓用戶(hù)跟蹤自己的訪(fǎng)問(wèn)路徑回到上一級(jí)。

避免顯示太多的點(diǎn)。10 個(gè)點(diǎn)以上就會(huì)讓用戶(hù)一眼看不過(guò)來(lái),在 app 里打開(kāi) 20 個(gè)視圖是非常耗時(shí)的。如果用戶(hù)真的需要打開(kāi) 20 個(gè)視圖,你就該好好想想其他辦法怎樣顯示更多內(nèi)容了。

將頁(yè)面控件垂直居中放置于當(dāng)前打開(kāi)視圖的底邊與屏幕底邊之間,這樣可以保證它的可見(jiàn)性而又不會(huì)對(duì)內(nèi)容造成干擾。

選擇器

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

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

API提示:若想要了解如何在代碼中定義選擇器,請(qǐng)參考UIPickerView Class Reference.

選擇器:

  • 是日期時(shí)間選擇器的通用模式
  • 包括一個(gè)或多個(gè)滑輪,每個(gè)滑輪含有一組值
  • 以深色標(biāo)識(shí)在中間表示當(dāng)前選中的值
  • 不可以自定義大小(選擇器的大小與 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ì)更快。

進(jìn)度視圖

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

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

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í)間才能完成。 可以的話(huà),請(qǐng)根據(jù)你的 app 的風(fēng)格來(lái)設(shè)計(jì)進(jìn)度條的外觀(guān)。你可以自定義進(jìn)度條的底色以及軌跡顏色,也可以直接使用圖片。

刷新控件

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

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

API提示:
若想要了解如何在代碼中定義刷新控件,請(qǐng)參考UIRefreshControl Class Reference.

刷新控件:

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

就算你使用了刷新控件,也不要因此就不支持內(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)描述刷新控件怎么使用。

圓角矩形按鈕

iOS 7 已經(jīng)不再使用圓角矩形按鈕,而是使用了新的系統(tǒng)按鈕——類(lèi)型為 UIButtonTypeSystem 的 UI 按鈕(UIButton).使用指南可參考System Button.

分段控件

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

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

API提示:
想要了解如何在代碼中定義分段控件,請(qǐng)參考 Segmented Controls.

分段控件:

  • 由兩個(gè)或以上的分段組成,根據(jù)需要分段的數(shù)量按比例分成寬度相同的小段
  • 可以包含文字或者圖片

使用分段控件來(lái)提供密切相關(guān)而又互斥的選項(xiàng)。
保證每個(gè)分段都容易點(diǎn)擊。為了保證每個(gè)分段的大小有至少 44×44 像素,要控制分段的數(shù)量。在 iPhone 上,1 個(gè)分段控件最多包含 5 個(gè)分段。
盡可能地保持每個(gè)分段中的文字長(zhǎng)度一致。因?yàn)槊總€(gè)分段都是等寬的,當(dāng)文本長(zhǎng)度差異很大時(shí)看上去會(huì)很不協(xié)調(diào)。
不要在同一個(gè)分段控件中混用文字和圖片。每一個(gè)分段都僅可支持純文字或純圖片。避免在同一個(gè)分段控件中,一些分段里使用純文字,另一些分段里使用純圖。
如果你自定義了分段控件的外觀(guān),請(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)的描述)。

滑塊

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

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

API提示:
若想要了解如何在代碼中定義滑塊,請(qǐng)參考 Sliders.

  • 由一條水平的軌跡和 Thumb(滑塊中支持用戶(hù)水平拖拽的圓形控件)組成
  • 支持使用自定義圖片來(lái)直觀(guān)的顯示左邊和右邊對(duì)應(yīng)的最小值與最大值的含義
  • 左邊緣最小值到 Thumb 之間的部分是填充軌道

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

如果合適的話(huà),自定義滑塊的外觀(guān)。比如,你可以:

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

不要用滑塊控制音量。若你需要控制音量,請(qǐng)調(diào)用MPVolumeView類(lèi)使用系統(tǒng)自帶的音量滑塊。如果當(dāng)前音頻輸出設(shè)備不支持音量控制,音量滑塊會(huì)被適合的設(shè)備代替。

步進(jìn)器

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

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

API提示:
若想要了解如何在代碼中定義步進(jìn)器,請(qǐng)參考 Steppers.

步進(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ù)值。

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

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/switch_on_2x.png" alt="開(kāi)啟" />
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/switch_off_2x.png" alt="關(guān)閉" />

API提示:
若想要了解如何在代碼中定義開(kāi)關(guān),參考 Switches.

開(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)。

系統(tǒng)按鈕

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

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

API提示:
在 iOS 7 中,UIButtonTypeRoundedRect 已經(jīng)被重新定義為 UIButtonTypeSystem。如果在 iOS 6 中使用了圓角矩形按鈕,在連接到iOS 7的時(shí)候會(huì)自動(dòng)替換為新的系統(tǒng)按鈕。想要了解如何在代碼中定義系統(tǒng)按鈕,參考 Buttons.

系統(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ù)難以理解其含義。

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

合適的話(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ù)迅速地把注意力放到按鈕上,也是必要的。
以iPhone為例,給數(shù)字按鍵添加圓形邊框強(qiáng)化了用戶(hù)撥電話(huà)號(hào)碼時(shí)的心理模型,而撥號(hào)(Call)按鈕的背景色讓用戶(hù)擁有了更明確的點(diǎn)擊目標(biāo)。

文本框

文本框支持用戶(hù)輸入單行的文本。

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

API提示:
若想要了解如何在代碼中定義文本框,以及在文本框中支持圖片和按鈕,請(qǐng)參考 Text Fields.

文本框:

  • 高度固定,包含圓角
  • 當(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)容,包括你原本打算在這個(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)參考iOS App Programming Guide中的Managing the Keyboard部分。但請(qǐng)注意,由于鍵盤(pán)的布局以及輸入方法是由用戶(hù)的系統(tǒng)語(yǔ)言設(shè)置決定的,這部分是你不能控制的。