編輯導(dǎo)讀：iOS是運(yùn)行于iPhone、iPad和iPod touch設(shè)備上、最常用的移動(dòng)操作系統(tǒng)之一。作為互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)者、產(chǎn)品經(jīng)理、體驗(yàn)設(shè)計(jì)師，都應(yīng)當(dāng)理解并熟悉平臺(tái)的設(shè)計(jì)規(guī)范。這有利于提高我們的工作效率，保證用戶良好的體驗(yàn)。本文是iOS設(shè)計(jì)規(guī)范系列第5篇，介紹3大界面要素（欄、視圖、控件）中的控件。

iOS是運(yùn)行于iPhone、iPad和iPod touch設(shè)備上、最常用的移動(dòng)操作系統(tǒng)之一。作為互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)者、產(chǎn)品經(jīng)理、體驗(yàn)設(shè)計(jì)師，都應(yīng)當(dāng)理解并熟悉平臺(tái)的設(shè)計(jì)規(guī)范。這有利于提高我們的工作效率，保證用戶良好的體驗(yàn)。本文是iOS設(shè)計(jì)規(guī)范系列第5篇，介紹3大界面要素（欄、視圖、控件）中的控件（Controls）。首先讓我們回顧一下iOS的3大界面要素。

3大界面要素(Interface Essentials)

大多數(shù)iOS應(yīng)用都是由UI Kit中的組件構(gòu)建的。UI Kit是一種定義通用界面元素的編程框架，這個(gè)框架不僅讓APP在視覺(jué)外觀上保持一致，同時(shí)也為個(gè)性化設(shè)計(jì)留有很大空間。UI Kit提供的界面組件有三類：欄（Bars），視圖（Views），控件（Controls）。

欄（Bars）：

欄，可以告訴用戶在APP中當(dāng)前在所在的位置、能提供導(dǎo)航，還可能包含用于觸發(fā)操作和傳遞信息的按鈕或其他元素。包括6種：導(dǎo)航欄、搜索欄、側(cè)邊欄、狀態(tài)欄、標(biāo)簽欄、工具欄。

視圖（Views）包含用戶在APP中看到的基本內(nèi)容，例如：文本、圖片、動(dòng)畫(huà)以及交互元素。視圖可以具有滾動(dòng)、插入、刪除和排列等交互行為。

控件（Controls）控件，是用于觸發(fā)操作并傳達(dá)信息的。例如：按鈕、開(kāi)關(guān)、文本框和進(jìn)度條，都屬于典型的控件。

iOS的15種控件（Control）

一、按鈕（Buttons）

按鈕常用于觸發(fā)特定操作，可自定義的背景顏色，并且可以包含標(biāo)題或圖標(biāo)。系統(tǒng)為大多數(shù)用例提供了許多預(yù)定義的按鈕樣式。你也可以設(shè)計(jì)自定義按鈕。系統(tǒng)按鈕系統(tǒng)按鈕通常出現(xiàn)在導(dǎo)航欄和工具欄中，也可以在任何地方使用。

1. 在標(biāo)題中使用動(dòng)詞。特定于操作的標(biāo)題顯示按鈕是交互式的，并說(shuō)明單擊該按鈕時(shí)會(huì)發(fā)生什么。
2. 使用標(biāo)題格式命名標(biāo)題。將除了冠詞、并列連詞和四個(gè)或更少字母的介詞之外，每個(gè)單詞首字母都應(yīng)大寫(xiě)。
3. 按鈕標(biāo)題盡量簡(jiǎn)短。太長(zhǎng)的文本可能會(huì)使您的界面擁擠，并可能在較小的屏幕上被截?cái)唷?/li>
4. 只在必要時(shí)添加邊框或背景顏色。默認(rèn)情況下，系統(tǒng)按鈕沒(méi)有邊框或背景。但是，在某些內(nèi)容區(qū)域中，邊框或背景是表示交互性所必需的。在“電話”應(yīng)用程序中，帶邊框的數(shù)字鍵增強(qiáng)了撥打電話的傳統(tǒng)模式，“通話”按鈕的背景提供了易于擊中的醒目的目標(biāo)。

1. 詳情展開(kāi)按鈕

詳情展開(kāi)按鈕可打開(kāi)視圖（通常是模態(tài)視圖），其中包含與屏幕上特定項(xiàng)目相關(guān)的信息或功能。雖然你可以在任何類型的視圖中使用它們，但詳情展開(kāi)按鈕通常是用于列表中，便于用戶訪問(wèn)有關(guān)某行列表的信息。

在列表中適當(dāng)使用詳情展開(kāi)按鈕。當(dāng)列表中有詳情展開(kāi)按鈕時(shí)，點(diǎn)擊該按鈕會(huì)顯示附加信息，點(diǎn)擊其他位置則選擇行或APP的自定義行為。如果你希望用戶點(diǎn)擊整行以查看更多詳細(xì)細(xì)節(jié)，不要使用“詳情展開(kāi)”按鈕，要使用指向性的顯示附件（漸進(jìn)指示器）。

