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

編輯導(dǎo)讀：開關(guān)不僅是生活中必不可少的組件，在產(chǎn)品設(shè)計(jì)中的地位也是非常重要。本文作者基于自身工作經(jīng)驗(yàn)，圍繞選擇控件展開分析，希望對你有幫助。

“toggle”這個(gè)詞是指一個(gè)帶有短柄的開關(guān)，每次啟動(dòng)時(shí)，它都會(huì)在兩種狀態(tài)之間切換，每次 “開關(guān) “車燈的時(shí)候都會(huì)使用上它。

至于“Radio Buttons”這個(gè)詞來自于汽車收音機(jī)，通常的做法是在儀表盤下有一組按鈕，可以機(jī)械地存儲(chǔ)電臺(tái)預(yù)設(shè)，以便用戶更快地在電臺(tái)之間切換。按下其中一個(gè)按鈕會(huì)使其保持向下，直到按下另一個(gè)按鈕，才會(huì)彈出。

一、選擇類控件的類型

復(fù)選框（Checkboxes）—— 當(dāng)有一個(gè)或多個(gè)獨(dú)立選項(xiàng)時(shí)，用戶可以選擇任意數(shù)量的選項(xiàng)，包括零個(gè)、一個(gè)或多個(gè)選項(xiàng)。

單選按鈕（Radio Buttons）—— 當(dāng)有兩個(gè)或更多互斥的選項(xiàng)時(shí)，用戶只能選擇其中一個(gè)時(shí)。

切換開關(guān)（Toggle Switches）—— 當(dāng)有兩個(gè)互斥選項(xiàng)并且總是有一個(gè)默認(rèn)值時(shí)使用。撥動(dòng)開關(guān)即立即生效。

選擇標(biāo)簽（Choice Chips）—— 是單選按鈕的一個(gè)替代方案。包含至少兩個(gè)選項(xiàng)，選擇標(biāo)簽代表用戶可以做出的單一選擇。

多選標(biāo)簽（Multi-select chips）—— 是復(fù)選框的一個(gè)替代方案。允許用戶選擇多個(gè)選項(xiàng)，主要用于移動(dòng)端上進(jìn)行篩選。

選擇類型的控件在用戶界面中已經(jīng)使用了很長一段時(shí)間，所以我們對它們的行為有了強(qiáng)烈的期望。下面是一個(gè)簡單的備忘單，你可以根據(jù)它為正確的情況選擇正確的類型。

怎么樣知道什么時(shí)候該使用什么類型的控件？

上圖的靈感來源于Nilsen Norman Group的文章“復(fù)選框 vs. 單選按鈕”（注：上圖看不懂的同學(xué)可以看下圖）。

二、選擇類控件的狀態(tài)

復(fù)選框和單選按鈕可以選擇或取消選擇，切換開關(guān)可以關(guān)閉或開啟。所有這些都有啟用、禁用、懸停、聚焦和按下狀態(tài)。我知道這看起來很多，但是為了可靠的交互，創(chuàng)建所有這些狀態(tài)是好的。

選擇類控件的狀態(tài)

三、不要忘記為“不確定（indeterminate）”設(shè)計(jì)不同狀態(tài)

“indeterminate”表現(xiàn)為既不勾選也不取消勾選的復(fù)選框的狀態(tài)。該狀態(tài)并非完全肯定，因此命名為“indeterminate”?？梢岳斫鉃楫?dāng)一個(gè)父復(fù)選框有多個(gè)子復(fù)選框時(shí)，有些子復(fù)選框被選中，有些則未被選中。

“indeterminate”的不同狀態(tài)

四、禁止濫用切換開關(guān)

不要為切換開關(guān)創(chuàng)建層次結(jié)構(gòu)。這在視覺上更容易分散注意力，而且會(huì)造成一種錯(cuò)誤的印象，即所有的子選項(xiàng)都是開著/關(guān)著的。

實(shí)用技巧：禁止濫用開關(guān)按鈕。

五、當(dāng)選擇即生效時(shí)，請使用開關(guān)

切換開關(guān)是一種數(shù)字開關(guān)。任何由切換開關(guān)觸發(fā)的效果應(yīng)立即生效。如果不是這樣，最好用單個(gè)復(fù)選框替換切換開關(guān)。

實(shí)用技巧：當(dāng)選擇即將生效時(shí)，請使用切換開關(guān)。

六、不符合當(dāng)下設(shè)計(jì)標(biāo)準(zhǔn)的樣式會(huì)使用戶困惑

