【譯文】iOS 10 人機(jī)界面指南(完結(jié))

8. UI 控件(UI Controls)

? ? 8.1 按鈕(Buttons)

? ? 8.2 編輯菜單(Edit Menus)

? ? 8.3 標(biāo)簽(Labels)

? ? 8.4 頁面控件(Page Controls)

? ? 8.5 選擇器(Pickers)

? ? 8.6 進(jìn)度指示器(Progress Indicators)

? ? 8.7 內(nèi)容刷新控件(Refresh Content Controls)

? ? 8.8 分段控件(Segmented Controls)

? ? 8.9 滑塊(Sliders)

? ? 8.10 步進(jìn)器(Steppers)

? ? 8.11 開關(guān)按鈕(Switches)

? ? 8.12 文本框(Text Fields)

8. UI 控件(UI Controls)

8.1 按鈕(Buttons)

按鈕觸發(fā)app內(nèi)特定的操作,擁有自定義背景,并且可以含有一個(gè)名稱或圖標(biāo)。系統(tǒng)為大多數(shù)情況提供了若干已確定的按鈕樣式。你也可以設(shè)計(jì)完全自定義的按鈕。

了解開發(fā)詳情,請參閱UIButton


系統(tǒng)按鈕

系統(tǒng)按鈕

系統(tǒng)按鈕一般出現(xiàn)在導(dǎo)航欄和工具欄,但也可能被用于它處。

使用動(dòng)詞當(dāng)作按鈕名稱。一個(gè)特定行為的名稱表明了按鈕是可交互的并且說明了點(diǎn)擊它會(huì)產(chǎn)生的結(jié)果。

名稱使用單詞首字母大小的格式。除了冠詞、并列連詞和不大于4個(gè)單詞的介詞外,其余單詞都要首字母大小寫。

保證名稱的簡短。過長的文本會(huì)讓你的界面變得擁擠,在小屏上還很可能會(huì)被截?cái)唷?/p>

只在必要時(shí)考慮添加邊框或背景色。系統(tǒng)圖標(biāo)默認(rèn)沒有邊框和背景色。然而,在某些內(nèi)容區(qū)域,邊框和背景色會(huì)因其指示了可交互性而顯得必要。在"電話"中,帶有邊框的數(shù)字鍵強(qiáng)化了打電話的傳統(tǒng)模型,撥打按鈕的背景色讓其變成一個(gè)醒目的目標(biāo),易于用戶點(diǎn)擊。

了解開發(fā)詳情,請參閱UIButton中的UIButtonTypeSystembutton type。


詳情展開按鈕

詳情展開按鈕(Detail Disclosure Buttons)

詳情展開按鈕用于打開一個(gè)視圖——通常是一個(gè)模態(tài)視圖,該視圖含有更多信息或是與屏幕內(nèi)某個(gè)特定項(xiàng)目相關(guān)的功能。盡管你可以在任何一種視圖中使用詳情展開按鈕,但它通常出現(xiàn)在表格中用于獲取該行的相關(guān)信息。

合理地在表格中使用詳情展開按鈕。當(dāng)表格的某行上出現(xiàn)了詳情展開按鈕時(shí),點(diǎn)擊按鈕會(huì)顯示更多的信息。點(diǎn)擊該行的其它地方會(huì)選中該行或是激活應(yīng)用特定的行為。如果你想讓用戶通過點(diǎn)擊整行來查看更多詳情,就不要使用詳情展開按鈕。取而代之的,可以使用V形的詳情展開附屬控件(detail disclosure accessory control)。請參閱UITableViewCell中的UITableViewCellAccessoryType

了解開發(fā)詳情,請參閱UIButton中的UIButtonTypeDetailDisclosurebutton type。


信息按鈕

信息按鈕

信息按鈕呼出app相關(guān)的配置詳情,有時(shí)會(huì)以翻轉(zhuǎn)視圖的形式出現(xiàn)在當(dāng)前視圖的背面。信息按鈕含有兩種樣式:淺色和深色。選擇最適合你的app設(shè)計(jì)的樣式,不要讓它埋沒在當(dāng)前屏幕中。

