iOS7人機(jī)界面指南-UI元素(上)

2 評(píng)論 4449 瀏覽 2 收藏 58 分鐘

狀態(tài)欄(Status Bar)

導(dǎo)航欄(Navigation Bar)

工具欄(Toolbar)

標(biāo)簽欄(Tab Bar)

搜索欄(Search Bar)

范圍欄(Scope Bar)

活動(dòng)視圖控制器(Activity View Controller)

集合視圖(Collection View)

容器視圖控制器 (Container View Controller)

圖片視圖(Image View)

地圖視圖(Map View)

頁(yè)面視圖控制器(Page View Controller)

滾動(dòng)視圖(Scroll View)

表格視圖(Table View)

文本視圖(Text View)

 譯者注:

1. 本次主要翻譯了iOS Human Interface Guideline的Part 4-UI Element的前半部分,包括欄(Bars)和內(nèi)容視圖(Content Views)。Part 4-UI Element的下半部分控件(Controls)、臨時(shí)視圖(Temporary Views)以及Part 5將在下次更新中放出。

2. 我們感到非常抱歉,由于蘋果文檔在不停地變化和更新,本次放出的內(nèi)容也許不能與最新版文檔相匹配,我們會(huì)在隨后進(jìn)行修正。

3. 如您在閱讀中發(fā)現(xiàn)任何疏漏,歡迎您提出寶貴的意見和建議,感謝。

重要:這是一份針對(duì)API或其它相關(guān)技術(shù)開發(fā)而準(zhǔn)備的預(yù)備文檔。盡管文檔在專業(yè)精確程度上已經(jīng)過多次審查,它仍不是最終版本。文檔僅供已注冊(cè)蘋果開發(fā)者計(jì)劃的開發(fā)者使用。蘋果提供這份文檔的目的,是幫助開發(fā)者根據(jù)文檔來規(guī)劃自身應(yīng)用的開發(fā)技術(shù)與界面設(shè)計(jì)。這些信息將可能發(fā)生變化,您的應(yīng)用也應(yīng)當(dāng)根據(jù)最新的操作系統(tǒng)與最終文檔進(jìn)行相應(yīng)的調(diào)整。該文檔可能會(huì)由于API與相關(guān)技術(shù)的發(fā)展而更新版本。

 欄(Bars)

  狀態(tài)欄(Status Bar)

狀態(tài)欄展示了關(guān)于設(shè)備及其周圍環(huán)境的重要信息。

1
  你可以將狀態(tài)欄風(fēng)格設(shè)計(jì)為全應(yīng)用統(tǒng)一,或者為應(yīng)用里不同的視圖定義不同的狀態(tài)欄風(fēng)格。你可以通過閱讀UIApplication Class ReferenceUIViewController Class Reference來分別了解更多關(guān)于UIStatusBarStyle常數(shù)和preferredStatusBarStyle屬性的內(nèi)容。

  外觀和行為

狀態(tài)欄是透明的。不管設(shè)備處于橫屏還是豎屏,狀態(tài)欄始終固定在整個(gè)屏幕的上邊緣,承載用戶所需要的如網(wǎng)絡(luò)連接,時(shí)間,電量等信息。

 指南

盡管你不會(huì)像使用其它UI元素一樣編輯狀態(tài)欄,理解它在應(yīng)用中的功能仍然很重要。

隱藏狀態(tài)欄時(shí)請(qǐng)慎重。由于狀態(tài)欄是透明的,通常情況下不需要隱藏它。始終隱藏狀態(tài)欄意味著用戶必須退出你的應(yīng)用才能知道現(xiàn)在的時(shí)間,或者了解是否當(dāng)前環(huán)境下是否有Wi-Fi連接。

在用戶全屏觀看媒體時(shí),考慮隱藏狀態(tài)欄以及所有頁(yè)面UI。當(dāng)你這么做的時(shí)候,請(qǐng)確保用戶在輕擊屏幕時(shí)即可重新喚起狀態(tài)欄以及相關(guān)的UI。而除非你有充分的理由,否則最好不要重新定義一個(gè)手勢(shì)來讓用戶喚起狀態(tài)欄,因?yàn)橛脩舨粫?huì)發(fā)現(xiàn),就算發(fā)現(xiàn)了也難以記住。

  不要?jiǎng)?chuàng)建自定義狀態(tài)欄。用戶依賴系統(tǒng)默認(rèn)狀態(tài)欄的一致性。就算你在應(yīng)用中隱藏了它,也優(yōu)于定制一個(gè)新的UI來代替它。

為你的應(yīng)用選擇配色協(xié)調(diào)的狀態(tài)欄顏色。內(nèi)容是深色的狀態(tài)欄的在淺色應(yīng)用中效果出色,而相應(yīng)的淺色狀態(tài)欄則更適用于顏色較深的應(yīng)用。

千萬千萬,避免在狀態(tài)欄后面疊加會(huì)分散注意力的內(nèi)容。尤其是,你不能讓用戶覺得輕擊狀態(tài)欄之后可以獲取內(nèi)容或激活你的應(yīng)用中的控件。

  在適當(dāng)?shù)臅r(shí)候展示網(wǎng)絡(luò)活動(dòng)指示器(network activity indicator)。這可以提醒用戶當(dāng)前遠(yuǎn)程網(wǎng)絡(luò)連接(lengthy network access)正在工作。更多詳情請(qǐng)參考本章第三節(jié)控件(Control)部分的Network Activity Indicator.

  導(dǎo)航欄(Navigation Bar)

導(dǎo)航欄能夠?qū)崿F(xiàn)在應(yīng)用不同信息層級(jí)結(jié)構(gòu)間的導(dǎo)航,有時(shí)候也可用于管理當(dāng)前屏幕內(nèi)容。

2
  導(dǎo)航欄包含在導(dǎo)航控制器(navigation controller)中,該控制器是一個(gè)用于管理自定義視圖中信息層級(jí)展示形式的編程對(duì)象。想要了解如何在代碼中定義你的導(dǎo)航欄內(nèi)容,請(qǐng)參考Navigation ControllersNavigation Bars.

  外觀和行為

導(dǎo)航欄通常位于屏幕的上方,狀態(tài)欄正下方。導(dǎo)航欄居中展示當(dāng)前屏幕或當(dāng)前視圖的標(biāo)題。當(dāng)用戶在信息層級(jí)中穿梭時(shí),也可以通過點(diǎn)擊導(dǎo)航欄中的返回按鈕,或輕掃屏幕的邊緣來回到上一層。另外,用戶可以使用導(dǎo)航欄上相應(yīng)的控件來管理當(dāng)前的屏幕內(nèi)容。

導(dǎo)航欄是半透明的,上面所有的控件都是無邊界的(borderless)。

在iPhone上,導(dǎo)航欄始終與屏幕等寬以通欄顯示,當(dāng)用戶改變屏幕方向時(shí),導(dǎo)航欄的高度也將自動(dòng)發(fā)生改變。

  指南

你可以用導(dǎo)航欄在不同視圖間提供導(dǎo)航,或在上面放置管理當(dāng)前視圖內(nèi)容的相關(guān)控件。

使用當(dāng)前視圖的標(biāo)題作為導(dǎo)航欄標(biāo)題。若覺得標(biāo)題冗余,你也可以將標(biāo)題留空。

當(dāng)用戶到達(dá)一個(gè)新的層級(jí),你需要做以下兩件事:

將導(dǎo)航欄標(biāo)題改為當(dāng)前層級(jí)的標(biāo)題

在當(dāng)前標(biāo)題左側(cè)放置返回按鈕,按鈕的標(biāo)題應(yīng)為前一層級(jí)的標(biāo)題

