组件|下拉菜单这么简单，为什么总监老是说用错？( 二 )_

文章插图
三、下拉菜单使用小窍门1. 避免默认值在使用下拉菜单时，设置默认值绝对是一个糟糕的设计策略。大量的经验告诉我们如果有默认值，用户基本上不会去仔细查看其他选项而是直接跳过，除非你真的确定有90%的用户会选择这个默认值！！！所以说使用“请选择”比提供默认值好上千倍。

文章插图
2. 注意滚动问题这里要特别支持关于下拉列表当中的滚动问题，如果鼠标光标位于下拉菜单之外，用户很可能会向下滚动页面而不是向下滚动下拉菜单，从而不自觉的隐藏屏幕上下拉菜单。然而，在一些浏览器中，只要有焦点，下拉框实际上就会滚动，可能会给用户留下错误的数据。

文章插图
3. 注意数量选择菜单只有2个选项，使用下拉框就是个非常糟糕的策略，用户必须单击才能查看可用选项。
在这种情况下，应该使用单选按钮。让用户将能够立即扫视到有多少选项以及每个选项是什么，而无需单击任何内容来显示此信息。
4. 活用变体受限于移动设备尺寸，造成其屏幕空间非常有限，这意味着用户在滚动页面时接受到的信息内容非常局限，那就需要设计师对组件的选择与设计要求更高。同时某些框架提供对原生组件使用起来也不太得法，比如iOS9提供对原生控件，交互操作链路比较长，同时窗体高度占据了50%，手势空间也受到不小的约束。所以针对不同数据类型我们可以用同构异型的组件去让用户完成任务。

文章插图
5. Radio group在“手把手带你重新认识Radio Button”一文当中小编以及有详细的解释这里就不在进行赘述，这里提供文章链接手把手带你重新认识Radio Button，不了解的朋友可以跳回去看一看哦

文章插图
6. Steppers 步进器当对一组有序数列进行选择任务时，使用「Steppers 」也是不错的选择，可以用来增加或减少一定数量。对小步长的有序数列选择任务比较有意义，可以与输入框结合使用。同时需要注意的一般这种数据数量不建议超过5个。假如是100个数据的话肯定不能选择steppers了不然用户一定会抓狂的。

文章插图
Sliders滑块
同时在数据选择任务领域当中，使用Sliders滑块也是种不错的选择。
单个值情况：

文章插图
多个值情况：

文章插图
跟步进器结合使用

文章插图
7. Switches 开关开关比较简单仅仅支持两个简单的，完全相反的选择。值得注意开关只有「开」「关」两种交互形态，不存在「不可用」状态，开关不建议加文字说明，并且个人经验告诉得出Switches开关在B/S结构的产品当中需要慎用。关于开关的问题有兴趣的朋友可以私信我或者加我好友我们仔细探讨下这个问题。

文章插图
这里仅仅只是举例说明了几种比较常见代替下拉菜单完成用户选择任务的等效交互组件或者交互模式，实际工作中其他例子举不胜举，希望大家可以在工作中沉淀出好的方法。
四、文末小结能用的设计与优雅的设计的主要区别是什么？优雅的设计应该为用户完成每个目标任务时都提供最合适的输入组件。同样的目标任务在不同的场景下的组件设计肯定有所不同，有时候可能是下拉菜单，有时候可能是Radio group，有时可能是其他形式，此文小编希望给大家在工作中开拓出更多的设计思路。