IOS 9人機界面指南（4）：UI元素

 　　4.1 欄

　　4.1.1 狀態欄

　　狀態欄展示了關於設備及其周圍環境的重要信息。

　　默認(深色)內容

　　淺色

　　狀態欄：

　　是透明的

　　始終固定在整個屏幕的上邊緣

　　不要創建自定義狀態欄。

　　用戶依賴系統默認狀態欄的一致性。就算你可能會在應用中隱藏它，也不宜定制一個新的UI來代替原有系統狀態欄。

　　避免滾動內容直接透過狀態欄顯示。

　　你不會希望用戶在滾動的時候看到五花八門的內容和狀態欄自身的元素混合在一起。想要讓用戶感受到內容區域夠大的同時，最大限度地保證可讀性，請保證在狀態欄後面添加一塊背景，用以模糊出現在狀態欄後的內容。以下有一些方法可以讓滾動的內容能正常顯示在狀態欄後面：

　　使用導航控制器(navigation controller)來展示內容。導航控制器自動展示狀態欄背景，同時能確保內容視圖不會出現在狀態欄後面。(了解更多請參考 Navigation Controllers)。

　　在狀態欄後面放一個低調的、不會搶走用戶注意力的自定義圖形——比如一道漸變。想要保證這樣的圖形始終固定在狀態欄後面，你可以用視圖控制器(view controller)來讓它固定在滾動內容上一層，又或者可以用滾動視圖(scrolling view)來保證圖形固定在屏幕的頂部。

　　讓內容固定在導航欄區域外顯示(這個區域由應用的statusBarFrame屬性來定義)。如果你確定要這樣做的話，請給導航欄區域添加固定的、與屏幕背景色相同的背景色。

　　千萬千萬，避免在狀態欄後面疊加會分散注意力的內容。

　　 尤其是，你不能讓用戶覺得輕擊狀態欄之後可以獲取內容或激活你的應用中的控件。

　　隱藏狀態欄時請慎重。

　　由於狀態欄是透明的，通常情況下不需要隱藏它。始終隱藏狀態欄意味著用戶必須退出你的應用才能知道現在的時間，或者了解當前環境下是否有Wi-Fi連接。

　　在用戶全屏觀看媒體時，考慮隱藏狀態欄以及所有頁面UI。

　　當你這麼做的時候，請確保用戶在輕擊屏幕時即可重新喚起狀態欄以及相關的UI。而除非你有充分的理由，否則最好不要重新定義一個手勢來讓用戶喚起狀態欄，因為用戶不會發現，就算發現了也難以記住。

　　為你的應用選擇配色協調的狀態欄顏色。

　　默認的狀態欄內容是黑色的，在淺色應用中效果出色，而相應的淺色狀態欄則更適用於顏色較深的應用。

　　在適當的時候展示網絡活動指示器（network activity indicator）。

　　這可以提醒用戶顯示長時間的網絡接入狀態。更多詳情請參考本章第三節控件部分的網絡活動指示器部分(Network Activity Indicator)。

　　4.1.2 導航欄

　　導航欄能夠實現在應用不同信息層級結構間的導航，有時候也可用於管理當前屏幕內容。

　　導航欄：

　　是半透明的

　　通常位於屏幕的上方，狀態欄正下方。在橫屏視圖中，導航欄也可以包含在某一視圖中，不需要與整個屏幕等寬，比如說它可以出現在對分視圖控制器(split view controller)的其中一側。

　　當鍵盤被喚起、用戶使用了手勢、或者當前視圖變為豎屏的情況下，導航欄可以隱藏。

　　可以填充顏色(使用tintColor來定義導航欄中的圖標與文字顏色;使用 barTintColor來填充導航欄背景色)

　　你可以用導航欄在不同視圖間提供導航，或在上面放置管理當前視圖內容的相關控件。如果你需要提供導航欄難以承載的大量控件同時又不是非要提供導航不可，你可以考慮使用工具欄(Toolbar)。

　　當用戶到達一個新的層級，導航欄需要做出這樣的改變：

　　導航欄標題應該變成當前層級的標題。

　　當前標題左側放置應有返回按鈕，需要的話，返回按鈕可以以前一層級的標題命名。

　　使用當前視圖的標題作為導航欄標題。

　　若覺得標題冗余，你也可以將標題留空。舉個例子，備忘錄的導航欄中就沒有當前備忘錄的標題，因為備忘錄的第一行就已經提供了所有用戶需要的內容。

　　考慮在應用最高層級的導航欄中放置一個分段控件。

　　它能夠幫助你更好地扁平信息層級，也會讓用戶更容易找到所需內容。如果在導航欄中使用了分段控件，請確保返回按鈕標題命名的准確。(更多使用指引請參閱本章第三節中的分段控件。)

　　如果需要的話，可以考慮在導航欄位置使用提示語(prompt)來告訴用戶在當前屏幕中他們可以做什麼。提示語是一句出現在導航欄頂部的短句。舉個例子，股票應用(Storcks)中就給用戶提供了這麼一句提示，來確保用戶知道怎麼去搜索自己想要的信息。

　　如果你需要用到提示語，請設計一句簡明扼要的單句，並在句末配以適當的標點符號。

　　即使空間充足，也應當避免讓過多的控件填滿你的導航欄。

　　一般來說，導航欄上應該不多於以下三個元素：當前視圖的標題、返回按鈕和一個針對當前的操作控件。而當你在導航欄中使用了分段控件，就不要再放標題以及其它多余控件了。

　　確保文字按鈕之間擁有足夠的空間。

　　如果導航欄左邊或右邊的文字按鈕之間的間距太小，那些文字看起來會像擠在一起一樣，讓用戶難以區分。如果按鈕在導航欄中顯得太過擁擠，你可以使用UIBarButtonSystemItemFixedSpace常數來給他們增加適當的間距。(想要了解更多關於這個常數的內容，請參考 UIBarButtonItem Class Reference.)

　　確保你自定義的導航欄在你的應用的每個視圖中都擁有一致的外觀與體驗。

　　舉個例子，不要在同一個應用中使用不透明導航欄和半透明工具欄。在屏幕處於同一方向時，最好不要改變不同屏上導航欄的背景圖片、顏色和透明度。

　　確保你自定義的返回按鈕的外觀與操作仍然像一個返回按鈕。

　　用戶知道系統默認的返回按鈕能幫助他們在信息層級中追蹤自己的路徑，如果你想重新設計它，請確保使用一個自定義的蒙版圖層 (custom mask image)，它可以在iOS中讓這些按鈕標題在系統各轉場中出現或者消失。

　　重要

　　不要創建多段式(multisegment)返回按鈕。返回按鈕通常是用來幫助用戶回到當前層級的父層級中去的。如果你擔心用戶在沒有了這種多節式的、如同面包屑一般的返回按鈕後會迷路，那麼你也許該好好考慮如何扁平你的信息層級了。

　　在用戶需要專注於內容的時候，可以考慮隱藏導航欄。

　　當你這麼做的時候，請確保用戶通過一個簡單的手勢(比如一下輕擊)即可重新喚起導航欄。

　　4.1.3 工具欄

　　工具欄上放置著用於操作當前屏幕中各對象的控件。

　　工具欄：

　　是半透明的

　　在iPhone上，工具欄始終位於屏幕底部，而在iPad上則有可能出現在頂部

　　當鍵盤被喚起、用戶使用了手勢、或者當前視圖變為豎屏的情況下，工具欄可以隱藏。

　　你可以在工具欄裡提供一系列讓用戶對當前視圖內容進行操作的工具。

　　在工具欄裡放置用戶在當前情景下最常用的指令。

　　盡量避免在工具欄裡提供一些僅會偶爾用到的指令。

　　可以在工具欄裡放置分段控件以方便用戶快速切換當前內容的不同視圖或模式。

　　在工具欄中提供應用全局的任務或者模式分段控件是不恰當的，因為工具欄中的所有操作都應當是針對當前屏幕和視圖的。如果你需要讓用戶可以快速喚起應用全局的任務、或改變全局視圖和模式，可以使用標簽欄(Tab Bar)。想要了解更多分段控件的內容，請參考下文的分段控件(Segmented Control)部分;想要了解更多標簽欄的內容，請參考下文中的標簽欄(Tab Bar)部分。

　　如果需要在工具欄上展示3個以上的項目，可以使用圖標。

　　由於文本按鈕通常會比圖標更占空間，所以用圖標可以避免文字標題們擠在一起。

