iOS 系統(tǒng)用戶界面元素 iOS 系統(tǒng)用戶界面元素手機(jī)用戶

iOS系統(tǒng)用戶界面元素iOS系統(tǒng)用戶界面元素深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC四手機(jī)用戶界面元素UI設(shè)計(jì)/主講：高博用戶界面元素（interfaceelement）是軟件或系統(tǒng)界面所包含的滿足用戶交互要求的一系列元素。iOS系統(tǒng)用戶界面元素。iOS應(yīng)用都會(huì)使用一些由UIKit框架定義的UI組件，了解這些基本組件的名稱、角色和作用，將會(huì)幫助你在設(shè)計(jì)app界面時(shí)做出正確合理的決定。UIKit提供的界面元素大致可分為四類：

條欄、內(nèi)容視圖、控件、臨時(shí)視圖深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC

條欄。條欄告知用戶其所在位置的情境信息，以及幫助用戶瀏覽或執(zhí)行操作的控件。

內(nèi)容視圖。內(nèi)容視圖容納app特有的內(nèi)容，并支持諸如滾動(dòng)，插入，刪除和條目重排等行為。控件。控件可以觸發(fā)操作或展示信息。

臨時(shí)視圖。臨時(shí)視圖會(huì)簡(jiǎn)要地給用戶呈現(xiàn)重要信息，附帶操作和功能。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(二）iOS系統(tǒng)控件、臨時(shí)視圖1.控件（1）活動(dòng)指示器（activityindicator）活動(dòng)指示器表示某個(gè)任務(wù)或進(jìn)程正在進(jìn)行中（如下圖的文本標(biāo)簽所示）。●在任務(wù)正在進(jìn)行時(shí)旋轉(zhuǎn)，任務(wù)完成時(shí)消失●不允許用戶與之交互在工具欄或主視圖中，使用活動(dòng)指示器可以告知用戶進(jìn)程正在進(jìn)行當(dāng)中，但不會(huì)提示該進(jìn)程會(huì)何時(shí)結(jié)束。不要顯示一個(gè)靜止不動(dòng)的活動(dòng)指示器；使用活動(dòng)指示器來(lái)讓用戶知道他們的任務(wù)或進(jìn)程沒(méi)有停止；自定義一個(gè)與所在視圖相協(xié)調(diào)的活動(dòng)指示器。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC（2）“添加聯(lián)系人”按鈕（ContactAddbutton）“添加聯(lián)系人”按鈕可以讓用戶將一個(gè)現(xiàn)有聯(lián)系人添加到文本框或其他文本視圖中?！駮?huì)展示用戶的聯(lián)系人列表●幫助用戶添加一個(gè)聯(lián)系人到「添加聯(lián)系人」按鈕所在的視圖中使用“添加聯(lián)系人”按鈕給了用戶一種不需要使用鍵盤(pán)也能訪問(wèn)聯(lián)系人的簡(jiǎn)便方式。由于“添加聯(lián)系人”按鈕屬于鍵盤(pán)輸入聯(lián)系人信息的替代方式，因此在不支持鍵盤(pán)輸入的界面中使用該按鈕并不合適。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(3)日期選擇器（datepicker）日期選擇器顯示著日期和時(shí)間的組件，比如小時(shí)、分鐘、日和年份?！褡疃囡@示四個(gè)獨(dú)立的滾動(dòng)，每個(gè)滾輪顯示一個(gè)單獨(dú)的分類數(shù)值，比如月份或小時(shí)●在視圖中央使用深色文本來(lái)表示當(dāng)前選中的數(shù)值●不能更改其大小（選擇器的大小和iPhone鍵盤(pán)相同）深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC●有四種模式，每一種滾輪包含一組不同的數(shù)值：

日期和時(shí)間。日期和時(shí)間模式（默認(rèn)模式）以滾動(dòng)形式顯示著日歷日期、小時(shí)和分鐘，以及一個(gè)可選的上午/下午滾輪。

