4.1 欄

4.1.1 狀態(tài)欄

狀態(tài)欄展示了關(guān)于設(shè)備及其周圍環(huán)境的重要信息。

默認(深色)內(nèi)容
?

淺色

狀態(tài)欄：

• 是透明的
• 始終固定在整個屏幕的上邊緣

API注釋

你可以將全應用的狀態(tài)欄風格設(shè)計成統(tǒng)一的，或者給不同的視圖控制器定義不同的狀態(tài)欄風格。想要了解更多內(nèi)容，你可以通過UIApplication Class Reference來了解UIStatusBarStyle常數(shù)，以及通過UIViewController Class Reference來了解更多關(guān)于preferredStatusBarStyle屬性的內(nèi)容。

不要創(chuàng)建自定義狀態(tài)欄。用戶依賴系統(tǒng)默認狀態(tài)欄的一致性。就算你可能會在應用中隱藏它，也不宜定制一個新的UI來代替原有系統(tǒng)狀態(tài)欄。

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

• 使用導航控制器(navigation controller)來展示內(nèi)容。導航控制器自動展示狀態(tài)欄背景，同時能確保內(nèi)容視圖不會出現(xiàn)在狀態(tài)欄后面。（了解更多請參考?Navigation Controllers）。

• 在狀態(tài)欄后面放一個低調(diào)的、不會搶走用戶注意力的自定義圖形——比如一道漸變。想要保證這樣的圖形始終固定在狀態(tài)欄后面，你可以用視圖控制器(view controller)來讓它固定在滾動內(nèi)容上一層，又或者可以用滾動視圖(scrolling view)來保證圖形固定在屏幕的頂部。
• 讓內(nèi)容固定在導航欄區(qū)域外顯示（這個區(qū)域由應用的statusBarFrame屬性來定義）。如果你確定要這樣做的話，請給導航欄區(qū)域添加固定的、與屏幕背景色相同的背景色。

千萬千萬，避免在狀態(tài)欄后面疊加會分散注意力的內(nèi)容。尤其是，你不能讓用戶覺得輕擊狀態(tài)欄之后可以獲取內(nèi)容或激活你的應用中的控件。

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

在用戶全屏觀看媒體時，考慮隱藏狀態(tài)欄以及所有頁面UI。當你這么做的時候，請確保用戶在輕擊屏幕時即可重新喚起狀態(tài)欄以及相關(guān)的UI。而除非你有充分的理由，否則最好不要重新定義一個手勢來讓用戶喚起狀態(tài)欄，因為用戶不會發(fā)現(xiàn)，就算發(fā)現(xiàn)了也難以記住。

為你的應用選擇配色協(xié)調(diào)的狀態(tài)欄顏色。默認的狀態(tài)欄內(nèi)容是黑色的，在淺色應用中效果出色，而相應的淺色狀態(tài)欄則更適用于顏色較深的應用。

在適當?shù)臅r候展示網(wǎng)絡(luò)活動指示器(network activity indicator)。這可以提醒用戶顯示長時間的網(wǎng)絡(luò)接入狀態(tài)。更多詳情請參考本章第三節(jié)控件部分的網(wǎng)絡(luò)活動指示器部分(Network Activity Indicator)。

4.1.2?導航欄

導航欄能夠?qū)崿F(xiàn)在應用不同信息層級結(jié)構(gòu)間的導航，有時候也可用于管理當前屏幕內(nèi)容。

導航欄：

• 是半透明的

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

• 當鍵盤被喚起、用戶使用了手勢、或者當前視圖變?yōu)樨Q屏的情況下，導航欄可以隱藏。
• 可以填充顏色(使用tintColor來定義導航欄中的圖標與文字顏色；使用?barTintColor來填充導航欄背景色)

API注釋

導航欄包含于導航控制器（一個管理顯示自定義視圖層級結(jié)構(gòu)的程序?qū)ο螅┲?。想要了解更多關(guān)于如何在代碼中定義一個導航欄的信息，請參閱Navigation Controllers,?UINavigationController Class Reference和?UINavigationBar Class Reference.

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

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

• 導航欄標題應該變成當前層級的標題。
• 當前標題左側(cè)放置應有返回按鈕，需要的話，返回按鈕可以以前一層級的標題命名。

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

考慮在應用最高層級的導航欄中放置一個分段控件。它能夠幫助你更好地扁平信息層級，也會讓用戶更容易找到所需內(nèi)容。如果在導航欄中使用了分段控件，請確保返回按鈕標題命名的準確。（更多使用指引請參閱本章第三節(jié)中的分段控件。）

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