　　保證工具欄文字按鈕之間有足夠的間距。

　　如果按鈕之間間距過小，會讓蚊子看起來擠在一起，讓用戶覺得它們難以區分。如果按鈕在導航欄中顯得太過擁擠，可以用UIBarButtonSystemItemFixedSpace常數來增加他們之間的間距。(想要了解更多關於這個常數的內容，請參考UIBarButtonItem Class Reference.)

　　4.1.4 工具欄與導航標准按鈕

　　iOS提供了一系列工具欄與導航欄上的內置標准按鈕。想要了解如何設計自定義圖標，請參考本文第五章欄按鈕圖標(Bar Button Icons)部分。工具欄和導航欄圖標的顏色可以通過tintColor屬性來設定。

　　想要了解每一個按鈕所對應的標志名稱及其含義，請參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItem部分。

　　重要

　　跟所有標准按鈕和圖標相同，應當根據文檔中說明的圖標含義，而不是只憑圖標外觀來使用這些工具欄圖標和導航欄圖標。這樣能夠保證在關聯特定意義的按鈕改變了外觀的情況下，你的應用中的UI仍然是可用而有意義的。

　　表格 41-1 工具欄與導航欄標准按鈕 (Standard buttons available for toolbars and navigation bars)

　　除了表格41-1裡展示的標准按鈕之外，你還可以使用系統提供的編輯、取消、保存、完成、撤銷、重做等等按鈕來支持編輯或其它操作。這些按鈕的標題即是按鈕的操作內容。想要了解每一個按鈕的名稱及其含義，請參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItem.

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

　　4.1.5 標簽欄

　　標簽欄讓用戶在不同的子任務、視圖和模式中進行切換。

　　標簽欄位於屏幕底部，並應該保證在應用內任何位置都可用。標簽欄是半透明的，展示圖標和文字內容，每一項均保持等寬。當用戶選中某個標簽時，該標簽呈現適當的高亮狀態。

　　標簽欄：

　　是半透明的

　　始終出現在屏幕的底部

　　一個標簽欄一次最多可承載5個標簽(多於5個標簽的時候，可以展示前4個標簽和一個“更多”，並將其他的標簽以列表形式收納到“更多”裡面)

　　在橫屏與豎屏情況下，高度均保持一致

　　你可以在標簽上加上紅底白字，顯示數字或者省略號的小氣泡(badge)以展示特定的應用信息

　　你可以使用標簽欄來切換對同一組數據的不同視圖模式，或者整體功能下不同的子任務。

　　一般而言，使用標簽欄來組織整個應用層面的信息結構 。

　　標簽欄非常適合用於應用的主界面中，因為它可以很好地扁平信息層級，並且同時提供多個觸達同級信息類目與模式的入口。

　　不要使用標簽來讓用戶執行對於當前應用與屏幕內容的操作。

　　如果你需要給用戶提供操作控件，請使用工具欄。

　　即使標簽當前不可用，也不要把它從標簽欄中刪除。

　　讓某些標簽時而出現時而隱藏，會讓用戶覺得你的應用UI不穩定而且難以預測。最好的解決方式是確保每個標簽都可用，然後給用戶解釋某個標簽的內容不可用的原因。舉個例子，當用戶沒有在設備中保存任何歌曲，在系統音樂應用的歌曲標簽頁裡就可以教育用戶如何去下載一首歌。

　　考慮在tab上加入紅色的小氣泡（Badge）以低調地傳達信息。

　　你可以通過添加小氣泡來告知用戶該標簽中包含新的內容。

　　根據控件的標准含義來選擇系統提供 的圖標。

　　詳情請查看下文中的標簽欄標准圖標(Tab Bar Icons)。如果想自定義標簽欄圖標，請參考文檔第五章中Bar Buttons Icons裡給出的建議。

　　在橫屏視圖中，你可能會在對分視圖（split view pane）或者浮出層 （popover） 內使用標簽欄以切換或篩選視圖中的內容。

　　如果這些標簽是用於切換或者過濾當前視圖中的內容的話，你可以這麼做。然而通常情況下，在對分視圖和浮出層底部使用分段控件效果會更好，因為視覺上看起來更為協調。更多詳情請參考文檔本章第三節中的分段控件。

　　避免讓過多的標簽填滿你的標簽欄。

　　放置太多標簽會讓用戶難以選中他想要點擊的那一個。而同時每添加一個標簽，意味著你的應用程序又復雜了一分。

　　盡可能地在橫屏與豎屏情況下都展示相同數量的標簽。

　　在不同的屏幕方向下提供同樣的標簽可以讓用戶對應用建立很好的視覺穩定感。在橫屏中，你應該將與豎屏時數量相同的標簽居中展示。在橫屏中，避免使用“更多”標簽。如果應用是橫屏的，那麼把額外的操作都塞到一個“更多”裡面是對空間一種糟糕的浪費。

　　4.1.6 標簽欄標准圖標

　　iOS提供了一系列標簽欄標准圖標，在下面的表格35-2中有詳細展示。想要了解如何設計自定義圖標，請參考文檔第五章欄標准按鈕部分。標簽欄圖標的顏色可以通過tintColor屬性來設定。

　　想要了解每一個圖標的名稱及其含義，請參閱UIBarItem Class Reference中的UITabBarSystemItem部分。

　　重要

　　跟所有的標准按鈕與圖表相同，根據文檔說明的圖表含義而不是僅憑圖表外觀來使用這些圖標是很關鍵的。這樣能夠保證在關聯特定含義的按鈕改變了外觀的情況下，你的應用中的UI仍然是可用而有意義的。

　　表格 41-2 標簽欄標准按鈕 (Standard icons for use in the tabs of a tab bar)

　　4.1.7 搜索欄

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

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

　　占位符文本(Placeholder text)。占位符文本通常會寫明控件的功能(比如上圖裡的 “Search”字樣)，或者提示用戶輸入的文本將在哪裡搜索(如“Google”)。

　　書簽按鈕(The Bookmarks button)。書簽按鈕可以讓用戶方便地找到他們需要的內容。例如在地圖中搜索時，用戶可以通過書簽按鈕快速選中書簽地址、最近搜索記錄、或通訊錄。

　　書簽按鈕只有當搜索欄中沒有占位符或用戶輸入內容時才會出現，當搜索欄中已有文本時，書簽按鈕會被清除按鈕(Clear button)所代替。

　　清除按鈕(The Clear button)。大多數搜索欄都會提供清除按鈕，方便用戶一鍵清空輸入內容。

　　一旦用戶在文本框中輸入內容，清除按鈕就會出現，用戶可以用它來一鍵清空輸入內容;而當搜索框中沒有任何文本內容時，清空按鈕將被隱藏。

　　結果列表圖標(The results list icon)。結果圖標說明此次搜索有搜出結果。當用戶點擊它時會出現用戶最近一次搜索的搜索結果。

　　提示(Prompt)。描述性標題，我們稱之為提示。描述性標題是一個短而完整的句子，為搜索欄提供介紹或指引應用特定信息。

　　在你的應用中使用搜索欄讓用戶進行搜索。不要使用文本框，因為文本框的外觀不符合用戶對搜索的預期。

　　在iOS 8以及之後的版本裡，你可以通過UISearchDisplayController簡單快捷地把搜索欄放在導航欄中。請注意，當搜索的視圖控制器包含在導航控制器裡面的時候——比如在郵件應用(Mail)中那樣，當用戶激活搜索時，搜索欄會自動上浮，平鋪到原來導航欄的位置上。

　　根據搜索功能在你的應用中的重要程度來選擇搜索欄的樣式。

　　如果搜索在你的應用中是最基礎的功能，請使用突出樣式(the prominent style);如果搜索不是用戶常用的功能，那麼可以使用弱化樣式(the minimal style)。

　　4.1.8 范圍欄

　　范圍欄只有在與搜索欄一起時才會出現，它讓用戶可以定義搜索結果的范圍。

　　當搜索欄出現時，范圍欄會出現在它的附近。范圍欄的外觀與你所指定的搜索欄的外觀兼容。

　　當用戶想在明確的分類范圍內進行搜索時，使用范圍欄是非常有用的。然而，更好的選擇是優化您的搜索結果，讓用戶不需要使用范圍欄對搜索結果進行篩選，便可以找到他們所需要的內容。

　　4.2 內容視圖

　　4.2.1 活動

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