時(shí)間。時(shí)間模式以滾輪形式顯示小時(shí)和分鐘，以及一個(gè)可選上午/下午滾輪。

時(shí)期。日期模式以滾動(dòng)形式顯示了月份、日、年份。

倒數(shù)計(jì)時(shí)器。倒數(shù)計(jì)時(shí)器模式以滾動(dòng)形式顯示小時(shí)和分鐘。你可以指定一次倒計(jì)時(shí)的總時(shí)長(zhǎng)，最長(zhǎng)可達(dá)23小時(shí)59分鐘。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(4)“詳情展開(kāi)”按鈕（DetailDisclosurebutton）“詳情展開(kāi)”按鈕用于展現(xiàn)與該項(xiàng)相關(guān)的更多詳細(xì)信息或功能。“詳情展開(kāi)”按鈕會(huì)展開(kāi)一個(gè)獨(dú)立視圖來(lái)顯示與某個(gè)特定項(xiàng)目相關(guān)的更多信息或功能。當(dāng)“詳情展開(kāi)”按鈕在表格的某一行中出現(xiàn)時(shí)，輕點(diǎn)此行中按鈕外的其他地方均不會(huì)觸發(fā)該按鈕；相反，這樣只會(huì)選中這一行，或者觸發(fā)由app定義的行為。在表格視圖中使用“詳情展開(kāi)”按鈕來(lái)讓用戶獲知與這個(gè)列表項(xiàng)的更多信息或功能。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC（5）“信息”按鈕（Infobutton）“信息”按鈕用于展現(xiàn)app的配置信息，有時(shí)候會(huì)在當(dāng)前視圖的背面出現(xiàn)。iOS包含兩種「信息」按鈕樣式：適用于淺色內(nèi)容的深色按鈕；以及適用于深色內(nèi)容的淺色按鈕。你可以使用「信息」按鈕來(lái)展現(xiàn)app的配置信息或選項(xiàng)。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC（6）標(biāo)簽（label）標(biāo)簽用于顯示靜態(tài)文本。

●顯示任意長(zhǎng)度的靜態(tài)文本●不支持除復(fù)制文本之外的用戶交互行為你可以使用標(biāo)簽去命名或描述你的部分UI，又或者是給用戶提供一些簡(jiǎn)短的信息。標(biāo)簽最適合用來(lái)顯示相對(duì)較少的文本。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC（7）網(wǎng)絡(luò)活動(dòng)指示器（networkactivityindicator）網(wǎng)絡(luò)活動(dòng)指示器會(huì)在狀態(tài)欄中出現(xiàn)，表示網(wǎng)絡(luò)活動(dòng)正在進(jìn)行?！癞?dāng)網(wǎng)絡(luò)活動(dòng)正在進(jìn)行時(shí)，會(huì)在狀態(tài)欄上旋轉(zhuǎn)；當(dāng)網(wǎng)絡(luò)活動(dòng)停止時(shí)則消失●不支持用戶交互行為當(dāng)你的app的網(wǎng)絡(luò)連接超過(guò)好幾秒時(shí)，顯示網(wǎng)絡(luò)活動(dòng)指示器以提供反饋。如果操作在這之前就已完成，那么你不需要顯示網(wǎng)絡(luò)活動(dòng)指示器，因?yàn)楹芸赡茉谟脩糇⒁獾剿?，指示器就消失了。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC（8）頁(yè)碼控件（pagecontrol）頁(yè)碼控件能表示打開(kāi)了多少視圖以及當(dāng)前所見(jiàn)的是哪一個(gè)，如圖●在app中每個(gè)當(dāng)前打開(kāi)的視圖都會(huì)顯示為一個(gè)指示圓點(diǎn)（從左到右，這些圓點(diǎn)代表著視圖被打開(kāi)的先后順序）●默認(rèn)情況下，使用不透明的圓點(diǎn)來(lái)表示當(dāng)前所見(jiàn)的視圖，用半透明圓點(diǎn)來(lái)表示所有其他視圖●不允許用戶不按順序訪問(wèn)視圖●不要將圓點(diǎn)收縮或擠壓在一起以顯示更多被打開(kāi)的視圖；如果你嘗試展示超過(guò)視圖范圍的圓點(diǎn)，這些圓點(diǎn)將被截?cái)?/p>

