iOS10發(fā)布了，蘋果遵循了一切從簡但又增加了一些提升用戶體驗的功能，比如向開發(fā)者開放了更多接口，設計者又如何跟隨iOS的步伐做好產品設計呢？本文是系列文章的完結篇，enjoy~

7. UI視圖（UI Views）

7.1 操作列表（Action Sheets）

操作列表是一種對某個控件或操作作出應答的特殊形式的警告框，它展示了與當前內容相關的一組選項（兩個或更多）。使用操作列表讓用戶觸發(fā)任務，或是在用戶執(zhí)行某個有潛在破壞性的操作前請求用戶確認。在小屏幕，操作列表從屏幕底部向上滑出。在大屏幕，操作列表會以浮出層的形式突然出現。

提供取消按鈕，如果它能加強明確性。當用戶想要放棄任務時，取消按鈕給予了他們信心。屏幕底部出現的操作列表最下方應該有個取消按鈕。

突出破壞性的選項。對那些執(zhí)行破壞性或危險操作的按鈕使用紅字，并且在操作列表的頂部放置這些按鈕。

避免讓用戶滾動操作列表。如果操作列表有太多選項，用戶就必須通過滾動查看所有的選項。滾動需要用戶花更多的時間做決定，并且在滾動過程中容易誤點某個選項。

了解開發(fā)細節(jié)，請參閱UIAlertController中的UIAlertControllerStyleActionSheet。

7.2 活動視圖（Activity Views）

一個活動就是一個在當前環(huán)境下有意義的任務，比如復制、收藏或是查找。一旦活動被觸發(fā)，它可以立即執(zhí)行一個任務，也可以在開始前請求更多的信息。活動由活動視圖管理，根據設備和橫豎屏的不同，以表單或浮出層的形式出現。使用活動向用戶提供你的app能夠執(zhí)行的自定義服務或任務。

系統(tǒng)提供了一系列內置的活動，比如打印、Twitter、信息和Airplay。這些任務總是在活動視圖的最前列出現，并且不能被重新排列。你無須為執(zhí)行這些內置任務創(chuàng)建自定義活動?；顒右晥D還能展示來自其它app的分享和操作插件。請參閱Sharing and Actions。

設計能夠代表你的自定義活動的簡單的模板圖像。模板圖像（template image）利用遮罩(mask)創(chuàng)建圖標。模板圖像應使用透明度合適和經過抗鋸齒處理的黑色和白色，并且不包含陰影。模板圖像應該被放置在一塊大約為70px*70px尺寸的區(qū)域中心。

設計能夠簡扼描述你的任務的活動標題。在活動視圖中，標題顯示在圖標下方。短標題是最佳的。當標題過長，iOS首先會縮小字體，若文本實在過長， iOS會截斷它。一般來說，避免在標題中包含你的公司或產品名字。

確?；顒釉诋斍碍h(huán)境中是合適的。雖然系統(tǒng)提供的任務在活動視圖中不能被重新排列，但當它們對你的app不適用時，你可以去除它們。比如，你可以通過去除打印活動而阻止用戶在你的app中打印圖片。你也可以在特定的時候讓特定的自定義任務出現。

通過操作按鈕呼出操作視圖。用戶已經習慣了通過點擊操作按鈕來進入系統(tǒng)提供的活動。避免用其它方式替代，從而讓用戶感到困惑。

了解開發(fā)細節(jié)，請參閱UIActivityViewContoller和UIActivity。

7.3 警告框（Alerts）

警告框傳達了與你的app或設備狀態(tài)相關的重要信息，并且通常在請求用戶反饋。警告框由標題、描述信息（可選）、一個或多個按鈕和用于獲取用戶輸入的文本框（可選）。除了這些可配的元素之外，警告框的視覺外觀
是固定的的且不能被自定義。

盡可能少地使用警告框。警告框會中斷用戶體驗，只有在重要情境下才能使用，比如確認購買、破壞性操作（如刪除），或是通知用戶當前出現了問題。正是因為警告框的罕見性，才讓用戶更加重視警告框。確保每個警告框都提供了關鍵的信息和有用的選項。

在橫屏和豎屏下雙重測試警告框的外觀。警告框可能在橫屏和豎屏模式下看起來有所區(qū)別。優(yōu)化警告框文本，確保用戶在任一模式下都無需滑動操作即可完整閱讀。

了解開發(fā)細節(jié)，請參閱UIAlertController。

（1）警告框標題和信息

使用簡短的、描述性的、多詞語的警告框標題。用戶需要在屏幕上閱讀的文本越短越好。嘗試更多地推敲標題，以避免額外添加信息文本。由于單詞語的標題很少能提供有用信息，考慮使用問句或是短句。盡可能控制標題字數在一行內。使用句子式大寫，并用合適的標點符號為句子結尾。不要給句子片段（譯者注：不完整的殘缺句）加上結束標點。

如果你必須提供一段信息，請使用簡短、完整的句子。盡量將說明信息控制在一到兩行之內，這樣用戶就無需通過滾動查看。使用句子式大寫和合適的標點符號。

避免使用指責的、苛刻的或是無禮的語氣。用戶知道警告框是為了通知他們發(fā)生的問題和危險情況。只要你使用友好的語氣，那么表現地消極和直接一些好過一味的積極和隱晦。避免使用“你”、“你的”、“我”和“我的”之類的代詞，因為它們常被理解為無禮和傲慢。

避免對警告框按鈕做出解釋。如果警告框文本和按鈕標題足夠明了，那么就無需對按鈕的用途做出多余的解釋。在極少數需要為按鈕提供指導的情況下，請使用詞語“輕擊（tap）”，并且在提到按鈕名稱時使用大寫，并且不要添加雙引號。

（2）警告框按鈕

通常情況下，使用雙按鈕警告框。雙按鈕警告框提供了在兩個選項中快速抉擇的途徑。單按鈕警告框只負責通知，卻未給予用戶對當前情勢的控制權。擁有三個或以上按鈕的警告框增加了復雜性，并可能需要滾動操作，而這恰是一種不良的用戶體驗。如果你發(fā)現自己需要兩個以上的按鈕，可以考慮用操作列表代替。請參閱Action Sheets。

