最近仔細研讀了蘋果官網最新的設計規範。網上沒有找到很滿意的翻譯版本，於是自己老老實實的啃了幾遍官方文檔，順便把學習筆記輸出給大家分享一下。

這裡有幾點要提醒一下大家：

• 這是簡明筆記，只選了重點內容，不是通篇逐字逐句的翻譯。想要全面了解的同學建議認真學習官方文檔。
• 筆記沒有完全按照官方的目錄排序（官方二級目錄按字母表順序排列），而是根據重要程度、使用頻率、相關性以及易混淆程度等，綜合考量，重新排序。
• 如果有疏漏和錯誤，歡迎找茬提意見~

基本界面元素包括三大類，分別是Bars（欄）、Views（視圖）、Controls（控件）。今天就從Bars（欄）開始~

以下是正文。

Navigation Bars 導航欄

外觀：導航欄是半透明的，可填充為背景色。

隱藏：可配置成在特定條件下隱藏：例如調用輸入鍵盤、某些手勢、縮放視圖等。

建議在全屏展示時隱藏導航欄，以營造沉浸效果，但要讓用戶使用簡單的手勢（如點擊）恢復導航欄。

注意：當不需要導航或需要多個控件來管理內容時，請使用工具欄。

1. Navigation Bar Titles 導航欄標題

標題的作用

多數情況下標題可以幫助用戶了解他們在看什麼。但標題不是必須的，也可以空着。例如在「備忘錄」中，第一行內容已經提供了明確標題，再在導航欄上添加標題就沒必要了。

大標題

特彆強調內容時可以使用大標題。大標題方便用戶瀏覽和搜索。

注意在iOS 13及更高版本中

• 帶大標題的導航欄不包含背景材質和陰影。
• 可以隱藏導航欄的底部邊框（通過刪除導航欄的陰影），這樣的好處是標題和內容之間的聯繫更緊密。
• 用戶滾動內容區域時，大標題會轉換為標準標題，這時候邊框會重新出現，用來明確區分標題和內容。

2. Navigation Bar Controls 導航欄控件

導航欄不要擠滿太多控件

通常不超過以下元素：當前標題、後退按鈕、一個內容操作控件。

分段控制器

利用分段控制器可以使頁面層級更扁平，但只能用在最高層級的頁面，底層頁面還是要用後退按鈕。

如果使用了分段控制器則該欄不應包含標題或分段控件以外的任何控件。

不要使用麵包屑導航

返回按鈕只提供返回上一頁的路徑。如果擔心用戶迷失，考慮將層級結構更扁平化。

文字按鈕

如果使用多個文字按鈕，要預留足夠間隙以保證辨識性。

Tab Bars 標籤欄

外觀

和導航欄一樣，標籤欄是半透明度的，可填充為背景色。橫屏或豎屏方向標籤欄高度一致。

隱藏：輸入鍵盤出現時被隱藏。

數量

原則上標籤數量不做限制，大屏幕或者橫屏方向可以容納更多數量的標籤。如果屏幕放不下，最後的標籤會變成「更多」，點擊后切換屏幕展示更多標籤。但這樣用戶操作效率不高，屏幕利用率也很低。
建議手機上3-5個的標籤數量比較合適。太少了也不合適，標籤之間會缺乏關聯性。

注意：

• 標籤欄一般用在最外層的全局導航，要一直可見。（模態視圖除外，模態視圖不從屬於全局導航）
• 如果某標籤沒法使用，不要刪除或者禁用標籤，用戶會覺得不穩定、難以預料。要保持標籤可點擊，並說明標籤頁內容不可用的原因。
• 不要把標籤欄和工具欄混淆。標籤欄用來導航，工具欄是針對當前視圖的操作，兩者不會同時出現。
• 切換標籤的時候，相關聯的視圖隨之轉換，而不影響屏幕上其他位置的視圖，否則會破壞頁面的可預測性。

Toolbars 工具欄

外觀：和導航欄、標籤欄一樣，工具欄是半透明度的，可填充為背景色。橫屏或豎屏方向高度一致。

隱藏：用戶不太可能需要他們的時候，或者輸入鍵盤出現的情況下隱藏。例如在Safari中，用戶滑動屏幕瀏覽網頁的時候工具欄是隱藏的。

注意

• 工具欄不要使用分段控制器。工具欄對指定內容操作，分段控制器用來切換視圖內容，兩者含義不同。
• 使用圖標還是文字按鈕？3個以上建議圖標，3個以下建議文字更加直觀明了。

Search Bars 搜索欄

隱藏：和導航欄一起可以始終显示，也可以默認隱藏，直到用戶向下滑動時显示。

注意：雖然都可以輸入文字，但不要使用文本框取代搜索欄，兩者給用戶的心裏逾期截然不同。

啟用清除按鈕。大多數搜索欄都包含一個清除按鈕，可清除該字段的內容。

適當時啟用「取消」按鈕。大多數專用搜索欄都包含一個「取消」按鈕，該按鈕可立即終止搜索。

可以使用佔位符或者搜索欄上方的單行簡短提示，指導用戶可搜索的內容。

考慮在搜索欄下方提供有用的快捷方式和其他內容，減少用戶輸入負擔，更快獲取內容。

1. Scope Bars 範圍欄

若內容明確分類，可使用範圍欄縮小搜索範圍。但提升搜索效率首先應該優化搜索結果，而非使用範圍欄。

Status Bars 狀態欄

不要改變系統狀態欄樣式：用戶期望狀態欄在系統範圍內保持一致。

顏色模式：使用亮色模式或者暗色模式都可以，要注意顏色對比以保證辨識度。

隱藏：建議在全屏播放媒體內容時隱藏狀態欄以營造沉浸體驗。但要避免永久隱藏狀態欄。如果沒有狀態欄，人們必須離開應用才能查看時間或是否連接Wi-Fi。

默認情況下狀態欄背景是透明的，可展示下方屏幕內容，防止用戶認為可以和狀態欄下方內容交互的辦法有以下三個：

• 使用導航欄，把下方內容和狀態欄分開。
• 狀態欄背景使用漸變色or純色填充，遮擋下方內容。
• 使狀態欄下方內容模糊，感覺下方內容被毛玻璃覆蓋。

閱讀文章 >>

歡迎關注作者的微信公眾號：「能呆書房一整天」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五註冊平台_iOS 人機界面指南精簡版筆記之界面元素：Bars