2. 信息按鈕

翻轉(zhuǎn)視圖后，“信息”按鈕可顯示有關(guān)應(yīng)用程序的配置詳細(xì)信息，有時(shí)會(huì)顯示在當(dāng)前視圖的背面。信息按鈕有兩種樣式：淺色和深色。選擇與您的應(yīng)用程序設(shè)計(jì)最匹配且不會(huì)在屏幕上看不清楚的樣式。

3. 添加聯(lián)系人按鈕

用戶可以點(diǎn)擊“添加聯(lián)系人”按鈕來(lái)瀏覽現(xiàn)有聯(lián)系人列表，并選擇一個(gè)要插入到文本字段或其他視圖中的聯(lián)系人。例如，在郵件中，您可以在郵件的“收件人”字段中點(diǎn)擊“添加聯(lián)系人”按鈕，來(lái)從聯(lián)系人列表中選擇收件人。

除了“添加聯(lián)系人”按鈕之外，還應(yīng)該允許鍵盤(pán)輸入?！疤砑勇?lián)系人”按鈕提供了一種替代輸入聯(lián)系人信息的方式，而不是替換方法?？梢詫⑵溆米魈砑蝇F(xiàn)有聯(lián)系人的快捷方式，但也可以讓人們使用鍵盤(pán)輸入聯(lián)系人信息。

二、顏色選擇器（Color Wells）

輕按時(shí)，顏色就會(huì)很好地顯示系統(tǒng)提供的顏色選擇器。人們可以使用顏色選擇器為文本，形狀，標(biāo)記工具和其他元素選擇顏色。

通過(guò)顏色選擇器的選項(xiàng)卡式界面，人們可以從網(wǎng)格或光譜中選擇顏色，也可以通過(guò)選擇RGB值來(lái)選擇顏色。人們還可以通過(guò)點(diǎn)擊吸管按鈕并使用放大鏡來(lái)選擇出現(xiàn)在屏幕上任何地方的顏色，從而選擇一種顏色。

最好使用系統(tǒng)提供的顏色選擇器來(lái)幫助人們選擇顏色。使用內(nèi)置的顏色選擇器可以提供一致的用戶體驗(yàn)，此外還可以使人們保存可以從任何應(yīng)用程序訪問(wèn)的一組顏色。系統(tǒng)定義的顏色選擇器還可以幫助Mac版iPad應(yīng)用程序?yàn)閙acOS用戶提供熟悉的體驗(yàn)。

三、情境菜單（Context Menus）

在iOS 13及更高版本中，你可以使用情境菜單讓用戶訪問(wèn)與APP相關(guān)的其他功能，而不會(huì)使界面混亂。

情境菜單很類似于Peek（輕壓手勢(shì)喚醒）和Pop（重壓手勢(shì)喚醒），但是有兩個(gè)主要區(qū)別：

• 所有運(yùn)行iOS 13及更高版本的設(shè)備都可以使用情境菜單；但Peek和Pop僅適用于支持3D Touch的設(shè)備。
• 情境菜單會(huì)立即彈出與相關(guān)的命令；Peek和Pop則需要向上滑動(dòng)才能查看命令。

用戶可以通過(guò)系統(tǒng)定義的觸摸并按住或3D Touch來(lái)顯示情境菜單，（3D Touch可以使情境菜單更快地顯示）。打開(kāi)時(shí)，情境菜單將顯示該項(xiàng)的預(yù)覽并列出對(duì)其起作用的命令。用戶可以選擇命令或?qū)㈨?xiàng)目拖動(dòng)到另一個(gè)區(qū)域、窗口或應(yīng)用程序。