了解開發(fā)詳情,請參閱UIButton中的UIButtonTypeInfoLightandUIButtonTypeInfoDarkbutton types。


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

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

用戶通過點(diǎn)擊添加聯(lián)系人按鈕在現(xiàn)有的聯(lián)系人列表中瀏覽從而選擇一個(gè)插入到文本框或是其它視圖。比如,在“郵件"中,你可以點(diǎn)擊“收件人(To)”欄右側(cè)的“添加聯(lián)系人”按鈕來從你的聯(lián)系人列表中選擇收件人。

除了”添加聯(lián)系人”按鈕外,允許鍵盤輸入。添加聯(lián)系人按鈕只是提供了輸入聯(lián)系人信息的另一種選擇,而不是替代品。把其作為一種添加現(xiàn)有聯(lián)系人的快捷方式是好的,但同時(shí)也要允許用戶通過鍵盤輸入聯(lián)系人信息。

了解開發(fā)細(xì)節(jié),請參閱UIButton中的UIButtonTypeContactAddbutton type。

8.2 編輯菜單(Edit Menus)

用戶可以通過在文本欄、文本視圖、網(wǎng)頁視圖或圖片視圖中長按或雙擊來選擇內(nèi)容或是呼出編輯菜單,比如“拷貝”和“粘貼”。

為當(dāng)前上下文展示合適的命令。默認(rèn)地,這些選項(xiàng)包括“剪切”、“拷貝”、“粘貼”、“選擇”、“全選”以及“刪除”命令,但并不是所有按鈕都要出現(xiàn)。如果沒有內(nèi)容被選中,那么該菜單就不應(yīng)該包含需要先選中再執(zhí)行的命令,比如“拷貝”或“剪切”。同樣的,如果當(dāng)前已經(jīng)選中了某項(xiàng),那么該菜單就不應(yīng)該含有“選擇”選項(xiàng)。

讓用戶通過標(biāo)準(zhǔn)手勢觸發(fā)編輯菜單。用戶期望通過長按或雙擊文本或圖片來呼出菜單。你的app應(yīng)該同時(shí)感應(yīng)這兩種手勢。若用戶執(zhí)行了雙擊操作,你還可以指定會(huì)被默認(rèn)選中的內(nèi)容。在文本視圖中,應(yīng)該默認(rèn)選中詞語。

必要時(shí)調(diào)節(jié)編輯菜單的位置。默認(rèn)地,菜單會(huì)根據(jù)空間的空余情況出現(xiàn)在插入點(diǎn)或備選項(xiàng)的上方或下方,并且包含指向?qū)?yīng)內(nèi)容的箭頭。盡管你不能夠改變菜單的形狀,但它的位置是可設(shè)置的——你可以避免它遮擋住重要的界面內(nèi)容或元素。

不要使用其它控件來執(zhí)行和編輯菜單同樣的功能。為執(zhí)行同一個(gè)操作提供不同的路徑會(huì)帶來不一致的用戶體驗(yàn),讓用戶感到困惑。如果你的app讓用戶通過編輯菜單來復(fù)制內(nèi)容,那么就不要再單獨(dú)設(shè)置一個(gè)復(fù)制按鈕。

允許用戶選擇和復(fù)制那些可能對他們有用但卻無法編輯的文本。用戶常常會(huì)想要在他們的郵件、筆記或是網(wǎng)頁搜索框中黏貼一些靜態(tài)內(nèi)容(不可編輯的),比如一個(gè)圖片標(biāo)簽或是一條臉書狀態(tài)。

不要為呼出編輯菜單提供一個(gè)按鈕。如果你這么做,那些通過手勢來觸發(fā)菜單的人最終都會(huì)變成通過點(diǎn)擊按鈕來打開菜單。

讓編輯操作可以被撤銷。在執(zhí)行操作前,菜單不會(huì)向用戶發(fā)起二次確認(rèn)。但是用戶可能會(huì)在點(diǎn)擊某個(gè)命令之后改變了主意,所以請向用戶提供撤銷和重做的支持。