如果app是在一系列層級(jí)視圖中顯示信息，則不要使用頁(yè)碼控件；將頁(yè)碼控件在打開(kāi)視圖底部或屏幕邊緣垂直居中。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(9)選擇器（picker）選擇器用來(lái)顯示一組數(shù)值，用戶可以從中選擇一個(gè)。●是日期選擇器的通用版本●顯示一個(gè)或多個(gè)滾輪，每個(gè)滾輪都包含一組數(shù)值●在視圖中央使用深色文本來(lái)表示當(dāng)前選中的數(shù)值●不能調(diào)整大?。ㄟx擇器的尺寸大小和iPhone鍵盤(pán)相同）一般來(lái)說(shuō)，當(dāng)用戶對(duì)整組數(shù)值都很熟悉時(shí)，可以使用選擇器。如果你需要展示大量數(shù)值，考慮使用表格視圖而不是選擇器。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(10)進(jìn)度視圖（progressview）進(jìn)度視圖用于展示有已知持續(xù)時(shí)間的任務(wù)或進(jìn)程進(jìn)度（如圖郵件”工具欄所示）●是一條軌跡，隨任務(wù)或進(jìn)程進(jìn)度從左到右持續(xù)填充●不允許用戶交互行為iOS定義了兩種進(jìn)度視圖樣式：

默認(rèn)型。默認(rèn)樣式看上去更突出，適合用在app的主要內(nèi)容區(qū)域中。條欄型。條欄樣式比默認(rèn)樣式更纖細(xì)，常用在工具欄中。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(11)刷新控件（refreshcontrol）刷新控件用于執(zhí)行用戶發(fā)起的內(nèi)容刷新—通常在表格中刷新（如圖中郵箱列表上方所示）?！窨瓷先ズ突顒?dòng)指示器很像●可以展示一個(gè)標(biāo)題●默認(rèn)情況下隱藏，當(dāng)用戶從表格頂部邊緣往下拖拽刷新時(shí)才出現(xiàn)深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(12)分段控件（segmentedcontrol）分段控件是一組分段的直線集合，每一個(gè)分段都相當(dāng)于一個(gè)視圖的按鈕。●由兩個(gè)或兩個(gè)以上寬度相同的分段組成，具體寬度取決于分段數(shù)量●可以顯示文本或圖像確保每個(gè)分段都容易點(diǎn)擊。為了保證每個(gè)分段都有44x44點(diǎn)的舒適點(diǎn)擊區(qū)域，請(qǐng)控制分段數(shù)量。在iPhone上，分段控件應(yīng)等于或少于5個(gè)分段

盡可能保證每個(gè)分段的內(nèi)容長(zhǎng)度一致。避免在單個(gè)分段混合放置文本和圖像。如果自定義了分段控件，必要時(shí)請(qǐng)調(diào)整內(nèi)容布局。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC

(13)滑塊（slider）滑塊允許用戶在一個(gè)限定范圍內(nèi)調(diào)整數(shù)值或進(jìn)度（如圖左右兩側(cè)所示）?！裼梢粭l水平的滑軌和一個(gè)滑塊（用戶可以滑動(dòng)的圓形控件）組成●可以放置圖像，傳達(dá)左右兩端數(shù)值的含義●填充滑軌從最小值（在左端）到滑塊之間的部分深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC如果必要，可以為滑塊創(chuàng)建自定義外觀。例如，你可以：●定義滑塊的的外觀，以便用戶一眼就可以看出滑塊是否激活●在滑軌兩端放置圖像以幫助用戶理解滑塊的作用●通常，這些自定義圖像對(duì)應(yīng)著滑塊控制范圍內(nèi)的最小值和最大值?；瑝K可以控制圖像尺寸，例如，在最小值這端顯示一個(gè)很小的圖像，在最大值那段顯示一個(gè)很搭的圖像。●為滑軌定義兩種不同的外觀，這取決于滑塊的哪一邊顯示哪一種控制狀態(tài)。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC

