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

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

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

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

往期回顧：

以下是正文。

Pickers 選擇器

選擇器包括一列或者多列可滾動(dòng)列表，每列都有一個(gè)選中值，選中值位于中間且顏色更深。通常在用戶編輯字段或點(diǎn)擊菜單后，選擇器出現(xiàn)在屏幕底部或彈窗中。選擇器可內(nèi)聯(lián)顯示（一種函數(shù)調(diào)取方式，例如編輯日期），高度大致是 5 行內(nèi)容，寬度橫跨屏幕或內(nèi)容邊界。

往期回顧：

1. 選項(xiàng)排序要符合用戶預(yù)期

在用戶滾動(dòng)選項(xiàng)列表之前，大多數(shù)選項(xiàng)是被隱藏的。采用符合用戶預(yù)期的排序方式，用戶可快速滑動(dòng)列表并定位到相應(yīng)選項(xiàng)。

2. 不要把選擇器放入另一個(gè)頁面

選擇器應(yīng)該和上下文內(nèi)容緊挨在一起，把選擇器放入另一個(gè)頁面會(huì)疏離兩者的關(guān)聯(lián)關(guān)系，導(dǎo)致用戶產(chǎn)生茫然：「我在哪里？我要干什么？」

3. 如果選項(xiàng)太多，建議使用表格代替選擇器

表格可以增加高度，從而展示更多選項(xiàng)、且可以包含索引（例如通訊錄的字母表索引。關(guān)于表格內(nèi)容，在人機(jī)界面指南界面元素-Views（下）中 Tables 表格視圖中有詳細(xì)介紹），可提升搜索效率。

4. 日期選擇器

日期選擇器可以方便用戶快速選擇特定日期、時(shí)間、日期+時(shí)間，它還提供了顯示倒計(jì)時(shí)器的界面。

四種日期選擇器類型可包含的字段

• 日期：年、月、日
• 時(shí)間：小時(shí)、分鐘、AM/PM（可選）
• 日期+時(shí)間：年、月、日、小時(shí)、分鐘、AM/PM（可選）
• 倒計(jì)時(shí)器：小時(shí)（0-23 時(shí)）、分鐘（0-59 分）

「分鐘」的顆粒度粗細(xì)：默認(rèn)是 60 個(gè)值（0-59 分），也可以是 4 個(gè)值（0 分、15 分、30 分、45 分）

Text Fields 文本框

文本框是單行的輸入框，高度固定（區(qū)別于文本域），一般帶有圓角，點(diǎn)擊后調(diào)出輸入鍵盤。文本框用來向用戶獲取輸入量不大的信息，例如郵件地址。

1. 在文本框內(nèi)展示提示和說明

可在文本框內(nèi)使用占位符來向用戶提示和說明。若已使用占位符，請(qǐng)勿再使用其他文字標(biāo)簽輔助說明。

2. 可在右側(cè)提供「清除」按鈕

點(diǎn)擊「清除」按鈕，文本框內(nèi)字符被一鍵清空?？擅馊ビ脩羰褂幂斎腈I盤的刪除鍵將字符逐個(gè)刪除。

3. 脫敏展示（敏感字段用其他符號(hào)遮擋）

當(dāng)要求用戶輸入敏感數(shù)據(jù)（例如密碼）時(shí)，請(qǐng)?zhí)峁┟撁粽故痉绞焦┯脩暨x擇，以保護(hù)用戶隱私。

4. 圖標(biāo)、按鈕可用來提示用途和展示附加功能

通常左側(cè)放置圖標(biāo)來說明字段用途，右側(cè)放置按鈕來指示附加功能（如「書簽」）。

5. Keyboards輸入鍵盤

系統(tǒng)可根據(jù)輸入字段的內(nèi)容類型，調(diào)取適當(dāng)?shù)逆I盤類型。

Sliders 滑塊

滑塊包括①一條水平軌道，②一個(gè)可以在最小值和最大值之間拖動(dòng)的拇指控件。軌道的左右側(cè)可展示圖標(biāo)，輔助說明最小值和最大值的含義。

1. 外觀可自定義

