详解网页“下拉菜单”结构与用户体验

Sponsor

前言：下拉菜单虽然不是主要视觉元素，但它在操作的交互体验中十分重要，尤其是做后台管理的项目，有下拉表单的页面就非常之多，如果做得体验不好，就会引起用户的反感，前期我们介绍过表单的优化，今天的文章中将详解网页下拉菜单的结构剖析，并通过一些案例说明如何提升它的用户体验，不要小看这些小部件，学问可多着呢，下面我们来一起学习吧。

下拉菜单主要有两种类型：

1. 用于导航的下拉菜单
2. 用于表单的下拉菜单

在本文中，我们将对以下内容进行介绍：

1、 结构剖析

下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。

2、下拉菜单类型和变体

虽然标准的下拉菜单被广泛理解，但有一些不同的类型和变体，你可能需要在下一步的工作中考虑。请注意，在这些例子中，我只包括表格中使用的下拉菜单，而不包括导航中使用的下拉菜单。

标准下拉菜单
标准下拉菜单是我们听到 “下拉菜单 “这个词的时候会想到的。在活动状态下，它看起来应该和文本输入字段非常相似，直到你点击它，它就会打开一个菜单。

带自动推荐的下拉菜单

我第一次知道自动推荐是在Google的搜索领域；然而，我不知道它是在哪里开始实施的。(如果你知道，请告诉我。)当你有长长的列表，用户已经知道答案的时候，它就特别有用(例如，你来自哪个国家)。

具有自动完成和自动推荐功能的下拉菜单

自动建议不要与自动完成混淆。自动建议是当输入字段显示供用户选择的选项时。自动完成是指输入提出一种完成单词或短语的方法。

自动填写字段有时会伪装成文字输入，直到你开始打字为止。

带多选的下拉菜单

虽然大多数下拉菜单是单选按钮的延伸（因为你只能选择一个项目），但这个下拉菜单是复选框的延伸：用户可以在一个输入字段中选择多个项目。

如果可能的话，尽量避开这种类型。我不得不使用它，因为一个超长的分类列表，我晚上醒来后仍然为这个决定出了一身冷汗。理想情况下，人们会希望有一个自动推荐&自动完成的组合。

带分组的下拉菜单

虽然长的下拉菜单并不理想，但你可以将一些项目归类到不同的类别下，这样可以更容易找到你想要的东西。

多重选择菜单

虽然严格来说不是下拉菜单，但多选菜单是一个可以考虑的替代方案。与下拉菜单不同的是，它们从一开始就打开，基本上是一个小小的滚动窗口。

虽然它们在桌面上很好，但对于移动端来说就有点糟糕了，因为它们是一个 “卷轴中的滚动”。

日期选择器

日期选择器应该只用于安排会议、活动等。有一个星期的日期日历可以帮助你决定何时安排早午餐，但如果你想输入护照的到期日期，就会非常烦人。我喜欢那些既可以输入，也可以从下拉菜单中选择的日历–只要确保输入的内容足够聪明，可以在月、日、年之间加上”/”，否则就会有点混乱。

3、下拉样式

与下拉类型不同的是，”下拉样式 “指的是下拉的实际外观，而不是它的工作方式。下面我列出了一些常见的样式。

标准样式

我称这种风格为 “标准”，因为这是我们最常看到的。

标准样式（分离式）

我越来越多的看到了分离式菜单的风格。这是很有意义的，因为它允许将菜单放在字段的上方或下方，这取决于浏览器的视口。

圆角边框

圆形的边框与具有更多游戏性的UI配合起来效果很好。

带图标

在输入的开头添加一个简单的图标可以让它看起来更有 “设计感”。每当有人抱怨一个表单看起来太无聊时，我就会添加图标。这是一个简单的解决方法。

小贴士：如果有人抱怨长表格看起来很无聊，只需添加图标即可。

带图像

作为一项规则，我避免在下拉菜单中添加图片—-只是因为必须更新背后的维护很麻烦，尤其是当它是一个经常变化的列表时。然而，当你想显示事物之间的区别时（狗的品种、蛋糕、办公家具等），它是非常有用的。

然而，我认为，由于下拉式的尺寸有限，很难看清图片是什么（见上图），所以除非你把图片做得非常大，否则通常不值得努力。

