寫給新手的控件設(shè)計指南（二）：控制器

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

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

按鈕button

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

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

2. 需要注意的點

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

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

上下文菜單 context menu

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

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

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

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

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

需要注意的點：

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

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

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

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

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

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

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

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

標(biāo)簽labels

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

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

編輯菜單 edit menus

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

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

需要注意的點：

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

頁面控制器 page controls

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

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

需要注意的點：

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

2. 拓展應(yīng)用

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

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

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

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

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

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

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

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

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