多选 Web UI 的最佳实践？

Question

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

Answer 1

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

最佳：#2，如果调整为打破年份界限（即始终在一列中包含全年，因此要么每列有一年，要么两年，或者任何可行的方法，但要确保用户永远不必移过一列的底部才能找到该年的下一个值）。此选项可让用户最快速地找到他们感兴趣的年份。

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

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

第四： #3，保留上面提出的警告。