eazy ui 复选框单选_UI备忘单：单选按钮，复选框和其他选择器
eazy ui 復(fù)選框單選
重點(diǎn) (Top highlight)
Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus on two components (radio buttons and checkboxes) side by side for easier comparison — while also comparing them to a few others.
選我！ 選我！ 不，接我！ 在今天的備忘單中，我們將研究選擇器及其區(qū)別。 與我的大多數(shù)其他備忘單不同，本手冊(cè)將并排關(guān)注兩個(gè)組件(單選按鈕和復(fù)選框)，以便于進(jìn)行比較，同時(shí)還將它們與其他幾個(gè)組件進(jìn)行比較。
In this cheat sheet we will cover the following:
在本備忘單中，我們將介紹以下內(nèi)容：
1.什么是選擇器 (1. What selectors are)
A selector is an input field where the user has to select one (or more) options, unlike a text field where the user has free rein. Selectors, like Lady Gaga’s hairstyles, come in all different shapes and forms. Dropdowns, checkboxes, toggles, sliders, and more are all different types of selectors, yet they look nothing like each other. The main functional difference between these types of selectors is how many options the user can pick: one or more.
選擇器是一個(gè)輸入字段，用戶必須在其中選擇一個(gè)(或多個(gè))選項(xiàng)，這與文本字段中用戶可以自由使用的輸入?yún)^(qū)不同。 選擇器(例如Lady Gaga的發(fā)型)具有各種不同的形狀和形式。 下拉菜單，復(fù)選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來并不相似。 這些類型的選擇器之間的主要功能區(qū)別是用戶可以選擇多少個(gè)選項(xiàng)：一個(gè)或多個(gè)。
In a perfect world, where there was no more starvation, animal poaching, greenhouse gases, or crime, I would start a petition to change radio buttons to ‘single selectors’ and checkboxes to ‘multi-selectors’. I think they describe what they are much better, but, alas, these legacy names are too ingrained and we are probably stuck with them.
在一個(gè)完美的世界中，不再有饑餓，偷獵，溫室氣體或犯罪的發(fā)生，我將開始請(qǐng)?jiān)?#xff0c;將單選按鈕更改為“單個(gè)選擇器”，將復(fù)選框更改為“多重選擇器”。 我認(rèn)為它們描述了它們要好得多的地方，但是，these，這些舊名稱太根深蒂固，我們可能會(huì)堅(jiān)持使用它們。
2.剖析復(fù)選框和單選按鈕 (2. Anatomy of checkboxes and radio buttons)
While we will look at various selector types in this cheat sheet, we will focus on radio buttons and checkboxes. Below is their anatomy.
雖然我們將在本備忘單中介紹各種選擇器類型，但我們將重點(diǎn)介紹單選按鈕和復(fù)選框。 以下是其解剖結(jié)構(gòu)。
Anatomy of radio buttons and checkboxes單選按鈕和復(fù)選框的剖析Note: There is some discrepancy in which of the parts above are referred to as the ‘radio button’/’checkbox’. Sometimes people use ‘radio button’/’checkbox’ to refer to the label and the selector together, while other times they use the terms to refer to the selector alone. I prefer the latter.
注意：上面的哪些部分被稱為“單選按鈕” /“復(fù)選框”，存在一些差異。 有時(shí)人們使用“單選按鈕” /“復(fù)選框”來同時(shí)指代標(biāo)簽和選擇器，而有時(shí)他們使用術(shù)語單獨(dú)指代選擇器。 我更喜歡后者。
3.單選按鈕和復(fù)選框之間有什么區(qū)別 (3. What is the difference between radio buttons and checkboxes)
Radio buttons and checkboxes are very similar, except for a few key differences. The primary difference is that with radio buttons you can only select one item, while with checkboxes you can select any number. I was going to write out a table to explain this, but didn’t because a) it sounded boring, b) Medium doesn’t allow you to insert tables, so I had a better idea:
單選按鈕和復(fù)選框非常相似，除了一些關(guān)鍵區(qū)別。 主要區(qū)別在于，使用單選按鈕只能選擇一項(xiàng)，而使用復(fù)選框可以選擇任何數(shù)字。 我打算寫一張表來解釋這一點(diǎn)，但是不是因?yàn)閍)聽起來很無聊，b)Medium不允許您插入表，所以我有一個(gè)更好的主意：
POP QUIZ! Yay! Let’s see who can get 100% — winner gets to buy me an apple and call me ‘ma’am’.
突擊測(cè)驗(yàn)！ 好極了！ 讓我們看看誰能獲得100％的收益-獲勝者可以給我買一個(gè)蘋果，稱我為“夫人”。
ONE: In the standard checkbox component, how many items are you allowed to select (unless otherwise stated)?
一個(gè)：在標(biāo)準(zhǔn)復(fù)選框組件中，允許您選擇幾項(xiàng)(除非另有說明)？
TWO: What is the shape of a radio button’s selector?
二：單選按鈕選擇器的形狀是什么？
THREE: If you want to make a UI where a user can select multiple toppings to put on an ice cream, you would use:
第三：如果要?jiǎng)?chuàng)建一個(gè)用戶可以在其中選擇多個(gè)澆頭以放置冰淇淋的UI，則可以使用：
FOUR: If you want to make a UI where a user can select what type of bank account they would like to open, you would use:
第四：如果要?jiǎng)?chuàng)建一個(gè)用戶可以在其中選擇他們想開設(shè)哪種銀行帳戶的用戶界面，則可以使用：
FIVE: If you wanted to create a ‘subscribe to our emailer’ selector, which selector type would you use?
五：如果您想創(chuàng)建“訂閱我們的電子郵件發(fā)送者”選擇器，您將使用哪種選擇器類型？
SIX: In the below image, which is a radio button?
六：在下圖中，哪個(gè)是單選按鈕？
ANSWERS: ONE: 3. Unlimited TWO: 2. Circle THREE: 2. Checkboxes FOUR: 1. Radio buttons FIVE: 2. A checkbox SIX: 1. A
答案：一個(gè)：3.無限兩個(gè)：2.圈三：2.復(fù)選框四個(gè)：1.單選按鈕五個(gè)：2.一個(gè)復(fù)選框六個(gè)：1. A
WOOOOO you passed! (I hope.)
你通過了！ (我希望。)
4.選擇器的常見樣式 (4. Common styles of selectors)
These are some of the common styles of checkboxes and radio buttons that you will come across in your field trip through the internet.
這些是復(fù)選框和單選按鈕的常見樣式，您在通過Internet進(jìn)行實(shí)地考察時(shí)會(huì)遇到這些樣式。
標(biāo)準(zhǔn)樣式(單選按鈕/復(fù)選框) (Standard style (radio buttons/checkboxes))
The most standard style of checkboxes and radio buttons uses buttons with ‘checkmarks’ or filled-in circles. I tend to prefer buttons with a checkmark UNLESS you are dealing with educational quizzes (see below).
復(fù)選框和單選按鈕的最標(biāo)準(zhǔn)樣式使用帶有“復(fù)選標(biāo)記”或?qū)嵭膱A圈的按鈕。 我傾向于使用帶有復(fù)選標(biāo)記的按鈕，除非您正在處理教育性測(cè)驗(yàn)(請(qǐng)參閱下文)。
Standard style with checkmarks帶有復(fù)選標(biāo)記的標(biāo)準(zhǔn)樣式 Standard style without checkmarks標(biāo)準(zhǔn)樣式，不帶對(duì)號(hào)測(cè)驗(yàn)按鈕樣式(單選按鈕/復(fù)選框) (Quiz button style (radio buttons/checkboxes))
When a user is answering questions in a quiz, we have to make sure of two things: 1) that they can clearly see what answers they are choosing, 2) that they don’t get confused about when they get feedback on their answer.
當(dāng)用戶在測(cè)驗(yàn)中回答問題時(shí)，我們必須確保兩件事：1)他們可以清楚地看到他們選擇的答案，2)當(dāng)他們對(duì)自己的答案獲得反饋時(shí)不會(huì)感到困惑。
If you look at the example below, you can see that the ‘checkmark’ can get confusing — it looks like those answers are correct, even though it hasn’t been graded yet.
如果您看下面的示例，您會(huì)發(fā)現(xiàn)“復(fù)選標(biāo)記”可能會(huì)令人困惑-看起來這些答案是正確的，即使尚未對(duì)其評(píng)分。
Quiz selectors showing that having a checkmark causes confusion in eLearning測(cè)驗(yàn)選擇器顯示帶有復(fù)選標(biāo)記會(huì)引起電子學(xué)習(xí)的混亂基本圖像樣式(單選按鈕/復(fù)選框) (Basic image style (radio buttons/checkboxes))
While this style of selector can give the user a better idea of what they are selecting, I seldom use them as the image will always be too small to see clearly anyway.
雖然這種選擇器樣式可以使用戶更好地了解他們所選擇的內(nèi)容，但我很少使用它們，因?yàn)闊o論如何圖像總是太小而看不清。
Radio buttons and checkboxes with images. Photo credits (from unSplash): Hamburger by @amir_v_ali | Chicken burger by @amir_v_ali | Veggie burger by @swimstaralex | Cheese by @swimstaralex | Tomatoes by @lmablankers | Lettuce by @producteurslocaux 單選按鈕和帶有圖像的復(fù)選框。 圖片來源(來自u(píng)nSplash)：@amir_v_ali的漢堡包| 雞肉漢堡，來自@amir_v_ali | 蔬菜漢堡，@ swimstaralex | @swimstaralex提供的奶酪| 西紅柿@lmablankers | 生菜@producteurslocaux網(wǎng)格樣式的圖像(單選/多選) (Image in a grid style (single/multi-select))
I prefer this style to the basic image style as you are able to make the images a lot bigger, and it also just looks better.
與基本圖像樣式相比，我更喜歡這種樣式，因?yàn)槟梢允箞D像更大，而且看起來也更好。
Image grid selectors. Photo credits (from unSplash): Hamburger by @amir_v_ali | Chicken burger by @amir_v_ali | Veggie burger by @swimstaralex | Cheese by @swimstaralex | Tomatoes by @lmablankers | Lettuce by @producteurslocaux 圖像網(wǎng)格選擇器。 圖片來源(來自u(píng)nSplash)：@amir_v_ali的漢堡包| 雞肉漢堡，來自@amir_v_ali | 蔬菜漢堡，@ swimstaralex | @swimstaralex提供的奶酪| 西紅柿@lmablankers | 生菜@producteurslocauxI first became aware of this style in Buzzfeed’s quizzes. (If you have never heard of Buzzfeed’s quizzes — a whole new world of procrastination awaits you.) Here they just show the image and have no text. If you go with that layout, pretty please make sure that you have alt text for users who use a screen reader or have a poor internet connection.
我首先在Buzzfeed的測(cè)驗(yàn)中意識(shí)到了這種風(fēng)格。 (如果您從未聽說過Buzzfeed的測(cè)驗(yàn)，那么整個(gè)拖延世界都在等待著您。)在這里，它們只是顯示圖像而沒有文字。 如果使用這種布局， 請(qǐng)確保您為使用屏幕閱讀器或互聯(lián)網(wǎng)連接狀況不佳的用戶提供替換文字 。
Example of a grid-style single selector. Screenshot from: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-you 網(wǎng)格樣式單個(gè)選擇器的示例。 屏幕截圖來自： https : //www.buzzfeed.com/jessicamisener/which-sandwich-are-you多級(jí)復(fù)選框 (Multi-level checkboxes)
Multi-level checkboxes are needed if the items need to be split up into groups. Also, notice that if only a few of the child items are selected, the parent category is only partially selected.
如果需要將項(xiàng)目分成幾組，則需要多級(jí)復(fù)選框。 另外，請(qǐng)注意，如果僅選擇了幾個(gè)子項(xiàng)，則僅部分選擇了父類別。
Multi-level checkboxes多級(jí)復(fù)選框One of the trickier UI elements around this is that the top item (parent) acts both as a selector and an accordion. So, if you click the label does it select the selector or does it open/close the accordion? I can’t find any definitive research on which way is the best, as this is a bit of an unusual pattern, but in the past, I have made the label part of the accordion and not the selector. Let me know if you have any suggestions for how to deal with this dilemma in the comments.
與此相關(guān)的較為棘手的UI元素之一是，頂級(jí)項(xiàng)(父項(xiàng))既充當(dāng)選擇器又充當(dāng)手風(fēng)琴。 因此，如果您單擊標(biāo)簽，它是選擇選擇器還是打開/關(guān)閉手風(fēng)琴？ 我找不到關(guān)于哪種方法最好的確定性研究，因?yàn)檫@是一種不尋常的模式，但是在過去，我已經(jīng)將標(biāo)簽設(shè)置為手風(fēng)琴的一部分，而不是選擇器的一部分。 如果您有任何關(guān)于如何解決此難題的建議，請(qǐng)告訴我。
強(qiáng)制選擇 (Forced selection)
Sometimes you will only want to allow your users to select a certain number of an item. To force this, if the user clicks one more than the selected amount, their oldest selection will deselect and the recent selection will update.
有時(shí)，您只希望允許用戶選擇一定數(shù)量的項(xiàng)目。 要強(qiáng)制執(zhí)行此操作，如果用戶單擊的次數(shù)多于所選數(shù)量，則他們最早的選擇將被取消選擇，而最近的選擇將被更新。
Checkboxes with forced selection帶有強(qiáng)制選擇的復(fù)選框按鈕樣式(單選/多選) (Button style (single/multi-select))
This style allows you to stack a whole lot of different items on top of each other, which means you get to save space and have more options. Because this pattern isn’t that common, I suggest that you let the user know how many options they can select. While there is no reason to not use this for single selectors, I have never seen it in the wild.
這種樣式使您可以將很多不同的項(xiàng)目彼此堆疊，這意味著您可以節(jié)省空間并有更多選擇。 因?yàn)檫@種模式并不常見，所以建議您讓用戶知道他們可以選擇多少個(gè)選項(xiàng)。 盡管沒有理由不對(duì)單個(gè)選擇器使用它，但我從未在野外看到它。
Button style selector按鈕樣式選擇器This style is very common when asking the user to choose multiple content tags (although they may not be aware of it). In the below example, Apple Music is asking users to select their favourite genres, which will in turn recommend songs and artists based on the user’s selection.
當(dāng)要求用戶選擇多個(gè)內(nèi)容標(biāo)簽時(shí)，這種樣式非常普遍(盡管他們可能不知道)。 在下面的示例中，Apple Music要求用戶選擇自己喜歡的流派，這將根據(jù)用戶的選擇推薦歌曲和歌手。
Apple Music genre selection on register. Image credit: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T Apple Music流派選擇已注冊(cè)。 圖片來源： https : //www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T切換(單選) (Toggle (single select))
The toggle is most often used for settings and allows the user to choose between yes/no options.
切換開關(guān)最常用于設(shè)置，并允許用戶在是/否選項(xiàng)之間進(jìn)行選擇。
On mobile, the toggle itself usually sits on the far right while the label sits on the far left. This is to make it easier for the right thumb to change options.
在移動(dòng)設(shè)備上，切換開關(guān)本身通常位于最右側(cè)，而標(biāo)簽位于最左側(cè)。 這是為了使右手拇指更容易更改選項(xiàng)。
Suhail Gupta / Audiini for picking this up!)Suhail Gupta / Audiini接過 ！)5.國(guó)家 (5. States)
Checkboxes and radio buttons have to change their state/appearance so that users know they have been selected. We need to add these little visual cues to nudge the user in the right direction using patterns that they already know and understand.
復(fù)選框和單選按鈕必須更改其狀態(tài)/外觀，以便用戶知道已被選中。 我們需要添加這些小的視覺提示，以使用他們已經(jīng)知道和理解的模式將用戶向正確的方向移動(dòng)。
默認(rèn)/有效 (Default/active)
This is the starting state of selectors. This state indicates to the user that they can click the items in the questions.
這是選擇器的開始狀態(tài)。 此狀態(tài)向用戶指示他們可以單擊問題中的項(xiàng)目。
Example of radio buttons and checkboxes in their default/active state單選按鈕和復(fù)選框處于默認(rèn)/活動(dòng)狀態(tài)的示例不活躍 (Inactive)
When the inactive state is set, the user won’t be able to interact with the options. It is seldom that a user will encounter this state unless the product rules specify it.
設(shè)置為非活動(dòng)狀態(tài)后，用戶將無法與選項(xiàng)進(jìn)行交互。 除非產(chǎn)品規(guī)則指定，否則很少有用戶會(huì)遇到此狀態(tài)。
Example of radio buttons and checkboxes in their inactive state單選按鈕和復(fù)選框處于非活動(dòng)狀態(tài)的示例徘徊 (Hover)
Like buttons, selectors should indicate to the users that they are interactive or clickable. Usually this is done with highlighting the background of the item on hover. It also indicates what area of the items is clickable. If you hover off it, it should revert to its original state.
像按鈕一樣，選擇器應(yīng)向用戶指示它們是交互式的或可單擊的。 通常，這是通過突出顯示懸停項(xiàng)目的背景來完成的。 它還指示可單擊項(xiàng)目的哪個(gè)區(qū)域。 如果將鼠標(biāo)懸停在它上面，它應(yīng)該恢復(fù)為原始狀態(tài)。
Example of radio buttons and checkboxes in their hover state單選按鈕和復(fù)選框處于懸停狀態(tài)的示例Don’t be a n00b tip: Touch devices don’t have a hover state.
不要成為提示：觸摸設(shè)備沒有懸停狀態(tài)。
重點(diǎn)/突出顯示 (Focus/highlighted)
The focus or highlighted state is usually indicated with a blue halo around the clickable item. You can see this for yourself by tabbing through an interface — which is the same thing someone who is poor sighted or had poor motor skills would do. It is seldom that a user will encounter this state, unless before someone clicks ‘enter’ to select an item.
焦點(diǎn)或突出顯示狀態(tài)通常在可點(diǎn)擊項(xiàng)周圍顯示為藍(lán)色光暈。 您可以通過在界面上切換來親自看到這一點(diǎn)，這與視力不佳或運(yùn)動(dòng)技能較弱的人一樣。 用戶很少會(huì)遇到這種狀態(tài)，除非在用戶單擊“輸入”以選擇一個(gè)項(xiàng)目之前。
Example of radio buttons and checkboxes in their focus/highlight state單選按鈕和復(fù)選框處于焦點(diǎn)/突出顯示狀態(tài)的示例按下 (Pressed)
This is the state where the user holds down their mouse/finger and the item indicates back to the user that it is being clicked.
這是用戶按住鼠標(biāo)/手指，并且該項(xiàng)目向用戶指示其正在被單擊的狀態(tài)。
Example of radio buttons and checkboxes in their pressed state單選按鈕和復(fù)選框處于按下狀態(tài)的示例已選 (Selected)
Once the user has clicked an item, the UI should let them know. As mentioned earlier, radio buttons can only have one selected item, while checkboxes can have multiple, depending on business rules.
用戶單擊項(xiàng)目后，UI應(yīng)告知他們。 如前所述，根據(jù)業(yè)務(wù)規(guī)則，單選按鈕只能選擇一個(gè)項(xiàng)目，而復(fù)選框可以選擇多個(gè)。
Example of radio buttons and checkboxes in their selected state單選按鈕和復(fù)選框處于選定狀態(tài)的示例失敗反饋 (Fail feedback)
With free text input, it is possible for a user to make a typo, etc. However, since the options in a selector are predetermined, there should only be one type of fail feedback: the ‘incomplete’ type, which the user will only receive if they click the ‘submit’ button before they finished filling out the form. For checkboxes, this will only be necessary if the question forces them to choose one or more items.
使用自由文本輸入時(shí)，用戶可以打錯(cuò)字等。但是，由于選擇器中的選項(xiàng)是預(yù)先確定的，因此應(yīng)該只有一種類型的失敗反饋：“不完整”類型，用戶只會(huì)如果他們?cè)谔顚懕韱沃皢螕簟疤峤弧卑粹o，則會(huì)收到。 對(duì)于復(fù)選框，僅當(dāng)問題迫使他們選擇一項(xiàng)或多項(xiàng)時(shí)，才需要這樣做。
Example of radio buttons and checkboxes in their fail state單選按鈕和復(fù)選框處于失敗狀態(tài)的示例6.標(biāo)簽文字規(guī)則 (6. Rules for label text)
There is only one hard and fast rule for selector labels: be consistent.
選擇器標(biāo)簽只有一條硬性規(guī)定： 一致 。
7.什么時(shí)候應(yīng)該使用它們 (7. When you should use them)
When should you use radio buttons or checkboxes? This relies entirely on what question you are asking. If you want your users to select multiple options, use checkboxes. If you want your users to select only one option, use radio buttons (or another alternative).
什么時(shí)候應(yīng)該使用單選按鈕或復(fù)選框？ 這完全取決于您要問什么問題。 如果希望用戶選擇多個(gè)選項(xiàng)，請(qǐng)使用復(fù)選框。 如果希望用戶僅選擇一個(gè)選項(xiàng)，請(qǐng)使用單選按鈕(或另一種選擇)。
何時(shí)使用單選按鈕 (When to use a radio button)
I have four rules about when, or when not to, use radio buttons. They are:
對(duì)于何時(shí)使用或何時(shí)不使用單選按鈕，我有四個(gè)規(guī)則。 他們是：
1. When you only want the user to select one itemIf you want the user to select more than one item then you should rather use checkboxes.
1.當(dāng)您只希望用戶選擇一項(xiàng)時(shí)，如果您希望用戶選擇一項(xiàng)以上，則應(yīng)使用復(fù)選框。
2. If you have fewer than six optionsDepending on your design rules, if there are more than five or six items to choose from, rather use a dropdown. Yes, yes, I know that they are clunky, but they save a lot of space in your design.
2.如果您的選擇少于六個(gè) 根據(jù)您的設(shè)計(jì)規(guī)則，如果要選擇五個(gè)或六個(gè)以上的項(xiàng)目，請(qǐng)使用下拉菜單。 是的，是的，我知道它們很笨重，但是它們?cè)谀脑O(shè)計(jì)中節(jié)省了大量空間。
Comparison of a dropdown and radio buttons下拉菜單和單選按鈕的比較That being said, if space isn’t an issue, maybe consider using radio buttons instead — particularly if you are designing for mobile. I have seen it work well for fast food deliveries.
話雖如此，如果空間不是問題，則可以考慮改用單選按鈕，尤其是在為移動(dòng)設(shè)備設(shè)計(jì)時(shí)。 我已經(jīng)看到它可以很好地用于快餐店。
If you are interested in learning more about dropdowns, check out my previous cheat sheet here:
如果您有興趣了解有關(guān)下拉菜單的更多信息，請(qǐng)?jiān)诖颂幉榭次乙郧暗膫渫鼏?#xff1a;
3. You want to force a selection of oneWhen you select an item in a radio button list, you can’t deselect it. You can select something else and change your selection, but you can’t un-answer the question once you have selected an answer.
3.您想強(qiáng)制選擇一個(gè)。當(dāng)您在單選按鈕列表中選擇一個(gè)項(xiàng)目時(shí)，您不能取消選擇它。 您可以選擇其他內(nèi)容并更改選擇，但是一旦選擇了答案，便無法取消答案。
4. If the question only has two options that are yes/noIf your question is ‘Would you like to receive notifications?’, ‘Play background music?’ etc., then rather use a toggle. They take up much less space, are cleaner, and — because they are a newer selector type — they have the added bonus of being trendy.
4.如果問題只有兩個(gè)選項(xiàng)，則是/否。如果您的問題是“您想接收通知嗎？”，“播放背景音樂？”。 等，然后使用切換鍵。 它們占用的空間少得多，更清潔，并且-因?yàn)樗鼈兪禽^新的選擇器類型-因此，它們具有時(shí)髦的額外好處。
Comparison of radio buttons and a toggle單選按鈕和切換按鈕的比較POST PUBLISH UPDATE:5. If you want your users to click ‘save’ to implement the optionIf you are in a settings page, or in a place where you want to allow the user to umm and err about their options before they click the big green save button - rather use radio buttons (or checkboxes). However, if you want your setting to happen immediately (turning wi-fi on/off) then rather use a toggle.
發(fā)布后更新： 5.如果您希望用戶單擊“保存”以實(shí)現(xiàn)該選項(xiàng)，則如果您位于設(shè)置頁面中，或者要允許用戶在單擊該菜單之前對(duì)其選項(xiàng)進(jìn)行檢查和編輯綠色的大保存按鈕-寧可使用單選按鈕(或復(fù)選框)。 但是，如果您希望設(shè)置立即生效(打開/關(guān)閉wi-fi)，請(qǐng)使用切換開關(guān)。
This suggestion comes from Thomas Veit, so go give them some claps in the comments below :)
這個(gè)建議來自 Thomas Veit ，所以請(qǐng)?jiān)谙旅娴脑u(píng)論中給他們一些鼓掌：)
POST PUBLISH UPDATE:6. If your option’s labels are short, consider using a multiple-choice toggleYou very seldom see this cutie out in the wild, but it is a delight when you do. Multi-choice toggles merge the best of radio buttons and toggles into this little guy. Compact, neat and user friendly. I would only suggest using this if your labels are short — otherwise, it could get a bit hairy on mobile.
發(fā)布后更新： 6.如果選項(xiàng)的標(biāo)簽較短，請(qǐng)考慮使用多項(xiàng)選擇開關(guān)。您很少會(huì)在野外看到這種可愛的東西，但這樣做時(shí)會(huì)很高興。 多選切換器將最好的單選按鈕合并在一起，切換到這個(gè)小家伙。 緊湊，整潔且用戶友好。 我只建議您在標(biāo)簽較短的情況下使用此標(biāo)簽，否則在移動(dòng)設(shè)備上可能會(huì)顯得有些毛茸茸。
Example of a multiple-choice toggle多項(xiàng)選擇切換的示例This suggestion came from Thomas Weitz, so give them some claps in the comments below :)
這個(gè)建議來自 Thomas Weitz ，因此請(qǐng)?jiān)谙旅娴脑u(píng)論中給他們一些鼓掌：)
何時(shí)使用復(fù)選框 (When to use checkboxes)
I have two rules about when to use checkboxes, and here they are:
關(guān)于何時(shí)使用復(fù)選框，我有兩個(gè)規(guī)則，它們是：
1. When you want the user to be able to select multiple options or none at allIf you want your user to be able to add multiple toppings to their pizza, this is the selector for you. The user could select all, some, or none of the checkboxes.
1.當(dāng)您希望用戶能夠選擇多個(gè)選項(xiàng)或根本不選擇任何選項(xiàng)時(shí)如果您希望用戶能夠向其披薩添加多個(gè)澆頭，則這是您的選擇器。 用戶可以選擇全部，部分或不選擇任何復(fù)選框。
2. Single item Follow-up pop quiz: Why is the ‘I have read the terms and conditions’ always a checkbox and not a radio button? Surely it makes sense for it to be a radio button as it is better for ‘yes/no’ type questions?
2.單項(xiàng)后續(xù)流行測(cè)驗(yàn)：為什么“我已閱讀條款和條件”始終是一個(gè)復(fù)選框，而不是一個(gè)單選按鈕？ 將它選為單選按鈕肯定很有意義，因?yàn)樗鼘?duì)“是/否”類型的問題比較好？
Answer: Because you can deselect it. Unlike a radio button with only one item, where you can’t deselect it. If you click it, soz for you: it is now selected FOREVER.
答：因?yàn)槟梢?strong>取消選擇它 。 與僅具有一項(xiàng)的單選按鈕不同，您不能在其中取消選擇它。 如果您單擊它，將為您帶來麻煩：現(xiàn)在將其永久選中。
8.輔助功能清單 (8. Accessibility checklist)
You’ve done it! You have completed designing your selectors, and it is time to ship it off to the development team. But wait! Have you checked that they are accessible first?
你完成了！ 您已經(jīng)完成選擇器的設(shè)計(jì)，是時(shí)候?qū)⑵浣桓督o開發(fā)團(tuán)隊(duì)了。 可是等等！ 您是否檢查過它們首先可以訪問？
Does your selector meet the WCAG AAA colour contrast standards? Some designers use the AA standards instead, but I’m far too paranoid for that. My current favourite contrast checker is WebAIM.
您的選擇器是否符合WCAG AAA色彩對(duì)比標(biāo)準(zhǔn)？ 有些設(shè)計(jì)師改用AA標(biāo)準(zhǔn)，但我對(duì)此非常偏執(zhí)。 我當(dāng)前最喜歡的對(duì)比度檢查器是WebAIM 。
If you want to read more, check out: https://webaim.org/techniques/forms/controls
如果您想了解更多信息，請(qǐng)查看： https : //webaim.org/techniques/forms/controls
9.結(jié)束語 (9. Closing thoughts)
After this cheat sheet, I am going to move away from ‘form’ UI patterns and move onto other types of UI patterns. BUT if you have any requests to look into any other form field types let a girl know in the comments.
在這份備忘單之后，我將離開“表單” UI模式，轉(zhuǎn)而使用其他類型的UI模式。 但是，如果您有任何查詢其他任何表單字段類型的請(qǐng)求，請(qǐng)?jiān)谧⑨屩懈嬷ⅰ?
Stay safe out there Medium friends, the world is a crazy, crazy place right now.
在那兒保持安全中型朋友，世界現(xiàn)在是一個(gè)瘋狂的地方。
翻譯自: https://uxdesign.cc/ui-cheat-sheet-radio-buttons-checkboxes-and-other-selectors-bf56777ad59e
eazy ui 復(fù)選框單選
總結(jié)
以上是生活随笔為你收集整理的eazy ui 复选框单选_UI备忘单：单选按钮，复选框和其他选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [html] http中的301、30
- 下一篇： 初级中级高级_初级职位，（半）高级职位