想成為真正的 UI 設計師，光會視覺設計可不行。這份控件設計指南，可以幫你快速鞏固基礎。第一部分：

今天接著講第二部分：控制器 controls，這篇文章包括：按鈕 buttons；上下文菜單 context menus；編輯菜單 edit menus；標簽 labels；頁面控制器 page controls。

按鈕button

1. 在 ios 設計規范中的描述

按鈕是用于啟動應用程序的特定操作，按鈕的背景可自定義，可以含圖標或標題，具體的形式可以根據設計需要進行自定義。蘋果系統按鈕通常出現在導航欄和工具欄中，也可以在任何地方使用。

2. 需要注意的點

• 標題盡量使用動詞，動詞給人的感受是可交互的，并說明單擊該按鈕時會發生什么。
• 標題保持簡短，標題過長會使界面變得擁擠，同時會增加用戶的理解成本。
• 僅在必要時考慮為按鈕添加邊框或背景。

默認情況下，系統按鈕沒有邊框或背景，但是在某些內容區域中，邊框或背景使按鈕的可交互性變強。比如電話應用中，數字鍵和通話按鈕的背景都增強了按鈕的可點擊性，如下圖，圖一的按鈕可點擊性>圖二按鈕可點擊性。所以我們可以采用不同的樣式來區分按鈕的優先級。

上下文菜單 context menu

1. 什么是上下文菜單 context menu？

根據字面意思，上下文菜單指的是結合上下文而顯示的菜單，其實，上下文菜單 context menu 約等于鼠標右鍵菜單。

但與鼠標右鍵菜單不同的是，context menu 提供了內容的預覽。ios 13 以前，「3D touch+上滑」兩步操作才能看到預覽及下方的命令，而context menu 通過長按一步做到。

2. 在 ios 設計規范中的描述

在 ios 13 及更高版本中，可以體驗到上下文菜單，上下文菜單中顯示的是內容的預覽及與當前內容相關的功能。

需要注意的點：

使上下文菜單一直保持可見。如果一個應用中某些地方提供上下文菜單，而某些地方又不提供該功能，會讓應用失去穩定性變的不可控。

保持克制，上下文菜單中僅顯示用戶最常用的命令。

將優先級最高的命令放在菜單頂部，在打開上下文菜單時，用戶的焦點位于菜單的頂部區域，將優先級最高的命令放在菜單頂部，更方便用戶找到。

命令過于復雜時可以使用子菜單，這里的子菜單就相當于電腦端的子菜單，也叫二級菜單，如下：

子菜單的級別不宜過多，級別過多會讓體驗變得更加復雜，且導航效果不好，容易讓用戶迷失。

給命令進行分組。視覺分組可以幫助用戶更快的掃描菜單，將相關性強的命令分為一組，通常情況下，菜單中不要超過三個組。

不要給一個內容同時提供編輯菜單和上下文菜單，由于這兩個控件的觸發方式都是長按，如果同時出現會使用戶困惑。

不要提供打開預覽的操作按鈕，用戶可以通過點擊打開正在預覽的內容，因此無需再提供「打開」按鈕。

標簽labels

△ 在 ios 設計規范中的描述

標簽指的是界面元素或提供一個短文本，不能編輯但可以復制，標簽可以包括任意數量的靜態文本，但最好保持簡短，清晰易讀。標簽可以是純文本也可以是具有樣式的文本，如果需要使用自定義的字體，要以保證其易讀性為前提。

編輯菜單 edit menus

1. 在 ios 設計規范中的描述

用戶可以通過長按或雙擊文本字段，文本視圖，web 視圖或圖像視圖中的元素，來選擇內容并顯示編輯選項。

需要注意的點：

