無論是UI、交互，還是產品經理，都應該熟讀iOS平臺設計規范。這對我們的產品設計，百利而無一弊。

? ?控件(Controls)

一、按鈕(Buttons)

按鈕常用于觸發特定操作，可自定義的背景顏色，并且可以包含標題或圖標。系統為大多數用例提供了許多預定義的按鈕樣式。你也可以設計自定義按鈕。

系統按鈕

系統按鈕通常出現在導航欄和工具欄中，也可以在任何地方使用。

? ? ? ?

1、在標題中使用動詞

一個特定動作的操作按鈕標題，可以間接告訴用戶按鈕是可交互的，并說明點擊它的結果。

2、使用標題格式命名標題

將除了冠詞、并列連詞和四個或更少字母的介詞之外，每個單詞首字母都應大寫。(中文下的APP幾乎不存在這個問題)

3、按鈕標題盡量簡短

過長的文本會占用界面過多空間，顯得擁擠，而且在較小的屏幕上可能會顯示不全。

4、只在必要時添加邊框或背景顏色

默認情況下，系統按鈕沒有邊框或背景。然而，在某些內容區域中，通過邊界或背景表示按鈕的交互性也是有必要的。

例如：在電話APP中，帶邊框的數字鍵加強了傳統的撥打電話模式，而“呼叫”按鈕突出的背景顏色使按鈕更引人注意，更易點擊。

詳情展開按鈕

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

? ? ? ?? ? ? ?

在列表中適當使用詳情展開按鈕。當列表中有詳情展開按鈕時，點擊該按鈕會顯示附加信息，點擊其他位置則選擇行或APP的自定義行為。如果你希望用戶點擊整行以查看更多詳細細節，請不要使用“詳情展開”按鈕。相反，可以使用指向性的顯示附件(如箭頭)。

信息按鈕

信息按鈕會顯示有關App配置的詳細信息，有時會在下一頁展示，有時以彈出窗口的形式展示。

? ? ??? ? ? ?

信息按鈕有兩種風格 - 淺色和深色。選擇與你的設計最適合的樣式，且不會在頁面上被看不清楚的樣式。

添加聯系人按鈕

用戶可以點擊“添加聯系人”按鈕來瀏覽現有聯系人列表，并選擇一個用于插入文本字段或其他視圖的列表。例如，在郵件APP中，你可以點擊郵件“收件人”字段中的“添加聯系人”按鈕，從聯系人列表中選擇收件人。

? ? ? ?

除“添加聯系人”按鈕外，應同時允許鍵盤輸入。“添加聯系人”按鈕只是為鍵入聯系人信息提供了一種形式，而不是替代方法。可以將它作為添加現有聯系人的快捷方式，但同時也要讓用戶可以通過鍵盤輸入聯系人信息。

二、情境菜單(Context Menus)

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

? ? ? ?? ? ? ?

情境菜單類似于Peek(輕壓手勢喚醒)和Pop(重壓手勢喚醒)，有兩個主要區別：

• 所有運行iOS 13及更高版本的設備都可以使用情境菜單；但Peek和Pop僅適用于支持3D Touch的設備。

• 情境菜單會立即彈出與相關的命令；Peek和Pop則需要向上滑動才能查看命令。

用戶可以通過系統定義的觸摸并按住或3D Touch(只是3D Touch可以使情境菜單更快地顯示)，來顯示情境菜單。打開時，情境菜單將顯示該項的預覽并列出對其起作用的命令。用戶可以選擇命令或將項目拖動到另一個區域、窗口或應用程序。

1、一致采用情境菜單

如果你為某些地方的項目提供情境菜單而不是所有項目，用戶將不知道他們到底可以在哪些地方使用該功能，并且可能認為是APP有問題/Bug。

2、僅包括適用于該項的最常用命令

例如，在郵件的上下文菜單中，顯示用于回復和移動郵件的命令是很有意義的，但如果顯示格式或郵箱命令沒有意義。列出太多命令可能會讓人頭昏眼花。

