在多列中显示排序数据
假设我试图在两列中显示美国所有州，按字母顺序排列。从可用性的角度来看，哪种方法更好？
它是水平排序，如：
Alabama | Alaska
Arizona | Arkansas
Colorado | Connecticut
Delaware | Georgia
还是垂直排序，如：
Alabama | Montana
Alaska | Nebraska
Arizona | New Hampshire
Arkansas | New Jersey
我尝试在谷歌上搜索一些测试支持的权威答案，但我发现的只是意见。
这只是个人喜好问题，没有哪个选项比另一个更好吗？
Suppose I'm trying to displaying all US states in two columns, ordered alphabetically. Which approach is better from the usability standpoint?
Is it sorting horizontally, like:
Alabama | Alaska
Arizona | Arkansas
Colorado | Connecticut
Delaware | Georgia
or is it vertically, like:
Alabama | Montana
Alaska | Nebraska
Arizona | New Hampshire
Arkansas | New Jersey
I tried googling for an authoritative answer backed by some testing, but all I've found are opinions.
Is it just a personal preference thing and no option is better than the other?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
对于用户来说，向下浏览一列单词比浏览一行单词更快更容易，特别是当他们搜索特定目标单词时（例如，“我的州在这个列表中吗？”）。参见 Parkinson SR、Sisson N 和Snowberry K，1985。广泛的计算机菜单显示的组织，国际人机研究杂志，23, 689-697。对列进行排序也是美国 DOD 设计标准 - 人体工程 (MIL-STD-1472-F) 中的一项要求 (5.14.3.5.6.5)，大概是出于人体性能的原因。
在这种情况下，我预计垂直排序会具有特别大的性能优势，因为它对眼睛的方向变化较少。对于垂直排序，用户只需反转一次方向即可到达第二列的顶部，而对于水平排序，反转次数等于项目数除以二。我相信这些逆转可以预测扫描速度和眼睛疲劳。
请务必使用图形设计来传达列表是垂直排序的，例如通过像在示例中那样包含垂直规则。
列表适合整个窗口，这一点非常重要，这样用户就不必上下滚动来阅读整个列表。滚动需要时间和精力。更糟糕的是，一些用户可能没有意识到列表继续低于他们可以看到的内容（“哦，我想我的州不在这个列表中”）。添加列（或仅使用一列）比需要垂直滚动多列垂直排序列表更好。
It’s faster and easier for users to scan down one column of words than across a row of words, especially if they are searching for a specific target word (e.g., “Is my state on this list?”). See Parkinson SR, Sisson N, & Snowberry K, 1985. Organization of broad computer menu displays, International Journal of Man-Machine Studies, 23, 689-697. Ordering down a column is also a equirement (5.14.3.5.6.5) in the US DOD Design Criteria Standard - Human Engineering (MIL-STD-1472-F), presumably for human performance reasons.
In this case, I would expect an especially large performance advantage to sorting vertically because it has fewer direction changes for the eyes. For vertically sorted, users only have to reverse direction once to get to the top of the second column, while for horizontally sorted, the number of reversals is equal to the number of items divided by two. I believe these reversals predict scan speed and eye fatigue.
Be sure to use graphic design to communicate that the list is sorted vertically, such as by including vertical rule like you did in your example.
It’s quite important that the list fit within a window-full so that users don’t have to scroll down and up and down to read the whole list. Scrolling costs time and effort. Worse, some users may not realize the list continues below what they can see (“Oh, I guess my state isn’t on this list”). Better to add columns -or use only one column -than require vertical scrolling of a multi-column vertically-sorted list.
确定如何布局数据/组件的另一种方法：
在一张纸上打印 ui/面板（或在 Gimp 或 Photoshop 等图像编辑器中截取屏幕截图），
使用荧光笔在其上绘制您的眼睛看到的图案，从一个元素到另一个元素。
例如：
很明显哪一个在认知和视觉上更简单、更容易。
Another way to determine how to lay out data/components:
print out the ui/panel on a piece of paper (or take a screenshot into an image editor like Gimp or photoshop)
use a highlighter to draw on it the pattern that your eyes take, from element to element.
for example:
it's obvious which one is simpler and easier both cognitively and on the eyes.
我认为这取决于你想要做什么，但是，对我来说，我认为第一个选择更容易阅读，但它并不是真正的两列。
如果分配的任务是排序为两列，那么第二列可能更正确，但是，如果您想要更奇特，您也许可以提供一个复选框，以便他们可以在两列之间切换。
如果你这样做是为了一份工作，那么我建议你做一个复选框，并与人们讨论什么最适合最好的应用程序。
I think it depends on what you are trying to do, but, for me I think the first choice is easier to read, but then it isn't really in two columns.
If the assignment is to sort into two columns, then the second one is probably more correct, but, if you want to be fancy you could perhaps give a checkbox so that they can switch between the two.
If you were doing this for a job then I would suggest that you do give a checkbox, and talk with people as to what works best with the best of the application.
我更喜欢第二个，因为它更符合您阅读分成两栏的报纸文章的情况。您从头到尾读完，然后转到下一栏。
另一件需要考虑的事情是每个条目之间的接近程度。在第一个示例中，由于文本长度的差异，前两个项目之间可能有更多的水平分隔，这使得它们在视觉上的联系较少。
阿拉巴马州[很多空间]阿拉斯加
VS。
阿拉巴马州
[更少的空间]
阿拉斯加
I'd prefer the second one as it is more consistent with if you were reading a newspaper article that was split into two columns. You read all the way down and finish, then go to the next column.
Another thing to consider is the proximity between each entry. In the first example you may have more horizontal separation between the first two items because of the difference in the text length, which makes them visually less connected.
Alabama [Lots of space] Alaska
VS.
Alabama
[Less Space]
Alaska
简而言之，如果这是一种主观的解决方法，那么您可以选择您更喜欢的方法。
只需应用设计原则，您总是可以使事情发挥作用。
但是，如果您尝试从网络和印刷出版物中更常见的内容的角度来解决这个问题，那么您的垂直方法将是最好的，因为它是普通用户/访问者每天都会与之交互的东西。
这是我的 5c
simply put, if it is a subjective approach to solution then you can go with what ever you like better.
you can always make things work just by applying principles of the design.
but if you trying to go about it from the point of view on what is more common in web and print publications then your vertical approach would be the best as it is something that average user/visitor is used to interact with on daily basis.
this is my 5c