HIG iOS 翻譯 Bar｜列
Bar 列
Navigation Bars 導覽列
Search Bars 搜尋列
Sidebars 側邊欄
Status Bars 狀態列
Tab Bars 分頁列
Toolbars 工具列Navigation Bars 導覽列
Navigation Bars顯示在螢幕上方、Status Bar*¹的下方，用來導覽頁面的階層。當新畫面開啟，左上角的返回通常會標籤為前一畫面的標題。有時Bar的右方顯示操作如“編輯”或“完成”按鈕來管理當前內容。分割顯示中，Navigation Bars可能只會顯示在其中一個視窗。Navigation Bars是半透明的，可能有背景色，並可以在鍵盤出現、特定手勢、視圖大小調整時隱藏
考慮暫時隱藏Navigation Bar來獲得沈浸式體驗 例如照片，在使用者全螢幕瀏覽時隱藏Navigation Bar和其他介面元素。若想啟動此種顯示或是還原Navigation Bar，僅需輕輕點擊
開發者指南請參閱UINavigationBar
Navigation Bar 標題
如何在Navigation Bar顯示當前頁面的標題 大多數時，標題幫助人們了解他們現在觀看的內容。然而，若是多餘的標題則讓它留空。例如，由於備忘錄第一行的標題足以辨識，不需再顯示標題
在需要特別強調時使用大標題 大標題不應和內容衝突，但在某些App，大標題的粗體文字能夠幫助人們瀏覽並搜尋。例如在分頁排版中，大標題可以幫助人們在上滑至頂部時辨識當前頁面。Music使用大標題在不同區域，像是專輯、演出者、播放清單或電台。在iOS13或之後，預設下大標題不包含背景材質或陰影。同時，當人們滾動下方時大標題會自動轉換為標準標題。開發者指南請參閱prefersLargeTitles
如何隱藏大標題的邊框 在iOS13或之後，你可以透過移除Bar的陰影來隱藏Navigation Bars的底部邊框（當人們滾動時自動再出現邊框）。由於無邊框增強了標題和內容的連結，Navigation Bar中的大標題效果很好。雖然無邊框樣式的Navigation Bars在標準大小的標題中可能效果不好，因為Bar的標題和按鈕可能會難以區分。在iPad上的分割顯示是個例外：當你需要維持一致性在主要和細節視窗，透過在兩邊都使用無邊框樣式
Navigation Bar操作
避免太多操作造成Navigation Bar的擁擠 一般來說，Navigation Bars只須包含當前標題、返回按鈕、管理操作按鈕。如果你在Navigation Bars使用Segmented Control，該列不應該在包含標題或任何控制
如果你為Navigation Bar的操作創建自訂Glyph，遵循以下尺寸，必要時調整尺寸以達平衡
使用標準返回按鈕 人們知道他們可以透過返回按鈕在階層中回溯步驟。然而，若是使用自訂的返回按鈕，確保它看起來像返回按鈕、符合預期、表現直覺、與介面搭配並在App中保有一致性。若以自訂圖像取代系統的返回鈕”＜“，也自訂圖像遮罩。iOS在轉換頁面時使用遮罩做動畫
勿包含多段的麵包屑*²路徑 返回按鈕永遠表示單獨動作——回到上一畫面。若你認為使用者可能因為沒有完整路徑而迷失，使用Flattening階層
給予文字按鈕足夠的空間 若Navigation Bars包含多個文字按鈕，這些按鈕可能會同時出現，使按鈕變得難以區分。透過固定空間在按鈕間來插入分隔。開發者指南請參閱UIBarButtonItem中的恆定值UIBarButtonSystemItemFixedSpace
如何在Navigation Bar中使用Segmented Control來展開App的資訊階層 如果你在Navigation Bar使用Segmented Control，只在結構階層的最頂部這樣做，確保返回按鈕在較低階層。額外指南請參閱Segmented Controls
Search Bar 搜尋列
Search Bar允許人們透過在欄位中輸入文字來從資料庫中搜尋。Search Bar可以單獨顯示、包含在Navigation Bar或內容視圖中。Search Bar可以被固定在Navigation Bar中，在任何時間使用，或者在使用者滾動下滑時收合
以Search Bar取代文字來啟動搜尋 文字並非人們預期的Search Bar外觀
支援清除按鈕 大多Search Bar包含清除按鈕來除去欄位中的內容
適時啟用取消按鈕 大多的Search Bar包含取消按鈕來立即中斷搜尋
適時在Search Bar顯示提示和語境 Search Bar欄位可以含有佔位符*³，像是“搜尋衣服、鞋子和飾品”亦或只是“搜尋”，提醒正在搜尋的狀態。一行簡潔、直接出現在Search Bar上方的簡單提示可以幫助搜尋。股票App使用提示讓人們知道可以輸入公司名稱或股票代號
如何在Search Bar下方提供有用的捷徑和其他內容 在Search Bar下方區域顯示捷徑來幫助人們更快獲取內容。例如Safari，在你點擊搜尋輸入欄時即顯示你的書籤。不需輸入文字即刻前往。股票顯示你在搜尋欄輸入的搜尋結果清單。無需再輸入，隨時可以點按。
開發者指南請參閱UISearchController和UISearchBar
Scope Bar
可以將Scope Bar加入Search Bar，讓人們縮小搜尋範圍
傾向改善搜尋結果，而非加入Scope Bars 當搜尋範圍已經明確定義，Scope Bars很有用。然而最佳方式是改善搜尋結果，Scope Bars並非必要
開發者指南請參閱UISearchBar
Sidebars 側邊欄
Sidebar提供App階層的瀏覽並快速與最高階層的資料庫互動。在Sidebar中點選項目使人們瀏覽至特定內容。例如，Mail中的Sidebar顯示條列式的收件匣。人們可以選取收件匣來前往信件列表，並且選取特定信件已顯示於內容視窗
你可以透過Sidebar風格清單來創建Sidebar並且置於分割顯示中的首要欄位。相關指南請參閱Split Views
使用正確的Sidebar外觀 使用資料庫視圖清單的排版來創建Sidebar。開發者指南請參閱UICollectionLayoutListConfiguration.Appearance
以Sidebar來組織App階層資訊 透過Sidebar扁平化資訊階層並提供串連數個同等資訊種類或模式是個好方式。使用Sidebar來快速瀏覽App的關鍵部分獲最高層資料庫內容，像是資料夾或播放清單
盡可能令使用者自訂Sidebar內容 由於Sidebar提供App的瀏覽，你可以藉此提供快捷，令他們快速前往他們指定的物件。最好的方式是使用者可以決定哪些是最中要的
不要阻止人們隱藏Sidebar 允許人們隱藏Sidebar來獲得更多空間，同時透過邊緣滑動手勢來再次顯示Sidebar。避免在預設下隱藏Sidebar
確保Sidebar中的標題簡潔有力 省略非必要且多餘的文字。例如，Mail在每個收件匣中省略如“信件”文字，使用更簡要的用語如“加上旗標的”和“草稿”
一般情況中，避免在Sidebar中提供兩層以上的階層 當資料階層大於兩層，請在分割顯示介面的追加欄位中使用清單視圖
Status Bar 狀態列
Status Bar顯示在螢幕上方邊緣，顯示裝置當前狀態，如時間、電信商、電池電量等資訊。根據裝置和系統狀態在Status Bar中顯示實際資訊
使用系統Status Bar 人們預期Status Bar和整個系統保持一致，不要用自訂Status Bar取代
搭配Status Bar和App相襯的樣式 Status Bar文字和指標的視覺樣式不是淺色就是深色，可以在整個App提供相同樣式，也可以針對不同頁面分別設計。淺色內容在深色Status Bar上或是深色內容在淺色Status Bar上效果較好
模糊Status Bar底下的內容 預設下Status Bar背景是透明的，允許內容在下層顯示。保持Status Bar的易讀性，別讓人們誤以為下方的內容可互動。下列幾種常用方法：
- 在App中使用Navigation Bar，自動顯示Status Bar背景並確保內容不會出現在Status Bar下
- 顯示自訂圖像，如漸層、單色在Status Bar下
- 使下方物件模糊。開發者指南請參閱UIBlurEffect
在全螢幕瀏覽媒體時暫時隱藏Status Bar 當使用者專注於媒體時，Status Bar會使人分心。暫時隱藏這些元素以提供更沉浸的體驗。例如照片，當使用者全螢幕瀏覽時隱藏Status Bar和其他介面元素
避免永久地隱藏Status Bar 沒有了Status Bar，使用者必須離開App來查看時間或Wi-Fi連線。讓人們透過簡單、易發現的手勢來重新顯示Status Bar。當在瀏覽全螢幕照片時，輕點即可再顯示Status Bar
開發者指南請參閱UIApplication中的恆定值UIStatusBarStyle以及UIViewController中的樣式preferredStatusBarStyle
Tab Bars 分頁列
Tab Bar在畫面底部，幫助人們了解App提供的資訊或功能類別。分頁幫助人們在App中的最高層級快速切換，在保留每個頁面中的當前導航狀態
預設Tab Bar為半透明，當內容顯示並隱藏Tab Bar時它使用背景材質，當視圖滾動至底部時移除材質。在鍵盤顯示時隱藏Tab Bar
根據裝置尺寸及水平或垂直方向，可見的分頁數量可小於分頁總數。如果水平方向的空間限制了分頁數量，最後的分頁變成“更多”分頁，在獨立畫面中顯示剩餘的項目
開發者指南請參閱UITabBar
提示
了解Tab Bar和ToolBar的差異非常重要，因為兩者皆置於畫面底部。Tab Bar讓使用者快速切換不同畫面，例如時鐘中的鬧鐘、碼表、計時器。Toolbar提供和當前頁面相關的操作動作，如創建、刪除物件、增加註解或拍照。Tab Bar和Toolbar不應出現在同個畫面中僅使用Tab Bar進行瀏覽，而非用作操作 若你需要提供操作來和當前內容做互動，試以Toolbars取代
盡可能減少分頁數量讓資訊清楚明瞭並幫助人們瀏覽App 每個額外分頁將減少分頁的觸及範圍並增加介面複雜度，使得找尋資訊更加困難。太少分頁也可能造成介面顯得分散，令人們需要來回分頁以知曉其中內容。雖然可以使用“更多”來顯示額外分頁，但需要額外點擊且使用率降低。一般來說，在iPhone使用3到5個分頁。iPad上可以接受更多
在iPadOS App中考慮用Sidebar取代Tab Bar 由於Sidebar可以顯示大量項目，在iPad上瀏覽更為容易。你也可以讓人們自訂Sidebar中的項目，並讓他們隱藏Sidebar來獲得更多顯示內容的空間。相關指南請參閱Sidebars
避免在人們需要瀏覽至其他區域時隱藏Tab Bar 人們透過Tab Bar瀏覽整個App，因此它應該保持隨處可見。除了在Modal視圖中，因為Modal視圖給予獨立狀態，在他們完成後而離開，它是整個App中不需導覽的一部份
避免在分頁不可用時移除或禁用 若分頁只在某些情況下可用，你的App會令人感到不穩定且難以預測。確保所有分頁可用，並解釋為何該分頁內容不可用。例如音樂，若沒有歌曲在裝置中，在“我的音樂”分頁中說明該如何下載歌曲
確保分頁影響相關的分頁視圖，而非螢幕上的其他的視圖 舉例在分割顯示中，選取左視窗中的分頁不該影響到右視窗的內容。相同的，在Popover中選取分頁不應使Popover後方的內容變動
低調的透過Badge提醒 你可以透過顯示Badge，紅色圓形和白色文字為數量或驚嘆號，說明在此分頁或模式有新的資訊。開發者指南請參閱UITabBarItem
考慮使用SF Symbols來製作可縮放的、視覺一致的Tab Bar項目 當你使用SF Symbol，Tab Bar項目將自動適應不同語境。例如，根據使用的裝置及水平或垂直方向，Tab Bar可以是一般或緊湊的尺寸。同樣地，垂直方向中Tab Bar Glyphs可以顯示於分頁標題上方；然而，水平方向Tab Bar Glyphs和分頁標題並排。以填滿的、一致的Symbol或Glyph呈現於平台。在若你在iPad上的App使用Sidebar而非Tab Bar，轉換成填滿的Symbol或Glyph到Sidebar中的線條變值。相關指南請參閱SF Symbols
若你需要創建自訂Tab Bar Glyph，每一Glyph均創建兩種，在一般或緊湊的環境中都可以良好的觀看。在創建不同形狀的Tab Bar Glyph時使用以下指標。相關連結請參閱Glyphs
Toolbar 工具列
ToolBar顯示於畫面底部並提供按鈕，顯示與當前畫面相關操作的按鈕。ToolBar可能為半透明、背景色，在可能不需要時隱藏。例如在Safari，你可能為了閱讀頁面而滾動畫面時，需要隱藏Toolbar。你可以透過點擊畫面底部來顯示。ToolBar也在鍵盤使用時隱藏。
開發者指南請參閱UIToolbar
提示
了解Tab Bar和ToolBar的差異非常重要，因為兩者都置於畫面底部。Toolbar包含和當前環境相關的操作動作，如創建、刪除物件、增加註解或拍照。Tab Bar讓使用者快速切換不同畫面，例如時鐘中的鬧鐘、碼表、計時器。Tab Bar和Toolbar不得出現在同個畫面中Toolbar提供人們當前畫面最有可能執行的少量的操作 Toolbar為經常性的操作提供顯眼的、一致的位置。若你需要提供轉換頁面的方法，試以Tab Bar取代
若需在iPadOS App中提供經常性操作，使用請考慮以Navigation Bar而非Toolbar iPad畫面頂部的按鈕比底層更醒目，也更加容易觸及。相關指南請參閱Navigation Bars
Toolbar包含三個以下的按鈕，請提供簡潔明確的標題 例如，行事曆中標題使用“今天”、“行事曆”和“收件匣”。為確保這這些標題不會同時觸碰，你可以在按鈕間插入固定空間。開發者指南請參閱UIBarButtonSystemItemFixedSpace
若Toolbar中有超國三個以上的按鈕，考慮以SF Symbols來節省空間 SF Symbols提供大量的自訂Symbol來作為App中的操作使用。若你需要創建自訂Glyph來作為Toolbar按鈕，請遵循下列尺寸並以平衡為目標調整。相關指南請參閱Glyphs
避免在ToolBar使用Segmented Control Segmented Control讓人們切換語境，然而ToolBar的操作是用以當前頁面的狀態
*¹ 狀態列：Status Bar
*² 麵包屑：Breadcrumb
*³ 佔位符：Placeholder
*⁴ 範圍列：Scope Bar下一篇
上一篇
