
最近在讀iOS10人機(jī)界面指南,目前網(wǎng)上最全的翻譯版本來自譯者@喵大神經(jīng),翻譯到UI Bars部分就一直沒有更新。所以我接著從UI Views部分開始翻譯,英文水平有限,如有錯(cuò)誤請(qǐng)指正。
7. UI視圖(UI Views)
7.1 操作列表(Action Sheets)
操作列表是由一個(gè)控件或操作而觸發(fā)的特定類型的警告框,展示了與當(dāng)前情境相關(guān)的一系列選項(xiàng)。使用操作列表讓用戶啟動(dòng)任務(wù),或者在完成一項(xiàng)可能有破壞性的操作前請(qǐng)求用戶的確認(rèn)。在較小的屏幕下,操作列表從屏幕底部向上浮出;在較大的屏幕下,操作列表總是以彈出層的形式出現(xiàn)。

提供一個(gè)取消按鈕如果它能使操作清晰。當(dāng)用戶想要放棄一項(xiàng)任務(wù)時(shí),取消按鈕能夠灌輸信心。取消按鈕應(yīng)該始終包含在屏幕底部的操作列表中 。
突出可能存在破壞性的選項(xiàng)。為這些執(zhí)行破壞性或危險(xiǎn)操作的按鈕使用紅色,并將其顯示在操作列表的頂部。

避免讓用戶滾動(dòng)操作列表。如果一個(gè)操作列表中存在過多選項(xiàng),用戶必須要滾動(dòng)才能看完所有操作。滾動(dòng)需要花費(fèi)更多的時(shí)間來做選擇,并且很有可能誤點(diǎn)其它按鈕。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIAlertController中的UIAlertControllerStyleActionSheet?constant。

7.2 活動(dòng)視圖(Activity Views)
每個(gè)活動(dòng)表示了一個(gè)作用于當(dāng)前情境的任務(wù),例如打印、添加到個(gè)人收藏、在頁面上查找等等。一旦啟動(dòng),活動(dòng)就立即執(zhí)行任務(wù),或者在進(jìn)行前請(qǐng)求更多信息?;顒?dòng)由活動(dòng)視圖管理,它表現(xiàn)為一個(gè)列表或彈出層,這取決于設(shè)備和方向。通過活動(dòng)提供給用戶你的應(yīng)用程序可以執(zhí)行的自定義服務(wù)或任務(wù)。
系統(tǒng)提供了若干內(nèi)置的活動(dòng),如打印、轉(zhuǎn)發(fā)到 Twitter、發(fā)送信息和Airplay等等。這些任務(wù)總是先出現(xiàn)在活動(dòng)視圖上并且不能被重新排序。你不需要再為這些內(nèi)置任務(wù)創(chuàng)建自定義活動(dòng)?;顒?dòng)視圖還顯示了其他應(yīng)用程序的分享和動(dòng)作擴(kuò)展。請(qǐng)參閱Sharing and Actions。
設(shè)計(jì)精簡(jiǎn)的模板圖標(biāo)(Template image)來表示你的自定義活動(dòng)。模板圖標(biāo)會(huì)用遮罩生成用戶最終看到的圖標(biāo)效果。使用透明度適當(dāng)?shù)暮谏虬咨?,進(jìn)行抗鋸齒處理,并且不要使用陰影。一個(gè)模板圖標(biāo)應(yīng)該居中顯示在70×70像素左右的區(qū)域里。
為你的活動(dòng)設(shè)計(jì)清晰簡(jiǎn)練的文字標(biāo)題。標(biāo)題會(huì)出現(xiàn)在活動(dòng)視圖圖標(biāo)的下方。短標(biāo)題效果最好。如果標(biāo)題文字過長(zhǎng),iOS 首先會(huì)縮小文本,仍然過長(zhǎng)的話則會(huì)被截?cái)?。一般而言,最好避免在?biāo)題中提及你的公司或產(chǎn)品名。

確?;顒?dòng)適用于當(dāng)前情境。雖然系統(tǒng)提供的任務(wù)不能在活動(dòng)視圖中被重新排序,但是如果它們不適用于你的應(yīng)用,它們可以被刪除。例如,為了防止用戶打印圖片,你可以刪除打印活動(dòng)。您還可以定義在任何給定時(shí)間里顯示哪些自定義任務(wù)。