在編輯菜單添加有用的自定義命令。你可以通過提供應(yīng)用特有的命令,來增強(qiáng)編輯菜單的價(jià)值。和標(biāo)準(zhǔn)命令一樣,任何自定義命令都需要通過選中文本或其它內(nèi)容才能被觸發(fā)。

把自定義命令放在系統(tǒng)自帶的命令之后。系統(tǒng)自帶的命令是用戶最常使用的功能,不要在它們之間穿插自定義命令。

盡可能減少自定義命令的數(shù)量。不要讓用戶面對太多的選擇。

保持自定義命令名稱簡短。命令名稱應(yīng)該是精準(zhǔn)描述所執(zhí)行操作的動(dòng)詞或動(dòng)詞短語。使用標(biāo)題式大寫格式:除冠詞、并列連詞和不大于4個(gè)字母的介詞外,一律大寫首字母。

了解開發(fā)詳情,請參閱Text Programming Guide for iOSUIMenuController中的Copy, Cut, and Paste Operations


8.3 標(biāo)簽(Labels)

標(biāo)簽描述了當(dāng)前屏的界面元素或是提供了簡短的信息。雖然用戶無法編輯標(biāo)簽,但是他們有時(shí)會(huì)拷貝標(biāo)簽內(nèi)容。標(biāo)簽可以展示任意數(shù)量的靜態(tài)文本,但是最好保持簡短。

保證標(biāo)簽易讀。標(biāo)簽可以包含純文本或樣式文本。如果你調(diào)整了標(biāo)簽樣式或是使用了自定義字體,請同時(shí)確保它們的易讀性。最好采用動(dòng)態(tài)字體(Dynamic Type),這樣即使用戶更改了設(shè)備的字體大小,你的標(biāo)簽依舊看起來很棒。請參閱【動(dòng)態(tài)字體】。同時(shí)你應(yīng)該在輔助功能打開的情況下測試你的標(biāo)簽,比如加粗文本。請參閱【輔助功能】。

想學(xué)習(xí)關(guān)于文本(text)的知識(shí),請參閱String Programming Guide。項(xiàng)學(xué)習(xí)如何創(chuàng)造樣式化文本,請參閱Attributed String Programming Guide。了解標(biāo)簽的開發(fā)詳情,請參閱UILabel


8.4 頁面控件(Page Controls)

頁面控件說明了當(dāng)前頁在一組平級頁中所處的位置。它由一系列小圓點(diǎn)組成,表示了可用頁的數(shù)量以及它們被打開的次序。實(shí)心的圓點(diǎn)表示當(dāng)前頁。這些圓點(diǎn)是按一定的距離分布的,如果屏幕上有太多圓點(diǎn)它們就會(huì)被部分截?cái)唷S脩艨梢酝ㄟ^點(diǎn)擊頁面控件的左邊緣和右邊緣在相鄰的頁面中切換,但是他們不能通過點(diǎn)擊某個(gè)特定的圓點(diǎn)到達(dá)其對應(yīng)的頁面。頁面控件提供的導(dǎo)航是有序的,用戶一般通過輕掃到達(dá)相鄰頁。

不要把頁面控件和有層次結(jié)構(gòu)的頁面一起使用。頁面控件不是為了說明頁面之間的關(guān)聯(lián),也不是為了表明某一頁對應(yīng)某個(gè)圓點(diǎn)。這種類型的控件是為了那些同類頁而設(shè)計(jì)的。

不要展示過多的頁面。一旦圓點(diǎn)超過10個(gè),用戶就難以只看一眼就數(shù)清數(shù)量;而一旦打開頁超過20個(gè),按次序?yàn)g覽就變得十分耗時(shí)。如果你的app需要展示超過20個(gè)的同類頁,請考慮采用其它的方法,比如常用于無序?qū)Ш降膶m格。

把頁面控件居中放在屏幕底部。頁面控件應(yīng)該被居中放置在頁面底邊緣和屏幕底邊緣之間。這樣能確保它被用戶發(fā)現(xiàn),且不會(huì)遮擋內(nèi)容。

了解開發(fā)詳情,請參閱UIPageControl


8.5 選擇器(Pickers)

