交互工程 · 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：交互設計精髓》。