　　動作與分享擴展程序也可以在活動視圖控制器中展示。想要了解更多關於這些擴展程序的內容，請參考Share and Action Extensions.

　　活動是：

　　一種可定制對象，代表著某個可以讓用戶在app中執行操作的服務

　　以圖標的形式呈現，外觀與欄按鈕圖標相似

　　用戶通過點擊活動的圖標來啟動某樣活動。點擊之後該項服務通常會立刻執行，當這項服務過於復雜時，系統將會進一步索取更多的信息之後才會為用戶執行該服務。

　　使用活動來讓用戶執行你的應用所提供的服務。請注意，iOS本身提供了若干內置的服務，如打印，轉發到Twitter，發送信息和Airplay等等，你不需要再額外為這些內置任務創建活動。

　　為你應用的各種服務設計一套精簡的線性模板圖標(Template image)。後台會將會把這種模板圖標作為剪影遮罩，組合成用戶最終看到的圖標效果。想設計出好看的模版圖標，可以遵循以下原則：

　　使用透明度適當的黑色或白色

　　不要使用陰影

　　進行抗鋸齒處理

　　一個活動模版圖大小應該保持在70×70像素左右(高分辨率下)，在區域裡居中顯示。

　　為每一個活動設計清晰簡練的文字標題。

　　標題將會出現在活動菜單圖標的下方。一般來說短標題效果最好，因為它在屏幕上的顯示效果更好並且更容易本地化。如果你的標題文字過長，iOS會將縮小文本，仍然過長的話則會被截斷。一般而言，最好能避免在活動標題中提及你的公司或產品名稱。

　　4.2.2 活動視圖控制器

　　活動視圖控制器是一個臨時視圖，當中羅列了一系列可以針對頁面特定內容的系統服務和定制服務。

　　活動視圖控制器：

　　顯示了讓用戶可以針對當前內容執行操作的一系列的可配置服務

　　根據所處的場景不同，可能出現在操作列表或浮出層中

　　使用活動視圖控制器來為用戶提供一系列針對當前內容的服務。這些服務可以是系統自帶的，比如復制，分享到twitter，打印等等，也可以是自定義的。活動視圖控制器通常用作讓用戶把他們選中的內容復制到他們的社交媒體賬戶上。

　　不要創建一個自定義按鈕來觸發活動視圖控制器。

　　用戶更習慣點擊動作按鈕後使用系統提供的服務。你應該學會如何更好地利用用戶這一既定習慣，而不是強迫他們以一種全新的方式來完成同樣的事情。

　　確保控制器中的操作適用於當前場景。

　　你可以適當地在活動視圖控制器中增減系統操作，或增加自定義操作。例如，如果你不希望用戶打印某張圖片，你可以把打印功能從控制器中刪除。

　　注意

　　你不能改變系統默認服務在控制器中的順序。同時，所有系統服務都應該出現在自定義服務之前。

　　4.2.3 集合視圖

　　集合視圖用於管理一系列有序的項，並以一種自定義的布局來呈現它們。

　　集合視圖：

　　可包含裝飾視圖，以從視覺上區分項的子集或者提供裝飾性項目，例如自定義背景。

　　布局切換時支持自定義轉場動畫。(默認情況下，當用戶導入、移動或者刪除項的時候，會出現系統默認的動畫效果。)

　　支持開發者額外定義手勢識別來執行自定義操作。默認情況下，集合視圖可以識別輕擊(tap)某項以選中，和長按(touch-and-hold)某項進行編輯。

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

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

　　表格視圖（table view）更適用的時候，不要使用集合視圖。

　　有時候用戶會覺得以列表呈現的信息更容易閱讀和理解，例如將文本信息放在滾動列表中的時候，用戶閱讀和處理起來會更為簡單和高效。

　　讓視圖中的項更容易選中。

　　如果用戶很難點中集合視圖中的項，他們是不會願意用你的應用的。跟所有用戶可以點擊的UI對象一樣，請確保你的集合視圖中每一個項的最小點擊區域有44×44pt，尤其是在iPhone上。

　　當你要讓整個布局進行動態變化時，請務必謹慎。

　　集合視圖允許你在用戶浏覽和操作項的時候調整視圖的布局。但當你決定調整它的時候，請確保這個動態變化是有意義且容易跟蹤的。沒有明確目的而貿然改變集合視圖的布局會讓用戶對應用留下難用、不符合預期等負面的印象。更有甚者，如果用戶此時關注的項在變化中消失了，用戶會覺得這個應用超出了他們的控制能力。

　　4.2.4 容器視圖控制器

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

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

　　用容器視圖控制器來呈現內容，使用戶可以通過控制器來以自定義的方式進行導航。

　　先問問你自己是不是必須用到容器視圖控制器。

　　用戶會更習慣諸如對分視圖、或者是標簽欄視圖這類他們所熟知的東西。你必須確保你設計的控制器的優點不會由於用戶不熟悉、不認識、不會用而白費功夫。

　　確保你的容器內容控制器在橫屏與豎屏模式都可用。

　　很重要的一點是，你的容器視圖控制器無論在橫屏還是豎屏中，體驗都應該是一致的。

　　一般來說，避免太過花哨的轉場動畫。

　　如果你采用了故事板(storyboard)的設計方法來設計你的視圖控制器，你往往自然而然地會為它自定義一些動畫。但絕大多數情況下，這些花哨的轉場動畫會讓用戶分心，讓他們忘記了當前要做的事，還可能降低你的應用整體的美感。

　　4.2.5 圖片視圖

　　圖片視圖用以展示一張單獨的圖片，或者一系列動態圖片。

　　圖片視圖：

　　不存在任何預先定義好的外觀，同時在默認狀態下它不支持用戶的交互行為。

　　可以檢測圖片本身及其父視圖(parent view)的屬性，並決定這個圖片是否應該被拉伸、縮放、調整到適合屏幕的大小，或者固定在一個特定的位置。

　　在iOS 7及以上版本裡，包含了模版圖片(template image)的圖片視圖會把當前的色調(tint color)應用到圖片上。

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

　　4.2.6 地圖視圖

　　地圖視圖呈現地理數據，同時支持系統內置地圖應用的大部分功能(如下圖所示)。

　　地圖視圖：

　　通常以標准地圖、衛星圖像、或兩者結合的形式來展示地理區域

　　可以展示以單點標注的備注，以及疊加圖層(繪制路徑或二維區域繪制輪廓的)

　　支持編程時定義的，或用戶所控制的縮放和移動

　　利用地圖視圖可以給用戶提供一個可交互的地理區域視圖。如果你在開發一個導航類應用(routing app)，可以使用地圖視圖來展示你給用戶的路徑。

　　一般來說，允許用戶在視圖中進行交互行為。

　　用戶習慣了在系統內置地圖中進行交互，因此他們會有預期，能在你所提供的地圖中進行類似的行為。

　　使用標准的地圖標注顏色。

　　地圖上標注了一系列地點。因為用戶習慣了內置地圖的各個標注的顏色，所以最好避免在你的應用中重新定義這些顏色的含義。定義顏色時，請遵循以下這些標准：

　　紅色表示目的地

　　綠色表示起點

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

　　4.2.7 頁面視圖控制器

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

　　頁面視圖控制器：

　　帶滾動條的頁面視圖控制器沒有默認的外觀。

　　帶翻頁效果的控制器可以在兩頁中間增加書脊(book spine)的效果

　　可以根據指定的轉場來模擬出頁面切換時的動畫。

　　使用滾動條效果的時候，當前頁面將滾動到下一頁;而使用翻頁效果時，頁面上會出現一個模擬實體書或筆記本翻頁效果的翻頁動畫

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

　　如果需要的話，設計一種自定義的方式讓用戶可以以非線性的方式來獲取內容。

　　頁面視圖控制器讓用戶從一頁移動到前一頁或者後一頁，而並不支持用戶在並不相鄰的頁面間快速切換。如果你希望在頁面視圖控制器中展示一些非線性的內容——比如說字典，或者書籍的目錄——那麼你就需要自定義一種方式，讓用戶可以隨意地到達不同的內容區塊。

　　4.2.8 浮出層

　　浮出層是當用戶輕點某個控件或頁面中的某一區域時浮出的，半透明的臨時視圖。

　　API注釋

