最近在讀iOS10人機界面指南,目前網上最全的翻譯版本來自譯者@喵大神經,翻譯到UI Bars部分就一直沒有更新。所以我接著從UI Views部分開始翻譯,英文水平有限,如有錯誤請指正。
7. UI視圖(UI Views)
7.1 操作列表(Action Sheets)
操作列表是由一個控件或操作而觸發的特定類型的警告框,展示了與當前情境相關的一系列選項。使用操作列表讓用戶啟動任務,或者在完成一項可能有破壞性的操作前請求用戶的確認。在較小的屏幕下,操作列表從屏幕底部向上浮出;在較大的屏幕下,操作列表總是以彈出層的形式出現。
提供一個取消按鈕如果它能使操作清晰。當用戶想要放棄一項任務時,取消按鈕能夠灌輸信心。取消按鈕應該始終包含在屏幕底部的操作列表中 。
突出可能存在破壞性的選項。為這些執行破壞性或危險操作的按鈕使用紅色,并將其顯示在操作列表的頂部。
避免讓用戶滾動操作列表。如果一個操作列表中存在過多選項,用戶必須要滾動才能看完所有操作。滾動需要花費更多的時間來做選擇,并且很有可能誤點其它按鈕。
了解開發細節,請參閱UIAlertController中的UIAlertControllerStyleActionSheet?constant。
7.2 活動視圖(Activity Views)
每個活動表示了一個作用于當前情境的任務,例如打印、添加到個人收藏、在頁面上查找等等。一旦啟動,活動就立即執行任務,或者在進行前請求更多信息?;顒佑苫顒右晥D管理,它表現為一個列表或彈出層,這取決于設備和方向。通過活動提供給用戶你的應用程序可以執行的自定義服務或任務。
系統提供了若干內置的活動,如打印、轉發到 Twitter、發送信息和Airplay等等。這些任務總是先出現在活動視圖上并且不能被重新排序。你不需要再為這些內置任務創建自定義活動?;顒右晥D還顯示了其他應用程序的分享和動作擴展。請參閱Sharing and Actions。
設計精簡的模板圖標(Template image)來表示你的自定義活動。模板圖標會用遮罩生成用戶最終看到的圖標效果。使用透明度適當的黑色或白色,進行抗鋸齒處理,并且不要使用陰影。一個模板圖標應該居中顯示在70×70像素左右的區域里。
為你的活動設計清晰簡練的文字標題。標題會出現在活動視圖圖標的下方。短標題效果最好。如果標題文字過長,iOS 首先會縮小文本,仍然過長的話則會被截斷。一般而言,最好避免在標題中提及你的公司或產品名。
確?;顒舆m用于當前情境。雖然系統提供的任務不能在活動視圖中被重新排序,但是如果它們不適用于你的應用,它們可以被刪除。例如,為了防止用戶打印圖片,你可以刪除打印活動。您還可以定義在任何給定時間里顯示哪些自定義任務。
使用動作按鈕來觸發顯示活動視圖。用戶習慣點擊動作按鈕后訪問系統提供的活動。避免提供給用戶完成同一件事的另一種方式,使之迷惑。
了解開發細節,請參閱UIActivityViewContoller和UIActivity。
7.3 警告框(Alerts)
警告框用于告知用戶與他們的應用程序或設備相關的重要信息,并經常請求反饋。一個警告框包含標題、可選的正文文本、一個或多個按鈕和一個可選的用于輸入的文本字段。除了這些可配置的元素外,警告框的外觀是固定不變的,不能被自定義。
減少警告框的使用。警告框會破壞用戶體驗,只能被用于像確認購買、破壞性操作(如刪除)或告知用戶問題等重要情況。警告框的少見有助于確保用戶認真對待它們。確保每個警告框提供緊急的信息和有用的選項。
在不同方向上測試警告框的外觀。警告框可能會在橫豎屏模式下呈現不同的外觀。優化警告框文本,使其在任何方向上都能被良好閱讀,無需滾動。
了解開發細節,請參閱UIAlertController。
警告框標題和文本
使用簡短的、描述性的多字警告框標題。用戶需要在屏幕上閱讀的文字越少越好。盡量精簡標題,避免添加額外的文本信息。因為單個字的標題幾乎不能提供任何有用信息,所以考慮使用一個問題或者短句作為標題。盡可能保證標題在一行之內。使用句子式大寫(Sentence-style capitalization)和合適的標點符號構成句子。不要在句末使用結束標點。
如果你必須為警告框添加正文文本,請使用一個完整的短句。盡量保證文本足夠短,使其在一到兩行之間,防止滾動。使用句子式大寫和合適的標點符號。
不用刻意避免使用指責的、批判的、侮辱的文案。用戶理解警告框是為了告訴他們發生的問題和危險的情況。只要使用友好的語氣,消極但清晰直接的文案就優于積極但晦澀間接的文案。避免使用“你”,“你的”,“我”,“我的”這類代詞,有時候會被誤認為是一種侮辱或冒犯。
避免詳細描述文本按鈕。如果你的警告文本和按鈕文案是明確的,就不需要向用戶解釋按鈕是用來做什么的。如果你一定要在按鈕文案中提供指導,請使用輕擊(tap)字眼,保持大寫,并不要使用引號。
警告框按鈕
一般情況下,使用兩個按鈕的警告框。兩個按鈕的警告框便于用戶在兩個選擇中做決定。單按鈕的警告框只是起到告知的作用,并未給予用戶控制當前狀態的能力。三個或更多按鈕的警告框會導致復雜和強制滾動,是一個非常糟糕的體驗。如果你需要在警告框中給與用戶超過兩個選項,可以考慮使用操作列表來代替警告框。請參閱Action Sheets。
為按鈕設計簡短而邏輯清晰的文案。好的按鈕文案一般只有一到兩個單詞,描述用戶點擊按鈕后的結果。跟其它所有按鈕一樣,使用標題式大寫,而且不需要標點符號。盡可能使用與警告標題和文案直接相關的動詞和動詞詞組,如查看全部(View All),回復(Reply)和忽略(Ignore)等??梢允褂肙K表示簡單的接受。避免使用是(Yes)或否(No)。
將按鈕放置在用戶期待的位置。一般來說,用戶最有可能會點擊右邊的按鈕。取消按鈕應該總是放在左邊。
適當地標記取消按鈕。用于取消警告框操作的按鈕應該總是被標記為取消(Cancel)。
識別具有破壞性的按鈕。如果一個警告框按鈕會導致破壞性操作,如刪除內容,請將按鈕的樣式設置為破壞性的(Destructive),以使系統將其變為合適的格式。了解開發細節,請參閱UIAlertAction中的UIAlertActionStyleDestructive constant。此外,提供一個取消按鈕,使用戶能夠安全地退出破壞性操作。通過將取消按鈕標記為默認按鈕,讓其變成粗體。
允許使用Home鍵取消警告框。當警告框出現的時候,按Home鍵將會從應用程序里切回主屏幕。Home鍵的效果類似于取消按鈕——當用戶回到應用中時,警告框消失,操作也不會被執行。如果你的警告框沒有取消按鈕,可以考慮當按下Home鍵的時候,在代碼里執行取消操作。
7.4 集合視圖(Collections)
集合視圖用于管理一系列有序的內容,如照片集合,并以一種自定義和高度可視化的布局來呈現它們。由于集合視圖的布局不是一個嚴格的線性布局,因此尤其適合用來展示一些尺寸不一致的項。一般來說,集合視圖很理想用于展示以圖片為基礎的內容項。集合視圖可包含背景和其他裝飾視圖,以從視覺上區分項的子集。
集合視圖支持交互和動畫。默認情況下,可以使用輕擊(tap)某項以選中,長按(touch-and-hold)某項進行編輯,輕掃(swipe)用于滾動。如果應用程序需要,可以添加更多手勢用來執行自定義操作。在集合視圖內,當用戶導入、刪除或者移動項時會出現動畫效果,也支持自定義動畫。
當標準的行或網格布局足夠用時,避免創建激進的新設計。集合視圖應該提升用戶體驗,而不是成為關注的焦點所在。讓選中一個項目變得簡單。如果用戶很難點中集合視圖中的項,將會在得到他們想要的內容前感到挫敗和喪失興趣。在內容周圍使用足夠的填充以保持布局整潔,防止內容重疊。
考慮使用表格而不是集合視圖來展示文本。將文本信息放在滾動列表中的時候,用戶閱讀和處理起來會更為簡單和高效。
當讓布局發生動態變化時,請務必謹慎。集合視圖的布局可以在任何時候被改變。如果在用戶瀏覽和操作項的時候調整視圖布局,請確保這個動態變化是有意義且容易跟蹤的。沒有明確目的就改變布局會讓應用不符合預期且難以使用。如果用戶此時關注的項在變化中消失了,用戶會覺得這個應用超出了他們的控制能力。
了解開發細節,請參閱UICollectionView。
7.5 圖片視圖(Image Views)
圖片視圖在透明或不透明的背景下顯示單張圖片或者動態圖片序列。在圖片視圖中,圖片可以被拉伸、縮放、調整到適合屏幕的大小,或者固定在一個特定的位置。在默認狀態下圖片視圖不支持用戶的交互行為。
盡可能保證圖片視圖中的每一張圖片都大小一致。如果圖片大小不同,圖片視圖將分別調整它們。使用大小一致的圖片比使用不同大小的圖片更有效。甚至使用那些預改變大小的圖片會更有效,不需要任何調整。
了解開發細節,請參閱UIImageView。
TIP:
已被配置為模板圖像的圖像會丟棄其顏色,并采用任何色調應用到圖片視圖中。請參閱UIImage中的UIImageRenderingModeAlwaysTemplate。
7.6 地圖視圖(Maps)
地圖視圖允許你在應用程序中呈現地理數據,并支持系統內置地圖應用所提供的大部分功能。地圖視圖通常以標準地圖、衛星圖像、或兩者結合的形式來展示地理區域。它能展示單點標注(pins)和疊加圖層(overlays),并支持用戶的縮放和平移。如果你的應用程序支持導航,如跑步路線追蹤應用,可以使用地圖視圖來展示路徑。
一般來說,讓你的地圖保持可交互。用戶習慣了在系統內置地圖中進行交互,因此他們會期待能在你所提供的地圖中進行類似的行為。
使用標準的地圖標注顏色。標注用于在你的地圖上注明用戶感興趣的地點。用戶習慣了內置地圖應用的標注顏色。避免在你的應用中重新定義這些顏色的含義。紅色表示目的地,?綠色表示起點,?紫色表示用戶指定的地點。
了解開發細節,請參閱MapKit。
7.7 頁面視圖(Pages)
頁面視圖控制器提供了一種實現內容頁之間線性導航的方式,例如在文檔、書、記事本或日歷中。頁面視圖控制器通過滾動(Scrolling)或翻頁(Page-curl)兩種樣式來處理頁面之間的轉場。使用滾動過渡的頁面視圖控制器沒有特定的外觀,頁面會流暢地滾動到下一頁。而使用翻頁過渡時,在屏幕上輕掃會導致頁面卷曲,就像現實世界里書中的頁面一樣。
如果適當的話,實現一種非線性導航的方法。當使用頁視圖控制器時,頁面會按順序流動,無法在不相鄰的頁面之間進行跳轉。如果用戶在你的應用中需要不按順序訪問頁面,那么就需要實現一種自定義的控制方式提供這個功能。
了解開發細節,請參閱UIPageViewController。
7.8 彈出層(Popovers)
彈出層是當用戶輕點某個控件或某一區域時,浮在屏幕其它內容上的臨時視圖。通常,彈出層會包含一個箭頭,指向其出處。彈出層更適合在大屏幕上使用,可以包含各種元素,如導航欄、工具欄、標簽欄、表格視圖、集合視圖、圖片視圖、地圖視圖和自定義視圖。當彈出層可見時,其他視圖是不可進行交互的,除非彈出層消失。使用彈出層展示與當前屏幕內容相關的選項或信息。例如,許多iPad應用,當用戶點擊分享按鈕時,會出現一個包含分享選項的彈出層。
避免在iPhone上顯示彈出層。一般來說,彈出層應該被使用在iPad應用上。在iPhone應用上利用所有可用的屏幕空間,在全屏模態視圖上展示信息,而不是彈出層。了解相關指南,請參閱Modality。
僅在需要確認和指引下使用關閉按鈕。一個關閉按鈕(如"取消"或"完成"),若能夠提供清晰,就有必要被包含,比如退出或不保存更改。一般來說,一個彈出層應該在它不再需要出現時被自動關閉。大多數情況下,當用戶輕擊彈出層外部區域或選中其中某一項時,就應該關閉彈出層。如果選項可以被多選,彈出層應該一直存在,除非用戶明確要關閉它或輕擊彈出層外部區域。
確保在自動關閉彈出層時保存任務。用戶很容易誤點屏幕其它區域而使彈出層消失。只有當用戶明確點擊取消按鈕時才放棄任務。
彈出層應該出現在屏幕上合適的位置。彈出層的箭頭應盡可能直接地指向其出處。因為彈出層不能在屏幕上拖動,所以它不應該覆蓋住用戶使用彈出層時可能需要的基本內容。彈出層也不能覆蓋住觸發它出現的元素。
確保同一時間內屏幕上只有一個彈出層。同時顯示多個彈出層會使界面變的雜亂并引起困惑。尤其應當避免同時展示一連串或者一系列彈出層,從一個彈出層中彈出另一個彈出層。如果你需要展示一個新的彈出層,請先關閉原來的那一個。
不要在彈出層上面再展示一個視圖。除了警告框外,彈出層上不應當有任何視圖。
可能的話,讓用戶可以僅點擊一下就關閉當前浮出層并開啟一個新的彈出層。這在若干欄按鈕每個都會喚起一個彈出層的時候尤其好用,因為它減少了用戶的額外點擊。
避免把彈出層設計得太大。彈出層不應當占據整個屏幕。它的大小應當恰好能承載當中的內容,又能清楚地指向其出處。系統可能會調整彈出層的寬高,以讓它能夠更好地適應屏幕的尺寸。
確保自定義彈出層仍然長得像一個彈出層。盡管你可以自定義彈出層的多種外觀,還是應當避免設計出用戶可能無法辨識的彈出層外觀。包含標準控件和視圖的彈出層往往最好使用。
改變彈出層大小時請提供平滑過渡的效果。一些彈出層展示同樣信息的精簡或拓展視圖。如果你要改變彈出層的大小,請使用轉場動畫,避免讓用戶覺得一個新的彈出層取代了原來的那個。
了解開發細節,請參閱UIPopoverPresentationController。
7.9 滾動視圖(Scroll Views)
使用滾動視圖來允許用戶瀏覽大于可見區域的內容,例如文檔中的文本或圖片集合。當用戶輕掃(swipe)、滑動(flick)、拖動(drag)、輕擊(tap)、捏合(pinch),滾動視圖會遵從這些手勢,以一種自然的方式出現或縮放內容。滾動視圖本身沒有外觀,但當用戶與之交互時會出現臨時的滾動指示器。滾動視圖可以應用在頁模式(paging mode)中,在此模式下用戶通過滾動顯示一個全新內容的頁面,而不是圍繞當前頁面移動。
適當地支持縮放操作。如果放大和縮小對于你的應用是有意義的話,可以支持用戶通過捏合或者雙擊來對當前視圖進行縮放。若支持了縮放操作,還應當設定在當前情景下有意義的允許縮放的最大值和最小值。例如,允許一個字符被放大到充滿整個屏幕的話,用戶會很難閱讀當前內容,并沒有什么意義。
在頁模式下的滾動視圖中,考慮使用頁面控件(page control)元素。使用頁面控件來讓用戶知道當前內容一共有多少頁、屏幕、塊是可見的,以及他們當前瀏覽的是第幾個。當你在滾動視圖中使用頁面控件的時候,請禁用同一方向的滾動指示器(scrolling indicator),避免混淆。了解更多指南,請參閱Page Controls。
不要在滾動視圖上放置另一個滾動視圖。這樣做會創建一個不可預知的界面,用戶很難控制。
一般來說,一次只展示一個滾動視圖。由于用戶滾動屏幕時動作幅度經常都會很大,如果在一屏中同時存在不止一個滾動視圖,他們很容易會碰到另一個。如果你確實要在同屏中放兩個滾動視圖,可以考慮給他們設定不同的滾動方向,來避免用戶想要滾動一個視圖的時候誤操作。例如,iPhone上的股票應用,縱向滾動上半部分會展示股票報價,橫向滾動下半部分時則展示該公司的特定信息。
了解開發細節,請參閱UIScrollView。
7.10 分欄視圖(Split Views)
分欄視圖用于管理兩個相鄰內容窗格的展示,在主窗格顯示固定的內容,在次要窗格顯示相關的信息。每個窗格可以包含各種元素,包括導航欄、工具欄、標簽欄、表格視圖、集合視圖、圖片視圖、地圖視圖和自定義視圖。分欄視圖經常用于展示篩選內容,篩選條目列表顯示在主窗格中,選擇條目后的篩選結果顯示在次要窗格中。如果你的應用需要,主窗格可以覆蓋次要窗格,也可以在不需要的時候隱藏主窗格。這在設備處于豎屏方向時特別有用,因為它允許在次要窗格上留有更多空間查看內容。
選擇一個適合內容的分欄視圖布局。默認情況下,分欄視圖將屏幕的三分之一用于主窗格,三分之二用于次要窗格。屏幕也可以分成兩半使用。根據內容選擇適當的拆分,并確保窗格不會看起來不平衡。避免創建一個比主窗格更窄的次要窗格。
始終突出主窗格中被選中的項。盡管次要窗格中的內容會變化,但它應當始終保持著與主窗格選中項的相關性。這有助于用戶理解左右窗格間的關系。
一般來說,在分欄視圖的一側窗格放置導航欄。在兩側窗格中都同時展示導航欄會讓用戶很難分清這兩個窗格的從屬關系。
提供多種獲取主窗格的方式。在主窗格不顯示在屏幕內的布局情況下,需要向用戶提供一個按鈕(通常位于導航欄上)來喚起主窗格。除非你的應用有定義輕掃的手勢執行其他功能,否則應當支持用戶輕掃以喚起主窗格。
了解開發細節,請參閱UISplitViewController。
7.11 表格視圖(Tables)
表格視圖以一個可滾動的單列多行的形式來展示數據,這些行可以被分段或分組。通過表格視圖以列表的形式清晰高效地顯示大量或少量的信息。一般來說,表格視圖是基于文本的內容的理想選擇,并經常出現在分欄視圖的一側作為導航,與之相關的內容顯示在另一側。請參閱Split Views。
iOS定義了兩種表格樣式:平鋪型(plain)和分組型(grouped)。
平鋪型(Plain)。平鋪型表格可被分為若干帶標簽的段落,表格右側會出現垂直的可選索引。每個段落的首項前可以有頁眉,末項后可以有頁腳。
分組型(Grouped)。行以分組形式展示,可以有頁眉和頁腳。分組表格視圖中至少含有一組列表,每一組中至少包含一行。分組型表格沒有索引。
考慮給予表格適當的寬度。窄的表格可能會導致內容被截斷和包裹,使其難以閱讀以及在遠處快速瀏覽。寬的表格也會很難閱讀和瀏覽,并會占據內容空間。
快速展示表格的內容。在顯示某些內容之前,不要等待大量的表格內容加載??梢允紫日故疚谋拘畔?,圖片等較為復雜的內容則在加載完后再顯示。這樣可以將有用的信息立即傳達給用戶,同時也提高了應用的響應能力。在某些情況下,等待信息加載時,顯示過期的舊數據可能會有意義。
在內容加載時請告知進度。如果表格數據加載很慢,請展示進度條或旋轉的活動指示器,讓用戶知道加載仍然在進行。
保持表格內容的更新。考慮定期更新表格內容以展示新數據。只是不要改變滾動的位置。相反,將更新內容添加到表格的開始或尾部,當更新內容準備好時再讓用戶滾動。一些應用在新數據被添加后會顯示一個指示器,并提供了一個跳轉到那兒的控件。提供刷新控件也是一個好主意,用戶可以在任何時候手動執行更新操作。請參閱Refresh Content Controls。
避免讓表格上的向右元素和索引混合起來。索引通過輕掃手勢控制。如果其它可交互元素在索引附近,如展開標志(disclosure indicators),當手勢發生時可能會很難識別用戶的意圖,并且會激活錯誤的元素。
了解開發細節,請參閱UITableView。
表行(Table Rows)
使用標準的表單元格樣式定義表中的內容如何出現。
默認型(Default)。默認型包括行左側的可選圖片,并右跟左對齊的文字標題。默認型樣式適合展示一系列無須通過附加信息便可以區分的項。了解開發細節,請參閱UITableViewCell中的UITableViewCellStyleDefault constant。
副標題型(Subtitle)。副標題型包括一行上的左對齊文字標題,以及下方的左對齊副標題。這種樣式適用于列表各項較為相似的情況。副標題能幫助用戶區分列表中的各項。了解開發細節,請參閱UITableViewCell中的UITableViewCellStyleSubtitle constant。
Value 1。在Value 1樣式下,文字標題左對齊,在同一行上副標題用較細的字體右對齊。了解開發細節,請參閱UITableViewCell中的UITableViewCellStyleValue1 constant。
Value 2。Value 2樣式下,文字標題右對齊,在同一行上副標題用較細的字體左對齊。了解開發細節,請參閱fUITableViewCell中的UITableViewCellStyleValue2 constant。
所有標準的表單元格樣式均支持添加圖形元素,如勾選或展開標志。當然,添加這些元素會縮小標題以及副標題的可用空間。
保持文本簡潔,以避免被截斷。繁冗的文字和詞組不方便用戶瀏覽和理解。所有單元格樣式均會自動截斷文本,而文本截斷所造成的問題可大可小,取決于你采用的單元格樣式,以及被截斷了哪一部分文字。
考慮為刪除按鈕自定義一個名稱。如果表格行支持刪除操作并能讓用戶清晰理解,可以創建一個自定義標題,來取代系統提供的"刪除"標題。
在選擇列表項時,提供反饋。當用戶點擊可選的列表項時,會認為被點擊的項都應短暫地高亮一下。在點擊后,用戶期望出現新的視圖或發生一些變化,例如,出現一個復選標記以表明先前點擊的項已被選中。
為非標準的表行設計一個自定義的單元格樣式。標準樣式在各種常見場景中都使用良好,但在一些內容或應用的整體設計中可能會需要大量自定義的表格外觀。了解如何創建自定義單元格樣式,請參閱Table View Programming Guide for iOS中的Customizing Cells。
了解開發細節,請參閱UITableViewCell。
7.12 文本視圖(Text Views)
文本視圖可以展示多行帶樣式的文本內容。文本視圖可定義為任何高度,并且當內容太多超出視圖邊框時支持滾動。默認情況下,文本視圖會以左對齊的黑色系統字體顯示。如果文本視圖支持編輯,當用戶輕擊文本視圖內部時會喚起鍵盤。
始終確保文字的易讀性。雖然你可以以創造性的方式使用不同的字體、顏色和對齊方式,但保持文本的易讀性是必要的。采用動態文本(Dynamic Type)是一個好主意,這樣就算用戶改變他們設備上的文字大小,文字內容也能看起來很棒。你還應使用可訪問的選項來測試文字內容,如粗體文字。
展示合適的鍵盤樣式。iOS提供了各種不同的鍵盤類型,以便用戶輸入不同類型的文本。為了簡化數據輸入,在文本視圖的編輯過程中,應該根據輸入內容的類型來指定不同的鍵盤類型。了解可用的鍵盤類型,請參閱UITextInputTraits中的UIKeyboardType?constant。
了解開發細節,請參閱UITextView。
7.13 網絡視圖(Web Views)
網絡視圖用來加載和展示豐富的網絡內容,如直接在應用程序中顯示嵌入式HTML和網站。例如,郵箱應用使用網絡視圖在消息中顯示HTML內容。
如果合適,可以提供向前和向后的導航。網絡視圖支持向前和向后的導航,但默認情況下禁用此行為。如果用戶將使用你的網絡視圖訪問多個頁面,可以啟用向前和向后的導航,并提供相應的控件來啟動這些功能。
不要用網絡視圖來創建一個網絡瀏覽器。使用網絡視圖讓用戶不離開你的應用程序環境來簡單地訪問一個網站是可以的,但Safari才是在iOS上瀏覽網頁的主要方式。試圖在你的應用中復制Safari的功能是不必要和不被鼓勵的。
了解更多內容,請參閱WKWebView。