如果你需要用到提示語，請設(shè)計一句簡明扼要的單句，并在句末配以適當?shù)臉它c符號。

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

確保文字按鈕之間擁有足夠的空間。如果導航欄左邊或右邊的文字按鈕之間的間距太小，那些文字看起來會像擠在一起一樣，讓用戶難以區(qū)分。如果按鈕在導航欄中顯得太過擁擠，你可以使用UIBarButtonSystemItemFixedSpace常數(shù)來給他們增加適當?shù)拈g距。（想要了解更多關(guān)于這個常數(shù)的內(nèi)容，請參考?UIBarButtonItem Class Reference.）

確保你自定義的導航欄在你的應用的每個視圖中都擁有一致的外觀與體驗。舉個例子，不要在同一個應用中使用不透明導航欄和半透明工具欄。在屏幕處于同一方向時，最好不要改變不同屏上導航欄的背景圖片、顏色和透明度。

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

重要

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

在用戶需要專注于內(nèi)容的時候，可以考慮隱藏導航欄。當你這么做的時候，請確保用戶通過一個簡單的手勢（比如一下輕擊）即可重新喚起導航欄。

4.1.3?工具欄

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

工具欄：

• 是半透明的
• 在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現(xiàn)在頂部
• 當鍵盤被喚起、用戶使用了手勢、或者當前視圖變?yōu)樨Q屏的情況下，工具欄可以隱藏。

API注釋

工具欄包含在導航控制器(navigation controller)中，該控制器用于管理定制視圖中信息層級的展示形式。 想要了解如何在代碼中定義工具欄，請參考Displaying a Navigation Toolbar以及UIToolbar Class Reference.

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

在工具欄里放置用戶在當前情景下最常用的指令。盡量避免在工具欄里提供一些僅會偶爾用到的指令。

可以在工具欄里放置分段控件以方便用戶快速切換當前內(nèi)容的不同視圖或模式。在工具欄中提供應用全局的任務(wù)或者模式分段控件是不恰當?shù)?，因為工具欄中的所有操作都應當是針對當前屏幕和視圖的。如果你需要讓用戶可以快速喚起應用全局的任務(wù)、或改變?nèi)忠晥D和模式，可以使用標簽欄(Tab Bar)。想要了解更多分段控件的內(nèi)容，請參考下文的分段控件(Segmented Control)部分；想要了解更多標簽欄的內(nèi)容，請參考下文中的標簽欄(Tab Bar)部分。

如果需要在工具欄上展示3個以上的項目，可以使用圖標。由于文本按鈕通常會比圖標更占空間，所以用圖標可以避免文字標題們擠在一起。

保證工具欄文字按鈕之間有足夠的間距。如果按鈕之間間距過小，會讓蚊子看起來擠在一起，讓用戶覺得它們難以區(qū)分。如果按鈕在導航欄中顯得太過擁擠，可以用UIBarButtonSystemItemFixedSpace常數(shù)來增加他們之間的間距。（想要了解更多關(guān)于這個常數(shù)的內(nèi)容，請參考?UIBarButtonItem Class Reference.）

4.1.4?工具欄與導航標準按鈕

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

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

重要

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

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

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

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

4.1.5?標簽欄

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

API注釋

標簽欄包含在標簽欄控制器中，該控制器用于管理自定義視圖的展示形式。想要了解如何在代碼中定義標簽欄，請參考Tab Bar Controllers和UITabBar.

標簽欄位于屏幕底部，并應該保證在應用內(nèi)任何位置都可用。標簽欄是半透明的，展示圖標和文字內(nèi)容，每一項均保持等寬。當用戶選中某個標簽時，該標簽呈現(xiàn)適當?shù)母吡翣顟B(tài)。

標簽欄：

• 是半透明的
• 始終出現(xiàn)在屏幕的底部
• 一個標簽欄一次最多可承載5個標簽（多于5個標簽的時候，可以展示前4個標簽和一個“更多”，并將其他的標簽以列表形式收納到“更多”里面）
• 在橫屏與豎屏情況下，高度均保持一致
• 你可以在標簽上加上紅底白字，顯示數(shù)字或者省略號的小氣泡(badge)以展示特定的應用信息

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

一般而言，使用標簽欄來組織整個應用層面的信息結(jié)構(gòu)。標簽欄非常適合用于應用的主界面中，因為它可以很好地扁平信息層級，并且同時提供多個觸達同級信息類目與模式的入口。

不要使用標簽來讓用戶執(zhí)行對于當前應用與屏幕內(nèi)容的操作。如果你需要給用戶提供操作控件，請使用工具欄。