確保導(dǎo)航欄上的文字容易閱讀。系統(tǒng)默認(rèn)字體的可讀性最好,但合適的話,你也可以使用其它的字體。

考慮在應(yīng)用最高層級(jí)的導(dǎo)航欄中放置一個(gè)分段控件,它能夠幫助你更好地扁平信息層級(jí),也會(huì)讓用戶更容易找到所需內(nèi)容。如果在導(dǎo)航欄中使用了分段控件,請(qǐng)確保返回按鈕標(biāo)題命名的準(zhǔn)確。更多詳情請(qǐng)參考本章第三節(jié)中的Segmented Control。

即使空間充足,也應(yīng)當(dāng)避免讓過多的控件填滿你的導(dǎo)航欄。導(dǎo)航欄上應(yīng)該不多于以下三個(gè)元素:當(dāng)前視圖的標(biāo)題、返回按鈕和一個(gè)針對(duì)當(dāng)前的操作控件。相反的,當(dāng)你在導(dǎo)航欄中使用了分段控件,就不要再放標(biāo)題以及其它多余控件了。

根據(jù)控件的標(biāo)準(zhǔn)含義來選擇系統(tǒng)提供的按鈕。詳情請(qǐng)參考下文中工具欄與導(dǎo)航欄標(biāo)準(zhǔn)按鈕(Toolbar and Navigation Bar Buttons).如果想自定義導(dǎo)航欄控件,請(qǐng)參考文檔第五章中Bar Buttons Icons給出的建議。

根據(jù)你應(yīng)用的配色來定義你的導(dǎo)航欄顏色。舉個(gè)例子,你可以為導(dǎo)航欄自定義背景圖片,也可以指定它的色調(diào)與透明度。有時(shí)候使用可縮放的背景圖(resizable background image)是個(gè)好主意。想要了解更多可縮放背景圖的使用方法,請(qǐng)參考文檔第五章Creating Resizable Images.請(qǐng)?zhí)峁┻m用于iOS 7應(yīng)用的圖片高度,更多詳情請(qǐng)參考iOS 7 UI Transation Guide中的Navigation Bar部分。

確保你的導(dǎo)航欄與你的應(yīng)用的外觀和風(fēng)格是協(xié)調(diào)的。舉個(gè)例子,不要在同一個(gè)應(yīng)用中使用不透明導(dǎo)航欄和半透明工具欄。在屏幕處于同一方向時(shí),最好不要改變不同屏上導(dǎo)航欄的背景圖片、顏色和透明度。

確保你自定義的返回按鈕長(zhǎng)得像返回按鈕。用戶知道系統(tǒng)默認(rèn)的返回按鈕能幫助他們?cè)谛畔蛹?jí)中追蹤自己的路徑,如果你想重新設(shè)計(jì)它,請(qǐng)仍然使用自定義模版圖片(custom mask image),它可以在iOS7中讓這些按鈕標(biāo)題在系統(tǒng)各轉(zhuǎn)場(chǎng)中出現(xiàn)或者消失。

在iPhone上,要考慮到由于屏幕方向的變化將會(huì)導(dǎo)致導(dǎo)航欄高度自動(dòng)變化。確保你自定義的圖標(biāo)可以適應(yīng)導(dǎo)航欄高度變小的情況。不要將導(dǎo)航欄高度寫死,可以利用UIBarMetrics常數(shù)來確保圖標(biāo)的適應(yīng)性。

  工具欄(Toolbar)

工具欄上放置著用于操作當(dāng)前屏幕中各對(duì)象的控件。

3-工具欄下方
  工具欄包含在導(dǎo)航控制器(navigation controller)中,該控制器用于管理定制視圖中信息層級(jí)的展示形式。 想要了解如何在代碼中定義工具欄,請(qǐng)參考View Controller Catalog for iOS中的Displaying a Navigation ToolbarToolbar部分。

  外觀和行為

在iPhone上,工具欄始終位于屏幕底部,在iPad上則有可能出現(xiàn)在頂部。

工具欄是半透明的,欄中各項(xiàng)以等距方式排列。因?yàn)椴煌缑嫠鶎?duì)應(yīng)的操作不同,工具欄中的控件可能隨著界面的切換而進(jìn)行相應(yīng)調(diào)整。

在iPhone上,當(dāng)用戶從豎屏轉(zhuǎn)換為橫屏?xí)r,狀態(tài)欄的高度將自動(dòng)發(fā)生改變。在iPad上,工具欄的高度則不會(huì)因設(shè)備方向而發(fā)生變化。

指南

你可以在工具欄上放置可讓用戶對(duì)當(dāng)前視圖內(nèi)容進(jìn)行操作的工具。

 在工具欄里放置用戶在當(dāng)前情景下最常用的指令。你也可以在工具欄里放置分段控件以方便用戶快速到達(dá)不同視圖或模式;更多使用指南,請(qǐng)參考本章第三節(jié)——控件(Controls)中的分段控件(Segmented Control)。

如果需要在工具欄上展示3個(gè)以上的項(xiàng)目,可以使用圖標(biāo)。由于文本按鈕通常會(huì)比圖標(biāo)更占空間,所以用圖標(biāo)可以避免文字標(biāo)題們擠在一起。

保證工具欄標(biāo)題按鈕之間有足夠的間距??丶^于擁擠會(huì)讓用戶覺得它們難以區(qū)分。如果工具欄中按鈕的標(biāo)題看起來太接近,可以用UIBarButtonSystemItemFixedSpace常數(shù)來增加他們之間的間距。(更多關(guān)于這個(gè)常數(shù)的內(nèi)容可以參考UIBarButtonItem Class Reference)

在iPhone上,要考慮到由于屏幕方向的變化將會(huì)導(dǎo)致工具欄高度的自動(dòng)變化。確保你自定義的控件可以適應(yīng)橫屏模式下工具欄高度變小的情況。不要將工具欄高度寫死,可以參考UIBarMetrics?常數(shù)來確保工具欄中各項(xiàng)的適應(yīng)性。

工具欄與導(dǎo)航欄標(biāo)準(zhǔn)按鈕(Toolbar and Navigation Bar Buttons)

iOS提供了一系列用于工具欄與導(dǎo)航欄的標(biāo)準(zhǔn)按鈕。想要了解如何設(shè)計(jì)自定義圖標(biāo),請(qǐng)參考文檔第五章Bar Button Icons部分。工具欄和導(dǎo)航欄圖標(biāo)的顏色可以通過tintColor屬性來設(shè)定。

想要了解每一個(gè)按鈕所對(duì)應(yīng)的標(biāo)志名稱及其含義,請(qǐng)參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItem部分。

重要:跟所有標(biāo)準(zhǔn)按鈕和圖標(biāo)相同,應(yīng)當(dāng)根據(jù)文檔中說明的圖標(biāo)含義,而不是只憑圖標(biāo)外觀來使用這些工具欄圖標(biāo)和導(dǎo)航欄圖標(biāo)。這樣能夠保證在關(guān)聯(lián)特定意義的按鈕改變了外觀的情況下,你的應(yīng)用中的UI仍然是可用而有意義的。

4-toolbar buttons
  除了以上展示的標(biāo)準(zhǔn)按鈕之外,你還可以使用系統(tǒng)提供的編輯、取消、保存、完成、撤銷、重做等等按鈕來支持編輯或其它操作。這些按鈕的標(biāo)題即是按鈕的操作內(nèi)容。想要了解每一個(gè)按鈕的名稱及其含義,請(qǐng)參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItem.

