最近仔細(xì)研讀了蘋果官網(wǎng)最新的設(shè)計規(guī)范。網(wǎng)上沒有找到很滿意的翻譯版本，于是自己老老實實的啃了幾遍官方文檔，順便把學(xué)習(xí)筆記輸出給大家分享一下。

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

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

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

以下是正文。

Navigation Bars 導(dǎo)航欄

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

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

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

注意：當(dāng)不需要導(dǎo)航或需要多個控件來管理內(nèi)容時，請使用工具欄。

1. Navigation Bar Titles 導(dǎo)航欄標(biāo)題

標(biāo)題的作用

多數(shù)情況下標(biāo)題可以幫助用戶了解他們在看什么。但標(biāo)題不是必須的，也可以空著。例如在「備忘錄」中，第一行內(nèi)容已經(jīng)提供了明確標(biāo)題，再在導(dǎo)航欄上添加標(biāo)題就沒必要了。

大標(biāo)題

特別強(qiáng)調(diào)內(nèi)容時可以使用大標(biāo)題。大標(biāo)題方便用戶瀏覽和搜索。

注意在iOS 13及更高版本中

• 帶大標(biāo)題的導(dǎo)航欄不包含背景材質(zhì)和陰影。
• 可以隱藏導(dǎo)航欄的底部邊框（通過刪除導(dǎo)航欄的陰影），這樣的好處是標(biāo)題和內(nèi)容之間的聯(lián)系更緊密。
• 用戶滾動內(nèi)容區(qū)域時，大標(biāo)題會轉(zhuǎn)換為標(biāo)準(zhǔn)標(biāo)題，這時候邊框會重新出現(xiàn)，用來明確區(qū)分標(biāo)題和內(nèi)容。

2. Navigation Bar Controls 導(dǎo)航欄控件

導(dǎo)航欄不要擠滿太多控件

通常不超過以下元素：當(dāng)前標(biāo)題、后退按鈕、一個內(nèi)容操作控件。

分段控制器

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

如果使用了分段控制器則該欄不應(yīng)包含標(biāo)題或分段控件以外的任何控件。

不要使用面包屑導(dǎo)航

返回按鈕只提供返回上一頁的路徑。如果擔(dān)心用戶迷失，考慮將層級結(jié)構(gòu)更扁平化。

文字按鈕

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

Tab Bars 標(biāo)簽欄

外觀

和導(dǎo)航欄一樣，標(biāo)簽欄是半透明度的，可填充為背景色。橫屏或豎屏方向標(biāo)簽欄高度一致。

隱藏：輸入鍵盤出現(xiàn)時被隱藏。

數(shù)量

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

注意：

• 標(biāo)簽欄一般用在最外層的全局導(dǎo)航，要一直可見。（模態(tài)視圖除外，模態(tài)視圖不從屬于全局導(dǎo)航）
• 如果某標(biāo)簽沒法使用，不要刪除或者禁用標(biāo)簽，用戶會覺得不穩(wěn)定、難以預(yù)料。要保持標(biāo)簽可點擊，并說明標(biāo)簽頁內(nèi)容不可用的原因。
• 不要把標(biāo)簽欄和工具欄混淆。標(biāo)簽欄用來導(dǎo)航，工具欄是針對當(dāng)前視圖的操作，兩者不會同時出現(xiàn)。
• 切換標(biāo)簽的時候，相關(guān)聯(lián)的視圖隨之轉(zhuǎn)換，而不影響屏幕上其他位置的視圖，否則會破壞頁面的可預(yù)測性。

Toolbars 工具欄

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

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

注意

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

Search Bars 搜索欄

隱藏：和導(dǎo)航欄一起可以始終顯示，也可以默認(rèn)隱藏，直到用戶向下滑動時顯示。

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

啟用清除按鈕。大多數(shù)搜索欄都包含一個清除按鈕，可清除該字段的內(nèi)容。

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

可以使用占位符或者搜索欄上方的單行簡短提示，指導(dǎo)用戶可搜索的內(nèi)容。

考慮在搜索欄下方提供有用的快捷方式和其他內(nèi)容，減少用戶輸入負(fù)擔(dān)，更快獲取內(nèi)容。

1. Scope Bars 范圍欄

若內(nèi)容明確分類，可使用范圍欄縮小搜索范圍。但提升搜索效率首先應(yīng)該優(yōu)化搜索結(jié)果，而非使用范圍欄。

Status Bars 狀態(tài)欄

不要改變系統(tǒng)狀態(tài)欄樣式：用戶期望狀態(tài)欄在系統(tǒng)范圍內(nèi)保持一致。

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

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

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

• 使用導(dǎo)航欄，把下方內(nèi)容和狀態(tài)欄分開。
• 狀態(tài)欄背景使用漸變色or純色填充，遮擋下方內(nèi)容。
• 使?fàn)顟B(tài)欄下方內(nèi)容模糊，感覺下方內(nèi)容被毛玻璃覆蓋。

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