• 采用一致的上下文菜單。如果你為某些地方的項(xiàng)目提供情境菜單而不是所有項(xiàng)目，用戶將不知道他們到底可以在哪些地方使用該功能，并且可能認(rèn)為是APP有問(wèn)題/Bug。
• 僅包括適用于該項(xiàng)的最常用命令。例如，在郵件的上下文菜單中，顯示用于回復(fù)和移動(dòng)郵件的命令是很有意義的，但如果顯示格式或郵箱命令沒(méi)有意義。列出太多命令可能會(huì)讓人頭昏眼花。
• 在上下文菜單中的每個(gè)命令中都包含一個(gè)標(biāo)志符號(hào)。符號(hào)強(qiáng)化了命令的含義，可以幫助人們立即理解其功能。使用符號(hào)時(shí)可以選擇系統(tǒng)提供的，也可以。如果上下文菜單包含子菜單則不需要，因?yàn)樗鼤?huì)自動(dòng)顯示系統(tǒng)提供的V形符號(hào)，表示存在其他命令。
• 使用子菜單來(lái)管理復(fù)雜性。子菜單是情境菜單的菜單項(xiàng)，顯示邏輯相關(guān)命令的二級(jí)菜單。為子菜單提供直觀的標(biāo)題來(lái)描述它們的內(nèi)容，這樣用戶就可以預(yù)測(cè)子菜單的命令而不必全部顯示出來(lái)。簡(jiǎn)潔、以行動(dòng)為導(dǎo)向的標(biāo)題也使用戶可以跳過(guò)他們?cè)诋?dāng)前語(yǔ)境下不需要的子菜單。
• 將子菜單保持在一個(gè)層級(jí)。雖然子菜單可以縮短情境菜單并說(shuō)明用戶可以執(zhí)行的命令，但是如果子菜單分還幾個(gè)層級(jí)的話會(huì)使得體驗(yàn)變得復(fù)雜，并且讓用戶難以導(dǎo)航。
• 將最常用的項(xiàng)放在情境菜單的頂部。當(dāng)用戶打開(kāi)情境菜單時(shí)，他們的焦點(diǎn)是位于菜單的頂部區(qū)域。將最常用的項(xiàng)應(yīng)該放在菜單頂部，以便用戶及時(shí)找到他們正在尋找的項(xiàng)。
• 使用分隔符對(duì)相關(guān)菜單項(xiàng)進(jìn)行分組。創(chuàng)建可視分組可以幫助用戶更快地瀏覽菜單。例如：你可以使用分隔符對(duì)與需要編輯的相關(guān)的操作項(xiàng)進(jìn)行分組，使用另一個(gè)分隔符對(duì)與共享的相關(guān)操作項(xiàng)進(jìn)行分組。
• 避免為同一項(xiàng)目提供情境菜單和編輯菜單。當(dāng)人用戶為同一個(gè)項(xiàng)目啟用這兩個(gè)功能時(shí)，系統(tǒng)很難檢測(cè)到用戶的真正意圖，這可能會(huì)讓用戶感到困惑。
• 避免提供項(xiàng)目預(yù)覽的操作按鈕。用戶可以通過(guò)點(diǎn)擊打開(kāi)他們正在預(yù)覽的項(xiàng)目，因此通常不需要額外再提供明確的“打開(kāi)”按鈕了。

四、編輯菜單（Edit Menus）

人們可以觸摸并按住或雙擊文本字段，文本視圖，Web視圖或圖像視圖中的元素，以選擇內(nèi)容并顯示諸如復(fù)制和粘貼之類的編輯選項(xiàng)。

• 顯示適用于當(dāng)前上下文的命令。默認(rèn)情況下，這些選項(xiàng)包括“剪切”，“復(fù)制”，“粘貼”，“選擇”，“全選”和“刪除”命令，可以選擇禁用其中任何一個(gè)。如果未選擇任何內(nèi)容，則菜單不應(yīng)顯示需要選擇的選項(xiàng)，例如“復(fù)制”或“剪切”。同樣，如果已經(jīng)選擇了某些菜單，則菜單不應(yīng)包含“選擇”選項(xiàng)。
• 如有必要，可調(diào)整編輯菜單的位置。雖然你無(wú)法更改編輯菜單的形狀，但它的位置是可配置的 – 你可以改變展示位置來(lái)避免它覆蓋重要內(nèi)容或界面的某些部分。
• 不要使用與編輯菜單相同功能的其他控件。提供多種方式來(lái)進(jìn)行相同的操作，會(huì)導(dǎo)致不一致的用戶體驗(yàn)并造成混淆。
• 如果有潛在使用的可能，不能編輯的文本也應(yīng)提供選擇和拷貝。用戶通常希望將靜態(tài)內(nèi)容（例如圖像標(biāo)簽或社交媒體狀態(tài)）拷貝到電子郵件，便箋或網(wǎng)絡(luò)搜索中使用。
• 不要在編輯菜單上加“編輯”按鈕。如果這樣做，用戶很容易誤點(diǎn)，從而導(dǎo)致編輯菜單被取消。
• 讓編輯操作可撤消。在編輯菜單上執(zhí)行操作之前不需要確認(rèn)。但用戶在執(zhí)行操作后可能改變主意，所以始終要實(shí)現(xiàn)撤消和返回功能。
• 使用有用的自定義命令擴(kuò)張編輯選項(xiàng) 。通過(guò)提供特定于應(yīng)用程序的其他命令來(lái)增加菜單的選項(xiàng)，與標(biāo)準(zhǔn)命令一樣，任何自定義命令都可以對(duì)選擇的文本或?qū)ο筮M(jìn)行操作。
• 在系統(tǒng)提供的命令之后顯示自定義命令。不要將自定義命令與系統(tǒng)提供的眾所周知的和經(jīng)常使用的命令混在一起
• 盡量減少自定義命令的數(shù)量。太多的選項(xiàng)反而會(huì)讓人陷入糾結(jié)。
• 自定義命令的標(biāo)題盡量簡(jiǎn)短。命令名稱應(yīng)該是動(dòng)詞或簡(jiǎn)短的動(dòng)詞短語(yǔ)，簡(jiǎn)單地描述了要執(zhí)行的操作即可。

五、標(biāo)簽（Labels）