另外,你還可以在工具欄中放置系統(tǒng)提供的信息按鈕(info button).

info button
  標(biāo)簽欄(Tab Bar)

標(biāo)簽欄用于讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換。

5-tab bars
  標(biāo)簽欄包含在標(biāo)簽欄控制器中,該控制器用于管理自定義視圖的展示形式。想要了解如何在代碼中定義標(biāo)簽欄,請(qǐng)參考Tab Bar ControllersTab Bars.

 外觀和行為

標(biāo)簽欄位于屏幕底部,并應(yīng)該保證在應(yīng)用內(nèi)任何位置都可用。標(biāo)簽欄是半透明的,展示圖標(biāo)和文字內(nèi)容,每一項(xiàng)均保持等寬。當(dāng)用戶選中某個(gè)標(biāo)簽時(shí),該標(biāo)簽呈現(xiàn)適當(dāng)?shù)母吡翣顟B(tài)。

標(biāo)簽欄是半透明的,始終與屏幕等寬以通欄顯示。因?yàn)椴煌缑嫠鶎?duì)應(yīng)的操作不不同,工具欄中的控件可能隨著界面的切換而進(jìn)行相應(yīng)調(diào)整。

在iPhone上,一個(gè)標(biāo)簽欄一次最多可承載5個(gè)標(biāo)簽;多于5個(gè)標(biāo)簽的時(shí)候,可以展示前4個(gè)標(biāo)簽,把剩余的標(biāo)簽以列表的形式收在 “更多”之中。iPad的標(biāo)簽欄則可以承載5個(gè)以上的標(biāo)簽。

你可以在標(biāo)簽上加上紅底白字,顯示數(shù)字或者省略號(hào)的小氣泡(badge),用以展示與應(yīng)用相關(guān)的信息。

標(biāo)簽欄的高度不隨著屏幕方向的改變而改變。

指南

你可以使用標(biāo)簽欄來切換對(duì)同一組數(shù)據(jù)的不同視圖模式,或者整體功能下不同的子任務(wù)。當(dāng)你使用標(biāo)簽欄時(shí),請(qǐng)遵守以下指南:

一般而言,使用標(biāo)簽欄來組織整個(gè)應(yīng)用層面的信息結(jié)構(gòu)。標(biāo)簽欄非常適合用于應(yīng)用的主界面中,因?yàn)樗梢院芎玫乇馄叫畔蛹?jí),并且同時(shí)提供多個(gè)進(jìn)入不同信息種類的入口。

不要使用標(biāo)簽來執(zhí)行對(duì)于當(dāng)前屏幕內(nèi)容的操作。如果你需要給用戶提供操作控件,請(qǐng)使用工具欄。

 即使標(biāo)簽當(dāng)前不可用,也不要把它從標(biāo)簽欄中刪除。如果某個(gè)標(biāo)簽所代表的部分功能在當(dāng)前場(chǎng)景下不可用,可以將它標(biāo)識(shí)為不可用狀態(tài),但不要?jiǎng)h除它。讓某些標(biāo)簽時(shí)而出現(xiàn)時(shí)而隱藏,會(huì)讓用戶覺得應(yīng)用UI不穩(wěn)定而且難以預(yù)測(cè)。最好的解決方式是確保每個(gè)標(biāo)簽都可用,并解釋當(dāng)前標(biāo)簽不可用的原因。舉個(gè)例子,當(dāng)用戶沒有在設(shè)備中保存任何歌曲,在系統(tǒng)音樂應(yīng)用的歌曲標(biāo)簽頁(yè)里就可以教育用戶如何去下載一首歌。

考慮在tab上加入紅色的小氣泡(Badge)以傳達(dá)信息。你可以通過添加小氣泡來告知用戶該標(biāo)簽中包含新的內(nèi)容。

根據(jù)控件的標(biāo)準(zhǔn)含義來選擇系統(tǒng)提供的圖標(biāo)。詳情請(qǐng)查看下文中的標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)(Tab Bar Icons)。如果想自定義標(biāo)簽欄圖標(biāo),請(qǐng)參考文檔第五章中Bar Buttons Icons里給出的建議。

可能的話,自定義你的標(biāo)簽欄外觀。舉個(gè)例子,只要你的圖標(biāo)是系統(tǒng)默認(rèn)的標(biāo)準(zhǔn)圖標(biāo)或遵循了系統(tǒng)模版的圖標(biāo),你都可以為你的標(biāo)簽欄以及上面的圖標(biāo)設(shè)計(jì)特有的視覺風(fēng)格。有時(shí)候使用可縮放的背景圖是個(gè)好主意,想要了解更多可縮放背景圖的使用方法,請(qǐng)參考文檔第五章Creating Resizable Images.

在iPad上,你可能會(huì)在對(duì)分視圖(split view pane)或者浮出層(popover)內(nèi)使用標(biāo)簽欄以切換或篩選視圖中的內(nèi)容。然而通常情況下,在對(duì)分視圖和浮出層底部使用分段控件效果會(huì)更好,因?yàn)橐曈X上看起來更為協(xié)調(diào)。更多詳情請(qǐng)參考文檔本章第三節(jié)——控件(Controls)中的Segmented Control.

在iPad上,避免讓過多的標(biāo)簽填滿你的標(biāo)簽欄。放置太多控件將導(dǎo)致用戶難以點(diǎn)擊,同時(shí)每添加一個(gè)標(biāo)簽,意味著你的應(yīng)用程序又復(fù)雜了一分。一般來說,在主界面(main view)和對(duì)分視圖的右窗格上來說,標(biāo)簽數(shù)量應(yīng)該控制在7個(gè)左右;而對(duì)于浮出層和對(duì)分視圖的左窗格來說,標(biāo)簽數(shù)以5個(gè)左右為宜。

在iPad上,無論橫屏還是豎屏情況下都應(yīng)展示相同數(shù)量的標(biāo)簽,以提高應(yīng)用的視覺穩(wěn)定性。豎屏視圖中我們推薦標(biāo)簽個(gè)數(shù)在7個(gè)左右,在橫屏中,你應(yīng)該將相同數(shù)量的標(biāo)簽居中展示。這個(gè)建議同樣適用于在對(duì)分視圖或者浮出層中的標(biāo)簽欄。舉個(gè)例子,如果你在豎屏模式下的一個(gè)浮層中使用了標(biāo)簽欄,那么橫屏?xí)r它應(yīng)該也能很好地展現(xiàn)在對(duì)分視圖的左窗格中。

標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)(Tab Bar Icons)

iOS提供了一系列標(biāo)簽欄標(biāo)準(zhǔn)圖標(biāo)。想要了解如何設(shè)計(jì)自定義圖標(biāo),請(qǐng)參考文檔第五章Bar Button Icons部分。標(biāo)簽欄圖標(biāo)的顏色可以通過tintColor屬性來設(shè)定。

想要了解每一個(gè)圖標(biāo)的名稱及其含義,請(qǐng)參閱UIBarItem Class Reference中的UIBarButtonSystemItem部分。

重要:跟所有標(biāo)準(zhǔn)按鈕和圖標(biāo)相同,應(yīng)當(dāng)根據(jù)文檔中說明的圖標(biāo)含義,而不是只憑圖標(biāo)外觀來使用這些圖標(biāo)。這樣能夠保證在關(guān)聯(lián)特定意義的按鈕改變了外觀的情況下,你的應(yīng)用中的UI仍然是可用而有意義的。

6-table 34-2
  搜索欄(Search Bar)

搜索欄獲取用戶鍵入的文本,用以作為搜索的關(guān)鍵字(下圖中顯示的文本為占位符,非用戶輸入文本)。

