鍍金池/ 教程/ iOS/ 內(nèi)容視圖
錢包
iCloud
控件
適應(yīng)性和布局
編輯菜單(Edit Menu)
從概念到產(chǎn)品
啟動與停止
3D 觸摸
VoiceOver
Live Photos
HomeKit
臨時視圖
游戲中心(Game Center)
快速查看(Quick Look)
交互性與反饋
與 iOS 的整合
鍵盤和輸入頁面(Keyboards and Input Views)
iAd 富媒體廣告(iAd Rich Media Ads)
術(shù)語和措辭
HealthKit
案例學(xué)習(xí):從桌面到 iOS
導(dǎo)航
撤銷與重做(Undo and Redo)
研究型應(yīng)用程序
社交媒體
蘋果的移動支付平臺
圖標(biāo)和圖形
iOS 應(yīng)用解析
為 iOS 而設(shè)計
路線選擇(Routing)
設(shè)計原則
應(yīng)用內(nèi)購買服務(wù)(In-App Purchase)
品牌推廣
動畫
聲音(Sound)
多任務(wù)處理
內(nèi)容視圖
應(yīng)用擴展
通知
訪問用戶數(shù)據(jù)(Accessing User Data)
無線打印 (AirPrint)
模態(tài)情境
顏色與字體

內(nèi)容視圖

活動

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

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

API 注釋

想要了解如何在代碼中定義活動,請參考 UI Activity Class Reference.想要了解如何將活動視圖控制器整合到你的應(yīng)用中,請參考 Activity View Controller.

動作與分享擴展程序也可以在活動視圖控制器中展示。想要了解更多關(guān)于這些擴展程序的內(nèi)容,請參考 Share and Action Extensions.

活動是:

  • 一種可定制對象,代表著某個可以讓用戶在 app 中執(zhí)行操作的服務(wù)
  • 以圖標(biāo)的形式呈現(xiàn),外觀與欄按鈕圖標(biāo)相似

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

用戶通過點擊活動的圖標(biāo)來啟動某樣活動。點擊之后該項服務(wù)通常會立刻執(zhí)行,當(dāng)這項服務(wù)過于復(fù)雜時,系統(tǒng)將會進一步索取更多的信息之后才會為用戶執(zhí)行該服務(wù)。

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

為你應(yīng)用的各種服務(wù)設(shè)計一套精簡的線性模板圖標(biāo)(Template image)。后臺會將會把這種模板圖標(biāo)作為剪影遮罩,組合成用戶最終看到的圖標(biāo)效果。想設(shè)計出好看的模版圖標(biāo),可以遵循以下原則:

  • 使用透明度適當(dāng)?shù)暮谏虬咨?/li>
  • 不要使用陰影
  • 進行抗鋸齒處理 一個活動模版圖大小應(yīng)該保持在70×70像素左右(高分辨率下),在區(qū)域里居中顯示。

為每一個活動設(shè)計清晰簡練的文字標(biāo)題。標(biāo)題將會出現(xiàn)在活動菜單圖標(biāo)的下方。一般來說短標(biāo)題效果最好,因為它在屏幕上的顯示效果更好并且更容易本地化。如果你的標(biāo)題文字過長,iOS 會將縮小文本,仍然過長的話則會被截斷。一般而言,最好能避免在活動標(biāo)題中提及你的公司或產(chǎn)品名稱。

活動視圖控制器

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

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

API 注釋

想要了解如何在代碼中定義活動視圖控制器,請參考 UIActivityView Class Reference.想要了解如何設(shè)計一個提供自定義服務(wù)的活動菜單,請參閱上文中關(guān)于活動彩蛋的內(nèi)容。

活動視圖控制器:

  • 顯示了讓用戶可以針對當(dāng)前內(nèi)容執(zhí)行操作的一系列的可配置服務(wù)
  • 根據(jù)所處的場景不同,可能出現(xiàn)在操作列表或浮出層中 使用活動視圖控制器來為用戶提供一系列針對當(dāng)前內(nèi)容的服務(wù)。這些服務(wù)可以是系統(tǒng)自帶的,比如復(fù)制,分享到 twitter,打印等等,也可以是自定義的?;顒右晥D控制器通常用作讓用戶把他們選中的內(nèi)容復(fù)制到他們的社交媒體賬戶上。

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

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

注意

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

集合視圖

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

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

API 注釋

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