3、使用子菜單來管理復雜性

子菜單是情境菜單的菜單項，顯示邏輯相關命令的二級菜單。為子菜單提供直觀的標題來描述它們的內容，這樣用戶就可以預測子菜單的命令而不必全部顯示出來。簡潔、以行動為導向的標題，同時允許用戶跳過他們在當前環境中不需要的子菜單。

4、將子菜單保持在一個層級

雖然子菜單可以縮短情境菜單并說明用戶可以執行的命令，但是如果子菜單都不在一個層級使得體驗變得復雜，并且讓用戶難以導航。

5、將最常用的項放在情境菜單的頂部

當用戶打開情境菜單時，他們的焦點是位于菜單的頂部區域。將最常用的項應該放在菜單頂部，以便用戶及時找到他們正在尋找的項。

6、使用分隔符對相關菜單項進行分組

創建可視分組可以幫助用戶更快地瀏覽菜單。例如：你可以使用分隔符對與需要編輯的相關的操作項進行分組，使用另一個分隔符對與共享的相關操作項進行分組。通常，用戶不希望情境菜單的分組超過三個。

7、避免為同一項目提供情境菜單和編輯菜單

當人用戶為同一個項目啟用這兩個功能時，系統很難檢測到用戶的真正意圖，這可能會讓用戶感到困惑。

8、避免提供項目預覽的操作按鈕

用戶可以通過點擊打開他們正在預覽的項目，因此通常不需要額外再提供明確的“打開”按鈕了。

三、編輯菜單(Edit Menus)

用戶可以觸摸并按住或雙擊文本字段、文本視圖、網頁視圖或圖像視圖中的元素，來選擇內容，并彈出編輯內容的操作選項，例如復制和粘貼。

? ? ? ? ? ? ?

1、為當前內容提供的相應命令

默認情況下，命令選項包括剪切、拷貝、粘貼、選擇、全選以及刪除，其中任何命令都可以被禁用。如果未選擇任何內容，則編輯菜單應該禁用需要用到選擇的選項，例如“拷貝”或“剪切”。同理，如果已選擇某些內容，則菜單應禁用“選擇”選項。(見下圖對比)

?? ? ?? ? ? ?

2、如有必要，可調整編輯菜單的位置

默認情況下，根據可用空間，菜單位于插入點/選擇的上方或下方，并包含指向相關內容的箭頭。雖然你無法更改編輯菜單的形狀，但它的位置是可配置的 - 你可以改變展示位置來避免它覆蓋重要內容或界面的某些部分。

3、不要使用與編輯菜單相同功能的其他控件

提供多種方式來進行相同的操作，會導致不一致的用戶體驗并造成混淆。例如：如果允許用戶通過編輯菜單來拷貝內容，就不要再添加一個復制按鈕。

4、不能編輯文本也應允許選擇和拷貝

用戶通常希望將靜態內容(例如圖像標簽或社交媒體狀態)拷貝到電子郵件，便箋或網絡搜索中使用。

5、不要在編輯菜單上加“編輯”按鈕

如果這樣做，用戶很容易誤點，從而導致編輯菜單被取消。

6、讓編輯操作可撤消

在編輯菜單上執行操作之前不需要確認。但用戶在執行操作后可能改變主意，所以始終要實現撤消和返回功能。

7、使用有用的自定義命令擴張編輯選項?

通過提供特定于應用程序的其他命令來增加菜單的選項，與標準命令一樣，任何自定義命令都可以對選擇的文本或對象進行操作。

8、當系統提供的命令滿足不了需求時，才考慮自定義命令

不要嘗試用自定義命令替代系統提供的命令，因為這些命令是眾所周知且經常使用的。

9、盡量減少自定義命令的數量

太多的選項反而會讓人陷入糾結。

10、自定義命令的標題盡量簡短

命令名稱應該是動詞或簡短的動詞短語，簡單地描述了要執行的操作即可。

