“選擇”與“輸出”是常見(jiàn)的設(shè)計(jì)場(chǎng)景，如何將常見(jiàn)的場(chǎng)景設(shè)計(jì)完美且高效呢？本文中作者對(duì)選擇控件與輸入控件的類(lèi)型以及用法進(jìn)行了介紹。讓我們一起來(lái)看看吧~

「選擇」或「輸入」是常見(jiàn)設(shè)計(jì)場(chǎng)景，你是否有這樣的疑問(wèn)：有哪些控件可供選擇？如何選用才是更簡(jiǎn)單、完美又優(yōu)雅的？本文將向大家介紹移動(dòng)端場(chǎng)景中「選擇」和「輸入」控件有哪些、怎么用，助力用戶(hù)操作效率的提升~

介紹前首先明確選用的基本原則?！高x擇」和「輸入」的本質(zhì)是用戶(hù)選出或添加內(nèi)容與其他角色（app、用戶(hù)等）進(jìn)行互動(dòng)交流，因此要遵循認(rèn)知高效和行為高效兩大基本原則，通俗講即讓用戶(hù)看得懂、用得好。讓我們進(jìn)入正題：D

一、選擇控件簡(jiǎn)介

選擇控件是讓用戶(hù)從1個(gè)或多個(gè)選項(xiàng)中選擇合適內(nèi)容的控件，多用于設(shè)置頁(yè)。常見(jiàn)的選擇控件有開(kāi)關(guān)、單選框、復(fù)選框、滑塊、列表選擇、標(biāo)簽等，接下來(lái)將依次介紹。

1.1 開(kāi)關(guān)（Switches）

基本定義：開(kāi)關(guān)是讓用戶(hù)打開(kāi)或關(guān)閉某單個(gè)項(xiàng)目的控件。開(kāi)關(guān)的現(xiàn)實(shí)映射為生活中的各類(lèi)開(kāi)關(guān)。

基本屬性：開(kāi)關(guān)的選項(xiàng)只有兩個(gè)（打開(kāi)/關(guān)閉），其關(guān)系是互斥、非此即彼的，選項(xiàng)的狀態(tài)有打開(kāi)、關(guān)閉、禁用三種。

使用場(chǎng)景：①用于打開(kāi)或關(guān)閉某單個(gè)內(nèi)容；②立即激活或停用某內(nèi)容；③多用于列表頁(yè)，是調(diào)整設(shè)置的主要方式。

設(shè)計(jì)細(xì)節(jié)：

1）狀態(tài)及時(shí)改變。用戶(hù)操作完成后開(kāi)關(guān)及對(duì)應(yīng)狀態(tài)需立即改變，讓用戶(hù)有明顯的反饋感知。如手機(jī)的深色模式開(kāi)關(guān)，打開(kāi)后頁(yè)面立即切換。

2）不要濫用開(kāi)關(guān)。由于開(kāi)關(guān)掃描效率較低，最好不要嵌套父子集開(kāi)關(guān)，可用復(fù)選框代替。

3）文案簡(jiǎn)潔易懂無(wú)歧義。減少使用否定話(huà)術(shù)，更不要畫(huà)蛇添足在開(kāi)關(guān)內(nèi)加提示文案。

4）切換失敗后立即回彈。

1.2 單選框（Radio Buttons）

基本定義：?jiǎn)芜x框是讓用戶(hù)從一組選項(xiàng)中選擇1個(gè)選項(xiàng)的控件。其現(xiàn)實(shí)映射是收音機(jī)的按鈕，特征是按下一個(gè)按鈕時(shí)其他按鈕都會(huì)彈出。

基本屬性：?jiǎn)芜x框的選項(xiàng)數(shù)量一般2~4個(gè)，選項(xiàng)間的關(guān)系是互斥、非此即彼的，選項(xiàng)狀態(tài)有已選、未選、禁用三種。

使用場(chǎng)景：①僅能選擇1項(xiàng)；②不可取消選擇；③需外顯所有選項(xiàng)。設(shè)計(jì)細(xì)節(jié)：