　　在iOS 8以及以上版本裡，你可以使用UIPopoverPresentationController來展示一個浮出層。UIPopoverPresentationController定義了一種委托，讓你可以調整浮出層的內容樣式，讓它能夠更好地適應當前的屏幕內容。舉個例子，在橫屏視圖中，你的內容可能會全部承載在浮出層內部;而在豎屏的情況下，浮出層可以以一種全屏模態視圖的樣式出現。

　　浮出層：

　　是一個自包含的模態視圖

　　在橫屏環境中，浮出層會包含一個箭頭，指向其出處

　　背景是半透明的，並且會模糊其背後的內容(毛玻璃效果)

　　可以包含多種對象和視圖，比如：

　　表格，圖片，地圖，文本，網頁或者自定義視圖

　　導航欄，工具欄，和標簽欄

　　可以操作當前app視圖中的對象的各種控件或對象

　　(默認情況下， 浮出層中的表格視圖，導航欄和工具欄的背景都是透明的，這樣會讓浮出層的毛玻璃效果展示出來)

　　在橫屏的情況下，動作列表總是出現在浮出層裡。

　　使用浮出層來展示與當前焦點或被選中對象相關的額外信息，或者相關的一系列項。

　　重要

　　這一個部分的指引僅適用於在橫屏情況下的UI與用戶體驗。如果你想在豎屏環境中展示全屏的浮出層，請參閱下文中的模態視圖相關內容。

　　避免提供“取消浮出層”按鈕。浮出層應當在它不需要的時候自動關閉。如果要決定什麼時候不再需要浮出層，請考慮如下場景：

　　一般來說，在用戶點擊浮出層以外的區域的時候，保存用戶輸入的內容。

　　不是每一個浮出層都會讓用戶明確地確認取消操作，因此用戶可能會誤操作。只有當用戶點擊“取消”按鈕時，才清空他們在浮出層中輸入的內容。

　　讓浮出層中的箭頭盡可能直接地指向其出處。

　　這樣有助於用戶這個浮出層是從哪裡來的，以及他們與哪些任務和對象相關。

　　確保用戶在看不到浮出層背後的內容的時候仍然能順利使用浮出層。

　　浮出層會模糊背後的內容而且用戶不能把它拖拽到其它位置。

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

　　不要在浮出層上面再展示一個模態視圖。

　　除了告警框(alert)外，浮出層中不應當有任何模態視圖。

　　可能的話，讓用戶可以僅點擊一下就關閉當前浮出層並開啟一個新的浮出層。

　　這在若干欄按鈕每個都會喚起一個浮出層的時候尤其好用，因為它減少了用戶的額外點擊。

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

　　在浮出層中使用標准的UI控件和視圖。

　　一般來說，包含標准控件和視圖的浮出層看上去最理想，而且更容易讓用戶理解。

　　確保自定義浮出層仍然長得像一個浮出層。

　　盡管使用UIPopoverBackgroundView API能夠很容易自定義浮出層的多種外觀屬性，還是應當避免設計出一個用戶可能無法辨識的浮出層外觀。如果你對浮出層的改動過大，用戶就不能憑借之前的經驗來理解如何用你的app裡的浮出層了。

　　當浮出層可見的時候，想要改變它的尺寸的話請務必謹慎。

　　當你要在浮出層裡展示同樣信息的精簡或拓展視圖時，你可能需要改變浮出層的大小。當你一定要這麼做的時候，使用轉場動畫往往是個好主意，因為這不會讓人覺得一個新的彈出窗口取代了原來的窗口。

　　4.2.9 滾動視圖（Scroll View）

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

　　滾動視圖：

　　沒有預定義的外觀

　　在剛出現或者當用戶對它進行操作的時候會短暫地閃爍

　　響應速度和對各個操作手勢的識別都應當讓用戶感到自然。當用戶在視圖中拖拽內容，內容隨之滾動;當用戶輕掃屏幕時，內容將快速滾動——直到用戶再次觸摸屏幕或內容已經到達底部時停止。

　　可以應用在頁模式(paging mode)中，在此模式下用戶可以通過拖拽和輕擊等手勢來浏覽一頁的內容

　　使用滾動視圖來允許用戶在固定的空間內浏覽大尺寸或大量的視圖。

　　適當地支持縮放操作。

　　如果放大和縮小對於當前內容是有用的話，你可以支持用戶通過捏或者雙擊來對當前視圖進行縮放。而若是支持了縮放操作的話，你還應當根據用戶當前的任務來設定在當前情景下允許縮放的最大值和最小值。如果你允許一個字符被放大到充滿整個屏幕的話，用戶會很難閱讀當前內容。

　　在頁模式滾動視圖中，可以考慮使用頁面控件（page control）。

　　當你想要展示分頁、分屏或者分塊的內容，可以使用頁面控件來讓用戶知道當前內容一共有多少塊，以及他們當前浏覽的是第幾個。

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

　　一般來說，一次只展示一個滾動視圖。

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

　　4.2.10 分欄視圖控制器

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

　　API注釋

　　每一個對分視圖控制器的子視圖負責管理一個窗格的展現。對分視圖控制器本身負責展示這些子視圖控制器與管理不同屏幕方向下對分視圖的轉場效果。

　　在iOS 7及之前的版本裡，對分視圖控制器僅適用於iPad.

　　默認情況下，對分視圖控制器通過當前的尺寸來管理其子視圖。舉個例子，對分視圖：

　　可以在橫屏環境中展示並排展示兩個窗格

　　可以讓主窗格在詳情窗格上方顯示，也可以在不需要的時候(尤其是豎屏情況下)隱藏主窗格。

　　你可以指定特殊的展示環境下對分視圖的版式，並且通過請求對分視圖控制器聚焦於這個版式，以此改變窗格的排列方式。

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

　　表格，圖像，地圖，文本，網絡，或自定義視圖

　　導航欄，工具欄，或標簽欄

　　注意

　　即使左側窗格通常被稱為主窗格，右側窗格被稱為詳情窗格，但在代碼中並沒有強制固定這種從屬關系。

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

　　避免創建一個比主窗格更窄的詳情窗格。

　　如果右側詳情窗格比左側主窗格窄，對分視圖控制器將不能占滿整個屏幕，產生視覺不平衡的整體效果。

　　避免在兩側窗格中都同時展示導航欄。

　　這樣會讓用戶很難分清這兩個窗格的從屬關系。

　　一般來說，始終顯示左側主窗格中當前選中的項。

　　盡管右側窗格中的內容會變化，但它應當始終保持著與當前選中窗格的相關性。這樣的體驗有助於用戶理解左側窗格項與右側窗格內容的關系。

　　合適的話，給用戶提供不止一種獲取主窗格的方式。

　　默認情況下，豎屏方向時只會展示右側窗格，因此你需要向用戶提供一個按鈕(通常位於導航欄上)來讓用戶喚起和隱藏主窗格。對分視圖控制器也支持輕掃手勢來執行呼出和隱藏的動作。除非你的app有定義輕掃的手勢執行其他功能，否則你應當支持用戶輕掃以喚起左側窗格。

　　4.2.11 表格視圖

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

　　表格視圖：

　　以容易進行分段或分組的單列形式展示數據

　　用戶可以通過點擊來選中某行，或通過控件來添加、移除、多選、查看詳情或者展開另一個表格視圖

　　iOS定義了兩種表格樣式：

　　分組型 （Grouped）。

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

　　平鋪型 （Plain）。

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

　　在這兩種樣式中，當用戶選中某一行時，該行會短暫地高亮。當選中某行將展開另外一屏內容的時候，該行會短暫地高亮，然後新一屏內容滑入。當用戶回到前一屏時，之前選中的那一行同樣會短暫地高亮，提醒用戶他們先前選中了什麼(但並不會一直保持高亮)。

　　除了以上表格中列舉的元素外，iOS定義了刷新控件，讓用戶可以刷新當前的表格內容。想要了解更多關於刷新控件的用法，可以參考文檔本章第三節控件中的刷新控件。iOS提供了若干表格視圖元素(table-view elements)來擴展表格視圖的功能。除了特別標明外，這些元素只適用於表格視圖。

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

　　重要

　　從編程角度來說，這些樣式應用於單元格中，用以控制表格裡每一列的繪制方式。

　　默認型（Default） (UITableViewCellStyleDefault)。

　　默認型樣式包括左側的圖標(可選)，和圖標右邊左對齊的文字標題。

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

　　副標題型（Subtitled） (UITableViewCellStyleSubtitle)。