標(biāo)簽描述了屏幕上的界面元素或提供了一條短消息。盡管人們無(wú)法編輯標(biāo)簽，但他們有時(shí)可以復(fù)制標(biāo)簽的內(nèi)容。標(biāo)簽可以顯示任意數(shù)量的靜態(tài)文本，但最好保持簡(jiǎn)短

保持標(biāo)簽清晰易讀。標(biāo)簽可以包含純文本或樣式文本。如果您調(diào)整標(biāo)簽的樣式或使用自定義字體，請(qǐng)確保不要犧牲易讀性。最好采用動(dòng)態(tài)類型，這樣當(dāng)用戶更改設(shè)備上的文本大小時(shí)，標(biāo)簽的可讀性仍然可以很好。同時(shí)，你還需要在啟用了輔助功能選項(xiàng)的情況下測(cè)試標(biāo)簽，例如粗體文本。

六、頁(yè)面控件（Page Controls）

頁(yè)面控件在平面頁(yè)面列表中顯示當(dāng)前頁(yè)面的位置。它顯示為一系列小指示點(diǎn)，代表按打開(kāi)順序顯示的可用頁(yè)面。實(shí)心點(diǎn)表示當(dāng)前頁(yè)面。從視覺(jué)上看，這些點(diǎn)總是等距的，如果在屏幕上出現(xiàn)太多，則這些點(diǎn)將被裁剪。用戶可以點(diǎn)擊頁(yè)面控件的前端或后端來(lái)訪問(wèn)下一頁(yè)或上一頁(yè)，但是他們不能點(diǎn)擊特定的點(diǎn)來(lái)轉(zhuǎn)到特定的頁(yè)面。導(dǎo)航通常是按順序進(jìn)行的，通常是將頁(yè)面滑動(dòng)到一側(cè)。

• 不要在層級(jí)不同的頁(yè)面之間使用頁(yè)面控件。頁(yè)面控件并不會(huì)顯示頁(yè)面之間的關(guān)聯(lián)或指示哪個(gè)頁(yè)面對(duì)應(yīng)于哪個(gè)點(diǎn)。此類控件僅用于彼此層級(jí)相同的頁(yè)面。
• 不要顯示太多頁(yè)面。超過(guò)大約10個(gè)點(diǎn)很難讓人一目了然，超過(guò)20個(gè)頁(yè)面按順序?yàn)g覽過(guò)去也是非常耗時(shí)的。如果你的應(yīng)用需要顯示超過(guò)20個(gè)頁(yè)面，請(qǐng)考慮使用其他的排列方式 – 例如網(wǎng)格 – 啟用非順序?qū)Ш健?/li>
• 頁(yè)面控件顯示在屏幕底部的中心。頁(yè)面控件應(yīng)始終位于內(nèi)容底部和屏幕底部之間的區(qū)域，并保持居中。這樣即能讓頁(yè)面控件是可見(jiàn)，又不會(huì)遮擋其他內(nèi)容。

七、選擇器（Pickers）

選擇器可以顯示一個(gè)或多個(gè)可滾動(dòng)的不同值列表，供人們選擇。在iOS 14及更高版本中，日期選擇器支持其他選擇值的方式，例如在日歷視圖中選擇日期或使用數(shù)字鍵盤(pán)輸入日期和時(shí)間。兩種類型的選擇器都使人們可以通過(guò)選擇單值或多值來(lái)輕松輸入信息。

• 選項(xiàng)為中長(zhǎng)列表時(shí)，可以考慮使用選擇器。如果需要顯示太短的選項(xiàng)列表，請(qǐng)考慮使用下拉菜單而不是選擇器。盡管選擇器使您可以輕松快速地滾動(dòng)瀏覽許多項(xiàng)目，但它可能會(huì)給一小部分項(xiàng)目增加太多視覺(jué)效果。另外，如果顯示太長(zhǎng)的選項(xiàng)，考慮使用列表或表單。列表和表單的高度可以調(diào)整，并且表單可以包含索引，這可以更快地定位列表的一部分。
• 使用可預(yù)測(cè)的和邏輯排序的值。當(dāng)可滾動(dòng)列表固定時(shí)，選擇器中的許多值可能會(huì)隱藏。最好是人們可以預(yù)測(cè)隱藏的值，例如按字母順序排列的國(guó)家/地區(qū)清單，以便他們可以快速瀏覽各個(gè)項(xiàng)目。
• 避免切換屏幕以顯示選擇器。在正在編輯的字段的下方或附近顯示選擇器效果很好。選擇器通常顯示在屏幕底部或彈出窗口中。

1. 日期選擇器

日期選擇器是用于使用觸摸屏，鍵盤(pán)或定點(diǎn)設(shè)備選擇特定日期，時(shí)間或兩者的有效界面。您可以使用以下樣式之一顯示日期選擇器：

日期選擇器是用于使用觸摸屏，鍵盤(pán)或鼠標(biāo)選擇特定日期、時(shí)間的有效界面。您可以使用以下樣式之一顯示日期選擇器：

• 嵌入式：可編輯的字段，適合于較小的空間（例如列表或表格行），并展開(kāi)以顯示編輯視圖
• 緊湊式：展開(kāi)后可在模態(tài)上下文中顯示編輯視圖的標(biāo)簽
• 滾輪式：傳統(tǒng)的滾輪組

