第1个回答 2022-07-06
前三篇说了表单中的"输入框"、“单选按钮”、“复选框”，那这次就说下拉列表。
下一篇说文本域和按钮。
众所周知没有任何人，愿意填写表单，输入框让过程看起来会变得很复杂。那此时就会用到另外一个组件就是 - 下拉列表。
他所包含的是选项，因为不需要让用户去进行输入，所以就可以防止用户在输入时带来错误这问题了。
实际在设计中，下拉列表也有很多的“弊端”，所以需要尝试不同的方法去解决问题。
· 下拉列表组成
· 下拉列表步骤
· 下拉列表提示也很重要
· 合理排列下拉选项
· 下拉列表选项数量
· 下拉列表还能做的更多
· 简单的数字可以输入
· 选日期没那么麻烦
· 步进器原则
· 步进器组成
· 滑块原则
· 滑块的细节
· 最后
下拉列表由标签[Label]、下拉的列表和选项组成，下拉列表常见的选择为单选。
呼出下拉列表的步骤：点击下拉列表控件→展开列表→滚动扫描列表选择选项关闭→关闭下拉列表。
在输入框中有个元素叫暗提示[placeholder]，作用是在用户填写信息时提供帮助，这条原则也同样适用于下拉列表。这个提示需要简短准确且告诉用户需要选什么，且在展开菜单之后依旧能够看得到选的是什么。
例如上图：“出发日期”就比“请选择”要好的多。
可以根据以往用户的选择数据进行分析，尝试将选择较多的选项放置在优先级靠前的位置。
选项较多时可以尝试只列出几个用常选的，好处在于90%的用户会立即选择满足自己目的的选项，还有10%的人可以选择“其他”(可以尝试加入一个下拉选择或输入框再满足目的)。虽然这样做会忽略10%的用户，但这样优先级排序能够提高90%用户体验。
90%以上的用户最常选的选项，就可以作为默认选项了。
避免在列表中放置太多的选项，当下拉列表中的选项超过15个时，他们将变得很难扫描。在Web端用户需要不断的滚动鼠标才可以找到满足自己目的的选项。再说在移动端有限的屏幕空间内滚动，体验可以说是非常不好了。
假设我们现在有个下拉列表，是需要收集用户的国家信息。一眼就能看出这个下拉列表是按照拼音首字母进行排序的，那“阿尔巴尼亚(A)”是排在首位的。当我要选择“中国(Z)”时候，就会很费力了。
当我要选择“中国”时？那我很清楚我需要选择的是什么，那就可以考虑把下拉选择改变成自动填充选择的列表？那这样只需要通过键盘输入一个“中”，就过滤出包含“中”(或者zhong)的候选选项了。通过简单的输入配合去提高选择的效率。
选项太多需要避免使用下拉列表，选项太少也避免使用下拉列表。
之前在 《最常见也最基础的表单设计-单选按钮》中说当2≤选项个数(单选)≤7时， 当下拉列表中选项少于7个时，可以考虑使用单选按钮了。
使用单选按钮，用户只需通过扫描就可以了解这问题有几个选项和每个选项是什么，从而可以去除点击触发下拉框的动作。
同样如果是简单的问题，需要回答(是/否)或(打开/关闭)时，就避免使用下拉列表了，使用复选框和开关。
通过程序的帮助去减少选择次数。
例如：如果在充值手机号必须需要用户选择运营商，当用户输入手机号后，那下拉列表就可以帮助用户选择运营商。如果在支付绑卡时需要用户选择银行，当用户输入了银行卡号后，下拉列表就可以帮助用户选择发卡银行和卡片类型了。对于不同的下拉选择会有着成千上万种的设计方法。
在移动端，我们也可以通过“调用位置”这个系统硬件功能来预填选项给到用户。
下拉列表中选项是简单数字的话，下拉列表相比输入费力度更高。可以考虑配合数字键盘输入，这样比下拉选择更简单。根据场景的不同有着不同的解决方法，适合 精确数值小范围调整 可以考虑使用步进器；那 不精确数值大范围调整 可以考虑使用滑块；选日期可以使用日期选择器。
选择日期肯定会也经常遇见，如果使用多个(年/月/日)下拉列表给用户带去的是非常不好的体验。那我们可以尝试去使用日期选择器(date picker)。
步进器[Stepper]由增加按钮、减少按钮和按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字去增加(或减少)固定的数量。比方用户更喜欢在电商App里用步进器选择商品数量，此时步进器比起下拉列表更直观，使用起来也就更轻松了。
需要注意最大限制和最小限制，在最大或最小限制时，加入禁用增加(减少)按钮。如果能通过数据分析(90%用户经常选择的)预填一个默认值是提升效率的办法。
试想：步进器的默认值离用户预期的数值越远，点击的次数也就越多，那完成选择的效率也就越低。当默认值无法满足(10%用户经常选择的)，还可以把数值显示改成输入框，再配合上数字键盘输入去做精确的修改。
常见的滑块[Sliders]由可以拖动的按钮、轴、最大数值、最小数值组成。和单选按钮一样，滑块这个行为受现实生活的行为所影响。
场景：我在听歌声音有点轻，我想让声音响点。我使用滑块配和听觉在0%-100%这个区间内调整音量，而不是我要75%的音量这个精确值，这个范围内(近似值)就行，那此时滑块比起下拉列表使用起来更简单了。
根据不同的设计场景，精确值可能是很重要的，那滑块也可以满足。加入一个数值显示，数值随着每次滑动改变。同时数字也当可以点击变成输入框，再配合上数字键盘输入去修改滑块位置。
在移动端，建议把滑块的最大数值、最小数值的位置放置在上方。那在使用时永远可以保持可见。如果在下方就容易被手指遮盖。
拖动时，使用动效做加持，给与用户交互的反馈
选择比输入的效率高，但也不是说什么时候都可以使用下拉列表。根据不同的场景利用他们(下拉列表/步进器/滑块)的原则做出变形，选择也可以变很不一样。例如：可以在下拉列表中把相关的选项分组展示，也可以让下拉列表变形为多选控件等。方便好用的选择和表单目的一样：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
在上面提到一个日期选择器(date picker)没往细里说，之后在另外说一下。
以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～
如果你看到这，下面就是其他组件的文章(广告)了：
《最常见也最基础的表单设计-输入框》
《最常见也最基础的表单设计-单选按钮》
《最常见也最基础的表单设计-复选框》
能放三条广告，心里觉得超爽了...