選擇器包含了一個(gè)或多個(gè)可滾動(dòng)的值列表,每個(gè)列表都有一個(gè)垂直居中且以深色文本顯示的選中值。選擇器一般在用戶編輯字段或點(diǎn)擊菜單時(shí)出現(xiàn)在屏幕的底端或是浮出層里。選擇器也可以在行間出現(xiàn),比如在“日歷”中編輯事件的日期時(shí)。選擇器的高度大約在五行列表值左右。選擇器的寬度可以是屏寬,也可以與其所屬視圖等寬。

使用符合用戶預(yù)期且按邏輯排列的值。當(dāng)滾動(dòng)列表靜止時(shí),會(huì)有很多值被隱藏。最好的做法是讓用戶猜測到被隱藏的值是什么,比如是一系列按首字母排序的國家名,這樣用戶就能在列表中快速翻動(dòng)查找。

避免跳轉(zhuǎn)至其它屏來展示選擇器。選擇器在當(dāng)前上下文中、在所填字段附近出現(xiàn)最有效。

對于有大量值的列表,應(yīng)該用表格而不是選擇器。在高度有限的選擇器里瀏覽很長的列表是煩人的。但是表格的高度是可調(diào)的,還能含有索引,讓滾動(dòng)更快速。

了解開發(fā)詳情,請參閱UIPickerView

日期選擇器

日期選擇器呈現(xiàn)了一個(gè)選擇指定日期、時(shí)間或兩者同時(shí)的高效界面。它還同時(shí)提供了計(jì)時(shí)器界面。

日期選擇器有四種模式,分別展示四套不同的可選值。

日期:展示月份、當(dāng)月的日期以及年份

時(shí)間:展示小時(shí)、分以及上午或下午選項(xiàng)(可選)

日期和時(shí)間:展示日期、小時(shí)、分、上午或下午選項(xiàng)(可選)

計(jì)時(shí)器:展示小時(shí)和分,最多23小時(shí)和59分。

日期選擇上顯示的具體值視用戶的所在地區(qū)而定。

在展示分鐘時(shí),考慮盡可能地減少選項(xiàng)。分鐘列表默認(rèn)含有60個(gè)值(0至59)。你可以選擇性地增大分鐘間隔,只要它能將60整除。比如,你可能會(huì)想要15分鐘的間隔(0,15,30和45)。

了解開發(fā)詳情,請參閱UIDatePicker


8.6 進(jìn)度指示器(Progress Indicators)

當(dāng)你的app需要加載內(nèi)容或是執(zhí)行冗長的數(shù)據(jù)處理操作時(shí),不要讓用戶坐在那里,傻傻盯著不動(dòng)的屏幕等待。使用活動(dòng)指示器和進(jìn)度條來告訴用戶你的app沒有停止運(yùn)行,并讓他們知道還需要等待多久。

請同時(shí)參閱Loading

活動(dòng)指示器

活動(dòng)指示器會(huì)在執(zhí)行一些無法量化的任務(wù)時(shí)旋轉(zhuǎn),比如加載或是同步復(fù)雜數(shù)據(jù)。當(dāng)任務(wù)完成時(shí),它會(huì)消失。活動(dòng)指示器是不可交互的。

更多地使用進(jìn)度條而非活動(dòng)指示器。如果當(dāng)前活動(dòng)是可量化的,請使用進(jìn)度條來代替活動(dòng)指示器,這樣用戶就能夠更好地預(yù)估當(dāng)前發(fā)生了什么以及它要進(jìn)行多久。

確保活動(dòng)指示器一直在旋轉(zhuǎn)。用戶會(huì)把靜止的活動(dòng)指示器和停滯的進(jìn)程聯(lián)系在一起。確保它一直在旋轉(zhuǎn),這樣用戶就知道系統(tǒng)在工作。

如果對用戶有幫助,可以在等待任務(wù)完成的過程中,為他們提供有用的信息。可以通過活動(dòng)指示器下方的標(biāo)簽顯示更多的信息。避免使用語義模糊的術(shù)語,比如“加載中”或“認(rèn)證中”,因?yàn)樗麄儾⒉荒芙o用戶帶去任何價(jià)值。

