2026-6-5 之晨 系統(tǒng)UI設(shè)計文章及欣賞
做UI/UX設(shè)計的同學(xué)幾乎每天都要和切換類組件打交道，但很多人總會在開關(guān)、復(fù)選框、單選按鈕之間踩坑——要么用錯場景，要么給用戶造成認(rèn)知混淆，甚至引發(fā)操作失誤。
蘋果HIG (人機界面指南) 里明確把開關(guān)、復(fù)選框、單選按鈕這三類，都?xì)w為「切換開關(guān)」組件。它們的核心共性是讓用戶在對立的狀態(tài)間做選擇，通過差異化的視覺形態(tài)清晰區(qū)分選中/未選中的狀態(tài)。
開關(guān)是用來瞬間切換單個功能/設(shè)置的開啟/關(guān)閉狀態(tài)的組件，一次只能控制一個設(shè)置的開關(guān)，工作邏輯和我們家里的物理電燈開關(guān)完全一致，能讓用戶一眼看清當(dāng)前的生效狀態(tài)。
開關(guān)的結(jié)構(gòu)非常簡潔，核心分為3個部分：
如果要添加輔助圖標(biāo)，必須選表意清晰、強二元對立的樣式，千萬別用含義模糊、沒有明確正反屬性的圖標(biāo)（比如月亮、編輯圖標(biāo)），用戶沒法一眼對應(yīng)開/關(guān)狀態(tài)。
開關(guān)的核心交互邏輯是操作后立即生效，不需要用戶額外點擊確認(rèn)按鈕，切換狀態(tài)時，可配合手柄尺寸的微動效強化操作反饋。
開關(guān)必須和描述控制功能的標(biāo)簽搭配使用，標(biāo)簽要簡潔直白，不要把文字放到開關(guān)內(nèi)部。這樣會壓縮視覺空間，還會破壞組件通用性，增加用戶識別成本。
復(fù)選框的核心定位，是支持用戶對一組關(guān)聯(lián)選項，做單項或多項的選中/取消操作。
記住一個核心原則：當(dāng)用戶可以在一個列表里選擇多個選項時就用復(fù)選框，不用開關(guān)或單選按鈕。單選按鈕的語義是「請選其中一個」，而復(fù)選框的語義是「可以選多個，也可以全不選」，二者的底層邏輯不同。
復(fù)選框的結(jié)構(gòu)清晰，核心就是選擇容器+選中狀態(tài)圖標(biāo)，通過勾選/未勾選的視覺差異，直觀傳遞用戶的選擇結(jié)果。
如果選項列表較長，建議添加「全選父復(fù)選框」提升操作效率，它的交互邏輯有明確的行業(yè)規(guī)范：
處理一組有關(guān)聯(lián)的多選項時優(yōu)先用復(fù)選框，而非一堆獨立的開關(guān)。
一方面，復(fù)選框能天然傳遞「選項之間互相關(guān)聯(lián)」的語義，另一方面，它比開關(guān)占用的視覺空間更小，頁面會更整潔有序。
單選按鈕的核心是互斥單選。在一組選項里，用戶有且只能選擇一個，選中新選項后之前選中的選項會自動取消。
它的語義非常明確：這一組選項里，「你必須、只能選一個」和復(fù)選框的「可多選、可全不選」形成了清晰的邊界。
單選按鈕的結(jié)構(gòu)核心是選中/未選中的狀態(tài)圖標(biāo)+對應(yīng)的選項標(biāo)簽。行業(yè)通用的視覺規(guī)范是：用實心圓點表示選中，空心圓圈表示未選中，保證用戶的視覺識別度。
不能打破互斥單選的核心邏輯，更不能讓單選按鈕出現(xiàn)布局重疊，否則會完全顛覆用戶的固有認(rèn)知，造成操作混亂。
如果選項數(shù)量較多、屏幕空間有限，可用下拉菜單替代單選按鈕。
但要注意：下拉菜單需要用戶多一步點擊展開的操作，會增加交互成本，也沒法讓用戶一眼看到全量選項，降低認(rèn)知效率。因此選項較少時，優(yōu)先用單選按鈕。
單選按鈕優(yōu)先垂直排列，不建議水平排列。
垂直排列時每個選項的圖標(biāo)和標(biāo)簽對應(yīng)關(guān)系更清晰，用戶不會看錯；水平排列不僅容易讓頁面擁擠、可讀性下降，還會破壞布局一致性，在響應(yīng)式適配中也更容易出問題。
前面講了每個組件的細(xì)節(jié)，這里給大家整理了最簡使用規(guī)則，設(shè)計時直接對照即可。
開關(guān)、復(fù)選框、單選按鈕，都是設(shè)計里最基礎(chǔ)、最常用的組件。設(shè)計時要先看場景、定語義，再選對應(yīng)的組件，而不是憑感覺、看顏值隨便亂用。
當(dāng)然，我們也會看到一些特殊的設(shè)計案例，比如iOS在深色模式的選擇里，用了圓形復(fù)選框，和我們今天說的常規(guī)用法不一樣。這種情況，要么是為了整個系統(tǒng)的設(shè)計語言統(tǒng)一，要么是有特殊的產(chǎn)品考量，不建議盲目照搬。對于設(shè)計師來說，先搞懂這些基礎(chǔ)組件的用法、可用性底層邏輯，才是做好設(shè)計的根基！
轉(zhuǎn)載自 優(yōu)設(shè)網(wǎng)
蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.axaxx.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計的小編 http://www.axaxx.cn