即使標簽當前不可用，也不要把它從標簽欄中刪除。讓某些標簽時而出現(xiàn)時而隱藏，會讓用戶覺得你的應用UI不穩(wěn)定而且難以預測。最好的解決方式是確保每個標簽都可用，然后給用戶解釋某個標簽的內(nèi)容不可用的原因。舉個例子，當用戶沒有在設(shè)備中保存任何歌曲，在系統(tǒng)音樂應用的歌曲標簽頁里就可以教育用戶如何去下載一首歌。

考慮在tab上加入紅色的小氣泡(Badge)以低調(diào)地傳達信息。你可以通過添加小氣泡來告知用戶該標簽中包含新的內(nèi)容。

根據(jù)控件的標準含義來選擇系統(tǒng)提供的圖標。詳情請查看下文中的標簽欄標準圖標(Tab Bar Icons)。如果想自定義標簽欄圖標，請參考文檔第五章中Bar Buttons Icons里給出的建議。

在橫屏視圖中，你可能會在對分視圖(split view pane)或者浮出層(popover)內(nèi)使用標簽欄以切換或篩選視圖中的內(nèi)容。如果這些標簽是用于切換或者過濾當前視圖中的內(nèi)容的話，你可以這么做。然而通常情況下，在對分視圖和浮出層底部使用分段控件效果會更好，因為視覺上看起來更為協(xié)調(diào)。更多詳情請參考文檔本章第三節(jié)中的分段控件。

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

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

4.1.6?標簽欄標準圖標

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

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

重要

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

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

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

API注釋

想要了解如何在代碼中定義搜索欄，請參考UISearchBar.想要了解更多如何顯示搜索欄，請參考UISearchDisplayController.

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

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

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

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

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

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

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

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

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

在iOS 8以及之后的版本里，你可以通過UISearchDisplayController簡單快捷地把搜索欄放在導航欄中。請注意，當搜索的視圖控制器包含在導航控制器里面的時候——比如在郵件應用(Mail)中那樣，當用戶激活搜索時，搜索欄會自動上浮，平鋪到原來導航欄的位置上。
根據(jù)搜索功能在你的應用中的重要程度來選擇搜索欄的樣式。如果搜索在你的應用中是最基礎(chǔ)的功能，請使用突出樣式(the prominent style)；如果搜索不是用戶常用的功能，那么可以使用弱化樣式(the minimal style)。

4.1.8 范圍欄

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

API注釋

想要了解如何在代碼中定義搜索欄與范圍欄，請參考UISearchBar.

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

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

4.2 內(nèi)容視圖

4.2.1 活動

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

API注釋

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

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

活動是：

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

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

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

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

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

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

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

4.2.2 活動視圖控制器

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

API注釋

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

活動視圖控制器：

• 顯示了讓用戶可以針對當前內(nèi)容執(zhí)行操作的一系列的可配置服務(wù)
• 根據(jù)所處的場景不同，可能出現(xiàn)在操作列表或浮出層中

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

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

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

注意

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

4.2.3 集合視圖

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

API注釋

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

集合視圖：

• 可包含裝飾視圖，以從視覺上區(qū)分項的子集或者提供裝飾性項目，例如自定義背景。
• 布局切換時支持自定義轉(zhuǎn)場動畫。（默認情況下，當用戶導入、移動或者刪除項的時候，會出現(xiàn)系統(tǒng)默認的動畫效果。）
• 支持開發(fā)者額外定義手勢識別來執(zhí)行自定義操作。默認情況下，集合視圖可以識別輕擊(tap)某項以選中，和長按(touch-and-hold)某項進行編輯。

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

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

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

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

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

4.2.4 容器視圖控制器

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

API注釋

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

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

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

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

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

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

4.2.5 圖片視圖

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

API注釋

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

圖片視圖：

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

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

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

4.2.6 地圖視圖

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

API注釋

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

地圖視圖：

• 通常以標準地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來展示地理區(qū)域
• 可以展示以單點標注的備注，以及疊加圖層（繪制路徑或二維區(qū)域繪制輪廓的）
• 支持編程時定義的，或用戶所控制的縮放和移動

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

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

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

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

4.2.7 頁面視圖控制器

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

API注釋

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

頁面視圖控制器：

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

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

• 可以根據(jù)指定的轉(zhuǎn)場來模擬出頁面切換時的動畫。

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

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

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

4.2.8 浮出層

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

API注釋

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

浮出層：

• 是一個自包含的模態(tài)視圖
• 在橫屏環(huán)境中，浮出層會包含一個箭頭，指向其出處
• 背景是半透明的，并且會模糊其背后的內(nèi)容（毛玻璃效果）
• 可以包含多種對象和視圖，比如：
• 表格，圖片，地圖，文本，網(wǎng)頁或者自定義視圖
• 導航欄，工具欄，和標簽欄
• 可以操作當前app視圖中的對象的各種控件或?qū)ο?/li>

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

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

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