Material Design的填充下拉菜单

我是Material Design的忠实粉丝，包括他们的下拉菜单。

在Material Design指南中，”仅限行 “字段已经不再使用，但你仍然会在网上看到它。

仅限行 “字段被替换成了 “已填写的下拉菜单”，在用户测试中似乎做得更好。虽然没有那么酷，但更方便用户使用–这就是它的意义所在，伙计们。

Material Design的简要下拉菜单

就像他们的概要文本字段一样，Material Design的简要下拉菜单超级酷。他们的菜单与实际的下拉式容器分离，这可以帮助解决一些可用性问题。

我敢肯定，大家都会看到这个性感的小动画，它的焦点在输入的顶部变小。我还想指出一些经常被（我）忽略的内容：如果查看实际的下拉列表，您会注意到第一项是空白的。这样一来，如果用户想稍后再返回该问题或将其留空，则可以“重置”下拉列表。

4、下拉状态

当用户与任何类型的输入交互时，输入应该切换状态或外观来给用户反馈。这里我们将研究一下下拉菜单的不同状态。

活动状态

活动状态是用户在与下拉菜单交互之前的样子。

禁用状态

如果你禁用了一个输入字段，用户将无法与之交互，但他们可以看到它。如果你的业务规则需要，你可以使用这个功能，但可能不会经常使用。

悬停

如果用户将鼠标悬停在下拉菜单上，它应该表示可以点击。

N00b提示：你不能在触摸设备上悬停，所以如果你是为移动或平板电脑应用设计，就不要设计这些状态。

高亮状态

高亮的状态是指用户在使用分页地图时（这是指用户使用 “tab “导航界面和 “回车 “输入信息时），在选择前突出显示下拉菜单。我们通常看到的是可点击项目上的 “蓝色光环”。

然而，有些网站将高亮和焦点状态结合在一起，这样即使用户不点击 “输入”，下拉菜单也会直接打开。我对什么是最好的系统很纠结。从逻辑上讲，将这两种状态结合起来是有意义的；但是，当下拉菜单在没有我明确告诉他们的情况下打开时，我感到非常困惑。还有人有过这样的经验吗？请在评论中告诉我。

焦点状态

焦点状态是指项目可交互的时候。一旦你点击了下拉菜单，它就会打开一个菜单并显示其选项。

虽然我所交互的很多下拉菜单在活动状态和聚焦状态下都会保持箭头指向同一个方向，但我更喜欢切换箭头的方向。我认为它们就像手风琴一样。而且如果你超级酷的话，你可以用动画的方式来改变箭头的方向。

当用户将鼠标悬停在菜单中的项目上时，它应该显示被悬停在哪个选项上。

已完成的输入

一旦用户选择了一个选项，输入端就会自动恢复到活动状态，只是它将显示所选项目。

失败反馈

在自由文本输入的情况下，用户有可能会出现错别字等。但是，由于下拉菜单中的选项是预先设定好的，所以应该只有一种类型的失败反馈：”不完整 “类型，用户只有在填写完表格之前点击 “提交 “按钮，才会收到这种反馈。

5、占位符应该说什么

一般情况下，我会保持与自由文本字段类似的占位符/提示文字。还是不确定？这里有几个选项供您选择。

保持占位符空白

如果其他文本字段没有占位符的话，留空占位符通常是最简单的选择。

在占位符里有一个通用提示

‘-选择-‘、’选择’等都是下拉菜单中的经典提示。

在占位符里有一个推广词

使用通用的’Select’/’Choose’，然后你想让他们选择的东西，这是一种很酷的方式，可以让你的下拉菜单保持一致性，同时也可以给用户一个提示，让他们知道该怎么做。

在占位符中设置一个选项

虽然你可以在下拉菜单中选择一个预选项目，但你必须小心翼翼地确保用户已经看到并阅读了它，否则他们可能会同意一些他们不愿意看到的东西。
#classicDarkPatternMove

那么，你应该选择什么方案呢？当有疑问时，选择一致性。如果你的文本字段都有占位符，那就使用占位符。

6、何时不使用下拉菜单(以及何时使用)

这是献给所有让我用下拉菜单输入出生年份的网站：f*****你。我不需要再通过滚动浏览一整个月的列表来提醒我的年龄迅速增长，直到我最终找到我出生的年份。