您還可以選擇自動(dòng)樣式，以使系統(tǒng)使用當(dāng)前平臺(tái)和日期選擇器模式來(lái)確定適當(dāng)?shù)娘@示樣式。

日期選擇器具有四種模式，每種模式都呈現(xiàn)一組不同的可選值。

• 日期。顯示月份，月份中的幾天和年份。
• 時(shí)間。顯示小時(shí)，分鐘和（可選）AM / PM名稱。
• 日期和時(shí)間。顯示日期，小時(shí)，分鐘和（可選）AM / PM名稱。
• 倒計(jì)時(shí)器。顯示小時(shí)和分鐘，最多23小時(shí)59分鐘。此模式不適用于緊湊型樣式。

日期選擇器中顯示的確切值及其順序取決于用戶的使用環(huán)境。

當(dāng)空間有限時(shí)，請(qǐng)使用緊湊的日期選擇器。折疊后，緊湊型樣式將顯示一個(gè)按鈕，該按鈕以應(yīng)用程序的主色顯示當(dāng)前值。當(dāng)人們點(diǎn)擊按鈕時(shí)，日期選擇器將擴(kuò)展為模式視圖，從而提供對(duì)熟悉的日歷樣式編輯器和時(shí)間選擇器的訪問(wèn)。在模式視圖中，人們可以對(duì)日期和時(shí)間進(jìn)行多次編輯，然后在視圖外部輕按以確認(rèn)他們的選擇。

指定分鐘數(shù)時(shí)，請(qǐng)考慮提供較小的粒度。默認(rèn)情況下，分鐘列表包含60個(gè)值（0到59）。您可以選擇增加分鐘間隔，只要將其平均分配為60即可。例如，您可能需要四分之一小時(shí)間隔（0、15、30和45）。

八、進(jìn)度指示器（Progress Indicators）

不要讓用戶坐在靜態(tài)屏幕旁等待您的應(yīng)用加載內(nèi)容或執(zhí)行冗長(zhǎng)的數(shù)據(jù)處理操作。使用活動(dòng)指示器和進(jìn)度條可以使人們知道您的應(yīng)用沒(méi)有停止，并讓他們知道他們要等待多長(zhǎng)時(shí)間。

活動(dòng)加載指示（Activity Indicators）：

就是通常我們講的轉(zhuǎn)菊花。當(dāng)執(zhí)行無(wú)法量化的任務(wù)（例如加載或同步復(fù)雜數(shù)據(jù)）時(shí)，加載器會(huì)旋轉(zhuǎn)。任務(wù)完成后它會(huì)消失?；顒?dòng)加載器是不是可交互元素。

• 進(jìn)度條優(yōu)于加載器。如果加載過(guò)程是可量化的，請(qǐng)使用進(jìn)度條而不是加載器，以便用戶可以更好地衡量正在發(fā)生的事情以及需要多長(zhǎng)時(shí)間。
• 保持加載器的轉(zhuǎn)動(dòng)。用戶會(huì)很自然地把靜止的加載器與于APP的卡頓聯(lián)系起來(lái)。讓它旋轉(zhuǎn)，讓用戶知道正在發(fā)生的事情。
• 如果有幫助，請(qǐng)?jiān)谟脩舻却蝿?wù)完成時(shí)為其提供有用的提示信息?？梢栽诩虞d器上方添加標(biāo)簽以提供額外的上下文信息。避免使用模糊的術(shù)語(yǔ)，如加載或驗(yàn)證，因?yàn)樗鼈兺ǔ２粫?huì)增加任何價(jià)值。

進(jìn)度條（Progress Bars）：

進(jìn)度條是一個(gè)從左到右填充的軌道，用以顯示當(dāng)前頁(yè)面的任務(wù)進(jìn)度。進(jìn)度條是非交互式的，但通常伴有用于取消相應(yīng)操作的按鈕。

• 保持進(jìn)度條的準(zhǔn)確性。不要只是為了讓進(jìn)度看起來(lái)很快而顯示不正確的進(jìn)度信息，進(jìn)度條只能用于可量化的任務(wù)。否則請(qǐng)使用加載器（轉(zhuǎn)菊花）。
• 將進(jìn)度條用于持續(xù)時(shí)間明確的任務(wù)。進(jìn)度條非常適合顯示任務(wù)的狀態(tài)，尤其是當(dāng)它幫助傳達(dá)任務(wù)需要完成多長(zhǎng)時(shí)間時(shí)。
• 在導(dǎo)航欄和工具欄中隱藏軌道的未填充部分。默認(rèn)情況下，進(jìn)度條的軌道包含已填充和未填充的部分。當(dāng)在導(dǎo)航欄或工具欄中使用時(shí)，進(jìn)度欄應(yīng)配置為隱藏軌道的未填充部分。
• 進(jìn)度條的外觀可以自定義。可以調(diào)整進(jìn)度條的外觀以匹配APP的設(shè)計(jì)。例如，您可以為軌道填充指定自定義色調(diào)或圖像。