了解開發(fā)詳情,請參閱UIActivityIndicatorView

進(jìn)度條

進(jìn)度條包含了一條從左往右填充的軌跡,用于展示一個(gè)任務(wù)的進(jìn)度。進(jìn)度條是不可交互的,但是他們經(jīng)常伴隨著一個(gè)取消當(dāng)前操作的按鈕。

總是準(zhǔn)確地匯報(bào)進(jìn)度。不要為了讓你的app看起來很忙碌而展示不準(zhǔn)確的進(jìn)度信息。只為可量化的任務(wù)使用進(jìn)度條。否則,請使用活動(dòng)指示器。

用進(jìn)度條來展示有明確持續(xù)時(shí)間的任務(wù)。進(jìn)度條能夠很好的展示當(dāng)前任務(wù)的狀態(tài),尤其是能夠讓用戶知道當(dāng)前任務(wù)還需要多久才能完成。

在導(dǎo)航欄和工具欄中隱藏進(jìn)度條未被填充的那部分軌跡。進(jìn)度條默認(rèn)含有填充和未填充的部分。當(dāng)在導(dǎo)航欄和工具欄中使用,比如用來表明頁面的加載進(jìn)度時(shí),應(yīng)該隱藏進(jìn)度條未被填充的部分。

考慮自定義進(jìn)度條的外觀來與你的app匹配。進(jìn)度條的外觀能夠根據(jù)你的app設(shè)計(jì)而調(diào)整。比如,你能夠?yàn)樘畛浜臀刺畛涞牟糠衷O(shè)定自定義的顏色或圖片。

了解開發(fā)詳情,請參閱UIProgressView

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

當(dāng)前發(fā)生連網(wǎng)活動(dòng)時(shí),網(wǎng)絡(luò)活動(dòng)指示器會(huì)在屏幕頂部狀態(tài)欄上旋轉(zhuǎn)。結(jié)束連網(wǎng)時(shí),它就會(huì)消失。這個(gè)指示器和活動(dòng)指示器長得一樣,并且同樣不可交互。

只在進(jìn)行那些持續(xù)時(shí)間超過幾秒的網(wǎng)絡(luò)活動(dòng)時(shí)才展示這個(gè)指示器。無需為快速的網(wǎng)絡(luò)活動(dòng)展示指示器,因?yàn)樗鼈兒芸赡茉谟脩糇⒁獾剿拇嬖诨蚴敲靼姿硎裁粗耙呀?jīng)消失了。

請同時(shí)參閱Status Bars。了解開發(fā)詳情,請參閱UIApplication中的networkActivityIndicatorVisible

8.7 內(nèi)容刷新控件(Refresh Content Controls)

刷新控件一般用于表格視圖中,通過人為觸發(fā)來立即刷新內(nèi)容,而無需等至下次自動(dòng)加載發(fā)生。刷新控件是一種特殊類型的活動(dòng)指示器,默認(rèn)情況下被隱藏,當(dāng)用戶下拉需要重新加載的視圖之后可以被看見。比如,在“郵件”中,你可以通過下拉收件箱列表來檢查是否有最新的訊息。

執(zhí)行內(nèi)容的自動(dòng)更新。盡管用戶會(huì)感謝能夠通過下拉快速刷新內(nèi)容,但他們同樣希望能夠定時(shí)自動(dòng)地替他們刷新。不要讓用戶承擔(dān)激活每一次刷新的工作。通過定時(shí)刷新保證數(shù)據(jù)的及時(shí)性。

如果有意義,可以為刷新控件添加一個(gè)短標(biāo)題。刷新控件可以選擇性地包含一個(gè)標(biāo)題。但是在大多數(shù)情況下,這樣做是無意義的,因?yàn)樗⑿驴丶膭?dòng)效已經(jīng)足以表明加載的狀態(tài)。如果你一定要包含一個(gè)標(biāo)題,不要用它來解釋如何執(zhí)行刷新操作。取而代之地,提供一些與被加載內(nèi)容有關(guān)且有價(jià)值的信息。比如,在“播客”中,利用一行文字來告訴用戶上次是什么時(shí)間更新了播客。

