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

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

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

基本界面元素包括三大類，分別是Bars（欄）、Views（視圖）、Controls（控件）。今天是最后一期：Controls（控件）

往期回顧：

以下是正文。

Context Menus 上下文菜單

iOS 13 及以上版本支持上下文菜單功能，用戶可以針對屏幕上內容進行額外操作，而不會導致界面混亂。

可以把這個功能理解為 Peek and Pop 的范圍擴大版。也就是說，用戶無需使用支持 3D Touch 的設備就可以和屏幕內容交互了。不過 3D Touch 設備的響應速度更快，因為系統通過感應按壓力度即可響應，而普通設備需要長按才能喚出這個功能。

1. 呈現的操作功能應高頻，且是針對屏幕內容的

例如針對一封郵件，「回復」或者「移動郵件位置」是有意義的，「設置格式」或「郵箱操作」就不合理了。如果呈現了太多操作選項，用戶會迷失在其中。

2. 將最高頻的操作置頂

用戶的視覺焦點就在這片區域，用戶找起來最快最方便。

3. 將操作分組

將操作依據類型進行區分，可以提高用戶的瀏覽速度（原理：格式塔心理學），例如編輯類一組、分享類一組。但別超過三組。

4. 使用小圖標

小圖標幫助用戶理解其功能，可以選用官方提供的 SF Symbols 圖標也可以自定義圖標。如果操作菜單包含子菜單，系統會自動在圖標位置展示箭頭，示意用戶此處有附加操作。

5. 利用子菜單來控制菜單的復雜性

提供簡潔直觀的標題讓用戶秒懂，這樣不用展開子菜單，用戶就可以判斷是否需要了。

子菜單一級就夠了，再多就太復雜了。

6. 針對一個對象，上下文菜單和編輯菜單選其一

否則系統無法判斷喚出哪個菜單，用戶也會迷惑。

Edit Menus 編輯菜單

點擊長按或者雙擊文本字段、文本視圖、Web 視圖或圖像視圖中的元素，即可出現編輯選項，例如「復制」、「粘貼」。

1. 針對當前內容展示合理的操作選項

例如，如果未選中任何內容，則菜單不應顯示「復制」、「剪切」這種需要選中內容才能執行的操作。同樣，如果已經選中內容，則菜單不應再有「選中內容」這個操作。

2. 支持復制選中的內容

用戶可能希望將選中的內容添加到郵件、消息、搜索中，提供復制功能可以免去例如打一大串文字這種的繁瑣操作。

3. 允許用戶撤銷操作

編輯菜單的操作是不需要向用戶再次確認就立即執行的。提供撤銷和重做操作，可以降低用戶的犯錯成本。

4. 自定義操作

可以擴展自定義操作功能。但在排序上，系統操作是在前面的（因為用戶對系統操作更熟悉更順手）。此外還要控制自定義操作功能的數量，避免給用戶增加認知負擔和操作成本。還要注意文案精簡，盡量使用動詞，使用英文的話記得首字母大寫。

Segmented Controls 分段控制器

分段控制器包含兩個以上分段按鈕，彼此功能互斥，寬度等分，可以呈現文字或者圖片。

分段控制器常用來切換視圖。

1. 分段數量

按鈕越寬越容易點擊。在手機上分段不要超過 5 個，否則難以點擊。

2. 按鈕上的字數

盡量控制按鈕上的字數大致相等，這樣視覺上疏密一致，美觀對稱。

3. 按鈕上使用文字還是圖標

全部使用文字，或者全部使用圖標都可以。但不要有的按鈕上是文字，有的按鈕上是圖片。

4. 自定義外觀

自定義外觀時，確保文字對齊和可讀性。

Page Controls 頁面控制器

頁面控制器是一排小圓點，個數代表頁數，實心點表示當前頁面，展示當前頁面所處位置。

1. 翻頁

可以通過點擊頁面控制器的頭部或者尾部進行翻頁，但小圓點不可點擊。翻頁只能按順序來，不能跳過。頁面之間是平級的。

2. 頁數

不要超過 10 個。頁面太多就要考慮換個版式了（我賭你不會想翻 10 頁的）。小圓點如果太多是會被系統裁掉的。

3. 位置

居中放在內容底部或者屏幕底部。

Progress Indicators 進度指示

不要讓用戶傻傻等待內容加載或數據處理。使用活動指示器或者進度條，暗示用戶 App 沒有停止工作，而是在正常工作中，并且讓用戶知道還需要等待多長時間。

1. Activity Indicators

活動指示器在執行無法量化的任務時（加載或同步復雜數據）旋轉，任務完成后消失。

活動指示器不可交互。

執行可量化的加載任務時使用進度條

相比活動指示器，進度條可讓用戶看到處理進度，以及還需要等待多長時間。

保持轉動

不然用戶以為 App 停止工作了。

提供有幫助的文案

在等待過程中可以提供一些有價值的信息，而不要使用模糊空洞的術語，比如「加載中」。

2. Progress Bars

進度條是一條從左到右填充的軌道，顯示任務進度。進度條不可交互，不過可以在旁邊放置取消按鈕來終止操作。

在導航欄和工具欄中隱藏軌道的未填充部分。

默認情況下，進度條同時包含已填充和未填充部分。但在導航欄或工具欄中使用時（例如表示頁面加載），未填充部分隱藏。

自定義

可以自定義進度條樣式，來保證 App 內視覺規范一致。

Refresh Content Controls 內容刷新控件

內容刷新控件是活動指示器的一種特殊類型，默認隱藏，向下拖動需要刷新的內容后展示。

執行內容自動更新

不要讓用戶依賴手動刷新來更新內容，系統也要定期更新數據。

Labels 標簽

標簽呈現靜態文本內容，無法編輯，但可支持將其復制。文本長度不受限制，但最好保持簡短。

保持文本清晰易讀

盡管可自定義文本的字體、顏色、對齊方式，但保持內容的可讀性至關重要。建議支持動態類型，這樣當用戶更改設備上的文字大小時依舊可以保持文本清晰易讀。另外還應該測試在啟用輔助功能后的展示效果（例如文本加粗）。

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