• 顯示適用于當前上下文的命令，編輯菜單中的默認命令有「剪切」「復制」「粘貼」「選擇」「全選」「刪除」，可以根據實際情況對命令進行禁用或者自定義添加。
• 編輯菜單彈出的位置可調節。默認情況下，編輯菜單出現在插入點或選擇的上方/下方，具體顯示位置取決于頁面的可用空間，并包含指向相關內容的指針，菜單形狀無法更改，但位置可自行配置，以防止其覆蓋頁面的重要內容。
• 相同的功能不要在兩個控件中出現，意思就是同一個功能，比如文本的復制，不要在編輯菜單中出現的同時又在其他控件中出現，這樣會導致用戶感到迷惑不可控。
• 不要給按鈕執行編輯菜單。
• 允許用戶撤銷。由于編輯菜單在執行操作之前不需要用戶再次確認，為避免用戶「后悔」，應支持用戶可以撤銷上一步操作。
• 不要將自定義按鈕與系統按鈕混在一起，始終將自定義的按鈕顯示在系統按鈕后面，這樣更容易使用戶形成固定認知，方便查找。
• 自定義按鈕的標題要簡短，使用動詞或動詞短語。

頁面控制器 page controls

1. 在 ios 規范中的描述

頁面控制器在頁面列表中顯示頁面總數和當前頁面的位置，它通常由一組小圓點組成，實心點表示當前頁面，在視覺上這些點是等距的，在手機端，用戶可以通過點擊小圓點或者左右滑動切換下一頁或上一頁（但在很多應用中，只能通過左右滑動切換，小圓點無法點擊，大家可以自己體驗一下），受圓點大小的限制，無法點擊特定的點進入特定的頁面。

需要注意的點：

• 不要顯示太多頁面，超過 10 個點一個頁面容易顯示不開，超過 20 個點用戶瀏覽起來會比較耗時費勁，如果需要顯示超過 20 個頁面時，考慮使用其他控件。
• 不要將頁面控制器與分層頁面一起使用，頁面控件不會顯示頁面之間的關聯方式，也不會顯示與每個點相對應的頁面。
• 樣式可以多樣化。Page controls 通常用圓點表示，當需要特別說明頁面功能時，可以用其他形式，比如蘋果系統將小圓點變成相機icon，表意更明確。

2. 拓展應用

page controls 與進度條結合使用，進度條代表當前頁面的展示時間，有的允許用戶手動滑動，有的為了更好的傳達信息，不允許用戶滑動，這種情況下，進度條幫助用戶了解下一頁何時出現，可以有效緩解用戶等待時的焦慮感。當進度條與 page controls 結合使用時，受空間的限制，數量不易過多。

當頁面過多時，Page controls 與數字結合使用。上面提到圓點不易過多，圓點過多的話，會導致一個頁面展示不開，而且從第一個點滑動到最后一個點費時費力。但實際業務往往不能只從用戶體驗出發，有的業務場景需要展示多個頁面，比如自如 app：

自如沒有直接將全部小圓點展示出來，雖然使頁面變得更加簡潔，但是這樣的 page controls 卻失去了他一重要的指示功能，用戶無法通過小圓點判斷頁面數量。自如這里展示的是運營類 banner，用戶并不會太在意此類 banner 的總數量，也是可以說的過去的。

當需要展示多個頁面，又不想使頁面因為圓點過多變得雜亂，該如何處理呢？看小紅書是如何做的的：右上角的數字與 page controls 結合使用。

數字角標和 page controls 的作用其實類似，所以當需要展示過多頁面時，很多應用選擇用數字角標，放棄使用 page controls，比如淘寶：

不同的是 page controls 可以通過點擊小圓點切換下一張，而數字角標只能通過左右滑動切換，但數字角標可顯示的頁面更多。

總結一下，數字角標的優劣：可展示的頁面更多；樣式更簡潔。Page controls 的優劣：可點擊小圓點切換頁面；比數字角標更直觀；但需要展示多個頁面時由于小圓點過多容易讓用戶混亂。

page controls 與標簽結合使用：為了在展示多個頁面時方便用戶自由切換，提高用戶瀏覽效率，于是出現了 page controls 與標簽結合使用的方案，舉個例子，自如的房源詳情頁面，由于展示的圖片多且類型不同，為方便用戶快速定位想要看的目標圖片，將圖片以標簽形式分類，通過點擊標簽快速切換，不足之處是，用戶不能一目了然的獲知圖片總數，每類圖片的數量，及當前瀏覽的位置。

歡迎關注作者的微信公眾號：「設宴」