6-search bar
  想要了解更多的詳情,請(qǐng)參考Search Bars。

  外觀和行為

搜索欄的外觀類似文本框。默認(rèn)狀態(tài)下左側(cè)有搜索圖標(biāo),當(dāng)用戶點(diǎn)擊搜索欄時(shí)會(huì)自動(dòng)出現(xiàn)鍵盤;用戶輸入完后,系統(tǒng)將按照應(yīng)用程序定義的方式來處理輸入的文本。

搜索欄可能包含以下這些可選元素:

占位符文本(Placeholder text)。占位符文本通常會(huì)寫明控件的功能——如 “搜索”,或者提示用戶輸入的文本將在哪里搜索,如“Google”。

書簽按鈕(The Bookmarks button)。書簽按鈕可以讓用戶方便地找到他們需要的內(nèi)容。例如在地圖中搜索時(shí),用戶可以通過書簽按鈕快速選中書簽地址、最近搜索記錄、或聯(lián)系人。書簽按鈕只有當(dāng)搜索欄中沒有占位符或用戶輸入內(nèi)容時(shí)才會(huì)出現(xiàn),當(dāng)搜索欄中已有文本時(shí),書簽按鈕會(huì)被清楚按鈕(Clear button)所代替。

清除按鈕(The Clear button)。大多數(shù)搜索欄都會(huì)提供清除按鈕,方便用戶一鍵清空輸入內(nèi)容。一旦用戶在文本框中輸入內(nèi)容,清空按鈕就會(huì)出現(xiàn);而當(dāng)搜索框中沒有任何文本內(nèi)容時(shí),清空按鈕將被隱藏。

結(jié)果列表圖標(biāo)(The results list icon)。結(jié)果圖標(biāo)說明此次搜索有搜出結(jié)果。當(dāng)用戶點(diǎn)擊它時(shí)會(huì)出現(xiàn)用戶最近一次搜索的搜索結(jié)果。

 描述性標(biāo)題,我們稱為提示 (Prompt)。描述性標(biāo)題通常放在搜索欄上方。舉例來說,它可以是一個(gè)為搜索欄提供指引信息的短語(yǔ)。

  指南

在你的應(yīng)用中使用搜索欄而非文本框來讓用戶進(jìn)行搜索。因?yàn)槲谋究虻耐庥^不符合用戶對(duì)搜索的預(yù)期。

你可以為搜索欄指定顏色或設(shè)計(jì)背景圖片。在iOS 7里,你也可以把搜索欄放在導(dǎo)航欄中。請(qǐng)參考UISearchDisplayController

如果你決定在搜索欄里使用背景圖片,最好采用可調(diào)整尺寸的背景圖,想要了解更多可調(diào)整尺寸背景圖的使用方法,請(qǐng)參考文檔第五章中Creating Resizable Images的內(nèi)容。

  范圍欄(Scope Bar)

范圍欄只有在與搜索欄一起時(shí)才會(huì)出現(xiàn)(通常出現(xiàn)在搜索欄下方),它讓用戶可以定義搜索的范圍。

7-scope bar
  想要了解如何在代碼中定義搜索欄與范圍欄,請(qǐng)參Search Bar。

  外觀和行為

當(dāng)搜索欄出現(xiàn)時(shí),范圍欄會(huì)出現(xiàn)在它的附近。范圍欄的外觀與你所指定的搜索欄的外觀兼容。

  指南

當(dāng)用戶想在明確的分類范圍內(nèi)進(jìn)行搜索時(shí),使用范圍欄是非常有用的。然而,更好的選擇是優(yōu)化您的搜索結(jié)果,讓用戶不需要使用范圍欄對(duì)搜索結(jié)果進(jìn)行篩選,便可以找到他們所需要的內(nèi)容。

  內(nèi)容視圖(Content Views)

  活動(dòng)菜單(Activity)

每個(gè)活動(dòng)菜單表示一個(gè)系統(tǒng)提供的服務(wù)或定制服務(wù)——它可以通過訪問活動(dòng)視圖控制器(Activity view controller)來作用于某些特定的內(nèi)容。

8-activity
  想要了解如何在代碼中定義標(biāo)簽欄,請(qǐng)參考UI Activity Class Reference.

  外觀和行為

活動(dòng)菜單指的是指一種代表當(dāng)前應(yīng)用所支持服務(wù)的對(duì)象。比如說,當(dāng)用戶點(diǎn)擊分享按鈕,應(yīng)用程序?qū)⒊尸F(xiàn)活動(dòng)視圖控制器來告訴用戶當(dāng)前可以進(jìn)行什么操作。想要了解如何將活動(dòng)視圖控制器整合進(jìn)應(yīng)用中,請(qǐng)參考Activity View Controller.

每個(gè)活動(dòng)菜單都會(huì)以一個(gè)圖標(biāo)加圖標(biāo)下方文字的形式呈現(xiàn)。系統(tǒng)提供的活動(dòng)菜單可以使用以下兩種圖標(biāo)風(fēng)格的任意一種:看起來更像一個(gè)應(yīng)用圖標(biāo)的,或是看起來像工具欄標(biāo)準(zhǔn)圖標(biāo),而第三方的活動(dòng)菜單圖標(biāo)通常會(huì)選擇后一種。這兩種風(fēng)格可以從下面的活動(dòng)視圖控制器中看到。

activity
  用戶通常通過點(diǎn)擊控制器中的活動(dòng)圖標(biāo)來啟動(dòng)某樣活動(dòng)。點(diǎn)擊之后該項(xiàng)服務(wù)通常會(huì)立刻執(zhí)行,除非這項(xiàng)服務(wù)過于復(fù)雜,此時(shí)系統(tǒng)將會(huì)進(jìn)一步索取更多的信息之后才會(huì)為用戶執(zhí)行該服務(wù)。

  指南

使用活動(dòng)菜單來讓用戶執(zhí)行你的應(yīng)用所提供的服務(wù)。請(qǐng)注意,iOS本身提供了若干內(nèi)置的服務(wù),如打印,轉(zhuǎn)發(fā)到Twitter,發(fā)送信息和Airplay等等,你不需要再另外創(chuàng)建它們。

為你應(yīng)用的各種服務(wù)設(shè)計(jì)一套精簡(jiǎn)的模版圖標(biāo)(Template image)。如果想制作出好看的模版圖標(biāo),設(shè)計(jì)的時(shí)候可以遵循以下原則:

使用透明度適當(dāng)?shù)暮谏虬咨?/p>

不要使用陰影

進(jìn)行抗鋸齒處理

一個(gè)活動(dòng)模版圖大小應(yīng)該保持在70×70像素左右(高分辨率下),在區(qū)域里居中顯示。

為每一個(gè)活動(dòng)菜單設(shè)計(jì)清晰簡(jiǎn)練的文字標(biāo)題。標(biāo)題將會(huì)出現(xiàn)在活動(dòng)菜單圖標(biāo)的下方。短標(biāo)題通常效果最好,因?yàn)樗谄聊簧系娘@示效果更好并且更容易本地化。如果你的標(biāo)題文字過長(zhǎng),iOS會(huì)將縮小文本,仍然過長(zhǎng)的話則會(huì)被截?cái)唷R话愣?,最好能避免在活?dòng)標(biāo)題中提及你的公司或產(chǎn)品名稱。

活動(dòng)視圖控制器(Activity View Controller)

活動(dòng)視圖控制器是一個(gè)臨時(shí)視圖,當(dāng)中羅列了一系列可以針對(duì)頁(yè)面特定內(nèi)容的系統(tǒng)服務(wù)和自定義服務(wù)。