網(wǎng)絡(luò)加載指示（Network Activity Indicators）：

網(wǎng)絡(luò)加載指示在iOS 13和全面屏顯示的設(shè)備上已被棄用。在iOS 12及更早版本中，以及在全面屏顯示的設(shè)備上，網(wǎng)絡(luò)活動(dòng)指示器會(huì)在發(fā)生聯(lián)網(wǎng)時(shí)在屏幕頂部的狀態(tài)欄中旋轉(zhuǎn)，聯(lián)網(wǎng)完成后消失。和活動(dòng)加載指示器樣式一樣，并且是非交互式的。

當(dāng)網(wǎng)絡(luò)加載時(shí)間超過(guò)幾秒時(shí)，才顯示此加載器。加載很快的情況下不要顯示此加載器，因?yàn)樗赡軙?huì)在用戶注意到它之前就消失了。

九、下拉菜單（Pull-Down Menus）

在iOS 14及更高版本中（微信右上角的下拉菜單其實(shí)出現(xiàn)的更早），按鈕可以顯示一個(gè)下拉菜單，其中列出了人們可以選擇的項(xiàng)目或動(dòng)作。您可以使用下拉菜單（以下簡(jiǎn)稱菜單）來(lái)提供與按鈕操作直接相關(guān)的項(xiàng)目，或提供在當(dāng)前上下文中有用的操作列表。

與操作表、上下文菜單和彈出菜單相比，菜單提供了多個(gè)優(yōu)勢(shì)。

例如：

• 菜單會(huì)在顯示該按鈕的按鈕附近打開(kāi)，因此人們可以立即了解菜單項(xiàng)與他們正在執(zhí)行的動(dòng)作之間的關(guān)系。
• 除了列出動(dòng)作之外，菜單還可以提供可供人們用來(lái)影響主要?jiǎng)幼鞯倪x擇。
• 菜單可以快速生成動(dòng)畫(huà)，并且在菜單出現(xiàn)時(shí)不會(huì)使屏幕變暗，從而使過(guò)渡效果和總體體驗(yàn)更加輕盈。

不要將所有操作都放在菜單中。菜單可讓您提供一系列項(xiàng)目，而不會(huì)弄亂您的界面，但是將所有操作置于菜單中意味著用戶必須至少點(diǎn)擊兩次才能執(zhí)行任何操作。將最重要的操作放在主界面中，使用菜單提供補(bǔ)充項(xiàng)目。

使用菜單顯示與操作直接相關(guān)的選項(xiàng)。通過(guò)菜單，您可以在無(wú)需向主界面添加按鈕的情況下為用戶提供澄清動(dòng)作目標(biāo)或自定義動(dòng)作行為的方法。例如：

當(dāng)用戶點(diǎn)擊應(yīng)用中的“添加”按鈕時(shí)，您可以顯示一個(gè)菜單，讓用戶指定要添加的項(xiàng)目。

如果您的應(yīng)用支持排序，則可以使用菜單讓用戶選擇要進(jìn)行排序的屬性。

在允許在多個(gè)位置之間導(dǎo)航的應(yīng)用程序中，菜單可以使用戶導(dǎo)航到特定位置，而不用追溯每個(gè)步驟。使用菜單提供輔助應(yīng)用操作。如果您的應(yīng)用程序包含不屬于主界面的基本操作，則可以將這些操作分組在菜單中。例如，“文件”除了查看和排序內(nèi)容的選項(xiàng)外，還使用菜單提供諸如添加文件夾或掃描文檔之類的操作。

考慮用“更多”按鈕來(lái)顯示菜單。“更多”按鈕可以與大多數(shù)界面很好地集成在一起，用戶也能夠理解點(diǎn)擊它可以訪問(wèn)其他功能。通常的樣式是三個(gè)點(diǎn)放在圓形按鈕中來(lái)表示“更多”?；蛘?，您可以通過(guò)在現(xiàn)有按鈕上執(zhí)行特定手勢(shì)來(lái)讓人們顯示菜單。

使用分隔符以可視方式對(duì)相關(guān)菜單項(xiàng)進(jìn)行分組。創(chuàng)建視覺(jué)分組可以幫助人們更快地掃描菜單。例如，“文件”應(yīng)用程序中的“更多”菜單使用分隔符來(lái)幫助用戶快速的查看和排序項(xiàng)目。不過(guò)分組不要大于三個(gè)，否則不容易辨認(rèn)。

讓用戶知道菜單項(xiàng)何時(shí)具有破壞性，并要求用戶二次確認(rèn)。菜單使用紅色文本突出顯示潛在破壞性的操作。當(dāng)人們選擇破壞性操作時(shí)，系統(tǒng)會(huì)顯示一個(gè)操作表（iOS）或彈出框（iPadOS），他們可以在其中確認(rèn)選擇或取消該操作。由于操作表出現(xiàn)在與菜單不同的位置并且需要有意地撤消，因此它可以幫助人們避免誤操作。