使用簡明合理的按鈕標題。最好的按鈕標題應該包含一個或兩個能夠描述選擇按鈕后的結果的詞語。對于所有的按鈕標題，使用標題式大寫，并且不含標點符號。盡可能地，使用與警告框標題或信息直接對應的動詞或動詞性詞組，比如，“查看全部”、“回復”、或“忽略”。使用“好的（OK） ”表示簡單的接受。避免使用“是”或“否”。

在用戶預期的位置放置按鈕。一般來說，用戶最可能輕擊的按鈕應該在右邊。取消按鈕應該在左邊。

為有取消功能的按鈕合理命名。一個能夠取消警告框操作的按鈕就該被命名為“取消”。

識別會產生破壞性結果的按鈕。如果一個警告框按鈕會產生破壞性的操作，比如刪除內容，那么請將按鈕樣式設定為“Destructive”，這樣它就能通過系統(tǒng)獲取合適的格式。了解開發(fā)細節(jié)，請參閱UIAlertAction中的UIAlertActionStyleDestructive常量。另外，為用戶提供一個“取消”按鈕，讓它們能夠安全地從破壞性操作中退出。通過標記“取消”按鈕為默認按鈕，來加粗按鈕文本。

允許使用“Home”鍵來取消警告框。當警告框出現時，按住Home鍵會退出app。但同時，它應該也產生和點擊取消按鈕一樣的效果，即在不執(zhí)行任何操作的情況下關閉警告框。如果你的警告框沒有取消按鈕，那么考慮將點擊Home鍵也會關閉警告框寫入你的代碼中。

7.4 集合（Collections）

一個集合管理著一組有序的內容，比如一組圖片，并且在可自定義的且高度可視化的布局中展示它。因為集合無需執(zhí)行嚴格的線性格式，所以它尤其適合用來展示大小不同的項目。簡言之，集合是用來展現圖片類內容的理想視圖。背景及其它裝飾性視圖可以選擇性地用于視覺上區(qū)分不同組別的項目。

集合同時支持交互性和動畫。默認狀態(tài)下，你可以通過輕擊(tap)來選擇，長按(touch and hold)來編輯，以及輕掃(swipe)來滾動。如果你的app需要，你可以加入更多的手勢用于執(zhí)行自定義操作。在集合中，當項目被插入、刪除或是重新排序時會伴隨默認動畫，你也可以使用自定義動畫。

若標準的行或網格布局已能滿足需求，請避免創(chuàng)造顛覆性的新設計。集合是為了優(yōu)化用戶體驗，而不是變成關注的中心。讓用戶能更容易選擇一項。如果用戶很難在集合中選中某項，它們會變得沮喪并且很快地在獲得想要的內容前失去興致。在內容周圍留有充足的邊距，保持布局的整潔并避免內容重疊顯示。

對于文本，考慮用表格來替代集合。一般來說，在滾動列表中的文字信息更易于閱讀和理解。

請謹慎地對待布局的動態(tài)變化。集合的布局可以隨時被改變。如果你在用戶查看視圖或是與之交互時讓它發(fā)生了動態(tài)的變化，請確保變化是有意義的并且易于跟蹤。沒有目的的布局變化會讓你的app看起來不可預知并且難用。如果因為布局變化，而導致用戶丟失了當前關注的焦點或是瀏覽的內容，那么他們很可能會覺得自己無法再控制這個app了。

了解開發(fā)細節(jié)，請參閱UICollectionView。

7.5 圖片視圖（Image Views）

圖片視圖在透明或不透明的背景上展示一張圖片或是一組圖片的動態(tài)序列。在圖片視圖中，圖片可以被拉伸、縮放、根據屏幕調整大小，或是固定在特定位置。默認情況下圖片視圖是不可交互的。

可能時，確保一個圖片視圖內的所有圖片都尺寸一致。如果你的圖片大小不一，圖片視圖就要逐一調整尺寸。使用尺寸一致的圖片比使用不同尺寸的圖片更有效率。若是使用已縮放好的且無需額外調整的圖片就更加高效。

了解開發(fā)細節(jié)，請參閱UIImageView。

Note

模板圖片(template image)會丟棄圖片本身的色彩，而采用圖片視圖使用的色調。請參閱UIImage中的UIImageRenderingModeAlwaysTemplate。

7.6 地圖（Maps）

地圖視圖允許你在app內展示地理數據，并且支持原生地圖應用的大部分功能。地圖視圖可以展示標準地圖、衛(wèi)星地圖或是兩者兼有。它可以含有定位標簽（大頭針）和疊加圖層，并且支持縮放和平移。

一般情況下，保證你的地圖是可交互的。用戶習慣了使用手勢與原生的地圖應用交互，并且希望在你的地圖里也能以相同的方式交互。

使用合理的標簽（大頭針）顏色。大頭針代表著地圖上你感興趣的點。用戶已經熟悉了原生地圖應用中的標準大頭針顏色。避免在你的app中對這些顏色有不同的定義。使用紅色表示重點，綠色表示起點，紫色表示用戶指定的位置。

了解開發(fā)細節(jié)，請參閱MapKit。

7.7 頁面（Pages）

頁面視圖控制器提供了在多頁面內容間（比如在文檔中、書本、筆記本或是日歷中）實現線性導航的方式。頁面視圖控制器通過滾動或翻頁兩種樣式來處理導航時頁面的過渡。滾動過渡沒有特定的外觀；頁面流暢地從當前頁滾動至下一頁。翻頁過渡會在你橫掃屏幕時讓頁面翻卷過去，就好像在現實中里翻書頁一樣。

滾動過渡（查看動畫請移步https://developer.apple.com/ios/human-interface-guidelines/ui-views/pages/）

如果合適的話，設計一種非線性的導航方式。使用頁面視圖控制器時，頁面只能按次序變換，你無法在不相鄰的頁面間跳轉。如果用戶于需要在你的app中不按次序瀏覽頁面，請設計一種滿足該功能的自定義控件。