四、標簽(Labels)

標簽用來描述屏幕中的界面元素或提供短消息。雖然用戶無法編輯標簽，但他們有時可以復制標簽的內容。標簽可以顯示任意數量的靜態文本，但盡量保持言簡意賅。

? ? ? ?? ? ? ??

保持標簽清晰。標簽可以包含各種樣式的文本。如果你需要調整標簽的樣式或使用自定義字體，請確保文本的可讀性和易讀性。

最好采用動態類型，這樣當用戶在其設備上更改文本大小時，標簽的可讀性仍然可以很好。同時，你還需要在啟用了輔助功能選項的情況下測試標簽，例如粗體文本。

五、頁面控件(Page Controls)

頁面控件主要用來顯示當前頁面在一系列頁面中的所處位置。即一系列小小的指示圓點，代表一系列可用頁面的順序。實心點則表示當前頁面。

在視覺上，這些點總是等距的，并且如果在頁面上出現太多則會顯示不全。用戶可以點擊頁面控件的左邊或右邊來訪問上一頁或下一頁，但是無法點擊特定圓點來轉到特定頁面。導航也總是按順序發生，通常是順著手勢滑動的方向將頁面滑動到某一側。

? ? ? ? ? ? ?

1、不要在層級不同的頁面之間使用頁面控件

頁面控件并不會顯示頁面之間的關聯或指示哪個頁面對應于哪個點。此類控件僅用于彼此層級相同的頁面。

2、不要顯示太多頁面

超過大約10個點很難讓人一目了然，超過20個頁面按順序瀏覽過去也是非常耗時的。如果你的應用需要顯示超過20個頁面，請考慮使用其他的排列方式 - 例如網格 - 啟用非順序導航。

3、頁面控件顯示在屏幕底部的中心

頁面控件應始終位于內容底部和屏幕底部之間的區域，并保持居中。這樣即能讓頁面控件是可見，又不會遮擋其他內容。

六、選擇器(Pickers)

選擇器顯示為一個或多個不同值的可滾動列表，每個列表都可以選擇一個值 - 選中的通常以文字深色加粗的形式突出顯示。當用戶編輯字段或點擊菜單時，選則器通常出現在屏幕底部或彈出窗口中。

選擇器也可以以內部嵌入的方式顯示，例如在日歷事件中編輯日期時。選擇器的高度大致是五行列表的高度。選擇器的寬度可以是屏幕的寬度，也可以是封閉視圖，具體取決于設備和上下文。

? ? ? ? ? ? ?

1、使用可預測、合理有序的值

當選擇器列表靜止時，很多值可能會被隱藏。所以列表中的值最好是可預測的，例如使用按字母順序排列的國家/地區列表，這樣他們就可以快速瀏覽列表。

2、避免切換頁面來顯示選擇器

選擇器顯示在正在編輯的字段下方或附近，是最為合適的。

3、如果很多值的話，使用列表而不是選擇器

太長的列表在選擇器中選擇起來，可能會很繁瑣。而列表即可以適當調整行高，還可以包含索引圖標，而且滾動速度比選擇器更快。

日期選擇器

日期選擇器是用于選擇特定日期、時間或兩者兼顧的界面交互。同時，它還提供了一個顯示倒計時的交互接口。

? ? ? ?? ? ? ?

日期選擇器有四種模式，每種模式都有一組不同的可選值。

• 日期：顯示年、月、日

• 時間：顯示小時、分鐘和 AM/PM(可選)。

• 日期和時間：顯示年、月、日、小時、分鐘和 AM / PM(可選)。

• 倒計時器：顯示小時、分鐘，最長23小時59分鐘。

日期選擇器中顯示的具體的值，及其順序取決于用戶設備的區域設置。

在指定分鐘時，提供較少顆粒度。默認情況下，分鐘列表包含60個值(0到59)。你可以選擇增加分鐘間隔，只要它均勻分為60即可。例如，你可能需要每隔一小時的間隔(0、15、30和45)。