(14)步進(jìn)器（stepper）步進(jìn)器能以常數(shù)量來(lái)增加或減少某個(gè)數(shù)值。●是一個(gè)分為兩段的控件，其中一段默認(rèn)顯示加號(hào)，另一段默認(rèn)顯示減號(hào)●支持自定義圖像●不顯示用戶所調(diào)整的數(shù)值.避免在用戶想要大幅度調(diào)整數(shù)值時(shí)使用步進(jìn)器。確保步進(jìn)器所影響的數(shù)值變化顯而易見(jiàn)。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC(15)開(kāi)關(guān)（switch）開(kāi)關(guān)表現(xiàn)了兩種互斥的選項(xiàng)或狀態(tài)?！耧@示一個(gè)項(xiàng)目的二元狀態(tài)●僅用于表格視圖深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC開(kāi)關(guān)(16)系統(tǒng)按鈕（systembutton）系統(tǒng)按鈕用來(lái)執(zhí)行app定義的操作?！衲J(rèn)情況下沒(méi)有邊框和背景●可以包含圖標(biāo)或文本標(biāo)題●支持自定義樣式，比如邊框和背景圖像使用動(dòng)詞或動(dòng)詞短語(yǔ)來(lái)描述按鈕所執(zhí)行的操作。使用標(biāo)題大寫(xiě)樣式（title-stylecapitalization）。避免使用太長(zhǎng)的標(biāo)題。如果合適，為內(nèi)容區(qū)域中的系統(tǒng)按鈕添加邊框或背景顯示。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC

(17)文本框（textfield）文本框）支持用戶輸入單行的文本（如圖中目的描述和占位符文本處所示）?！袷且粋€(gè)固定高度的圓角框●當(dāng)用戶在其中輕點(diǎn)時(shí)，會(huì)自動(dòng)呼出鍵盤(pán)●可以包含系統(tǒng)提供的按鈕，如「書(shū)簽」按鈕●可以顯示使用多種樣式的文本

使用文本框來(lái)讓用戶輸入少量信息。如果有助于用戶理解如何使用文本框，那可以自定義文本框。合適的話，在文本框右側(cè)顯示“清除”按鈕。如果可以幫助用戶理解文本框的目的，可以在其中顯示提示語(yǔ)。指定一種鍵盤(pán)類型，以適配你所希望用戶輸入的內(nèi)容類型。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC2.臨時(shí)視圖（1)警告框（alert）警告框）向用戶提示會(huì)影響他們使用app或設(shè)備的重要信息。

●顯示一個(gè)必需的標(biāo)題和一條可選的消息

●包含一個(gè)或多個(gè)按鈕警告出現(xiàn)得少會(huì)有助于用戶對(duì)其認(rèn)真對(duì)待。最好嚴(yán)格控制你的app顯示的警告框數(shù)量，并確保每一個(gè)警告框都提供。避免創(chuàng)建不必要的警告框。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC警告文本設(shè)計(jì)指南標(biāo)題大寫(xiě)樣式（Title-stylecapitalization）指的是每一個(gè)單詞的首字母都要大寫(xiě)，除了冠詞、并列連詞以及少于四個(gè)字母且不是第一個(gè)單詞的介詞。句子大寫(xiě)樣式（Sentence-stylecapitalization）指的是第一個(gè)單詞的首字母需要大寫(xiě)，單詞的其余部分小寫(xiě)，除非他們是專有名詞或?qū)Ｓ行稳菰~。簡(jiǎn)明扼要地描述當(dāng)前情境，并告訴人們可以做什么。

