互動工程 · 6 / 10

控制項選對了嗎：單選、多選、開關與下拉

前面四節看的是流程和狀態，這一節鑽進介面最小的零件。控制項是使用者和產品之間的通用語言，用錯一個，使用者就要多點一次、多猜一次。選用規則四句話就講完，AI 不知道這四句，你得替它把關。

四句口訣場景連連看下拉的代價該不該彈
AI 挑控制項，靠的是擲骰子

讓 AI 生成一張表單，控制項八成是隨手抓的：三個選項也塞進下拉，單選多選看心情，再順手給每個動作都配一個彈窗。這些毛病單看都不大，疊在一張表單裡，使用者每一步都在多花力氣。

典型病現場使用者多付的成本
三個選項也用下拉發票類型就三種，藏進「請選擇」裡多點一次才能看見選項，選項之間沒法直接比較
單選多選隨緣互斥的選項給了核取方塊，能多選的給了單選鈕勾出矛盾資料，或者想多選卻選不了，只能撞一次錯
什麼都愛彈框儲存成功彈一個，切換頁籤也彈一個每個彈窗都是一次打斷，手在頁面上，心思被拽走

Cooper 在《About Face 4》第 21 章把這些零件逐個講過一遍，規則清楚得能背下來。這一節先背口訣，再連連看練手，最後把規則抄成提示詞。

四句口訣，控制項各回各家

第 21 章把選擇類控制項的分工劃得很清楚。單選鈕的名字來自老式汽車收音機：司機按下一個電臺鍵，前一個鍵自動彈起，眼睛不用離開路面。互斥、必選一個，就是它的地盤。四句口訣對應四種控制項，先認臉再認規則。

專票 普票 電子票
互斥選一個，用單選鈕
選中一個，其他自動彈起，錯誤選法在物理上不存在。成組才有意義，單獨一個單選鈕點上就取消不掉，第 21 章直接判它無意義。
產品更新 活動 週報
可勾多個，用核取方塊
勾上做標記，再點取消，幾個並排就能同時多選。方形是它幾十年攢下的臉，別改成圓的，圓形會和單選鈕撞臉。
深色模式 聲音
立即生效，用開關
撥下去當場變，不用再點儲存。第 21 章說它在行動裝置的設定頁非常好用，反過來講，要跟著表單一起提交的選項就別用開關，使用者會以為已經生效了。
廣東省 34 個選項收在裡面
選項超一屏，才考慮下拉
下拉的初始狀態只露出當前選中的那一項，其餘全部藏起來，看一眼選項就要付一次點選。它是螢幕裝不下時的妥協方案，配額別浪費在三個選項上。
「連結用於導航，按鈕用於動作。」
Alan Cooper，《About Face 4》第 21 章：每種控制項都有自己的分工，讓控制項幹別人的活，使用者就要重學一遍。
動手 · 六個場景，給控制項對號入座

口訣背完練手感。下面六個場景都出自真實表單，每個場景從四種控制項裡挑一個最對症的。選錯有糾錯判詞，可以繼續選到對為止。