10-activity view controller
  想要了解如何在代碼中定義活動(dòng)視圖控制器,請(qǐng)參考UIActivityView Class Reference.

  外觀和行為

活動(dòng)視圖控制器中列出了讓用戶操作當(dāng)前內(nèi)容的一系列可配置的服務(wù)。用戶可以通過輕擊分享按鈕來查看活動(dòng)視圖控制器的內(nèi)容。

活動(dòng)視圖控制器需要配合一系列的活動(dòng)菜單來使用,每個(gè)活動(dòng)菜單代表了一個(gè)特定的服務(wù)。想要了解如何設(shè)計(jì)一個(gè)自定義活動(dòng)菜單,請(qǐng)查看上文的活動(dòng)菜單(Activity).

在iPhone和iPod Touch上,活動(dòng)視圖控制器在操作列表(action sheet)中出現(xiàn);在iPad上則會(huì)出現(xiàn)在浮出層(popover)中。

  指南

使用活動(dòng)視圖控制器來為用戶提供一系列針對(duì)當(dāng)前內(nèi)容的服務(wù)。這些服務(wù)可以是系統(tǒng)自帶的,比如復(fù)制,分享到twitter,打印等等,也可以是自定義的?;顒?dòng)視圖控制器通常用作讓用戶把他們選中的內(nèi)容復(fù)制到他們的社交媒體賬戶上。

不要?jiǎng)?chuàng)建一個(gè)自定義按鈕來觸發(fā)活動(dòng)視圖控制器。用戶更習(xí)慣點(diǎn)擊分享按鈕后使用系統(tǒng)提供的服務(wù)。你應(yīng)該學(xué)會(huì)如何更好地利用用戶這一既定習(xí)慣,而不是強(qiáng)迫他們以一種全新的方式來完成同樣的事情。

確??刂破髦械牟僮鬟m用于當(dāng)前場(chǎng)景。你可以適當(dāng)?shù)卦诨顒?dòng)視圖控制器中增減系統(tǒng)操作,或增加自定義操作。例如,如果你不希望用戶打印某張圖片,你可以把打印功能從控制器中刪除。

注意:你不能改變系統(tǒng)默認(rèn)服務(wù)在控制器中的順序。同時(shí),所有系統(tǒng)服務(wù)都應(yīng)出現(xiàn)在自定義服務(wù)之前。

  集合視圖(Collection View)

集合視圖用于管理一系列有序的項(xiàng),并以一種自定義的布局來呈現(xiàn)它們。

12-collection view
  想要了解如何在代碼中定義集合視圖,請(qǐng)參考Collection View Programming Guide for iOS.

 外觀和行為

集合視圖是可以自定義的滾動(dòng)視圖,視圖中羅列了用戶可以對(duì)內(nèi)容進(jìn)行操作的一系列項(xiàng)。用戶用手勢(shì)來與視圖中的各項(xiàng)進(jìn)行交互,也可以進(jìn)行導(dǎo)入、移動(dòng)和刪除等操作。

集合視圖的整體布局與其中各項(xiàng)的外觀樣式是由集合視圖與若干其它對(duì)象的代碼共同定義的。這些對(duì)象中,布局對(duì)象(layout object)居于首位,它是UICollectionViewLayout的標(biāo)準(zhǔn)或自定義子類,定義了這些項(xiàng)的具體位置以及視覺屬性。為了方便使用,UIKit提供了UICollectionViewLayout object,它為一組網(wǎng)格排列的項(xiàng)定義了可調(diào)整的線性排序。

在集合視圖中,可選補(bǔ)充視圖(optional supplementary views)可以在視覺上區(qū)分各項(xiàng)的子集。集合視圖也支持裝飾視圖,也就是說你可以自定義它的背景和外觀。

當(dāng)用戶在集合視圖中導(dǎo)入、移動(dòng)或者刪除項(xiàng)的時(shí)候,會(huì)出現(xiàn)系統(tǒng)默認(rèn)的動(dòng)畫效果。集合視圖同樣支持開發(fā)者額外定義手勢(shì)識(shí)別來執(zhí)行自定義操作。默認(rèn)情況下,集合視圖可以識(shí)別輕擊(tap)某項(xiàng)以選中,和長(zhǎng)按(touch-and-hold)某項(xiàng)進(jìn)行編輯。

在iOS 7里,集合視圖支持開發(fā)者自定義各個(gè)布局間的轉(zhuǎn)場(chǎng)動(dòng)畫。更多的詳情可以參考UICollectionViewTransitionLayout Class Reference.

指南

使用集合視圖來讓用戶查看和操作一系列不適合以列表形式呈現(xiàn)的項(xiàng)。由于集合視圖的布局不是一個(gè)嚴(yán)格的線性布局,因此尤其適合用來展示一些尺寸不一致的項(xiàng)。

集合視圖支持廣泛的自定義,因此我們要盡量避免把心思都放在進(jìn)行全新的設(shè)計(jì)上。集合視圖是用來幫助用戶更好地完成任務(wù)的,視圖本身并不是用戶體驗(yàn)的焦點(diǎn)所在。

以下指南可以幫助你設(shè)計(jì)出用戶體驗(yàn)更好的集合視圖:

可以使用表格視圖(Table View)的時(shí)候,不要使用集合視圖。有時(shí)候用戶會(huì)覺得以列表呈現(xiàn)的信息更容易閱讀和理解,例如將文本信息放在滾動(dòng)列表中滾動(dòng)列表中的時(shí)候,用戶閱讀和處理起來會(huì)更為簡(jiǎn)單和高效。

 讓視圖中的項(xiàng)更容易點(diǎn)擊。如果用戶很難點(diǎn)中集合視圖中的項(xiàng),他們是不會(huì)愿意用你的應(yīng)用的。跟所有用戶可以點(diǎn)擊的UI對(duì)象一樣,請(qǐng)確保你的集合視圖中每一個(gè)項(xiàng)的最小點(diǎn)擊區(qū)域有44×44pt,尤其是在iPhone上。

當(dāng)你要讓整個(gè)布局進(jìn)行動(dòng)態(tài)變化時(shí),請(qǐng)務(wù)必謹(jǐn)慎。集合視圖允許你在用戶瀏覽和操作項(xiàng)的時(shí)候調(diào)整視圖的布局。但當(dāng)你決定調(diào)整它的時(shí)候,請(qǐng)確保這個(gè)動(dòng)態(tài)變化是有意義并且容易理解的。沒有明確目的而貿(mào)然改變集合視圖的布局會(huì)讓用戶對(duì)應(yīng)用留下難用、不符合預(yù)期等負(fù)面的印象。更有甚者,如果用戶此時(shí)關(guān)注的項(xiàng)在變化中消失了,用戶會(huì)覺得這個(gè)應(yīng)用超出了他們的控制能力。

容器視圖控制器 (Container View Controller)

容器視圖控制器采用自定義的方式來管理和呈現(xiàn)它的視圖控制器或一系列子視圖。系統(tǒng)定義的容器視圖控制器包括標(biāo)簽欄視圖控制器(Tab bar view controller)?、導(dǎo)航視圖控制器(navigation view controller)和對(duì)分視圖控制器(split view controller).

想要了解如何在代碼中定義容器視圖控制器,請(qǐng)參考UIViewController Class Reference.

  外觀和行為

容器視圖控制器不存在任何預(yù)先定義好的外觀或者行為。如果你在自定義容器視圖控制器對(duì)象的時(shí)候把UIViewController歸為子類,你可以自己規(guī)定它里頭應(yīng)該包含多少子類,以及它們將如何展現(xiàn)出來。

  指南

