表单中使用的下拉菜单有优势，但也有一些缺点和问题，那么我们如何正确设计下拉菜单呢？

在表单中使用下拉菜单有很多好处：

它们不占用UI上的大量空间;

支持自动验证输入;

它们受到所有浏览器和平台的支持;

它们既方便又便宜，用户熟悉它们;

同时，虽然下一个菜单是最常被滥用的表单控件之一，但它也被认为是“应该是最后的手段”。

让我们来看看一些限制和关注点：

（1）使用下拉菜单时，在点击展开之前无法一目了然地看到菜单选项，因此用户无法预测是否有2个或50个选项。

（2）从下拉列表中选择一个选项（特别是在移动设备上）很麻烦：

您必须单击下拉列表才能打开选项列表;

滚动并浏览项目以选择项目;

然后关闭下拉菜单。

（3）设计师设计下拉菜单更容易：只需将所有可能的选项添加到下拉列表中，无需考虑优先级（类似于汉堡菜）;

（4）更长的下拉菜单（例如国家/地区选择器）可能很难找到，尤其是在没有搜索功能的移动设备上;

（5）列表中的可见和可滚动区域很小，并且在某些移动屏幕上滚动选项是不方便的。

但是，除了下拉菜单外，还有许多替代输入控件可以更适合特定场景。

首先，考虑选项的数量

1.例如：下表中的示例1（开/关）决定，使用下拉菜单是一个非常糟糕的选择，应使用复选框或切换开关。

例1

2.如果选项较少，建议使用单选按钮或分段控件，以便在不打开列表的情况下立即显示所有选项。

例2-1

例2-2

3.如果选项数量很大，并且当用户确切知道他们要查找的内容时，请考虑< ;;开始打字… ”的解决方案，而不是滚动列表。允许用户输入，仅显示已过滤的选项，节省查看列表的时间。

例3

4.对于大型且多样化的列表，您可以使用现有用户数据来确定选项的优先级，并仅为用户列出最受欢迎的选项。这样，90％的用户可以立即找到自己的偏好，只有10％的用户需要选择其他，然后在下一个问题中选择。

虽然“其他”似乎并不完美，但它可以改善大多数用户的体验。

其次，考虑哪些场景需要用户输入

1.下拉列表的一个好处是用户不必输入太多内容。但是，如果输入不需要太长并且经常被查询（例如，个人信息），则输入通常更容易，而不是从列表中选择。

使用数字键盘，在移动设备上输入出生年份比滚动长列表更容易

2.一般来说，在手机上输入数字通常比使用菜单选择数字更方便。

即使数字下拉列表的排序顺序清晰，输入仍然比滚动

3.如果需要验证用户的输入，请使用输入字段进行搜索，并在键入时过滤掉可供用户选择的选项。

在美国列出州时，只需输入一个字母即可过滤列表

4.当选项的订购顺序不明确时，在选项列表中搜索的功能特别有用。

货币的排序顺序可能不明确，因此请确保他们可以搜索名称和货币代码

例如：国家/地区列表：不是一次列出超过200个国家/地区名称，而是通过输入和过滤来帮助用户。

5.为了指示准确数量的值（例如乘客购物车中的物品数量），可以允许用户通过点击快速增加或减少数量。

6.对于刻度上的不准确值，请使用滑块。

7.使用多个选择菜单时，选择日期可能会非常痛苦，因此要输入最近的日期，您需要使用日期选择器。 （但是用它来进入更远的日期是不方便的）

第三，如何使下拉菜单更加智能化

不言而喻，永远不应该避免使用下拉菜单。当选择菜单是最合适的输入控制时，请根据以上情况设计，设计更方便。

使用有意义的副本：即使列表已打开，您仍然可以看到它。在选择菜单中，使用描述性副本告诉用户他们正在选择什么（即“选择类别”而不是”请选择”）。

以合理的方式对项目进行排序：根据用户数据，尝试将最常用的选项放在列表顶部，或者甚至默认选择最常用的选项。

首先选择用户的默认设置：手机和浏览器有办法知道用户的位置，日期和其他信息，使用此数据为每个用户预先选择最可能的选项。

减少字段数量并完成计算机：如果用户输入邮政编码，则计算机会在不询问的情况下了解城市和州。如果用户输入信用卡号，则计算机已经知道信用卡信息，并且不需要询问。

考虑使用API​​：使用微信，QQ注册比填写注册表更容易。使用Paypal支付比输入信用卡数据容易得多。

原作者：Zoltan Kollin

原始链接：https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53

本文由@VisualCChttps://www.jianshu.com/u/badb859277de发布。未经许可，禁止复制

该地图来自Unsplash，基于CC0协议

« 如何进行关键字布局？ | 响应式网页设计:布局 »