場景配控制項連連看 0 / 6
點場景下方的控制項圓片作答，六題全對，口訣就算過了手
1報銷單裡選發票類型：專票、普票、電子票，只能選一種
對。三個選項、互斥、必選一個，單選鈕平鋪讓三種發票一眼可比。AI 多半會塞給你一個下拉，把三個選項藏進兩次點選裡。
核取方塊能同時勾多個。專票和普票一起勾上，財務系統當場報警。互斥場景要的是選一個頂掉一個。
開關只裝得下開和關。三種發票塞不進兩個狀態，它管的是立即生效的設定項。
選項才三個就下拉，藏早了。第 21 章的門檻是選項多到一屏放不下才輪到它。
2訂閱設定「你想收到哪些郵件」：產品更新、活動通知、每週精選，隨便勾
單選鈕是互斥的。勾了活動就自動放棄產品更新，使用者想都要就沒門了。能共存的選項歸核取方塊管。
對。三個選項彼此獨立、可以共存，核取方塊逐個勾選正對症。第 21 章還有個進階用法叫做記號：列表裡每行配一個核取方塊，多選狀態一眼可見。
差一口氣。三個開關也能湊合，但這裡的選擇要跟著「儲存」一起提交，開關的承諾是撥下去立即生效，語義對不上。
下拉一次只露一項。使用者想看自己勾了哪幾樣，還得點開數一遍，多選狀態全被藏住了。
3設定頁的「深色模式」，一改介面立刻變色，不用儲存
兩個單選鈕「開 / 關」佔地翻倍。開關本來就是兩個壓縮版單選鈕拼的，二選一且立即生效，直接用開關。
核取方塊在表單裡長大，使用者看見它會下意識找「儲存」按鈕。立即生效的設定項用開關，生效感是設計出來的。
對。撥下去當場變色，開關的形態本身就在承諾「立即生效」。第 21 章點名它在設定頁最好用，AI 生成設定頁時給它這個詞就夠了。
兩個選項做下拉，使用者要點兩次才能完成一次切換，還看不見另一個選項是什麼。
4收貨地址選省份，一共 34 個選項
34 個單選鈕平鋪，表單直接變成一面牆。單選鈕吃螢幕，第 21 章說它適合選項少、不常用的場合。
省份只能選一個，核取方塊先在語義上就錯了，再擺 34 個更是災難。
開關裝不下 34 個狀態。它只有開和關。
對。選項超過一屏，下拉此時才名正言順，藏起來是為了救螢幕。再講究一點可以配輸入聯想，打兩個字直達。
5收銀臺選支付方式：微信、支付寶、雲閃付，選一種付款
對。互斥、必選一個、選項就三個，平鋪的單選鈕讓使用者掃一眼就點。真實收銀臺都做成三張大卡片，那是單選鈕的變體，規則沒變。
一筆錢沒法同時走兩條通道，核取方塊的多選語義在這裡是個陷阱。
三種支付方式塞不進一個開關。它只有兩個狀態。
付款是最不該加阻力的一步，三個選項藏進下拉，等於在收銀臺前多設一道門。
6註冊頁的「我已閱讀並同意服務條款」，勾了才能註冊
單獨一個單選鈕沒有意義，點上就取消不掉，這是第 21 章的原話級結論。二選一且不互斥的標記，歸核取方塊。
對。勾上表示同意，再點一下反悔，核取方塊單個使用正好覆蓋「勾 / 不勾」兩個狀態，這就是它最初被發明出來的用法。
開關會當場生效，可「同意條款」是跟著註冊動作一起提交的承諾，用開關會讓使用者以為撥一下就算簽了字。
把「同意 / 不同意」做成下拉，使用者要點開才知道有什麼可選，這是給一步動作硬加兩步。
下拉的帳：每次看選項都要付一次點選

四種控制項裡最常被 AI 濫用的就是下拉，值得單獨算筆帳。第 21 章講列表控制項時點破了它的先天缺陷：初始狀態只顯示上次選中的條目，其餘選項全部不可見。選項看不見，使用者就沒法比較，也預估不了這一步要花多久。下面是同一個外賣下單頁，點你願意用的那個。

選配送時間：下拉 vs 平鋪 A/B 對決
點卡片投票，投完揭曉判詞
方案 A
waimai.example.com/checkout
確認訂單合計 ¥ 42.5
配送時間
請選擇配送時間
提交訂單
三個時段收進下拉，點開之前一個都看不見
方案 B
waimai.example.com/checkout
確認訂單合計 ¥ 42.5
配送時間
立即送出約 35 分鐘
今天 18:00 前後避開午高峰
今天 19:00 前後到家再收
提交訂單
三個時段平鋪，各帶說明，預設選好最常用的

平鋪方案還偷偷用上了一招：把「立即送出」設成預設值。選項可見加預設合理，多數使用者一秒通過這一步，這正是上一章防錯三板斧裡「預設值兜底」在控制項層的樣子。

對話框是打斷，能不彈就不彈

第 21 章給對話框的定位講了一個廚房比喻：應用是廚房，對話框是食品儲藏室，它推動情節，但當不了主角。主要的互動操作要放在主視窗裡，對話框只裝主流程之外的東西：危險的、少用的、需要把一個主題的資訊集中到一處的。還有一條容易忽視的細節：功能對話框的標題要用動詞，讓使用者一眼知道自己在確認什麼。

AI 的習慣正相反：成功也彈、提示也彈、確認也彈。下面五個場景，逐個判斷該彈還是不該彈。

