user-interface - 凉爽的用户界面替代品和滚动条的改进

Question

滚动条真的很无聊。我已经看到了一些真正具有创造力的新用户界面来更新这些界面。我相信有很多更好的方法来花费10px，然后再使用纯色和静态按钮。这是我找到的两个示例:

http://www.youtube.com/watch?v=-PnXY4wjuH8

http://chikuyonok.ru/u/demo/infoscroller/
(此链接的信用转到使用HTML5 Canvas的this question)

您还有其他想法要添加到此列表吗？我们如何在不浪费大量资源的情况下更好地了解文档中的 View 状态？我们如何在右边臭名昭著的死空间中添加更多功能？

Answer 1

首先，应该非常小心“更新”滚动条。滚动条是一个伟大的成功故事，它是一种简单，优雅，功能强大的控件，对于成功使用计算机至关重要，并且几乎被用户普遍理解。尝试改进滚动条就像尝试改进圆珠笔。保持相同的时间已经很久了，因为您实际上无能为力。 “无聊”不是改善它的好理由。用户不使用具有新的“酷”控件的应用或网站。他们使用应用程序或网站是因为它可以使他们完成任务。要改善滚动条，请考虑更改如何改善任务的完成。

不起眼的滚动条的优点:

滚动一个完整 Pane 的能力。

滚动一行(微调)的能力。

无需重复移动鼠标就可以重复执行上述操作的能力(因此，仅将鼠标放在正确位置上之后，阅读某些内容的用户只需偶尔单击一下即可)。

允许通过简单的线性拖放来随机访问 Pane 中的任何位置。

直观地显示内容中的相对位置(例如，允许用户判断s/he与末尾有多近)。

通过滑块相对于轨道的大小直观地显示内容的相对大小。

通过光标键支持直观的键盘激活-良好的快捷方式，并且易于访问。

支持clickamatic(按下并按住鼠标按钮以滚动多行或 Pane 满)。

关于用户操作的非常流畅的实时反馈。

所有这些都以引人注目的紧凑和简洁的控​​件为特色，不会分散内容(用户真正感兴趣的内容)。

您不想把这些都弄乱。特别是，链接到的弹出滚动条可能不是一个好主意，因为它会干扰通过单击轨道来滚动全 Pane 的功能。这可能是最常见的用户操作，因此它应具有最大数量的像素(即轨道)。

另一方面，在您现有的滚动条功能(例如您链接到的Infoscroller)的基础上，值得进一步研究。有关此概念的原始研究，请参见:

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.

显然，您在滚动条轨道中显示的内容取决于您的内容。内容的缩略图不适用于文本表或列表。为此，格雷格·雷兹(Greg Raiz)建议指出 values for the current sort order。如果没有足够的空间，则可能会显示工具提示或标注，以指向要拖动到的轨道中的关键位置。 MS Word与此类似，显示了一个工具提示，指示当前拖动点的页面和部分。

这是我们可以在滚动条上进行构建的其他一些方法:

更多按钮。我看到了建议在顶部和底部都包含向上和向下按钮，以便用户可以在向下滚动和向上滚动之间切换，而不必旋转 Pane 的整个高度。或者，您可以使用按钮立即滚动到内容的开头和结尾，这对于不了解Ctrl-Home和Ctrl-End的用户非常方便，从而避免了长时间拖动滑块的麻烦。 MS Word包括用于执行最后一个“查找”或“转到”的按钮，以及其他可能性。

分割栏。关于MS Word，MS Word和Excel滚动条包含一个拆分控件，使您可以将窗口分为两个 Pane 。这对于许多其他应用程序(如浏览器以及大型列表和表)将非常方便。

专家激活。如果您不希望使用更多按钮和控件来使滚动条困惑，请考虑通过meta键提供专家级的快捷方式。按住Ctrl键并单击箭头按钮，可以将用户滚动到内容的开头和结尾。按住Ctrl键并单击轨道，可以立即滚动到内容中的相应位置，如果您已实现Infoscroller，则特别有用。按住Ctrl键并单击滑块会弹出一个迷你对话框或文本框，以输入页码，列表项标识符或查找要跳转的条件。

左侧滚动条。有研究表明，我们通常应该放置vertical scrollbar on the left side，而不是放置右边(请参阅Kellener E，Barnes GM和Lingard R(2001)，滚动条方向和项目合理性的影响，人为因素和人体工程学学会论文集，第45届年度 session )。滚动条的位置与内容对齐一致，这意味着较小的平均回转距离，可以更快地使用滚动条。同样，将滚动条放在浏览器的左侧会缩短滚动条和“后退”按钮之间的距离，从而加快了导航速度。但是，滚轮的出现可能使这一想法过时了。