这是用户在 2024-4-3 13:54 为 https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?

UI cheat sheet: dropdown field

Tess Gadd
UX Collective

Published in
14 min readApr 13, 2020

Dropdowns get a lot of flak from the UI world – and if we are honest, it’s not without reason. Done badly, they become cumbersome, overwhelming, and ugly. But that’s not what this cheat sheet is about. Here we will talk about what to do when you have to use them.

I also want to clarify that there are two main types of dropdowns: those used for navigation and those used in forms. For this cheat sheet’s purpose, we will just be looking at the form variant.

In this cheat sheet, we will go over the following:

  1. Anatomy 解剖学
  2. Dropdown types and variations
  3. Dropdown styles 下拉样式
  4. Dropdown states 下拉状态
  5. What the placeholder should say
  6. When not to use a dropdown (and when to)
  7. Native dropdowns 本地下拉菜单
  8. Accessibility checklist 无障碍设施清单
  9. Closing thoughts 结束语

1. Anatomy 1.解剖学

The anatomy of a dropdown is very similar to that of a text input field - plus a bit more. To compare the two, see this earlier story.

Dropdown field anatomy 下拉字段解剖

2. Dropdown types and variations

While standard dropdowns are widely understood, there are a few different types and variations that you may need to consider for your next endeavour. Please note that for these examples I am only including dropdowns used in forms and not those used in navigation.

Standard dropdown 标准下拉菜单

The standard dropdown is what we think of when we hear the word ‘dropdown’. In its active state, it should look very similar to a text input field until you click on it and it opens up a menu.
一听到 "下拉菜单",我们就会想到标准下拉菜单。在激活状态下,它看起来与文本输入框非常相似,直到你点击它,它才会打开一个菜单。

Standard dropdown 标准下拉菜单

Dropdown with autosuggest

I love these sexy bad boys. The first time I was aware of autosuggest was in Google’s search field; however, I have no idea where it was first implemented. (Let me know if you do.) It is especially useful when you have long lists where the user already knows the answer (e.g. what country you are from).

Dropdown with autosuggest

Dropdown with autocomplete and autosuggest

Autosuggest isn’t to be confused with autocomplete. Autosuggest is when the input field reveals options for the user to select from. Autocomplete is when the input puts forward a way to complete the word or phrase.

Dropdown with autocomplete and autosuggest

Autocomplete fields are sometimes disguised as text inputs until you start typing.

Dropdown with multi-select

While most dropdowns are an extension of radio buttons (in that you can only choose one item), this dropdown is an extension of checkboxes: the user can select multiple items in one input field.

Dropdown with a multi-select

If possible, try to avoid this guy. I’ve had to use it due to an insanely long list of categories, and I still wake up at night in cold sweats over that decision. Ideally, one would want an autosuggest & autocomplete combo.

Dropdown with groups 带组的下拉菜单

While long dropdowns are not ideal, you can group some of the items under different categories to make searching for what you want easier.

Dropdown with groups 带组的下拉菜单

Multiple select menu 多选菜单

While not technically a dropdown, a multiple select menu is an alternative to consider. Unlike a dropdown, they are open from the start and are basically a little scroll window.

Fixed scrollable menu 固定滚动菜单

While they are fine for desktop, they are kind of awful for mobile as they are a ‘scroll within a scroll’.
虽然它们在台式机上还不错,但在移动设备上就有点糟糕了,因为它们是 "滚动中的滚动"。

I, personally, have only ever used this pattern once (under duress, I might add), and I seldom see them in the wild. If anyone has any more information on them, please let me know in the comments :)

Date picker 日期选择器

Date pickers should only be used for scheduling meetings, events, etc. Having a calendar with the days of the week is great for helping you decide when to organise brunch but is incredibly annoying if you want to enter your passport expiry date. I like the ones where you can type as well as select from the dropdown – just make sure the input is clever enough to add ‘/’ between your months, days, and years, otherwise it gets a bit confusing.

Date picker 日期选择器

Tess’s guide on how to make people hate you:

  1. When asking people to enter the day their card or passport expires, give them calendar dropdown menu. They especially care to see exactly what day of the week that their card will expire.
  2. When asking users to input their date of birth, use a dropdown calendar. Bonus points: Make sure that the only way that they can navigate through the years is by clicking through each month. Bonus bonus points: This design pattern is especially useful on online forms for retirement home applications.

