当前位置：文江博客话题详情

滚动条的酷用户界面替代方案和改进

发布于 2024-09-09 03:23:48 字数 588 浏览 4 评论 0原文

滚动条真的很无聊。我见过一些非常有创意的新用户界面来更新这些。我相信有很多比使用纯色和静态按钮更好的方法来花费 10px。以下是我找到的两个示例：

）您还有其他想法可以添加到此列表中吗？我们怎样才能更好地了解文档中的视图状态，而不浪费这么多空间？我们如何才能为右侧臭名昭著的死区添加更多功能？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铁轨上的流浪者 2024-09-16 03:23:48

首先，“更新”滚动条时应该非常小心。滚动条是一个巨大的成功故事，它是一种简单、优雅、功能强大的控件，对于成功使用计算机至关重要，并且几乎被用户普遍理解。尝试改进滚动条就像尝试改进圆珠笔一样。这么长时间以来它都保持不变，因为你真的无能为力。 “无聊”并不是改进它的好理由。用户使用应用程序或网站并不是因为它具有新的“酷”控件。他们使用应用程序或网站是因为它可以让他们完成任务。要改进滚动条，请考虑更改如何提高任务完成率。

不起眼的滚动条有一些好处：

能够滚动一整个窗格。
滚动一行的能力（微调）。
在不移动鼠标的情况下重复执行上述每项操作的能力（因此阅读某些内容的用户只需在最初将鼠标放在正确的位置后偶尔单击一下）。
允许通过简单的线性拖放随机访问窗格中的任何位置。
他/她距离结束有多近）。
通过滑块相对于轨道的大小直观地显示内容的相对大小。
通过滑块
支持通过光标键直观的键盘激活 - 良好的快捷键，并且有利于辅助功能。
支持通过光标键
支持 clickamatic（按住鼠标按钮滚动多行或满窗格）。
非常流畅的用户操作实时反馈。
所有这些都在一个非常紧凑和不引人注目的控件中，不会分散对内容（用户真正感兴趣的内容）的注意力。
所有

你不想搞乱这些。特别是，您链接到的弹出滚动条可能是一个坏主意，因为它会干扰通过单击轨道滚动整个窗格的能力。这可能是最常见的用户操作，因此它应该拥有最大数量的像素（即轨迹）。

另一方面，构建现有的滚动条功能（例如您链接到的 Infoscroller）是值得进一步研究的事情。有关此概念的原始研究，请参阅：

McCrickard DS 和 Catrambone R (1999)
超越滚动条：进化和
替代导航评估
技术。乔治亚学院
技术技术报告
GIT-GVU-97-19。

显然，滚动条轨道中显示的内容取决于您的内容。内容的缩略图不适用于文本表格或列表。为此，Greg Raiz 建议指示当前排序顺序的值。如果没有足够的空间，可能会出现工具提示或标注，指向轨道中要拖动到的关键位置。 MS Word 与此类似，显示一个工具提示，指示当前拖动到点的页面和部分。

以下是我们可以在滚动条上构建的一些其他方法：

更多按钮。我已经看到建议在顶部和底部包含向上和向下按钮，以便用户可以在向下和向上滚动之间进行转换，而无需旋转窗格的整个高度。或者，您可以使用按钮立即滚动到内容的开头和结尾，这对于不了解 Ctrl-Home 和 Ctrl-End 的用户来说很方便，使他们无需长时间拖动滑块。 MS Word 包括用于执行最后一次查找或转到的按钮以及其他可能性。
分割栏。关于 MS Word，MS Word 和 Excel 滚动条包含一个拆分控件，可让您将窗口分为两个窗格。这对于许多其他应用程序来说非常方便，例如浏览器和大型列表和表格。
专家激活。如果您不想让更多按钮和控件使滚动条变得混乱，请考虑通过元键提供专家快捷键。按住 Ctrl 键单击箭头按钮可以将用户滚动到内容的开头和结尾。按住 Ctrl 键单击轨道可以立即滚动到内容中的相应位置，如果您已实现 Infoscroller，则特别有用。按住 Ctrl 键并单击滑块可以弹出一个迷你对话框或文本框，以输入页码、列表项标识符或查找要跳转到的条件。
左侧滚动条。有一些研究表明我们通常应该将垂直滚动条放在左侧，而不是（参见 Kellener E、Barnes GM 和 Lingard R (2001)，滚动条方向和项目调整的影响，人为因素和人体工效学协会第 45 届年会论文集）。使滚动条位置与内容对齐一致意味着平均回转距离更短，从而可以更快地使用滚动条。同样，将滚动条放在浏览器的左侧会缩短滚动条和“后退”按钮之间的距离，从而加快导航速度。然而，滚轮的出现可能使这个想法变得过时。