考慮在菜單項(xiàng)中包含標(biāo)志符號(hào)。如果需要澄清項(xiàng)目的含義，可以在其標(biāo)題后顯示標(biāo)志符號(hào)或圖像。使用系統(tǒng)符號(hào)可以使用戶得到熟悉的體驗(yàn)，同時(shí)確保該符號(hào)在各個(gè)比例下均與文本保持對(duì)齊。

顯示菜單標(biāo)題（如果添加含義）。在大多數(shù)情況下人們會(huì)理解菜單項(xiàng)的上下文，因?yàn)楫?dāng)他們點(diǎn)擊按鈕執(zhí)行操作時(shí)菜單會(huì)立即顯示。如有必要，你可以在菜單頂部提供簡(jiǎn)潔的標(biāo)題。

十、刷新控件（Refresh Content Controls）

手動(dòng)啟動(dòng)刷新控件會(huì)立即重新加載內(nèi)容（通常在表視圖中），而無(wú)需等待下一次自動(dòng)內(nèi)容更新發(fā)生。刷新控件是活動(dòng)加載指示器的一種特殊類型，默認(rèn)情況下處于隱藏狀態(tài)，并在向下拖動(dòng)要重新加載的視圖時(shí)可見(jiàn)。例如，在“郵件”中，您可以將“收件箱”郵件列表向下拖動(dòng)以檢查是否有新郵件。

執(zhí)行自動(dòng)內(nèi)容更新。不要讓用戶手動(dòng)發(fā)起每個(gè)更新。定期主動(dòng)更新數(shù)據(jù)，保持?jǐn)?shù)據(jù)的時(shí)效性。

有必要時(shí)才為刷新提供簡(jiǎn)短標(biāo)題?？梢詾樗⑿驴丶右粋€(gè)標(biāo)題。但在大多數(shù)情況下，這是沒(méi)有必要的，因?yàn)樗⑿驴丶膭?dòng)效就很明確地表明了內(nèi)容正在加載。

十一、分段控件（Segmented Controls）

分段控件是兩個(gè)或多個(gè)分段的線性集合，每個(gè)分段都充當(dāng)一個(gè)互斥按鈕。在控件內(nèi)，所有段的寬度均相等。像按鈕一樣，句段可以包含文本或圖像。分段控件通常用于顯示不同的視圖。

限制段的數(shù)量以提高可用性。越寬的段越容易點(diǎn)擊。在iPhone上，分段控件應(yīng)該控制在5個(gè)或5個(gè)以下。

盡量讓段內(nèi)容大小一致。所有段的寬度都是相同的，如果段內(nèi)容（例如段的標(biāo)題）長(zhǎng)度或大小不一致，則分段控件看起來(lái)會(huì)很不協(xié)調(diào)。

分段控件中不要同時(shí)包含文本和圖像。雖然段可以包含文本或圖像，但將兩者被混合在一個(gè)控件中可能會(huì)導(dǎo)致界面混亂讓人難以理解。

若自定義分段控件，請(qǐng)保證內(nèi)容協(xié)調(diào)。若要更改（自定義）分段控件的視覺(jué)樣式，請(qǐng)確保內(nèi)容看起來(lái)協(xié)調(diào)可讀并且對(duì)齊。

十二、滑桿（Sliders）

滑塊是帶有一個(gè)稱為“拇指”控件的水平軌道，你可以用手指滑動(dòng)該控件以在最小值和最大值之間移動(dòng)，例如屏幕亮度的調(diào)節(jié)或媒體文件播放期間的位置調(diào)節(jié)。

當(dāng)滑塊的值發(fā)生變化時(shí)，最小值和拇指之間的軌道部分會(huì)填充顏色?；瑝K的左右位置好可以展示圖標(biāo)，來(lái)說(shuō)明最小值和最大值的含義。

如有必要，可以自定義滑塊的外觀。為了與你的設(shè)計(jì)風(fēng)格融合并且更準(zhǔn)確地傳達(dá)設(shè)計(jì)意圖，滑塊的外觀是可以更改的，包括軌道顏色、“拇指”圖標(biāo)以及左右位置的圖標(biāo)。

不要使用滑塊來(lái)調(diào)節(jié)音量。如果你的APP需要提供音量控制，請(qǐng)使用音量視圖。音量視圖是可以自定義的，其中包括音量視圖的滑塊和用于改變音頻輸出設(shè)備的控件。

十三、步進(jìn)器（Steppers）

步進(jìn)器是用于增加或減少增量值的兩段式控件。默認(rèn)情況下，步進(jìn)器的一個(gè)段顯示加號(hào)，另一個(gè)段顯示減號(hào)。如果需要，可以自定義步進(jìn)器或替換這些圖標(biāo)。

確保隨著步進(jìn)器變化的值清晰可見(jiàn)。步進(jìn)器本身不展示任何值，因此請(qǐng)確保用戶知道，使用步進(jìn)器時(shí)它們正在改變哪個(gè)值。