用容器視圖控制器來呈現(xiàn)內(nèi)容,用戶可以通過控制器來以自定義的方式進(jìn)行導(dǎo)航。

先問問你自己是不是必須用到容器視圖控制器。用戶會(huì)更習(xí)慣諸如對(duì)分視圖、或者是標(biāo)簽欄視圖這類他們所熟知的東西。你必須確保你設(shè)計(jì)的控制器的優(yōu)點(diǎn)不會(huì)由于用戶不熟悉、不認(rèn)識(shí)、不會(huì)用而白費(fèi)功夫。

確保你的容器內(nèi)容控制器在橫屏與豎屏模式都可用。你的容器視圖控制器無論在橫屏還是豎屏中,體驗(yàn)都應(yīng)該是一致的。

一般來說,避免太過花哨的轉(zhuǎn)場(chǎng)動(dòng)畫。如果你采用了故事板(storyboard)的設(shè)計(jì)方法來設(shè)計(jì)你的視圖內(nèi)容控制器,你往往自然而然地會(huì)為它自定義一些動(dòng)畫。但絕大多數(shù)情況下,這些花哨的轉(zhuǎn)場(chǎng)動(dòng)畫會(huì)讓用戶分心,讓他們忘記了當(dāng)前要做的事,還可能降低你的應(yīng)用整體的美感。

圖片視圖(Image View)

圖片視圖用以展示一張單獨(dú)的圖片,或者一系列動(dòng)態(tài)圖片。

想要了解如何在代碼中定義圖片視圖,請(qǐng)參考image views.

  外觀和行為

圖片視圖不存在任何預(yù)先定義好的外觀,同時(shí)在默認(rèn)狀態(tài)下它不支持用戶的交互行為。圖片視圖可以檢測(cè)圖片本身及其父視圖(parent view)的屬性,并決定這個(gè)圖片是否應(yīng)該被拉伸、縮放、調(diào)整到適合屏幕的大小,或者固定在一個(gè)特定的位置。

在iOS 7里,包含了模版圖片(template image)的圖片視圖會(huì)把當(dāng)前的色調(diào)(tint color)應(yīng)用到圖片上。

  指南

請(qǐng)務(wù)必確保圖片視圖中的每一張圖片都保持相同的尺寸和比例。如果你的圖片尺寸各不相同,圖片視圖將會(huì)逐一對(duì)它們進(jìn)行調(diào)整;而當(dāng)你的圖片比例不一,渲染的時(shí)候很可能會(huì)出錯(cuò)。

  地圖視圖(Map View)

地圖視圖呈現(xiàn)地理數(shù)據(jù),同時(shí)支持系統(tǒng)內(nèi)置地圖應(yīng)用的大部分功能(如下圖所示)。

13-map view
  想要了解如何在代碼中定義地圖視圖,請(qǐng)參考Map Kit Framework Reference.

  外觀和行為

地圖視圖通常以標(biāo)準(zhǔn)地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來展示地理區(qū)域。地圖樣式還會(huì)標(biāo)注單一的地點(diǎn)(annotations),描繪路徑和二維區(qū)域的輪廓。

用戶可以縮放和移動(dòng)地圖視圖——除非你在應(yīng)用中禁用了這些動(dòng)作——你也可以在編程時(shí)自定義地圖視圖的縮放和移動(dòng)。

 指南

利用地圖視圖可以給用戶提供一個(gè)可交互的地理區(qū)域視圖。如果你在開發(fā)一個(gè)導(dǎo)航類應(yīng)用(routing app),可以使用地圖視圖來展示你給用戶的路徑。

一般來說,允許用戶在視圖中進(jìn)行交互行為。用戶習(xí)慣了在系統(tǒng)內(nèi)置地圖中進(jìn)行交互,因此他們會(huì)有預(yù)期,能在你所提供的地圖中進(jìn)行類似的行為。

使用標(biāo)準(zhǔn)的地圖標(biāo)注顏色。地圖上標(biāo)注了一系列地點(diǎn)。因?yàn)橛脩袅?xí)慣了內(nèi)置地圖的各個(gè)標(biāo)注的顏色,所以最好避免在你的應(yīng)用中重新定義這些顏色的含義。定義顏色時(shí),請(qǐng)遵循以下這些標(biāo)準(zhǔn):

紅色——表示目的地

綠色——表示起點(diǎn)

紫色——表示用戶指定的地點(diǎn)(User-Specified Point)

 頁(yè)面視圖控制器(Page View Controller)

頁(yè)面視圖控制器通過滾動(dòng)(Scrolling)或翻頁(yè) (Page-curl transition style)來處理長(zhǎng)度超過一頁(yè)的內(nèi)容。

14-page view controller
  想要了解如何在代碼中定義頁(yè)面視圖控制器,請(qǐng)參考Page View Controller.

  外觀和行為

帶滾動(dòng)條的頁(yè)面視圖控制器沒有默認(rèn)的外觀。帶翻頁(yè)效果的控制器可以在兩頁(yè)中間增加書脊(book spine)的效果——當(dāng)用戶翻頁(yè)時(shí),它看起來就像一本真實(shí)的書在翻頁(yè)一樣。

頁(yè)面內(nèi)容控制器可以根據(jù)指定的切換效果來模擬出頁(yè)面切換時(shí)的動(dòng)畫。使用滾動(dòng)條效果的時(shí)候,當(dāng)前頁(yè)面將滾動(dòng)到下一頁(yè);而使用翻頁(yè)效果時(shí),頁(yè)面上會(huì)出現(xiàn)一個(gè)模擬實(shí)體書或筆記本翻頁(yè)效果的翻頁(yè)動(dòng)畫。

 指南

使用頁(yè)面視圖控制器來展示那些線性的內(nèi)容——例如一個(gè)故事的文本,或者是一些可以被自然地拆分成塊的內(nèi)容——比如說,日歷。

頁(yè)面視圖控制器讓用戶從一頁(yè)移動(dòng)到前一頁(yè)或者后一頁(yè),而并不支持用戶在并不相鄰的頁(yè)面間快速切換。如果你希望在頁(yè)面視圖控制器中展示一些非線性的內(nèi)容——比如說字典,或者書籍的目錄——那么你就需要自定義一種方式,讓用戶可以隨意地到達(dá)不同的內(nèi)容區(qū)塊。

  滾動(dòng)視圖(Scroll View)

滾動(dòng)視圖方便用戶瀏覽尺寸超越滾動(dòng)視圖邊界的圖片(下圖中地球的圖片無論是長(zhǎng)度還是寬度都超過了)。

想要了解如何在代碼中定義滾動(dòng)視圖,請(qǐng)參考“Scroll Views”。

15-scroll view
  外觀和行為

滾動(dòng)視圖剛出現(xiàn)或者當(dāng)用戶在對(duì)它進(jìn)行操作的時(shí)候——縱向和橫向的滾動(dòng)指示器會(huì)短暫地閃爍,以提示用戶在當(dāng)前視圖外仍有更多內(nèi)容。跟瞬態(tài)滾動(dòng)條(transient scroll indicator)不一樣,滾動(dòng)視圖沒有預(yù)定義的外觀。

滾動(dòng)視圖的響應(yīng)速度和對(duì)各個(gè)操作手勢(shì)的識(shí)別都應(yīng)當(dāng)讓用戶感到自然。當(dāng)用戶在視圖中拖拽內(nèi)容,內(nèi)容隨之滾動(dòng);當(dāng)用戶輕掃屏幕時(shí),內(nèi)容將快速滾動(dòng)——直到用戶再次觸摸屏幕或內(nèi)容已經(jīng)到達(dá)底部時(shí)停止。滾動(dòng)視圖同樣可以應(yīng)用在頁(yè)模式(paging mode)中,在此模式下用戶可以通過拖拽和輕擊等手勢(shì)來瀏覽一頁(yè)的內(nèi)容。

  指南