七、進度指示器(Progress Indicators)

不要讓用戶長時間盯著靜止的屏幕上，來等待加載內容或執行冗長的數據處理操作。使用加載器和進度條讓用戶知道你的APP并沒有停止，最好讓他們知道大概需要等待多長時間。

加載器

當執行無法量化的任務(例如加載或同步復雜數據)時，加載器會旋轉。任務完成后它會消失。加載器是不是可交互元素。

?? ? ??? ? ? ?

1、進度條優于加載器

如果加載過程是可量化的，請使用進度條而不是加載器，以便用戶可以更好地衡量正在發生的事情以及需要多長時間。

2、保持加載器的轉動

用戶會很自然地把靜止的加載器與于APP的卡頓聯系起來。讓它旋轉，讓用戶知道正在發生的事情。

3、如果有幫助，請在用戶等待任務完成時為其提供有用的提示信息

可以在加載器上方添加標簽以提供額外的上下文信息。避免使用模糊的術語，如加載或驗證，因為它們通常不會有任何幫助。

進度條

進度條是一個從左到右填充的軌道，用以顯示當前頁面的任務進度。進度條是非交互式的，但通常伴有用于取消相應操作的按鈕。

?? ? ??? ? ? ?

1、保持進度條的準確性

請勿顯示不準確的進度信息，不要僅僅為了讓加載看起來很快而顯示不準確的進度信息。只能對可量化的任務使用進度條。否則，使用加載器。

2、對可量化時間的任務使用進度條

進度條非常適合顯示任務的當前狀態，特別是當它有助于傳達任務需要完成的時間時。

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

默認情況下，進度條的軌道包括已填充和未填充的部分。在導航欄或工具欄中使用時，例如表示頁面加載，應配置進度條來隱藏軌道的未填充部分。

4、自定義進度條的樣式

為了與APP的設計風格協調，你可以自定義進度條的樣式。例如，為軌道的填充指定自定義顏色或圖像。

網絡加載器

當網絡進行加載時，網絡加載器會出現在屏幕頂部的狀態欄中并旋轉，當網絡加載完成后，它自動會消失。該圖標看起來就像是一個加載器，并且也是非交互式的。

?? ? ??? ? ? ?

當網絡加載時間超過幾秒時，才顯示此加載器。加載很快的情況下不要顯示此加載器，因為它可能會在用戶注意到它之前就消失了。

八、刷新控件(Refresh Content Controls)

刷新控件被手動啟動后，對當前內容進行重新加載，無需等待內容自動更新，通常應用于列表視圖中。

刷新控件是一種特殊加載器，默認情況下是隱藏的，在向下拖動且需要重新加載內容時才變為可見。例如，在Mail中，向下拖動收件箱郵件列表可以檢查是否有新郵件。

? ? ? ? ? ? ?

1、執行自動內容更新

雖然用戶覺得手動刷新內容很不錯，但他們更希望內容會定期進行自動刷新。不要讓用戶手動發起每個更新。定期主動更新數據，保持數據的時效性。

2、有必要時才為刷新提供簡短標題

可以為刷新控件加一個標題。但在大多數情況下，這是沒有必要的，因為刷新控件的動效就很明確地表明了內容正在加載。如果真的有加標題的需求，請用它來解釋如何進行刷新。而是提供有關正在刷新的內容的有價值信息。

例如：播客APP中的刷新控件使用標題來告知用戶上次播客更新的時間。

九、分段控件(Segmented Controls)

分段控件是兩個或更多個段的線性集合，每個段是互斥的，不可同時存在的。在控件內，所有段的寬度相等。與按鈕一樣，段也可以包含文本或圖像。分段控件通常用于展示不同的視圖。

例如：在地圖APP中，分段控件可讓你在Map、Transit和Satellite視圖之間切換。

? ? ? ? ? ? ?

1、限制段的數量以提高可用性