集合視圖:

  • 可包含裝飾視圖,以從視覺上區(qū)分項的子集或者提供裝飾性項目,例如自定義背景。
  • 布局切換時支持自定義轉(zhuǎn)場動畫。(默認(rèn)情況下,當(dāng)用戶導(dǎo)入、移動或者刪除項的時候,會出現(xiàn)系統(tǒng)默認(rèn)的動畫效果。)
  • 支持開發(fā)者額外定義手勢識別來執(zhí)行自定義操作。默認(rèn)情況下,集合視圖可以識別輕擊(tap)某項以選中,和長按(touch-and-hold)某項進行編輯。 使用集合視圖來讓用戶查看和操作一系列不適合以列表形式呈現(xiàn)的項。由于集合視圖的布局不是一個嚴(yán)格的線性布局,因此尤其適合用來展示一些尺寸不一致的項。

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

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

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

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

容器視圖控制器

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

API 注釋

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

容器視圖控制器不存在任何預(yù)先定義好的外觀或者行為。

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

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

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

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

圖片視圖

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

API 注釋

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

圖片視圖:

  • 不存在任何預(yù)先定義好的外觀,同時在默認(rèn)狀態(tài)下它不支持用戶的交互行為。
  • 可以檢測圖片本身及其父視圖(parent view)的屬性,并決定這個圖片是否應(yīng)該被拉伸、縮放、調(diào)整到適合屏幕的大小,或者固定在一個特定的位置。 在iOS 7及以上版本里,包含了模版圖片(template image)的圖片視圖會把當(dāng)前的色調(diào)(tint color)應(yīng)用到圖片上。

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

地圖視圖

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

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

API 注釋

想要了解如何在代碼中定義圖片視圖,請參考 MapKit Framework Reference.

地圖視圖:

  • 通常以標(biāo)準(zhǔn)地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來展示地理區(qū)域
  • 可以展示以單點標(biāo)注的備注,以及疊加圖層(繪制路徑或二維區(qū)域繪制輪廓的)
  • 支持編程時定義的,或用戶所控制的縮放和移動 利用地圖視圖可以給用戶提供一個可交互的地理區(qū)域視圖。如果你在開發(fā)一個導(dǎo)航類應(yīng)用(routing app),可以使用地圖視圖來展示你給用戶的路徑。

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

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

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

頁面視圖控制器

頁面視圖控制器通過滾動(Scrolling)或翻頁 (Page-curl transition style)兩種方式來處理長度超過一頁的內(nèi)容。下圖是 iOS 模擬器中的翻頁樣式:

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

API 注釋

想要了解如何在代碼中定義圖片視圖,請參考 Page View Controllers.

頁面視圖控制器:

  • 帶滾動條的頁面視圖控制器沒有默認(rèn)的外觀。 帶翻頁效果的控制器可以在兩頁中間增加書脊(book spine)的效果

  • 可以根據(jù)指定的轉(zhuǎn)場來模擬出頁面切換時的動畫。 使用滾動條效果的時候,當(dāng)前頁面將滾動到下一頁;而使用翻頁效果時,頁面上會出現(xiàn)一個模擬實體書或筆記本翻頁效果的翻頁動畫

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

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

浮出層

浮出層是當(dāng)用戶輕點某個控件或頁面中的某一區(qū)域時浮出的,半透明的臨時視圖。

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

API 注釋

在 iOS 8 以及以上版本里,你可以使用 UIPopoverPresentationController 來展示一個浮出層。UIPopoverPresentationController 定義了一種委托,讓你可以調(diào)整浮出層的內(nèi)容樣式,讓它能夠更好地適應(yīng)當(dāng)前的屏幕內(nèi)容。舉個例子,在橫屏視圖中,你的內(nèi)容可能會全部承載在浮出層內(nèi)部;而在豎屏的情況下,浮出層可以以一種全屏模態(tài)視圖的樣式出現(xiàn)。

浮出層:

  • 是一個自包含的模態(tài)視圖
  • 在橫屏環(huán)境中,浮出層會包含一個箭頭,指向其出處
  • 背景是半透明的,并且會模糊其背后的內(nèi)容(毛玻璃效果)
  • 可以包含多種對象和視圖,比如:
  • 表格,圖片,地圖,文本,網(wǎng)頁或者自定義視圖
  • 導(dǎo)航欄,工具欄,和標(biāo)簽欄
  • 可以操作當(dāng)前 app 視圖中的對象的各種控件或?qū)ο?(默認(rèn)情況下, 浮出層中的表格視圖,導(dǎo)航欄和工具欄的背景都是透明的,這樣會讓浮出層的毛玻璃效果展示出來)

