活動(dòng)菜單

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/activity_2x.png" alt="" />

提示
想要了解如何在代碼中定義標(biāo)簽欄，請(qǐng)參考UIActivity Class Reference. 想要了解如何把一個(gè)活動(dòng)視圖控制器添加到應(yīng)用程序中，請(qǐng)參考Activity View Controller. 行動(dòng)和共享的擴(kuò)展也在活動(dòng)視圖控制器中顯示。要了解關(guān)于這些擴(kuò)展更多的信息，請(qǐng)參考Share and Action Extensions.

活動(dòng)菜單：

• 是指一種代表當(dāng)前應(yīng)用所支持服務(wù)的對(duì)象。
• 由一種類似于按鈕的圖標(biāo)來表示。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/activity_view_2x.png" alt="" />

用戶通常通過點(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ù)和應(yīng)用擴(kuò)展，如打印，轉(zhuǎn)發(fā)到 Twitter，發(fā)送信息和 Airplay 等等，你不需要再另外創(chuàng)建它們。 為你應(yīng)用的各種服務(wù)設(shè)計(jì)一套精簡的模版圖標(biāo)(Template image)。模板是 iOS 使用的一種形象，來創(chuàng)建最后用戶看到的圖標(biāo)。如果想制作出好看的模版圖標(biāo)，設(shè)計(jì)的時(shí)候可以遵循以下原則：

• 使用透明度適當(dāng)?shù)暮谏虬咨?/li>
• 不要使用陰影
• 進(jìn)行抗鋸齒處理

一個(gè)活動(dòng)模版圖大小應(yīng)該保持在70×70像素左右(高分辨率下)，在區(qū)域里居中顯示。
為每一個(gè)活動(dòng)菜單設(shè)計(jì)清晰簡練的文字標(biāo)題。標(biāo)題將會(huì)出現(xiàn)在活動(dòng)菜單圖標(biāo)的下方。短標(biāo)題通常效果最好，因?yàn)樗谄聊簧系娘@示效果更好并且更容易本地化。如果你的標(biāo)題文字過長，iOS會(huì)將縮小文本，仍然過長的話則會(huì)被截?cái)?。一般而言，最好能避免在活?dòng)標(biāo)題中提及你的公司或產(chǎn)品名稱。

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

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/activity_view_controller_2x.png" alt="" />

提示
想要了解如何在代碼中定義活動(dòng)視圖控制器，請(qǐng)參考UIActivityView Class Reference.想要知道怎么設(shè)計(jì)一個(gè)提供用戶服務(wù)的活動(dòng)菜單，請(qǐng)參考Activity.

活動(dòng)視圖控制器:

• 顯示一個(gè)可配置的任務(wù)列表,用戶可以執(zhí)行指定的內(nèi)容
• 可以根據(jù)環(huán)境發(fā)出某一個(gè)動(dòng)作

使用活動(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)迫他們以一種全新的方式來完成同樣的事情。

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

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

集合視圖

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/collection_view_2x.png" alt="" />

提示
想要了解如何在代碼中定義集合視圖，請(qǐng)參考Collection View Programming Guide for iOS.

集合視圖:

• 可以包含可選視圖視覺上區(qū)分的項(xiàng)目子集或提供裝飾用品，如自定義背景
• 支持布局之間的自定義動(dòng)畫的過渡 （默認(rèn)情況下，當(dāng)用戶插入、 移動(dòng)或刪除的項(xiàng)目集合視圖提供動(dòng)畫）
• 支持手勢(shì)識(shí)別器來執(zhí)行自定義操作的加法。默認(rèn)情況下，集合視圖可選擇和編輯相關(guān)項(xiàng)目。

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

集合視圖支持廣泛的自定義，因此我們要盡量避免把心思都放在進(jìn)行全新的設(shè)計(jì)上。集合視圖是用來幫助用戶更好地完成任務(wù)的，視圖本身并不是用戶體驗(yàn)的焦點(diǎn)所在。以下指導(dǎo)會(huì)幫你創(chuàng)建人們喜愛的集合視圖。

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

讓視圖中的項(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)用超出了他們的控制能力。

容器視圖控制器

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

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

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

先問問你自己是不是必須用到容器視圖控制器。用戶會(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)用整體的美感。

圖片視圖

圖片視圖用以展示一張單獨(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ò)。

地圖視圖

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/map_view_photos_2x.png" alt="" />

提示
想要了解如何在代碼中定義地圖視圖，請(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)

