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

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

按鈕button

1. 在 ios 設(shè)計(jì)規(guī)范中的描述

按鈕是用于啟動(dòng)應(yīng)用程序的特定操作，按鈕的背景可自定義，可以含圖標(biāo)或標(biāo)題，具體的形式可以根據(jù)設(shè)計(jì)需要進(jìn)行自定義。蘋果系統(tǒng)按鈕通常出現(xiàn)在導(dǎo)航欄和工具欄中，也可以在任何地方使用。

2. 需要注意的點(diǎn)

• 標(biāo)題盡量使用動(dòng)詞，動(dòng)詞給人的感受是可交互的，并說明單擊該按鈕時(shí)會(huì)發(fā)生什么。
• 標(biāo)題保持簡(jiǎn)短，標(biāo)題過長(zhǎng)會(huì)使界面變得擁擠，同時(shí)會(huì)增加用戶的理解成本。
• 僅在必要時(shí)考慮為按鈕添加邊框或背景。

默認(rèn)情況下，系統(tǒng)按鈕沒有邊框或背景，但是在某些內(nèi)容區(qū)域中，邊框或背景使按鈕的可交互性變強(qiáng)。比如電話應(yīng)用中，數(shù)字鍵和通話按鈕的背景都增強(qiáng)了按鈕的可點(diǎn)擊性，如下圖，圖一的按鈕可點(diǎn)擊性>圖二按鈕可點(diǎn)擊性。所以我們可以采用不同的樣式來區(qū)分按鈕的優(yōu)先級(jí)。

上下文菜單 context menu

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

根據(jù)字面意思，上下文菜單指的是結(jié)合上下文而顯示的菜單，其實(shí)，上下文菜單 context menu 約等于鼠標(biāo)右鍵菜單。

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

2. 在 ios 設(shè)計(jì)規(guī)范中的描述

在 ios 13 及更高版本中，可以體驗(yàn)到上下文菜單，上下文菜單中顯示的是內(nèi)容的預(yù)覽及與當(dāng)前內(nèi)容相關(guān)的功能。

需要注意的點(diǎn)：

使上下文菜單一直保持可見。如果一個(gè)應(yīng)用中某些地方提供上下文菜單，而某些地方又不提供該功能，會(huì)讓應(yīng)用失去穩(wěn)定性變的不可控。

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

將優(yōu)先級(jí)最高的命令放在菜單頂部，在打開上下文菜單時(shí)，用戶的焦點(diǎn)位于菜單的頂部區(qū)域，將優(yōu)先級(jí)最高的命令放在菜單頂部，更方便用戶找到。

命令過于復(fù)雜時(shí)可以使用子菜單，這里的子菜單就相當(dāng)于電腦端的子菜單，也叫二級(jí)菜單，如下：

子菜單的級(jí)別不宜過多，級(jí)別過多會(huì)讓體驗(yàn)變得更加復(fù)雜，且導(dǎo)航效果不好，容易讓用戶迷失。

給命令進(jìn)行分組。視覺分組可以幫助用戶更快的掃描菜單，將相關(guān)性強(qiáng)的命令分為一組，通常情況下，菜單中不要超過三個(gè)組。

不要給一個(gè)內(nèi)容同時(shí)提供編輯菜單和上下文菜單，由于這兩個(gè)控件的觸發(fā)方式都是長(zhǎng)按，如果同時(shí)出現(xiàn)會(huì)使用戶困惑。

不要提供打開預(yù)覽的操作按鈕，用戶可以通過點(diǎn)擊打開正在預(yù)覽的內(nèi)容，因此無需再提供「打開」按鈕。

標(biāo)簽labels

△ 在 ios 設(shè)計(jì)規(guī)范中的描述

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

編輯菜單 edit menus

1. 在 ios 設(shè)計(jì)規(guī)范中的描述

用戶可以通過長(zhǎng)按或雙擊文本字段，文本視圖，web 視圖或圖像視圖中的元素，來選擇內(nèi)容并顯示編輯選項(xiàng)。

需要注意的點(diǎn)：

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

頁(yè)面控制器 page controls

1. 在 ios 規(guī)范中的描述

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

需要注意的點(diǎn)：

• 不要顯示太多頁(yè)面，超過 10 個(gè)點(diǎn)一個(gè)頁(yè)面容易顯示不開，超過 20 個(gè)點(diǎn)用戶瀏覽起來會(huì)比較耗時(shí)費(fèi)勁，如果需要顯示超過 20 個(gè)頁(yè)面時(shí)，考慮使用其他控件。
• 不要將頁(yè)面控制器與分層頁(yè)面一起使用，頁(yè)面控件不會(huì)顯示頁(yè)面之間的關(guān)聯(lián)方式，也不會(huì)顯示與每個(gè)點(diǎn)相對(duì)應(yīng)的頁(yè)面。
• 樣式可以多樣化。Page controls 通常用圓點(diǎn)表示，當(dāng)需要特別說明頁(yè)面功能時(shí)，可以用其他形式，比如蘋果系統(tǒng)將小圓點(diǎn)變成相機(jī)icon，表意更明確。

2. 拓展應(yīng)用

page controls 與進(jìn)度條結(jié)合使用，進(jìn)度條代表當(dāng)前頁(yè)面的展示時(shí)間，有的允許用戶手動(dòng)滑動(dòng)，有的為了更好的傳達(dá)信息，不允許用戶滑動(dòng)，這種情況下，進(jìn)度條幫助用戶了解下一頁(yè)何時(shí)出現(xiàn)，可以有效緩解用戶等待時(shí)的焦慮感。當(dāng)進(jìn)度條與 page controls 結(jié)合使用時(shí)，受空間的限制，數(shù)量不易過多。

當(dāng)頁(yè)面過多時(shí)，Page controls 與數(shù)字結(jié)合使用。上面提到圓點(diǎn)不易過多，圓點(diǎn)過多的話，會(huì)導(dǎo)致一個(gè)頁(yè)面展示不開，而且從第一個(gè)點(diǎn)滑動(dòng)到最后一個(gè)點(diǎn)費(fèi)時(shí)費(fèi)力。但實(shí)際業(yè)務(wù)往往不能只從用戶體驗(yàn)出發(fā)，有的業(yè)務(wù)場(chǎng)景需要展示多個(gè)頁(yè)面，比如自如 app：

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

當(dāng)需要展示多個(gè)頁(yè)面，又不想使頁(yè)面因?yàn)閳A點(diǎn)過多變得雜亂，該如何處理呢？看小紅書是如何做的的：右上角的數(shù)字與 page controls 結(jié)合使用。

數(shù)字角標(biāo)和 page controls 的作用其實(shí)類似，所以當(dāng)需要展示過多頁(yè)面時(shí)，很多應(yīng)用選擇用數(shù)字角標(biāo)，放棄使用 page controls，比如淘寶：

不同的是 page controls 可以通過點(diǎn)擊小圓點(diǎn)切換下一張，而數(shù)字角標(biāo)只能通過左右滑動(dòng)切換，但數(shù)字角標(biāo)可顯示的頁(yè)面更多。

總結(jié)一下，數(shù)字角標(biāo)的優(yōu)劣：可展示的頁(yè)面更多；樣式更簡(jiǎn)潔。Page controls 的優(yōu)劣：可點(diǎn)擊小圓點(diǎn)切換頁(yè)面；比數(shù)字角標(biāo)更直觀；但需要展示多個(gè)頁(yè)面時(shí)由于小圓點(diǎn)過多容易讓用戶混亂。

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

歡迎關(guān)注作者的微信公眾號(hào)：「設(shè)宴」