越寬的段越容易點擊。在iPhone上，分段控件應該控制在5個或5個一以下的段。

2、盡量讓段內容大小一致

所有段的寬度都是相同的，如果段內容(例如段的標題)長度或大小不一致，則分段控件看起來會很不協調。

3、分段控件中不要同時包含文本和圖像

雖然段可以包含文本或圖像，但將兩者被混合在一個控件中可能會導致界面混亂讓人難以理解。

4、若自定義分段控件，請爆出內容協調

若要更改(自定義)分段控件的視覺樣式，請確保內容看起來協調可讀并且對齊。

Wi-Fi”中關閉“Wi-Fi”，會導致“可用網絡”和“其他”列表消失。\n十三、文本輸入框(Text fFields)"],[20,"\n","32:1"],[20,"文本輸入框是單行且固高度固定的區域，通常帶有圓角，當用戶點擊它時會自動彈出鍵盤。使用文本輸入框來輸入少量信息，例如電子郵件地址。\n\n"],[20,{"gallery":"https://uploader.shimo.im/f/K447guGowuo0Ipqm.png!thumbnail"},"29:0|30:0|3:\"4800\"|4:\"auto\"|crop:\"\"|frame:\"none\"|ori-height:\"2520\"|ori-width:\"4800\""],[20,"\n1、在文本輸入框中顯示必要的提示，以幫助用戶更好的輸入"],[20,"\n","32:3"],[20,"當輸入框中沒有其他文本時，文本輸入框可以包含占位符文本 - 例如“電子郵件”或“密碼” 。當有足夠的控件放占位符文本時，請勿使用單獨的標簽來描述文本輸入框。\n2、適當時侯，在文本輸入框的右端顯示“清除”按鈕"],[20,"\n","32:3"],[20,"若有“清除”按鈕，點擊它便會立即清空文本字段的內容，從而用戶完全不必一直繼續點擊Delete鍵來刪除。\n3、適當時候，使用安全文本字段"],[20,"\n","32:3"],[20,"若需要輸入的是敏感數據(如密碼)時，請始終使用安全提示類的文本字段。\n4、使用圖像和按鈕在文本字段中提供清晰度和功能"],[20,"\n","32:3"],[20,"可以在文本輸入框的左側或右側顯示自定義圖標，也可以添加系統提供的按鈕，例如“書簽”按鈕。通常，使用文本輸入框的左端來說明文本輸入框的用途或目的，使用其右端來放置其他附加功能，例如書簽。\n鍵盤"],[20,"\n","32:2"],[20,{"gallery":"https://uploader.shimo.im/f/hjGpOPZwcf0vAOjt.png!thumbnail"},"29:0|30:0|3:\"4800\"|4:\"auto\"|crop:\"\"|frame:\"none\"|ori-height:\"2580\"|ori-width:\"4800\""],[20,"\n\n"],[20,"根據實際情況，顯示適當的鍵盤類型。","27:\"12\"|8:1"],[20,"iOS提供了幾種不同的鍵盤類型，每種鍵盤都用于方便不同文本類型的輸入。當用戶在輸入文本時，根據輸入的文本類型顯示相應的鍵盤類型，可以簡化數據輸入。例如：如果用戶需要填寫電子郵件地址，則應顯示郵件鍵盤"],[20,"(見上圖)","0:\"%23a5a5a5\""],[20,"。\n"]]">

十、滑塊(Sliders)

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

當滑塊的值發生變化時，最小值和拇指之間的軌道部分會填充顏色。滑塊的左右位置好可以展示圖標，來說明最小值和最大值的含義。

? ? ? ? ? ? ?

1、如有必要，可以自定義滑塊的外觀

為了與你的設計風格融合并且更準確地傳達設計意圖，滑塊的外觀是可以更改的，包括軌道顏色、“拇指”圖標以及左右位置的圖標。

例如：可以調整左右位置圖標的大小，在左側顯示一個小圖像圖標，而在右側顯示一個大圖像圖標。

