最近在做一个PC网页项目,因为产品是针对某行业的专业人设计,所以表单部分的“下拉选择框”承载了超多选项(100多个啊!)……
选项无法做删减,表单填写的栏目无法做更改,于是任务就落在如何处理好下拉框的展示优化上了。
也挺巧合的,刚好有个同行也遇到这个问题,在讨论几种处理方式后,问题解决了,也总结出了这篇文章。
 
 

一、直接展示

最常见的方式,也可以说是最原始的方式。直接将选项展示出来,让方便用户选项。
 
 

二、分类展示

当提供的选项过多时,原始的展示方式已经不适用了。

这时就需要为选项做一个“索引”。

a. 按选项属性进行分类展示,当分类过多时,可以考虑做成“可收缩”的方式。
b. 按选项属性建立一个快速定位的“导航”,方便用户快速定位到某一区域。

这里要注意几点

  1. 选项过多,同时分类也过多时,可以考虑拆分为两个下拉框,而不是将全部选项合并在一起。
    比如:将省份和城市分开为两个下拉框,会比合并成一个下拉框方便操作很多。
  2. 选项的分类/选项导航的分类,应该是同种不同类的分类方式,如果是不同种的选项,建议拆分为两个下拉框处理。
    比如:同一个下拉框选项包含“汽车”、“飞机”和“机票”等(类),前两者属于“交通工具”,而“机票”并不属于“交通工具”(种),这种选项放在一起就有问题了。
     
     

三、结合搜索展示

这种展示方式是可以跟第二种(分类展示选项)做结合的。
使用这种方式的优点是:用户可以快速找到想要的选项。
这种处理方式比较合适用于“当用户对选项有一定了解时”。
比如:这些选项是可以由用户自己建立的,那么非常合适用这种方式。
 
 

四、搜索与下拉合并

这种处理方式可以说是上一种处理方式的优化结果。同时它也可以跟第二种处理方式做结合。

当点击下拉按钮时,它就像一个普通的下拉选择框;
当输入内容时,它就像一个带有联想功能的搜索框。

为普通用户提供了必要的选项浏览功能;为高级用户提供了“隐藏式”的搜索功能;
既可以合理的展示选项内容,又可以快速找到想要的选项。
在使用这种方式时,建议在下拉框旁边,用文字简单说明下“可直接输入内容”。
不过它也有自身的缺点,就是开发成本相对上诉几种处理方式要高些。
 
 

五、总结