譯文 | iOS 10 人機(jī)界面設(shè)計指南 (完結(jié))

iOS10發(fā)布了,蘋果遵循了一切從簡但又增加了一些提升用戶體驗的功能,比如向開發(fā)者開放了更多接口,設(shè)計者又如何跟隨iOS的步伐做好產(chǎn)品設(shè)計呢?本文是系列文章的完結(jié)篇,enjoy~
7. UI視圖(UI Views)
7.1 操作列表(Action Sheets)
操作列表是一種對某個控件或操作作出應(yīng)答的特殊形式的警告框,它展示了與當(dāng)前內(nèi)容相關(guān)的一組選項(兩個或更多)。使用操作列表讓用戶觸發(fā)任務(wù),或是在用戶執(zhí)行某個有潛在破壞性的操作前請求用戶確認(rèn)。在小屏幕,操作列表從屏幕底部向上滑出。在大屏幕,操作列表會以浮出層的形式突然出現(xiàn)。
提供取消按鈕,如果它能加強(qiáng)明確性。當(dāng)用戶想要放棄任務(wù)時,取消按鈕給予了他們信心。屏幕底部出現(xiàn)的操作列表最下方應(yīng)該有個取消按鈕。
突出破壞性的選項。對那些執(zhí)行破壞性或危險操作的按鈕使用紅字,并且在操作列表的頂部放置這些按鈕。
避免讓用戶滾動操作列表。如果操作列表有太多選項,用戶就必須通過滾動查看所有的選項。滾動需要用戶花更多的時間做決定,并且在滾動過程中容易誤點某個選項。
了解開發(fā)細(xì)節(jié),請參閱UIAlertController中的UIAlertControllerStyleActionSheet。
7.2 活動視圖(Activity Views)
一個活動就是一個在當(dāng)前環(huán)境下有意義的任務(wù),比如復(fù)制、收藏或是查找。一旦活動被觸發(fā),它可以立即執(zhí)行一個任務(wù),也可以在開始前請求更多的信息?;顒佑苫顒右晥D管理,根據(jù)設(shè)備和橫豎屏的不同,以表單或浮出層的形式出現(xiàn)。使用活動向用戶提供你的app能夠執(zhí)行的自定義服務(wù)或任務(wù)。
系統(tǒng)提供了一系列內(nèi)置的活動,比如打印、Twitter、信息和Airplay。這些任務(wù)總是在活動視圖的最前列出現(xiàn),并且不能被重新排列。你無須為執(zhí)行這些內(nèi)置任務(wù)創(chuàng)建自定義活動?;顒右晥D還能展示來自其它app的分享和操作插件。請參閱Sharing and Actions。
設(shè)計能夠代表你的自定義活動的簡單的模板圖像。模板圖像(template image)利用遮罩(mask)創(chuàng)建圖標(biāo)。模板圖像應(yīng)使用透明度合適和經(jīng)過抗鋸齒處理的黑色和白色,并且不包含陰影。模板圖像應(yīng)該被放置在一塊大約為70px*70px尺寸的區(qū)域中心。
設(shè)計能夠簡扼描述你的任務(wù)的活動標(biāo)題。在活動視圖中,標(biāo)題顯示在圖標(biāo)下方。短標(biāo)題是最佳的。當(dāng)標(biāo)題過長,iOS首先會縮小字體,若文本實在過長, iOS會截斷它。一般來說,避免在標(biāo)題中包含你的公司或產(chǎn)品名字。
確保活動在當(dāng)前環(huán)境中是合適的。雖然系統(tǒng)提供的任務(wù)在活動視圖中不能被重新排列,但當(dāng)它們對你的app不適用時,你可以去除它們。比如,你可以通過去除打印活動而阻止用戶在你的app中打印圖片。你也可以在特定的時候讓特定的自定義任務(wù)出現(xiàn)。
通過操作按鈕呼出操作視圖。用戶已經(jīng)習(xí)慣了通過點擊操作按鈕來進(jìn)入系統(tǒng)提供的活動。避免用其它方式替代,從而讓用戶感到困惑。
了解開發(fā)細(xì)節(jié),請參閱UIActivityViewContoller和UIActivity。
7.3 警告框(Alerts)
警告框傳達(dá)了與你的app或設(shè)備狀態(tài)相關(guān)的重要信息,并且通常在請求用戶反饋。警告框由標(biāo)題、描述信息(可選)、一個或多個按鈕和用于獲取用戶輸入的文本框(可選)。除了這些可配的元素之外,警告框的視覺外觀
是固定的的且不能被自定義。
盡可能少地使用警告框。警告框會中斷用戶體驗,只有在重要情境下才能使用,比如確認(rèn)購買、破壞性操作(如刪除),或是通知用戶當(dāng)前出現(xiàn)了問題。正是因為警告框的罕見性,才讓用戶更加重視警告框。確保每個警告框都提供了關(guān)鍵的信息和有用的選項。
在橫屏和豎屏下雙重測試警告框的外觀。警告框可能在橫屏和豎屏模式下看起來有所區(qū)別。優(yōu)化警告框文本,確保用戶在任一模式下都無需滑動操作即可完整閱讀。
了解開發(fā)細(xì)節(jié),請參閱UIAlertController。
(1)警告框標(biāo)題和信息
使用簡短的、描述性的、多詞語的警告框標(biāo)題。用戶需要在屏幕上閱讀的文本越短越好。嘗試更多地推敲標(biāo)題,以避免額外添加信息文本。由于單詞語的標(biāo)題很少能提供有用信息,考慮使用問句或是短句。盡可能控制標(biāo)題字?jǐn)?shù)在一行內(nèi)。使用句子式大寫,并用合適的標(biāo)點符號為句子結(jié)尾。不要給句子片段(譯者注:不完整的殘缺句)加上結(jié)束標(biāo)點。
如果你必須提供一段信息,請使用簡短、完整的句子。盡量將說明信息控制在一到兩行之內(nèi),這樣用戶就無需通過滾動查看。使用句子式大寫和合適的標(biāo)點符號。
避免使用指責(zé)的、苛刻的或是無禮的語氣。用戶知道警告框是為了通知他們發(fā)生的問題和危險情況。只要你使用友好的語氣,那么表現(xiàn)地消極和直接一些好過一味的積極和隱晦。避免使用“你”、“你的”、“我”和“我的”之類的代詞,因為它們常被理解為無禮和傲慢。
避免對警告框按鈕做出解釋。如果警告框文本和按鈕標(biāo)題足夠明了,那么就無需對按鈕的用途做出多余的解釋。在極少數(shù)需要為按鈕提供指導(dǎo)的情況下,請使用詞語“輕擊(tap)”,并且在提到按鈕名稱時使用大寫,并且不要添加雙引號。
(2)警告框按鈕
通常情況下,使用雙按鈕警告框。雙按鈕警告框提供了在兩個選項中快速抉擇的途徑。單按鈕警告框只負(fù)責(zé)通知,卻未給予用戶對當(dāng)前情勢的控制權(quán)。擁有三個或以上按鈕的警告框增加了復(fù)雜性,并可能需要滾動操作,而這恰是一種不良的用戶體驗。如果你發(fā)現(xiàn)自己需要兩個以上的按鈕,可以考慮用操作列表代替。請參閱Action Sheets。
使用簡明合理的按鈕標(biāo)題。最好的按鈕標(biāo)題應(yīng)該包含一個或兩個能夠描述選擇按鈕后的結(jié)果的詞語。對于所有的按鈕標(biāo)題,使用標(biāo)題式大寫,并且不含標(biāo)點符號。盡可能地,使用與警告框標(biāo)題或信息直接對應(yīng)的動詞或動詞性詞組,比如,“查看全部”、“回復(fù)”、或“忽略”。使用“好的(OK) ”表示簡單的接受。避免使用“是”或“否”。
在用戶預(yù)期的位置放置按鈕。一般來說,用戶最可能輕擊的按鈕應(yīng)該在右邊。取消按鈕應(yīng)該在左邊。
為有取消功能的按鈕合理命名。一個能夠取消警告框操作的按鈕就該被命名為“取消”。
識別會產(chǎn)生破壞性結(jié)果的按鈕。如果一個警告框按鈕會產(chǎn)生破壞性的操作,比如刪除內(nèi)容,那么請將按鈕樣式設(shè)定為“Destructive”,這樣它就能通過系統(tǒng)獲取合適的格式。了解開發(fā)細(xì)節(jié),請參閱UIAlertAction中的UIAlertActionStyleDestructive常量。另外,為用戶提供一個“取消”按鈕,讓它們能夠安全地從破壞性操作中退出。通過標(biāo)記“取消”按鈕為默認(rèn)按鈕,來加粗按鈕文本。
允許使用“Home”鍵來取消警告框。當(dāng)警告框出現(xiàn)時,按住Home鍵會退出app。但同時,它應(yīng)該也產(chǎn)生和點擊取消按鈕一樣的效果,即在不執(zhí)行任何操作的情況下關(guān)閉警告框。如果你的警告框沒有取消按鈕,那么考慮將點擊Home鍵也會關(guān)閉警告框?qū)懭肽愕拇a中。
7.4 集合(Collections)
一個集合管理著一組有序的內(nèi)容,比如一組圖片,并且在可自定義的且高度可視化的布局中展示它。因為集合無需執(zhí)行嚴(yán)格的線性格式,所以它尤其適合用來展示大小不同的項目。簡言之,集合是用來展現(xiàn)圖片類內(nèi)容的理想視圖。背景及其它裝飾性視圖可以選擇性地用于視覺上區(qū)分不同組別的項目。
集合同時支持交互性和動畫。默認(rèn)狀態(tài)下,你可以通過輕擊(tap)來選擇,長按(touch and hold)來編輯,以及輕掃(swipe)來滾動。如果你的app需要,你可以加入更多的手勢用于執(zhí)行自定義操作。在集合中,當(dāng)項目被插入、刪除或是重新排序時會伴隨默認(rèn)動畫,你也可以使用自定義動畫。
若標(biāo)準(zhǔn)的行或網(wǎng)格布局已能滿足需求,請避免創(chuàng)造顛覆性的新設(shè)計。集合是為了優(yōu)化用戶體驗,而不是變成關(guān)注的中心。讓用戶能更容易選擇一項。如果用戶很難在集合中選中某項,它們會變得沮喪并且很快地在獲得想要的內(nèi)容前失去興致。在內(nèi)容周圍留有充足的邊距,保持布局的整潔并避免內(nèi)容重疊顯示。
對于文本,考慮用表格來替代集合。一般來說,在滾動列表中的文字信息更易于閱讀和理解。
請謹(jǐn)慎地對待布局的動態(tài)變化。集合的布局可以隨時被改變。如果你在用戶查看視圖或是與之交互時讓它發(fā)生了動態(tài)的變化,請確保變化是有意義的并且易于跟蹤。沒有目的的布局變化會讓你的app看起來不可預(yù)知并且難用。如果因為布局變化,而導(dǎo)致用戶丟失了當(dāng)前關(guān)注的焦點或是瀏覽的內(nèi)容,那么他們很可能會覺得自己無法再控制這個app了。
了解開發(fā)細(xì)節(jié),請參閱UICollectionView。
7.5 圖片視圖(Image Views)
圖片視圖在透明或不透明的背景上展示一張圖片或是一組圖片的動態(tài)序列。在圖片視圖中,圖片可以被拉伸、縮放、根據(jù)屏幕調(diào)整大小,或是固定在特定位置。默認(rèn)情況下圖片視圖是不可交互的。
可能時,確保一個圖片視圖內(nèi)的所有圖片都尺寸一致。如果你的圖片大小不一,圖片視圖就要逐一調(diào)整尺寸。使用尺寸一致的圖片比使用不同尺寸的圖片更有效率。若是使用已縮放好的且無需額外調(diào)整的圖片就更加高效。
了解開發(fā)細(xì)節(jié),請參閱UIImageView。
Note
模板圖片(template image)會丟棄圖片本身的色彩,而采用圖片視圖使用的色調(diào)。請參閱UIImage中的UIImageRenderingModeAlwaysTemplate。
7.6 地圖(Maps)
地圖視圖允許你在app內(nèi)展示地理數(shù)據(jù),并且支持原生地圖應(yīng)用的大部分功能。地圖視圖可以展示標(biāo)準(zhǔn)地圖、衛(wèi)星地圖或是兩者兼有。它可以含有定位標(biāo)簽(大頭針)和疊加圖層,并且支持縮放和平移。
一般情況下,保證你的地圖是可交互的。用戶習(xí)慣了使用手勢與原生的地圖應(yīng)用交互,并且希望在你的地圖里也能以相同的方式交互。
使用合理的標(biāo)簽(大頭針)顏色。大頭針代表著地圖上你感興趣的點。用戶已經(jīng)熟悉了原生地圖應(yīng)用中的標(biāo)準(zhǔn)大頭針顏色。避免在你的app中對這些顏色有不同的定義。使用紅色表示重點,綠色表示起點,紫色表示用戶指定的位置。
了解開發(fā)細(xì)節(jié),請參閱MapKit。
7.7 頁面(Pages)
頁面視圖控制器提供了在多頁面內(nèi)容間(比如在文檔中、書本、筆記本或是日歷中)實現(xiàn)線性導(dǎo)航的方式。頁面視圖控制器通過滾動或翻頁兩種樣式來處理導(dǎo)航時頁面的過渡。滾動過渡沒有特定的外觀;頁面流暢地從當(dāng)前頁滾動至下一頁。翻頁過渡會在你橫掃屏幕時讓頁面翻卷過去,就好像在現(xiàn)實中里翻書頁一樣。
滾動過渡(查看動畫請移步https://developer.apple.com/ios/human-interface-guidelines/ui-views/pages/)
如果合適的話,設(shè)計一種非線性的導(dǎo)航方式。使用頁面視圖控制器時,頁面只能按次序變換,你無法在不相鄰的頁面間跳轉(zhuǎn)。如果用戶于需要在你的app中不按次序瀏覽頁面,請設(shè)計一種滿足該功能的自定義控件。
了解開發(fā)細(xì)節(jié),請參閱UIPageViewController。
7.8 浮出層(Popovers)
浮出層是一個當(dāng)你點擊某控件或某塊區(qū)域時,會在屏幕內(nèi)其它內(nèi)容上方出現(xiàn)的暫時視圖。通常來說,浮出層包含一個指向其出現(xiàn)位置的箭頭。浮出層含有非模態(tài)和模態(tài)兩種形式。非模態(tài)浮出層可以通過點擊屏幕上其它區(qū)域或是浮出層上的某個按鈕來關(guān)閉它。模態(tài)浮出層只能通過點擊浮出層上的取消或是其它按鈕來關(guān)閉。
浮出層最適合用于大屏幕,并且可以包含任何一種元素,比如導(dǎo)航欄、工具欄、標(biāo)簽欄、表格、集合、圖片、地圖以及自定義視圖。當(dāng)浮出層出現(xiàn)時,通常就無法再與其它視圖進(jìn)行交互,除非浮出層被關(guān)閉。利用浮出層來展示與當(dāng)前屏幕內(nèi)容相關(guān)的選項或信息。比如,非常多的iPad應(yīng)用會在你點擊分享按鈕后彈出浮出層來展示分享選項。
避免在iPhone設(shè)備上展示浮出層。一般來說,浮出層更適用于iPad應(yīng)用。對于iPhone應(yīng)用,盡量使用全屏的模態(tài)視圖來展示信息,而非使用浮出層。了解更多指導(dǎo),請參閱 Modality。
只在確認(rèn)和引導(dǎo)時使用關(guān)閉按鈕。諸如“取消”或“完成“之類的關(guān)閉按鈕,若是能清晰表明操作結(jié)果(比如,在保存或未保存狀態(tài)下退出),那么就它就有存在的價值。一般來說,當(dāng)浮出層不再有必要存在時,它應(yīng)該自動關(guān)閉。在大多數(shù)情況下,當(dāng)用戶點擊浮出層外部區(qū)域或是選擇了浮出層內(nèi)的某項后,浮出層應(yīng)該關(guān)閉。如果用戶能在浮出層進(jìn)行多選,那么只有在用戶明確選擇關(guān)閉它或是點擊了浮層的外部區(qū)域時,它才會消失。
自動關(guān)閉一個非模態(tài)的浮出層時替用戶保存當(dāng)前輸入。用戶很容易就會因誤點屏幕其它區(qū)域而將浮出層關(guān)閉。只有在用戶明確點擊“”取消“”按鈕的情況下才可以丟棄他們的輸入。
在屏幕上的合適位置放置浮出層。浮出層的箭頭應(yīng)該盡可能地指向?qū)⒏雍舫龅脑?。由于浮出層無法在屏幕中被拖動,所以它不應(yīng)該遮擋住用戶在使用浮出層時可能會需要查看的重要內(nèi)容。浮出層也不應(yīng)該遮擋住觸發(fā)它的元素。
同一時間只展示一個浮出層。同時展示多個浮層會導(dǎo)致界面雜亂無章,并讓用戶感到困惑。永遠(yuǎn)都不要通過一個浮出層觸發(fā)另一個浮出層的方式,在屏幕上展示并列或堆疊的多個浮層。如果你需要展示一個新的浮層,請關(guān)閉當(dāng)前的浮層。
不要在浮出層上展示其它的視圖。除了警告框,任何其它視圖都不應(yīng)該出現(xiàn)在浮出層之上。
可能時,讓用戶通過一次點擊就可關(guān)閉當(dāng)前浮層并且打開新浮層。當(dāng)欄上有多個不同的按鈕且每個會呼出一個浮出層時,尤其應(yīng)當(dāng)考慮避免不必要的點擊次數(shù)。
避免設(shè)計過大的浮出層。浮出層不應(yīng)該占據(jù)整個屏幕。設(shè)計一個尺寸足以展示其內(nèi)容的浮出層,并且指向呼出它的地方。請注意系統(tǒng)可能會調(diào)整浮出層的尺寸以保證其在屏幕上完美展現(xiàn)。
確保自定義浮出層看起來還是一個是浮出層。雖然你可以自定義浮出層的大部分視覺外觀,但是避免創(chuàng)造一個用戶可能辨認(rèn)不出是浮出層的設(shè)計。含有標(biāo)準(zhǔn)控件和視圖的浮出層最容易被用戶接受。
當(dāng)浮出層的尺寸變動時提供流暢的過渡動畫。有些浮出層會為相同的信息同時提供精簡和拓展視圖。如果你要調(diào)整浮出層的尺寸,請使用轉(zhuǎn)場動畫以避免給用戶造成新浮層取代舊浮層的印象。
了解開發(fā)細(xì)節(jié),請參閱UIPopoverPresentationController。
7.9 滾動視圖(Scroll Views)
滾動視圖讓用戶能夠瀏覽超出屏幕可見范圍的內(nèi)容,比如文檔中的文本或是一個集合的圖片。當(dāng)用戶輕掃、滑動、拖曳、輕擊以及捏合時,滾動視圖會遵循用戶的手勢,以一種自然的方式顯示或是縮放內(nèi)容。滾動視圖本身沒有外觀,但是在用戶與之交互時會顯示一個暫時性的滾動指示器( scrolling indicator)。滾動視圖也可以被設(shè)置為分頁模式,此時滾動手勢會展開一個全新的頁面,而不是在當(dāng)前頁面來回移動。
合理地支持縮放操作。如果你的app需要,可以讓用戶通過捏合或者雙擊來縮放。當(dāng)你允許縮放時,請設(shè)置有意義的最大和最小比值。比如,對一個文本不斷放大直到其填充屏幕的行為可能在大部分的app中毫無意義。
當(dāng)滾動視圖處于分頁模式時,考慮顯示頁面控件元素。頁面控件表明了分頁、分屏或者分塊內(nèi)容的可得總量,并且指明了當(dāng)前顯示的是哪一個。如果你在滾動視圖中展示了頁面控件,請禁用處在同軸的滾動指示器以避免混淆。了解更多指導(dǎo),請參閱Page Control。
不要在一個滾動視圖內(nèi)放置另一個滾動視圖。這么做會產(chǎn)生一個難以控制且不可預(yù)知的界面。
一般而言,同一時間只展示一個滾動視圖。在滾動視圖內(nèi),用戶常會作出幅度很大的輕掃手勢,這樣一來,就很難避免和同屏內(nèi)相鄰的滾動視圖發(fā)生交互。如果你需要在一屏內(nèi)放置兩個滾動視圖,考慮讓他們在不同的方向滾動,這樣一個手勢就不太可能同時作用于兩個視圖。比如,當(dāng)iPhone處于豎屏模式時,“股市”app會在水平滑動的公司詳情視圖上方展示垂直滾動的股票報價列表。
了解開發(fā)細(xì)節(jié),請參閱UIScrollView。
7.10 分屏視圖(Split Views)
分屏視圖用于展示兩塊相鄰窗格的內(nèi)容,主窗格上的內(nèi)容保持不變,而次窗格會展示相關(guān)的信息。每一個窗格都能包含任意種類的元素,包括導(dǎo)航欄、工具欄、標(biāo)簽欄、表格、集合、圖片、地圖以及自定義視圖。分屏視圖一般用于展示可分類內(nèi)容:主窗格展示一列類別目錄,次窗格展示經(jīng)選中類目篩選后的結(jié)果。如果你的app需要,主窗格可以覆蓋在次窗格上,并且在不需要的時候被隱藏至屏幕外。這點在設(shè)備處于豎屏模式時尤為重要,因為它為瀏覽次窗格上的內(nèi)容提供了更多的空間。
選擇一個適用于你的內(nèi)容的分屏視圖布局。默認(rèn)的分屏視圖分別將1/3和2/3的空間分配給主窗格和次窗格。但是屏幕也可以被平分為兩半。根據(jù)你的內(nèi)容來選擇合適的分屏,并保證兩個窗格不會看起來不平衡。避免設(shè)計一個比主窗格還窄的次窗格。
保持主窗格里被激活的選項高亮。盡管次窗格的內(nèi)容會變化,它應(yīng)該永遠(yuǎn)與主窗格里清晰易辨的選中項相對應(yīng)。這樣有助于用戶理解主次窗格之間的關(guān)系。
一般地,限制導(dǎo)航于分屏視圖的一側(cè)。在分屏視圖的兩個窗格都放置導(dǎo)航會讓用戶很難保持方向感,并且會難以明白兩個窗格間的關(guān)系。
為重新呼出被隱藏的主窗格提供多種方式。在一些主窗格可能會離開屏幕的布局中,請確保能提供提供一個按鈕——一般在導(dǎo)航欄上——用于重新呼出主窗格。除非你的app已將滑動手勢來于執(zhí)行其它功能,否則請允許用戶也能通過從屏幕邊緣輕掃(swipe)來呼出主窗格。
了解開發(fā)細(xì)節(jié),請參閱UISplitViewController。
7.11 表格(Tables)
表格通過一個可以滾動的、單欄的行列表來呈現(xiàn)數(shù)據(jù),這個行列表可以被分成不同的段落或群組。使用表格以列表的形式來整齊高效地展示大量或少數(shù)的信息。一般來說,表格最最適合于基于文本的內(nèi)容,并且通常在分屏視圖的一側(cè)作為導(dǎo)航出現(xiàn),并伴有顯示在另一側(cè)的相關(guān)內(nèi)容。請參閱“分屏視圖Split Views”。
iOS采用兩種類型的表格:平鋪型(plain)和分組型(grouped)。
平鋪型。行列表可以被分為幾個帶有標(biāo)簽的段落,在表格右邊界的還可以有一條縱向索引。頁眉可以出現(xiàn)在每個段落的第一項之前,頁腳可以出現(xiàn)在最后一項之后。
分組型。行列表以分組的形式展示,常伴有頁眉和頁腳。這種類型的表格最起碼含有一個分組,且每個分組最少含有一行。分組型表格不含有索引。
注意表格的寬度。過窄的表格會造成文本截斷和重疊,導(dǎo)致用戶難以在較遠(yuǎn)距離快速閱讀和瀏覽。過寬的表格也不易于閱讀和瀏覽,還可能會讓內(nèi)容缺少空白(譯者注:填滿文本的寬表格)。
一開始就快速顯示表格內(nèi)容。不要等到全部表格內(nèi)容加載完后,才向用戶展示。應(yīng)該先立即填充表格上的文本數(shù)據(jù),然后當(dāng)較為復(fù)雜的數(shù)據(jù)加載完成時再展示它們——比如圖片。這個技巧讓用戶立即獲得有用的信息,并提升了你的app在用戶認(rèn)知中的響應(yīng)性。在某些情況下,在新數(shù)據(jù)到達(dá)前展示過時的老數(shù)據(jù)也能行得通。
加載內(nèi)容時告知進(jìn)度。如果一個表格的數(shù)據(jù)需要一定時間來加載,可以展示一個進(jìn)度條或者緩沖圖標(biāo)(spinning activity indicator)來告知用戶你的app仍在加載中。
保持更新內(nèi)容。考慮定時更新你的表格內(nèi)容以反映最新數(shù)據(jù)。但是不要更改滾動頁面的定位。反之,在表格的開頭或是末尾添加新的內(nèi)容,并在它們準(zhǔn)備就緒時允許用戶滑動至新內(nèi)容。一些apps會在新數(shù)據(jù)被添加時顯示一個標(biāo)志(indicator),并提供一個能夠直接跳轉(zhuǎn)至新內(nèi)容的控件。在頁面中包含一個刷新控件也是個好主意,這樣用戶就可以在任意時刻手動執(zhí)行刷新操作。請參閱“內(nèi)容刷新控件Refresh Content Controls”。
避免在含有右對齊元素的表格行中包含索引。索引是通過大幅度的滑動手勢來控制的。如果其它可交互元素在它附近,比如展開按鈕(disclosure indicators),那么就很難辨別用戶手勢的意圖,并且很可能會激活錯誤的元素。
了解開發(fā)細(xì)節(jié),請參閱UITableView。
(1)表格行
你使用標(biāo)準(zhǔn)的表格單元格樣式來決定如何在表格行中展示內(nèi)容。
默認(rèn)型(Default)。行左端可以有圖片,并跟隨左對齊的標(biāo)題。該樣式適用于展示無需補(bǔ)充信息的項目。了解開發(fā)細(xì)節(jié),請參閱UITableViewCell中的UITableViewCellStyleDefault constant。
副標(biāo)題型(Subtitle)。一行左對齊的標(biāo)題和下一行左對齊的副標(biāo)題。這種樣式適用于行和行視覺上相似的表格。額外的副標(biāo)題幫助區(qū)分行與行。了解開發(fā)細(xì)節(jié),請參閱UITableViewCell中的UITableViewCellStyleSubtitle constant。
Value 1。左對齊的標(biāo)題和同處一行的右對齊且顏色較淺的副標(biāo)題。了解開發(fā)細(xì)節(jié),請參閱UITableViewCell中UITableViewCellStyleValue1 constant。
副標(biāo)題型(Subtitle)。一行左對齊的標(biāo)題和下一行左對齊的副標(biāo)題。這種樣式適用于行和行視覺上相似的表格。額外的副標(biāo)題幫助區(qū)分行與行。了解開發(fā)細(xì)節(jié),請參閱UITableViewCell中的UITableViewCellStyleSubtitle constant。
所有標(biāo)準(zhǔn)表格單元格樣式還可以含有圖形元素,比如一個選中標(biāo)記或關(guān)閉圖標(biāo)。然而毫無疑問,添加圖形元素會減少標(biāo)題和副標(biāo)題的可用空間。
保持文本的簡練以避免被截斷。被刪減的單次和詞組不容易被瀏覽和理解。無論使用哪種表格單元格樣式,文本截斷都是自動的,但是這個問題的嚴(yán)重性由不同的單元格樣式和不同的截斷位置決定。
考慮為刪除按鈕使用自定義標(biāo)題。對于支持刪除功能的行,如果有助于用戶理解,可以將按鈕上系統(tǒng)提供的“刪除”文本換成自定義標(biāo)題。
選中時提供反饋。用戶期望被選中行能在被點擊時短暫高亮。然后,用戶期待出現(xiàn)一個新的視圖或者某些元素發(fā)生改變,比如出現(xiàn)一個選中標(biāo)記,表示已經(jīng)做出了選擇。
為非標(biāo)準(zhǔn)的表格行設(shè)計一個自定義的表格單元格樣式。標(biāo)準(zhǔn)的樣式能很好地運用于多種常見的情境中,但是某些內(nèi)容或是你的整體app設(shè)計可能會需要一個高度自定義的表格外觀。學(xué)習(xí)如何創(chuàng)建你自己的單元格,請參閱Table View Programming Guide for iOS中的Customizing Cells。
了解開發(fā)細(xì)節(jié),請參閱UITableViewCell。
7.12 文本視圖(Text Views)
文本視圖用于展示多行的、帶有樣式的文本內(nèi)容。文本視圖可以是任意高度,當(dāng)內(nèi)容超出視圖邊界時可以允許滾動。默認(rèn)地,文本視圖的內(nèi)容采用左對齊的方式,并且使用黑色的系統(tǒng)字體。如果文本視圖支持編輯,當(dāng)你在視圖內(nèi)點擊后會出現(xiàn)一個鍵盤。
保持文本清晰可讀。盡管你可以富有創(chuàng)意地使用多種字體、顏色甚至對齊方式,保持內(nèi)容的可讀性是最基本的要求。采用動態(tài)文本(Dynamic Type)是個好主意,這樣即使用戶在他們的設(shè)備上更改了文本大小,你的文本依舊會看起來很棒。你應(yīng)該在不同的輔助功能選項下測試你的內(nèi)容,比如粗體文本。
展示合適的鍵盤類型。iOS提供了多種不同的鍵盤類型,以便于不同類型的輸入。為了簡化數(shù)據(jù)錄入,在編輯文本視圖時顯示的鍵盤應(yīng)該適用于當(dāng)前域的文本類型。了解完整的可用鍵盤類型,請參閱UITextInputTraits中的UIKeyboardTypeconstant。
了解開發(fā)細(xì)節(jié),請參閱UITextView。
7.13 網(wǎng)絡(luò)視圖(Web Views)
網(wǎng)絡(luò)視圖能直接在你的app中加載和呈現(xiàn)豐富的網(wǎng)絡(luò)內(nèi)容,比如嵌入的HTML和網(wǎng)站。比如,“郵件”就使用了網(wǎng)絡(luò)視圖來在信息中展示HTML內(nèi)容。
合適時啟用前進(jìn)和后退導(dǎo)航。網(wǎng)絡(luò)視圖支持前進(jìn)和后退導(dǎo)航,但是這種行為被默認(rèn)禁止。如果用戶將在你的網(wǎng)絡(luò)視圖中瀏覽多個頁面,請啟用前進(jìn)和后退導(dǎo)航,并為這些功能提供對應(yīng)的控件。
避免使用網(wǎng)絡(luò)視圖來構(gòu)建一個網(wǎng)絡(luò)瀏覽器。讓用戶在不離開你的app的情況下通過網(wǎng)絡(luò)視圖暫時性地進(jìn)入一個網(wǎng)站是可以的,當(dāng)時Safari才是用戶瀏覽網(wǎng)頁的主要方式。試圖在你的app中復(fù)制Safari的功能是沒有意義且不被鼓勵的行為。
了解開發(fā)細(xì)節(jié),請參閱WKWebView。
8. UI 控件(UI Controls)
8.1 按鈕(Buttons)
按鈕觸發(fā)app內(nèi)特定的操作,擁有自定義背景,并且可以含有一個名稱或圖標(biāo)。系統(tǒng)為大多數(shù)情況提供了若干已確定的按鈕樣式。你也可以設(shè)計完全自定義的按鈕。
了解開發(fā)詳情,請參閱UIButton。
(1)系統(tǒng)按鈕
系統(tǒng)按鈕一般出現(xiàn)在導(dǎo)航欄和工具欄,但也可能被用于它處。
使用動詞當(dāng)作按鈕名稱。一個特定行為的名稱表明了按鈕是可交互的并且說明了點擊它會產(chǎn)生的結(jié)果。
名稱使用單詞首字母大小的格式。除了冠詞、并列連詞和不大于4個單詞的介詞外,其余單詞都要首字母大小寫。
保證名稱的簡短。過長的文本會讓你的界面變得擁擠,在小屏上還很可能會被截斷。
只在必要時考慮添加邊框或背景色。系統(tǒng)圖標(biāo)默認(rèn)沒有邊框和背景色。然而,在某些內(nèi)容區(qū)域,邊框和背景色會因其指示了可交互性而顯得必要。在”電話”中,帶有邊框的數(shù)字鍵強(qiáng)化了打電話的傳統(tǒng)模型,撥打按鈕的背景色讓其變成一個醒目的目標(biāo),易于用戶點擊。
了解開發(fā)詳情,請參閱UIButton中的UIButtonTypeSystembutton type。
(2)詳情展開按鈕(Detail Disclosure Buttons)
詳情展開按鈕用于打開一個視圖——通常是一個模態(tài)視圖,該視圖含有更多信息或是與屏幕內(nèi)某個特定項目相關(guān)的功能。盡管你可以在任何一種視圖中使用詳情展開按鈕,但它通常出現(xiàn)在表格中用于獲取該行的相關(guān)信息。
合理地在表格中使用詳情展開按鈕。當(dāng)表格的某行上出現(xiàn)了詳情展開按鈕時,點擊按鈕會顯示更多的信息。點擊該行的其它地方會選中該行或是激活應(yīng)用特定的行為。如果你想讓用戶通過點擊整行來查看更多詳情,就不要使用詳情展開按鈕。取而代之的,可以使用V形的詳情展開附屬控件(detail disclosure accessory control)。請參閱UITableViewCell中的UITableViewCellAccessoryType。
了解開發(fā)詳情,請參閱UIButton中的UIButtonTypeDetailDisclosurebutton type。
(3)信息按鈕
信息按鈕呼出app相關(guān)的配置詳情,有時會以翻轉(zhuǎn)視圖的形式出現(xiàn)在當(dāng)前視圖的背面。信息按鈕含有兩種樣式:淺色和深色。選擇最適合你的app設(shè)計的樣式,不要讓它埋沒在當(dāng)前屏幕中。
了解開發(fā)詳情,請參閱UIButton中的UIButtonTypeInfoLightandUIButtonTypeInfoDarkbutton types。
(4)添加聯(lián)系人按鈕
用戶通過點擊添加聯(lián)系人按鈕在現(xiàn)有的聯(lián)系人列表中瀏覽從而選擇一個插入到文本框或是其它視圖。比如,在“郵件”中,你可以點擊“收件人(To)”欄右側(cè)的“添加聯(lián)系人”按鈕來從你的聯(lián)系人列表中選擇收件人。
除了”添加聯(lián)系人”按鈕外,允許鍵盤輸入。添加聯(lián)系人按鈕只是提供了輸入聯(lián)系人信息的另一種選擇,而不是替代品。把其作為一種添加現(xiàn)有聯(lián)系人的快捷方式是好的,但同時也要允許用戶通過鍵盤輸入聯(lián)系人信息。
了解開發(fā)細(xì)節(jié),請參閱UIButton中的UIButtonTypeContactAddbutton type。
8.2 編輯菜單(Edit Menus)
用戶可以通過在文本欄、文本視圖、網(wǎng)頁視圖或圖片視圖中長按或雙擊來選擇內(nèi)容或是呼出編輯菜單,比如“拷貝”和“粘貼”。
為當(dāng)前上下文展示合適的命令。默認(rèn)地,這些選項包括“剪切”、“拷貝”、“粘貼”、“選擇”、“全選”以及“刪除”命令,但并不是所有按鈕都要出現(xiàn)。如果沒有內(nèi)容被選中,那么該菜單就不應(yīng)該包含需要先選中再執(zhí)行的命令,比如“拷貝”或“剪切”。同樣的,如果當(dāng)前已經(jīng)選中了某項,那么該菜單就不應(yīng)該含有“選擇”選項。
讓用戶通過標(biāo)準(zhǔn)手勢觸發(fā)編輯菜單。用戶期望通過長按或雙擊文本或圖片來呼出菜單。你的app應(yīng)該同時感應(yīng)這兩種手勢。若用戶執(zhí)行了雙擊操作,你還可以指定會被默認(rèn)選中的內(nèi)容。在文本視圖中,應(yīng)該默認(rèn)選中詞語。
必要時調(diào)節(jié)編輯菜單的位置。默認(rèn)地,菜單會根據(jù)空間的空余情況出現(xiàn)在插入點或備選項的上方或下方,并且包含指向?qū)?yīng)內(nèi)容的箭頭。盡管你不能夠改變菜單的形狀,但它的位置是可設(shè)置的——你可以避免它遮擋住重要的界面內(nèi)容或元素。
不要使用其它控件來執(zhí)行和編輯菜單同樣的功能。為執(zhí)行同一個操作提供不同的路徑會帶來不一致的用戶體驗,讓用戶感到困惑。如果你的app讓用戶通過編輯菜單來復(fù)制內(nèi)容,那么就不要再單獨設(shè)置一個復(fù)制按鈕。
允許用戶選擇和復(fù)制那些可能對他們有用但卻無法編輯的文本。用戶常常會想要在他們的郵件、筆記或是網(wǎng)頁搜索框中黏貼一些靜態(tài)內(nèi)容(不可編輯的),比如一個圖片標(biāo)簽或是一條臉書狀態(tài)。
不要為呼出編輯菜單提供一個按鈕。如果你這么做,那些通過手勢來觸發(fā)菜單的人最終都會變成通過點擊按鈕來打開菜單。
讓編輯操作可以被撤銷。在執(zhí)行操作前,菜單不會向用戶發(fā)起二次確認(rèn)。但是用戶可能會在點擊某個命令之后改變了主意,所以請向用戶提供撤銷和重做的支持。
在編輯菜單添加有用的自定義命令。你可以通過提供應(yīng)用特有的命令,來增強(qiáng)編輯菜單的價值。和標(biāo)準(zhǔn)命令一樣,任何自定義命令都需要通過選中文本或其它內(nèi)容才能被觸發(fā)。
把自定義命令放在系統(tǒng)自帶的命令之后。系統(tǒng)自帶的命令是用戶最常使用的功能,不要在它們之間穿插自定義命令。
盡可能減少自定義命令的數(shù)量。不要讓用戶面對太多的選擇。
保持自定義命令名稱簡短。命令名稱應(yīng)該是精準(zhǔn)描述所執(zhí)行操作的動詞或動詞短語。使用標(biāo)題式大寫格式:除冠詞、并列連詞和不大于4個字母的介詞外,一律大寫首字母。
了解開發(fā)詳情,請參閱Text Programming Guide for iOS 和 UIMenuController中的Copy, Cut, and Paste Operations。
8.3 標(biāo)簽(Labels)
標(biāo)簽描述了當(dāng)前屏的界面元素或是提供了簡短的信息。雖然用戶無法編輯標(biāo)簽,但是他們有時會拷貝標(biāo)簽內(nèi)容。標(biāo)簽可以展示任意數(shù)量的靜態(tài)文本,但是最好保持簡短。
保證標(biāo)簽易讀。標(biāo)簽可以包含純文本或樣式文本。如果你調(diào)整了標(biāo)簽樣式或是使用了自定義字體,請同時確保它們的易讀性。最好采用動態(tài)字體(Dynamic Type),這樣即使用戶更改了設(shè)備的字體大小,你的標(biāo)簽依舊看起來很棒。請參閱【動態(tài)字體】。同時你應(yīng)該在輔助功能打開的情況下測試你的標(biāo)簽,比如加粗文本。請參閱【輔助功能】。
想學(xué)習(xí)關(guān)于文本(text)的知識,請參閱String Programming Guide。項學(xué)習(xí)如何創(chuàng)造樣式化文本,請參閱Attributed String Programming Guide。了解標(biāo)簽的開發(fā)詳情,請參閱UILabel。
8.4 頁面控件(Page Controls)
頁面控件說明了當(dāng)前頁在一組平級頁中所處的位置。它由一系列小圓點組成,表示了可用頁的數(shù)量以及它們被打開的次序。實心的圓點表示當(dāng)前頁。這些圓點是按一定的距離分布的,如果屏幕上有太多圓點它們就會被部分截斷。用戶可以通過點擊頁面控件的左邊緣和右邊緣在相鄰的頁面中切換,但是他們不能通過點擊某個特定的圓點到達(dá)其對應(yīng)的頁面。頁面控件提供的導(dǎo)航是有序的,用戶一般通過輕掃到達(dá)相鄰頁。
不要把頁面控件和有層次結(jié)構(gòu)的頁面一起使用。頁面控件不是為了說明頁面之間的關(guān)聯(lián),也不是為了表明某一頁對應(yīng)某個圓點。這種類型的控件是為了那些同類頁而設(shè)計的。
不要展示過多的頁面。一旦圓點超過10個,用戶就難以只看一眼就數(shù)清數(shù)量;而一旦打開頁超過20個,按次序瀏覽就變得十分耗時。如果你的app需要展示超過20個的同類頁,請考慮采用其它的方法,比如常用于無序?qū)Ш降膶m格。
把頁面控件居中放在屏幕底部。頁面控件應(yīng)該被居中放置在頁面底邊緣和屏幕底邊緣之間。這樣能確保它被用戶發(fā)現(xiàn),且不會遮擋內(nèi)容。
了解開發(fā)詳情,請參閱UIPageControl。
8.5 選擇器(Pickers)
選擇器包含了一個或多個可滾動的值列表,每個列表都有一個垂直居中且以深色文本顯示的選中值。選擇器一般在用戶編輯字段或點擊菜單時出現(xiàn)在屏幕的底端或是浮出層里。選擇器也可以在行間出現(xiàn),比如在“日歷”中編輯事件的日期時。選擇器的高度大約在五行列表值左右。選擇器的寬度可以是屏寬,也可以與其所屬視圖等寬。
使用符合用戶預(yù)期且按邏輯排列的值。當(dāng)滾動列表靜止時,會有很多值被隱藏。最好的做法是讓用戶猜測到被隱藏的值是什么,比如是一系列按首字母排序的國家名,這樣用戶就能在列表中快速翻動查找。
避免跳轉(zhuǎn)至其它屏來展示選擇器。選擇器在當(dāng)前上下文中、在所填字段附近出現(xiàn)最有效。
對于有大量值的列表,應(yīng)該用表格而不是選擇器。在高度有限的選擇器里瀏覽很長的列表是煩人的。但是表格的高度是可調(diào)的,還能含有索引,讓滾動更快速。
了解開發(fā)詳情,請參閱UIPickerView。
(1)日期選擇器
日期選擇器呈現(xiàn)了一個選擇指定日期、時間或兩者同時的高效界面。它還同時提供了計時器界面。
日期選擇器有四種模式,分別展示四套不同的可選值。
- 日期:展示月份、當(dāng)月的日期以及年份
- 時間:展示小時、分以及上午或下午選項(可選)
- 日期和時間:展示日期、小時、分、上午或下午選項(可選)
- 計時器:展示小時和分,最多23小時和59分。
日期選擇上顯示的具體值視用戶的所在地區(qū)而定。
在展示分鐘時,考慮盡可能地減少選項。分鐘列表默認(rèn)含有60個值(0至59)。你可以選擇性地增大分鐘間隔,只要它能將60整除。比如,你可能會想要15分鐘的間隔(0,15,30和45)。
了解開發(fā)詳情,請參閱UIDatePicker。
8.6 進(jìn)度指示器(Progress Indicators)
當(dāng)你的app需要加載內(nèi)容或是執(zhí)行冗長的數(shù)據(jù)處理操作時,不要讓用戶坐在那里,傻傻盯著不動的屏幕等待。使用活動指示器和進(jìn)度條來告訴用戶你的app沒有停止運行,并讓他們知道還需要等待多久。
請同時參閱Loading。
(1)活動指示器
活動指示器會在執(zhí)行一些無法量化的任務(wù)時旋轉(zhuǎn),比如加載或是同步復(fù)雜數(shù)據(jù)。當(dāng)任務(wù)完成時,它會消失。活動指示器是不可交互的。
更多地使用進(jìn)度條而非活動指示器。如果當(dāng)前活動是可量化的,請使用進(jìn)度條來代替活動指示器,這樣用戶就能夠更好地預(yù)估當(dāng)前發(fā)生了什么以及它要進(jìn)行多久。
確?;顒又甘酒饕恢痹谛D(zhuǎn)。用戶會把靜止的活動指示器和停滯的進(jìn)程聯(lián)系在一起。確保它一直在旋轉(zhuǎn),這樣用戶就知道系統(tǒng)在工作。
如果對用戶有幫助,可以在等待任務(wù)完成的過程中,為他們提供有用的信息。可以通過活動指示器下方的標(biāo)簽顯示更多的信息。避免使用語義模糊的術(shù)語,比如“加載中”或“認(rèn)證中”,因為他們并不能給用戶帶去任何價值。
了解開發(fā)詳情,請參閱UIActivityIndicatorView。
(2)進(jìn)度條
進(jìn)度條包含了一條從左往右填充的軌跡,用于展示一個任務(wù)的進(jìn)度。進(jìn)度條是不可交互的,但是他們經(jīng)常伴隨著一個取消當(dāng)前操作的按鈕。
總是準(zhǔn)確地匯報進(jìn)度。不要為了讓你的app看起來很忙碌而展示不準(zhǔn)確的進(jìn)度信息。只為可量化的任務(wù)使用進(jìn)度條。否則,請使用活動指示器。
用進(jìn)度條來展示有明確持續(xù)時間的任務(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)度時,應(yīng)該隱藏進(jìn)度條未被填充的部分。
考慮自定義進(jìn)度條的外觀來與你的app匹配。進(jìn)度條的外觀能夠根據(jù)你的app設(shè)計而調(diào)整。比如,你能夠為填充和未填充的部分設(shè)定自定義的顏色或圖片。
了解開發(fā)詳情,請參閱UIProgressView。
(3)網(wǎng)絡(luò)活動指示器
當(dāng)前發(fā)生連網(wǎng)活動時,網(wǎng)絡(luò)活動指示器會在屏幕頂部狀態(tài)欄上旋轉(zhuǎn)。結(jié)束連網(wǎng)時,它就會消失。這個指示器和活動指示器長得一樣,并且同樣不可交互。
只在進(jìn)行那些持續(xù)時間超過幾秒的網(wǎng)絡(luò)活動時才展示這個指示器。無需為快速的網(wǎng)絡(luò)活動展示指示器,因為它們很可能在用戶注意到它的存在或是明白它代表什么之前已經(jīng)消失了。
請同時參閱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)容,但他們同樣希望能夠定時自動地替他們刷新。不要讓用戶承擔(dān)激活每一次刷新的工作。通過定時刷新保證數(shù)據(jù)的及時性。
如果有意義,可以為刷新控件添加一個短標(biāo)題。刷新控件可以選擇性地包含一個標(biāo)題。但是在大多數(shù)情況下,這樣做是無意義的,因為刷新控件的動效已經(jīng)足以表明加載的狀態(tài)。如果你一定要包含一個標(biāo)題,不要用它來解釋如何執(zhí)行刷新操作。取而代之地,提供一些與被加載內(nèi)容有關(guān)且有價值的信息。比如,在“播客”中,利用一行文字來告訴用戶上次是什么時間更新了播客。
了解開發(fā)詳情,請參閱UIRefreshControl。
8.8 分段控件(Segmented Controls)
分段控件是含有兩個或更多分段的一個線狀組,每個分段等于一個與其它互斥的按鈕??丶锏乃蟹侄味际堑葘挼摹:桶粹o一樣,分段可以含有文本或圖片。分段控件一般用于展示不同的視圖。比如,在“地圖”中,分段控件讓你能在地圖、公交和衛(wèi)星視圖間來回切換。
限制分段的數(shù)量以確??捎眯?。更寬的分段更易于點擊。在iPhone設(shè)備上,一個分段控件最多只能包含五個分段。
盡量維持各分段內(nèi)容尺寸的一致性。因為所有的分段都等寬,所以如果某個分段被填得很滿很滿但是其它的又很空,就會顯得很難看。
避免在一個分段控件中同時使用文本和圖片。盡管分段控件可以容納文本或圖片,但在一個控件中同時使用兩者會讓界面變得混亂而無條理。
在自定義的分段控件中合理放置內(nèi)容。如果你更改了分段控件的背景圖,請確保其上的內(nèi)容依舊與之相配并清晰可讀,而不會顯得不和諧。
了解開發(fā)詳情,請參閱UISegmentedControl。
8.9 滑塊(Sliders)
滑塊是一條帶有thumb控件的水平軌跡,你可以通過手指拖動它在最小值和最大值之間滑動,比如屏幕亮度或是媒體播放進(jìn)度。當(dāng)滑塊值改變時,最小值和thumb之間的軌跡會被顏色填充??梢赃x擇性地在滑塊的左右兩側(cè)分別展示圖標(biāo),來說明最大值和最小值所代表的含義。
自定義滑塊的外觀,如果這么做有意義。滑塊的外觀,包含軌跡顏色、thumb的圖片以及左側(cè)和右側(cè)的圖標(biāo),這些都可以為了符合你的app設(shè)計風(fēng)格以及達(dá)到溝通的目的而被調(diào)整。比如,用戶調(diào)整圖片大小的滑塊,可以在左側(cè)顯示一個小的圖片圖標(biāo),并在右側(cè)顯示一個大的圖片圖標(biāo)。
不要使用滑塊來調(diào)節(jié)音量。如果你需要在你的app中提供音量控件,請使用音量視圖。它是可自定義的,含有一個音量滑塊和一個更改當(dāng)前音源輸出設(shè)備的控件。了解關(guān)于如何使用音量視圖,請參閱MPVolumeView。
了解開發(fā)詳情,請參閱UISlider。
8.10 步進(jìn)器(Steppers)
步進(jìn)器是一個用于增加或減少遞增數(shù)值的兩段控件。默認(rèn)狀態(tài)下,步進(jìn)器的一個分段顯示一個加號而另外一個顯示減號。如果有需要,這些符號也可以替換成自定義圖片。
確保步進(jìn)器所調(diào)整的數(shù)值顯眼易見。由于步進(jìn)器本身不顯示任何值,因此要確保用戶知道他們用步進(jìn)器改變的是什么值。
若可能涉及到較大數(shù)值的調(diào)整,那就不要使用步進(jìn)器。步進(jìn)器適用于只需少量點擊的小數(shù)值調(diào)整。比如,在打印頁面,使用步進(jìn)器調(diào)整打印份數(shù)是合理的,因為用戶極少會大幅度調(diào)整這個值。反之,用步進(jìn)器來選擇頁碼范圍就是不合理的,因為即使是對于頁碼不多的文檔,用戶也必須通過多次點擊才能完成選擇。
了解開發(fā)詳情,請參閱UIStepper。
8.11 開關(guān)按鈕(Switches)
開關(guān)按鈕提供了在兩種互斥狀態(tài)——開和關(guān)之間的視覺切換。
自定義樣式的開關(guān)
默認(rèn)樣式的開關(guān)
考慮調(diào)整開關(guān)的外觀以符合你的app風(fēng)格。如果對你的app有幫助,可以更改開關(guān)的在兩種狀態(tài)下的顏色,或是使用自定義圖像來替代開關(guān)。
只能在表格欄中使用開關(guān)。開關(guān)是用于表格中的,比如在一列設(shè)置項中,每個設(shè)置項都能被打開和關(guān)閉。如果你需要在導(dǎo)航欄和工具欄中執(zhí)行類似的功能,請使用按鈕替代,并且提供兩個不同的圖標(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è)置項,比如“蜂窩移動網(wǎng)絡(luò)”和“個人熱點”。在設(shè)置中關(guān)閉Wi-Fi會導(dǎo)致其它選項的消失。
了解開發(fā)詳情,請參閱UISwitch。
8.12 文本框(Text Fields)
文本框是單行、高度固定且?guī)в袌A角的輸入框,點擊它會自動呼出鍵盤。使用文本框向用戶請求少量信息的錄入,比如郵箱地址。
在文本框中顯示提示文字向用戶解釋意圖。若當(dāng)前文本框中沒有其它文本,文本框內(nèi)可以包含占位文本,比如“郵箱”或“密碼”。若占位文本已經(jīng)表意明確,就不要再額外用標(biāo)簽對文本框進(jìn)行描述了。
合適時,使用加密文本框。在你的app請求密碼之類的敏感信息時,總是使用加密文本框。
TIP ?對于多行或是多樣式的文本輸入,請使用文本視圖。請參閱Text Views。
郵件鍵盤
電話鍵盤
顯示合適的鍵盤類型。iOS提供了幾種不同的鍵盤類型,每種都為了特定的一種輸入類型而設(shè)計。為了方便數(shù)據(jù)輸入,編輯文本框時顯示的鍵盤應(yīng)該適用于當(dāng)前所要輸入的文本類型。如果你的app需要用戶輸入郵箱,那么應(yīng)該顯示對應(yīng)的郵箱鍵盤。了解可用鍵盤類型的完整列表,請參閱UITextInputTraits中的UIKeyboardTypeconstant。
在文本框中添加圖片以增進(jìn)理解、添加按鈕以增強(qiáng)功能性。你可以在文本框的左側(cè)或是右側(cè)顯示自定義圖片,或是添加一個系統(tǒng)按鈕,比如一個書簽按鈕。一般來說,文本框左側(cè)的區(qū)域用于說明文本框的含義,右側(cè)的區(qū)域用于展示已有的附加功能,比如書簽。
合適時,在文本框的右端展示一個清除按鈕。若出現(xiàn)了清除按鈕,點擊它會清楚文本框內(nèi)的所有輸入內(nèi)容,免去了用戶不斷點擊鍵盤上刪除按鈕的麻煩。
了解開發(fā)詳情,請參閱UITextField。
相關(guān)閱讀
譯文 | iOS 10 人機(jī)界面設(shè)計指南 (一)
原文地址:https://developer.apple.com/ios/human-interface-guidelines/
譯者:喵大神經(jīng),交互設(shè)計師。
本文由 @喵大神經(jīng) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
哇塞,好文
受益匪淺
哇。。。好文,值得學(xué)習(xí),謝謝分享
這個必須點贊,支持!作者辛苦了。收藏了細(xì)讀