使用動(dòng)作按鈕來觸發(fā)顯示活動(dòng)視圖。用戶習(xí)慣點(diǎn)擊動(dòng)作按鈕后訪問系統(tǒng)提供的活動(dòng)。避免提供給用戶完成同一件事的另一種方式,使之迷惑。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIActivityViewContoller和UIActivity。
7.3 警告框(Alerts)
警告框用于告知用戶與他們的應(yīng)用程序或設(shè)備相關(guān)的重要信息,并經(jīng)常請(qǐng)求反饋。一個(gè)警告框包含標(biāo)題、可選的正文文本、一個(gè)或多個(gè)按鈕和一個(gè)可選的用于輸入的文本字段。除了這些可配置的元素外,警告框的外觀是固定不變的,不能被自定義。
減少警告框的使用。警告框會(huì)破壞用戶體驗(yàn),只能被用于像確認(rèn)購買、破壞性操作(如刪除)或告知用戶問題等重要情況。警告框的少見有助于確保用戶認(rèn)真對(duì)待它們。確保每個(gè)警告框提供緊急的信息和有用的選項(xiàng)。
在不同方向上測(cè)試警告框的外觀。警告框可能會(huì)在橫豎屏模式下呈現(xiàn)不同的外觀。優(yōu)化警告框文本,使其在任何方向上都能被良好閱讀,無需滾動(dòng)。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIAlertController。

警告框標(biāo)題和文本
使用簡(jiǎn)短的、描述性的多字警告框標(biāo)題。用戶需要在屏幕上閱讀的文字越少越好。盡量精簡(jiǎn)標(biāo)題,避免添加額外的文本信息。因?yàn)閱蝹€(gè)字的標(biāo)題幾乎不能提供任何有用信息,所以考慮使用一個(gè)問題或者短句作為標(biāo)題。盡可能保證標(biāo)題在一行之內(nèi)。使用句子式大寫(Sentence-style capitalization)和合適的標(biāo)點(diǎn)符號(hào)構(gòu)成句子。不要在句末使用結(jié)束標(biāo)點(diǎn)。
如果你必須為警告框添加正文文本,請(qǐng)使用一個(gè)完整的短句。盡量保證文本足夠短,使其在一到兩行之間,防止?jié)L動(dòng)。使用句子式大寫和合適的標(biāo)點(diǎn)符號(hào)。
不用刻意避免使用指責(zé)的、批判的、侮辱的文案。用戶理解警告框是為了告訴他們發(fā)生的問題和危險(xiǎn)的情況。只要使用友好的語氣,消極但清晰直接的文案就優(yōu)于積極但晦澀間接的文案。避免使用“你”,“你的”,“我”,“我的”這類代詞,有時(shí)候會(huì)被誤認(rèn)為是一種侮辱或冒犯。
避免詳細(xì)描述文本按鈕。如果你的警告文本和按鈕文案是明確的,就不需要向用戶解釋按鈕是用來做什么的。如果你一定要在按鈕文案中提供指導(dǎo),請(qǐng)使用輕擊(tap)字眼,保持大寫,并不要使用引號(hào)。
警告框按鈕
一般情況下,使用兩個(gè)按鈕的警告框。兩個(gè)按鈕的警告框便于用戶在兩個(gè)選擇中做決定。單按鈕的警告框只是起到告知的作用,并未給予用戶控制當(dāng)前狀態(tài)的能力。三個(gè)或更多按鈕的警告框會(huì)導(dǎo)致復(fù)雜和強(qiáng)制滾動(dòng),是一個(gè)非常糟糕的體驗(yàn)。如果你需要在警告框中給與用戶超過兩個(gè)選項(xiàng),可以考慮使用操作列表來代替警告框。請(qǐng)參閱Action Sheets。
為按鈕設(shè)計(jì)簡(jiǎn)短而邏輯清晰的文案。好的按鈕文案一般只有一到兩個(gè)單詞,描述用戶點(diǎn)擊按鈕后的結(jié)果。跟其它所有按鈕一樣,使用標(biāo)題式大寫,而且不需要標(biāo)點(diǎn)符號(hào)。盡可能使用與警告標(biāo)題和文案直接相關(guān)的動(dòng)詞和動(dòng)詞詞組,如查看全部(View All),回復(fù)(Reply)和忽略(Ignore)等??梢允褂肙K表示簡(jiǎn)單的接受。避免使用是(Yes)或否(No)。
將按鈕放置在用戶期待的位置。一般來說,用戶最有可能會(huì)點(diǎn)擊右邊的按鈕。取消按鈕應(yīng)該總是放在左邊。
適當(dāng)?shù)貥?biāo)記取消按鈕。用于取消警告框操作的按鈕應(yīng)該總是被標(biāo)記為取消(Cancel)。
識(shí)別具有破壞性的按鈕。如果一個(gè)警告框按鈕會(huì)導(dǎo)致破壞性操作,如刪除內(nèi)容,請(qǐng)將按鈕的樣式設(shè)置為破壞性的(Destructive),以使系統(tǒng)將其變?yōu)楹线m的格式。了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIAlertAction中的UIAlertActionStyleDestructive constant。此外,提供一個(gè)取消按鈕,使用戶能夠安全地退出破壞性操作。通過將取消按鈕標(biāo)記為默認(rèn)按鈕,讓其變成粗體。
允許使用Home鍵取消警告框。當(dāng)警告框出現(xiàn)的時(shí)候,按Home鍵將會(huì)從應(yīng)用程序里切回主屏幕。Home鍵的效果類似于取消按鈕——當(dāng)用戶回到應(yīng)用中時(shí),警告框消失,操作也不會(huì)被執(zhí)行。如果你的警告框沒有取消按鈕,可以考慮當(dāng)按下Home鍵的時(shí)候,在代碼里執(zhí)行取消操作。
7.4 集合視圖(Collections)
集合視圖用于管理一系列有序的內(nèi)容,如照片集合,并以一種自定義和高度可視化的布局來呈現(xiàn)它們。由于集合視圖的布局不是一個(gè)嚴(yán)格的線性布局,因此尤其適合用來展示一些尺寸不一致的項(xiàng)。一般來說,集合視圖很理想用于展示以圖片為基礎(chǔ)的內(nèi)容項(xiàng)。集合視圖可包含背景和其他裝飾視圖,以從視覺上區(qū)分項(xiàng)的子集。
集合視圖支持交互和動(dòng)畫。默認(rèn)情況下,可以使用輕擊(tap)某項(xiàng)以選中,長(zhǎng)按(touch-and-hold)某項(xiàng)進(jìn)行編輯,輕掃(swipe)用于滾動(dòng)。如果應(yīng)用程序需要,可以添加更多手勢(shì)用來執(zhí)行自定義操作。在集合視圖內(nèi),當(dāng)用戶導(dǎo)入、刪除或者移動(dòng)項(xiàng)時(shí)會(huì)出現(xiàn)動(dòng)畫效果,也支持自定義動(dòng)畫。
當(dāng)標(biāo)準(zhǔn)的行或網(wǎng)格布局足夠用時(shí),避免創(chuàng)建激進(jìn)的新設(shè)計(jì)。集合視圖應(yīng)該提升用戶體驗(yàn),而不是成為關(guān)注的焦點(diǎn)所在。讓選中一個(gè)項(xiàng)目變得簡(jiǎn)單。如果用戶很難點(diǎn)中集合視圖中的項(xiàng),將會(huì)在得到他們想要的內(nèi)容前感到挫敗和喪失興趣。在內(nèi)容周圍使用足夠的填充以保持布局整潔,防止內(nèi)容重疊。
考慮使用表格而不是集合視圖來展示文本。將文本信息放在滾動(dòng)列表中的時(shí)候,用戶閱讀和處理起來會(huì)更為簡(jiǎn)單和高效。