了解開發(fā)細節(jié)，請參閱UIPageViewController。

7.8 浮出層（Popovers）

浮出層是一個當你點擊某控件或某塊區(qū)域時，會在屏幕內其它內容上方出現的暫時視圖。通常來說，浮出層包含一個指向其出現位置的箭頭。浮出層含有非模態(tài)和模態(tài)兩種形式。非模態(tài)浮出層可以通過點擊屏幕上其它區(qū)域或是浮出層上的某個按鈕來關閉它。模態(tài)浮出層只能通過點擊浮出層上的取消或是其它按鈕來關閉。

浮出層最適合用于大屏幕，并且可以包含任何一種元素，比如導航欄、工具欄、標簽欄、表格、集合、圖片、地圖以及自定義視圖。當浮出層出現時，通常就無法再與其它視圖進行交互，除非浮出層被關閉。利用浮出層來展示與當前屏幕內容相關的選項或信息。比如，非常多的iPad應用會在你點擊分享按鈕后彈出浮出層來展示分享選項。

避免在iPhone設備上展示浮出層。一般來說，浮出層更適用于iPad應用。對于iPhone應用，盡量使用全屏的模態(tài)視圖來展示信息，而非使用浮出層。了解更多指導，請參閱 Modality。

只在確認和引導時使用關閉按鈕。諸如“取消”或“完成“之類的關閉按鈕，若是能清晰表明操作結果（比如，在保存或未保存狀態(tài)下退出），那么就它就有存在的價值。一般來說，當浮出層不再有必要存在時，它應該自動關閉。在大多數情況下，當用戶點擊浮出層外部區(qū)域或是選擇了浮出層內的某項后，浮出層應該關閉。如果用戶能在浮出層進行多選，那么只有在用戶明確選擇關閉它或是點擊了浮層的外部區(qū)域時，它才會消失。

自動關閉一個非模態(tài)的浮出層時替用戶保存當前輸入。用戶很容易就會因誤點屏幕其它區(qū)域而將浮出層關閉。只有在用戶明確點擊“”取消“”按鈕的情況下才可以丟棄他們的輸入。

在屏幕上的合適位置放置浮出層。浮出層的箭頭應該盡可能地指向將浮層呼出的元素。由于浮出層無法在屏幕中被拖動，所以它不應該遮擋住用戶在使用浮出層時可能會需要查看的重要內容。浮出層也不應該遮擋住觸發(fā)它的元素。

同一時間只展示一個浮出層。同時展示多個浮層會導致界面雜亂無章，并讓用戶感到困惑。永遠都不要通過一個浮出層觸發(fā)另一個浮出層的方式，在屏幕上展示并列或堆疊的多個浮層。如果你需要展示一個新的浮層，請關閉當前的浮層。

不要在浮出層上展示其它的視圖。除了警告框，任何其它視圖都不應該出現在浮出層之上。

可能時，讓用戶通過一次點擊就可關閉當前浮層并且打開新浮層。當欄上有多個不同的按鈕且每個會呼出一個浮出層時，尤其應當考慮避免不必要的點擊次數。

避免設計過大的浮出層。浮出層不應該占據整個屏幕。設計一個尺寸足以展示其內容的浮出層，并且指向呼出它的地方。請注意系統(tǒng)可能會調整浮出層的尺寸以保證其在屏幕上完美展現。

確保自定義浮出層看起來還是一個是浮出層。雖然你可以自定義浮出層的大部分視覺外觀，但是避免創(chuàng)造一個用戶可能辨認不出是浮出層的設計。含有標準控件和視圖的浮出層最容易被用戶接受。

當浮出層的尺寸變動時提供流暢的過渡動畫。有些浮出層會為相同的信息同時提供精簡和拓展視圖。如果你要調整浮出層的尺寸，請使用轉場動畫以避免給用戶造成新浮層取代舊浮層的印象。

了解開發(fā)細節(jié)，請參閱UIPopoverPresentationController。

7.9 滾動視圖（Scroll Views）

滾動視圖讓用戶能夠瀏覽超出屏幕可見范圍的內容，比如文檔中的文本或是一個集合的圖片。當用戶輕掃、滑動、拖曳、輕擊以及捏合時，滾動視圖會遵循用戶的手勢，以一種自然的方式顯示或是縮放內容。滾動視圖本身沒有外觀，但是在用戶與之交互時會顯示一個暫時性的滾動指示器（ scrolling indicator）。滾動視圖也可以被設置為分頁模式，此時滾動手勢會展開一個全新的頁面，而不是在當前頁面來回移動。

合理地支持縮放操作。如果你的app需要，可以讓用戶通過捏合或者雙擊來縮放。當你允許縮放時，請設置有意義的最大和最小比值。比如，對一個文本不斷放大直到其填充屏幕的行為可能在大部分的app中毫無意義。

當滾動視圖處于分頁模式時，考慮顯示頁面控件元素。頁面控件表明了分頁、分屏或者分塊內容的可得總量，并且指明了當前顯示的是哪一個。如果你在滾動視圖中展示了頁面控件，請禁用處在同軸的滾動指示器以避免混淆。了解更多指導，請參閱Page Control。

不要在一個滾動視圖內放置另一個滾動視圖。這么做會產生一個難以控制且不可預知的界面。

一般而言，同一時間只展示一個滾動視圖。在滾動視圖內，用戶常會作出幅度很大的輕掃手勢，這樣一來，就很難避免和同屏內相鄰的滾動視圖發(fā)生交互。如果你需要在一屏內放置兩個滾動視圖，考慮讓他們在不同的方向滾動，這樣一個手勢就不太可能同時作用于兩個視圖。比如，當iPhone處于豎屏模式時，“股市”app會在水平滑動的公司詳情視圖上方展示垂直滾動的股票報價列表。

了解開發(fā)細節(jié)，請參閱UIScrollView。

7.10 分屏視圖（Split Views）

