HIG iOS 翻譯 Views｜視圖
Views 視圖
Action Sheets 操作選單
Activity Views 行為選單
Alerts 警告
Collections 收藏庫
Image Views 圖像
Pages 頁面
Popovers 彈出視窗
Scroll Views 滾動頁面
Sheet
Split Views 分割顯示
Tables 表格
Text Views 文本
Web Views 網頁Action Sheets 操作選單
Action Sheet是種特殊的Alert樣式，以回應操作或動作，顯示一組兩個或以上和當前狀態相關的選項。使用Action Sheets讓人們啟動動作或在確認要求後執行破壞性動作。在較小螢幕中Action Sheets從畫面底部上滑出現。在較大螢幕則跳出Popover
在潛在破壞性動作前以Action Sheet請求允許 為了給人們與任務相關聯的選擇項目或是操作，你可以使用下拉式選單
提供“取消”按鈕，讓人們考慮破壞性操作 “取消”鈕應在Action Sheets最下層
強調破壞性動作 在破壞性或危險操作的按鈕使用紅色，並顯示於Action Sheet最頂端
避免滾動的Action Sheets 如果Action Sheets有太多選項，要使用者滾動才能看到全部。滾動需要額外的時間來做選擇，且難以無誤的點擊按鈕
開發者指南請參閱UIAlertController中的恆定值UIAlertControllerStyleActionSheet
Activity Views 行為選單
Activity執行如複製、加到喜愛或尋找等等的工作，在當前環境狀態非常有效率。一經啟動，操作將立即執行，或是要求更多訊息以繼續。透過Activity View管理Activity，根據裝置方向以Sheet或Popver的方式出現。人們使用Activity來連結App所支援的自訂服務或任務
系統提供一些內建服務，包括列印、訊息、AirPlay。這些服務出現在Activity View的第一行且不得重新排序。你不需要設計多餘的自訂Activity和內建Activity重複。Activity View也提供分享或操作至其他App。參閱Sharing and Actions
設計簡潔的模板圖像來顯示自訂的Activity 模板圖像使用遮罩創作Icon。使用適當透明度、無鋸齒、無陰影的黑白圖像。模板圖像須置中且尺寸約70px × 70px
Activity文字簡潔地描述行為 文字顯示於Icon下。簡短的文字表現最好。當字句太長，iOS會縮小字級；若仍然太長則會截斷。此外，避免在文字中包含公司或產品名
確認Activity適合當前情境 雖然系統提供Activity無法重新排序，但如果是不適用於該App的，則可以移除。例如，你可以移除列印動作來避免人們列印圖片。你也可以在特定時間顯示某Activity
使用Activity按鈕來顯示Activity View 人們習慣在按Activity按鈕來連接系統提供的Activity View。避免以其他方式啟動Activity View，將使人們困惑
開發者指南請參閱UIActivityViewController和UIActivity
Alerts 警告
Alert傳達App或裝置相關的重要訊息，通常需要求回應。Alert組成由標題、可選的文字、一個或多個選項、可選的文字欄位。除了這些可配置的元素，視覺外觀是固定不可自訂的
簡化Alert Alert打斷使用體驗，應該只在重要狀態，像是確認付款和破壞性動作（如刪除）或告知問題時顯示。這些不常出現的Alert確保人們謹慎看待。確保每一個Alert提供迫切資訊和有用選項
在不同方向模式中測試外觀 Alert在水平或垂直有所不同。優化Alert文字使他在任何方向都不需要滾動。
開發者指南請參閱UIAlertController
Alert標題和內文
撰寫簡短的、敘述性的、多字的Alert標題 人們在螢幕上閱讀的文字越少越好。試著在製作標題，避免在訊息中增加多餘文字。由於單字標題難以令使用者明白，考慮使用提問或簡短的句子。盡可能使用單行標題。若標題是完整句子，使用句子樣式的大小寫並提供適當標點符號。若標題是片段子句，使用標題樣式大小寫，不加句號
若你必須提供內文，使它保持簡短、完整 試著讓句子保持在一到兩行，避免需要滾動。使用句子樣式大小寫和適當標點符號
避免類似指責、批判或污辱的語氣 人們知道Alert通知他們問題或危及狀態。只要使用友善的語氣，正向而委婉的態度比直接拒絕來得好。避免使用如您、您的、我、我的，有時這些被視為侮辱或自傲的
避免解釋Alert按鈕 若你的Alert標題、內文明確，則不需要解釋按鈕的用意。少數狀況必須使用提示，使用“點擊”一詞，在按鈕中使用大小寫，並且不要在標題引用按鈕文字
Alert 按鈕
一般來說，使用兩個按鈕的Alert 兩個按鈕的Alert提供簡單的二選一。單一按鈕的Alert用以告知，但不提供操作。有三個選項以上的按鈕較為複雜且可能需要滾動，是糟糕的使用體驗。若你發現需要兩個以上的選項，考慮用Action Sheet取代，參閱Action Sheets
使用簡潔、邏輯的標題 最佳的按鈕文字是一到二字描述結果的文字。按鈕文字使用標題樣式大小寫且沒有標點符號。為了其他可能，使用和標題、內文相關的動詞，例如：檢視全部、回覆、忽略。使用“確認”進行簡單的知會。避免使用“是”和“否”
在人們預期的位置放置按鈕 一般來說，人們最應當點擊的按鈕在右側。取消按鈕通常於左側
適當的取消按鈕 取消Alert的按鈕必須顯示為“取消”
辨識破壞性按鈕 若按鈕將導致破壞性結果，像是刪除內容，將按鈕樣式設為“破壞性”的，以便系統提供適當的樣式。開發者指南請參閱UIAlertAction中的恆定值UIAlertActionStyleDestructive。此外，提供“取消”按鈕讓人們可以避免破壞性動作。設定“取消”為預設按鈕且為粗體
允許人們透過離開至主畫面來取消Alert 當看見Alert而退出App。它應當有和取消鈕同樣的效果，不執行任何動作而關閉。若你的Alert不包含取消鈕，考慮以編碼在某人退出App時關閉Alert
Collections 收藏庫
Collection管理排列組合的內容，像是照片，顯示自訂的、高度視覺化的排版。由於Collection並不執行嚴格的線性格式，特別適合大小不一的物件。一般來說，使用Collection顯示圖像內容非常理想。背景和其他裝飾是可選的，用來區分視覺物件的子集
Collection支援互動和動畫。預設下，你可以點擊以選取；長按來編輯；滑動來檢視。若App需要，可增加更多手勢來完成自訂動作。在Collection中，可在置入、刪除或重新排序時啟用動畫，自訂動畫也同樣支援
避免在標準行列或網格已足夠時創建新設計 Collection應增進使用者體驗，而不是變成注意力重點。使它易於選取。如果在Collection中難以點擊物件，人們會在到達他們想要的內容前感到迷惘並失去興趣。在內容周圍使用足夠的Padding以保持版面乾淨、避免覆蓋內容
考慮使用表格文字取代文字的Collection 一般來說，顯示滾動清單來瀏覽、消化文字資訊更簡單、效率
在版面劇變時顯示警告 Collection版面隨時都可以改變。若版面在人們瀏覽及互動時動態變化，確保變化合理且易於追溯。沒來由的改變版面使App難以預測和使用。若因版面改變而遺失情境，人們會覺得自己無法掌控
開發者指南請參閱UICollectionView
Image Views 圖像
Image View顯示單一圖像或動態圖像在透明或不透明背景上。透過Image View，圖片可以調整大小以來符合尺寸或是固定到特定位置。Image View預設是非互動的
盡可能確保動態圖像中的所有圖像尺寸保持一致 理想情況，圖像應預先縮放以符合視圖，系統不需做任何縮放。若系統必須縮放，當所有圖像以同尺寸和形狀是最簡單達到預期效果
開發者指南請參閱UIImageView
注意
已配置為模板的圖像將捨棄其色彩，並應用在視圖中的任何色彩。z參閱Custom Icons。開發者指南請參閱UIImage中的UIImageRenderingModeAlwaysTemplatePages 頁面
頁面檢視器*¹提供線性的瀏覽，例如文件、書、記事本、行事曆。頁面檢視器使用兩種樣式之一來轉換頁面——滾動或頁面捲曲*²。滾動沒有特殊的效果，頁面流暢的滾動至另一頁。頁面捲曲使你在螢幕上滑動頁面時捲曲頁面，就如真實的書一樣
合適的情況下，啟用某種非線性的瀏覽方式 當頁面控制器使用時，頁面依序，而沒有辦法跳至不相鄰的頁面。若使用者可能需要前往序列以外的頁面，啟用自訂操作來提供此功能。
開發者指南請參閱UIPageViewController
Popovers 彈出視窗
Popover是種短暫出現的視圖在其他內容上，在點擊操作或區域後顯示。通常Popover會包含箭頭指向它從哪裡而來。Popover可以是Modal或Nonmodal。點擊Popover以外的螢幕區域來離開Nonmodal Popover；點擊“取消”或其他按鈕來離開Modal Popover
Popover最適合在大螢幕中使用，可以容納多種元素，包和Navigation Bar、Toolbar、Tab Bar、Table、Collection、Image、Map、自訂視圖等等。當開啟Popover時無法和其他視圖的互動，直到Popover關閉。使用Popover來顯示和當前內容相關的選項或資訊。例如許多iPad App，當你點按Action按鈕即顯示分享選項的Popover
避免在iPhone上顯示Popover 一般來說，Popover應在iPda中使用。在iPhone App中，利用全螢幕的Modal View來顯示資訊而非使用Popover。
相關指南請參閱Modality
只在確認和準則使用“關閉”按鈕 使用關閉按鈕如“取消”或“完成”，此外必須清楚表明是否在儲存更改或不儲存離開。一般來說，當Popover不需要時會自動關閉。多數時候，在人們點選外面物件或內部的選項時關閉Popover。若選項可以多選，Popover必須保持開啟直到明確地按下離開或Popover外的空間
在自動關閉Nonmodal Popover時自動儲存 在無意間點擊範圍外的空間關閉Nonmodal Popover非常容易。只在明確點擊取消時才捨棄進度
在適切位置顯示Popover Popover箭頭應盡可能指向顯示它的元素。由於Popover無法在螢幕中拖曳，Popover不應該覆蓋可能會同時需要查看的必要資訊。Popover不應覆蓋於顯示它的元素
一次顯示一個Popover 顯示多個Popover將造成介面混亂並使人困惑。切勿顯示階層的Popover或是從中再開啟另一個。若你需要開啟新Popover，必須關閉原本的
切勿在Popover之上顯示其他View 除Alert之外，不得在Popover上再顯示其他物件
盡可能讓使用者以一次點擊來關閉並開啟另一個Popover 當不同Bar按鈕皆可各自打開Popover，避免額外點擊較為理想
避免將Popover做太大 Popover不應該佔據整個螢幕。使它夠大足夠顯示內容並指向它的出處。注意，系統可能會調整Popover大小，以確保它符合螢幕顯示
確保自訂Popover看起來如預期 雖然你可以自訂多種Popover，避免設計出無法辨識為Popover的樣式。當Popover包含標準操作和視圖時效果最佳
在Popover改變大小時滑順的轉換 某些Popover在顯示同樣資訊下提供較收合和展開的視圖。若你調整其大小，進行動態轉換，避免誤會取代原先的Popover
開發者指南請參閱UIPopoverPresentationController
Scroll View 滾動頁面
Scroll View提供內容的瀏覽，例如文件中的文字或相片庫中的照片，內容大於可看見範圍。當人們Swipe、Flick、Drag、Tap、Pinch，Scroll View依據手勢自然的顯示或縮放內容。Scroll View沒有任何外觀，只有人們滾動時出現的滾動指示器。Scroll View也可以配置在翻頁模式*³中，滾動以顯示新頁面而不是當前頁面
適當支援縮放 若表現得宜，讓人們Pinch或雙擊來放大或縮小。當你啟用縮放時，設定最大及最小尺寸。舉例在大多數App中，放大文字到只有單一字母填滿沒有意義
如何在翻頁模式中的Scroll View顯示頁面操作元素 頁面控制器顯示頁面數量和指引。若你在Scroll View顯示頁面控制器，不要在同一軸向使用滾動指示來避免混淆。額外指南請參閱Page Controls
勿在Scroll View中放置Scroll View 此行為將造成介面難以預測及操作
一般來說，一次只顯示一個Scroll View 人們通常在滾動時使用大幅度滑動，難以避免同一螢幕上的相鄰Scroll View也跟著滑動。若你必須同時放置兩個Scroll View，考慮允許他們以不同方向的滾動，因此不太可能以一種手勢影響兩種視圖。例如在垂直模式的iPhone，股票App透過垂直滾動顯示股票行情，在水平滾動顯示特定公司訊息
開發者指南請參閱UIScrollView
Sheet
Sheet幫助人們從子母視圖中獨立作業而不需離開當前頁面。舉例，Mail令人們無需離開收件匣即可撰寫郵件；Translate用Sheet顯示辭典以幫助人們翻譯字詞的意涵
開發者指南請參閱UISheetPresentationController
Sheet以卡片形式出現並蓋住部分下方內容。卡片上方圓角角落與母視圖區分。你可以自訂圓角半徑，與App中其他的圓角半徑協調；開發者指南請參閱preferredCornerRadius
人們通常預期當他們滾動內容或拖曳Grabber時將縮放Sheet，小的水平指示器於Sheet頂部。再iOS15或之後，Sheet根據Detents縮放，依照Sheet自然放置的特定高度。此系統定義兩種Detent：Large Detent的高度完全擴展而Medium Detent大約是完全擴展一半的高度
Sheet自動支援Large Detent。增加的Medium Detent允許Sheet以兩種高度呈現，然而，Medium Detent可以避免Sheet擴張至整個畫面的高度。開發者指南請參閱detents
預設Sheet是一種Modal，提供專注體驗並使下方母視圖模糊且無法互動。當人們與Modal Sheet完成互動後離開，或者自動儲存後繼續他們在母視圖的流程。在iOS15或之後，Sheet可以是Nonmodal。當Nonmodal Sheet出現，人們可以同時繼續在母視圖的流程以及與Sheet的互動
將Sheet用以非沈浸式的內容或簡單的工作 Sheet允許部分可見母視圖於後方，幫助人們在與Sheet互動時保留原本的環境狀態。使用全螢幕Modal提供沈浸式內容，像是影片、相片或是相機視圖，抑或是啟動複雜工作如標注文件或編輯相片。全螢幕Modal樣式將覆蓋整個螢幕，減少視覺分心。開發者指南請參閱UIModalPresentationStyle.fullScreen
考慮以Medium Detent允許漸進露出的Sheet內容 舉例，分享Sheet顯示最關聯的項目在Medium Detent。人們可以滾動或擴張Sheet來查看更多項目
當你想要顯示追加項目讓人們不需停下主要工作，請使用Nonmodal Sheet 當人們在Nonmodal Sheet選擇項目，母視圖可以依照項目效果來更新回應、提供反饋，並且讓人們在Sheet保留在螢幕上的同時可以繼續工作。例如，Notes使用Nonmodal Sheet以幫助人們應用不同的文字格式以區別不同段落。為了啟用Nonmodal Sheet體驗你必須支援Medium Detent並移除模糊母視圖（開發者指南請參閱largestUndimmedDetentIdentifier）
一般來說，在可縮放的Sheet中包含Grabber Grabber讓人們可以拖曳Sheet來縮放；他們也可以點擊他來通過整個Detent。除了提供可縮放的視覺指示器，也可以透過VoiceOver使用Grabber，人們無需看著螢幕也可以縮放Sheet。開發者指南請參閱prefersGrabberVisible
勿在Popover上顯示Sheet 雖然你可以在Popover中顯示Sheet，沒有任何物件應該顯示於Popover之上（除了Alert）。在少數狀況，當你需要在人們與Popover採取操作後再顯示Sheet，在顯示Sheet前關閉Popover
Spilt Views 分割顯示
分割顯示管理App中最高層級的表現形式，Spilt View由二或三欄介面顯示主要內容和可選的追加視窗之相關資訊，以及次要視窗的內容。在首要欄的更動將驅使次要欄中的內容一同更動。Spilt View在瀏覽多層級的內容非常方便，例如在Mail中來回瀏覽收件匣和信件
每個視窗都可以容納多種內容，但許多系統App使用Spilt View來創建基於Sidebar的介面，如Mail。在這種介面中，首要欄中顯示Sidebar，可選的次要欄中顯示清單，而第二內容視窗顯示關於選取項目的內容及細節。相關指南請參閱Sidebars
在iPad中使用Spilt View而非Tab Bar Spilt View提供和Tab Bar相同的快速瀏覽並同時有效利用大螢幕
在每一欄中使用適合的樣式 在首要欄中使用Sidebar並使用Sidebar的外觀樣式。此外觀樣式適合App階層間的瀏覽以及資料庫清單，像是Mail中的收件匣。追加欄中顯示清單，使用扁平的Sidebar樣式。此樣式適合獨立內容的清單，像是收件匣中的信件。開發者指南請參閱UICollectionLayoutListConfiguration.Appearance
在主要欄、次要欄中強調選擇的內容 雖然次視窗的內容可以面換，它應該永遠響應主視窗中可辨識的選擇。這幫助人們了解視窗間的關係
合理的需求中，允許人們在欄位間拖曳、拖放內容 由於Spilt View提供各階層的串連，人們可以透過拖曳、拖放從App的一處到另一處之間快速移動物件。相關指南請參閱Drag and Drop
開發者指南請參閱UISplitViewController
Tables 表格
Table顯示可滾動、由橫列組成單欄式、可分割成區塊或群組的資料。使用Table清楚有效率的顯示不同訊息量的資訊。一般來說，理想的Table是文字內容，通常顯示在分割顯示左邊以導覽，並在另一側顯示相關內容。相關指南請參閱Split Views
iOS提供三種Table樣式：Plain、Grouped、Inset Grouped
Plain 橫列可分成各個選項，可選的索引標記在右側邊緣。Header顯示在第一項之前；Footer顯示在最末項後
Grouped 橫列顯示於群組中，可在群組前後加上Header和Footer。此樣式的Table永遠包含至少一個群組，每一群組至少含有一項橫列。Grouped Table不包含索引標記
Inset Grouped 在圓角的群組中顯示橫列，並從Parent View的邊緣插入。此樣式的Table永遠包括至少一個群組，每一群組至少含有一項橫列，可在群組前後加上Header和Footer。Inset Grouped不包含索引。Inset Grouped樣式在一般寬度的環境中效果最佳。因為在窄寬度中空間較小，Inset Grouped可能導致字句斷行，尤其在文字本地化時
考慮Table寬度 太窄的Table可能會使文字截斷或擠壓。太寬的Table可能也會有難以閱讀的問題且佔用空間
快速顯示Table 切勿等待擴充Table內容讀取。立即在螢幕上的橫列顯示文字，在可顯示時出現更複雜的資料，例如圖像。此方式將立即給予有用資訊並增加App的感知響應能力。某些情況下，顯示先前資料直到重整令新資料出現
當內容讀取時顯示進度 若Table的資料需要時間讀取，顯示進度或Spin指示器向人們確保App仍在運作
保持最新資料 經常的更新你的Table資料來提供最新內容。唯獨不要改變滾動位置，取而代之，在Table開頭或末端增加內容，並在他們預備時滾動至它。某些App在新內容增加時指示器，提供操作來顯示它。提供重整按鈕也是個好方法，讓人們在隨時可以手動更新。參閱Refresh Content Controls.
避免橫列中同時提供索引和齊右元素 索引透過滑動手勢來操作。若其他互動元素在周邊，像是展開指示器*⁴，當手勢啟動預期外的操作時可能會令人難以分辨用途
開發者指南請參閱UITableView
Table Rows
你使用標準Table元件樣式以定義內容如何從Table橫列中出現
Basic（預設） 可選的圖像在橫列的左側，接著是齊左的標題。這是顯示不需要補充資訊的好方法
開發者指南請參閱UITableViewCell中的恆定值UITableViewCellStyleDefault
Subtitle 齊左的標題在線上、齊左的說明在下。此樣式在橫列看起來相似時效果好。補充的說明可以幫助分辨各個橫列。開發者指南請參閱UITableViewCell中的恆定值UITableViewCellStyleSubtitle
Right Detail（Value 1） 齊左的標題和齊右的說明在同一條基線。開發者指南請參閱UITableViewCell中的恆定值UITableViewCellStyleValue1
Left Detail（Value 2） 齊右的標題和其左的說明在同一條基線。開發者指南請參閱UITableViewCell中的恆定值UITableViewCellStyleValue2
所有標準Table元件樣式都遵循視覺元素，例如選項標記*⁵或擴展指示器。當然，增加這些元素將減少標題和說明的可用空間
保持文字簡短避免截斷 截斷的字詞和句與令人難以閱讀。文字套用Table元件樣式將自動截斷，根據你使用的樣式和截斷的位置帶來或多或少的問題
如何使用自訂“刪除”按鈕 若橫列支援刪除且有助於幫助操作，使用自訂的標題代替系統提供的刪除標題
在選取時提供回饋 人們預期在內容點擊時短暫的強調橫列。而在新的狀態改變，像是複選標記指示出選取已經發生
為非標準Table橫列設計自訂Table元件樣式 標準樣式在各種常見情境下適合使用，但由於某些內容或你的整體App設計，大量自訂Table樣式可能是必要的。如何創建你的元件請參閱Table View Programming Guide for iOS中的Customizing Cells
開發者指南請參閱UITableViewCell
Text Views 文本
文字視圖顯示多行、多樣式的文字。當文字允許任何高度，超出範圍時可滾動。預設下，文字齊左並使用黑色系統字型。若文字是可編輯的，在你點擊時出現鍵盤
保持文字易讀 僅管你可以使用多種字型、齊左置中齊右，仍必須維持內容易讀性。若人們調整裝置字型大小，適應動態字型是個好方法。你應在輔助使用啟用時測試，像是粗體。參閱Accessibility
顯示適當的鍵盤樣式 iOS提供多種鍵盤樣式，每種設計用以促進不同類型的輸入。為了有效率的資料輸入，鍵盤應響應當前的輸入文字類型。完整的鍵盤樣式清單請參閱UITextInputTraits中的恆定值UIKeyboardType
開發者指南請UITextView
Web Views 網頁
網頁視圖讀取並顯示豐富的網頁內容，像是直接在你的App中嵌入HTML和網站。例如Mail在訊息中顯示HTML內容
適當時啟用導覽前後頁 Web View支援前後頁操作，但此設定預設為不可用。若人們將使用你的Web View造訪多個頁面，啟用前後頁瀏覽並提供相應的操作來啟動這些功能
避免使用Web View來建立網頁瀏覽器 使用Web View讓人們進行短暫的網頁瀏覽且不用離開App，但Safari是在iOS上瀏覽網頁的首要選擇。不必要也不鼓勵在App中複製Safari的功能
開發者指南請參閱WKWebView
*¹ 頁面檢視器：Page View Controller
*² 頁面捲曲：Page-Curl
*³ 翻頁模式：Paging Mode
*⁴ 展開指示器：Disclosure Indicator
*⁵ 選項標記：Checkmark下一篇
上一篇
