7. UI視圖(UI Views)
? ? 7.1 操作列表(Action Sheets)
? ? 7.2 活動(dòng)視圖(Activity Views)
? ? 7.3 警告框(Alerts)
? ? 7.4 集合(Collections)
? ? 7.5 圖片視圖(Image Views)
? ? 7.6 地圖(Maps)
? ? 7.7 頁(yè)面(Pages)
? ? 7.8 浮出層(Popovers)
? ? 7.9 滾動(dòng)視圖(Scroll Views)
? ? 7.10 分屏視圖(Split Views)
? ? 7.11 表格(Tables)
? ? 7.12 文本視圖(Text Views)
? ? 7.13 網(wǎng)頁(yè)視圖(Web Views)
7. UI視圖(UI Views)
7.1 操作列表(Action Sheets)
操作列表是一種對(duì)某個(gè)控件或操作作出應(yīng)答的特殊形式的警告框,它展示了與當(dāng)前內(nèi)容相關(guān)的一組選項(xiàng)(兩個(gè)或更多)。使用操作列表讓用戶觸發(fā)任務(wù),或是在用戶執(zhí)行某個(gè)有潛在破壞性的操作前請(qǐng)求用戶確認(rèn)。在小屏幕瘟忱,操作列表從屏幕底部向上滑出。在大屏幕,操作列表會(huì)以浮出層的形式突然出現(xiàn)。
提供取消按鈕,如果它能加強(qiáng)明確性巧婶。當(dāng)用戶想要放棄任務(wù)時(shí)乾颁,取消按鈕給予了他們信心。屏幕底部出現(xiàn)的操作列表最下方應(yīng)該有個(gè)取消按鈕艺栈。
突出破壞性的選項(xiàng)英岭。對(duì)那些執(zhí)行破壞性或危險(xiǎn)操作的按鈕使用紅字,并且在操作列表的頂部放置這些按鈕湿右。
避免讓用戶滾動(dòng)操作列表诅妹。如果操作列表有太多選項(xiàng),用戶就必須通過(guò)滾動(dòng)查看所有的選項(xiàng)毅人。滾動(dòng)需要用戶花更多的時(shí)間做決定吭狡,并且在滾動(dòng)過(guò)程中容易誤點(diǎn)某個(gè)選項(xiàng)。
了解開發(fā)細(xì)節(jié)丈莺,請(qǐng)參閱UIAlertController中的UIAlertControllerStyleActionSheet划煮。
7.2 活動(dòng)視圖(Activity Views)
一個(gè)活動(dòng)就是一個(gè)在當(dāng)前環(huán)境下有意義的任務(wù),比如復(fù)制缔俄、收藏或是查找弛秋。一旦活動(dòng)被觸發(fā),它可以立即執(zhí)行一個(gè)任務(wù)俐载,也可以在開始前請(qǐng)求更多的信息蟹略。活動(dòng)由活動(dòng)視圖管理遏佣,根據(jù)設(shè)備和橫豎屏的不同挖炬,以表單或浮出層的形式出現(xiàn)。使用活動(dòng)向用戶提供你的app能夠執(zhí)行的自定義服務(wù)或任務(wù)状婶。
系統(tǒng)提供了一系列內(nèi)置的活動(dòng)茅茂,比如打印捏萍、Twitter、信息和Airplay空闲。這些任務(wù)總是在活動(dòng)視圖的最前列出現(xiàn)令杈,并且不能被重新排列。你無(wú)須為執(zhí)行這些內(nèi)置任務(wù)創(chuàng)建自定義活動(dòng)碴倾《贺活動(dòng)視圖還能展示來(lái)自其它app的分享和操作插件。請(qǐng)參閱Sharing and Actions跌榔。
設(shè)計(jì)能夠代表你的自定義活動(dòng)的簡(jiǎn)單的模板圖像异雁。模板圖像(template image)利用遮罩(mask)創(chuàng)建圖標(biāo)。模板圖像應(yīng)使用透明度合適和經(jīng)過(guò)抗鋸齒處理的黑色和白色僧须,并且不包含陰影纲刀。模板圖像應(yīng)該被放置在一塊大約為70px*70px尺寸的區(qū)域中心。
設(shè)計(jì)能夠簡(jiǎn)扼描述你的任務(wù)的活動(dòng)標(biāo)題担平。在活動(dòng)視圖中示绊,標(biāo)題顯示在圖標(biāo)下方。短標(biāo)題是最佳的暂论。當(dāng)標(biāo)題過(guò)長(zhǎng)面褐,iOS首先會(huì)縮小字體,若文本實(shí)在過(guò)長(zhǎng)取胎, iOS會(huì)截?cái)嗨箍蕖R话銇?lái)說(shuō),避免在標(biāo)題中包含你的公司或產(chǎn)品名字闻蛀。
確狈税活動(dòng)在當(dāng)前環(huán)境中是合適的。雖然系統(tǒng)提供的任務(wù)在活動(dòng)視圖中不能被重新排列觉痛,但當(dāng)它們對(duì)你的app不適用時(shí)析恢,你可以去除它們。比如秧饮,你可以通過(guò)去除打印活動(dòng)而阻止用戶在你的app中打印圖片映挂。你也可以在特定的時(shí)候讓特定的自定義任務(wù)出現(xiàn)。
通過(guò)操作按鈕呼出操作視圖盗尸。用戶已經(jīng)習(xí)慣了通過(guò)點(diǎn)擊操作按鈕來(lái)進(jìn)入系統(tǒng)提供的活動(dòng)柑船。避免用其它方式替代,從而讓用戶感到困惑泼各。
了解開發(fā)細(xì)節(jié)鞍时,請(qǐng)參閱UIActivityViewContoller和UIActivity。
7.3 警告框(Alerts)
警告框傳達(dá)了與你的app或設(shè)備狀態(tài)相關(guān)的重要信息,并且通常在請(qǐng)求用戶反饋逆巍。警告框由標(biāo)題及塘、描述信息(可選)、一個(gè)或多個(gè)按鈕和用于獲取用戶輸入的文本框(可選)锐极。除了這些可配的元素之外笙僚,警告框的視覺(jué)外觀是固定的的且不能被自定義。
盡可能少地使用警告框灵再。警告框會(huì)中斷用戶體驗(yàn)肋层,只有在重要情境下才能使用,比如確認(rèn)購(gòu)買翎迁、破壞性操作(如刪除)栋猖,或是通知用戶當(dāng)前出現(xiàn)了問(wèn)題。正是因?yàn)榫婵虻暮币娦酝衾疲抛層脩舾又匾暰婵蚱牙4_保每個(gè)警告框都提供了關(guān)鍵的信息和有用的選項(xiàng)。
在橫屏和豎屏下雙重測(cè)試警告框的外觀痴腌。警告框可能在橫屏和豎屏模式下看起來(lái)有所區(qū)別雌团。優(yōu)化警告框文本,確保用戶在任一模式下都無(wú)需滑動(dòng)操作即可完整閱讀衷掷。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIAlertController柿菩。
警告框標(biāo)題和信息
使用簡(jiǎn)短的戚嗅、描述性的、多詞語(yǔ)的警告框標(biāo)題枢舶。用戶需要在屏幕上閱讀的文本越短越好懦胞。嘗試更多地推敲標(biāo)題,以避免額外添加信息文本凉泄。由于單詞語(yǔ)的標(biāo)題很少能提供有用信息躏尉,考慮使用問(wèn)句或是短句。盡可能控制標(biāo)題字?jǐn)?shù)在一行內(nèi)后众。使用句子式大寫胀糜,并用合適的標(biāo)點(diǎn)符號(hào)為句子結(jié)尾。不要給句子片段(譯者注:不完整的殘缺句)加上結(jié)束標(biāo)點(diǎn)蒂誉。
如果你必須提供一段信息教藻,請(qǐng)使用簡(jiǎn)短、完整的句子右锨。盡量將說(shuō)明信息控制在一到兩行之內(nèi)括堤,這樣用戶就無(wú)需通過(guò)滾動(dòng)查看。使用句子式大寫和合適的標(biāo)點(diǎn)符號(hào)。
避免使用指責(zé)的悄窃、苛刻的或是無(wú)禮的語(yǔ)氣讥电。用戶知道警告框是為了通知他們發(fā)生的問(wèn)題和危險(xiǎn)情況。只要你使用友好的語(yǔ)氣轧抗,那么表現(xiàn)地消極和直接一些好過(guò)一味的積極和隱晦恩敌。避免使用“你”、“你的”鸦致、“我”和“我的”之類的代詞潮剪,因?yàn)樗鼈兂1焕斫鉃闊o(wú)禮和傲慢。
避免對(duì)警告框按鈕做出解釋分唾。如果警告框文本和按鈕標(biāo)題足夠明了抗碰,那么就無(wú)需對(duì)按鈕的用途做出多余的解釋。在極少數(shù)需要為按鈕提供指導(dǎo)的情況下绽乔,請(qǐng)使用詞語(yǔ)“輕擊(tap)”弧蝇,并且在提到按鈕名稱時(shí)使用大寫,并且不要添加雙引號(hào)折砸。
警告框按鈕
通常情況下看疗,使用雙按鈕警告框。雙按鈕警告框提供了在兩個(gè)選項(xiàng)中快速抉擇的途徑睦授。單按鈕警告框只負(fù)責(zé)通知两芳,卻未給予用戶對(duì)當(dāng)前情勢(shì)的控制權(quán)。擁有三個(gè)或以上按鈕的警告框增加了復(fù)雜性去枷,并可能需要滾動(dòng)操作怖辆,而這恰是一種不良的用戶體驗(yàn)。如果你發(fā)現(xiàn)自己需要兩個(gè)以上的按鈕删顶,可以考慮用操作列表代替竖螃。請(qǐng)參閱Action Sheets。
使用簡(jiǎn)明合理的按鈕標(biāo)題逗余。最好的按鈕標(biāo)題應(yīng)該包含一個(gè)或兩個(gè)能夠描述選擇按鈕后的結(jié)果的詞語(yǔ)特咆。對(duì)于所有的按鈕標(biāo)題,使用標(biāo)題式大寫录粱,并且不含標(biāo)點(diǎn)符號(hào)腻格。盡可能地,使用與警告框標(biāo)題或信息直接對(duì)應(yīng)的動(dòng)詞或動(dòng)詞性詞組啥繁,比如荒叶,“查看全部”、“回復(fù)”输虱、或“忽略”些楣。使用“好的(OK) ”表示簡(jiǎn)單的接受。避免使用“是”或“否”。
在用戶預(yù)期的位置放置按鈕愁茁。一般來(lái)說(shuō)蚕钦,用戶最可能輕擊的按鈕應(yīng)該在右邊。取消按鈕應(yīng)該在左邊鹅很。
為有取消功能的按鈕合理命名嘶居。一個(gè)能夠取消警告框操作的按鈕就該被命名為“取消”。
識(shí)別會(huì)產(chǎn)生破壞性結(jié)果的按鈕促煮。如果一個(gè)警告框按鈕會(huì)產(chǎn)生破壞性的操作邮屁,比如刪除內(nèi)容,那么請(qǐng)將按鈕樣式設(shè)定為“Destructive”菠齿,這樣它就能通過(guò)系統(tǒng)獲取合適的格式佑吝。了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIAlertAction中的UIAlertActionStyleDestructive常量绳匀。另外芋忿,為用戶提供一個(gè)“取消”按鈕,讓它們能夠安全地從破壞性操作中退出疾棵。通過(guò)標(biāo)記“取消”按鈕為默認(rèn)按鈕戈钢,來(lái)加粗按鈕文本。
允許使用“Home”鍵來(lái)取消警告框是尔。當(dāng)警告框出現(xiàn)時(shí)殉了,按住Home鍵會(huì)退出app。但同時(shí)拟枚,它應(yīng)該也產(chǎn)生和點(diǎn)擊取消按鈕一樣的效果薪铜,即在不執(zhí)行任何操作的情況下關(guān)閉警告框。如果你的警告框沒(méi)有取消按鈕梨州,那么考慮將點(diǎn)擊Home鍵也會(huì)關(guān)閉警告框?qū)懭肽愕拇a中痕囱。
7.4 集合(Collections)
一個(gè)集合管理著一組有序的內(nèi)容田轧,比如一組圖片暴匠,并且在可自定義的且高度可視化的布局中展示它。因?yàn)榧蠠o(wú)需執(zhí)行嚴(yán)格的線性格式傻粘,所以它尤其適合用來(lái)展示大小不同的項(xiàng)目每窖。簡(jiǎn)言之,集合是用來(lái)展現(xiàn)圖片類內(nèi)容的理想視圖弦悉。背景及其它裝飾性視圖可以選擇性地用于視覺(jué)上區(qū)分不同組別的項(xiàng)目窒典。
集合同時(shí)支持交互性和動(dòng)畫。默認(rèn)狀態(tài)下稽莉,你可以通過(guò)輕擊(tap)來(lái)選擇瀑志,長(zhǎng)按(touch and hold)來(lái)編輯,以及輕掃(swipe)來(lái)滾動(dòng)。如果你的app需要劈猪,你可以加入更多的手勢(shì)用于執(zhí)行自定義操作昧甘。在集合中,當(dāng)項(xiàng)目被插入战得、刪除或是重新排序時(shí)會(huì)伴隨默認(rèn)動(dòng)畫充边,你也可以使用自定義動(dòng)畫。
若標(biāo)準(zhǔn)的行或網(wǎng)格布局已能滿足需求常侦,請(qǐng)避免創(chuàng)造顛覆性的新設(shè)計(jì)浇冰。集合是為了優(yōu)化用戶體驗(yàn),而不是變成關(guān)注的中心聋亡。讓用戶能更容易選擇一項(xiàng)肘习。如果用戶很難在集合中選中某項(xiàng),它們會(huì)變得沮喪并且很快地在獲得想要的內(nèi)容前失去興致杀捻。在內(nèi)容周圍留有充足的邊距井厌,保持布局的整潔并避免內(nèi)容重疊顯示。
對(duì)于文本致讥,考慮用表格來(lái)替代集合仅仆。一般來(lái)說(shuō),在滾動(dòng)列表中的文字信息更易于閱讀和理解垢袱。
請(qǐng)謹(jǐn)慎地對(duì)待布局的動(dòng)態(tài)變化墓拜。集合的布局可以隨時(shí)被改變。如果你在用戶查看視圖或是與之交互時(shí)讓它發(fā)生了動(dòng)態(tài)的變化请契,請(qǐng)確保變化是有意義的并且易于跟蹤咳榜。沒(méi)有目的的布局變化會(huì)讓你的app看起來(lái)不可預(yù)知并且難用。如果因?yàn)椴季肿兓叮鴮?dǎo)致用戶丟失了當(dāng)前關(guān)注的焦點(diǎn)或是瀏覽的內(nèi)容涌韩,那么他們很可能會(huì)覺(jué)得自己無(wú)法再控制這個(gè)app了。
了解開發(fā)細(xì)節(jié)氯夷,請(qǐng)參閱UICollectionView臣樱。
7.5 圖片視圖(Image Views)
圖片視圖在透明或不透明的背景上展示一張圖片或是一組圖片的動(dòng)態(tài)序列。在圖片視圖中腮考,圖片可以被拉伸雇毫、縮放、根據(jù)屏幕調(diào)整大小踩蔚,或是固定在特定位置棚放。默認(rèn)情況下圖片視圖是不可交互的。
可能時(shí)馅闽,確保一個(gè)圖片視圖內(nèi)的所有圖片都尺寸一致飘蚯。如果你的圖片大小不一馍迄,圖片視圖就要逐一調(diào)整尺寸。使用尺寸一致的圖片比使用不同尺寸的圖片更有效率局骤。若是使用已縮放好的且無(wú)需額外調(diào)整的圖片就更加高效柬姚。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIImageView庄涡。
Note
模板圖片(template image)會(huì)丟棄圖片本身的色彩量承,而采用圖片視圖使用的色調(diào)。請(qǐng)參閱UIImage中的UIImageRenderingModeAlwaysTemplate穴店。
7.6 地圖(Maps)
地圖視圖允許你在app內(nèi)展示地理數(shù)據(jù)撕捍,并且支持原生地圖應(yīng)用的大部分功能。地圖視圖可以展示標(biāo)準(zhǔn)地圖泣洞、衛(wèi)星地圖或是兩者兼有忧风。它可以含有定位標(biāo)簽(大頭針)和疊加圖層,并且支持縮放和平移球凰。
一般來(lái)說(shuō)狮腿,保持你的地圖是可交互的。用戶習(xí)慣了使用手勢(shì)與原生的地圖應(yīng)用交互呕诉,并且希望在你的地圖里也能以相同的方式交互缘厢。
使用合理的標(biāo)簽(大頭針)顏色。大頭針代表著地圖上你感興趣的點(diǎn)甩挫。用戶已經(jīng)熟悉了原生地圖應(yīng)用中的標(biāo)準(zhǔn)大頭針顏色贴硫。避免在你的app中對(duì)這些顏色有不同的定義。使用紅色表示重點(diǎn)伊者,綠色表示起點(diǎn)英遭,紫色表示用戶指定的位置。
了解開發(fā)細(xì)節(jié)亦渗,請(qǐng)參閱MapKit挖诸。
7.7 頁(yè)面(Pages)
頁(yè)面視圖控制器提供了在多頁(yè)面內(nèi)容間(比如在文檔中、書本法精、筆記本或是日歷中)實(shí)現(xiàn)線性導(dǎo)航的方式多律。頁(yè)面視圖控制器通過(guò)滾動(dòng)或翻頁(yè)兩種樣式來(lái)處理導(dǎo)航時(shí)頁(yè)面的過(guò)渡。滾動(dòng)過(guò)渡沒(méi)有特定的外觀亿虽;頁(yè)面流暢地從當(dāng)前頁(yè)滾動(dòng)至下一頁(yè)菱涤。翻頁(yè)過(guò)渡會(huì)在你橫掃屏幕時(shí)讓頁(yè)面翻卷過(guò)去苞也,就好像在現(xiàn)實(shí)中里翻書頁(yè)一樣洛勉。
如果合適的話,設(shè)計(jì)一種非線性的導(dǎo)航方式如迟。使用頁(yè)面視圖控制器時(shí)收毫,頁(yè)面只能按次序變換攻走,你無(wú)法在不相鄰的頁(yè)面間跳轉(zhuǎn)。如果用戶于需要在你的app中不按次序?yàn)g覽頁(yè)面此再,請(qǐng)?jiān)O(shè)計(jì)一種滿足該功能的自定義控件昔搂。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIPageViewController松蒜。
7.8 浮出層(Popovers)
浮出層是一個(gè)當(dāng)你點(diǎn)擊某控件或某塊區(qū)域時(shí)缀雳,會(huì)在屏幕內(nèi)其它內(nèi)容上方出現(xiàn)的暫時(shí)視圖横辆。通常來(lái)說(shuō),浮出層包含一個(gè)指向其出現(xiàn)位置的箭頭逛裤。浮出層最適合用于大屏幕,并且可以包含任何一種元素猴抹,比如導(dǎo)航欄带族、工具欄、標(biāo)簽欄蟀给、表格蝙砌、集合、圖片跋理、地圖以及自定義視圖择克。當(dāng)浮出層出現(xiàn)時(shí),通常就無(wú)法再與其它視圖進(jìn)行交互前普,除非浮出層被關(guān)閉祠饺。利用浮出層來(lái)展示與當(dāng)前屏幕內(nèi)容相關(guān)的選項(xiàng)或信息。比如汁政,非常多的iPad應(yīng)用會(huì)在你點(diǎn)擊分享按鈕后彈出浮出層來(lái)展示分享選項(xiàng)道偷。
只在確認(rèn)和引導(dǎo)時(shí)使用關(guān)閉按鈕。諸如“取消”或“完成“之類的關(guān)閉按鈕记劈,若是能清晰表明操作結(jié)果(比如勺鸦,在保存或未保存狀態(tài)下退出),那么就它就有存在的價(jià)值目木。一般來(lái)說(shuō)换途,當(dāng)浮出層不再有必要存在時(shí),它應(yīng)該自動(dòng)關(guān)閉刽射。在大多數(shù)情況下军拟,當(dāng)用戶點(diǎn)擊浮出層外部區(qū)域或是選擇了浮出層內(nèi)的某項(xiàng)后,浮出層應(yīng)該關(guān)閉誓禁。如果用戶能在浮出層進(jìn)行多選懈息,那么只有在用戶明確選擇關(guān)閉它或是點(diǎn)擊了浮層的外部區(qū)域時(shí),它才會(huì)消失摹恰。
總是在自動(dòng)關(guān)閉浮出層的同時(shí)保存用戶輸入辫继。用戶很容易就會(huì)因誤點(diǎn)屏幕其它區(qū)域而將浮出層關(guān)閉怒见。只有在用戶明確點(diǎn)擊“”取消“”按鈕的情況下才可以丟棄他們的輸入。
在屏幕上的合適位置放置浮出層姑宽。浮出層的箭頭應(yīng)該盡可能地指向?qū)⒏雍舫龅脑厍菜!S捎诟〕鰧訜o(wú)法在屏幕中被拖動(dòng),所以它不應(yīng)該遮擋住用戶在使用浮出層時(shí)可能會(huì)需要查看的重要內(nèi)容炮车。浮出層也不應(yīng)該遮擋住觸發(fā)它的元素舵变。
同一時(shí)間只展示一個(gè)浮出層。同時(shí)展示多個(gè)浮層會(huì)導(dǎo)致界面雜亂無(wú)章瘦穆,并讓用戶感到困惑棋傍。永遠(yuǎn)都不要通過(guò)一個(gè)浮出層觸發(fā)另一個(gè)浮出層的方式,在屏幕上展示并列或堆疊的多個(gè)浮層难审。如果你需要展示一個(gè)新的浮層瘫拣,請(qǐng)關(guān)閉當(dāng)前的浮層。
不要在浮出層上展示其它的視圖告喊。除了警告框麸拄,任何其它視圖都不應(yīng)該出現(xiàn)在浮出層之上。
可能時(shí)黔姜,讓用戶通過(guò)一次點(diǎn)擊就可關(guān)閉當(dāng)前浮層并且打開新浮層拢切。當(dāng)欄上有多個(gè)不同的按鈕且每個(gè)會(huì)呼出一個(gè)浮出層時(shí),尤其應(yīng)當(dāng)考慮避免不必要的點(diǎn)擊次數(shù)秆吵。
避免設(shè)計(jì)過(guò)大的浮出層淮椰。浮出層不應(yīng)該占據(jù)整個(gè)屏幕。設(shè)計(jì)一個(gè)尺寸足以展示其內(nèi)容的浮出層纳寂,并且指向呼出它的地方主穗。請(qǐng)注意系統(tǒng)可能會(huì)調(diào)整浮出層的尺寸以保證其在屏幕上完美展現(xiàn)。
確保自定義浮出層看起來(lái)還是一個(gè)是浮出層毙芜。雖然你可以自定義浮出層的大部分視覺(jué)外觀忽媒,但是避免創(chuàng)造一個(gè)用戶可能辨認(rèn)不出是浮出層的設(shè)計(jì)。含有標(biāo)準(zhǔn)控件和視圖的浮出層最容易被用戶接受腋粥。
當(dāng)浮出層的尺寸變動(dòng)時(shí)提供流暢的過(guò)渡動(dòng)畫晦雨。有些浮出層會(huì)為相同的信息同時(shí)提供精簡(jiǎn)和拓展視圖。如果你要調(diào)整浮出層的尺寸隘冲,請(qǐng)使用轉(zhuǎn)場(chǎng)動(dòng)畫以避免給用戶造成新浮層取代舊浮層的印象闹瞧。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱UIPopoverPresentationController展辞。
7.9 滾動(dòng)視圖(Scroll Views)
滾動(dòng)視圖讓用戶能夠?yàn)g覽超出屏幕可見范圍的內(nèi)容奥邮,比如文檔中的文本或是一個(gè)集合的圖片。當(dāng)用戶輕掃纵竖、滑動(dòng)漠烧、拖曳、輕擊以及捏合時(shí)靡砌,滾動(dòng)視圖會(huì)遵循用戶的手勢(shì)已脓,以一種自然的方式顯示或是縮放內(nèi)容。滾動(dòng)視圖本身沒(méi)有外觀通殃,但是在用戶與之交互時(shí)會(huì)顯示一個(gè)暫時(shí)性的滾動(dòng)指示器( scrolling indicator)度液。滾動(dòng)視圖也可以被設(shè)置為分頁(yè)模式,此時(shí)滾動(dòng)手勢(shì)會(huì)展開一個(gè)全新的頁(yè)面画舌,而不是在當(dāng)前頁(yè)面來(lái)回移動(dòng)堕担。
合理地支持縮放操作。如果你的app需要曲聂,可以讓用戶通過(guò)捏合或者雙擊來(lái)縮放霹购。當(dāng)你允許縮放時(shí),請(qǐng)?jiān)O(shè)置有意義的最大和最小比值朋腋。比如齐疙,對(duì)一個(gè)文本不斷放大直到其填充屏幕的行為可能在大部分的app中毫無(wú)意義。
當(dāng)滾動(dòng)視圖處于分頁(yè)模式時(shí)旭咽,考慮顯示頁(yè)面控件元素贞奋。頁(yè)面控件表明了分頁(yè)、分屏或者分塊內(nèi)容的可得總量穷绵,并且指明了當(dāng)前顯示的是哪一個(gè)轿塔。如果你在滾動(dòng)視圖中展示了頁(yè)面控件,請(qǐng)禁用處在同軸的滾動(dòng)指示器以避免混淆仲墨。了解更多指導(dǎo)勾缭,請(qǐng)參閱Page Control。
不要在一個(gè)滾動(dòng)視圖內(nèi)放置另一個(gè)滾動(dòng)視圖目养。這么做會(huì)產(chǎn)生一個(gè)難以控制且不可預(yù)知的界面漫拭。
一般而言,同一時(shí)間只展示一個(gè)滾動(dòng)視圖混稽。在滾動(dòng)視圖內(nèi)采驻,用戶常會(huì)作出幅度很大的輕掃手勢(shì),這樣一來(lái)匈勋,就很難避免和同屏內(nèi)相鄰的滾動(dòng)視圖發(fā)生交互礼旅。如果你需要在一屏內(nèi)放置兩個(gè)滾動(dòng)視圖,考慮讓他們?cè)诓煌姆较驖L動(dòng)洽洁,這樣一個(gè)手勢(shì)就不太可能同時(shí)作用于兩個(gè)視圖痘系。比如,當(dāng)iPhone處于豎屏模式時(shí)饿自,“股市”app會(huì)在水平滑動(dòng)的公司詳情視圖上方展示垂直滾動(dòng)的股票報(bào)價(jià)列表汰翠。
了解開發(fā)細(xì)節(jié)龄坪,請(qǐng)參閱UIScrollView。
7.10 分屏視圖(Split Views)
分屏視圖用于展示兩塊相鄰窗格的內(nèi)容复唤,主窗格上的內(nèi)容保持不變健田,而次窗格會(huì)展示相關(guān)的信息。每一個(gè)窗格都能包含任意種類的元素佛纫,包括導(dǎo)航欄妓局、工具欄、標(biāo)簽欄呈宇、表格好爬、集合、圖片甥啄、地圖以及自定義視圖存炮。分屏視圖一般用于展示可分類內(nèi)容:主窗格展示一列類別目錄,次窗格展示經(jīng)選中類目篩選后的結(jié)果蜈漓。如果你的app需要僵蛛,主窗格可以覆蓋在次窗格上,并且在不需要的時(shí)候被隱藏至屏幕外迎变。這點(diǎn)在設(shè)備處于豎屏模式時(shí)尤為重要充尉,因?yàn)樗鼮闉g覽次窗格上的內(nèi)容提供了更多的空間。
選擇一個(gè)適用于你的內(nèi)容的分屏視圖布局衣形。默認(rèn)的分屏視圖分別將1/3和2/3的空間分配給主窗格和次窗格驼侠。但是屏幕也可以被平分為兩半。根據(jù)你的內(nèi)容來(lái)選擇合適的分屏谆吴,并保證兩個(gè)窗格不會(huì)看起來(lái)不平衡倒源。避免設(shè)計(jì)一個(gè)比主窗格還窄的次窗格。
保持主窗格里被激活的選項(xiàng)高亮句狼。盡管次窗格的內(nèi)容會(huì)變化笋熬,它應(yīng)該永遠(yuǎn)與主窗格里清晰易辨的選中項(xiàng)相對(duì)應(yīng)。這樣有助于用戶理解主次窗格之間的關(guān)系腻菇。
一般地胳螟,限制導(dǎo)航于分屏視圖的一側(cè)。在分屏視圖的兩個(gè)窗格都放置導(dǎo)航會(huì)讓用戶很難保持方向感筹吐,并且會(huì)難以明白兩個(gè)窗格間的關(guān)系糖耸。
為重新呼出被隱藏的主窗格提供多種方式。在一些主窗格可能會(huì)離開屏幕的布局中丘薛,請(qǐng)確保能提供提供一個(gè)按鈕——一般在導(dǎo)航欄上——用于重新呼出主窗格嘉竟。除非你的app已將滑動(dòng)手勢(shì)來(lái)于執(zhí)行其它功能,否則請(qǐng)?jiān)试S用戶也能通過(guò)從屏幕邊緣輕掃(swipe)來(lái)呼出主窗格。
了解開發(fā)細(xì)節(jié)舍扰,請(qǐng)參閱UISplitViewController倦蚪。
7.11 表格(Tables)
表格通過(guò)一個(gè)可以滾動(dòng)的、單欄的行列表來(lái)呈現(xiàn)數(shù)據(jù)边苹,這個(gè)行列表可以被分成不同的段落或群組陵且。使用表格以列表的形式來(lái)整齊高效地展示大量或少數(shù)的信息。一般來(lái)說(shuō)勾给,表格最最適合于基于文本的內(nèi)容滩报,并且通常在分屏視圖的一側(cè)作為導(dǎo)航出現(xiàn)锅知,并伴有顯示在另一側(cè)的相關(guān)內(nèi)容播急。請(qǐng)參閱“分屏視圖Split Views”。
iOS采用兩種類型的表格:平鋪型(plain)和分組型(grouped)售睹。
平鋪型桩警。行列表可以被分為幾個(gè)帶有標(biāo)簽的段落,在表格右邊界的還可以有一條縱向索引昌妹。頁(yè)眉可以出現(xiàn)在每個(gè)段落的第一項(xiàng)之前捶枢,頁(yè)腳可以出現(xiàn)在最后一項(xiàng)之后。
分組型飞崖。行列表以分組的形式展示烂叔,常伴有頁(yè)眉和頁(yè)腳。這種類型的表格最起碼含有一個(gè)分組固歪,且每個(gè)分組最少含有一行蒜鸡。分組型表格不含有索引。
考慮表格的寬度牢裳。過(guò)窄的表格會(huì)造成文本截?cái)嗪椭丿B逢防,導(dǎo)致用戶難以在較遠(yuǎn)距離快速閱讀和瀏覽。過(guò)寬的表格也不易于閱讀和瀏覽蒲讯,還可能會(huì)讓內(nèi)容缺少空白(譯者注:填滿文本的寬表格)忘朝。
一開始就快速顯示表格內(nèi)容。不要等到全部表格內(nèi)容加載完后判帮,才向用戶展示局嘁。應(yīng)該先立即填充表格上的文本數(shù)據(jù),然后當(dāng)較為復(fù)雜的數(shù)據(jù)加載完成時(shí)再展示它們——比如圖片晦墙。這個(gè)技巧讓用戶立即獲得有用的信息导狡,并提升了你的app在用戶認(rèn)知中的響應(yīng)性。在某些情況下偎痛,在新數(shù)據(jù)到達(dá)前展示過(guò)時(shí)的老數(shù)據(jù)也能行得通旱捧。
加載內(nèi)容時(shí)告知進(jìn)度。如果一個(gè)表格的數(shù)據(jù)需要一定時(shí)間來(lái)加載,可以展示一個(gè)進(jìn)度條或者緩沖圖標(biāo)(spinning activity indicator)來(lái)告知用戶你的app仍在加載中枚赡。
保持更新內(nèi)容氓癌。考慮定時(shí)更新你的表格內(nèi)容以反映最新數(shù)據(jù)。但是不要更改滾動(dòng)頁(yè)面的定位贫橙。反之贪婉,在表格的開頭或是末尾添加新的內(nèi)容,并在它們準(zhǔn)備就緒時(shí)允許用戶滑動(dòng)至新內(nèi)容卢肃。一些apps會(huì)在新數(shù)據(jù)被添加時(shí)顯示一個(gè)標(biāo)志(indicator)疲迂,并提供一個(gè)能夠直接跳轉(zhuǎn)至新內(nèi)容的控件。在頁(yè)面中包含一個(gè)刷新控件也是個(gè)好主意莫湘,這樣用戶就可以在任意時(shí)刻手動(dòng)執(zhí)行刷新操作尤蒿。請(qǐng)參閱“內(nèi)容刷新控件Refresh Content Controls”。
避免在含有右對(duì)齊元素的表格行中包含索引幅垮。索引是通過(guò)大幅度的滑動(dòng)手勢(shì)來(lái)控制的腰池。如果其它可交互元素在它附近,比如展開按鈕(disclosure indicators)忙芒,那么就很難辨別用戶手勢(shì)的意圖示弓,并且很可能會(huì)激活錯(cuò)誤的元素。
了解開發(fā)細(xì)節(jié)呵萨,請(qǐng)參閱UITableView奏属。
表格行
你使用標(biāo)準(zhǔn)的表格單元格樣式來(lái)決定如何在表格行中展示內(nèi)容。
默認(rèn)型(Default)潮峦。行左端可以有圖片囱皿,并跟隨左對(duì)齊的標(biāo)題。該樣式適用于展示無(wú)需補(bǔ)充信息的項(xiàng)目跑杭。了解開發(fā)細(xì)節(jié)铆帽,請(qǐng)參閱UITableViewCell中的UITableViewCellStyleDefault?constant。
副標(biāo)題型(Subtitle)德谅。一行左對(duì)齊的標(biāo)題和下一行左對(duì)齊的副標(biāo)題爹橱。這種樣式適用于行和行視覺(jué)上相似的表格。額外的副標(biāo)題幫助區(qū)分行與行窄做。了解開發(fā)細(xì)節(jié)愧驱,請(qǐng)參閱UITableViewCell中的UITableViewCellStyleSubtitle?constant。
Value 1椭盏。左對(duì)齊的標(biāo)題和同處一行的右對(duì)齊且顏色較淺的副標(biāo)題组砚。了解開發(fā)細(xì)節(jié),請(qǐng)參閱UITableViewCell中UITableViewCellStyleValue1?constant掏颊。
Value 2糟红。右對(duì)齊的標(biāo)題艾帐,跟隨著同處一行的左對(duì)齊且顏色較淺的副標(biāo)題。了解開發(fā)細(xì)節(jié)盆偿,請(qǐng)參閱UITableViewCell中的UITableViewCellStyleValue2constant柒爸。
所有標(biāo)準(zhǔn)表格單元格樣式還可以含有圖形元素,比如一個(gè)選中標(biāo)記或關(guān)閉圖標(biāo)事扭。然而毫無(wú)疑問(wèn)捎稚,添加圖形元素會(huì)減少標(biāo)題和副標(biāo)題的可用空間。
保持文本的簡(jiǎn)練以避免被截?cái)唷?/b>被刪減的單次和詞組不容易被瀏覽和理解求橄。無(wú)論使用哪種表格單元格樣式今野,文本截?cái)喽际亲詣?dòng)的,但是這個(gè)問(wèn)題的嚴(yán)重性由不同的單元格樣式和不同的截?cái)辔恢脹Q定罐农。
考慮為刪除按鈕使用自定義標(biāo)題条霜。對(duì)于支持刪除功能的行,如果有助于用戶理解啃匿,可以將按鈕上系統(tǒng)提供的“刪除”文本換成自定義標(biāo)題蛔外。
選中時(shí)提供反饋蛆楞。用戶期望被選中行能在被點(diǎn)擊時(shí)短暫高亮溯乒。然后,用戶期待出現(xiàn)一個(gè)新的視圖或者某些元素發(fā)生改變豹爹,比如出現(xiàn)一個(gè)選中標(biāo)記裆悄,表示已經(jīng)做出了選擇。
為非標(biāo)準(zhǔn)的表格行設(shè)計(jì)一個(gè)自定義的表格單元格樣式臂聋。標(biāo)準(zhǔn)的樣式能很好地運(yùn)用于多種常見的情境中光稼,但是某些內(nèi)容或是你的整體app設(shè)計(jì)可能會(huì)需要一個(gè)高度自定義的表格外觀。學(xué)習(xí)如何創(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)地,文本視圖的內(nèi)容采用左對(duì)齊的方式隅要,并且使用黑色的系統(tǒng)字體蝴罪。如果文本視圖支持編輯,當(dāng)你在視圖內(nèi)點(diǎn)擊后會(huì)出現(xiàn)一個(gè)鍵盤步清。
保持文本清晰可讀要门。盡管你可以富有創(chuàng)意地使用多種字體、顏色甚至對(duì)齊方式,保持內(nèi)容的可讀性是最基本的要求欢搜。采用動(dòng)態(tài)文本(Dynamic Type)是個(gè)好主意询微,這樣即使用戶在他們的設(shè)備上更改了文本大小,你的文本依舊會(huì)看起來(lái)很棒狂巢。你應(yīng)該在不同的輔助功能選項(xiàng)下測(cè)試你的內(nèi)容撑毛,比如粗體文本。
展示合適的鍵盤類型唧领。iOS提供了多種不同的鍵盤類型藻雌,以便于不同類型的輸入。為了簡(jiǎn)化數(shù)據(jù)錄入斩个,在編輯文本視圖時(shí)顯示的鍵盤應(yīng)該適用于當(dāng)前域的文本類型胯杭。了解完整的可用鍵盤類型,請(qǐng)參閱UITextInputTraits中的UIKeyboardTypeconstant受啥。
了解開發(fā)細(xì)節(jié)做个,請(qǐng)參閱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ò)視圖來(lái)在信息中展示HTML內(nèi)容藤肢。
合適時(shí)啟用前進(jìn)和后退導(dǎo)航太闺。網(wǎng)絡(luò)視圖支持前進(jìn)和后退導(dǎo)航,但是這種行為被默認(rèn)禁止嘁圈。如果用戶將在你的網(wǎng)絡(luò)視圖中瀏覽多個(gè)頁(yè)面省骂,請(qǐng)啟用前進(jìn)和后退導(dǎo)航,并為這些功能提供對(duì)應(yīng)的控件最住。
避免使用網(wǎng)絡(luò)視圖來(lái)構(gòu)建一個(gè)網(wǎng)絡(luò)瀏覽器钞澳。讓用戶在不離開你的app的情況下通過(guò)網(wǎng)絡(luò)視圖暫時(shí)性地進(jìn)入一個(gè)網(wǎng)站是可以的,當(dāng)時(shí)Safari才是用戶瀏覽網(wǎng)頁(yè)的主要方式涨缚。試圖在你的app中復(fù)制Safari的功能是沒(méi)有意義且不被鼓勵(lì)的行為轧粟。
了解開發(fā)細(xì)節(jié),請(qǐng)參閱WKWebView仗岖。