表格设计--请谨慎使用下拉菜单

大部分人都不喜欢填写各种各样的表格,尤其是在表格的长度和复杂度增加的情况下,对于移动设备用户而言,更没有人喜欢在小屏幕上填写表格。

观察上图,两个机票预订表格的不同之处在于其问问题的方式。左边表格几乎每个问题都使用了下拉菜单,右边表格则使用了最合适的输入空间。

不管是在移动设备还是桌面设备上,使用下拉菜单都需要多个步骤。点击第一个下拉控件,然后滚动(有时候还不止一次),查找并选择目标,最后再将视线移动到下方。不过,这一切步骤我们可以做的更简单点。

进步器控件

进步器控件增加或者减少常量值非常适合一些小的调整。在机票预订表格测试中,我们发现用户更喜欢用进步器来选择乘客的人数。不需要下拉菜单,因为旅客数量最多可选8个,绝大部分是1-2个人。

在使用进步器时,越简单越好。如果你对进步器外观更改过多,那么乘客也就越不清晰其功能。对于任何输入控件都是如此。

分段控件

分段控件是最相关的,但却是互相排斥的选择。当对移动机票预订表格进行比较时,我们发现分段控件非常适合选择出行类别。

附加控件

进步器和分段控件并不是下拉菜单的唯一替代品,开关(Switches)支持两个简单的完全对立的选择。你也可以使用滑杆在允许的值范围内进行精确的选择。当你开始一个沉重的下拉菜单式表格时,看看每个问题并思考这些控件是否有更适当的实现方式。

按钮输入方式会明确展示隐藏在下拉菜单中的各个选项,并且可通过单次或者多次点击选中目标。

在一些示例中,多个下拉菜单可被压缩到一个输入控件中。上边我打上”painful”标签的机票预订表格用了6个下拉菜单来收集旅行日期。

在移动机票预订表格调查中,我们发现日期单一输入控件效果更好。把6个下拉菜单压缩到单个日期选择中。

最后

虽然我们列举了下拉菜单的多个替代选择,但这并不意味着你在UI设计中绝不能使用下拉菜单。设计良好的表格可为每个问题使用最合适的输入控件,有时候是进步器控件,有时候是分段控件,也有可能是下拉菜单。

由于这些控件不方便导航,所以默认是隐藏的,不要使用层次结构,并只使用选择而非编辑,下拉菜单不应该是你第一个想到的UI控件。不过在当前软件设计中,这种情况也非常常见。

所以首先要考虑其他输入控件并在万不得已的情况下使用下拉菜单。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部