2、不要使用滑塊來調節音量

如果你的APP需要提供音量控制，請使用音量視圖，音量視圖是可以自定義的，其中包括音量視圖的滑塊和用于改變音頻輸出設備的控件。

十一、步進器(Steppers)

步進器是用于增加或減少增量值的兩段式控件。默認情況下，步進器的一個段顯示加號，另一個段顯示減號。

如果需要，可以自定義步進器或替換這些圖標。

? ? ? ?

1、確保隨著步進器變化的那個值，清晰可見

步進器本身不展示任何值，因此請確保用戶知道，使用步進器時它們正在改變哪個值。

2、不要使用步進器調整較大數量級的值

調整小數量級的值時，使用步進器是很合適的。例如，在打印頁面上，使用步進器設置份數效果是很好的，因為用戶很少對份數設置進行更改。

另外，使用步進器選來擇頁面范圍是沒有意義的，因為即使一個合理的頁面范圍也需要大量的點擊。

十二、開關(Switchs)

開關主要用于兩個互斥狀態之間的視覺切換。

?? ? ????

1、自定義開關的視覺樣式，使它與你的設計更協調

根據設計風格，自定義開關在其關閉和打開時的背景顏色，可以使開關在APP中的體驗更好。

2、僅在列表中使用開關

開關用在列表中，例如可以打開和關閉的設置列表。如果你需要工具欄或導航欄中使用類似功能，請改用按鈕，并提供兩個不同的圖標來傳達不同的狀態。

3、避免在開關中添加說明標簽

關于開關的打開或關閉，用戶是很明確的。額外的提供文本標簽描述開關狀態是多余的，還會使界面混亂不堪。

4、可以用開關來管理相關界面元素的可用性

開關通常會影響屏幕上的其他內容。

例如，在“設置”中打開“飛行模式”開關會禁用其他功能/設置，例如“蜂窩”和“個人熱點”。在“設置>Wi-Fi”中關閉“Wi-Fi”，會導致“可用網絡”和“其他”列表消失。

十三、文本輸入框(Text Fields)

文本輸入框是單行且固高度固定的區域，通常帶有圓角，當用戶點擊它時會自動彈出鍵盤。

使用文本輸入框來輸入少量信息，例如電子郵件地址。

?? ? ??? ? ? ?

1、在文本輸入框中顯示必要的提示，以幫助用戶更好的輸入

當輸入框中沒有其他文本時，文本輸入框可以包含占位符文本 - 例如“電子郵件”或“密碼” 。

當有足夠的控件放占位符文本時，請勿使用單獨的標簽來描述文本輸入框。

2、適當時侯，在文本輸入框的右端顯示“清除”按鈕

若有“清除”按鈕，點擊它便會立即清空文本字段的內容，從而用戶完全不必一直繼續點擊Delete鍵來刪除。

3、適當時候，使用安全文本字段

若需要輸入的是敏感數據(如密碼)時，請始終使用安全提示類的文本字段。

4、使用圖像和按鈕在文本字段中提供清晰度和功能

可以在文本輸入框的左側或右側顯示自定義圖標，也可以添加系統提供的按鈕，例如“書簽”按鈕。

通常，使用文本輸入框的左端來說明文本輸入框的用途或目的，使用其右端來放置其他附加功能，例如書簽。

鍵盤

? ? ??? ? ? ?

根據實際情況，顯示適當的鍵盤類型。iOS提供了幾種不同的鍵盤類型，每種鍵盤都用于方便不同文本類型的輸入。當用戶在輸入文本時，根據輸入的文本類型顯示相應的鍵盤類型，可以簡化數據輸入。

例如：如果用戶需要填寫電子郵件地址，則應顯示郵件鍵盤(見上圖左)。

總結

以上是生活随笔為你收集整理的wpf 点击某控件范围之外的区域 该控件隐藏_iOS平台设计规范（八）控件Controls...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。