當(dāng)讓布局發(fā)生動(dòng)態(tài)變化時(shí),請(qǐng)務(wù)必謹(jǐn)慎。集合視圖的布局可以在任何時(shí)候被改變。如果在用戶瀏覽和操作項(xiàng)的時(shí)候調(diào)整視圖布局,請(qǐng)確保這個(gè)動(dòng)態(tài)變化是有意義且容易跟蹤的。沒有明確目的就改變布局會(huì)讓應(yīng)用不符合預(yù)期且難以使用。如果用戶此時(shí)關(guān)注的項(xiàng)在變化中消失了,用戶會(huì)覺得這個(gè)應(yīng)用超出了他們的控制能力。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UICollectionView。
7.5 圖片視圖(Image Views)
圖片視圖在透明或不透明的背景下顯示單張圖片或者動(dòng)態(tài)圖片序列。在圖片視圖中,圖片可以被拉伸、縮放、調(diào)整到適合屏幕的大小,或者固定在一個(gè)特定的位置。在默認(rèn)狀態(tài)下圖片視圖不支持用戶的交互行為。
盡可能保證圖片視圖中的每一張圖片都大小一致。如果圖片大小不同,圖片視圖將分別調(diào)整它們。使用大小一致的圖片比使用不同大小的圖片更有效。甚至使用那些預(yù)改變大小的圖片會(huì)更有效,不需要任何調(diào)整。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIImageView。