保持標(biāo)題足夠簡(jiǎn)短，盡可能以一行顯示。避免一個(gè)詞的標(biāo)題；可能的話，盡量使用短句；盡可能撰寫(xiě)一個(gè)不需要補(bǔ)充說(shuō)明的標(biāo)題；不要刻意避免使用負(fù)面措辭；盡可能避免使用“你”、“你的”、“我”和“我的”。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC恰如其分地使用大小寫(xiě)和標(biāo)點(diǎn)符號(hào)，具體來(lái)說(shuō)：如果必須為警告框提供一條可選的消息正文，請(qǐng)撰寫(xiě)一個(gè)簡(jiǎn)短、完整的句子。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC避免在警告文本中描述點(diǎn)擊哪個(gè)按鈕從而導(dǎo)致文本過(guò)長(zhǎng)。如果你需要提供詳細(xì)的指引，請(qǐng)遵循以下準(zhǔn)則：

●確保使用“輕點(diǎn)”（tap）（不是“觸摸”（touch）或“點(diǎn)擊”（click）或“選擇”（choose）來(lái)描述動(dòng)作選項(xiàng)。

●不要用引號(hào)括按鈕的標(biāo)題，但要保證其首字母大寫(xiě)。確保警告框在豎屏和橫屏方向上顯示正常。

一般來(lái)說(shuō)，使用兩個(gè)按鈕的警告框深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC合適地放置按鈕。理想情況下，最自然的點(diǎn)擊按鈕應(yīng)符合兩個(gè)標(biāo)準(zhǔn)：它執(zhí)行了用戶最想要做的操作；即便用戶不小心誤點(diǎn)，也不會(huì)造成嚴(yán)重問(wèn)題。

具體來(lái)說(shuō)：

如果按鈕不會(huì)造成破壞性后果，而這又是用戶最有可能的操作，那么它應(yīng)當(dāng)在雙按鈕警告框的右邊。取消按鈕則應(yīng)該放在左邊。如果按鈕會(huì)造成破壞性后果，而這又是用戶最有可能的操作，那么它應(yīng)該放在雙按鈕警告框的左邊。取消按鈕則應(yīng)該放在右邊。

深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC為警告框按鈕撰寫(xiě)簡(jiǎn)短而合乎邏輯的標(biāo)題。好的按鈕標(biāo)題一般只有一到兩個(gè)詞，描述了輕點(diǎn)按鈕后的結(jié)果。當(dāng)你在創(chuàng)建警告框按鈕的標(biāo)題時(shí)，請(qǐng)遵循下面這些準(zhǔn)則：

和所有按鈕標(biāo)題一樣，使用標(biāo)題大寫(xiě)樣式，且句末沒(méi)有標(biāo)點(diǎn)符號(hào)。

和所有按鈕標(biāo)題一樣，使用和警告框文本直接相關(guān)的動(dòng)詞和動(dòng)詞短語(yǔ)——例如，“取消”、“查看所有”、“回復(fù)”或“忽略”。

如果沒(méi)有更好的選擇，使用“好”（OK）作為簡(jiǎn)單的接受選項(xiàng)。避免使用“是”和“否”。

盡可能避免使用“你”、“你的”，“我”和“我的”。使用這些詞語(yǔ)的標(biāo)題往往會(huì)引起歧義，還可能造成冒犯。深圳職業(yè)技術(shù)學(xué)院/SHENZHENPOLYTECHNIC（2）操作菜單（actionsheet）操作菜單顯示著與用戶所發(fā)起的任務(wù)直接相關(guān)的一系列選項(xiàng)。●作為用戶操作的結(jié)果出現(xiàn)●顯示兩個(gè)或兩個(gè)以上的按鈕使用操作菜單可以提供完成一項(xiàng)任務(wù)的不同方法；可以在完成一個(gè)有潛在風(fēng)險(xiǎn)的任務(wù)前獲得用戶確認(rèn)。在iPhone上，要放置“取消”按鈕以便用戶可以輕松但安全地放棄任務(wù)；在iPad上，基于用戶發(fā)起任務(wù)的方式來(lái)決定操作列表的顯示方式。無(wú)論在何種設(shè)備上，均使用紅色來(lái)標(biāo)識(shí)那些執(zhí)行潛在破壞性操