你可以使用滾動(dòng)視圖來允許用戶在固定的空間內(nèi)瀏覽大尺寸或大量的視圖。因?yàn)樵趇OS中用戶常常會(huì)用到滾動(dòng)視圖,所以請(qǐng)確保你的應(yīng)用中滾動(dòng)視圖的操作與他們的預(yù)期相同。

 適當(dāng)?shù)刂С挚s放操作。如果放大和縮小對(duì)于當(dāng)前內(nèi)容是有用的話,你可以支持用戶通過捏或者雙擊來對(duì)當(dāng)前視圖進(jìn)行縮放。而若是支持了縮放操作的話,你還應(yīng)當(dāng)設(shè)定在當(dāng)前情景下允許縮放的最大值和最小值。如果你允許一個(gè)字符被放大到充滿整個(gè)屏幕的話,用戶會(huì)很難閱讀當(dāng)前內(nèi)容。

在頁(yè)模式滾動(dòng)視圖中,可以考慮使用頁(yè)面控件(page control)。當(dāng)你想要展示分頁(yè)、分屏或者分塊的內(nèi)容,最好是讓用戶知道當(dāng)前內(nèi)容一共有多少塊,以及他們當(dāng)前瀏覽的是第幾個(gè)——頁(yè)面控件以圓點(diǎn)的形式來把這個(gè)信息告訴用戶。同時(shí)由于頁(yè)面控件被廣泛用于Safari,股票,天氣以及其它系統(tǒng)內(nèi)置應(yīng)用中,用戶很容易理解它的用途。

當(dāng)你在滾動(dòng)視圖中使用頁(yè)面控件的時(shí)候,最好禁用同一方向的滾動(dòng)指示器(scroll indicator)。這樣一來用戶就有了一種唯一且清晰的方式來瀏覽當(dāng)前內(nèi)容。想要了解更多請(qǐng)參考網(wǎng)絡(luò)視圖(Web View).

一般來說,一次只展示一個(gè)滾動(dòng)視圖。如果在一屏中同時(shí)存在不止一個(gè)滾動(dòng)視圖,由于用戶滾動(dòng)屏幕時(shí)動(dòng)作幅度經(jīng)常都會(huì)很大,他們很容易會(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í)則展示該公司的特定信息。

  表格視圖(Table View)

表格視圖以單列多行的形式來展示數(shù)據(jù)。

16-table view
  想要了解如何在代碼中定義表格視圖,請(qǐng)參考Tabel View Programming Guide for the iOS以及Table Views.

外觀和行為

表格視圖中的數(shù)據(jù)是以單列的方式展示的,因此也很容易將它們分段或者分組。用戶通過輕擊或者拖拽來瀏覽不同組的信息。用戶可以點(diǎn)擊來選中某行,通過控件來添加、移除、多選、查看詳情或者展開另一個(gè)表格視圖。當(dāng)用戶選中某一行時(shí),該行會(huì)短暫地高亮。

當(dāng)選中某行將展開另外一屏內(nèi)容的時(shí)候,該行會(huì)短暫地高亮,然后新一屏內(nèi)容滑入。當(dāng)用戶回到前一屏?xí)r,之前選中的那一行同樣會(huì)短暫地高亮,提醒用戶他們先前選中了什么。

iOS定義了兩種表格樣式。

平鋪型(Plain)表格可被分為若干帶標(biāo)簽的段落,表格右側(cè)可能會(huì)出現(xiàn)垂直的表格索引。每行開頭可以有頁(yè)眉,尾部可以有頁(yè)腳(也可以沒有)。

17-plain
  分組型(Grouped)中至少含有一組列表,而每一組中至少包含一項(xiàng)內(nèi)容。分組可以有頁(yè)眉和頁(yè)腳。與平鋪型不同,分組型表格沒有索引。

18-grouped
  iOS提供了若干表格視圖元素(table-view elements)來擴(kuò)展表格視圖的功能。除了特別標(biāo)明外,這些元素只適用于表格視圖。

table35-1
  除了以上表格中列舉的元素外,iOS定義了刷新控件,讓用戶可以刷新當(dāng)前的表格內(nèi)容。想要了解更多關(guān)于刷新控件的用法,可以參考文檔本章第三節(jié)控件中的Refresh Controls.

iOS定義了在平鋪型表格和分組型表格中最常用到的四種單元格布局樣式。每種單元格樣式都有最適合展示的信息類型。

注意:從編程角度來說,這些樣式應(yīng)用于單元格中,用以控制表格里每一列的繪制方式。

  默認(rèn)型(Default)(UITableViewCellStyleDefault)

默認(rèn)型樣式包括左側(cè)的圖標(biāo)(可選),和圖標(biāo)右邊左對(duì)齊的文字標(biāo)題。

默認(rèn)型樣式適合展示一系列無須通過附加信息便可以區(qū)分的項(xiàng)。

19-default cell
  副標(biāo)題型(Subtitled)(UITableViewCellStyleSubtitle)

副標(biāo)題型包括左側(cè)圖標(biāo)(可選),圖標(biāo)右邊左對(duì)齊展示的文字標(biāo)題,以及在標(biāo)題下方同樣左對(duì)齊展示的副標(biāo)題。

左對(duì)齊的文本標(biāo)簽讓用戶可以更快速地掃視表格。這種樣式適用于列表各項(xiàng)較為相似的情況,用戶可以通過副標(biāo)題中的詳細(xì)信息來區(qū)分列表中的各項(xiàng)。

20-subtitle cell
  Value 1 (UITableViewCellStyleValue1)

在Value 1樣式下,標(biāo)題左對(duì)齊,副標(biāo)題用較細(xì)的字體右對(duì)齊。

21-value 1
  Value 2 (UITableViewCellStyleValue2)

在Value 2樣式里,藍(lán)色標(biāo)題右對(duì)齊,副標(biāo)題左對(duì)齊,混排在同一行中。這種樣式通常不包含圖片。

Value 2的布局中,文本和副標(biāo)題中間的垂直間距會(huì)讓用戶專注于副標(biāo)題的第一個(gè)單詞。

22-value 2
  注意:以上四種單元格樣式均支持添加表格視圖元素,如勾選或展開標(biāo)志。添加這些元素會(huì)縮小標(biāo)題以及副標(biāo)題單元格的可用寬度。

  指南

使用表格視圖可以簡(jiǎn)潔而高效地展示少量或者大量信息。舉例來說,你可以通過表格視圖來:

展示用戶可選的選項(xiàng)列表。你可以使用選中標(biāo)記來告知用戶當(dāng)前選中了哪些項(xiàng)。

展示層級(jí)信息。平鋪型表格樣式非常適合展示層級(jí)信息。表格中的每項(xiàng)都指向不同的子信息,這些子信息承載于另一個(gè)列表中。用戶可以沿著這些層級(jí)結(jié)構(gòu)的路徑來點(diǎn)擊每一層列表中的項(xiàng)。展開標(biāo)志告知用戶點(diǎn)擊這一列中的任何位置,都將展開新的列表以展示其子類信息。

展示可以在概念上進(jìn)行分組的信息。平鋪型和分組型列表都允許你通過提供頁(yè)眉和頁(yè)腳來對(duì)信息進(jìn)行分組和分段。

