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

這里有幾點(diǎn)要提醒一下大家：

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

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

往期回顧：

以下是正文。

Context Menus 上下文菜單

iOS 13 及以上版本支持上下文菜單功能，用戶可以針對(duì)屏幕上內(nèi)容進(jìn)行額外操作，而不會(huì)導(dǎo)致界面混亂。

可以把這個(gè)功能理解為 Peek and Pop 的范圍擴(kuò)大版。也就是說(shuō)，用戶無(wú)需使用支持 3D Touch 的設(shè)備就可以和屏幕內(nèi)容交互了。不過(guò) 3D Touch 設(shè)備的響應(yīng)速度更快，因?yàn)橄到y(tǒng)通過(guò)感應(yīng)按壓力度即可響應(yīng)，而普通設(shè)備需要長(zhǎng)按才能喚出這個(gè)功能。

1. 呈現(xiàn)的操作功能應(yīng)高頻，且是針對(duì)屏幕內(nèi)容的

例如針對(duì)一封郵件，「回復(fù)」或者「移動(dòng)郵件位置」是有意義的，「設(shè)置格式」或「郵箱操作」就不合理了。如果呈現(xiàn)了太多操作選項(xiàng)，用戶會(huì)迷失在其中。

2. 將最高頻的操作置頂

用戶的視覺(jué)焦點(diǎn)就在這片區(qū)域，用戶找起來(lái)最快最方便。

3. 將操作分組

將操作依據(jù)類型進(jìn)行區(qū)分，可以提高用戶的瀏覽速度（原理：格式塔心理學(xué)），例如編輯類一組、分享類一組。但別超過(guò)三組。

4. 使用小圖標(biāo)

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

5. 利用子菜單來(lái)控制菜單的復(fù)雜性

提供簡(jiǎn)潔直觀的標(biāo)題讓用戶秒懂，這樣不用展開(kāi)子菜單，用戶就可以判斷是否需要了。

子菜單一級(jí)就夠了，再多就太復(fù)雜了。

6. 針對(duì)一個(gè)對(duì)象，上下文菜單和編輯菜單選其一

否則系統(tǒng)無(wú)法判斷喚出哪個(gè)菜單，用戶也會(huì)迷惑。

Edit Menus 編輯菜單

點(diǎn)擊長(zhǎng)按或者雙擊文本字段、文本視圖、Web 視圖或圖像視圖中的元素，即可出現(xiàn)編輯選項(xiàng)，例如「復(fù)制」、「粘貼」。

1. 針對(duì)當(dāng)前內(nèi)容展示合理的操作選項(xiàng)

例如，如果未選中任何內(nèi)容，則菜單不應(yīng)顯示「復(fù)制」、「剪切」這種需要選中內(nèi)容才能執(zhí)行的操作。同樣，如果已經(jīng)選中內(nèi)容，則菜單不應(yīng)再有「選中內(nèi)容」這個(gè)操作。

2. 支持復(fù)制選中的內(nèi)容

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

3. 允許用戶撤銷操作

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

4. 自定義操作

可以擴(kuò)展自定義操作功能。但在排序上，系統(tǒng)操作是在前面的（因?yàn)橛脩魧?duì)系統(tǒng)操作更熟悉更順手）。此外還要控制自定義操作功能的數(shù)量，避免給用戶增加認(rèn)知負(fù)擔(dān)和操作成本。還要注意文案精簡(jiǎn)，盡量使用動(dòng)詞，使用英文的話記得首字母大寫。

Segmented Controls 分段控制器

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

分段控制器常用來(lái)切換視圖。

1. 分段數(shù)量

按鈕越寬越容易點(diǎn)擊。在手機(jī)上分段不要超過(guò) 5 個(gè)，否則難以點(diǎn)擊。

2. 按鈕上的字?jǐn)?shù)

盡量控制按鈕上的字?jǐn)?shù)大致相等，這樣視覺(jué)上疏密一致，美觀對(duì)稱。

3. 按鈕上使用文字還是圖標(biāo)

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

4. 自定義外觀

自定義外觀時(shí)，確保文字對(duì)齊和可讀性。

Page Controls 頁(yè)面控制器

頁(yè)面控制器是一排小圓點(diǎn)，個(gè)數(shù)代表頁(yè)數(shù)，實(shí)心點(diǎn)表示當(dāng)前頁(yè)面，展示當(dāng)前頁(yè)面所處位置。

1. 翻頁(yè)

可以通過(guò)點(diǎn)擊頁(yè)面控制器的頭部或者尾部進(jìn)行翻頁(yè)，但小圓點(diǎn)不可點(diǎn)擊。翻頁(yè)只能按順序來(lái)，不能跳過(guò)。頁(yè)面之間是平級(jí)的。

2. 頁(yè)數(shù)

不要超過(guò) 10 個(gè)。頁(yè)面太多就要考慮換個(gè)版式了（我賭你不會(huì)想翻 10 頁(yè)的）。小圓點(diǎn)如果太多是會(huì)被系統(tǒng)裁掉的。

3. 位置

居中放在內(nèi)容底部或者屏幕底部。

Progress Indicators 進(jìn)度指示

不要讓用戶傻傻等待內(nèi)容加載或數(shù)據(jù)處理。使用活動(dòng)指示器或者進(jìn)度條，暗示用戶 App 沒(méi)有停止工作，而是在正常工作中，并且讓用戶知道還需要等待多長(zhǎng)時(shí)間。

1. Activity Indicators

活動(dòng)指示器在執(zhí)行無(wú)法量化的任務(wù)時(shí)（加載或同步復(fù)雜數(shù)據(jù)）旋轉(zhuǎn)，任務(wù)完成后消失。

活動(dòng)指示器不可交互。

執(zhí)行可量化的加載任務(wù)時(shí)使用進(jìn)度條

相比活動(dòng)指示器，進(jìn)度條可讓用戶看到處理進(jìn)度，以及還需要等待多長(zhǎng)時(shí)間。

保持轉(zhuǎn)動(dòng)

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

提供有幫助的文案

在等待過(guò)程中可以提供一些有價(jià)值的信息，而不要使用模糊空洞的術(shù)語(yǔ)，比如「加載中」。

2. Progress Bars

進(jìn)度條是一條從左到右填充的軌道，顯示任務(wù)進(jìn)度。進(jìn)度條不可交互，不過(guò)可以在旁邊放置取消按鈕來(lái)終止操作。

在導(dǎo)航欄和工具欄中隱藏軌道的未填充部分。

默認(rèn)情況下，進(jìn)度條同時(shí)包含已填充和未填充部分。但在導(dǎo)航欄或工具欄中使用時(shí)（例如表示頁(yè)面加載），未填充部分隱藏。

自定義

可以自定義進(jìn)度條樣式，來(lái)保證 App 內(nèi)視覺(jué)規(guī)范一致。

Refresh Content Controls 內(nèi)容刷新控件

內(nèi)容刷新控件是活動(dòng)指示器的一種特殊類型，默認(rèn)隱藏，向下拖動(dòng)需要刷新的內(nèi)容后展示。

執(zhí)行內(nèi)容自動(dòng)更新

不要讓用戶依賴手動(dòng)刷新來(lái)更新內(nèi)容，系統(tǒng)也要定期更新數(shù)據(jù)。

Labels 標(biāo)簽

標(biāo)簽呈現(xiàn)靜態(tài)文本內(nèi)容，無(wú)法編輯，但可支持將其復(fù)制。文本長(zhǎng)度不受限制，但最好保持簡(jiǎn)短。

保持文本清晰易讀

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

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