頁面視圖控制器

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/page_view_controller_2x.png" alt="" />

提示
想要了解如何在代碼中定義頁面視圖控制器，請(qǐng)參考Page View Controller. 頁面視圖控制器:

• 帶滾動(dòng)條的頁面視圖控制器沒有默認(rèn)的外觀 帶翻頁效果的控制器可以在兩頁中間增加書脊(book spine)的效果——當(dāng)用戶翻頁時(shí)，它看起來就像一本真實(shí)的書在翻頁一樣。
• 頁面內(nèi)容控制器可以根據(jù)指定的切換效果來模擬出頁面切換時(shí)的動(dòng)畫。 使用滾動(dòng)條效果的時(shí)候，當(dāng)前頁面將滾動(dòng)到下一頁；而使用翻頁效果時(shí)，頁面上會(huì)出現(xiàn)一個(gè)模擬實(shí)體書或筆記本翻頁效果的翻頁動(dòng)畫。

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

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

彈出框

彈出框就是一個(gè)當(dāng)你點(diǎn)擊某一按鈕在屏幕上出現(xiàn)的瞬態(tài)區(qū)域。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/popover_2x.png" alt="" />

提示
在 ios8 和后續(xù)版本中，你可以使用UIPopoverPresentationController來呈現(xiàn)出彈出框（popover）。UIPopoverPresentationController定義一個(gè)代表讓你的popover的內(nèi)容可以適配當(dāng)先屏幕環(huán)境。舉個(gè)例子，在通常的水平環(huán)境下，你的內(nèi)容可以在popover中滾動(dòng)顯示；而在水平緊湊環(huán)境下，你的內(nèi)容可以完全呈現(xiàn)在屏幕上。

彈出框:

• 是一個(gè)獨(dú)立的模態(tài)視圖
• 在水平正常的環(huán)境下，有一個(gè)箭頭指向它的來源
• 具有半透明背景，可以模糊背景內(nèi)容
• 可以包含各種對(duì)象和視圖，例如：
• 輸出表，圖像，地圖，文本，網(wǎng)頁，或自定義視圖
• 導(dǎo)航欄，工具欄，或標(biāo)簽欄
• 控件或?qū)ο笤诋?dāng)前的應(yīng)用程序視圖對(duì)物體的行為

（默認(rèn)情況下，表觀，在彈出的導(dǎo)航欄和工具欄，使用透明背景讓彈出的模糊顯示通過。） 在一個(gè)水平正常的環(huán)境下，popover 總是出現(xiàn)在一個(gè)彈出菜單中。 使用彈出顯示附加信息或一系列的選定對(duì)象相關(guān)的項(xiàng)目。

提示
本節(jié)中的指南包括界面和用戶是在一個(gè)水平正常的環(huán)境中顯示的用戶體驗(yàn)。如果你提出的 popover 是在水平緊湊的環(huán)境是全屏顯示的，看Modal View的指導(dǎo)原則，其他全屏幕模式視圖模型視圖。

避免提供“取消”按鈕。當(dāng)用戶不希望繼續(xù)瀏覽popover時(shí)，它應(yīng)該自動(dòng)關(guān)閉。確定了當(dāng)一個(gè)popover需要關(guān)閉時(shí)，考慮下面的情況：

