【Resin譯】iOS10人機(jī)界面指南(五):UI視圖

最近在讀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)。

左為從屏幕底部浮出的操作列表易桃,右為以彈出層形式出現(xiàn)的操作列表

提供一個(gè)取消按鈕如果它能使操作清晰褥琐。當(dāng)用戶想要放棄一項(xiàng)任務(wù)時(shí),取消按鈕能夠灌輸信心晤郑。取消按鈕應(yīng)該始終包含在屏幕底部的操作列表中 敌呈。

突出可能存在破壞性的選項(xiàng)。為這些執(zhí)行破壞性或危險(xiǎn)操作的按鈕使用紅色造寝,并將其顯示在操作列表的頂部磕洪。

紅色破壞性選項(xiàng)和取消按鈕

避免讓用戶滾動(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ù)暮谏虬咨眩M(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)嗤选R话愣裕詈帽苊庠跇?biāo)題中提及你的公司或產(chǎn)品名讶迁。

活動(dòng)視圖

確绷耄活動(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)參閱UIActivityViewContollerUIActivity迅箩。


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)等叁扫。可以使用OK表示簡(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)行類似的行為。

overlays
pins

使用標(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)過渡馆里,右為翻頁過渡

如果適當(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)的彈出層渗磅。

iPad應(yī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ù)知的界面慎璧,用戶很難控制。

滾動(dòng)視圖

一般來說跨释,一次只展示一個(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)嗪桶蛊潆y以閱讀以及在遠(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)型

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

副標(biāo)題型

副標(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酪惭。在Value 1樣式下希痴,文字標(biāo)題左對(duì)齊,在同一行上副標(biāo)題用較細(xì)的字體右對(duì)齊春感。了解開發(fā)細(xì)節(jié)砌创,請(qǐng)參閱UITableViewCell中的UITableViewCellStyleValue1 constant。

Value 2

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计露。

網(wǎng)絡(luò)視圖
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末博脑,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子票罐,更是在濱河造成了極大的恐慌叉趣,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件该押,死亡現(xiàn)場(chǎng)離奇詭異疗杉,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蚕礼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門烟具,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人奠蹬,你說我怎么就攤上這事朝聋。” “怎么了囤躁?”我有些...
    開封第一講書人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵冀痕,是天一觀的道長(zhǎng)荔睹。 經(jīng)常有香客問我,道長(zhǎng)言蛇,這世上最難降的妖魔是什么僻他? 我笑而不...
    開封第一講書人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮腊尚,結(jié)果婚禮上吨拗,老公的妹妹穿的比我還像新娘。我一直安慰自己跟伏,他們只是感情好丢胚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著受扳,像睡著了一般携龟。 火紅的嫁衣襯著肌膚如雪故慈。 梳的紋絲不亂的頭發(fā)上虚青,一...
    開封第一講書人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音璃氢,去河邊找鬼华望。 笑死蕊蝗,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的赖舟。 我是一名探鬼主播蓬戚,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼宾抓!你這毒婦竟也來了子漩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤石洗,失蹤者是張志新(化名)和其女友劉穎幢泼,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讲衫,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡缕棵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涉兽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片招驴。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖枷畏,靈堂內(nèi)的尸體忽然破棺而出忽匈,到底是詐尸還是另有隱情,我是刑警寧澤矿辽,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布丹允,位于F島的核電站,受9級(jí)特大地震影響袋倔,放射性物質(zhì)發(fā)生泄漏雕蔽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一宾娜、第九天 我趴在偏房一處隱蔽的房頂上張望批狐。 院中可真熱鬧,春花似錦前塔、人聲如沸嚣艇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽食零。三九已至,卻和暖如春寂屏,著一層夾襖步出監(jiān)牢的瞬間贰谣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來泰國打工迁霎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吱抚,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓考廉,卻偏偏與公主長(zhǎng)得像秘豹,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子昌粤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355

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