在橫屏的情況下,動作列表總是出現(xiàn)在浮出層里。

使用浮出層來展示與當(dāng)前焦點或被選中對象相關(guān)的額外信息,或者相關(guān)的一系列項。

重要

這一個部分的指引僅適用于在橫屏情況下的 UI 與用戶體驗。如果你想在豎屏環(huán)境中展示全屏的浮出層,請參閱下文中的模態(tài)視圖相關(guān)內(nèi)容。

避免提供“取消浮出層”按鈕。浮出層應(yīng)當(dāng)在它不需要的時候自動關(guān)閉。如果要決定什么時候不再需要浮出層,請考慮如下場景:

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

一般來說,在用戶點擊浮出層以外的區(qū)域的時候,保存用戶輸入的內(nèi)容。不是每一個浮出層都會讓用戶明確地確認(rèn)取消操作,因此用戶可能會誤操作。只有當(dāng)用戶點擊“取消”按鈕時,才清空他們在浮出層中輸入的內(nèi)容。

讓浮出層中的箭頭盡可能直接地指向其出處。這樣有助于用戶這個浮出層是從哪里來的,以及他們與哪些任務(wù)和對象相關(guān)。

確保用戶在看不到浮出層背后的內(nèi)容的時候仍然能順利使用浮出層。浮出層會模糊背后的內(nèi)容而且用戶不能把它拖拽到其它位置。

確保同一時間內(nèi)屏幕上只有一個浮出層。你不應(yīng)該同時展示超過一個浮出層(或者外觀和行為跟浮出層很相似的模態(tài)視圖)。尤其應(yīng)當(dāng)避免同時展示一連串或者一系列浮出層,從一個浮出層中彈出另一個浮出層。

不要在浮出層上面再展示一個模態(tài)視圖。除了告警框(alert)外,浮出層中不應(yīng)當(dāng)有任何模態(tài)視圖。

可能的話,讓用戶可以僅點擊一下就關(guān)閉當(dāng)前浮出層并開啟一個新的浮出層。這在若干欄按鈕每個都會喚起一個浮出層的時候尤其好用,因為它減少了用戶的額外點擊。

不要把浮出層設(shè)計得太大。浮出層不應(yīng)當(dāng)占據(jù)整個屏幕。相反,它的大小應(yīng)當(dāng)恰好能承載當(dāng)中的內(nèi)容,又能清楚地指向浮出層的喚起出處。浮出層的高度是不固定的,因此你可以用它來承載一個很長的項目列表。但一般來說,還是應(yīng)當(dāng)避免需要滾動浮出層才能開啟一個任務(wù)。請注意,系統(tǒng)可能會調(diào)整浮出層的寬高,以讓它能夠更好地適應(yīng)屏幕的尺寸。

在浮出層中使用標(biāo)準(zhǔn)的 UI 控件和視圖。一般來說,包含標(biāo)準(zhǔn)控件和視圖的浮出層看上去最理想,而且更容易讓用戶理解。

確保自定義浮出層仍然長得像一個浮出層。盡管使用 UIPopoverBackgroundView API 能夠很容易自定義浮出層的多種外觀屬性,還是應(yīng)當(dāng)避免設(shè)計出一個用戶可能無法辨識的浮出層外觀。如果你對浮出層的改動過大,用戶就不能憑借之前的經(jīng)驗來理解如何用你的 app 里的浮出層了。

當(dāng)浮出層可見的時候,想要改變它的尺寸的話請務(wù)必謹(jǐn)慎。當(dāng)你要在浮出層里展示同樣信息的精簡或拓展視圖時,你可能需要改變浮出層的大小。當(dāng)你一定要這么做的時候,使用轉(zhuǎn)場動畫往往是個好主意,因為這不會讓人覺得一個新的彈出窗口取代了原來的窗口。

滾動視圖(Scroll View)

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

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

API 注釋

想要了解如何在代碼里定義滾動視圖,請參考 UIScrollView.

滾動視圖:

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

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

在頁模式滾動視圖中,可以考慮使用頁面控件(page control)。當(dāng)你想要展示分頁、分屏或者分塊的內(nèi)容,可以使用頁面控件來讓用戶知道當(dāng)前內(nèi)容一共有多少塊,以及他們當(dāng)前瀏覽的是第幾個。

當(dāng)你在滾動視圖中使用頁面控件的時候,最好禁用同一方向的滾動指示器(scroll indicator)。這樣一來可以讓用戶聚焦到頁碼控件上,并讓他們有了一種唯一且清晰的方式來瀏覽當(dāng)前內(nèi)容。想要了解更多,請參考下文控件中的頁面控件部分內(nèi)容。