TIP:
已被配置為模板圖像的圖像會(huì)丟棄其顏色,并采用任何色調(diào)應(yīng)用到圖片視圖中。請(qǐng)參閱UIImage中的UIImageRenderingModeAlwaysTemplate。
7.6 地圖視圖(Maps)
地圖視圖允許你在應(yīng)用程序中呈現(xiàn)地理數(shù)據(jù),并支持系統(tǒng)內(nèi)置地圖應(yīng)用所提供的大部分功能。地圖視圖通常以標(biāo)準(zhǔn)地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來展示地理區(qū)域。它能展示單點(diǎn)標(biāo)注(pins)和疊加圖層(overlays),并支持用戶的縮放和平移。如果你的應(yīng)用程序支持導(dǎo)航,如跑步路線追蹤應(yīng)用,可以使用地圖視圖來展示路徑。
一般來說,讓你的地圖保持可交互。用戶習(xí)慣了在系統(tǒng)內(nèi)置地圖中進(jìn)行交互,因此他們會(huì)期待能在你所提供的地圖中進(jìn)行類似的行為。


使用標(biāo)準(zhǔn)的地圖標(biāo)注顏色。標(biāo)注用于在你的地圖上注明用戶感興趣的地點(diǎn)。用戶習(xí)慣了內(nèi)置地圖應(yīng)用的標(biāo)注顏色。避免在你的應(yīng)用中重新定義這些顏色的含義。紅色表示目的地,?綠色表示起點(diǎn),?紫色表示用戶指定的地點(diǎn)。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱MapKit。
7.7 頁面視圖(Pages)
頁面視圖控制器提供了一種實(shí)現(xiàn)內(nèi)容頁之間線性導(dǎo)航的方式,例如在文檔、書、記事本或日歷中。頁面視圖控制器通過滾動(dòng)(Scrolling)或翻頁(Page-curl)兩種樣式來處理頁面之間的轉(zhuǎn)場(chǎng)。使用滾動(dòng)過渡的頁面視圖控制器沒有特定的外觀,頁面會(huì)流暢地滾動(dòng)到下一頁。而使用翻頁過渡時(shí),在屏幕上輕掃會(huì)導(dǎo)致頁面卷曲,就像現(xiàn)實(shí)世界里書中的頁面一樣。

如果適當(dāng)?shù)脑挘瑢?shí)現(xiàn)一種非線性導(dǎo)航的方法。當(dāng)使用頁視圖控制器時(shí),頁面會(huì)按順序流動(dòng),無法在不相鄰的頁面之間進(jìn)行跳轉(zhuǎn)。如果用戶在你的應(yīng)用中需要不按順序訪問頁面,那么就需要實(shí)現(xiàn)一種自定義的控制方式提供這個(gè)功能。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIPageViewController。
7.8 彈出層(Popovers)
彈出層是當(dāng)用戶輕點(diǎn)某個(gè)控件或某一區(qū)域時(shí),浮在屏幕其它內(nèi)容上的臨時(shí)視圖。通常,彈出層會(huì)包含一個(gè)箭頭,指向其出處。彈出層更適合在大屏幕上使用,可以包含各種元素,如導(dǎo)航欄、工具欄、標(biāo)簽欄、表格視圖、集合視圖、圖片視圖、地圖視圖和自定義視圖。當(dāng)彈出層可見時(shí),其他視圖是不可進(jìn)行交互的,除非彈出層消失。使用彈出層展示與當(dāng)前屏幕內(nèi)容相關(guān)的選項(xiàng)或信息。例如,許多iPad應(yīng)用,當(dāng)用戶點(diǎn)擊分享按鈕時(shí),會(huì)出現(xiàn)一個(gè)包含分享選項(xiàng)的彈出層。