了解開發(fā)詳情,請參閱UIRefreshControl


8.8 分段控件(Segmented Controls)

分段控件是含有兩個(gè)或更多分段的一個(gè)線狀組,每個(gè)分段等于一個(gè)與其它互斥的按鈕。控件里的所有分段都是等寬的。和按鈕一樣,分段可以含有文本或圖片。分段控件一般用于展示不同的視圖。比如,在“地圖”中,分段控件讓你能在地圖、公交和衛(wèi)星視圖間來回切換。

限制分段的數(shù)量以確保可用性。更寬的分段更易于點(diǎn)擊。在iPhone設(shè)備上,一個(gè)分段控件最多只能包含五個(gè)分段。

盡量維持各分段內(nèi)容尺寸的一致性。因?yàn)樗械姆侄味嫉葘挘匀绻硞€(gè)分段被填得很滿很滿但是其它的又很空,就會(huì)顯得很難看。

避免在一個(gè)分段控件中同時(shí)使用文本和圖片。盡管分段控件可以容納文本或圖片,但在一個(gè)控件中同時(shí)使用兩者會(huì)讓界面變得混亂而無條理。

在自定義的分段控件中合理放置內(nèi)容。如果你更改了分段控件的背景圖,請確保其上的內(nèi)容依舊與之相配并清晰可讀,而不會(huì)顯得不和諧。

了解開發(fā)詳情,請參閱UISegmentedControl


8.9 滑塊(Sliders)

滑塊是一條帶有thumb控件的水平軌跡,你可以通過手指拖動(dòng)它在最小值和最大值之間滑動(dòng),比如屏幕亮度或是媒體播放進(jìn)度。當(dāng)滑塊值改變時(shí),最小值和thumb之間的軌跡會(huì)被顏色填充。可以選擇性地在滑塊的左右兩側(cè)分別展示圖標(biāo),來說明最大值和最小值所代表的含義。

自定義滑塊的外觀,如果這么做有意義滑塊的外觀,包含軌跡顏色、thumb的圖片以及左側(cè)和右側(cè)的圖標(biāo),這些都可以為了符合你的app設(shè)計(jì)風(fēng)格以及達(dá)到溝通的目的而被調(diào)整。比如,用戶調(diào)整圖片大小的滑塊,可以在左側(cè)顯示一個(gè)小的圖片圖標(biāo),并在右側(cè)顯示一個(gè)大的圖片圖標(biāo)。

不要使用滑塊來調(diào)節(jié)音量。如果你需要在你的app中提供音量控件,請使用音量視圖。它是可自定義的,含有一個(gè)音量滑塊和一個(gè)更改當(dāng)前音源輸出設(shè)備的控件。了解關(guān)于如何使用音量視圖,請參閱MPVolumeView

了解開發(fā)詳情,請參閱UISlider

8.10 步進(jìn)器(Steppers)

步進(jìn)器是一個(gè)用于增加或減少遞增數(shù)值的兩段控件。默認(rèn)狀態(tài)下,步進(jìn)器的一個(gè)分段顯示一個(gè)加號而另外一個(gè)顯示減號。如果有需要,這些符號也可以替換成自定義圖片。

確保步進(jìn)器所調(diào)整的數(shù)值顯眼易見。由于步進(jìn)器本身不顯示任何值,因此要確保用戶知道他們用步進(jìn)器改變的是什么值。

若可能涉及到較大數(shù)值的調(diào)整,那就不要使用步進(jìn)器。步進(jìn)器適用于只需少量點(diǎn)擊的小數(shù)值調(diào)整。比如,在打印頁面,使用步進(jìn)器調(diào)整打印份數(shù)是合理的,因?yàn)橛脩魳O少會(huì)大幅度調(diào)整這個(gè)值。反之,用步進(jìn)器來選擇頁碼范圍就是不合理的,因?yàn)榧词故菍τ陧摯a不多的文檔,用戶也必須通過多次點(diǎn)擊才能完成選擇。

了解開發(fā)詳情,請參閱UIStepper

8.11 開關(guān)按鈕(Switches)