　　副標題型包括左側圖標(可選)，圖標右邊左對齊展示的文字標題，以及在標題下方同樣左對齊展示的副標題。

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

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

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

　　Value 2的布局中，文本和副標題中間的垂直間距會讓用戶專注於副標題的第一個單詞。

　　重要

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

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

　　展示用戶可選的選項列表。 你可以使用選中標記來告知用戶當前選中了哪些項。

　　無論是平鋪型還是分組性，用戶點擊某一行中的某一項時都可以顯示一個選項列表。當用戶點選了一個不屬於表格行的按鈕或者其他UI元素的時候，可以使用平鋪型表格視圖來展示喚起的選項列表。

　　展示層級信息。 平鋪型表格樣式非常適合展示層級信息。表格中的每項都指向承載於另一個列表中的不同子信息。用戶可以沿著這些層級結構的路徑來點擊每一層列表中的項。以展開標志告知用戶點擊這一列中的任何位置，都將展開新的列表以展示其子類信息。

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

　　你可以用頁眉頁腳視圖(header-footer view)——即UITableViewHearderFooterView中的一個實例——來展示頁眉和頁腳的文字，或圖片。

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

　　用戶選擇列表項時，始終給與反饋。

　　當用戶點擊可選的列表項時會認為被點擊的項都應短暫地高亮一下。在點擊後，用戶期望出現新的視圖，或者出現一個復選標記以表明先前點擊的項已經被選中或激活。

　　如果表格的內容龐大而且復雜，不要在所有數據都加載完之後才一起顯示出來。

　　可以首先展示文本信息，圖片等較為復雜的內容則在加載完後再顯示。這樣可以將有用的信息立即傳達給用戶，同時也提高了應用的響應能力。

　　在等待信息加載的時候，可以考慮展示“過期”信息。

　　盡管我們並不推薦在數據頻繁變化的應用中這樣做，它還是可以幫助更多的靜態應用程序立即給到用戶有用的信息。當然在你這麼做之前，請認真衡量你應用中數據的變化頻率，並弄清楚你的目標用戶有多需要立即獲取最新的信息。

　　如果信息加載速度很慢或者非常復雜，你需要告訴用戶加載正在進行中。

　　如果表格中所有內容都很復雜，我們很難即時地給用戶展示任何內容。在這種極端情況下，切勿顯示空白的表格，因為這會讓用戶以為應用掛了。此時應當在屏幕中央展示一個活動指示器(activity indicator)和一個信息標簽(information label)，比如“加載中…”，讓用戶知道加載仍然在進行。

　　如果合適的話，為刪除按鈕自定義一個名稱。

　　如果這能讓用戶更好地理解應用的相關功能的話，你可以創建一個合適的標題，來取代“刪除”這個字樣。

　　盡量使用簡潔的文字標簽，以避免被截斷。

　　繁冗的文字和詞組不方便用戶浏覽和理解。以上所有單元格樣式均會自動截斷文本，而文本截斷所造成的問題可大可小，取決於你采用的單元格樣式，以及被截斷了哪一部分文字。

　　如果你想以一種非標准的形式來布局你的表格，最好是自定義一種單元格樣式，而不是在現有的表格樣式上進行改動。

　　4.2.12 文本視圖

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

　　文本視圖：

　　是一個可定義為任何高度的矩形

　　當內容太多超出視圖的邊框時，文本視圖支持滾動

　　支持自定義字體、顏色和對齊方式(默認情況下，文本視圖會以左對齊的黑色系統字體顯示)

　　可以支持用戶編輯，當用戶輕擊文本視圖內部時，將喚起鍵盤(鍵盤的布局和類型取決於用戶的系統語言設置)

　　始終確保文字的易讀性。

　　雖然你可以使用屬性字符串將不同的字體、字色和對齊方式串聯在同一個文本視圖內，但保持文本的可讀性是必不可少的。最好是可以支持動態文本(Dynamic Type)和UIFont method preferredFontForTextStyle來展示文本框中的文本。想要了解更多動態文本的指引，可以參閱本文第一章中顏色與字體裡的部分;想要了解更多編程相關的內容，可以參閱Text Styles.

　　根據輸入內容的類型來指定不同的鍵盤類型。

　　舉例來說，你希望用戶能更方便地輸入網址、密碼或者電話號碼。但請注意，由於鍵盤的布局以及輸入方法是由用戶的系統語言設置決定的，這是你不能控制的。

　　iOS提供了各種不同的鍵盤類型，以便用戶輸入不同類型的文本。

　　4.2.13 網絡視圖

　　網絡視圖是一個可以展示豐富的HTML內容的區域。(下圖是iPhone自帶的郵件應用，網絡視圖指的是下圖中導航欄和標簽欄中間的區域)

　　網絡視圖：

　　展示網絡內容

　　會自動處理頁面中的內容，比如把頁面中的電話號碼轉化成電話鏈接(譯者按：phone link，點擊之後iPhone將自動撥打該號碼)。

　　如果你有一個網頁或者網絡應用，你大約會用網絡視圖來實現一個簡單的iOS App，來對你的網頁或者應用進行一個封裝。如果你打算用網絡視圖來訪問你所控制的網頁內容，請務必閱讀Safari Web Content Guide.

　　不要用網絡視圖來創建一個看起來像迷你網絡浏覽器的應用。

　　用戶期望使用iOS自帶的Safari來浏覽網頁內容，因此我們並不推薦你在自己的app裡復制這種以被廣泛應用的功能。

　　4.3 控件

　　4.3.1 活動指示器

　　活動指示器表明任務或進程正在進行中，如下圖所示。

　　活動指示器：

　　當任務進行和加載時旋轉，任務完成後自動消失

　　不支持用戶交互行為

　　在工具欄或主視圖中使用活動指示器來告知用戶任務或加載正在進行中，但並不提示該過程何時會結束。

　　不要使用靜止的活動指示器。 用戶會以為該進程停滯了。

　　用活動指示器來讓用戶知道進程仍在進行中。 有些時候，告訴用戶進程沒有停止比告訴他們何時完成更加重要。

　　設計一個與應用的風格協調的活動指示器。 可以的話，讓活動指示器的尺寸和顏色與它所在的背景協調。

　　4.3.2 添加聯系人按鈕

　　添加聯系人按鈕讓用戶將現有聯系人添加到文本框或者其它文字視圖中。

　　添加聯系人按鈕：

　　展示聯系人列表

　　幫助用戶將一個聯系人添加到當前聯系人按鈕所在的視圖中

　　使用添加聯系人按鈕讓用戶在不需要使用鍵盤的情況下就可以方便地訪問到聯系人。舉個例子，在新建郵件的界面中，用戶可以點擊該按鈕來在郵件中添加收件人，而不需要用鍵盤輸入收件人的名字。

　　由於添加聯系人按鈕屬於鍵盤輸入聯系人方法的替代品，我們不推薦在不支持鍵盤輸入的界面中使用添加聯系人按鈕。

　　4.3.3 日期時間選擇器

　　日期時間選擇器展示關於日期和時間的組件，比如小時，分鐘，天，以及年。

　　日期時間選擇器：

　　最多可以展示4個獨立的滑輪，每一個滑輪表示一個不同的值，比如月份或小時等

　　在每個滑輪的中央使用深色字體來表示當前選中的值

　　日期時間選擇器的大小與iPhone鍵盤的大小相同，並且不可更改

　　包括四種模式，每一種模式代表了一組不同的值:

　　日期和時間 。日期和時間模式(默認模式)包含日期、小時、和分鐘，以及一個可選的AM/PM值。

　　時間 。時間模式包括小時和分鐘，以及可選的AM/PM值。

　　日期 。日期模式包括月份，天以及年三個值。

　　倒計時器 。倒計時器模式展示了小時和分鐘值。你可以精確地設定總共的倒計時間，倒計時的最大值為23小時59分鐘。

　　使用日期時間選擇器來讓用戶選擇時間，而不是讓用戶自己輸入一個包含了日期、時間等多個部分的時間值。

　　盡量地讓用戶在當前內容中使用日期選擇器。

　　盡量地讓用戶在當前內容中使用日期選擇器。最好避免用戶在使用日期選擇器的時候要進入另外一個界面。在水平方向的常規環境，日期時間選擇器可能會出現在一個浮層中，或者嵌入在當前內容裡。

　　有必要的時候，改變分鐘滑輪的單位刻度。