一般來說,一次只展示一個滾動視圖。由于用戶滾動屏幕時動作幅度經(jīng)常都會很大,如果在一屏中同時存在不止一個滾動視圖,他們很容易會碰到另一個。如果你確實要在同屏中放兩個滾動視圖,可以考慮給他們設(shè)定不同的滾動方向,來避免用戶想要滾動一個視圖的時候誤操作。比如 iPhone 上的股票應(yīng)用,縱向滾動上半部分會展示股票報價,橫向滾動下半部分時則展示該公司的特定信息。

分欄視圖控制器

分欄視圖控制器是一個用于管理兩個相鄰視圖控制器顯示的全屏視圖控制器。

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

API 注釋

每一個對分視圖控制器的子視圖負(fù)責(zé)管理一個窗格的展現(xiàn)。對分視圖控制器本身負(fù)責(zé)展示這些子視圖控制器與管理不同屏幕方向下對分視圖的轉(zhuǎn)場效果。想要了解更多如何在代碼里定義對分視圖,請參考 UISplitViewController Class ReferenceSplitControllers.

在 iOS 7 及之前的版本里,對分視圖控制器僅適用于 iPad.

默認(rèn)情況下,對分視圖控制器通過當(dāng)前的尺寸來管理其子視圖。舉個例子,對分視圖:

  • 可以在橫屏環(huán)境中展示并排展示兩個窗格
  • 可以讓主窗格在詳情窗格上方顯示,也可以在不需要的時候(尤其是豎屏情況下)隱藏主窗格。 你可以指定特殊的展示環(huán)境下對分視圖的版式,并且通過請求對分視圖控制器聚焦于這個版式,以此改變窗格的排列方式。

對分視圖控制器包含廣泛的對象和視圖,諸如:

  • 表格,圖像,地圖,文本,網(wǎng)絡(luò),或自定義視圖
  • 導(dǎo)航欄,工具欄,或標(biāo)簽欄 注意

即使左側(cè)窗格通常被稱為主窗格,右側(cè)窗格被稱為詳情窗格,但在代碼中并沒有強制固定這種從屬關(guān)系。

使用對分視圖控制器,在左側(cè)主窗格展示固定的信息,在右側(cè)詳情窗格展示相關(guān)的詳情或從屬信息。以這種設(shè)計模式,當(dāng)用戶選擇類主視圖中的某一項,右側(cè)詳情窗格應(yīng)當(dāng)展示相應(yīng)與這一項相關(guān)的內(nèi)容。(你應(yīng)當(dāng)在代碼中實現(xiàn)這個效果。)

避免創(chuàng)建一個比主窗格更窄的詳情窗格。如果右側(cè)詳情窗格比左側(cè)主窗格窄,對分視圖控制器將不能占滿整個屏幕,產(chǎn)生視覺不平衡的整體效果。

避免在兩側(cè)窗格中都同時展示導(dǎo)航欄。這樣會讓用戶很難分清這兩個窗格的從屬關(guān)系。

一般來說,始終顯示左側(cè)主窗格中當(dāng)前選中的項。盡管右側(cè)窗格中的內(nèi)容會變化,但它應(yīng)當(dāng)始終保持著與當(dāng)前選中窗格的相關(guān)性。這樣的體驗有助于用戶理解左側(cè)窗格項與右側(cè)窗格內(nèi)容的關(guān)系。

合適的話,給用戶提供不止一種獲取主窗格的方式。默認(rèn)情況下,豎屏方向時只會展示右側(cè)窗格,因此你需要向用戶提供一個按鈕(通常位于導(dǎo)航欄上)來讓用戶喚起和隱藏主窗格。對分視圖控制器也支持輕掃手勢來執(zhí)行呼出和隱藏的動作。除非你的 app 有定義輕掃的手勢執(zhí)行其他功能,否則你應(yīng)當(dāng)支持用戶輕掃以喚起左側(cè)窗格。

表格視圖

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

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

API 注釋

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

表格視圖:

  • 以容易進行分段或分組的單列形式展示數(shù)據(jù)
  • 用戶可以通過點擊來選中某行,或通過控件來添加、移除、多選、查看詳情或者展開另一個表格視圖 iOS 定義了兩種表格樣式:

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

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

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

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