1）提供默認(rèn)選項(xiàng)/空選項(xiàng)。①提供的默認(rèn)選項(xiàng)應(yīng)是最優(yōu)選擇（對(duì)用戶(hù)或業(yè)務(wù)價(jià)值高），如左圖優(yōu)惠券列表自動(dòng)選擇折扣最高的券；②為用戶(hù)提供空選項(xiàng)，如右圖中不使用優(yōu)惠券的選項(xiàng)。

2）擴(kuò)大點(diǎn)擊熱區(qū)。常規(guī)情況下點(diǎn)擊熱區(qū)可擴(kuò)展至整條區(qū)域而非局限在按鈕處。

3）不可嵌套。單選框最好不要嵌套子集，否則會(huì)導(dǎo)致邏輯混淆、增加認(rèn)知理解成本，違背認(rèn)知高效的基本原則。

4）縱向排列。選項(xiàng)縱向排列以便用戶(hù)瀏覽選擇。

1.3 復(fù)選框(Checkboxes)

基本定義：復(fù)選框是讓用戶(hù)從一組選項(xiàng)中選擇1個(gè)或多個(gè)選項(xiàng)的控件。復(fù)選框的現(xiàn)實(shí)映射為紙上的多選，如點(diǎn)菜時(shí)的菜單。

基本屬性：復(fù)選框的選項(xiàng)數(shù)量一般大于等于1個(gè)，選項(xiàng)間的關(guān)系是相互獨(dú)立、互不干擾的；選項(xiàng)狀態(tài)有已選、未選、部分選擇和禁用四種。

使用場(chǎng)景：①?gòu)牧斜碇羞x擇1項(xiàng)或多項(xiàng)；②支持選擇與取消選擇；③可嵌套子選項(xiàng)。

設(shè)計(jì)細(xì)節(jié)：

1）父子集邏輯。選中父級(jí)選項(xiàng)，子選項(xiàng)全部變?yōu)橐堰x；取消選擇父級(jí)選項(xiàng)，子選項(xiàng)全部變?yōu)槲催x；當(dāng)子選項(xiàng)部分選中時(shí)，父級(jí)選項(xiàng)變?yōu)椴糠诌x擇狀態(tài)。

2）減少否定表達(dá)。應(yīng)采用正面肯定的措辭，使用戶(hù)明確勾選后將發(fā)生什么。

3）可批量選擇或清空。如手機(jī)相冊(cè)調(diào)起多選時(shí)，可滑動(dòng)選擇多項(xiàng)以提升批量處理效率。

ps.開(kāi)關(guān)和復(fù)選的差異：開(kāi)關(guān)一般選完即生效、沒(méi)有后續(xù)操作；而復(fù)選經(jīng)常需要提交/保存后生效，并且可能伴隨轉(zhuǎn)發(fā)、刪除等后續(xù)操作。

1.4滑塊（Sliders）

基本定義：滑塊是讓用戶(hù)選擇滑條內(nèi)的值或范圍的控件。

基本類(lèi)型：滑塊有連續(xù)滑塊和離散（分段）滑塊兩類(lèi)，其中離散滑塊是指內(nèi)容已分段且固定、只能選擇特定節(jié)點(diǎn)的控件。

使用場(chǎng)景：滑塊主要應(yīng)用在需要選定范圍且對(duì)輸入結(jié)果精度要求較為靈活的場(chǎng)景，如音量、亮度、色彩等調(diào)節(jié)。

設(shè)計(jì)細(xì)節(jié)：1）狀態(tài)立即改變。如調(diào)節(jié)音量、亮度時(shí)實(shí)時(shí)改變狀態(tài)。

2）點(diǎn)擊滑條可快速選擇，無(wú)需滑動(dòng)調(diào)整。

3）可展示他人選擇，輔助決策。

1.5 其他選擇控件簡(jiǎn)介

上述內(nèi)容介紹了4類(lèi)常用的選擇控件，接下來(lái)將簡(jiǎn)述其他選擇控件。

1.5.1 列表選擇