　　在默認情況下，分鐘滑輪包含從0到59共60個值，如果你要展示一個顆粒度較大的時間，你可以讓分鐘滑輪的單位刻度變大，只要這個刻度可以整除60。比如說你可能會設定每15分鐘為一個刻度，此時分鐘滑輪就有4個值，0、15、30、45。

　　4.3.4 詳情展開按鈕

　　詳情展開按鈕展示了與該項相關的更多詳細信息與功能描述。

　　詳情展開按鈕以一個單獨的視圖展示特定項目的更多詳情信息與功能。

　　當詳情展開按鈕在表格行中出現時，點擊表格行的其它區域不會激活此按鈕，只會選中該行，或者觸發app中其它自定義的行為。

　　一般來說，你會在一個表格視圖中使用詳情展開按鈕來讓用戶知道更多關於這個列表項的信息。當然你也可以將這個按鈕用在其它類型的視圖中來為用戶展示更多與特定項目相關的信息和功能。

　　4.3.5 信息按鈕

　　信息按鈕展示了app的配置信息，有時候它會出現在當前視圖的背面。

　　iOS包含了兩種信息按鈕樣式：適用於淺色內容上的深色按鈕，以及適用於深色內容上的淺色按鈕。

　　使用信息按鈕來顯示app的配置信息或選項。你可以根據自己app的UI風格來選擇最為協調的信息按鈕樣式。

　　4.3.6 標簽

　　標簽用於放置靜態文本。

　　標簽可以：

　　展示任意數量的靜態文本

　　禁止除了復制文本外的任何用戶交互行為

　　你可以使用標簽來命名或解釋你的部分UI，又或者用它來給用戶提供一些簡單的信息。標簽最適合拿來展示相對簡單的文本信息。

　　保證你的標簽清晰易讀。

　　最好支持動態文本(Dynamic Type)，並使用 UIFont 中的preferredFontForTextStyle來獲得標簽中的展示文本。如果你要用自定義字體的話，請慎重選擇字體種類，不要以犧牲清晰度為代價來換取花哨的顏色和字體效果。(想要了解關於app中字體使用的指南，可以參考 Color and Typography;想要了解更多動態文本的內容，可以參考 Text Programming Guide for iOS 裡面 的 Text Styles 部分。)

　　4.3.7 網絡活動指示器

　　網絡活動指示器在狀態欄中出現，表示網絡活動正在進行。

　　網絡活動指示器：

　　出現在狀態欄中，當網絡活動正在進行時它會旋轉，在活動停止時它則消失

　　不支持用戶交互行為

　　當你的app正在鏈接網絡，而這個連接過程將會持續好幾秒的時候，你可以通過網絡活動指示器來給用戶以反饋。如果進程所需時間很短，則不需要用到它，因為很可能在用戶注意到它之前，它就消失了。

　　4.3.8 頁面控件

　　頁面控件告訴用戶當前共打開了多少個視圖，還有他們正處在其中哪一個。

　　頁面控件：

　　包含一系列圓點，圓點的個數代表了當前打開的視圖數量(從左到右，這些圓點代表了視圖打開的先後順序)

　　默認情況下，使用不透明點來標識當前打開的視圖，使用半透明點來表示所有其它視圖

　　不支持用戶訪問不連續的視圖

　　當視圖數量超過頁面寬度可承載的氛圍時，點的大小和間距並不會因此變小(如果需要顯示的點超過一定數量，系統會把它截斷)

　　默認情況下不支持視圖之間導航;你必須實現視圖到視圖之間的導航並適當地更新頁面控件狀態

　　當告知用戶有多少打開的視圖的需求比幫助用戶選擇特定的視圖更重要時，使用頁面控件。頁面控件是為所有視圖均平等的場景而設計的。

　　不要使用頁面控件來顯示視圖中的層次結構或其他復雜的排列。

　　頁面控件不顯示視圖是如何相互關聯的，而且不表明哪個視圖對應於每個點，因此它不能幫助用戶導航到特定的視圖。

　　避免顯示太多點。

　　超過10個點就很難讓用戶一目了然，而超過20個視圖在序列中訪問起來非常耗時。如果用戶可以在你的應用程序打開超過20個視圖，請考慮給視圖一個不同的展示方式，以提供關於視圖的詳細信息，使其支持不連續的導航。

　　在打開視圖的底部邊緣和屏幕的底部邊緣裡垂直居中頁面控件。

　　在這個位置，頁面控件是始終可見的，並且不會阻擋用戶的使用。

　　4.3.9 選擇器

　　選擇器展示了一組值，用戶可以從中選擇一個。

　　選擇器：

　　是日期時間選擇器的通用模式

　　包括一個或多個滑輪，每個滑輪含有一組值

　　當前選中的值在中間，以深色標識

　　不可以自定義大小(選擇器的大小與iPhone的鍵盤相同)

　　使用選擇器可以讓用戶更容易從一系列不同的值中間進行選擇。

　　一般來說，當用戶對整組值都比較熟悉的時候，可以使用選擇器。

　　由於當滑輪靜止的時候，大部分的數值會被隱藏，最好是在用戶對所有數值均有預期的情況下才使用選擇器。當你需要展示一大組用戶並不熟悉的選項，此種選擇器可能不太適合。

　　盡可能讓讓用戶在當前視圖中使用選擇器。

　　不要讓他們在使用選擇器時還要進入其它的視圖。

　　如果你需要展示的備選項數量很多，考慮使用表格視圖（Table View）而不是選擇器。

　　因為表格視圖的高度較大，內容滾動起來會更快。

　　4.3.10 進度視圖

　　進度視圖展示了任務或進程的進度(下圖是iOS默認郵件App的工具欄)。

　　進度視圖：

　　是一條軌跡，隨著進程的進行從左向右進行填充

　　不支持用戶交互行為

　　iOS定義了兩種進度視圖樣式：

　　默認（Default） .默認樣式適合用在app的主要內容區中。

　　進度條（Bar）. 此樣式比默認樣式細，適合用在工具欄中。

　　當一個任務存在明確的進程，可以使用進度條來給與用戶反饋，尤其在需要明確告訴用戶這個任務大約需要多少時間完成的時候。

　　可以的話，請根據你的app的風格來設計進度條的外觀。 你可以自定義進度條的底色以及軌跡顏色，也可以直接使用圖片。

　　4.3.11 刷新控件

　　刷新控件執行用戶觸發的內容刷新——一個典型的例子，它常在表格中出現(下圖展示的是iOS默認的郵件app的mailbox列表頁)。

　　刷新控件：

　　看起來類似活動指示器

　　可以出現在標題中

　　默認狀態下不可見，當用戶在表格上緣往下拖拽以刷新內容時才出現

　　使用刷新控件，給用戶提供一個一致的方式來了解一個表格或其他視圖的內容更新，而不需要等待下一個自動更新。

　　就算你使用了刷新控件，也不要因此就不支持內容自動刷新。 盡管用戶喜歡在執行刷新操作時內容立刻刷新，他們也同樣會喜歡內容自動刷新。如果過於一來用戶自己執行所有刷新操作的話，那些不會自動刷新的用戶就會疑惑，為何你app中的數據永遠都不更新。一般來說，刷新控件給了用戶多一個選擇，讓他們可以立刻獲得最新的內容，但同時，你也不能奢望用戶會主動獲取所有的更新信息。

　　只有在必要的時候才加短標題。 特別需要注意的是，不要使用短標題來描述刷新控件怎麼使用。

　　4.3.12圓角矩形按鈕

　　iOS7及更新版本中已經不再使用圓角矩形按鈕，而是使用了新的系統按鈕——類型為UIButtonTypeSystem的UI按鈕(UIButton) 。使用指南可參考System Button.

　　4.3.13 分段控件

　　分段控件是一組分段的線性集合，每一個分段的作用類似按鈕，點擊之後將切換到相應的視圖。

　　分段控件：

　　由兩個或以上的分段組成，每一個分段的寬度相同，與分段的數量成比例(分段數量越多，則寬度越小)

　　可以包含文字或者圖片

　　使用分段控件來提供密切相關而又互斥的選項。

　　保證每個分段都容易點擊。

　　為了保證每個分段的大小有至少44×44像素，請控制分段的數量。在iPhone上，1個分段控件最多包含5個分段。

　　盡可能地保持每個分段中的文字長度一致。

　　因為每個分段都是等寬的，當文本長度差異很大時看上去會很不協調。

　　不要在同一個分段控件中混用文字和圖片。