分屏視圖用于展示兩塊相鄰窗格的內容，主窗格上的內容保持不變，而次窗格會展示相關的信息。每一個窗格都能包含任意種類的元素，包括導航欄、工具欄、標簽欄、表格、集合、圖片、地圖以及自定義視圖。分屏視圖一般用于展示可分類內容：主窗格展示一列類別目錄，次窗格展示經選中類目篩選后的結果。如果你的app需要，主窗格可以覆蓋在次窗格上，并且在不需要的時候被隱藏至屏幕外。這點在設備處于豎屏模式時尤為重要，因為它為瀏覽次窗格上的內容提供了更多的空間。

選擇一個適用于你的內容的分屏視圖布局。默認的分屏視圖分別將1/3和2/3的空間分配給主窗格和次窗格。但是屏幕也可以被平分為兩半。根據你的內容來選擇合適的分屏，并保證兩個窗格不會看起來不平衡。避免設計一個比主窗格還窄的次窗格。

保持主窗格里被激活的選項高亮。盡管次窗格的內容會變化，它應該永遠與主窗格里清晰易辨的選中項相對應。這樣有助于用戶理解主次窗格之間的關系。

一般地，限制導航于分屏視圖的一側。在分屏視圖的兩個窗格都放置導航會讓用戶很難保持方向感，并且會難以明白兩個窗格間的關系。

為重新呼出被隱藏的主窗格提供多種方式。在一些主窗格可能會離開屏幕的布局中，請確保能提供提供一個按鈕——一般在導航欄上——用于重新呼出主窗格。除非你的app已將滑動手勢來于執(zhí)行其它功能，否則請允許用戶也能通過從屏幕邊緣輕掃(swipe)來呼出主窗格。

了解開發(fā)細節(jié)，請參閱UISplitViewController。

7.11 表格（Tables）

表格通過一個可以滾動的、單欄的行列表來呈現數據，這個行列表可以被分成不同的段落或群組。使用表格以列表的形式來整齊高效地展示大量或少數的信息。一般來說，表格最最適合于基于文本的內容，并且通常在分屏視圖的一側作為導航出現，并伴有顯示在另一側的相關內容。請參閱“分屏視圖Split Views”。

iOS采用兩種類型的表格：平鋪型（plain）和分組型（grouped）。

平鋪型。行列表可以被分為幾個帶有標簽的段落，在表格右邊界的還可以有一條縱向索引。頁眉可以出現在每個段落的第一項之前，頁腳可以出現在最后一項之后。

分組型。行列表以分組的形式展示，常伴有頁眉和頁腳。這種類型的表格最起碼含有一個分組，且每個分組最少含有一行。分組型表格不含有索引。

注意表格的寬度。過窄的表格會造成文本截斷和重疊，導致用戶難以在較遠距離快速閱讀和瀏覽。過寬的表格也不易于閱讀和瀏覽，還可能會讓內容缺少空白（譯者注：填滿文本的寬表格）。

一開始就快速顯示表格內容。不要等到全部表格內容加載完后，才向用戶展示。應該先立即填充表格上的文本數據，然后當較為復雜的數據加載完成時再展示它們——比如圖片。這個技巧讓用戶立即獲得有用的信息，并提升了你的app在用戶認知中的響應性。在某些情況下，在新數據到達前展示過時的老數據也能行得通。

加載內容時告知進度。如果一個表格的數據需要一定時間來加載，可以展示一個進度條或者緩沖圖標（spinning activity indicator）來告知用戶你的app仍在加載中。

保持更新內容。考慮定時更新你的表格內容以反映最新數據。但是不要更改滾動頁面的定位。反之，在表格的開頭或是末尾添加新的內容，并在它們準備就緒時允許用戶滑動至新內容。一些apps會在新數據被添加時顯示一個標志（indicator），并提供一個能夠直接跳轉至新內容的控件。在頁面中包含一個刷新控件也是個好主意，這樣用戶就可以在任意時刻手動執(zhí)行刷新操作。請參閱“內容刷新控件Refresh Content Controls”。

避免在含有右對齊元素的表格行中包含索引。索引是通過大幅度的滑動手勢來控制的。如果其它可交互元素在它附近，比如展開按鈕（disclosure indicators），那么就很難辨別用戶手勢的意圖，并且很可能會激活錯誤的元素。

了解開發(fā)細節(jié)，請參閱UITableView。

（1）表格行

你使用標準的表格單元格樣式來決定如何在表格行中展示內容。

默認型（Default）。行左端可以有圖片，并跟隨左對齊的標題。該樣式適用于展示無需補充信息的項目。了解開發(fā)細節(jié)，請參閱UITableViewCell中的UITableViewCellStyleDefault constant。

副標題型（Subtitle）。一行左對齊的標題和下一行左對齊的副標題。這種樣式適用于行和行視覺上相似的表格。額外的副標題幫助區(qū)分行與行。了解開發(fā)細節(jié)，請參閱UITableViewCell中的UITableViewCellStyleSubtitle constant。

Value 1。左對齊的標題和同處一行的右對齊且顏色較淺的副標題。了解開發(fā)細節(jié)，請參閱UITableViewCell中UITableViewCellStyleValue1 constant。

副標題型（Subtitle）。一行左對齊的標題和下一行左對齊的副標題。這種樣式適用于行和行視覺上相似的表格。額外的副標題幫助區(qū)分行與行。了解開發(fā)細節(jié)，請參閱UITableViewCell中的UITableViewCellStyleSubtitle constant。

所有標準表格單元格樣式還可以含有圖形元素，比如一個選中標記或關閉圖標。然而毫無疑問，添加圖形元素會減少標題和副標題的可用空間。

保持文本的簡練以避免被截斷。被刪減的單次和詞組不容易被瀏覽和理解。無論使用哪種表格單元格樣式，文本截斷都是自動的，但是這個問題的嚴重性由不同的單元格樣式和不同的截斷位置決定。

考慮為刪除按鈕使用自定義標題。對于支持刪除功能的行，如果有助于用戶理解，可以將按鈕上系統(tǒng)提供的“刪除”文本換成自定義標題。