Firstly, one should be very careful about “updating” the scrollbar. The scrollbar is a great success story, a simple, elegant, powerful control that is critical for successful computer use and almost universally understood by users. Trying to improve the scrollbar is like trying to improve the ballpoint pen. It’s stayed the same for so long because there’s really not much more you can do. Being "boring" is not a good reason to improve it. Users don’t use an app or site because it has new and "cool" controls. They use an app or site because it lets them accomplish their tasks. To improve the scrollbar, consider how changes can improve task completion.

Good things the humble scrollbar has:

Capacity to scroll one pane-full.
Capacity to scroll one line (fine tuning).
The capacity to do each of the above repeatedly without moving the mouse (so a user reading some content only has to click occasionally after initially placing the mouse over the right spot).
Allows random access to anywhere in the pane by simple linear drag and drop.
Intuitively shows the relative position in the content (e.g., allowing the user to judge how close s/he is to the end).
Intuitively shows the relative size of content by the size of the slider relative to the track.
Supports intuitive keyboard activation via the cursor keys -good shortcuts, and good for accessibility.
Supports clickamatic (pressing down and holding the mouse button to scroll multiple lines or pane-fulls).
Very smooth real-time feedback on user actions.
All in a remarkable compact and unobtrusive control that doesn’t distract from the content (what the user is really interested in).

You don’t want to mess with any of that. In particular, the pop-up scrollbar you link to is probably a bad idea because it interferes with the capacity to scroll by a pane-full by clicking the track. That is perhaps the most common user action so it deserves the greatest number of pixels (i.e., the track).

On the other hand, building on existing scrollbar capability, like the Infoscroller you link to, is a something worth investigating further. For the original research on this concept, see:

McCrickard DS and Catrambone R (1999)
Beyond the scrollbar: An evolution and
evaluation of alternative navigation
techniques. Georgia Institute of
Technology Technical Report
GIT-GVU-97-19.

Obviously, what you show in the scrollbar track depends on your content. A thumbnail of the content won’t work well for a text table or list. For that, Greg Raiz has suggested indicating the values for the current sort order. If there’s not enough space, maybe tooltips or callouts can appear pointing to key places in the track to drag to. MS Word does something similar with this, showing a tooltip indicating the page and section of the current drag-to point.

Here’re some other ways we could build on the scrollbar:

More Buttons. I’ve seen suggestions to include both up and down buttons at the top and bottom so the user can transition between scrolling down and up without having to slew the entire height of the pane. Or you could have buttons to scroll immediately to the beginning and end of the content, handy for users who don’t know about Ctrl-Home and Ctrl-End, saving them from making a long drag of the slider. MS Word includes buttons to execute the last Find or Goto, among other possibilities.
Split bar. On the subject of MS Word, MS Word and Excel scrollbars include a split control to allow you to divide the window into two panes. That would be handy for a lot of other applications, such as browsers and large lists and tables.
Expert activation. If you don’t want to clutter the scrollbar with more buttons and controls, consider providing expert shortcuts via meta keys. Ctrl-clicking an arrow button could scroll the user to the beginning and end of the content. Ctrl-clicking the track could instantly scroll to the corresponding position in the content, particularly useful if you’ve implemented Infoscroller. Ctrl-clicking the slider could pop open a mini dialog or text box to enter a page number, list item identifier, or Find criteria to jump to.
Left side scrollbar. There is some research suggesting we should usually be putting vertical scrollbar on the left side, rather than the right (see Kellener E, Barnes GM, & Lingard R (2001), Effects of scroll bar orientation and item justification, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting). Having the scrollbar position consistent with the content alignment means less average slew distances for faster scrollbar use. In the same vein, putting the scrollbar on the left in a browser would shorten the distance between the scrollbar and the Back button for faster navigation. However, the advent of the scrollwheel may have made this idea obsolete.

回复收藏 0 原文

巡山小妖精 2024-09-16 03:23:48

很好的问题。请参阅 RockScroll，即现在是 Visual Studio 2013 预览版的标准： http://www.hanselman.com/blog/IntroducingRockScroll.aspx

依次RockScroll灵感来源MetalScroll：

在此处输入图像描述

这反过来又启发了 RockMargin。

此外，适用于 Visual Studio 的 Jetbrains Resharper 插件在滚动条右侧放置了垂直可供性。信息显示为不同颜色的小水平条。这些条表示一段可以改进的代码。单击栏滚动代码页以查看有问题的代码：

在此处输入图像描述

此外，大多数文件比较软件使用奇特的滚动条。请参阅 Scooter Software 的 Beyond Compare 3.0，它将类似“infoscroller”的功能与滚动条分开。左侧的可供性可以像滚动条一样拖动。此外，为了减少水平滚动的需要，有一个底部窗格，它将左窗格中的当前行放在顶部，将右窗格中的当前行放在下面。移动信息滚动条允许用户同时滚动两个文档，这使得“合并”同一文档的两个版本之间的更改变得更加容易。请参阅：