對話框該不該彈，五連判 0 / 5
每個場景點「該彈」或「不該彈」，判詞會說清依據
使用者點了「清空回收站」，200 條記錄將永久消失，產品暫時做不了撤銷
該彈，但它是備胎。不可逆又暫時做不了撤銷，確認框是僅剩的防線，標題記得用動詞：「清空這 200 條記錄？」。第 3 節講過，能做可撤銷就優先做，彈窗只在撤銷缺席時頂班。
每次儲存成功，都彈一個「儲存成功」對話框讓使用者點確定
不該彈。正常幹完活還要使用者點一下表揚，等於軟體在邀功。成功回饋用非模態的輕提示：角落一枚對勾、一條兩秒消失的 toast，使用者眼角能看到就夠了。
表單還有一項沒填，使用者點提交，彈窗告知「資訊不完整」
不該彈。這一幕在第 3 節演過：防錯要前置，沒填完就禁用提交按鈕，旁邊寫明還缺哪幾項。讓使用者先撞牆再彈窗遞創可貼，是把防錯做成了報錯。
使用者點「匯出全部資料」，需要一次性選好格式、範圍、是否含附件
該彈。匯出在主流程之外、不常用、又要把一個主題的好幾項設定收攏到一處，這正是第 21 章說對話框最擅長的活：把相關資訊集中起來，免得使用者滿介面找。
使用者正在打字，後臺同步完成了，彈窗告知「同步完成」
不該彈。使用者手在鍵盤上，彈窗搶走焦點，半句話就打進了「確定」按鈕裡。後臺狀態用介面角落的圖示或狀態條靜靜更新，Cooper 管這叫富視覺非模態回饋，第 15 章整章都在講怎麼用它消滅對話框。
速查表 · 抄進提示詞，AI 就不擲骰子了

規則記在你腦子裡沒用，要寫進給 AI 的需求裡。先收一張速查表，再把下面那段約束話術一鍵複製，生成任何帶表單的介面時貼在提示詞末尾。

控制項什麼時候用AI 常見誤用
單選鈕互斥、必選一個、選項一屏放得下該用它的地方給了下拉或核取方塊
核取方塊可多選，或單個的「勾 / 不勾」標記互斥選項也給核取方塊，勾出矛盾資料
開關二選一且立即生效的設定項用在要跟表單一起提交的欄位上
下拉選項超過一屏，螢幕裝不下的妥協三五個選項也藏進去，憑空加一次點選
對話框主流程之外：危險、少用、集中一個主題成功提示、常規確認也彈，逢事必彈
控制項約束話術，直接進提示詞 可複製
點右上角複製，貼到生成介面的提示詞末尾
約束話術
控制項選擇約束：互斥且選項不超過 5 個時用單選鈕平鋪，禁止用下拉；可多選用核取方塊；開關只用於立即生效的設定項；選項超過一屏才允許下拉，並提供輸入聯想。對話框只用於主流程之外的功能（危險操作、少用的設定、需要集中一個主題的資訊），功能對話框標題用動詞；操作成功用非模態 toast 提示，禁止彈「成功」對話框；表單校驗前置（禁用 + 缺項說明），禁止提交後彈「資訊不完整」。
加試 · 一顆合體按鈕的懸案

第 21 章還點名了一種要避開的控制項：狀態切換按鈕。音樂播放器那顆「播放 / 暫停」合體鍵就是代表，圖示顯示三角時你點它，音樂響起，圖示變成兩道豎條。Cooper 認為它的毛病出在哪？

播放 / 暫停合體鍵，病根是什麼 單選
選錯也有解釋，選到對的為止
A兩個功能擠一個按鈕，點選區域太小容易誤觸
B使用者分不清圖示顯示的是當前狀態，還是點下去會發生的事
C圖示不帶文字，新手學不會
D切換太快，動畫來不及播完
本節要點
✓

四句口訣：互斥選一個用單選鈕，可勾多個用核取方塊，立即生效用開關，選項超一屏才考慮下拉（Cooper，《About Face 4》第 21 章）。

✓

下拉是妥協方案：它初始只露一項，看選項就要付點選。三五個選項先平鋪，配上合理預設值，多數使用者一秒透過。

✓

對話框是打斷：主互動放主視窗，彈窗只裝主流程之外的危險、少用、需要集中的功能；成功提示用非模態輕回饋，功能對話框標題用動詞。

✓

把規則寫給 AI：速查表的約束話術貼進提示詞，控制項就不再靠 AI 擲骰子。控制項說對了，文案也得說人話，下一節講介面怎麼開口。

內容來源：小山學堂「互動工程」專題原創；部分互動原則整理自《About Face 4：互動設計精髓》。