列表選擇形式多樣，有下拉列表、選擇彈窗、選擇浮層、頁(yè)面選擇等。主要使用場(chǎng)景有：①當(dāng)前頁(yè)面空間有限、需擴(kuò)展承載；②選項(xiàng)內(nèi)容無(wú)需外顯；③選項(xiàng)數(shù)量較多。

設(shè)計(jì)細(xì)節(jié)：1）選項(xiàng)按一定邏輯排序?？梢园凑毡贿x可能性、操作難易度等順序排列，提升瀏覽和選擇效率。如vivo錢(qián)包中信息輸入頁(yè)根據(jù)選擇頻次調(diào)整了選項(xiàng)順序，使用戶(hù)選擇時(shí)間縮短18%。

2）選擇后入口及時(shí)更新。如某購(gòu)物網(wǎng)站選擇后入口處會(huì)高亮并展示所選內(nèi)容。

3）低優(yōu)先級(jí)內(nèi)容設(shè)置默認(rèn)項(xiàng)。如vivo錢(qián)包借錢(qián)頁(yè)中，默認(rèn)為用戶(hù)選擇“購(gòu)物”作為借錢(qián)用途，減少選擇成本。

1.5.2 標(biāo)簽選擇

標(biāo)簽主要有輸入型、選擇型、篩選型和行動(dòng)型4類(lèi)標(biāo)簽，此處僅探討選擇型標(biāo)簽。選擇型標(biāo)簽主要應(yīng)用在頁(yè)面縱向空間有限或選項(xiàng)內(nèi)容需要外顯的場(chǎng)景。標(biāo)簽選項(xiàng)數(shù)量大于等于2個(gè)但不宜過(guò)多。

設(shè)計(jì)細(xì)節(jié)：1）盡量不折行。超過(guò)一行不便于用戶(hù)掃描和瀏覽 ，若選項(xiàng)過(guò)多可橫滑。

2）最好不用單個(gè)標(biāo)簽。只有1個(gè)選項(xiàng)時(shí)可考慮使用復(fù)選框。

3）狀態(tài)及時(shí)切換。如對(duì)于單選標(biāo)簽，選擇某標(biāo)簽時(shí)其他標(biāo)簽變?yōu)槲催x擇。

1.6本章小結(jié)

上述內(nèi)容介紹了選擇控件有哪些、怎么用，此處通過(guò)一張表格概括其特征，大家在日常設(shè)計(jì)中可借助表格選用合適控件~

二、輸入控件簡(jiǎn)介

輸入控件是讓用戶(hù)將所需或所想內(nèi)容添加到適當(dāng)容器中的控件。常見(jiàn)的輸入控件有文本框、滑塊、步進(jìn)器、語(yǔ)音輸入等，接下來(lái)將依次介紹。

2.1 文本框（Text Fields）

基本定義：文本框是讓用戶(hù)輸入或編輯文本的控件。

基本構(gòu)成：文本框主要由標(biāo)題、必填指引、輸入容器、光標(biāo)、輔助文案、輸入文案、icon、反饋文案等組成。

基本狀態(tài)：文本框狀態(tài)主要有輸入前、輸入中、輸入后三種，如下圖所示：

設(shè)計(jì)細(xì)節(jié)：1）必填指引：全部必填時(shí)無(wú)需特殊說(shuō)明，部分必填時(shí)再進(jìn)行指引。

2）輔助文案：①用于解釋說(shuō)明或設(shè)置默認(rèn)值。解釋說(shuō)明主要用于指示如何填寫(xiě)，設(shè)置默認(rèn)值則可設(shè)置推廣詞、默認(rèn)詞提升使用效率。②前/后綴說(shuō)明文案。

3）輸入文案：注意內(nèi)容合理分段。如手機(jī)號(hào)、銀行卡號(hào)、身份證號(hào)等合理分段以便于識(shí)別糾正。

4）輸入容器：長(zhǎng)文本輸入時(shí)擴(kuò)展容器。主要有三種方式：①縱向自適應(yīng)擴(kuò)展；②橫向滑動(dòng)擴(kuò)展；③手動(dòng)擴(kuò)展。