任何偏離你所設(shè)計(jì)的平臺(tái)標(biāo)準(zhǔn)的行為都會(huì)給用戶帶來額外的認(rèn)知負(fù)擔(dān)，我經(jīng)?？吹綀A形復(fù)選框很容易與單選按鈕混淆。

實(shí)用技巧：不符合當(dāng)下標(biāo)準(zhǔn)的設(shè)計(jì)會(huì)混淆用戶的感觀。

七、在垂直列表中顯示選項(xiàng)將幫助用戶輕松地掃描它們

左側(cè)對齊的控件和標(biāo)簽將發(fā)揮最佳效果，因?yàn)樗鼈兿嗷ブg的位置緊密，這將最快的支持完成時(shí)間并減少較少的錯(cuò)誤。

但是右對齊的控件在移動(dòng)端有一些好處，因?yàn)闃?biāo)簽和按鈕之間不能相隔太遠(yuǎn)，讓按鈕靠近右側(cè)邊緣，使得單手握住設(shè)備時(shí)更容易觸及。同時(shí)，我們在選擇時(shí)也不會(huì)用手指遮擋標(biāo)簽。

實(shí)用技巧：左對齊的控件和標(biāo)簽效果最好。

八、如果垂直空間出問題，考慮標(biāo)簽

你應(yīng)該防止出現(xiàn)很難看清選擇哪個(gè)控件的情況（確保按鈕和文本標(biāo)簽的間距），可以考慮使用選擇標(biāo)簽以此來在視覺上清晰地分隔選項(xiàng)。

實(shí)用技巧：當(dāng)垂直空間出現(xiàn)問題，可以考慮使用選擇標(biāo)簽。

九、如果可以的話，使用單選按鈕而不是下拉菜單

讓所有選項(xiàng)都可見，使用戶可以方便地進(jìn)行比較，這樣可以減少認(rèn)知負(fù)荷，幫助表單也更加透明。

實(shí)用技巧：如果只有幾個(gè)選項(xiàng)，請使用單選按鈕。

十、對數(shù)量多或類似的選項(xiàng)使用下拉菜單

如果選項(xiàng)的數(shù)量超過6-7個(gè)，你應(yīng)該考慮把它們放在下拉列表中，因?yàn)橛脩魺o論如何都無法記住所有的選項(xiàng)。這同樣適用于可預(yù)測的、類似的或增量的選項(xiàng)，如(縮放- 10%、20%、30% )。

實(shí)用技巧：為數(shù)量較多且相類似的選項(xiàng)選擇用下拉菜單整合。

十一、在默認(rèn)情況下最好有一個(gè)選中的單選按鈕

一旦選擇了一個(gè)單選按鈕，用戶可能就不能取消選擇，也不能將其設(shè)置回原來的狀態(tài)。如果用戶不想做選擇，你應(yīng)該提供一個(gè)標(biāo)有 “無 “的單選按鈕。按邏輯順序設(shè)計(jì)選項(xiàng)列表，并利用“默認(rèn)”的能力。

實(shí)用技巧：在大多數(shù)情況下，默認(rèn)選擇一個(gè)單選按鈕。

十二、寫清楚文本標(biāo)簽，避免否定詞

避免用戶為了避免某些事情發(fā)生而需要打勾的情況。

實(shí)用技巧：寫清文本標(biāo)簽，避免否定詞語。

十三、高亮顯示選中的選項(xiàng)以吸引用戶的注意

在視覺上區(qū)分所選選項(xiàng)與其他選項(xiàng)，這對于數(shù)據(jù)表中的行選擇尤其重要。

實(shí)用技巧：高亮顯示所選選項(xiàng)以此吸引用戶的注意。

十四、支持批量選擇和清除

一次選擇或清除多個(gè)項(xiàng)目對用戶來說應(yīng)該是毫不費(fèi)力的。

實(shí)用技巧：設(shè)計(jì)成支持批量選擇和清除多個(gè)選項(xiàng)的列表。

十五、使可點(diǎn)擊區(qū)域足夠大，以實(shí)現(xiàn)可靠的交互

熱區(qū)中可點(diǎn)擊/可點(diǎn)擊區(qū)域中應(yīng)同時(shí)包含按鈕和標(biāo)簽。根據(jù)菲茨定律，目標(biāo)的大小起著重要作用。復(fù)選框和單選按鈕一般都很小，點(diǎn)擊或點(diǎn)選會(huì)很麻煩，尤其是在移動(dòng)設(shè)備上。

實(shí)用技巧：使控件的可點(diǎn)擊區(qū)域足夠大，以便進(jìn)行可靠的交互

作者：LDesign1，公眾號(hào)ID：LDesign1

本文由@LDesign1 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash， 基于CC0協(xié)議