選中時提供反饋。用戶期望被選中行能在被點擊時短暫高亮。然后，用戶期待出現一個新的視圖或者某些元素發(fā)生改變，比如出現一個選中標記，表示已經做出了選擇。

為非標準的表格行設計一個自定義的表格單元格樣式。標準的樣式能很好地運用于多種常見的情境中，但是某些內容或是你的整體app設計可能會需要一個高度自定義的表格外觀。學習如何創(chuàng)建你自己的單元格，請參閱Table View Programming Guide for iOS中的Customizing Cells。

了解開發(fā)細節(jié)，請參閱UITableViewCell。

7.12 文本視圖（Text Views）

文本視圖用于展示多行的、帶有樣式的文本內容。文本視圖可以是任意高度，當內容超出視圖邊界時可以允許滾動。默認地，文本視圖的內容采用左對齊的方式，并且使用黑色的系統(tǒng)字體。如果文本視圖支持編輯，當你在視圖內點擊后會出現一個鍵盤。

保持文本清晰可讀。盡管你可以富有創(chuàng)意地使用多種字體、顏色甚至對齊方式，保持內容的可讀性是最基本的要求。采用動態(tài)文本（Dynamic Type）是個好主意，這樣即使用戶在他們的設備上更改了文本大小，你的文本依舊會看起來很棒。你應該在不同的輔助功能選項下測試你的內容，比如粗體文本。

展示合適的鍵盤類型。iOS提供了多種不同的鍵盤類型，以便于不同類型的輸入。為了簡化數據錄入，在編輯文本視圖時顯示的鍵盤應該適用于當前域的文本類型。了解完整的可用鍵盤類型，請參閱UITextInputTraits中的UIKeyboardTypeconstant。

了解開發(fā)細節(jié)，請參閱UITextView。

7.13 網絡視圖（Web Views）

網絡視圖能直接在你的app中加載和呈現豐富的網絡內容，比如嵌入的HTML和網站。比如，“郵件”就使用了網絡視圖來在信息中展示HTML內容。

合適時啟用前進和后退導航。網絡視圖支持前進和后退導航，但是這種行為被默認禁止。如果用戶將在你的網絡視圖中瀏覽多個頁面，請啟用前進和后退導航，并為這些功能提供對應的控件。

避免使用網絡視圖來構建一個網絡瀏覽器。讓用戶在不離開你的app的情況下通過網絡視圖暫時性地進入一個網站是可以的，當時Safari才是用戶瀏覽網頁的主要方式。試圖在你的app中復制Safari的功能是沒有意義且不被鼓勵的行為。

了解開發(fā)細節(jié)，請參閱WKWebView。

8. UI 控件（UI Controls）

8.1 按鈕（Buttons）

按鈕觸發(fā)app內特定的操作，擁有自定義背景，并且可以含有一個名稱或圖標。系統(tǒng)為大多數情況提供了若干已確定的按鈕樣式。你也可以設計完全自定義的按鈕。

了解開發(fā)詳情，請參閱UIButton。

（1）系統(tǒng)按鈕

系統(tǒng)按鈕一般出現在導航欄和工具欄，但也可能被用于它處。

使用動詞當作按鈕名稱。一個特定行為的名稱表明了按鈕是可交互的并且說明了點擊它會產生的結果。

名稱使用單詞首字母大小的格式。除了冠詞、并列連詞和不大于4個單詞的介詞外，其余單詞都要首字母大小寫。

保證名稱的簡短。過長的文本會讓你的界面變得擁擠，在小屏上還很可能會被截斷。

只在必要時考慮添加邊框或背景色。系統(tǒng)圖標默認沒有邊框和背景色。然而，在某些內容區(qū)域，邊框和背景色會因其指示了可交互性而顯得必要。在”電話”中，帶有邊框的數字鍵強化了打電話的傳統(tǒng)模型，撥打按鈕的背景色讓其變成一個醒目的目標，易于用戶點擊。

了解開發(fā)詳情，請參閱UIButton中的UIButtonTypeSystembutton type。

（2）詳情展開按鈕（Detail Disclosure Buttons）

詳情展開按鈕用于打開一個視圖——通常是一個模態(tài)視圖，該視圖含有更多信息或是與屏幕內某個特定項目相關的功能。盡管你可以在任何一種視圖中使用詳情展開按鈕，但它通常出現在表格中用于獲取該行的相關信息。

合理地在表格中使用詳情展開按鈕。當表格的某行上出現了詳情展開按鈕時，點擊按鈕會顯示更多的信息。點擊該行的其它地方會選中該行或是激活應用特定的行為。如果你想讓用戶通過點擊整行來查看更多詳情，就不要使用詳情展開按鈕。取而代之的，可以使用V形的詳情展開附屬控件（detail disclosure accessory control）。請參閱UITableViewCell中的UITableViewCellAccessoryType。

了解開發(fā)詳情，請參閱UIButton中的UIButtonTypeDetailDisclosurebutton type。

（3）信息按鈕

信息按鈕呼出app相關的配置詳情，有時會以翻轉視圖的形式出現在當前視圖的背面。信息按鈕含有兩種樣式：淺色和深色。選擇最適合你的app設計的樣式，不要讓它埋沒在當前屏幕中。

了解開發(fā)詳情，請參閱UIButton中的UIButtonTypeInfoLightandUIButtonTypeInfoDarkbutton types。

（4）添加聯(lián)系人按鈕

用戶通過點擊添加聯(lián)系人按鈕在現有的聯(lián)系人列表中瀏覽從而選擇一個插入到文本框或是其它視圖。比如，在“郵件”中，你可以點擊“收件人（To）”欄右側的“添加聯(lián)系人”按鈕來從你的聯(lián)系人列表中選擇收件人。

除了”添加聯(lián)系人”按鈕外，允許鍵盤輸入。添加聯(lián)系人按鈕只是提供了輸入聯(lián)系人信息的另一種選擇，而不是替代品。把其作為一種添加現有聯(lián)系人的快捷方式是好的，但同時也要允許用戶通過鍵盤輸入聯(lián)系人信息。