重要

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

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

讓浮出層中的箭頭盡可能直接地指向其出處。這樣有助于用戶這個浮出層是從哪里來的，以及他們與哪些任務(wù)和對象相關(guān)。一般來說，在用戶點擊浮出層以外的區(qū)域的時候，保存用戶輸入的內(nèi)容。不是每一個浮出層都會讓用戶明確地確認取消操作，因此用戶可能會誤操作。只有當用戶點擊“取消”按鈕時，才清空他們在浮出層中輸入的內(nèi)容。

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

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

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

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

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

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

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

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

4.2.9 滾動視圖(Scroll View)

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

API注釋

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

滾動視圖：

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

使用滾動視圖來允許用戶在固定的空間內(nèi)瀏覽大尺寸或大量的視圖。

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

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

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

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

4.2.10 分欄視圖控制器

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

API注釋

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

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

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

• 可以在橫屏環(huán)境中展示并排展示兩個窗格
• 可以讓主窗格在詳情窗格上方顯示，也可以在不需要的時候（尤其是豎屏情況下）隱藏主窗格。

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

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

• 表格，圖像，地圖，文本，網(wǎng)絡(luò)，或自定義視圖
• 導航欄，工具欄，或標簽欄

注意

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

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

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

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

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

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

4.2.11 表格視圖

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

API注釋

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

表格視圖：

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

iOS定義了兩種表格樣式：

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

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

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

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

重要

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果表格的內(nèi)容龐大而且復雜，不要在所有數(shù)據(jù)都加載完之后才一起顯示出來?？梢允紫日故疚谋拘畔?，圖片等較為復雜的內(nèi)容則在加載完后再顯示。這樣可以將有用的信息立即傳達給用戶，同時也提高了應用的響應能力。

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

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

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

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

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

4.2.12 文本視圖

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

API注釋

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

文本視圖：

• 是一個可定義為任何高度的矩形
• 當內(nèi)容太多超出視圖的邊框時，文本視圖支持滾動
• 支持自定義字體、顏色和對齊方式（默認情況下，文本視圖會以左對齊的黑色系統(tǒ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.想要了解如何在管理你的應用中的鍵盤，請參考Managing the Keyboard.

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

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

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ò)應用，你大約會用網(wǎng)絡(luò)視圖來實現(xiàn)一個簡單的iOS App，來對你的網(wǎng)頁或者應用進行一個封裝。如果你打算用網(wǎng)絡(luò)視圖來訪問你所控制的網(wǎng)頁內(nèi)容，請務(wù)必閱讀Safari Web Content Guide.

不要用網(wǎng)絡(luò)視圖來創(chuàng)建一個看起來像迷你網(wǎng)絡(luò)瀏覽器的應用。用戶期望使用iOS自帶的Safari來瀏覽網(wǎng)頁內(nèi)容，因此我們并不推薦你在自己的app里復制這種以被廣泛應用的功能。

4.3 控件

4.3.1 活動指示器

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

API注釋

想要了解如何在代碼中定義活動指示器，可以參考UIActivityIndicatorView Class Reference.

活動指示器：

• 當任務(wù)進行和加載時旋轉(zhuǎn)，任務(wù)完成后自動消失
• 不支持用戶交互行為

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

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

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

設(shè)計一個與應用的風格協(xié)調(diào)的活動指示器?？梢缘脑?，讓活動指示器的尺寸和顏色與它所在的背景協(xié)調(diào)。

4.3.2 添加聯(lián)系人按鈕

添加聯(lián)系人按鈕讓用戶將現(xiàn)有聯(lián)系人添加到文本框或者其它文字視圖中。

API注釋

想要了解如何在代碼中定義添加聯(lián)系人按鈕，請參考UIButton.

添加聯(lián)系人按鈕：

• 展示聯(lián)系人列表
• 幫助用戶將一個聯(lián)系人添加到當前聯(lián)系人按鈕所在的視圖中

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

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

4.3.3 日期時間選擇器

日期時間選擇器展示關(guān)于日期和時間的組件，比如小時，分鐘，天，以及年。

API注釋

想要了解如何在代碼中定義添加日期時間選擇器，請參考UIDatePicker.

日期時間選擇器：

• 最多可以展示4個獨立的滑輪，每一個滑輪表示一個不同的值，比如月份或小時等
• 在每個滑輪的中央使用深色字體來表示當前選中的值
• 日期時間選擇器的大小與iPhone鍵盤的大小相同，并且不可更改
• 包括四種模式，每一種模式代表了一組不同的值:

• 日期和時間。日期和時間模式（默認模式）包含日期、小時、和分鐘，以及一個可選的AM/PM值。
• 時間。時間模式包括小時和分鐘，以及可選的AM/PM值。
• 日期。日期模式包括月份，天以及年三個值。
• 倒計時器。倒計時器模式展示了小時和分鐘值。你可以精確地設(shè)定總共的倒計時間，倒計時的最大值為23小時59分鐘。

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

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

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

4.3.4 詳情展開按鈕

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

API注釋

想要了解如何在代碼中定義詳情展開按鈕，可以參考UITableViewCell Class Reference和UIButton.

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

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

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

4.3.5 信息按鈕

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

API注釋

想要了解如何在代碼中定義信息按鈕，可以參考UIButton.

iOS包含了兩種信息按鈕樣式：適用于淺色內(nèi)容上的深色按鈕，以及適用于深色內(nèi)容上的淺色按鈕。

使用信息按鈕來顯示app的配置信息或選項。你可以根據(jù)自己app的UI風格來選擇最為協(xié)調(diào)的信息按鈕樣式。

4.3.6 標簽

標簽用于放置靜態(tài)文本。

API注釋

想要了解如何在代碼中定義標簽，可以參考UILabel Class Reference.

標簽可以：

• 展示任意數(shù)量的靜態(tài)文本
• 禁止除了復制文本外的任何用戶交互行為

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

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

4.3.7 網(wǎng)絡(luò)活動指示器

網(wǎng)絡(luò)活動指示器在狀態(tài)欄中出現(xiàn)，表示網(wǎng)絡(luò)活動正在進行。

API注釋

你可以在代碼中使用?UIApplication的networkActivityIndicatorVisible 來控制該活動指示器的可見性。

網(wǎng)絡(luò)活動指示器：

• 出現(xiàn)在狀態(tài)欄中，當網(wǎng)絡(luò)活動正在進行時它會旋轉(zhuǎn)，在活動停止時它則消失
• 不支持用戶交互行為

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

4.3.8 頁面控件

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

API注釋

想要了解如何在代碼中定義頁面控件，可以參考UIPageControls.

頁面控件：

• 包含一系列圓點，圓點的個數(shù)代表了當前打開的視圖數(shù)量（從左到右，這些圓點代表了視圖打開的先后順序）
• 默認情況下，使用不透明點來標識當前打開的視圖，使用半透明點來表示所有其它視圖
• 不支持用戶訪問不連續(xù)的視圖
• 當視圖數(shù)量超過頁面寬度可承載的氛圍時，點的大小和間距并不會因此變?。ㄈ绻枰@示的點超過一定數(shù)量，系統(tǒng)會把它截斷）
• 默認情況下不支持視圖之間導航；你必須實現(xiàn)視圖到視圖之間的導航并適當?shù)馗马撁婵丶顟B(tài)

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

不要使用頁面控件來顯示視圖中的層次結(jié)構(gòu)或其他復雜的排列。頁面控件不顯示視圖是如何相互關(guān)聯(lián)的，而且不表明哪個視圖對應于每個點，因此它不能幫助用戶導航到特定的視圖。

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

在打開視圖的底部邊緣和屏幕的底部邊緣里垂直居中頁面控件。在這個位置，頁面控件是始終可見的，并且不會阻擋用戶的使用。

4.3.9 選擇器

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

API注釋

想要了解如何在代碼中定義選擇器，可以參考UIPickerView Class Reference.

選擇器：

• 是日期時間選擇器的通用模式
• 包括一個或多個滑輪，每個滑輪含有一組值
• 當前選中的值在中間，以深色標識
• 不可以自定義大小（選擇器的大小與iPhone的鍵盤相同）

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

一般來說，當用戶對整組值都比較熟悉的時候，可以使用選擇器。由于當滑輪靜止的時候，大部分的數(shù)值會被隱藏，最好是在用戶對所有數(shù)值均有預期的情況下才使用選擇器。當你需要展示一大組用戶并不熟悉的選項，此種選擇器可能不太適合。

盡可能讓讓用戶在當前視圖中使用選擇器。不要讓他們在使用選擇器時還要進入其它的視圖。

如果你需要展示的備選項數(shù)量很多，考慮使用表格視圖(Table View)而不是選擇器。因為表格視圖的高度較大，內(nèi)容滾動起來會更快。

4.3.10 進度視圖

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

API提示：

想要了解更多如何在代碼中定義進度視圖，可以參考UIProgressView Class Reference.