避免在iPhone上顯示彈出層。一般來說,彈出層應(yīng)該被使用在iPad應(yīng)用上。在iPhone應(yīng)用上利用所有可用的屏幕空間,在全屏模態(tài)視圖上展示信息,而不是彈出層。了解相關(guān)指南,請(qǐng)參閱Modality。
僅在需要確認(rèn)和指引下使用關(guān)閉按鈕。一個(gè)關(guān)閉按鈕(如"取消"或"完成"),若能夠提供清晰,就有必要被包含,比如退出或不保存更改。一般來說,一個(gè)彈出層應(yīng)該在它不再需要出現(xiàn)時(shí)被自動(dòng)關(guān)閉。大多數(shù)情況下,當(dāng)用戶輕擊彈出層外部區(qū)域或選中其中某一項(xiàng)時(shí),就應(yīng)該關(guān)閉彈出層。如果選項(xiàng)可以被多選,彈出層應(yīng)該一直存在,除非用戶明確要關(guān)閉它或輕擊彈出層外部區(qū)域。
確保在自動(dòng)關(guān)閉彈出層時(shí)保存任務(wù)。用戶很容易誤點(diǎn)屏幕其它區(qū)域而使彈出層消失。只有當(dāng)用戶明確點(diǎn)擊取消按鈕時(shí)才放棄任務(wù)。
彈出層應(yīng)該出現(xiàn)在屏幕上合適的位置。彈出層的箭頭應(yīng)盡可能直接地指向其出處。因?yàn)閺棾鰧硬荒茉谄聊簧贤蟿?dòng),所以它不應(yīng)該覆蓋住用戶使用彈出層時(shí)可能需要的基本內(nèi)容。彈出層也不能覆蓋住觸發(fā)它出現(xiàn)的元素。
確保同一時(shí)間內(nèi)屏幕上只有一個(gè)彈出層。同時(shí)顯示多個(gè)彈出層會(huì)使界面變的雜亂并引起困惑。尤其應(yīng)當(dāng)避免同時(shí)展示一連串或者一系列彈出層,從一個(gè)彈出層中彈出另一個(gè)彈出層。如果你需要展示一個(gè)新的彈出層,請(qǐng)先關(guān)閉原來的那一個(gè)。
不要在彈出層上面再展示一個(gè)視圖。除了警告框外,彈出層上不應(yīng)當(dāng)有任何視圖。
可能的話,讓用戶可以僅點(diǎn)擊一下就關(guān)閉當(dāng)前浮出層并開啟一個(gè)新的彈出層。這在若干欄按鈕每個(gè)都會(huì)喚起一個(gè)彈出層的時(shí)候尤其好用,因?yàn)樗鼫p少了用戶的額外點(diǎn)擊。
避免把彈出層設(shè)計(jì)得太大。彈出層不應(yīng)當(dāng)占據(jù)整個(gè)屏幕。它的大小應(yīng)當(dāng)恰好能承載當(dāng)中的內(nèi)容,又能清楚地指向其出處。系統(tǒng)可能會(huì)調(diào)整彈出層的寬高,以讓它能夠更好地適應(yīng)屏幕的尺寸。
確保自定義彈出層仍然長(zhǎng)得像一個(gè)彈出層。盡管你可以自定義彈出層的多種外觀,還是應(yīng)當(dāng)避免設(shè)計(jì)出用戶可能無法辨識(shí)的彈出層外觀。包含標(biāo)準(zhǔn)控件和視圖的彈出層往往最好使用。
改變彈出層大小時(shí)請(qǐng)?zhí)峁┢交^渡的效果。一些彈出層展示同樣信息的精簡(jiǎn)或拓展視圖。如果你要改變彈出層的大小,請(qǐng)使用轉(zhuǎn)場(chǎng)動(dòng)畫,避免讓用戶覺得一個(gè)新的彈出層取代了原來的那個(gè)。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIPopoverPresentationController。
7.9 滾動(dòng)視圖(Scroll Views)
使用滾動(dòng)視圖來允許用戶瀏覽大于可見區(qū)域的內(nèi)容,例如文檔中的文本或圖片集合。當(dāng)用戶輕掃(swipe)、滑動(dòng)(flick)、拖動(dòng)(drag)、輕擊(tap)、捏合(pinch),滾動(dòng)視圖會(huì)遵從這些手勢(shì),以一種自然的方式出現(xiàn)或縮放內(nèi)容。滾動(dòng)視圖本身沒有外觀,但當(dāng)用戶與之交互時(shí)會(huì)出現(xiàn)臨時(shí)的滾動(dòng)指示器。滾動(dòng)視圖可以應(yīng)用在頁模式(paging mode)中,在此模式下用戶通過滾動(dòng)顯示一個(gè)全新內(nèi)容的頁面,而不是圍繞當(dāng)前頁面移動(dòng)。
適當(dāng)?shù)刂С挚s放操作。如果放大和縮小對(duì)于你的應(yīng)用是有意義的話,可以支持用戶通過捏合或者雙擊來對(duì)當(dāng)前視圖進(jìn)行縮放。若支持了縮放操作,還應(yīng)當(dāng)設(shè)定在當(dāng)前情景下有意義的允許縮放的最大值和最小值。例如,允許一個(gè)字符被放大到充滿整個(gè)屏幕的話,用戶會(huì)很難閱讀當(dāng)前內(nèi)容,并沒有什么意義。
在頁模式下的滾動(dòng)視圖中,考慮使用頁面控件(page control)元素。使用頁面控件來讓用戶知道當(dāng)前內(nèi)容一共有多少頁、屏幕、塊是可見的,以及他們當(dāng)前瀏覽的是第幾個(gè)。當(dāng)你在滾動(dòng)視圖中使用頁面控件的時(shí)候,請(qǐng)禁用同一方向的滾動(dòng)指示器(scrolling indicator),避免混淆。了解更多指南,請(qǐng)參閱Page Controls。
不要在滾動(dòng)視圖上放置另一個(gè)滾動(dòng)視圖。這樣做會(huì)創(chuàng)建一個(gè)不可預(yù)知的界面,用戶很難控制。