了解開發(fā)細節(jié)，請參閱UIButton中的UIButtonTypeContactAddbutton type。

8.2 編輯菜單（Edit Menus）

用戶可以通過在文本欄、文本視圖、網頁視圖或圖片視圖中長按或雙擊來選擇內容或是呼出編輯菜單，比如“拷貝”和“粘貼”。

為當前上下文展示合適的命令。默認地，這些選項包括“剪切”、“拷貝”、“粘貼”、“選擇”、“全選”以及“刪除”命令，但并不是所有按鈕都要出現。如果沒有內容被選中，那么該菜單就不應該包含需要先選中再執(zhí)行的命令，比如“拷貝”或“剪切”。同樣的，如果當前已經選中了某項，那么該菜單就不應該含有“選擇”選項。

讓用戶通過標準手勢觸發(fā)編輯菜單。用戶期望通過長按或雙擊文本或圖片來呼出菜單。你的app應該同時感應這兩種手勢。若用戶執(zhí)行了雙擊操作，你還可以指定會被默認選中的內容。在文本視圖中，應該默認選中詞語。

必要時調節(jié)編輯菜單的位置。默認地，菜單會根據空間的空余情況出現在插入點或備選項的上方或下方，并且包含指向對應內容的箭頭。盡管你不能夠改變菜單的形狀，但它的位置是可設置的——你可以避免它遮擋住重要的界面內容或元素。

不要使用其它控件來執(zhí)行和編輯菜單同樣的功能。為執(zhí)行同一個操作提供不同的路徑會帶來不一致的用戶體驗，讓用戶感到困惑。如果你的app讓用戶通過編輯菜單來復制內容，那么就不要再單獨設置一個復制按鈕。

允許用戶選擇和復制那些可能對他們有用但卻無法編輯的文本。用戶常常會想要在他們的郵件、筆記或是網頁搜索框中黏貼一些靜態(tài)內容（不可編輯的），比如一個圖片標簽或是一條臉書狀態(tài)。

不要為呼出編輯菜單提供一個按鈕。如果你這么做，那些通過手勢來觸發(fā)菜單的人最終都會變成通過點擊按鈕來打開菜單。

讓編輯操作可以被撤銷。在執(zhí)行操作前，菜單不會向用戶發(fā)起二次確認。但是用戶可能會在點擊某個命令之后改變了主意，所以請向用戶提供撤銷和重做的支持。

在編輯菜單添加有用的自定義命令。你可以通過提供應用特有的命令，來增強編輯菜單的價值。和標準命令一樣，任何自定義命令都需要通過選中文本或其它內容才能被觸發(fā)。

把自定義命令放在系統(tǒng)自帶的命令之后。系統(tǒng)自帶的命令是用戶最常使用的功能，不要在它們之間穿插自定義命令。

盡可能減少自定義命令的數量。不要讓用戶面對太多的選擇。

保持自定義命令名稱簡短。命令名稱應該是精準描述所執(zhí)行操作的動詞或動詞短語。使用標題式大寫格式：除冠詞、并列連詞和不大于4個字母的介詞外，一律大寫首字母。

了解開發(fā)詳情，請參閱Text Programming Guide for iOS 和 UIMenuController中的Copy, Cut, and Paste Operations。

8.3 標簽（Labels）

標簽描述了當前屏的界面元素或是提供了簡短的信息。雖然用戶無法編輯標簽，但是他們有時會拷貝標簽內容。標簽可以展示任意數量的靜態(tài)文本，但是最好保持簡短。

保證標簽易讀。標簽可以包含純文本或樣式文本。如果你調整了標簽樣式或是使用了自定義字體，請同時確保它們的易讀性。最好采用動態(tài)字體（Dynamic Type），這樣即使用戶更改了設備的字體大小，你的標簽依舊看起來很棒。請參閱【動態(tài)字體】。同時你應該在輔助功能打開的情況下測試你的標簽，比如加粗文本。請參閱【輔助功能】。

想學習關于文本（text）的知識，請參閱String Programming Guide。項學習如何創(chuàng)造樣式化文本，請參閱Attributed String Programming Guide。了解標簽的開發(fā)詳情，請參閱UILabel。

8.4 頁面控件（Page Controls）

頁面控件說明了當前頁在一組平級頁中所處的位置。它由一系列小圓點組成，表示了可用頁的數量以及它們被打開的次序。實心的圓點表示當前頁。這些圓點是按一定的距離分布的，如果屏幕上有太多圓點它們就會被部分截斷。用戶可以通過點擊頁面控件的左邊緣和右邊緣在相鄰的頁面中切換，但是他們不能通過點擊某個特定的圓點到達其對應的頁面。頁面控件提供的導航是有序的，用戶一般通過輕掃到達相鄰頁。

不要把頁面控件和有層次結構的頁面一起使用。頁面控件不是為了說明頁面之間的關聯(lián)，也不是為了表明某一頁對應某個圓點。這種類型的控件是為了那些同類頁而設計的。

不要展示過多的頁面。一旦圓點超過10個，用戶就難以只看一眼就數清數量；而一旦打開頁超過20個，按次序瀏覽就變得十分耗時。如果你的app需要展示超過20個的同類頁，請考慮采用其它的方法，比如常用于無序導航的宮格。

把頁面控件居中放在屏幕底部。頁面控件應該被居中放置在頁面底邊緣和屏幕底邊緣之間。這樣能確保它被用戶發(fā)現，且不會遮擋內容。

了解開發(fā)詳情，請參閱UIPageControl。

8.5 選擇器（Pickers）

選擇器包含了一個或多個可滾動的值列表，每個列表都有一個垂直居中且以深色文本顯示的選中值。選擇器一般在用戶編輯字段或點擊菜單時出現在屏幕的底端或是浮出層里。選擇器也可以在行間出現，比如在“日歷”中編輯事件的日期時。選擇器的高度大約在五行列表值左右。選擇器的寬度可以是屏寬，也可以與其所屬視圖等寬。