進度視圖：

• 是一條軌跡，隨著進程的進行從左向右進行填充
• 不支持用戶交互行為

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

• 默認(Default).默認樣式適合用在app的主要內(nèi)容區(qū)中。

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

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

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

4.3.11 刷新控件

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

API提示：

想要了解更多如何在代碼中定義刷新控件，可以參考 UIRefreshControl Class Reference.

刷新控件：

• 看起來類似活動指示器
• 可以出現(xiàn)在標題中
• 默認狀態(tài)下不可見，當用戶在表格上緣往下拖拽以刷新內(nèi)容時才出現(xiàn)

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

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

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

4.3.12圓角矩形按鈕

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

4.3.13 分段控件

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

API提示：

想要了解更多如何在代碼中定義分段控件，可以參考 Segmented Controls

分段控件：

• 由兩個或以上的分段組成，每一個分段的寬度相同，與分段的數(shù)量成比例（分段數(shù)量越多，則寬度越小）
• 可以包含文字或者圖片

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

保證每個分段都容易點擊。為了保證每個分段的大小有至少44×44像素，請控制分段的數(shù)量。在iPhone上，1個分段控件最多包含5個分段。

盡可能地保持每個分段中的文字長度一致。因為每個分段都是等寬的，當文本長度差異很大時看上去會很不協(xié)調(diào)。

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

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

4.3.14 滑塊

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

API提示：

想要了解更多如何在代碼中定義滑塊，可以參考 Sliders

滑塊：

• 由一條水平的軌跡和一個Thumb(滑塊中支持用戶水平拖拽的圓形控件)組成
• 左邊和右邊支持使用自定義圖片來表述相對的最小值與最大值的含義
• 填充軌道左邊緣最小值之間到Thumb之間的部分

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

如果合適的話，自定義滑塊的外觀。比如，你可以:

• 定義Thumb的外觀，讓用戶一看就知道滑塊當前的狀態(tài)
• 在軌跡的左右兩端使用自定義圖片來告訴用戶滑塊的最小值和最大值所代表的含義。比如說，一個圖調(diào)整圖片尺寸的滑塊可以在最小值的左邊放一張小圖，在最大值的右邊放一張大圖。
• 根據(jù)Thumb所在的位置和當前滑塊的狀態(tài)來為滑塊的軌跡定義不同的顏色

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

4.3.15 步進器

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

API提示：

想要了解更多如何在代碼中定義步進器，可以參考UIStepper.

步進器：

• 是一個兩段控件，其中一段默認顯示減號，另一端默認顯示加號
• 支持自定義圖片
• 不展示用戶更改的值

當用戶想要對數(shù)值進行小幅度調(diào)整時，可以使用步進器。

當用戶需要大幅度調(diào)整數(shù)值的時候，不要使用步進器。用戶可能會在打印機里使用步進器來確定打印份數(shù)，因為這個值的變化幅度通常并不大；而當用戶需要選擇打印的頁碼范圍時，使用步進器就會讓操作變得繁瑣，因為用戶很可能要點很多下才能選定頁數(shù)。

確保步進器所調(diào)整的值明顯可見。步進器自身不展示任何數(shù)值，所以你需要保證讓用戶知道他們正在調(diào)整哪一個數(shù)值。

4.3.16 開關(guān)按鈕

開關(guān)按鈕展示了兩個互斥的選項或狀態(tài)。

API提示：

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

開關(guān)按鈕：

• 顯示了一個項存在二元狀態(tài)
• 僅在表格視圖中可用

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

你可以使用開關(guān)按鈕來控制視圖中的其它UI元素。根據(jù)用戶的選擇，新的列表項可能出現(xiàn)或者消失，或從激活狀態(tài)變?yōu)椴患せ顮顟B(tài)。

4.3.17 系統(tǒng)按鈕

系統(tǒng)按鈕執(zhí)行app中定義的行為。

API提示：

在iOS 7中，UIButtonTypeRoundedRect已經(jīng)被重新定義為?UIButtonTypeSystem. 想要了解更多如何在代碼中定義系統(tǒng)按鈕，可以參考 UIButton.

系統(tǒng)按鈕：

• 默認狀態(tài)下不含邊界，也不含背景圖
• 可以是圖標或者文字標題
• 支持自定義樣式，如描邊或者加背景圖(想要自定義按鈕外觀，可以使用 UIButtonTypeCustom 類型的按鈕，并且提供背景圖片)

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