如果你只有不到5个选项

如果你的选项少于5个，可能更容易使用单选按钮，而不是使用额外的点击来获得所有的列表选项。任何超过五个以上的选项都会开始占用很多空间。

注：有人说，规则是应该少于6个，而不是少于5个，还是让你来判断吧。

如果说打字比选字更方便的话

如果你的用户打字的时间比从下拉菜单中选择东西要少，你真的要问哪个更好吗？例如，对于一个出生日期，输入日期比使用三个单独的下拉菜单更容易。

有时候，开发者可能会反对这样做，因为做一个下拉菜单比设置所有关于用户可以和不能在自由文本字段中输入什么的规则更容易。唉，已经输掉了这场战斗很多次，但我还是继续打好这场战斗。

如果你有两个选项，而且它们是 “开 “和 “关”（或 “是 “和 “否”）。

有一个有两个选项的下拉菜单有点烦人。特别是在 “是/否 “问题上。Toggles可以很好地解决这类问题。

如果选项是数字式的

如果你的选项是数字，你有几个选择。

第一种是，再次让他们打出它。步进器也是有帮助的，但我只有在行为预期到最大5的时候才会建议这样做。否则，你可怜的用户会坐在那里点击到100。

第二种是使用滑块选择值。滑块对于较大的数字或近似值特别有帮助。

如果有很多选择

如果一个下拉菜单有很多选项（如果可能的话，你应该避免这种情况），让用户 “搜索 “他们的选项。最常看到这种类型的行为的时候是国家下拉菜单，因为它们很庞大，但也很容易回答。正如前面提到的，这最好是与自动填写配对。

那么，什么时候应该使用下拉式菜单呢？

一个输入需要满足两个要求才能考虑使用下拉菜单。

01.有六个以上的选项。

02.当选项不是用户直接就能知道的时候。例如，假设你的用户正在上传一个视频，而主机需要知道要在视频中附加什么样的许可证。一般的用户不会知道平台上所有的选项，所以下拉菜单是必要的。

7、原生下拉菜单

当时间和预算紧张时，或者当我们在做MVP时，我们倾向于使用原生或默认选项。拥有自定义的输入是蛋糕上的糖霜，但有时我们没有选项来做那个甜蜜的糖霜。在这种情况下，知道你有什么东西可以用就好了。

当涉及到不同设备之间的可用性时，原生下拉菜单也是比较安全的。

我们的大规模结账可用性测试和基准测试显示，虽然82%的电子商务网站在结账流程中使用自定义设计的下拉菜单，但31%的自定义设计的下拉菜单有明显的可用性问题。

默认值

下面是一些原生下拉式的例子。

从这些例子中可以看到，它们都因平台和浏览器的不同而略有不同。它们并不漂亮，但都很好用。

使用shell

以前我一直把它叫做 “半定制”，但最近我发现一篇文章把这个图案叫做外壳，听起来更正式。所以我发誓从今以后要把它称为 “壳”，我还发誓要在会议上使用它，并在人们问我它是什么意思的时候，我就会陶醉在它的力量中，这样我就可以炫耀我有多聪明。

但是什么是shell？你会问。shell是指当一个字段看起来是自定义的，但当你点击它时，它使用了原生的下拉菜单样式。这是一个简单的方法，可以让页面的风格与你的品牌保持一致，并降低开发成本。它还可以帮助解决自定义字段带来的所有用户体验问题。

8、无障碍检查表

1.下拉菜单的活动状态(包含标签)是否大于44px(我们把标签包含在其中，因为如果点击标签，下拉菜单应该还能打开)。

2.下拉菜单中的每一行的高度是否大于44px，中间有8px？

3.颜色是否符合标准？

4.你的下拉菜单是否有高亮的状态？

5.确保下拉菜单能在标签地图上工作。

6.如果你确实使用了自定义的下拉菜单，请确保它可以在浏览器视口太低的情况下向上或向下打开。

看到这里想必你已经看完了，希望你能掌握它们，并应用到实践中去。这里你需要反复的实践和练习并熟练的掌握他们。

作者 | 追波范儿
来源 | 追波范儿（id:dribbbledesign）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。