開關(guān)按鈕提供了在兩種互斥狀態(tài)——開和關(guān)之間的視覺切換。

默認(rèn)外觀的開關(guān)
自定義外觀的開關(guān)

考慮調(diào)整開關(guān)的外觀以符合你的app風(fēng)格。如果對你的app有幫助,可以更改開關(guān)的在兩種狀態(tài)下的顏色,或是使用自定義圖像來替代開關(guān)。

只能在表格欄中使用開關(guān)。開關(guān)是用于表格中的,比如在一列設(shè)置項(xiàng)中,每個(gè)設(shè)置項(xiàng)都能被打開和關(guān)閉。如果你需要在導(dǎo)航欄和工具欄中執(zhí)行類似的功能,請使用按鈕替代,并且提供兩個(gè)不同的圖標(biāo)來表達(dá)不同的狀態(tài)。

避免用標(biāo)簽來描述開關(guān)的值。開關(guān)只有兩種狀態(tài):不是打開就是關(guān)閉。用額外的標(biāo)簽來描述這兩種狀態(tài)是多余的,會(huì)使界面變得凌亂。

考慮使用開關(guān)來控制與之相關(guān)的界面元素。開關(guān)常常會(huì)影響到屏幕上的其它內(nèi)容。比如,在“設(shè)置”中打開飛行模式,會(huì)關(guān)閉某些設(shè)置項(xiàng),比如“蜂窩移動(dòng)網(wǎng)絡(luò)”和“個(gè)人熱點(diǎn)”。在設(shè)置中關(guān)閉Wi-Fi會(huì)導(dǎo)致其它選項(xiàng)的消失。

了解開發(fā)詳情,請參閱UISwitch

8.12 文本框(Text Fields)

文本框是單行、高度固定且?guī)в袌A角的輸入框,點(diǎn)擊它會(huì)自動(dòng)呼出鍵盤。使用文本框向用戶請求少量信息的錄入,比如郵箱地址。

在文本框中顯示提示文字向用戶解釋意圖。若當(dāng)前文本框中沒有其它文本,文本框內(nèi)可以包含占位文本,比如“郵箱”或“密碼”。若占位文本已經(jīng)表意明確,就不要再額外用標(biāo)簽對文本框進(jìn)行描述了。

合適時(shí),使用加密文本框。在你的app請求密碼之類的敏感信息時(shí),總是使用加密文本框。

TIP ?對于多行或是多樣式的文本輸入,請使用文本視圖。請參閱Text Views


郵件鍵盤


電話鍵盤

顯示合適的鍵盤類型。iOS提供了幾種不同的鍵盤類型,每種都為了特定的一種輸入類型而設(shè)計(jì)。為了方便數(shù)據(jù)輸入,編輯文本框時(shí)顯示的鍵盤應(yīng)該適用于當(dāng)前所要輸入的文本類型。如果你的app需要用戶輸入郵箱,那么應(yīng)該顯示對應(yīng)的郵箱鍵盤。了解可用鍵盤類型的完整列表,請參閱UITextInputTraits中的UIKeyboardTypeconstant。

在文本框中添加圖片以增進(jìn)理解、添加按鈕以增強(qiáng)功能性。你可以在文本框的左側(cè)或是右側(cè)顯示自定義圖片,或是添加一個(gè)系統(tǒng)按鈕,比如一個(gè)書簽按鈕。一般來說,文本框左側(cè)的區(qū)域用于說明文本框的含義,右側(cè)的區(qū)域用于展示已有的附加功能,比如書簽。

合適時(shí),在文本框的右端展示一個(gè)清除按鈕。若出現(xiàn)了清除按鈕,點(diǎn)擊它會(huì)清楚文本框內(nèi)的所有輸入內(nèi)容,免去了用戶不斷點(diǎn)擊鍵盤上刪除按鈕的麻煩。

了解開發(fā)詳情,請參閱UITextField

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,698評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,202評論 3 426
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,742評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,580評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,297評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,688評論 1 327
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,693評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,875評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,438評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,183評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,384評論 1 372
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,931評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,612評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,022評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,297評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,093評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,330評論 2 377

推薦閱讀更多精彩內(nèi)容