一般來說,一次只展示一個(gè)滾動(dòng)視圖。由于用戶滾動(dòng)屏幕時(shí)動(dòng)作幅度經(jīng)常都會(huì)很大,如果在一屏中同時(shí)存在不止一個(gè)滾動(dòng)視圖,他們很容易會(huì)碰到另一個(gè)。如果你確實(shí)要在同屏中放兩個(gè)滾動(dòng)視圖,可以考慮給他們?cè)O(shè)定不同的滾動(dòng)方向,來避免用戶想要滾動(dòng)一個(gè)視圖的時(shí)候誤操作。例如,iPhone上的股票應(yīng)用,縱向滾動(dòng)上半部分會(huì)展示股票報(bào)價(jià),橫向滾動(dòng)下半部分時(shí)則展示該公司的特定信息。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIScrollView。
7.10 分欄視圖(Split Views)
分欄視圖用于管理兩個(gè)相鄰內(nèi)容窗格的展示,在主窗格顯示固定的內(nèi)容,在次要窗格顯示相關(guān)的信息。每個(gè)窗格可以包含各種元素,包括導(dǎo)航欄、工具欄、標(biāo)簽欄、表格視圖、集合視圖、圖片視圖、地圖視圖和自定義視圖。分欄視圖經(jīng)常用于展示篩選內(nèi)容,篩選條目列表顯示在主窗格中,選擇條目后的篩選結(jié)果顯示在次要窗格中。如果你的應(yīng)用需要,主窗格可以覆蓋次要窗格,也可以在不需要的時(shí)候隱藏主窗格。這在設(shè)備處于豎屏方向時(shí)特別有用,因?yàn)樗试S在次要窗格上留有更多空間查看內(nèi)容。

選擇一個(gè)適合內(nèi)容的分欄視圖布局。默認(rèn)情況下,分欄視圖將屏幕的三分之一用于主窗格,三分之二用于次要窗格。屏幕也可以分成兩半使用。根據(jù)內(nèi)容選擇適當(dāng)?shù)牟鸱?,并確保窗格不會(huì)看起來不平衡。避免創(chuàng)建一個(gè)比主窗格更窄的次要窗格。
始終突出主窗格中被選中的項(xiàng)。盡管次要窗格中的內(nèi)容會(huì)變化,但它應(yīng)當(dāng)始終保持著與主窗格選中項(xiàng)的相關(guān)性。這有助于用戶理解左右窗格間的關(guān)系。
一般來說,在分欄視圖的一側(cè)窗格放置導(dǎo)航欄。在兩側(cè)窗格中都同時(shí)展示導(dǎo)航欄會(huì)讓用戶很難分清這兩個(gè)窗格的從屬關(guān)系。
提供多種獲取主窗格的方式。在主窗格不顯示在屏幕內(nèi)的布局情況下,需要向用戶提供一個(gè)按鈕(通常位于導(dǎo)航欄上)來喚起主窗格。除非你的應(yīng)用有定義輕掃的手勢(shì)執(zhí)行其他功能,否則應(yīng)當(dāng)支持用戶輕掃以喚起主窗格。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UISplitViewController。
7.11 表格視圖(Tables)
表格視圖以一個(gè)可滾動(dòng)的單列多行的形式來展示數(shù)據(jù),這些行可以被分段或分組。通過表格視圖以列表的形式清晰高效地顯示大量或少量的信息。一般來說,表格視圖是基于文本的內(nèi)容的理想選擇,并經(jīng)常出現(xiàn)在分欄視圖的一側(cè)作為導(dǎo)航,與之相關(guān)的內(nèi)容顯示在另一側(cè)。請(qǐng)參閱Split Views。
iOS定義了兩種表格樣式:平鋪型(plain)和分組型(grouped)。