　　每一個分段都僅可支持純文字或純圖片。避免在同一個分段控件中，一些分段裡使用純文字，另一些分段裡使用純圖。

　　請在必要時調整分段控件中文本的對齊方式。

　　如果你給分段控件添加了自定義底圖，請確保控件裡自動居中的文本依然清晰美觀。你可以通過bar metrics APIs 來調整分段控件內文本的對齊方式(想要了解如何定義bar metrics，可以參考 UISegmentedControl 中關於自定義API外觀(appearance-customization APIs)的描述)。

　　4.3.14 滑塊

　　滑塊允許用戶在一個限定范圍內調整某個數值或進程(下圖展示的是iOS設置中亮度設置的滑塊，滑塊的左邊和右邊均為自定義圖形)。

　　滑塊：

　　由一條水平的軌跡和一個Thumb(滑塊中支持用戶水平拖拽的圓形控件)組成

　　左邊和右邊支持使用自定義圖片來表述相對的最小值與最大值的含義

　　填充軌道左邊緣最小值之間到Thumb之間的部分

　　使用滑塊來讓用戶精准地選擇自己想要的值，或者控制當前的進程。

　　如果合適的話，自定義滑塊的外觀。

　　比如，你可以:

　　定義Thumb的外觀，讓用戶一看就知道滑塊當前的狀態

　　在軌跡的左右兩端使用自定義圖片來告訴用戶滑塊的最小值和最大值所代表的含義。比如說，一個圖調整圖片尺寸的滑塊可以在最小值的左邊放一張小圖，在最大值的右邊放一張大圖。

　　根據Thumb所在的位置和當前滑塊的狀態來為滑塊的軌跡定義不同的顏色

　　不要使用滑塊來顯示音量控制。

　　如果你需要顯示一個音量滑塊，當你使用MPVolumeView類的時候請使用系統提供的音量滑塊。請注意，當當前活動的音頻輸出設備不支持音量控制時，音量滑塊以適當的設備名稱替換。

　　4.3.15 步進器

　　步進器可以以常數為幅度來增減當前數值。

　　步進器：

　　是一個兩段控件，其中一段默認顯示減號，另一端默認顯示加號

　　支持自定義圖片

　　不展示用戶更改的值

　　當用戶想要對數值進行小幅度調整時，可以使用步進器。

　　當用戶需要大幅度調整數值的時候，不要使用步進器。

　　用戶可能會在打印機裡使用步進器來確定打印份數，因為這個值的變化幅度通常並不大;而當用戶需要選擇打印的頁碼范圍時，使用步進器就會讓操作變得繁瑣，因為用戶很可能要點很多下才能選定頁數。

　　確保步進器所調整的值明顯可見。

　　步進器自身不展示任何數值，所以你需要保證讓用戶知道他們正在調整哪一個數值。

　　4.3.16 開關按鈕

　　開關按鈕展示了兩個互斥的選項或狀態。

　　API提示：

　　想要了解更多如何在代碼中定義步開關，可以參考UISwitch.

　　開關按鈕：

　　顯示了一個項存在二元狀態

　　僅在表格視圖中可用

　　在表格中使用開關按鈕來讓用戶從某一項的兩個互斥狀態中指定一個，比如是/否(Yes/No)，開/關(On/Off)。

　　你可以使用開關按鈕來控制視圖中的其它UI元素。根據用戶的選擇，新的列表項可能出現或者消失，或從激活狀態變為不激活狀態。

　　4.3.17 系統按鈕

　　系統按鈕執行app中定義的行為。

　　API提示：

　　在iOS 7中，UIButtonTypeRoundedRect已經被重新定義為 UIButtonTypeSystem.

　　系統按鈕：

　　默認狀態下不含邊界，也不含背景圖

　　可以是圖標或者文字標題

　　支持自定義樣式，如描邊或者加背景圖(想要自定義按鈕外觀，可以使用 UIButtonTypeCustom 類型的按鈕，並且提供背景圖片)

　　使用系統按鈕來執行某個動作。當你為系統按鈕命名時，請遵循以下方法：

　　使用動詞或動詞短語來描述按鈕所代表的動作 。這種命名方法告訴用戶這個按鈕是可交互的，也提示了用戶點擊之後會執行什麼操作

　　使用標題式大寫 (title-style capitalization，每個單詞的首字母均大寫)。除了冠詞，並列連詞以及少於4個字母的介詞外，標題中每個單詞的首字母均大寫。

　　標題不要太長 。太長的標題會被截斷，讓用戶難以理解其含義

　　以iPhone為例，給數字按鍵添加圓形邊框強化了用戶撥電話號碼時的心理模型，而結束(End)和隱藏(Hide)按鈕的背景色讓用戶擁有了更大的點擊范圍。

　　合適的話，為內容區域內的系統按鈕描邊或者加入背景。

　　大多數情況下，你可以通過定義一個清晰的按鈕名稱、選擇一個不一樣的標題顏色或提供上下文情景提示來讓用戶知道這是一個按鈕而非普通文本。但在某些特定的內容區域內，為按鈕描邊或者添加背景顏色，讓用戶迅速地把注意力放到按鈕上，也是必要的。Value 2的布局中，文本和副標題中間的垂直間距會讓用戶專注於副標題的第一個單詞。

　　4.3.18文本框

　　開關按鈕展示了兩個互斥的選項或狀態。

　　文本框

　　高度固定，包含圓角

　　當用戶點擊它時，自動喚起輸入鍵盤

　　可以包含系統提供的按鈕，如書簽按鈕(Bookmarks)

　　可以展示多種文字樣式(了解更多請參考 UITextView)

　　使用文本框來獲取用戶輸入的少量信息。

　　你可以自定義一個文本框，幫助用戶更好地理解如何使用它。

　　舉個例子，你可以在文本框的左側或者右側加入自定義圖形，或者加入系統按鈕，如書簽按鈕等。一般來說，文本框的左側用於表述文本框的含義，而右側用於展示附加的功能，如書簽。

　　合適的話，在文本框右側加入清除按鈕。

　　輕擊清除按鈕變可清空當前框內輸入的全部內容，無論你原本打算在這個按鈕上面展示什麼其它圖片。

　　如果可以幫助用戶理解的話，可以在文本框中加入提示文字。

　　當文本框裡沒有任何其它提示文字時，會展示占位符文本(placeholder text)，如名字、地址等。

　　根據輸入內容的類型來指定不同的鍵盤類型。

　　舉例來說，你希望用戶能更方便地輸入網址、密碼或者電話號碼。iOS提供了各種不同的鍵盤類型，以便用戶輸入不同類型的文本。想要了解可用鍵盤類型，可以參考 UITextInputTraits Protocol Reference中的UIKeyboardType.想要了解如何在管理你的應用中的鍵盤，請參考Managing the Keyboard部分。但請注意，由於鍵盤的布局以及輸入方法是由用戶的系統語言設置決定的，這是你不能控制的。

　　4.4臨時視圖

　　4.4.1 警告框

　　警告框用於告知用戶一些會影響到他們使用app或設備的重要信息。

　　API提示：

　　如需在代碼中使用警告框，你可以創建UIAlertController並且指定UIAlertControllerStyleAlert.

　　警告框：

　　必須包含標題，有時候會包含正文文本

　　包含一個或多個按鈕

　　一般來說，警告框警告出現的頻率較低，也正因為如此，警告的出現通常會讓用戶額外重視。請嚴格控制你的app中警告的個數，並且保證每一個警告都能提供重要的信息，或者有用的選項。

　　避免出現不必要的警告框。

　　一般來說，在以下情景中，是不需要用到警告框的：

　　當你在設計警告文案的時候，了解以下這些定義非常有用：

　　標題式大寫（Title-style capitalization） 指的是除了冠詞，並列連詞以及少於4個字母且不處在第一個單詞位置上的介詞外，標題中每個單詞的首字母均大寫。

　　句子式大寫（Sentence-style capitalization） 指的是第一個字母大寫，其余除了專有名詞和專有形容詞外的字母均小寫

　　簡明扼要地描述當前情景，並告訴用戶他們可以做什麼。

　　理想情況下，警告框中的文字應該給與用戶足夠的情景和上下文聯想，讓他們可以清楚地知道為什麼警告會出現，同時幫助他們判斷自己應該點哪個按鈕。

　　保證標題足夠簡短，最好在一行之內。

　　過長的標題讓用戶很難快速理解它的意思，還可能會被截斷。