5）反饋文案：①及時(shí)出現(xiàn)，且修正后消失；②位置易識(shí)別。

6）輸入時(shí)關(guān)鍵信息不被鍵盤(pán)遮擋。

7）輸入時(shí)提供聯(lián)想。

8）選擇或掃描代替輸入。如瀏覽器中提供“.com”的標(biāo)簽，提升輸入效率；又如銀行卡、禮品卡號(hào)等大段復(fù)雜內(nèi)容，可用掃描代替輸入。

9）鍵盤(pán)匹配輸入內(nèi)容。除中英文、數(shù)字外，輸入身份證、密碼、金額、車(chē)牌等內(nèi)容時(shí)可調(diào)起對(duì)應(yīng)鍵盤(pán)以提升輸入效率。

2.2步進(jìn)器（Steppers）

步進(jìn)器主要應(yīng)用在精確選擇或調(diào)整數(shù)值的場(chǎng)景，用于處理內(nèi)容的遞增遞減。

設(shè)計(jì)細(xì)節(jié)：1）大幅數(shù)值場(chǎng)景，提供輸入功能。

2）調(diào)整后頁(yè)面內(nèi)容同步更新。如選擇購(gòu)物數(shù)量后，價(jià)格等信息相應(yīng)改變。

3）注意上下限?？刂撇竭M(jìn)器上下限，達(dá)到限制時(shí)置灰按鈕。

2.3 語(yǔ)音輸入

基本定義：語(yǔ)音輸入是用于識(shí)別用戶(hù)語(yǔ)音以實(shí)現(xiàn)快速輸入或問(wèn)答的控件，如小v、siri等。

使用場(chǎng)景：①大段文字、快速輸入；②即時(shí)問(wèn)答；③手、眼不便；④低門(mén)檻（如適老化）。

輸入狀態(tài)：主要有未喚醒、喚醒、語(yǔ)音輸入、輸入結(jié)果四種。其中喚醒方式有口令喚醒和入口點(diǎn)擊兩類(lèi)，需注意在喚醒后要提供及時(shí)的語(yǔ)音或動(dòng)效反饋；觸發(fā)輸入的方式有喚醒后自動(dòng)輸入和長(zhǎng)按輸入兩類(lèi)。

設(shè)計(jì)細(xì)節(jié)：

1）明確告知當(dāng)前狀態(tài)。如喚醒后告知用戶(hù)正在聽(tīng)，此時(shí)應(yīng)該說(shuō)話(huà)。

2）適當(dāng)?shù)妮斎敕答?。如光效、?dòng)效、實(shí)時(shí)展示輸入內(nèi)容等。

3）輸入建議&點(diǎn)擊代替輸入。為用戶(hù)提供輸入?yún)⒖?，并可通過(guò)點(diǎn)擊的方式快速發(fā)出指令。

4）及時(shí)的錯(cuò)誤反饋。如未識(shí)別到用戶(hù)語(yǔ)音時(shí)應(yīng)及時(shí)告知。

5）有明確的取消輸入按鈕。避免用戶(hù)疑惑何時(shí)、如何停止語(yǔ)音輸入。

語(yǔ)音輸入對(duì)比手動(dòng)輸入：語(yǔ)音輸入優(yōu)勢(shì)為輸入高效、解放手眼、使用門(mén)檻低、交互方式自然、可傳遞記錄聲學(xué)信息；劣勢(shì)為接收/處理效率低、識(shí)別精度低、環(huán)境要求高、用戶(hù)心理負(fù)擔(dān)等。

2.4本章小結(jié)

上述介紹了常見(jiàn)的輸入控件內(nèi)容，對(duì)其進(jìn)行概括整合可見(jiàn)下表。

總結(jié)

控件雖小，卻有較多細(xì)節(jié)值得探索。本文主要介紹了常用選擇和輸入控件的種類(lèi)及選用細(xì)節(jié)，并進(jìn)行匯總對(duì)比以供參考，希望能助力各位設(shè)計(jì)師產(chǎn)出更加簡(jiǎn)單、完美、優(yōu)雅的設(shè)計(jì)。