平鋪型(Plain)。平鋪型表格可被分為若干帶標(biāo)簽的段落,表格右側(cè)會(huì)出現(xiàn)垂直的可選索引。每個(gè)段落的首項(xiàng)前可以有頁眉,末項(xiàng)后可以有頁腳。

分組型(Grouped)。行以分組形式展示,可以有頁眉和頁腳。分組表格視圖中至少含有一組列表,每一組中至少包含一行。分組型表格沒有索引。
考慮給予表格適當(dāng)?shù)膶挾取?/b>窄的表格可能會(huì)導(dǎo)致內(nèi)容被截?cái)嗪桶?,使其難以閱讀以及在遠(yuǎn)處快速瀏覽。寬的表格也會(huì)很難閱讀和瀏覽,并會(huì)占據(jù)內(nèi)容空間。
快速展示表格的內(nèi)容。在顯示某些內(nèi)容之前,不要等待大量的表格內(nèi)容加載??梢允紫日故疚谋拘畔?,圖片等較為復(fù)雜的內(nèi)容則在加載完后再顯示。這樣可以將有用的信息立即傳達(dá)給用戶,同時(shí)也提高了應(yīng)用的響應(yīng)能力。在某些情況下,等待信息加載時(shí),顯示過期的舊數(shù)據(jù)可能會(huì)有意義。
在內(nèi)容加載時(shí)請(qǐng)告知進(jìn)度。如果表格數(shù)據(jù)加載很慢,請(qǐng)展示進(jìn)度條或旋轉(zhuǎn)的活動(dòng)指示器,讓用戶知道加載仍然在進(jìn)行。
保持表格內(nèi)容的更新。考慮定期更新表格內(nèi)容以展示新數(shù)據(jù)。只是不要改變滾動(dòng)的位置。相反,將更新內(nèi)容添加到表格的開始或尾部,當(dāng)更新內(nèi)容準(zhǔn)備好時(shí)再讓用戶滾動(dòng)。一些應(yīng)用在新數(shù)據(jù)被添加后會(huì)顯示一個(gè)指示器,并提供了一個(gè)跳轉(zhuǎn)到那兒的控件。提供刷新控件也是一個(gè)好主意,用戶可以在任何時(shí)候手動(dòng)執(zhí)行更新操作。請(qǐng)參閱Refresh Content Controls。
避免讓表格上的向右元素和索引混合起來。索引通過輕掃手勢(shì)控制。如果其它可交互元素在索引附近,如展開標(biāo)志(disclosure indicators),當(dāng)手勢(shì)發(fā)生時(shí)可能會(huì)很難識(shí)別用戶的意圖,并且會(huì)激活錯(cuò)誤的元素。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITableView。
表行(Table Rows)
使用標(biāo)準(zhǔn)的表單元格樣式定義表中的內(nèi)容如何出現(xiàn)。

默認(rèn)型(Default)。默認(rèn)型包括行左側(cè)的可選圖片,并右跟左對(duì)齊的文字標(biāo)題。默認(rèn)型樣式適合展示一系列無須通過附加信息便可以區(qū)分的項(xiàng)。了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITableViewCell中的UITableViewCellStyleDefault constant。

副標(biāo)題型(Subtitle)。副標(biāo)題型包括一行上的左對(duì)齊文字標(biāo)題,以及下方的左對(duì)齊副標(biāo)題。這種樣式適用于列表各項(xiàng)較為相似的情況。副標(biāo)題能幫助用戶區(qū)分列表中的各項(xiàng)。了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITableViewCell中的UITableViewCellStyleSubtitle constant。

Value 1。在Value 1樣式下,文字標(biāo)題左對(duì)齊,在同一行上副標(biāo)題用較細(xì)的字體右對(duì)齊。了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITableViewCell中的UITableViewCellStyleValue1 constant。