　　避免單個字的標題。 單字標題，例如：錯誤，或警告，幾乎不能提供任何有用信息。

　　如果可以的話，使用句子片段而非完整的句子。 一個簡潔清晰的狀態描述往往比一個完整的句子更容易理解。

　　盡可能的精煉你的標題文字，讓警告框即使沒有下面的正文信息也能完全讓用戶理解。 舉個例子，當你使用一個問題，或者兩個短句來作為警告框標題的話，很可能你並不需要添加文本信息。

　　不用刻意避免在警告框中使用消極負面的文案。 用戶們理解大多數警告框是為了告訴他們發生的問題，或者對他們目前的狀態作出警告。因此消極但清晰直接的文案優於積極但晦澀間接的文案。

　　盡可能地避免使用“你”，“你的”，“我”，“我的”這類字眼 。有時候，這些直接指向的字眼容易引起歧義，有時候甚至會被誤認為是一種冒犯。

　　適當地使用大寫和標點符號，尤其是在以下這些場景中：

　　如果你必須為警告框添加正文文本，請使用一個完整的短句。

　　可能的話，盡量保證句子在1到2行之間。如果句子太長，用戶會需要滾動才能看完，這樣的體驗很糟。使用句子式大寫，並在句末加上適當的標點符號。

　　避免在文本中詳細描述“該按哪個按鈕”而導致文本過長。

　　理想情況下，表意明確的警告文案和邏輯清晰的按鈕文案已經足以讓用戶正確判斷自己該按哪個按鈕了。但如果你一定要在文案中描述這些內容，請遵循以下原則：

　　確定使用輕擊(tap)來描述這個選擇操作，不要用觸摸(touch)、點擊(click)或者選擇(choose)這類字眼。

　　不要用引號，但保證大寫

　　確保警告框在豎屏和橫屏中均顯示正常。

　　橫屏模式下警告框的高度會受到限制，其大小與豎屏下可能會有區別。我們推薦您限定好警告框的最大高度，保證在豎屏和橫屏模式下文字均能不需要滾動便可完整地顯示。

　　一般情況下，使用兩個按鈕的警告框。

　　兩個按鈕的警告框是最為常見和有用的，因為它最便於用戶在兩個按鈕中做選擇。單按鈕警告框不那麼有用，因為它通常只是起到告知的作用，並未給予用戶控制當前狀態的能力。多於兩個按鈕的警告框太過復雜，應該盡可能地避免使用。如果你在警告框中設計了太多按鈕，它也許會導致警告框被強制滾動，這也是一個非常糟糕的體驗。

　　提示

　　如果你需要在警告框中給與用戶超過2個選項，可以考慮使用操作列表來代替警告框。

　　正確地放置按鈕。

　　理想情況下，最容易點擊也最不容易點錯的按鈕符合兩個條件：它代表了用戶最可能會選擇的操作，即使用戶一時不注意誤點了它，也不會造成嚴重問題。尤其是：

　　如果這個按鈕不會造成損害性結果，又是用戶最有可能會選擇的操作，那麼它應該放在右邊，取消按鈕則應該放在左邊。

　　如果這個按鈕會造成損害性後果，又是用戶最有可能會選擇的操作，那麼它應該被放在左邊，取消按鈕應該放在右邊。

　　提示

　　一般來說，當警告框出現的時候，按Home鍵將會從該app裡切回主屏幕，此時Home鍵的效果類似於取消按鈕——當用戶回到app中的時候，警告框將消失，操作也不會被執行。

　　為按鈕設計簡短而邏輯清晰的文案。

　　好的按鈕文案一般只有1到2個單詞，描述用戶點擊按鈕後的結果。設計文案時可以遵循以下指南：

　　跟其它所有按鈕一樣，使用標題式大寫，而且不需要標點符號

　　盡可能的使用與警告文案直接相關的動詞或動詞詞組，如”取消(Cancel)”，”查看全部(View All)”，”回復(Reply)”和“忽略(Ignore)”等

　　當沒有更好的選擇的時候，可以使用”OK”.避免使用”是(Yes)”或”否(No)”。

　　避免使用”你”，“你的”，“我”，“我的”這類字眼。含有這些字眼的文案可能會指代不清，還有可能造成冒犯。

　　4.4.2 操作列表

　　操作列表展示了與用戶觸發的操作直接相關的一系列選項。

　　API提示：

　　如需在代碼中使用操作列表，你可以創建一個 UIAlertController.並指定UIAlertControllerStyleActionSheet

　　操作列表：

　　由用戶某個操作行為觸發

　　包含兩個或以上的按鈕

　　使用操作列表來：

　　提供完成一項任務的不同方法。

　　操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久占用頁面UI的空間。

　　在用戶完成一項可能有風險的操作前獲得用戶的確認。

　　操作列表讓用戶有機會停下來充分考慮當前操作可能導致的危險結果，並為他們提供了一些其它的選項，尤其是在以下這些情景下：

　　使用紅色文字來表示可能存在破壞性的操作。

　　在操作列表的頂部使用文字顏色為紅色的按鈕，因為越靠近列表頂部的操作越容易引起用戶注意。在iPhone裡，潛在風險的操作離列表底部越遠，用戶在關注Home鍵的時候就越不容易誤點它。

　　避免讓用戶滾動操作列表。

　　如果你的操作列表中存在過多按鈕，用戶必須要滾動才能看完所有操作。這樣的體驗是可能讓用戶不安，因為他們要花更多的時間來充分理解每個選項的區別。此外，用戶在滾動的過程中將很有可能誤點其它按鈕。

　　4.4.3模態視圖

　　模態視圖是一個以模態形式展現的視圖，它為當前任務或當前工作流程提供獨立的、自包含的(self-contained)功能。

　　API提示：

　　如需在代碼中使用模態視圖，你可以創建一個 UIPresentationController. 並指定適當的樣式(完整的樣式列表，請參考 Modal Presentation Styles)

　　模態視圖：

　　能占據整個屏幕，它也可能占據整個父視圖(parent view)的區域，或者是屏幕的一部分

　　包含完成當前任務所需的文字和控件

　　通常也會包含一個完成任務的按鈕(點擊後即可完成任務，當前模態視圖也會消失)，和一個取消按鈕(點擊後即放棄當前任務，同時當前模態視圖消失)

　　當需要用戶完成與你的app中的基礎功能相關的、獨立的任務的時候，可以使用模態視圖。模態視圖尤其適用於那些所需元素並非常駐在app主要UI中、又包含多個步驟的子任務。

　　根據當前任務的種類和你的app的整體視覺風格來選擇適當的模態視圖。 你可以使用以下定義的任何一種模態視圖樣式：

　　不要讓模態視圖覆蓋在浮出層之上。

　　除了警告框外，沒有任何元素應該覆蓋在彈出層上面。除非極其少有的情況下，用戶在彈出層內進行的操作結果必須要以模態視圖的形式展現，即便是這個時候，也請先將彈出層關閉，再出現模態視圖。

　　確保你的模態視圖看起來與你的app的整體視覺風格相協調。

　　舉個例子，如果一個模態視圖中含有導航條和取消或完成任務的按鈕，這裡的導航條樣式應該與你的app中導航條一樣。

　　合適的話，在模態視圖裡加入可以說明任務內容的標題。

　　你可能還需要在模態視圖裡加入一些補充文字，來清楚地闡明任務內容，並提供一些任務指南。

　　選擇一個適當的過渡動畫來展示模態視圖。

　　使用與你的app一致的過渡動畫，讓用戶可以准確地理解當前頁面內容的轉變與模態視圖的出現。關於這一點，你可以指定以下任意一種過渡動畫：

　　垂直出現（Vertical）. 模態視圖從底部邊緣滑入屏幕，也同樣從屏幕底部滑出(默認模式)。

　　彈出（Flip） .當前視圖從右往左水平滑動，露出模態視圖。從視覺上看，模態視圖好像原來就處於當前視圖的下面，當前視圖移開時，它便出現了。離開模態視圖時，原先的父視圖從左邊滑回屏幕右邊。

　　如果你要改變當前的過渡動畫樣式，請確保這種改變對於用戶而言是有用而且有意義的。

　　用戶很容易便能感知到這些改變，還會認為這些改變存在特別的意義。最好能設計出一種符合邏輯並始終保持一致的過渡方式，讓用戶容易感知並且記憶。在沒有充分理由支持的情況下，最好不要改變這些默認的過渡方式。