【譯文】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)作按鈕名稱换衬。一個(gè)特定行為的名稱表明了按鈕是可交互的并且說明了點(diǎn)擊它會產(chǎn)生的結(jié)果。

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

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

只在必要時(shí)考慮添加邊框或背景色浆西。系統(tǒng)圖標(biāo)默認(rèn)沒有邊框和背景色割卖。然而疙驾,在某些內(nèi)容區(qū)域杠河,邊框和背景色會因其指示了可交互性而顯得必要氢架。在"電話"中傻咖,帶有邊框的數(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)擊按鈕會顯示更多的信息溪王。點(diǎn)擊該行的其它地方會選中該行或是激活應(yīng)用特定的行為腮鞍。如果你想讓用戶通過點(diǎn)擊整行來查看更多詳情,就不要使用詳情展開按鈕莹菱。取而代之的移国,可以使用V形的詳情展開附屬控件(detail disclosure accessory control)。請參閱UITableViewCell中的UITableViewCellAccessoryType道伟。

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


信息按鈕

信息按鈕

信息按鈕呼出app相關(guān)的配置詳情蜜徽,有時(shí)會以翻轉(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í)行了雙擊操作撒璧,你還可以指定會被默認(rèn)選中的內(nèi)容。在文本視圖中笨使,應(yīng)該默認(rèn)選中詞語卿樱。

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

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

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

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

讓編輯操作可以被撤銷嘁字。在執(zhí)行操作前,菜單不會向用戶發(fā)起二次確認(rèn)杉畜。但是用戶可能會在點(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í)行操作的動詞或動詞短語。使用標(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í)會拷貝標(biāo)簽內(nèi)容页滚。標(biāo)簽可以展示任意數(shù)量的靜態(tài)文本,但是最好保持簡短铺呵。

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

想學(xué)習(xí)關(guān)于文本(text)的知識肝谭,請參閱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)它們就會被部分截?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)豆巨,且不會遮擋內(nèi)容剩辟。

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


8.5 選擇器(Pickers)

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

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

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

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

了解開發(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整除楔敌。比如啤挎,你可能會想要15分鐘的間隔(0,15,30和45)。

了解開發(fā)詳情卵凑,請參閱UIDatePicker侵浸。


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

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

請同時(shí)參閱Loading澳腹。

活動指示器

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

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

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

如果對用戶有幫助,可以在等待任務(wù)完成的過程中厕吉,為他們提供有用的信息酱固。可以通過活動指示器下方的標(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)度條。否則恃鞋,請使用活動指示器崖媚。

用進(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)前發(fā)生連網(wǎng)活動時(shí)钞钙,網(wǎng)絡(luò)活動指示器會在屏幕頂部狀態(tài)欄上旋轉(zhuǎn)鳄橘。結(jié)束連網(wǎng)時(shí),它就會消失歇竟。這個(gè)指示器和活動指示器長得一樣挥唠,并且同樣不可交互。

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

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

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

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

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

如果有意義陕习,可以為刷新控件添加一個(gè)短標(biāo)題。刷新控件可以選擇性地包含一個(gè)標(biāo)題址愿。但是在大多數(shù)情況下该镣,這樣做是無意義的,因?yàn)樗⑿驴丶膭有б呀?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è)分段被填得很滿很滿但是其它的又很空,就會顯得很難看栋烤。

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

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

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


8.9 滑塊(Sliders)

滑塊是一條帶有thumb控件的水平軌跡亏推,你可以通過手指拖動它在最小值和最大值之間滑動学赛,比如屏幕亮度或是媒體播放進(jìn)度。當(dāng)滑塊值改變時(shí)吞杭,最小值和thumb之間的軌跡會被顏色填充盏浇。可以選擇性地在滑塊的左右兩側(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少會大幅度調(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)是多余的,會使界面變得凌亂毁欣。

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

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

8.12 文本框(Text Fields)

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

在文本框中顯示提示文字向用戶解釋意圖。若當(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)擊它會清楚文本框內(nèi)的所有輸入內(nèi)容,免去了用戶不斷點(diǎn)擊鍵盤上刪除按鈕的麻煩砸脊。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末凌埂,一起剝皮案震驚了整個(gè)濱河市驱显,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瞳抓,老刑警劉巖埃疫,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異孩哑,居然都是意外死亡栓霜,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門横蜒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胳蛮,“玉大人,你說我怎么就攤上這事丛晌〗龃叮” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵澎蛛,是天一觀的道長茂洒。 經(jīng)常有香客問我,道長瓶竭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任渠羞,我火速辦了婚禮斤贰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘次询。我一直安慰自己荧恍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布屯吊。 她就那樣靜靜地躺著送巡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪盒卸。 梳的紋絲不亂的頭發(fā)上骗爆,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機(jī)與錄音蔽介,去河邊找鬼摘投。 笑死煮寡,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的犀呼。 我是一名探鬼主播幸撕,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼外臂!你這毒婦竟也來了坐儿?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎晃择,沒想到半個(gè)月后报破,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡站叼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菇民。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尽楔。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖第练,靈堂內(nèi)的尸體忽然破棺而出阔馋,到底是詐尸還是另有隱情,我是刑警寧澤娇掏,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布呕寝,位于F島的核電站,受9級特大地震影響婴梧,放射性物質(zhì)發(fā)生泄漏下梢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一塞蹭、第九天 我趴在偏房一處隱蔽的房頂上張望孽江。 院中可真熱鬧,春花似錦番电、人聲如沸岗屏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽这刷。三九已至,卻和暖如春娩井,著一層夾襖步出監(jiān)牢的瞬間暇屋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工撞牢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留率碾,地道東北人叔营。 一個(gè)月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像所宰,于是被迫代替她去往敵國和親绒尊。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359

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