一般來說，當(dāng)用戶點(diǎn)擊 popover 的外邊界時(shí)，盡可能減少他們的工作。不是所有人都需要一個(gè)“取消”按鈕，你的取消按鈕可能會(huì)給他們帶來誤會(huì)。如果用戶點(diǎn)擊“取消”按鈕，那意味著要?jiǎng)h除剛剛完成過的工作。
使 popover 箭頭盡可能直接的元素，顯示它。這樣做可以幫助人們記住彈出來自什么任務(wù)或?qū)ο蟮年P(guān)聯(lián)。
確保人們?cè)诳匆粋€(gè) popover 的時(shí)候是看不到它背后的應(yīng)用程序內(nèi)容的。Popover 要遮擋住它后方的顯示內(nèi)容，而且不能通過拖拽來移動(dòng)它的位置。
確保同一時(shí)間在屏幕上只顯示一個(gè) popover。你不應(yīng)該在同一時(shí)間顯示多個(gè)popover（或自定義視圖的設(shè)計(jì)看起來像一個(gè)popover）。特別是你要避免讓一個(gè) popover 中出現(xiàn)另一個(gè) popover。
不要在 popover 的頂部顯示一個(gè)彈出模態(tài)視圖。除了一個(gè)警報(bào)，什么都不應(yīng)該在popover中出現(xiàn)。
如果可能的話，讓人們可以在關(guān)閉一個(gè) popover 的同時(shí)打開另一個(gè) popover。這種行為是特別合適在幾種不同的欄按鈕都需打開一個(gè) popover時(shí)的，因?yàn)樗層脩舨挥命c(diǎn)擊很多次。
別讓 popover 過大了。popover 不應(yīng)該占滿整個(gè)屏幕。相反，它應(yīng)該是足夠大，以顯示其內(nèi)容，還指出它來自的地方。popover 彈出的高度是不受約束的，所以你可以用它來顯示一個(gè)很長的清單。但似乎一般來說，你應(yīng)該盡量避免在一個(gè)彈出菜單，使任務(wù)滾動(dòng)。注意，系統(tǒng)應(yīng)該可以調(diào)整popover的寬度和高度以確保它適合在屏幕上顯示。
在 popover 中使用標(biāo)準(zhǔn)UI控制器和視圖。通常來說，當(dāng) popover 包含標(biāo)準(zhǔn)控制器和視圖時(shí)，看上去舒服是用戶最簡單的理解。
確保自定義 popover 看上去也是一個(gè)普通的彈出框。雖然我們可以用[UIPopoverBackgroundView APIs]()很輕易地自定義 popover 的可視化效果，但還是要避免做出人們難以辨別的 popover。如果你把 popover 的樣子改動(dòng)過多，用戶就不能以他們的經(jīng)驗(yàn)來理解 popover 在應(yīng)用程序中的作用了。
如果你修改了 popover 的尺寸那一定要小心。如果你用 popover 同時(shí)顯示內(nèi)容和內(nèi)容的擴(kuò)展時(shí)，你可能希望改變 popover 的尺寸。當(dāng)你適配了 popover 的尺寸時(shí)，它也許是個(gè)不錯(cuò)的創(chuàng)新，因?yàn)樗苊饬艘粋€(gè)新的 popover 在上一個(gè) popover 中出現(xiàn)。

滾動(dòng)視圖

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/scroll_view_2x.png" alt="" />

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

滾動(dòng)視圖:

• 滾動(dòng)視圖沒有預(yù)定義的外觀。
• 滾動(dòng)視圖剛出現(xiàn)或者當(dāng)用戶在對(duì)它進(jìn)行操作的時(shí)候——縱向和橫向的滾動(dòng)指示器會(huì)短暫地閃爍，以提示用戶在當(dāng)前視圖外仍有更多內(nèi)容。
• 滾動(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)用在頁模式(paging mode)中，在此模式下用戶可以通過拖拽和輕擊等手勢(shì)來瀏覽一頁的內(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)容。 在頁模式滾動(dòng)視圖中，可以考慮使用頁面控件(page control)。當(dāng)你想要展示分頁、分屏或者分塊的內(nèi)容，最好是讓用戶知道當(dāng)前內(nèi)容一共有多少塊，以及他們當(dāng)前瀏覽的是第幾個(gè)——頁面控件以圓點(diǎn)的形式來把這個(gè)信息告訴用戶。同時(shí)由于頁面控件被廣泛用于Safari，股票，天氣以及其它系統(tǒng)內(nèi)置應(yīng)用中，用戶很容易理解它的用途。 當(dāng)你在滾動(dòng)視圖中使用頁面控件的時(shí)候，最好禁用同一方向的滾動(dòng)指示器(scroll indicator)。這樣一來用戶就有了一種唯一且清晰的方式來瀏覽當(dāng)前內(nèi)容。想要了解更多請(qǐng)參考Page Control. 一般來說，一次只展示一個(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í)則展示該公司的特定信息。

分離視圖控制器

分離視圖控制器是一個(gè)全屏的視圖控制器，它管理著兩級(jí)視圖。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/split_view_2x.png" alt="" />

提示
每個(gè)子視圖控制器負(fù)責(zé)管理一個(gè)窗格的顯示。拆分視圖控制器本身提出了這些子視圖控制器和管理過渡之間的不同取向的轉(zhuǎn)變。要了解更多關(guān)于在你的代碼中定義一個(gè)拆分視圖控制器的內(nèi)容，請(qǐng)參考UISplitViewController Class Reference 和 Split View Controllers.

在 ios7 和更早的系統(tǒng)中，分離視圖控制器只用在 ipad 上。 通常，分離視圖控制器使用尺寸類別來安排子視圖控制器。例如，分離視圖控制器：