• 使用動詞或動詞短語來描述按鈕所代表的動作。這種命名方法告訴用戶這個按鈕是可交互的，也提示了用戶點擊之后會執(zhí)行什么操作
• 使用標題式大寫(title-style capitalization，每個單詞的首字母均大寫)。除了冠詞，并列連詞以及少于4個字母的介詞外，標題中每個單詞的首字母均大寫。
• 標題不要太長。太長的標題會被截斷，讓用戶難以理解其含義

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

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

4.3.18文本框

開關(guān)按鈕展示了兩個互斥的選項或狀態(tài)。

API提示：

想要了解如何在代碼中定義文本框，以及在文本框中支持圖片和按鈕，可以參考UITextField.

文本框

• 高度固定，包含圓角
• 當用戶點擊它時，自動喚起輸入鍵盤
• 可以包含系統(tǒng)提供的按鈕，如書簽按鈕(Bookmarks)
• 可以展示多種文字樣式(了解更多請參考 UITextView)

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

你可以自定義一個文本框，幫助用戶更好地理解如何使用它。舉個例子，你可以在文本框的左側(cè)或者右側(cè)加入自定義圖形，或者加入系統(tǒng)按鈕，如書簽按鈕等。一般來說，文本框的左側(cè)用于表述文本框的含義，而右側(cè)用于展示附加的功能，如書簽。

合適的話，在文本框右側(cè)加入清除按鈕。輕擊清除按鈕變可清空當前框內(nèi)輸入的全部內(nèi)容，無論你原本打算在這個按鈕上面展示什么其它圖片。

如果可以幫助用戶理解的話，可以在文本框中加入提示文字。當文本框里沒有任何其它提示文字時，會展示占位符文本(placeholder text)，如名字、地址等。

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

4.4臨時視圖

4.4.1 警告框

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

API提示：

如需在代碼中使用警告框，你可以創(chuàng)建UIAlertController并且指定UIAlertControllerStyleAlert.

警告框：

• 必須包含標題，有時候會包含正文文本
• 包含一個或多個按鈕

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

避免出現(xiàn)不必要的警告框。一般來說，在以下情景中，是不需要用到警告框的：

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

• 標題式大寫(Title-style capitalization)指的是除了冠詞，并列連詞以及少于4個字母且不處在第一個單詞位置上的介詞外，標題中每個單詞的首字母均大寫。
• 句子式大寫(Sentence-style capitalization)指的是第一個字母大寫，其余除了專有名詞和專有形容詞外的字母均小寫

簡明扼要地描述當前情景，并告訴用戶他們可以做什么。理想情況下，警告框中的文字應該給與用戶足夠的情景和上下文聯(lián)想，讓他們可以清楚地知道為什么警告會出現(xiàn)，同時幫助他們判斷自己應該點哪個按鈕。

保證標題足夠簡短，最好在一行之內(nèi)。過長的標題讓用戶很難快速理解它的意思，還可能會被截斷。

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

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

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

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

盡可能地避免使用“你”，“你的”，“我”，“我的”這類字眼。有時候，這些直接指向的字眼容易引起歧義，有時候甚至會被誤認為是一種冒犯。
適當?shù)厥褂么髮懞蜆它c符號，尤其是在以下這些場景中：

如果你必須為警告框添加正文文本，請使用一個完整的短句。可能的話，盡量保證句子在1到2行之間。如果句子太長，用戶會需要滾動才能看完，這樣的體驗很糟。使用句子式大寫，并在句末加上適當?shù)臉它c符號。

避免在文本中詳細描述“該按哪個按鈕”而導致文本過長。理想情況下，表意明確的警告文案和邏輯清晰的按鈕文案已經(jīng)足以讓用戶正確判斷自己該按哪個按鈕了。但如果你一定要在文案中描述這些內(nèi)容，請遵循以下原則：

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

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

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

提示

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

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

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

提示

一般來說，當警告框出現(xiàn)的時候，按Home鍵將會從該app里切回主屏幕，此時Home鍵的效果類似于取消按鈕——當用戶回到app中的時候，警告框?qū)⑾В僮饕膊粫粓?zhí)行。

為按鈕設(shè)計簡短而邏輯清晰的文案。好的按鈕文案一般只有1到2個單詞，描述用戶點擊按鈕后的結(jié)果。設(shè)計文案時可以遵循以下指南：

• 跟其它所有按鈕一樣，使用標題式大寫，而且不需要標點符號
• 盡可能的使用與警告文案直接相關(guān)的動詞或動詞詞組，如”取消(Cancel)”，”查看全部(View All)”，”回復(Reply)”和“忽略(Ignore)”等
• 當沒有更好的選擇的時候，可以使用”O(jiān)K”.避免使用”是(Yes)”或”否(No)”。
• 避免使用”你”，“你的”，“我”，“我的”這類字眼。含有這些字眼的文案可能會指代不清，還有可能造成冒犯。

