鍍金池/ 教程/ iOS/ 內(nèi)容視圖
內(nèi)容視圖
控件
iCloud
導航
網(wǎng)頁剪藏圖標
動畫
鍵盤和輸入頁面
設(shè)計策略
臨時視圖
撤銷與重做
交互與反饋
與 iOS 一體化
從概念到產(chǎn)品
品牌推廣
電子錢包
社交媒體
游戲中心
創(chuàng)建尺寸可調(diào)的圖片
案例學習:從桌面到 iOS
多任務(wù)處理
蘋果支付
色彩和排版
報刊雜志圖標
iOS 應(yīng)用解析
啟動和終止
聲音
快速查看
適應(yīng)性和布局
編輯菜單
健康組件
語音輔助
iAd 富媒體廣告
為 iOS 而設(shè)計
標志與圖形
應(yīng)用圖標
模態(tài)情景
圖標與圖片尺寸
路線選擇
在應(yīng)用中購買
應(yīng)用拓展
啟動畫面
術(shù)語和措辭
通知
欄按鈕圖標
訪問用戶數(shù)據(jù)
云打印

內(nèi)容視圖

活動菜單

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

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

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

活動菜單:

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

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

用戶通常通過點擊控制器中的活動圖標來啟動某樣活動。點擊之后該項服務(wù)通常會立刻執(zhí)行,除非這項服務(wù)過于復(fù)雜,此時系統(tǒng)將會進一步索取更多的信息之后才會為用戶執(zhí)行該服務(wù)。 使用活動菜單來讓用戶執(zhí)行你的應(yīng)用所提供的服務(wù)。請注意,iOS 本身提供了若干內(nèi)置的服務(wù)和應(yīng)用擴展,如打印,轉(zhuǎn)發(fā)到 Twitter,發(fā)送信息和 Airplay 等等,你不需要再另外創(chuàng)建它們。 為你應(yīng)用的各種服務(wù)設(shè)計一套精簡的模版圖標(Template image)。模板是 iOS 使用的一種形象,來創(chuàng)建最后用戶看到的圖標。如果想制作出好看的模版圖標,設(shè)計的時候可以遵循以下原則:

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

一個活動模版圖大小應(yīng)該保持在70×70像素左右(高分辨率下),在區(qū)域里居中顯示。
為每一個活動菜單設(shè)計清晰簡練的文字標題。標題將會出現(xiàn)在活動菜單圖標的下方。短標題通常效果最好,因為它在屏幕上的顯示效果更好并且更容易本地化。如果你的標題文字過長,iOS會將縮小文本,仍然過長的話則會被截斷。一般而言,最好能避免在活動標題中提及你的公司或產(chǎn)品名稱。

活動視圖控制器

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

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

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

活動視圖控制器:

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

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

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

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

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

集合視圖

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

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

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

集合視圖:

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

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

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

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

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

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

容器視圖控制器

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

提示
想要了解如何在代碼中定義容器視圖控制器,請參考UIViewController Class Reference

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

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

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

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

圖片視圖

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

提示
想要了解如何在代碼中定義圖片視圖,請參考image views.

圖片視圖:

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

在 iOS 7里,包含了模版圖片(template image)的圖片視圖會把當前的色調(diào)(tint color)應(yīng)用到圖片上。 請務(wù)必確保圖片視圖中的每一張圖片都保持相同的尺寸和比例。如果你的圖片尺寸各不相同,圖片視圖將會逐一對它們進行調(diào)整;而當你的圖片比例不一,渲染的時候很可能會出錯。

地圖視圖

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

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

提示
想要了解如何在代碼中定義地圖視圖,請參考Map Kit Framework Reference.

地圖視圖:

  • 地圖視圖通常以標準地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來展示地理區(qū)域。
  • 地圖樣式還會標注單一的地點(annotations),描繪路徑和二維區(qū)域的輪廓。
  • 用戶可以縮放和移動地圖視圖——除非你在應(yīng)用中禁用了這些動作——你也可以在編程時自定義地圖視圖的縮放和移動。

利用地圖視圖可以給用戶提供一個可交互的地理區(qū)域視圖。如果你在開發(fā)一個導航類應(yīng)用(routing app),可以使用地圖視圖來展示你給用戶的路徑。 一般來說,允許用戶在視圖中進行交互行為。用戶習慣了在系統(tǒng)內(nèi)置地圖中進行交互,因此他們會有預(yù)期,能在你所提供的地圖中進行類似的行為。 使用標準的地圖標注顏色。地圖上標注了一系列地點。因為用戶習慣了內(nèi)置地圖的各個標注的顏色,所以最好避免在你的應(yīng)用中重新定義這些顏色的含義。定義顏色時,請遵循以下這些標準:

  • 紅色——表示目的地
  • 綠色——表示起點
  • 紫色——表示用戶指定的地點(User-Specified Point)

頁面視圖控制器

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

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

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

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

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

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