• 試圖在普通環(huán)境下顯示窗格水平排列
• 可以在頂部的次要窗格層狀主窗格中顯示，或隱藏在主窗格中，在需要時(shí)顯示。它通常在一個(gè)水平緊湊的環(huán)境。

你可以通過拆分視圖控制器修改優(yōu)先布局，更加關(guān)注需要特別顯示的內(nèi)容。 分離視圖控制器可以包含很多的內(nèi)容和視圖，例如：

• 表，圖片，地圖，文字，網(wǎng)絡(luò)，或自定義視圖
• 導(dǎo)航欄，工具欄，標(biāo)簽欄

提示
盡管前一個(gè)顯示的窗格常被稱為是主窗格，第二個(gè)顯示的被稱為次窗格，但這種關(guān)系在代碼中并不強(qiáng)制要求。

使用拆分視圖控制器在主窗格中顯示持續(xù)性的信息和相關(guān)細(xì)節(jié)，或在二級(jí)窗格顯示下屬信息。在這種設(shè)計(jì)模式，當(dāng)人們選擇在主窗格中的一個(gè)項(xiàng)目，第二面板應(yīng)顯示與該項(xiàng)目相關(guān)的信息。（你要在代碼中實(shí)現(xiàn)）

避免顯示的二次窗格，比原窗窄。如果次級(jí)窗格是比主窗格窄，拆分視圖控制器便不再充滿屏幕，這和整體的外觀是不平衡的。

避免在兩次窗口中都出現(xiàn)導(dǎo)航欄。這樣做會(huì)讓用戶很難區(qū)分這兩級(jí)窗口的關(guān)系。

通常，讓當(dāng)前的選擇在主窗口中長時(shí)間顯示。盡管第二窗格的內(nèi)容是可以改變的，它應(yīng)始終與保持在主窗格中選定的項(xiàng)目有關(guān)。這樣的觀看體驗(yàn)，幫人們了解在主窗格中的項(xiàng)之間的關(guān)系和二次窗格的內(nèi)容。

如果合適的話，給用戶一個(gè)可選擇的方式來訪問主窗格中。通常，只有次級(jí)窗格在水平緊湊的環(huán)境中顯示時(shí)，為用戶提供一個(gè)按鈕（通常位于一個(gè)導(dǎo)航欄）來顯示和隱藏主窗格。拆分視圖控制器還支持滑動(dòng)手勢(shì)進(jìn)行顯示/隱藏行動(dòng)。如果你的應(yīng)用程序使用滑動(dòng)手勢(shì)來執(zhí)行其他功能，你應(yīng)該讓人們點(diǎn)擊訪問主窗格。

表格視圖

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/plain_table_2x.png" alt="" />

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

表格視圖:

• 表格視圖中的數(shù)據(jù)是以單列的方式展示的，因此也很容易將它們分段或者分組。
• 提供一個(gè)控制鈕讓用戶可以添加、移除列，選擇幾個(gè)列，看到有關(guān)列項(xiàng)目的更多信息，或者顯示另一個(gè)表格視圖。

iOS 定義了兩種表格樣式：

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/simple_list_2x.png" alt="" />

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/grouped_list_2x.png" alt="" />

在這兩種風(fēng)格中，當(dāng)用戶點(diǎn)擊一個(gè)可選擇的項(xiàng)目時(shí)，表格行高亮顯示。如果選擇了一個(gè)行，跳轉(zhuǎn)到一個(gè)新的屏幕，被選的行高亮顯示作為新屏幕的出現(xiàn)提示。當(dāng)用戶返回前一個(gè)屏幕時(shí)，最初選定的行，再變成高亮，簡要地提醒用戶這是之前選擇的內(nèi)容。（這并不突出）。

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

除了以上表格中列舉的元素外，iOS定義了刷新控件，讓用戶可以刷新當(dāng)前的表格內(nèi)容。想要了解更多關(guān)于刷新控件的用法，可以參考Refresh Control. iOS定義了在平鋪型表格和分組型表格中最常用到的四種單元格布局樣式。每種單元格樣式都有最適合展示的信息類型。

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

默認(rèn)型（Default）(UITableViewCellStyleDefault) 默認(rèn)型樣式包括左側(cè)的圖標(biāo)（可選），和圖標(biāo)右邊左對(duì)齊的文字標(biāo)題。 默認(rèn)型樣式適合展示一系列無須通過附加信息便可以區(qū)分的項(xiàng)。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/default_cell_2x.png" alt="" />

