多选Web UI的最佳实践？

Question

我一直在寻找各种方法,允许用户从大约29-30个选项列表中选择一个或多个选项.我想出了以下四种类型,并想知道哪种是首选/最有用的.请参见http://workingstorage.com/multiple%20selection.png

Answer 1

以下是我对每个选项的排名以及我的推理：

最佳：＃2，如果调整为打破年份边界（即总是在一列中包含完整的年份，因此每列有一年，或两年，或任何可行的方法，但确保用户永远不必移动越过一列的底部以查找该年的下一个值）。该选项可以让用户快速找到他们最感兴趣的年份。

第二： #4。我很想把 #3 放在这里，因为它看起来更实用，但插图让我想知道 1) 所有选项是否仍然可用，2) 是否所有用户都会理解这四个按钮的作用。由于混乱因素，我将第三名降至最后一位。这使得#4 成为第二好，因为它比#1 更干净（除非#1 恰好完美地适合设计的其余部分）。

第三： #1 - 默认情况下。

第四： #3，保存上述警告。