使用符合用戶預期且按邏輯排列的值。當滾動列表靜止時，會有很多值被隱藏。最好的做法是讓用戶猜測到被隱藏的值是什么，比如是一系列按首字母排序的國家名，這樣用戶就能在列表中快速翻動查找。

避免跳轉至其它屏來展示選擇器。選擇器在當前上下文中、在所填字段附近出現最有效。

對于有大量值的列表，應該用表格而不是選擇器。在高度有限的選擇器里瀏覽很長的列表是煩人的。但是表格的高度是可調的，還能含有索引，讓滾動更快速。

了解開發(fā)詳情，請參閱UIPickerView。

（1）日期選擇器

日期選擇器呈現了一個選擇指定日期、時間或兩者同時的高效界面。它還同時提供了計時器界面。

日期選擇器有四種模式，分別展示四套不同的可選值。

• 日期：展示月份、當月的日期以及年份
• 時間：展示小時、分以及上午或下午選項（可選）
• 日期和時間：展示日期、小時、分、上午或下午選項（可選）
• 計時器：展示小時和分，最多23小時和59分。

日期選擇上顯示的具體值視用戶的所在地區(qū)而定。

在展示分鐘時，考慮盡可能地減少選項。分鐘列表默認含有60個值（0至59）。你可以選擇性地增大分鐘間隔，只要它能將60整除。比如，你可能會想要15分鐘的間隔（0,15,30和45）。

了解開發(fā)詳情，請參閱UIDatePicker。

8.6 進度指示器（Progress Indicators）

當你的app需要加載內容或是執(zhí)行冗長的數據處理操作時，不要讓用戶坐在那里，傻傻盯著不動的屏幕等待。使用活動指示器和進度條來告訴用戶你的app沒有停止運行，并讓他們知道還需要等待多久。

請同時參閱Loading。

（1）活動指示器

活動指示器會在執(zhí)行一些無法量化的任務時旋轉，比如加載或是同步復雜數據。當任務完成時，它會消失?；顒又甘酒魇遣豢山换サ摹?/p>

更多地使用進度條而非活動指示器。如果當前活動是可量化的，請使用進度條來代替活動指示器，這樣用戶就能夠更好地預估當前發(fā)生了什么以及它要進行多久。

確?；顒又甘酒饕恢痹谛D。用戶會把靜止的活動指示器和停滯的進程聯(lián)系在一起。確保它一直在旋轉，這樣用戶就知道系統(tǒng)在工作。

如果對用戶有幫助，可以在等待任務完成的過程中，為他們提供有用的信息。可以通過活動指示器下方的標簽顯示更多的信息。避免使用語義模糊的術語，比如“加載中”或“認證中”，因為他們并不能給用戶帶去任何價值。

了解開發(fā)詳情，請參閱UIActivityIndicatorView。

（2）進度條

進度條包含了一條從左往右填充的軌跡，用于展示一個任務的進度。進度條是不可交互的，但是他們經常伴隨著一個取消當前操作的按鈕。

總是準確地匯報進度。不要為了讓你的app看起來很忙碌而展示不準確的進度信息。只為可量化的任務使用進度條。否則，請使用活動指示器。

用進度條來展示有明確持續(xù)時間的任務。進度條能夠很好的展示當前任務的狀態(tài)，尤其是能夠讓用戶知道當前任務還需要多久才能完成。

在導航欄和工具欄中隱藏進度條未被填充的那部分軌跡。進度條默認含有填充和未填充的部分。當在導航欄和工具欄中使用，比如用來表明頁面的加載進度時，應該隱藏進度條未被填充的部分。

考慮自定義進度條的外觀來與你的app匹配。進度條的外觀能夠根據你的app設計而調整。比如，你能夠為填充和未填充的部分設定自定義的顏色或圖片。

了解開發(fā)詳情，請參閱UIProgressView。

（3）網絡活動指示器

當前發(fā)生連網活動時，網絡活動指示器會在屏幕頂部狀態(tài)欄上旋轉。結束連網時，它就會消失。這個指示器和活動指示器長得一樣，并且同樣不可交互。

只在進行那些持續(xù)時間超過幾秒的網絡活動時才展示這個指示器。無需為快速的網絡活動展示指示器，因為它們很可能在用戶注意到它的存在或是明白它代表什么之前已經消失了。

請同時參閱Status Bars。了解開發(fā)詳情，請參閱UIApplication中的networkActivityIndicatorVisible。

8.7 內容刷新控件（Refresh Content Controls）

刷新控件一般用于表格視圖中，通過人為觸發(fā)來立即刷新內容，而無需等至下次自動加載發(fā)生。刷新控件是一種特殊類型的活動指示器，默認情況下被隱藏，當用戶下拉需要重新加載的視圖之后可以被看見。比如，在“郵件”中，你可以通過下拉收件箱列表來檢查是否有最新的訊息。

執(zhí)行內容的自動更新。盡管用戶會感謝能夠通過下拉快速刷新內容，但他們同樣希望能夠定時自動地替他們刷新。不要讓用戶承擔激活每一次刷新的工作。通過定時刷新保證數據的及時性。

如果有意義，可以為刷新控件添加一個短標題。刷新控件可以選擇性地包含一個標題。但是在大多數情況下，這樣做是無意義的，因為刷新控件的動效已經足以表明加載的狀態(tài)。如果你一定要包含一個標題，不要用它來解釋如何執(zhí)行刷新操作。取而代之地，提供一些與被加載內容有關且有價值的信息。比如，在“播客”中，利用一行文字來告訴用戶上次是什么時間更新了播客。

了解開發(fā)詳情，請參閱UIRefreshControl。

8.8 分段控件（Segmented Controls）

分段控件是含有兩個或更多分段的一個線狀組，每個分段等于一個與其它互斥的按鈕?？丶锏乃蟹侄味际堑葘挼?。和按鈕一樣，分段可以含有文本或圖片。分段控件一般用于展示不同的視圖。比如，在“地圖”中，分段控件讓你能在地圖、公交和衛(wèi)星視圖間來回切換。