副標(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)。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/subtitle_cell_2x.png" alt="" />

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/value_1_cell_2x.png" alt="" />

Value 2 (UITableViewCellStyleValue2) 在Value 2樣式里，藍(lán)色標(biāo)題右對(duì)齊，副標(biāo)題左對(duì)齊，混排在同一行中。這種樣式通常不包含圖片。 Value 2的布局中，文本和副標(biāo)題中間的垂直間距會(huì)讓用戶專注于副標(biāo)題的第一個(gè)單詞。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/value_2_cell_2x.png" alt="" />

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

使用表格視圖可以簡潔而高效地展示少量或者大量信息。舉例來說，你可以通過表格視圖來：

• 展示用戶可選的選項(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)行分組的信息。平鋪型和分組型列表都允許你通過提供頁眉和頁腳來對(duì)信息進(jìn)行分組和分段。

你可以用頁眉頁腳視圖(header-footer view)——即UITableViewHearderFooterView中的一個(gè)實(shí)例——來展示頁眉和頁腳的文字，或圖片。想要了解如何在代碼中定義頁眉頁腳視圖，請(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è)字樣。

盡量使用簡潔的文字標(biāo)簽，以避免被截?cái)唷７比叩奈淖趾驮~組不方便用戶瀏覽和理解。以上所有單元格樣式均會(huì)自動(dòng)截?cái)辔谋荆谋窘財(cái)嗨斐傻膯栴}可大可小，取決于你采用的單元格樣式，以及被截?cái)嗔四囊徊糠治淖帧?br /> 如果你想以一種非標(biāo)準(zhǔn)的形式來布局你的表格，最好是自定義一種單元格樣式，而不是在現(xiàn)有的表格樣式上進(jìn)行改動(dòng)。

文本視圖

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/text_view_2x.png" alt="" />

提示
想了解如何在代碼中定義文本視圖，參考Text Views.

文本視圖:

• 文本視圖是矩形，可定義為任何高度。
• 當(dāng)內(nèi)容太多超出視圖的邊框時(shí)，文本視圖支持滾動(dòng)。
• 如果文本視圖支持用戶編輯，當(dāng)用戶輕擊文本視圖內(nèi)部時(shí)，將喚起鍵盤。鍵盤的布局和類型取決于用戶的系統(tǒng)語言設(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來展示文本框中的文本。想要了解動(dòng)態(tài)文本的更多支持引導(dǎo)，參考Text Should Always Be Legible;編程信息，參考Text Styles
根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型。舉例來說，你希望用戶能更方便地輸入網(wǎng)址、密碼或者電話號(hào)碼。但請(qǐng)注意，由于鍵盤的布局以及輸入方法是由用戶的系統(tǒng)語言設(shè)置決定的，這是你不能控制的。
iOS 提供了各種不同的鍵盤類型，以便用戶輸入不同類型的文本。想要了解可用鍵盤類型，可以參考UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤，請(qǐng)參考 iOS App Programming Guide 中的 Managing the Keyboard 部分。

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

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

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/web_view_2x.png" alt="" />

提示
想要了解如何在代碼中定義網(wǎng)絡(luò)視圖，請(qǐng)參考Web Views.

網(wǎng)絡(luò)視圖:

• 展示網(wǎng)絡(luò)內(nèi)容
• 自動(dòng)處理頁面中的內(nèi)容，比如把頁面中的電話號(hào)碼轉(zhuǎn)化成電話鏈接。
• 如果你經(jīng)營一個(gè)網(wǎng)頁或者網(wǎng)絡(luò)應(yīng)用，你大約會(huì)用網(wǎng)絡(luò)視圖來實(shí)現(xiàn)一個(gè)簡單的iOS App，來對(duì)你的網(wǎng)頁或者應(yīng)用進(jìn)行一個(gè)封裝。如果你打算用網(wǎng)絡(luò)視圖來訪問你所控制的網(wǎng)頁內(nèi)容，請(qǐng)務(wù)必閱讀Safari Web Content Guide. 不要用網(wǎng)絡(luò)視圖來創(chuàng)建一個(gè)看起來像迷你網(wǎng)絡(luò)瀏覽器的應(yīng)用。用戶期望使用iOS自帶的Safari來瀏覽網(wǎng)頁內(nèi)容，因此我們并不推薦你在自己的應(yīng)用中復(fù)制這種以被廣泛應(yīng)用的功能。