4.4.2 操作列表

操作列表展示了與用戶觸發(fā)的操作直接相關(guān)的一系列選項。

API提示：

如需在代碼中使用操作列表，你可以創(chuàng)建一個 UIAlertController.并指定UIAlertControllerStyleActionSheet

操作列表：

• 由用戶某個操作行為觸發(fā)
• 包含兩個或以上的按鈕

使用操作列表來：

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

在用戶完成一項可能有風險的操作前獲得用戶的確認。操作列表讓用戶有機會停下來充分考慮當前操作可能導致的危險結(jié)果，并為他們提供了一些其它的選項，尤其是在以下這些情景下：

使用紅色文字來表示可能存在破壞性的操作。在操作列表的頂部使用文字顏色為紅色的按鈕，因為越靠近列表頂部的操作越容易引起用戶注意。在iPhone里，潛在風險的操作離列表底部越遠，用戶在關(guān)注Home鍵的時候就越不容易誤點它。

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

4.4.3模態(tài)視圖

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

API提示：

如需在代碼中使用模態(tài)視圖，你可以創(chuàng)建一個 UIPresentationController. 并指定適當?shù)臉邮?完整的樣式列表，請參考 Modal Presentation Styles)

模態(tài)視圖：

• 能占據(jù)整個屏幕，它也可能占據(jù)整個父視圖(parent view)的區(qū)域，或者是屏幕的一部分
• 包含完成當前任務(wù)所需的文字和控件
• 通常也會包含一個完成任務(wù)的按鈕（點擊后即可完成任務(wù)，當前模態(tài)視圖也會消失），和一個取消按鈕（點擊后即放棄當前任務(wù)，同時當前模態(tài)視圖消失）

當需要用戶完成與你的app中的基礎(chǔ)功能相關(guān)的、獨立的任務(wù)的時候，可以使用模態(tài)視圖。模態(tài)視圖尤其適用于那些所需元素并非常駐在app主要UI中、又包含多個步驟的子任務(wù)。

根據(jù)當前任務(wù)的種類和你的app的整體視覺風格來選擇適當?shù)哪B(tài)視圖。你可以使用以下定義的任何一種模態(tài)視圖樣式：

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

確保你的模態(tài)視圖看起來與你的app的整體視覺風格相協(xié)調(diào)。舉個例子，如果一個模態(tài)視圖中含有導航條和取消或完成任務(wù)的按鈕，這里的導航條樣式應該與你的app中導航條一樣。

合適的話，在模態(tài)視圖里加入可以說明任務(wù)內(nèi)容的標題。你可能還需要在模態(tài)視圖里加入一些補充文字，來清楚地闡明任務(wù)內(nèi)容，并提供一些任務(wù)指南。

選擇一個適當?shù)倪^渡動畫來展示模態(tài)視圖。使用與你的app一致的過渡動畫，讓用戶可以準確地理解當前頁面內(nèi)容的轉(zhuǎn)變與模態(tài)視圖的出現(xiàn)。關(guān)于這一點，你可以指定以下任意一種過渡動畫：

• 垂直出現(xiàn)(Vertical).模態(tài)視圖從底部邊緣滑入屏幕，也同樣從屏幕底部滑出（默認模式）。
• 彈出(Flip).當前視圖從右往左水平滑動，露出模態(tài)視圖。從視覺上看，模態(tài)視圖好像原來就處于當前視圖的下面，當前視圖移開時，它便出現(xiàn)了。離開模態(tài)視圖時，原先的父視圖從左邊滑回屏幕右邊。

如果你要改變當前的過渡動畫樣式，請確保這種改變對于用戶而言是有用而且有意義的。用戶很容易便能感知到這些改變，還會認為這些改變存在特別的意義。最好能設(shè)計出一種符合邏輯并始終保持一致的過渡方式，讓用戶容易感知并且記憶。在沒有充分理由支持的情況下，最好不要改變這些默認的過渡方式。

 

本章英文原文訪問地址：iOS Human Interface Guidelines

本章中文翻譯PDF下載：

下載鏈接：http://pan.baidu.com/s/1eQU5Bbk

密碼：kxd5

相關(guān)閱讀：

iOS 9人機界面指南（一）：UI設(shè)計基礎(chǔ)

iOS 9人機界面指南(二)：設(shè)計策略

iOS 9人機界面指南(三)：iOS 技術(shù) (上)

iOS 9人機界面指南(三)：iOS 技術(shù) (中)

iOS 9人機界面指南(三)：iOS 技術(shù) (下)

 

來源：騰訊ISUX