表格視圖
表格視圖在一列里用很多行展示大量內(nèi)容。
外觀和行為
表格視圖在一行行格子里展示信息，可以劃分為塊或進(jìn)行歸組。用戶可以拖動(dòng)內(nèi)容，以顯示更多行。用戶可以點(diǎn)擊選中一項(xiàng)，然后用控件增加或刪除行，選中多拍，查看某一行的更多信息或者展開另一個(gè)表示視圖。當(dāng)用戶選中某項(xiàng)目時(shí)，表格會(huì)短暫地高亮。
如果選中某項(xiàng)導(dǎo)致開始瀏覽新一屏內(nèi)容，那么在新一屏滑入位前這一行就會(huì)高亮。當(dāng)用戶再回到原來那一屏的時(shí)候，原來被選中那一行會(huì)再次高光，提醒用戶剛才選過什么。
iOS定義兩種表格視圖，可以通過外觀來區(qū)分：
樸素型（Plain）表格從屏幕一邊開始展示表格，一直到另一邊結(jié)束。一行里可以有多個(gè)內(nèi)容段，右側(cè)可選擇展示一列半透明編號(hào)欄。每行開頭可以有眉標(biāo)，尾部可以有角標(biāo)。默認(rèn)情況下，每行的背景是白色的。
分組型（grouped）表格包含至少一組列表。每一組總是包含至少一項(xiàng)。每一組起始于眉標(biāo)文字，收尾于腳標(biāo)文字（A group can be preceded by header text and followed by footer text.這一句真不好翻譯啊）。默認(rèn)情況下，分組被放置在藍(lán)色背景上，組內(nèi)的背景是白色的。分組型表格沒有編號(hào)。
iOS提供了一些表格元素，用于拓展表格的功能。除非特別標(biāo)注，這些元素僅適用于表格視圖。
iOS 3及以后的版本提供了4種表格視圖樣式，為樸素型和分組型表格提供了常見的表格樣式。每一種樣式適合的表達(dá)內(nèi)容有所不同。
默認(rèn)型。默認(rèn)型的單元格樣式包括默認(rèn)左對(duì)齊的標(biāo)題，每一行左邊還有可選的圖片。
副標(biāo)題型。默認(rèn)型的單元格樣式包括默認(rèn)左對(duì)齊的標(biāo)題，每一行左邊還有可選的圖片。每個(gè)標(biāo)題下面還有副標(biāo)題。主標(biāo)題黑色，副標(biāo)題字號(hào)小一點(diǎn)，是灰色的。
在副標(biāo)題型里，字符的顯著性暗示它是項(xiàng)目的名稱或標(biāo)題，而副標(biāo)題外觀暗示它包含與主標(biāo)題相關(guān)的輔助信息，左對(duì)齊也使列表容易瀏覽。這種樣式適合項(xiàng)目看起來差不多的情況，用戶可以利用額外的信息來幫助區(qū)分項(xiàng)目。
Value1 這種樣式用左對(duì)齊的黑色字體顯示主標(biāo)題，用右對(duì)齊的小號(hào)藍(lán)色字展示副標(biāo)題。圖片不適合這種樣式。
在這種單元格里，字符的外觀暗示它是項(xiàng)目的名稱或標(biāo)題，而副標(biāo)題的外觀暗示它包含與主標(biāo)題相關(guān)的重要信息
左對(duì)齊和字體使列表容易瀏覽，右對(duì)齊的副標(biāo)題將用戶的注意吸引到它提供的相關(guān)信息上。
這種布局尤其適合展示項(xiàng)目當(dāng)前的狀態(tài)，可能是該項(xiàng)目對(duì)應(yīng)的子列表中被選中的那一項(xiàng)。
Value2.這個(gè)樣式展示右對(duì)齊的藍(lán)色子標(biāo)題，右邊緊鄰左對(duì)齊的黑色主標(biāo)題。圖片不適用本樣式。
在Value2單元格中，右對(duì)齊、受限的寬度以及字體暗示這是標(biāo)題，但左對(duì)齊的內(nèi)容更加重要。
在這種布局下，每一行兩部分內(nèi)容的相接點(diǎn)位置相同。這在兩列內(nèi)容間創(chuàng)建了整齊的一列空隙，用戶閱讀右側(cè)的主內(nèi)容會(huì)更加輕松。
指南
你可以使用表格視圖來高效地展示或多或少的信息。例如以下情景：
提供一系列可供用戶選擇的項(xiàng)目。可以使用勾選標(biāo)記向用戶展示以選中的內(nèi)容。
當(dāng)呈現(xiàn)用戶點(diǎn)擊表格中某一項(xiàng)后出現(xiàn)的一列選項(xiàng)時(shí)，任何一種樣式都適用。當(dāng)呈現(xiàn)用戶按下按鈕或其他不在表格中的元素后出現(xiàn)的列表時(shí)，適用樸素型。
展示層級(jí)信息。樸素型樣式尤其適合展示層級(jí)信息。列表中的每一項(xiàng)都是通往各種子信息的入口。用戶通過在一系列列表中的選擇來瀏覽層級(jí)信息。這個(gè)圖標(biāo)暗示用戶點(diǎn)擊該項(xiàng)后還會(huì)有子列表。
呈現(xiàn)概念上可歸組的信息。兩種表格樣式都允許在各段的分割處添加段眉和段腳，以示分組。
分組性表格的圓角可以很清晰地分割各組信息，即使在快速滾動(dòng)時(shí)效果也很好。
展示有編號(hào)欄的信息。樸素型樣式支持編號(hào)，可以讓用戶快速找到需要的信息。編號(hào)通常是貼在屏幕右邊緣的一欄字符，通常是按字母表排序的字母。用戶觸摸（或拖拽）編號(hào)，展示相關(guān)的區(qū)域。
如果你要用編號(hào)欄，避免在屏幕右側(cè)邊緣展示信息（比如這種圖標(biāo)），因?yàn)闀?huì)與編號(hào)欄沖突。
在用戶選擇列表項(xiàng)的時(shí)候提供反饋。用戶希望在點(diǎn)擊列表項(xiàng)的時(shí)候它能高光一下。點(diǎn)擊后用戶期望響應(yīng)的動(dòng)作會(huì)立即執(zhí)行：出現(xiàn)一個(gè)屏新東西或者項(xiàng)目被勾選。
有時(shí)，即使與被選中項(xiàng)目相關(guān)的輔助細(xì)節(jié)或控件已經(jīng)在同一屏出現(xiàn)了，被選中項(xiàng)還處于高光態(tài)。但是，我們不鼓勵(lì)這樣做。因?yàn)橐涣许?xiàng)目，加上選中項(xiàng)，加上相關(guān)的細(xì)節(jié)或控件，會(huì)亂成一鍋粥。
用動(dòng)畫展示用戶對(duì)列表項(xiàng)的改變。這可以提供反饋，增強(qiáng)用戶直接控制的感覺。在“設(shè)置”中，關(guān)閉“自動(dòng)調(diào)整時(shí)間”后，列表組會(huì)慢慢展開，展示設(shè)置“時(shí)間和日期”的區(qū)域。
如果表格內(nèi)容很復(fù)雜，避免等到所有信息都載入后再展示。應(yīng)該立刻展示文本，然后等復(fù)雜的信息完備后再展示它們。這種技術(shù)可以立刻給用戶一些有用的信息，增加程序的反饋性。
考慮在等待載入信息時(shí)展示原有信息。如果你的程序展示的信息不太常變，這種技術(shù)可以讓用戶立刻看到一些有用的信息。如果信息經(jīng)常變動(dòng)，那就算了吧。在決定這樣做之前，調(diào)查一下信息更新的頻率以及很依賴新信息的用戶所占的比重。
如果數(shù)據(jù)很復(fù)雜或載入很慢，要提供信號(hào)，暗示處理進(jìn)行中。如果表格包含的信息很復(fù)雜，可能無法立刻提供有用的信息。這種情況下，不要只展示空格子。因?yàn)檫@會(huì)暗示程序掛了。你應(yīng)該在屏幕中心放一個(gè)活動(dòng)指示器，配上“載入中”這樣的字符。這會(huì)給用戶提供反饋，讓他們知道程序還在繼續(xù)努力。
樸素型表格的高度不能為適應(yīng)內(nèi)容而變化。分組型表格的行高是可以變得，但是在樸素型表格里就看起來很亂。
Value1和Value2的表格很適用于分組型。雖然幾種表格樣式你可以隨便用，但value1和value2與分組型表格搭配。例如，“設(shè)置”用了value1，iPhone版Contacts用了value2。
盡量保持標(biāo)題簡潔，避免被截?cái)�。單詞和短語被截?cái)嗪蠛茈y閱讀和理解。在各種表格樣式中，文本截?cái)喽际亲詣?dòng)的。但這可能因單元格樣式和截?cái)辔恢玫牟煌鸶鞣N問題。
在默認(rèn)樣式中，短的文本標(biāo)簽好。如果截?cái)嗖豢杀苊�，盡量把重要的詞放在前面。
在副標(biāo)題型樣式中，短的文本標(biāo)簽也是好。如果截?cái)嗖豢杀苊�，盡量把重要的詞放在前面。如果副標(biāo)題的文字被截?cái)嗔�，用戶可能不�?huì)太介意，因?yàn)檫@里的信息是輔助主標(biāo)題的。
在Value1樣式中，自動(dòng)截?cái)嗪茈y避免。因?yàn)橐谕恍姓故緝晒?jié)信息。但截?cái)嘁彩怯斜匾模駝t就沒辦法在兩節(jié)信息間留下分隔空隙了。
在Value2樣式中，截?cái)嗟淖侄螘?huì)破壞兩節(jié)文字間整齊的空隙。當(dāng)行與行之間的空隙不一致時(shí)，用戶會(huì)很難瀏覽右側(cè)的細(xì)節(jié)信息。
可以通過增加行高來容納更多的文字，以避免截?cái)�。但這會(huì)導(dǎo)致如下問題：
你需要系統(tǒng)地檢查一遍文字是否能被欄充分地包起來。豎屏模式和橫屏模式都要檢查，因?yàn)楸砀駥挾纫矔?huì)有影響。
不要在一個(gè)方向上是包好的，而在另一個(gè)方向上不是
不論采用什么表格樣式，自適應(yīng)的行高都會(huì)影響表格的整體展示效果。
如果你想用非常規(guī)的方式展示表格，好不要和標(biāo)準(zhǔn)樣式差別太大。
文本視圖
文本視圖可以展示多行文本。
外觀和行為
文本視圖是一個(gè)高度任意的圓角矩形。如果內(nèi)容過多，超過了便捷顯示范圍，文本視圖會(huì)提供拖動(dòng)功能。
如果文本視圖支持用戶編輯，當(dāng)用戶在矩形內(nèi)點(diǎn)擊一下后，鍵盤就會(huì)出現(xiàn)。鍵盤的布局和輸入方式由用戶的語言設(shè)置決定。當(dāng)用戶觸摸標(biāo)有“.?123”的按鍵時(shí)，鍵盤會(huì)變成用于輸入數(shù)字和標(biāo)點(diǎn)符號(hào)的類型。
指南
你可以對(duì)文字的字體、顏色和對(duì)齊方式進(jìn)行設(shè)置，但必須要應(yīng)用到整塊文字。也就是說，不能只設(shè)置一部分文字的字體。默認(rèn)的字體是系統(tǒng)字體，默認(rèn)的顏色是黑色，因?yàn)檫@樣的可讀性高。默認(rèn)的對(duì)齊方式是左對(duì)齊。
如果你必須自定義各種顏色和字體，可以使用web視圖取代文字視圖，用html定義文字的樣式。
你也可以根據(jù)需要用戶輸入的內(nèi)容類型定義不同的鍵盤樣式。欲知更多，詳見“文本框Text Field”（p109）。
Web視圖
Web視圖是可以用來展示豐富的HTML文本的區(qū)域。
外觀和行為
除了展示網(wǎng)頁信息外，web視圖還會(huì)對(duì)網(wǎng)頁內(nèi)容進(jìn)行一些自動(dòng)化處理，比如將電話號(hào)碼自動(dòng)顯示為電話超鏈接。
指南
如果你有網(wǎng)頁或者網(wǎng)頁app，可以考慮用web視圖，然后再給它加一個(gè)app的殼。
避免使用web視圖創(chuàng)建一個(gè)外觀和行為與迷你網(wǎng)頁瀏覽器相似的程序。用戶希望使用iOS上的Safari來瀏覽網(wǎng)頁內(nèi)容，所以沒必要在你的程序里做重復(fù)工作。
|