中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、選擇控件簡介

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

1.1 開關(guān)（Switches）

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

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

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

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

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

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

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

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

1.2 單選框（Radio Buttons）

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

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

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

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

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

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

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

1.3 復(fù)選框(Checkboxes)

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

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

使用場景：①從列表中選擇1項(xiàng)或多項(xiàng)；②支持選擇與取消選擇；③可嵌套子選項(xiàng)。

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

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

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

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

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

1.4滑塊（Sliders）

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

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

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

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

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

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

1.5 其他選擇控件簡介

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

1.5.1 列表選擇

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

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

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

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

1.5.2 標(biāo)簽選擇

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

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

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

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

1.6本章小結(jié)

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

二、輸入控件簡介

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

2.1 文本框（Text Fields）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3 語音輸入

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

使用場景：①大段文字、快速輸入；②即時問答；③手、眼不便；④低門檻（如適老化）。

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

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

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

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

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

4）及時的錯誤反饋。如未識別到用戶語音時應(yīng)及時告知。

5）有明確的取消輸入按鈕。避免用戶疑惑何時、如何停止語音輸入。

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

2.4本章小結(jié)

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

總結(jié)

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