彈出框

彈出框就是一個當你點擊某一按鈕在屏幕上出現(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定義一個代表讓你的popover的內(nèi)容可以適配當先屏幕環(huán)境。舉個例子,在通常的水平環(huán)境下,你的內(nèi)容可以在popover中滾動顯示;而在水平緊湊環(huán)境下,你的內(nèi)容可以完全呈現(xiàn)在屏幕上。

彈出框:

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

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

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

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

如果彈出框… 那么…
提供的選項影響了主菜單,卻不執(zhí)行檢查 只要當用戶做出選擇或是點擊彈出框外的任意空白處,就馬上關(guān)閉彈出框以及與彈出框有關(guān)的控件部分。
執(zhí)行檢察 當用戶點擊彈出框外的任意空白處,就馬上關(guān)閉彈出框以及與彈出框有關(guān)的控件部分。這種情況下,不要當用戶做出選擇就馬上關(guān)閉它,因為用戶可能想做出其他選擇或者改變現(xiàn)在選擇的屬性。
完成一項任務(wù) 當用戶通過點擊彈出框中的按鈕(例如“Done”“Cancel”)來完成或取消一個任務(wù)時,關(guān)閉彈出框。這種情況下,當用戶點擊框外的時候可能不希望關(guān)閉它,因為它可能對于用戶完成或準確的刪除某項任務(wù)是十分重要的。否則,當用戶點擊框外區(qū)域的時候保存他們的輸入內(nèi)容,就像他們點擊了Done一樣。

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

滾動視圖

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

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

提示
想要了解如何在代碼中定義滾動視圖,請參考Scroll Views

滾動視圖:

  • 滾動視圖沒有預(yù)定義的外觀。
  • 滾動視圖剛出現(xiàn)或者當用戶在對它進行操作的時候——縱向和橫向的滾動指示器會短暫地閃爍,以提示用戶在當前視圖外仍有更多內(nèi)容。
  • 滾動視圖的響應(yīng)速度和對各個操作手勢的識別都應(yīng)當讓用戶感到自然。當用戶在視圖中拖拽內(nèi)容,內(nèi)容隨之滾動;當用戶輕掃屏幕時,內(nèi)容將快速滾動——直到用戶再次觸摸屏幕或內(nèi)容已經(jīng)到達底部時停止。滾動視圖同樣可以應(yīng)用在頁模式(paging mode)中,在此模式下用戶可以通過拖拽和輕擊等手勢來瀏覽一頁的內(nèi)容。
  • 你可以使用滾動視圖來允許用戶在固定的空間內(nèi)瀏覽大尺寸或大量的視圖。因為在iOS中用戶常常會用到滾動視圖,所以請確保你的應(yīng)用中滾動視圖的操作與他們的預(yù)期相同。

適當?shù)刂С挚s放操作。如果放大和縮小對于當前內(nèi)容是有用的話,你可以支持用戶通過捏或者雙擊來對當前視圖進行縮放。而若是支持了縮放操作的話,你還應(yīng)當設(shè)定在當前情景下允許縮放的最大值和最小值。如果你允許一個字符被放大到充滿整個屏幕的話,用戶會很難閱讀當前內(nèi)容。 在頁模式滾動視圖中,可以考慮使用頁面控件(page control)。當你想要展示分頁、分屏或者分塊的內(nèi)容,最好是讓用戶知道當前內(nèi)容一共有多少塊,以及他們當前瀏覽的是第幾個——頁面控件以圓點的形式來把這個信息告訴用戶。同時由于頁面控件被廣泛用于Safari,股票,天氣以及其它系統(tǒng)內(nèi)置應(yīng)用中,用戶很容易理解它的用途。 當你在滾動視圖中使用頁面控件的時候,最好禁用同一方向的滾動指示器(scroll indicator)。這樣一來用戶就有了一種唯一且清晰的方式來瀏覽當前內(nèi)容。想要了解更多請參考Page Control. 一般來說,一次只展示一個滾動視圖。如果在一屏中同時存在不止一個滾動視圖,由于用戶滾動屏幕時動作幅度經(jīng)常都會很大,他們很容易會碰到另一個。如果你確實要在同屏中放兩個滾動視圖,可以考慮給他們設(shè)定不同的滾動方向,來避免用戶想要滾動一個視圖的時候誤操作。比如iPhone上的股票應(yīng)用,縱向滾動上半部分會展示股票報價,橫向滾動下半部分時則展示該公司的特定信息。

分離視圖控制器

分離視圖控制器是一個全屏的視圖控制器,它管理著兩級視圖。

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

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

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

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

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

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

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

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

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

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

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

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

表格視圖

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

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

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

表格視圖:

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

iOS 定義了兩種表格樣式:

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

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

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

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

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

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