對(duì)于iOS 6.0以上的版本,你可以用頁(yè)眉頁(yè)腳視圖(header-footer view)——即UITableViewHearderFooterView中的一個(gè)實(shí)例——來展示頁(yè)眉和頁(yè)腳的文字,或圖片。想要了解如何在代碼中定義頁(yè)眉頁(yè)腳視圖,請(qǐng)參考UITableViewHeaderFooterView Class Reference.

展示索引來方便查找。平鋪型列表支持索引,可以讓用戶快速地找到需要的內(nèi)容。索引信息包含一個(gè)浮在屏幕右側(cè)的、縱向羅列的條目,內(nèi)容則通常是字母表中的字母。

如果你使用了索引,要避免在表格右側(cè)使用其它表格視圖元素——比如展開指示符——因?yàn)樗鼈兣c索引是沖突的。

使用表格視圖時(shí)可遵循以下指南:

用戶選擇列表項(xiàng)時(shí),始終給與反饋。當(dāng)用戶點(diǎn)擊可選的列表項(xiàng)時(shí)會(huì)認(rèn)為被點(diǎn)擊的項(xiàng)都應(yīng)短暫地高亮一下。在點(diǎn)擊后,用戶期望出現(xiàn)新的視圖,或者出現(xiàn)一個(gè)復(fù)選標(biāo)記以表明先前點(diǎn)擊的項(xiàng)已經(jīng)被選中或激活。

如果表格的內(nèi)容龐大而且復(fù)雜,不要等數(shù)據(jù)都加載完之后才一起顯示出來。可以首先展示文字信息,圖片等較為復(fù)雜的內(nèi)容則在加載完后再顯示。這樣可以將有用的信息立即傳達(dá)給用戶,同時(shí)也提高了應(yīng)用的響應(yīng)能力。

在等待信息加載的時(shí)候,可以考慮展示“過期”信息。盡管我們并不推薦在數(shù)據(jù)頻繁變化的應(yīng)用中這樣做,它還是可以幫助更多的靜態(tài)應(yīng)用程序立即給到用戶有用的信息。當(dāng)然在你這么做之前,請(qǐng)認(rèn)真衡量你應(yīng)用中數(shù)據(jù)的變化頻率,并弄清楚你的目標(biāo)用戶有多需要立即獲取最新的信息。

如果信息加載速度很慢或者非常復(fù)雜,你需要告訴用戶加載正在進(jìn)行中。如果表格中所有內(nèi)容都很復(fù)雜,我們很難即時(shí)地給用戶展示任何內(nèi)容。在這種極端情況下,切勿顯示空白的表格,因?yàn)檫@會(huì)讓用戶以為應(yīng)用掛了。此時(shí)應(yīng)當(dāng)在屏幕中央展示一個(gè)活動(dòng)指示器(activity indicator)和一個(gè)信息標(biāo)簽(information label),比如“加載中…”,讓用戶知道加載仍然在進(jìn)行。

如果合適的話,為刪除按鈕自定義一個(gè)名稱。如果這能讓用戶更好地理解應(yīng)用的相關(guān)功能的話,你可以創(chuàng)建一個(gè)合適的標(biāo)題,來取代“刪除”這個(gè)字樣。

盡量使用簡(jiǎn)潔的文字標(biāo)簽,以避免被截?cái)唷?/strong>繁冗的文字和詞組不方便用戶瀏覽和理解。以上所有單元格樣式均會(huì)自動(dòng)截?cái)辔谋?,而文本截?cái)嗨斐傻膯栴}可大可小,取決于你采用的單元格樣式,以及被截?cái)嗔四囊徊糠治淖帧?/p>

如果你想以一種非標(biāo)準(zhǔn)的形式來布局你的表格,最好是自定義一種單元格樣式,而不是在現(xiàn)有的表格樣式上進(jìn)行改動(dòng)。如何創(chuàng)建自定義單元格樣式,請(qǐng)參考Table View Programming Guide for iOS中的Customizing Cells部分。

  文本視圖(Text View)

文本視圖可以接收和展示多行文本。

23-text view
  想了解如何在代碼中定義文本視圖,參考Text Views.

  外觀和行為

文本視圖是矩形,可定義為任何高度。當(dāng)內(nèi)容太多超出視圖的邊框時(shí),文本視圖支持滾動(dòng)。

如果文本視圖支持用戶編輯,當(dāng)用戶輕擊文本視圖內(nèi)部時(shí),將喚起鍵盤。鍵盤的布局和類型取決于用戶的系統(tǒng)語(yǔ)言設(shè)置。

 指南

你可以控制文本視圖中文字的字體、顏色和對(duì)齊方式。文本視圖的默認(rèn)字體是系統(tǒng)字體,默認(rèn)字色是黑色。默認(rèn)文字對(duì)齊方式是左對(duì)齊(你可以改為居中或右對(duì)齊)。

始終確保文字的易讀性。雖然你可以使用屬性字符串將不同的字體、字色和對(duì)齊方式串聯(lián)在同一個(gè)文本視圖內(nèi),但保持文本的可讀性是必不可少的。最好是可以支持動(dòng)態(tài)文本(Dynamic Type)和UIFont method preferredFontForTextStyle來展示文本框中的文本。

根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型。舉例來說,你希望用戶能更方便地輸入網(wǎng)址、密碼或者電話號(hào)碼。但請(qǐng)注意,由于鍵盤的布局以及輸入方法是由用戶的系統(tǒng)語(yǔ)言設(shè)置決定的,這是你不能控制的。iOS提供了各種不同的鍵盤類型,以便用戶輸入不同類型的文本。想要了解可用鍵盤類型,可以參考UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤,請(qǐng)參考iOS App Programming Guide中的Managing the Keyboard部分。

  網(wǎng)絡(luò)視圖(Web View)

網(wǎng)絡(luò)視圖是一個(gè)可以展示豐富的HTML內(nèi)容的區(qū)域。(下圖是iPhone自帶的郵件應(yīng)用,網(wǎng)絡(luò)視圖指的是下圖中導(dǎo)航欄和標(biāo)簽欄中間的區(qū)域)

24-web views
  想要了解如何在代碼中定義網(wǎng)絡(luò)視圖,請(qǐng)參考Web Views.

  外觀和行為

除了展示網(wǎng)絡(luò)內(nèi)容外,網(wǎng)絡(luò)視圖還會(huì)自動(dòng)處理頁(yè)面中的內(nèi)容,比如把頁(yè)面中的電話號(hào)碼轉(zhuǎn)化成電話鏈接(譯者按:phone link,點(diǎn)擊之后iPhone將自動(dòng)撥打該號(hào)碼)。

  指南

如果你經(jīng)營(yíng)一個(gè)網(wǎng)頁(yè)或者網(wǎng)絡(luò)應(yīng)用,你大約會(huì)用網(wǎng)絡(luò)視圖來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的iOS App,來對(duì)你的網(wǎng)頁(yè)或者應(yīng)用進(jìn)行一個(gè)封裝。如果你打算用網(wǎng)絡(luò)視圖來訪問你所控制的網(wǎng)頁(yè)內(nèi)容,請(qǐng)務(wù)必閱讀Safari Web Content Guide.

不要用網(wǎng)絡(luò)視圖來創(chuàng)建一個(gè)看起來像迷你網(wǎng)絡(luò)瀏覽器的應(yīng)用。用戶期望使用iOS自帶的Safari來瀏覽網(wǎng)頁(yè)內(nèi)容,因此我們并不推薦你在自己的應(yīng)用中復(fù)制這種以被廣泛應(yīng)用的功能。

作者:騰訊ISUX

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!