Date pickers and date range pickers are complicated beasts, so I haven’t gone into too much detail here, but maybe one day I will do a special date picker cheatsheet. Maybe.

3. Dropdown styles 3.下拉样式

Unlike dropdown types, ‘dropdown styles’ refers to how the dropdown actually looks and not how it works. Below I have listed some of the common styles.
与下拉类型不同,"下拉样式 "指的是下拉的实际外观,而不是其工作方式。下面我列出了一些常见的样式。

Standard style (attached)

I call this style the ‘standard’ because it is what we are most used to seeing.
我称这种风格为 "标准",因为它是我们最常见的风格。

Standard style (attached)

Standard style (detached)

I am seeing the style with the detached menu more and more. Which makes sense as it allows the menu to sit above or below the field depending on the browser viewport.

Standard style (detached)

Rounded borders 圆形边框

Rounded borders work great with UIs that have a more playful persona.

Rounded borders 圆形边框

With icons 带图标

Adding a simple icon to the beginning of an input can make it look more ‘designed’. Whenever someone complains that a form looks too boring (‘Well Steve, its a form with 20 inputs – what did you think it was going to look like?’), I just add icons. It is a simple fix.
在输入的开头添加一个简单的图标,可以让输入看起来更有 "设计感"。每当有人抱怨表单看起来太无聊时("史蒂夫,这是一个有 20 个输入项的表单,你以为它会是什么样子?这是一个简单的修复方法。

Dropdown with an icon 带图标的下拉菜单

Lazy Designer Tip: If someone complains about a long form looking boring just add icons. It’s a tried and true method that requires almost no effort and your product owner will think you are the best thing since Sunday morning pancakes.

With images 附图片

As a rule, I avoid adding images to items in a dropdown – just because the maintenance behind having to update it is a pain, especially if it is a list that changes a lot. However, it is very useful when you want to show the difference between things (dog breeds, cakes, office furniture, etc).

Dropdown with images. Photos from Unspalsh. Photo credits: Strawberry cake — @alinasagirova , Cheese cake — @patuphotos, Chocolate cake — @tuvaloland
带图片的下拉菜单。照片来自 Unspalsh。照片来源草莓蛋糕 - @alinasagirova , 奶酪蛋糕 - @patuphotos, 巧克力蛋糕 - @tuvaloland

However, I am of the opinion that, due to the limited size in a dropdown, it is very difficult to see what the images are (see above graphic) so it usually isn’t worth the effort unless you make the images really big.

Material Design’s filled dropdowns
Material Design 的填充式下拉菜单

Readers of the cheat sheet series will know that I am a big fan of Material Design, including their dropdowns.
小抄系列的读者都知道,我是 Material Design(包括其下拉菜单)的忠实粉丝。

The ‘line only’ field is no longer in use in the Material Design guidelines, but you will still see it lurking around the internet. If you want to learn more, I wrote about this in the previous cheat sheet and Dave Chui replied here.
在 Material Design 指南中,"仅线条 "字段已不再使用,但你仍然可以在互联网上看到它的身影。如果你想了解更多,我在之前的小抄中写到过这个问题,Dave Chui 也在这里做了回复。

Material Design’s line dropdown
Material Design 的线条下拉菜单

The ‘line only’ field was replaced with the ‘filled dropdown’ and it seems to be doing better in user testing. Not as cool, but much more user-friendly – and that’s what it is all about, folks.
只限行 "字段已被 "已填充下拉菜单 "所取代,在用户测试中似乎效果更好。虽然没有那么酷,但更方便用户使用--这就是它的意义所在,各位。

Material Design’s filled dropdown
Material Design 的填充下拉菜单

Material Design’s outlined dropdowns
Material Design 的概述下拉菜单

Like their outlined text fields, Material Design’s outlined dropdowns are super cool. Their menu is detached from the actual dropdown container which can help with some usability issues.
与勾勒出的文本字段一样,Material Design 的勾勒出的下拉菜单也非常酷。它们的菜单与实际的下拉容器是分离的,这有助于解决一些可用性问题。

I am sure you all would have seen this sexy little animation where on-focus the label gets smaller at the top of the input . I would also like to point out something that often gets overlooked (by me): If you look at the actual dropdown, you will notice that the first item is blank. This is so that the user can ‘reset’ the dropdown if they want to come back to that question later or to leave it blank.
我相信大家都看过这个性感的小动画,在对焦时,输入顶部的标签会变小。我还想指出一些经常被(我)忽略的地方:如果查看实际的下拉菜单,你会发现第一个项目是空白的。这样用户就可以 "重置 "下拉菜单,以便日后再返回该问题或将其留空。

Material Design’s outlined dropdown
Material Design 的概述下拉菜单

4. Dropdown states 4.下拉状态

When a user interacts with an input of any sort, the input should switch states or appearances to give the user feedback. Here we will be looking at the different states of dropdowns.

Active state 活动状态

The active state is what the dropdown will look like before the user has interacted with it.

Active state 活动状态

Disabled 残疾

If you disable an input field, users won’t be able to interact with it but they will be able to see it. You may use this if your business rules require it, but that probably won’t be very often.

Disabled state 禁用状态

Hover 悬停

If the user hovers over a dropdown, it should indicate that it is clickable.

Hover state 悬停状态

N00b tip: You can’t hover on touch devices, so don’t design states for these if you are designing for mobile or tablet apps.

Highlight state 突出状态

The highlighted state is when a user is using a tabbing map (this is when a user uses ‘tab’ to navigate an interface and ‘enter’ to input information) and highlights the dropdown before selecting it. We typically see this as the ‘blue halo’ on clickable items.
高亮状态是指用户在使用制表图时(这是指用户使用 "制表符 "浏览界面,使用 "回车键 "输入信息),在选择下拉菜单前将其高亮显示。我们通常将其视为可点击项目上的 "蓝色光晕"。

However, some sites combine the highlight and focus state so that even if the user doesn’t click ‘enter’, the dropdown opens straight away. I am torn as to what is the best system. Logically, combining the two states makes sense; however, I get so confused when dropdowns open without me explicitly telling them to. Has anyone else had experience with this? Let me know in the comments.
不过,有些网站会将高亮和焦点状态结合起来,这样即使用户不点击 "回车",下拉菜单也会直接打开。我很纠结什么是最好的系统。从逻辑上讲,将两种状态结合在一起是合理的;但是,如果下拉菜单在我没有明确指示的情况下打开,我就会感到非常困惑。其他人有这方面的经验吗?请在评论中告诉我。

Alternative highlighted states

Focus state 聚焦状态

Focus state is when the item is interactable. Once you have clicked on the dropdown, it will open up a menu and display its options.

While a lot of the drops downs I have interacted with keep the arrow pointing in the same direction in both active and focus states, I prefer to swop the arrow’s direction. I think of them in the same way as an accordion. And if you are super cool, you can animate the arrow’s change in direction.

Focus state 聚焦状态

As the user hovers over the items in the menu, it should display which option is being hovered over.

Focus state with hover 悬停时的焦点状态

Completed input 已完成输入

Once the user has chosen an option, the input should snap or animate back to the active state, except it will have the chosen item displayed.

Completed input 已完成输入

Fail feedback 失败反馈

With free text input, it is possible for a user to make a typo, etc. However, since the options in a dropdown 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.
在自由文本输入中,用户有可能出现错别字等情况。但是,由于下拉菜单中的选项是预先确定的,因此应该只有一种失败反馈:"未完成 "类型,只有当用户在填写表格之前点击 "提交 "按钮时才会收到这种反馈。

Fail feedback 失败反馈

5. What the placeholder should say

As a general rule, I would keep the placeholder/prompt text similar to that of your free text fields. Still not sure? Here are a few options for you:

Leave the placeholder blank

Leaving the placeholder blank is usually the easiest option if the other text fields don’t have placeholders.

Dropdown with a blank placeholder

Have a generic prompt in the placeholder

‘- Select -’, ‘Choose’, etc. are the classic prompts to put in a dropdown.
选择-"、"选择 "等都是下拉菜单中的经典提示。

Dropdowns with generic prompts

Having a promoting phrase in the placeholder

Using a generic ‘Select’/‘Choose’ and then the thing you want them to select is a kind of cool way to keep a level of consistency across your dropdowns but also to give your users a prompt as to what to do.
使用通用的 "选择"/"Choose",然后再选择你想让他们选择的东西,这是一种很酷的方法,既能保持下拉菜单的一致性,又能提示用户该做什么。

Dropdowns with a generic combo

Surface an option in the placeholder

While you have the option to surface a preselected item in a dropdown, you do have to be careful to make sure the that the user has seen and read it – otherwise they may be consenting to something they wouldn’t want to. #classicDarkPatternMove

Dropdown with a surfaced option as a placeholder

So what option should you choose? When in doubt, opt for consistency. If your text fields all have placeholders, use placeholders.

6. When not to use a dropdown (and when to)

This is dedicated to all the sites that make me input my year of birth using a dropdown: f*** you. I don’t need any more reminder of my rapidly increasing age by scrolling through a whole list of months until I eventually find the year I was born.

If you have fewer than five options

If you have fewer than five options, it is probably easier to use radio buttons instead of using the extra click to get to all the list options. Anything more than five options starts to take up a lot of space.
如果选项少于 5 个,使用单选按钮可能会更方便,而不需要额外点击来查看所有列表选项。超过五个选项就会占用大量空间。

Dropdown alternative: If you have fewer than five options

Note: Some people say that the rule should be fewer than six, not fewer than five, but I, but I will let you be the judge of that.
注:有人说,规则应该是少于 6 个,而不是少于 5 个,但我,还是让你们来判断吧。

If it would be easier to type than to select

If it would take your user less time to type than to select something from a dropdown, do you really have to ask which is better? For a birth date, for example, it would be easier to type the date than to use three separate dropdowns.

Dropdown alternative: If it is easier to type

Sometimes developers may argue against this, as it is easier to make a dropdown than to set up all the rules about what users can and can’t enter in free text fields. I alas, have lost this battle many times, but I continue to fight the good fight.

If you have two options and they are ‘on’ and ‘off’ (or ‘yes’ and ‘no’)
如果您有两个选项,且分别为 "开 "和 "关"(或 "是 "和 "否"),则

Having a dropdown with two options is a bit annoying. Especially with ‘yes/no’ questions. Toggles solve this nicely for these types of questions.
有两个选项的下拉菜单有点恼人。尤其是 "是/否 "问题。对于这类问题,切换按钮可以很好地解决这个问题。

Dropdown alternative: If you have a two-option question

If the options are numeric

If your options are numeric, you have a few options.

The first is, once again, letting them type it out. Steppers are also helpful, but I would only suggest this if the behaviour is expected to go to max five. Otherwise, your poor user will be sitting there clicking to 100.
首先,还是让他们打出来。步进器也很有帮助,但我只建议在预期行为达到最大值 5 时使用步进器。否则,你可怜的用户就会坐在那里点击到 100。

Dropdown alternative: If your options are numeric

The second is using a slider to select the value. Sliders are especially helpful for larger numbers or approximations.

Dropdown alternative: If the options are a number
Dropdown alternative: If the options are a range

If there are a lot of options

If there are a lot of options in a dropdown (which you should avoid if possible), let the user ‘search’ for their option. The most common time to see this type of behaviour is with country dropdowns, as they are vast but also easy to answer. As mentioned earlier, this is best paired with an autocomplete.
如果下拉菜单中有很多选项(应尽可能避免),应让用户 "搜索 "其选项。这种行为最常见于国家/地区下拉菜单,因为这些下拉菜单内容繁多,但也很容易回答。如前所述,最好与自动完成功能搭配使用。

Dropdown alternative: If there are a lot of options BUT the user does knows their answer before they click the dropdown

So, when should you use a dropdown?

An input needs to meet two requirements for me to consider using a dropdown:

  1. There are more than six options.
  2. When the options aren’t something that a user would know straight away. For example, imagine your user was uploading a video and the host needed to know what kind of licence to attach to the video. An average user wouldn’t know all the options available on the platform, making a dropdown necessary.

7. Native dropdowns 7.本地下拉菜单

We tend to use native or default options when time and budget is tight or when we are working on an MVP. Having custom inputs are the frosting on the cake, but sometimes we don’t have the option to make that sweet, sweet icing. In that instance, it is good to know what you have to work with.
当时间和预算紧张或正在开发 MVP 时,我们倾向于使用本地或默认选项。自定义输入是蛋糕上的糖霜,但有时我们无法选择制作甜美的糖霜。在这种情况下,了解自己的工作情况是很有必要的。

Native dropdowns are just safer as well when it comes to usability across different devices.

Our large-scale checkout usability testing and benchmarking reveal that while 82% of e-commerce sites use custom designed drop-downs in the checkout flow, 31% of all custom designed drop-downs have significant usability issues.
我们的大规模结账可用性测试和基准测试显示,虽然 82% 的电子商务网站在结账流程中使用定制设计的下拉菜单,但所有定制设计的下拉菜单中有 31% 存在严重的可用性问题。

- Christian Holst, view story here
- 克里斯蒂安-霍尔斯特,点击此处查看报道

The defaults 默认值

Here are some examples of native dropdowns in the wild. To try for yourself, go here: https://html.com/attributes/option-selected/
下面是一些原生下拉菜单的示例。要亲自尝试,请访问此处: https://html.com/attributes/option-selected/

Native mobile dropdowns | https://html.com/attributes/option-selected/
本地移动下拉菜单 | https://html.com/attributes/option-selected/
Native desktop dropdowns https://html.com/attributes/option-selected/
本地桌面下拉菜单 https://html.com/attributes/option-selected/

As you can see in these examples, they are all slightly different depending on their platform and browser. They aren’t pretty, but they are very usable.

Using a shell 使用外壳

I used to call this ‘semi-custom’, but I recently found an article that called this pattern a shell – and that sounds far more official. So I vow to henceforth call it a shell, and I also vow to use it in meetings and bask in the power of people asking me what it means, just so that I can show off how clever I am.
我以前称它为 "半定制",但最近我发现一篇文章称这种图案为 "贝壳"--这听起来要正式得多。因此,我发誓从今以后就叫它 "壳",我还发誓要在会议上使用它,并沉浸在人们问我这是什么意思的喜悦中,这样我就可以炫耀自己有多聪明了。

‘BUT what is a shell?’, you ask. A shell is when a field looks custom, but when you click it, it uses the native dropdown styling. This is a simple way of keeping the style of the page looking consistent with your brand and lowering dev cost. It also helps with all the UX issues that come with custom fields.
你会问 "但什么是外壳?外壳是指一个字段看起来是自定义的,但当你点击它时,它会使用原生的下拉样式。这是一种保持页面风格与品牌一致并降低开发成本的简单方法。它还有助于解决自定义字段带来的所有用户体验问题。

Shell dropdown 外壳下拉菜单

8. Accessibility checklist

  1. Is the active state of the dropdown (label included) more than 44px? (We include the label in this because if you click the label, the dropdown should still open.)
    下拉菜单(包括标签)的活动状态是否大于 44px? 我们之所以将标签包括在内,是因为如果点击标签,下拉菜单仍应打开)。
  2. Is each line item in the dropdown menu more than 44px high with 8px in between?
    下拉菜单中每一行的高度是否超过 44px,中间间隔 8px?
  3. Do the colours meet the AAA compliance standards?
    颜色是否符合 AAA 合规标准?
  4. Does your dropdown have a highlighted state?
  5. Make sure that the dropdowns work on a tabbing map.
  6. If you do use a custom dropdown, make sure that it can open up or down in the instance that the browser viewport is too low down.

And, when in doubt, go visit https://webaim.org/techniques/forms/controls
如有疑问,请访问 https://webaim.org/techniques/forms/controls

AsAs 由于 my usual reader will know, it’s been a while since I have written one of these, and I am sorry it has taken so long. But, by golly, it’s good to back. And, you know, there’s nothing like a global pandemic to get you back to writing.

Dropdowns get a lot of hate – and rightly so. But sometimes there are few feasible alternatives, and, if that is the case, you should make your ugly little dropdowns the best that they could possibly be.

More from Tess Gadd and UX Collective
来自 Tess Gadd 和 UX Collective 的更多信息

Recommended from Medium Medium 推荐

Lists 列表

See more recommendations