不要使用步進(jìn)器調(diào)整較大數(shù)量級(jí)的值。調(diào)整小數(shù)量級(jí)的值時(shí)，使用步進(jìn)器是很合適的。例如，在打印頁(yè)面上，使用步進(jìn)器設(shè)置份數(shù)效果是很好的，因?yàn)橛脩艉苌賹?duì)份數(shù)設(shè)置進(jìn)行更改。

另外，不要用使用步進(jìn)器選來(lái)?yè)耥?yè)面范圍，因?yàn)檫@需要大量的點(diǎn)擊。

十四、開(kāi)關(guān)（Switchs）

開(kāi)關(guān)主要用于兩個(gè)互斥狀態(tài)之間的視覺(jué)切換。

自定義開(kāi)關(guān)的視覺(jué)樣式，使它與你的設(shè)計(jì)更協(xié)調(diào)。根據(jù)設(shè)計(jì)風(fēng)格，自定義開(kāi)關(guān)在其關(guān)閉和打開(kāi)時(shí)的背景顏色，可以使開(kāi)關(guān)在APP中的體驗(yàn)更好。

僅在列表中使用開(kāi)關(guān)。開(kāi)關(guān)用在列表中，例如可以打開(kāi)和關(guān)閉的設(shè)置列表。如果你需要工具欄或?qū)Ш綑谥惺褂妙愃乒δ埽?qǐng)改用按鈕，并提供兩個(gè)不同的圖標(biāo)來(lái)傳達(dá)不同的狀態(tài)。

避免在開(kāi)關(guān)中添加說(shuō)明標(biāo)簽。關(guān)于開(kāi)關(guān)的打開(kāi)或關(guān)閉，用戶是很明確的。額外的提供文本標(biāo)簽描述開(kāi)關(guān)狀態(tài)是多余的，還會(huì)使界面混亂不堪。

可以用開(kāi)關(guān)來(lái)管理相關(guān)界面元素的可用性。開(kāi)關(guān)通常會(huì)影響屏幕上的其他內(nèi)容。例如，在“設(shè)置”中打開(kāi)“飛行模式”開(kāi)關(guān)會(huì)禁用其他功能/設(shè)置。

十五、文本框（Text Fields）

文本輸入框是單行且固高度固定的區(qū)域，通常帶有圓角，當(dāng)用戶點(diǎn)擊它時(shí)會(huì)自動(dòng)彈出鍵盤(pán)。使用文本輸入框來(lái)輸入少量信息，例如電子郵件地址。

在文本輸入框中顯示必要的提示，以幫助用戶更好的輸入。當(dāng)輸入框中沒(méi)有其他文本時(shí)，文本輸入框可以包含占位符文本。

適當(dāng)時(shí)侯，在文本輸入框的右端顯示“清除”按鈕。若有“清除”按鈕，點(diǎn)擊它便會(huì)立即清空文本字段的內(nèi)容，避免一直點(diǎn)擊刪除。

適當(dāng)時(shí)候，使用安全文本字段。若需要輸入的是敏感數(shù)據(jù)（如密碼）時(shí)，請(qǐng)始終使用安全提示類的文本字段。

使用圖像和按鈕在文本字段中提供清晰度和功能。可以在文本輸入框的左側(cè)或右側(cè)顯示自定義圖標(biāo)，也可以添加系統(tǒng)提供的按鈕，例如“書(shū)簽”按鈕。

鍵盤(pán)：

根據(jù)實(shí)際情況，顯示適當(dāng)?shù)逆I盤(pán)類型。iOS提供了幾種不同的鍵盤(pán)類型，每種鍵盤(pán)都用于方便不同文本類型的輸入。當(dāng)用戶在輸入文本時(shí)，根據(jù)輸入的文本類型顯示相應(yīng)的鍵盤(pán)類型，可以簡(jiǎn)化數(shù)據(jù)輸入。例如：如果用戶需要填寫(xiě)電子郵件地址，則應(yīng)顯示郵件鍵盤(pán)。

本文介紹了3大界面要素中的控件（Controls），參考資料Apple Developer-Human Interface Guidelines。下一篇介紹用戶交互（User Interaction）。

相關(guān)閱讀：

最新iOS平臺(tái)設(shè)計(jì)規(guī)范一｜3大主旨和6大原則

最新iOS平臺(tái)設(shè)計(jì)規(guī)范二｜7大應(yīng)用架構(gòu)

最新iOS平臺(tái)設(shè)計(jì)規(guī)范三｜3大界面要素：欄(Bars)

最新iOS平臺(tái)設(shè)計(jì)規(guī)范四｜3大界面要素：視圖(Views)

#專欄作家#

曉吾，微信公眾號(hào)：體驗(yàn)主義，人人都是產(chǎn)品經(jīng)理專欄作家。騰訊高級(jí)交互設(shè)計(jì)師，前創(chuàng)新工場(chǎng)、新浪微博交互設(shè)計(jì)師。專注社交創(chuàng)新與娛樂(lè)產(chǎn)品設(shè)計(jì)。

本文由 @曉吾 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議