限制分段的數量以確?？捎眯?。更寬的分段更易于點擊。在iPhone設備上，一個分段控件最多只能包含五個分段。

盡量維持各分段內容尺寸的一致性。因為所有的分段都等寬，所以如果某個分段被填得很滿很滿但是其它的又很空，就會顯得很難看。

避免在一個分段控件中同時使用文本和圖片。盡管分段控件可以容納文本或圖片，但在一個控件中同時使用兩者會讓界面變得混亂而無條理。

在自定義的分段控件中合理放置內容。如果你更改了分段控件的背景圖，請確保其上的內容依舊與之相配并清晰可讀，而不會顯得不和諧。

了解開發(fā)詳情，請參閱UISegmentedControl。

8.9 滑塊（Sliders）

滑塊是一條帶有thumb控件的水平軌跡，你可以通過手指拖動它在最小值和最大值之間滑動，比如屏幕亮度或是媒體播放進度。當滑塊值改變時，最小值和thumb之間的軌跡會被顏色填充?？梢赃x擇性地在滑塊的左右兩側分別展示圖標，來說明最大值和最小值所代表的含義。

自定義滑塊的外觀，如果這么做有意義。滑塊的外觀，包含軌跡顏色、thumb的圖片以及左側和右側的圖標，這些都可以為了符合你的app設計風格以及達到溝通的目的而被調整。比如，用戶調整圖片大小的滑塊，可以在左側顯示一個小的圖片圖標，并在右側顯示一個大的圖片圖標。

不要使用滑塊來調節(jié)音量。如果你需要在你的app中提供音量控件，請使用音量視圖。它是可自定義的，含有一個音量滑塊和一個更改當前音源輸出設備的控件。了解關于如何使用音量視圖，請參閱MPVolumeView。

了解開發(fā)詳情，請參閱UISlider。

8.10 步進器（Steppers）

步進器是一個用于增加或減少遞增數值的兩段控件。默認狀態(tài)下，步進器的一個分段顯示一個加號而另外一個顯示減號。如果有需要，這些符號也可以替換成自定義圖片。

確保步進器所調整的數值顯眼易見。由于步進器本身不顯示任何值，因此要確保用戶知道他們用步進器改變的是什么值。

若可能涉及到較大數值的調整，那就不要使用步進器。步進器適用于只需少量點擊的小數值調整。比如，在打印頁面，使用步進器調整打印份數是合理的，因為用戶極少會大幅度調整這個值。反之，用步進器來選擇頁碼范圍就是不合理的，因為即使是對于頁碼不多的文檔，用戶也必須通過多次點擊才能完成選擇。

了解開發(fā)詳情，請參閱UIStepper。

8.11 開關按鈕（Switches）

開關按鈕提供了在兩種互斥狀態(tài)——開和關之間的視覺切換。

自定義樣式的開關

默認樣式的開關

考慮調整開關的外觀以符合你的app風格。如果對你的app有幫助，可以更改開關的在兩種狀態(tài)下的顏色，或是使用自定義圖像來替代開關。

只能在表格欄中使用開關。開關是用于表格中的，比如在一列設置項中，每個設置項都能被打開和關閉。如果你需要在導航欄和工具欄中執(zhí)行類似的功能，請使用按鈕替代，并且提供兩個不同的圖標來表達不同的狀態(tài)。

避免用標簽來描述開關的值。開關只有兩種狀態(tài)：不是打開就是關閉。用額外的標簽來描述這兩種狀態(tài)是多余的，會使界面變得凌亂。

考慮使用開關來控制與之相關的界面元素。開關常常會影響到屏幕上的其它內容。比如，在“設置”中打開飛行模式，會關閉某些設置項，比如“蜂窩移動網絡”和“個人熱點”。在設置中關閉Wi-Fi會導致其它選項的消失。

了解開發(fā)詳情，請參閱UISwitch。

8.12 文本框（Text Fields）

文本框是單行、高度固定且?guī)в袌A角的輸入框，點擊它會自動呼出鍵盤。使用文本框向用戶請求少量信息的錄入，比如郵箱地址。

在文本框中顯示提示文字向用戶解釋意圖。若當前文本框中沒有其它文本，文本框內可以包含占位文本，比如“郵箱”或“密碼”。若占位文本已經表意明確，就不要再額外用標簽對文本框進行描述了。

合適時，使用加密文本框。在你的app請求密碼之類的敏感信息時，總是使用加密文本框。

TIP ?對于多行或是多樣式的文本輸入，請使用文本視圖。請參閱Text Views。

郵件鍵盤

電話鍵盤

顯示合適的鍵盤類型。iOS提供了幾種不同的鍵盤類型，每種都為了特定的一種輸入類型而設計。為了方便數據輸入，編輯文本框時顯示的鍵盤應該適用于當前所要輸入的文本類型。如果你的app需要用戶輸入郵箱，那么應該顯示對應的郵箱鍵盤。了解可用鍵盤類型的完整列表，請參閱UITextInputTraits中的UIKeyboardTypeconstant。

在文本框中添加圖片以增進理解、添加按鈕以增強功能性。你可以在文本框的左側或是右側顯示自定義圖片，或是添加一個系統(tǒng)按鈕，比如一個書簽按鈕。一般來說，文本框左側的區(qū)域用于說明文本框的含義，右側的區(qū)域用于展示已有的附加功能，比如書簽。

合適時，在文本框的右端展示一個清除按鈕。若出現了清除按鈕，點擊它會清楚文本框內的所有輸入內容，免去了用戶不斷點擊鍵盤上刪除按鈕的麻煩。

了解開發(fā)詳情，請參閱UITextField。

相關閱讀

譯文 | iOS 10 人機界面設計指南 （一）

譯文 | iOS 10 人機界面指南（二）

譯文｜iOS 10 人機界面指南（三）

譯文｜iOS 10 人機界面指南（四）

原文地址：https://developer.apple.com/ios/human-interface-guidelines/

譯者：喵大神經，交互設計師。

本文由 @喵大神經 翻譯發(fā)布于人人都是產品經理。未經許可，禁止轉載。