視圖元素 名稱 含義
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/check_2x.png" alt="" /> 對號 指示這行被選中。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/disclosure_indicator_2x.png" alt="" /> 指示符號 顯示另一個與這行相關(guān)的表。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/detail_disclosure_2x.png" alt="" /> 細節(jié)提示按鈕 在新視圖中顯示與這行有關(guān)的更多細節(jié)(了解如何運用這個元素,查看popover
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/row_reorder_2x.png" alt="" /> 行排序 指示該行可以在表中被拖拽到其他位置。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/row_insert_2x.png" alt="" /> 增加行 給表加一個新的行。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/delete_control_2x.png" alt="" /> 刪除按鈕控件 在編輯狀態(tài)下,顯示和隱藏刪除一行”按鈕。
http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/delete_button_2x.png" alt="" /> 刪除按鈕 刪除行。

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

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

默認型(Default)(UITableViewCellStyleDefault) 默認型樣式包括左側(cè)的圖標(可選),和圖標右邊左對齊的文字標題。 默認型樣式適合展示一系列無須通過附加信息便可以區(qū)分的項。

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

副標題型(Subtitled)(UITableViewCellStyleSubtitle) 副標題型包括左側(cè)圖標(可選),圖標右邊左對齊展示的文字標題,以及在標題下方同樣左對齊展示的副標題。 左對齊的文本標簽讓用戶可以更快速地掃視表格。這種樣式適用于列表各項較為相似的情況,用戶可以通過副標題中的詳細信息來區(qū)分列表中的各項。

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

Value 1 (UITableViewCellStyleValue1) 在Value 1樣式下,標題左對齊,副標題用較細的字體右對齊。

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

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

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

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

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

  • 展示用戶可選的選項列表。你可以使用選中標記來告知用戶當前選中了哪些項。
  • 展示層級信息。平鋪型表格樣式非常適合展示層級信息。表格中的每項都指向不同的子信息,這些子信息承載于另一個列表中。用戶可以沿著這些層級結(jié)構(gòu)的路徑來點擊每一層列表中的項。展開標志告知用戶點擊這一列中的任何位置,都將展開新的列表以展示其子類信息。
  • 展示可以在概念上進行分組的信息。平鋪型和分組型列表都允許你通過提供頁眉和頁腳來對信息進行分組和分段。

你可以用頁眉頁腳視圖(header-footer view)——即UITableViewHearderFooterView中的一個實例——來展示頁眉和頁腳的文字,或圖片。想要了解如何在代碼中定義頁眉頁腳視圖,請參考UITableViewHeaderFooterView Class Reference.

展示索引來方便查找。平鋪型列表支持索引,可以讓用戶快速地找到需要的內(nèi)容。索引信息包含一個浮在屏幕右側(cè)的、縱向羅列的條目,內(nèi)容則通常是字母表中的字母。 如果你使用了索引,要避免在表格右側(cè)使用其它表格視圖元素——比如展開指示符——因為它們與索引是沖突的。

使用表格視圖時可遵循以下指南:

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

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

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

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

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

盡量使用簡潔的文字標簽,以避免被截斷。繁冗的文字和詞組不方便用戶瀏覽和理解。以上所有單元格樣式均會自動截斷文本,而文本截斷所造成的問題可大可小,取決于你采用的單元格樣式,以及被截斷了哪一部分文字。
如果你想以一種非標準的形式來布局你的表格,最好是自定義一種單元格樣式,而不是在現(xiàn)有的表格樣式上進行改動。

文本視圖

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

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

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

文本視圖:

  • 文本視圖是矩形,可定義為任何高度。
  • 當內(nèi)容太多超出視圖的邊框時,文本視圖支持滾動。
  • 如果文本視圖支持用戶編輯,當用戶輕擊文本視圖內(nèi)部時,將喚起鍵盤。鍵盤的布局和類型取決于用戶的系統(tǒng)語言設(shè)置。

你可以控制文本視圖中文字的字體、顏色和對齊方式。文本視圖的默認字體是系統(tǒng)字體,默認字色是黑色。默認文字對齊方式是左對齊(你可以改為居中或右對齊)。 始終確保文字的易讀性。雖然你可以使用屬性字符串將不同的字體、字色和對齊方式串聯(lián)在同一個文本視圖內(nèi),但保持文本的可讀性是必不可少的。最好是可以支持動態(tài)文本(Dynamic Type)和UIFont method preferredFontForTextStyle來展示文本框中的文本。想要了解動態(tài)文本的更多支持引導,參考Text Should Always Be Legible;編程信息,參考Text Styles
根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型。舉例來說,你希望用戶能更方便地輸入網(wǎng)址、密碼或者電話號碼。但請注意,由于鍵盤的布局以及輸入方法是由用戶的系統(tǒng)語言設(shè)置決定的,這是你不能控制的。
iOS 提供了各種不同的鍵盤類型,以便用戶輸入不同類型的文本。想要了解可用鍵盤類型,可以參考UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤,請參考 iOS App Programming Guide 中的 Managing the Keyboard 部分。

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

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

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

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

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

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