在這兩種樣式中,當(dāng)用戶選中某一行時,該行會短暫地高亮。當(dāng)選中某行將展開另外一屏內(nèi)容的時候,該行會短暫地高亮,然后新一屏內(nèi)容滑入。當(dāng)用戶回到前一屏?xí)r,之前選中的那一行同樣會短暫地高亮,提醒用戶他們先前選中了什么(但并不會一直保持高亮)。 除了以上表格中列舉的元素外,iOS 定義了刷新控件,讓用戶可以刷新當(dāng)前的表格內(nèi)容。想要了解更多關(guān)于刷新控件的用法,可以參考文檔本章第三節(jié)控件中的刷新控件。iOS 提供了若干表格視圖元素(table-view elements)來擴展表格視圖的功能。除了特別標(biāo)明外,這些元素只適用于表格視圖。

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

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

重要

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

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

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

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

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

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

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

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

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

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

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

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

重要

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

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

  • 展示用戶可選的選項列表。你可以使用選中標(biāo)記來告知用戶當(dāng)前選中了哪些項。 無論是平鋪型還是分組性,用戶點擊某一行中的某一項時都可以顯示一個選項列表。當(dāng)用戶點選了一個不屬于表格行的按鈕或者其他 UI 元素的時候,可以使用平鋪型表格視圖來展示喚起的選項列表。

  • 展示層級信息。平鋪型表格樣式非常適合展示層級信息。表格中的每項都指向承載于另一個列表中的不同子信息。用戶可以沿著這些層級結(jié)構(gòu)的路徑來點擊每一層列表中的項。以展開標(biāo)志告知用戶點擊這一列中的任何位置,都將展開新的列表以展示其子類信息。
  • 展示可以在概念上進行分組的信息。平鋪型和分組型列表都允許你通過提供頁眉和頁腳來對信息進行分組和分段。 你可以用頁眉頁腳視圖(header-footer view)——即 UITableViewHearderFooterView 中的一個實例——來展示頁眉和頁腳的文字,或圖片。想要了解如何在代碼中定義頁眉頁腳視圖,請參考 UITableViewHeaderFooterView Class Reference.

使用表格視圖時,可遵循以下這些指引:

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

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

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

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

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

盡量使用簡潔的文字標(biāo)簽,以避免被截斷。繁冗的文字和詞組不方便用戶瀏覽和理解。以上所有單元格樣式均會自動截斷文本,而文本截斷所造成的問題可大可小,取決于你采用的單元格樣式,以及被截斷了哪一部分文字。

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

文本視圖

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

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

API 注釋

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

文本視圖:

  • 是一個可定義為任何高度的矩形
  • 當(dāng)內(nèi)容太多超出視圖的邊框時,文本視圖支持滾動
  • 支持自定義字體、顏色和對齊方式(默認(rèn)情況下,文本視圖會以左對齊的黑色系統(tǒng)字體顯示)
  • 可以支持用戶編輯,當(dāng)用戶輕擊文本視圖內(nèi)部時,將喚起鍵盤(鍵盤的布局和類型取決于用戶的系統(tǒng)語言設(shè)置) 始終確保文字的易讀性。雖然你可以使用屬性字符串將不同的字體、字色和對齊方式串聯(lián)在同一個文本視圖內(nèi),但保持文本的可讀性是必不可少的。最好是可以支持動態(tài)文本(Dynamic Type)和 UIFont method preferredFontForTextStyle 來展示文本框中的文本。想要了解更多動態(tài)文本的指引,可以參閱本文第一章中顏色與字體里的部分;想要了解更多編程相關(guān)的內(nèi)容,可以參閱 Text Styles.

根據(jù)輸入內(nèi)容的類型來指定不同的鍵盤類型。舉例來說,你希望用戶能更方便地輸入網(wǎng)址、密碼或者電話號碼。但請注意,由于鍵盤的布局以及輸入方法是由用戶的系統(tǒng)語言設(shè)置決定的,這是你不能控制的。

iOS 提供了各種不同的鍵盤類型,以便用戶輸入不同類型的文本。想要了解可用鍵盤類型,可以參考 UIKeyboardType.想要了解如何在管理你的應(yīng)用中的鍵盤,請參考 Managing the Keyboard.

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

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

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

API 注釋

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

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

  • 展示網(wǎng)絡(luò)內(nèi)容
  • 會自動處理頁面中的內(nèi)容,比如把頁面中的電話號碼轉(zhuǎn)化成電話鏈接(譯者按:phone link,點擊之后 iPhone 將自動撥打該號碼)。 如果你有一個網(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)容,因此我們并不推薦你在自己的 app 里復(fù)制這種以被廣泛應(yīng)用的功能。