滑塊的外觀，包括軌道顏色，拇指控件圖片、左右側(cè)圖標(biāo)，都可以自定義。左右兩側(cè)的圖標(biāo)大小可以調(diào)整，例如左小、右大。

2. 不要將滑塊用于調(diào)整音量

如果需要提供音量控件，請(qǐng)使用自定義的音量視圖，其中包括音量滑塊和更換音頻輸出設(shè)備的控件。

Steppers 步進(jìn)器

步進(jìn)器由兩段組成，用來增加或減少某值的大小，默認(rèn)圖標(biāo)是加號(hào)和減號(hào)，也可以根據(jù)場(chǎng)景替換為自定義圖像。

1. 將變量值突出顯示

因?yàn)椴竭M(jìn)器本身不顯示任何值，變量值作為操作反饋需要突出顯示，確保人們知道使用步進(jìn)器時(shí)，值已經(jīng)發(fā)生改變。

2. 如果變動(dòng)范圍很大，不要使用步進(jìn)器

步進(jìn)器適合用在變動(dòng)范圍很小的場(chǎng)景中，例如文件打印份數(shù)。如果變動(dòng)范圍非常大，用戶需要在步進(jìn)器上進(jìn)行連續(xù)大量的點(diǎn)擊，這樣的效率非常低。

按鈕類

1. Buttons 按鈕

按鈕用于啟動(dòng)特定操作，可具有自定義背景，可包含標(biāo)題或者圖標(biāo)。系統(tǒng)提供了一些預(yù)定義的按鈕樣式，適用于大多數(shù)用例場(chǎng)景。您也可以完全自定義按鈕樣式。

System Buttons 系統(tǒng)默認(rèn)按鈕

系統(tǒng)默認(rèn)按鈕常用在導(dǎo)航欄和工具欄中，其他位置也可使用。

關(guān)于按鈕標(biāo)題

• 請(qǐng)使用動(dòng)詞標(biāo)題。動(dòng)詞標(biāo)題表明按鈕的可交互性，并說明點(diǎn)擊后會(huì)發(fā)生什么。
• 使用英文時(shí)要注意首字母大寫（并列連詞和 4 個(gè)字母以下的介詞除外）。
• 保持文案簡(jiǎn)短，文案太長(zhǎng)會(huì)導(dǎo)致頁面擁擠，甚至被截?cái)唷?/li>

視情況添加邊框或背景色

按鈕在默認(rèn)情況下不帶邊框和背景色，可以根據(jù)實(shí)際情況添加邊框和背景色，突出其可點(diǎn)擊的交互隱喻。

Detail Disclosure Buttons 細(xì)節(jié)展開按鈕

點(diǎn)擊細(xì)節(jié)展開按鈕后打開一個(gè)新視圖（通常是模態(tài)視圖），視圖內(nèi)展示附加信息或承載相關(guān)功能。

細(xì)節(jié)展開按鈕沒有被限制使用在何種視圖內(nèi)，不過一般用在表格視圖中，用于查看某行的信息（如下圖所示）。

如果用戶點(diǎn)擊行的任何位置都可以展示附加信息（區(qū)別于點(diǎn)擊按鈕），不要使用細(xì)節(jié)展開按鈕，而是使用細(xì)節(jié)披露按鈕（列表右側(cè)的小箭頭）。

Info Buttons 詳情按鈕

點(diǎn)擊詳情按鈕后展示有關(guān) App 的信息，有時(shí)使用轉(zhuǎn)場(chǎng)動(dòng)效，效果像是翻開當(dāng)前視圖的背面。

詳情按鈕有深色、淺色兩種效果，選擇時(shí)注意不要將按鈕和背景混在一起難以分辨。

Add Contact Buttons 添加聯(lián)系人按鈕

用戶在點(diǎn)擊添加聯(lián)系人按鈕后，可以查看聯(lián)系人列表，還可以選擇將某聯(lián)系人插入文本框或其他視圖中。下圖展示的是按鈕應(yīng)用在郵件 App 中。

注意添加聯(lián)系人按鈕可以作為鍵盤輸入的補(bǔ)充方式，但不要完全取代鍵盤輸入。

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