Value 2。Value 2樣式下,文字標(biāo)題右對(duì)齊,在同一行上副標(biāo)題用較細(xì)的字體左對(duì)齊。了解開發(fā)細(xì)節(jié),請(qǐng)參閱fUITableViewCell中的UITableViewCellStyleValue2 constant。
所有標(biāo)準(zhǔn)的表單元格樣式均支持添加圖形元素,如勾選或展開標(biāo)志。當(dāng)然,添加這些元素會(huì)縮小標(biāo)題以及副標(biāo)題的可用空間。
保持文本簡(jiǎn)潔,以避免被截?cái)唷?/b>繁冗的文字和詞組不方便用戶瀏覽和理解。所有單元格樣式均會(huì)自動(dòng)截?cái)辔谋荆谋窘財(cái)嗨斐傻膯栴}可大可小,取決于你采用的單元格樣式,以及被截?cái)嗔四囊徊糠治淖帧?/p>
考慮為刪除按鈕自定義一個(gè)名稱。如果表格行支持刪除操作并能讓用戶清晰理解,可以創(chuàng)建一個(gè)自定義標(biāo)題,來取代系統(tǒng)提供的"刪除"標(biāo)題。
在選擇列表項(xiàng)時(shí),提供反饋。當(dāng)用戶點(diǎn)擊可選的列表項(xiàng)時(shí),會(huì)認(rèn)為被點(diǎn)擊的項(xiàng)都應(yīng)短暫地高亮一下。在點(diǎn)擊后,用戶期望出現(xiàn)新的視圖或發(fā)生一些變化,例如,出現(xiàn)一個(gè)復(fù)選標(biāo)記以表明先前點(diǎn)擊的項(xiàng)已被選中。
為非標(biāo)準(zhǔn)的表行設(shè)計(jì)一個(gè)自定義的單元格樣式。標(biāo)準(zhǔn)樣式在各種常見場(chǎng)景中都使用良好,但在一些內(nèi)容或應(yīng)用的整體設(shè)計(jì)中可能會(huì)需要大量自定義的表格外觀。了解如何創(chuàng)建自定義單元格樣式,請(qǐng)參閱Table View Programming Guide for iOS中的Customizing Cells。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITableViewCell。
7.12 文本視圖(Text Views)
文本視圖可以展示多行帶樣式的文本內(nèi)容。文本視圖可定義為任何高度,并且當(dāng)內(nèi)容太多超出視圖邊框時(shí)支持滾動(dòng)。默認(rèn)情況下,文本視圖會(huì)以左對(duì)齊的黑色系統(tǒng)字體顯示。如果文本視圖支持編輯,當(dāng)用戶輕擊文本視圖內(nèi)部時(shí)會(huì)喚起鍵盤。
始終確保文字的易讀性。雖然你可以以創(chuàng)造性的方式使用不同的字體、顏色和對(duì)齊方式,但保持文本的易讀性是必要的。采用動(dòng)態(tài)文本(Dynamic Type)是一個(gè)好主意,這樣就算用戶改變他們?cè)O(shè)備上的文字大小,文字內(nèi)容也能看起來很棒。你還應(yīng)使用可訪問的選項(xiàng)來測(cè)試文字內(nèi)容,如粗體文字。
展示合適的鍵盤樣式。iOS提供了各種不同的鍵盤類型,以便用戶輸入不同類型的文本。為了簡(jiǎn)化數(shù)據(jù)輸入,在文本視圖的編輯過程中,應(yīng)該根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型。了解可用的鍵盤類型,請(qǐng)參閱UITextInputTraits中的UIKeyboardType?constant。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITextView。

7.13 網(wǎng)絡(luò)視圖(Web Views)
網(wǎng)絡(luò)視圖用來加載和展示豐富的網(wǎng)絡(luò)內(nèi)容,如直接在應(yīng)用程序中顯示嵌入式HTML和網(wǎng)站。例如,郵箱應(yīng)用使用網(wǎng)絡(luò)視圖在消息中顯示HTML內(nèi)容。
如果合適,可以提供向前和向后的導(dǎo)航。網(wǎng)絡(luò)視圖支持向前和向后的導(dǎo)航,但默認(rèn)情況下禁用此行為。如果用戶將使用你的網(wǎng)絡(luò)視圖訪問多個(gè)頁面,可以啟用向前和向后的導(dǎo)航,并提供相應(yīng)的控件來啟動(dòng)這些功能。
不要用網(wǎng)絡(luò)視圖來創(chuàng)建一個(gè)網(wǎng)絡(luò)瀏覽器。使用網(wǎng)絡(luò)視圖讓用戶不離開你的應(yīng)用程序環(huán)境來簡(jiǎn)單地訪問一個(gè)網(wǎng)站是可以的,但Safari才是在iOS上瀏覽網(wǎng)頁的主要方式。試圖在你的應(yīng)用中復(fù)制Safari的功能是不必要和不被鼓勵(lì)的。
了解更多內(nèi)容,請(qǐng)參閱WKWebView。
