2010-07-13 89 views
4

滚动条真的很无聊。我已经看到了一些真正有创意的新用户界面来更新这些界面。我相信有很多更好的方法花10px然后用纯色和静态按钮。这里有两个例子,我发现:Cool滚动条的用户界面备选方案和改进

你有什么其他的想法添加到这个列表?我们如何才能更好地了解文档中的视图状态,而不会浪费太多房地产?我们怎样才能为臭名昭着的死亡空间添加更多功能?

+0

你可能想考虑问这个问题在ux exchange ux exchange(http://uxexchange.com/) – 2010-07-13 16:35:42

+0

那个信息卷轴非常酷,但它看起来还是很恶心 – fearofawhackplanet 2010-07-13 16:36:07

+0

FWIW,在信息槽里画,就像在infoscroller的例子中上面已经有相当一段时间了。例如tkdiff至少在90年代中期以来一直在使用它。 – 2010-07-13 16:39:01

回答

0

我喜欢Google Wave滚动条 - 看起来他们似乎已经将滚动条与Fitt定律对齐了。

+0

我不明白Fitt的法律如何适用。如果您的鼠标位于窗口的底部,则必须将其向上移动以调整垂直位置,这意味着目标难以击中。他们所做的一切都是让滚动条变小。你能否详细说明你如何看待费特法则? – 2010-07-13 19:48:34

2

首先,应该非常小心“更新”滚动条。滚动条是一个伟大的成功故事,一个简单,优雅,功能强大的控件,对于成功使用计算机至关重要,并且几乎可以普遍被用户理解。试图改进滚动条就像试图改进圆珠笔。它长期以来一直保持不变,因为实际上你可以做的不多。 “无聊”并不是改进它的好理由。用户不使用应用程序或网站,因为它有新的和“酷”的控件。他们使用应用程序或网站,因为它可以让他们完成任务。要改进滚动条,请考虑更改如何改进任务完成。

好东西不起眼的滚动条均有:

  • 容量滚动一个窗格满。

  • 能够滚动一行(微调)。

  • 在不移动鼠标的情况下重复执行上述操作的能力(因此用户只需在最初将鼠标放在正确位置后偶尔点击某些内容即可偶尔点击)。

  • 允许通过简单的线性拖放功能随机访问窗格中的任何位置。直观地显示内容中的相对位置(例如,允许用户判断他/他到底有多近)。

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

  • 支持通过光标键进行直观的键盘激活 - 良好的快捷方式,以及良好的可访问性。

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

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

  • 所有这些都在一个非常紧凑和不显眼的控制中,不会分散内容(用户真正感兴趣的内容)。

你不想惹什么。特别是,您链接到的弹出式滚动条可能是一个糟糕的主意,因为它会干扰通过单击轨道来滚动窗格的容量。这也许是最常见的用户操作,因此它应该获得最大数量的像素(即轨道)。另一方面,建立在现有滚动条功能的基础上,就像您所链接的Infoscroller一样,这是一个值得进一步研究的问题。关于这个概念的原创性研究,请参见:

McCrickard DS和Catrambone R(1999) 除了滚动条:一个演进和替代导航 技术 评价。乔治亚州研究所 技术技术报告 GIT-GVU-97-19。

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

我这里还有我们可以建立滚动条上一些其他的方法:

  • 更多的按钮。我已经看到了在顶部和底部同时包含向上和向下按钮的建议,因此用户可以在向下滚动和向下滚动之间切换,而无需滚动窗格的整个高度。或者您可以使用按钮立即滚动到内容的开始和结束位置,对于不知道Ctrl-Home和Ctrl-End的用户,可以方便地保存这些用户长时间拖动滑块。微软Word包括执行最后的查找或转到,以及其他可能性的按钮。

  • 拆分栏。在MS Word,MS Word和Excel滚动条的主题中包含一个分割控件,可以将窗口分成两个窗格。对于很多其他应用程序来说,这很方便,例如浏览器和大型列表和表格。

  • 专家激活。如果你不想让杂乱的滚动条更多的按钮和控件,考虑通过元键提供专家快捷方式。按住Ctrl键单击箭头按钮可以将用户滚动到内容的开始和结束处。按住Ctrl点击曲目可以立即滚动到内容中的相应位置,如果您已经实施了Infoscroller,则特别有用。按住Ctrl单击滑块可以弹出一个迷你对话框或文本框,以输入页码,列表项标识符或查找条件以跳转到。

  • 左侧滚动条。有一些研究表明我们通常应该把vertical scrollbar on the left side,而不是正确的(见Kellener E,Barnes GM,& Lingard R(2001),滚动条方向和项目理由的影响,人类因素和人体工程学会第45届年会会议)。使滚动条位置与内容对齐一致意味着更快滚动条使用的平均转换距离更短。同样,将浏览器左侧的滚动条放在浏览器中将缩短滚动条和后退按钮之间的距离,以加快导航速度。但是,滚轮的出现可能使这种想法变得过时了。

+0

我同意你的改进列表,但我发现你的分析非常遥远..我想知道有多少人使用单窗格跳转功能。滚动条作为页面导航控件的源代码对我来说似乎很差劲,滚动条作为页面状态显示的来源对我来说也似乎很差。我使用vimperator并以百分比的方式了解我的查看窗格的进度,并且'[查看页面/总页数]'比滚动条的可视指示符更有用。我不把它的寿命大部分归功于控制和进度指示的重叠。 – 2010-07-14 15:10:04

+0

@EvanCarroll,我不知道这方面的统计数据,但对我来说,点击做PageUp或PageDown是我最常用的点击,尤其是现在鼠标滚轮可以处理最小的跳转。 滑块的拖放是我另一个主要用途。 (我知道,我是一个数据点。) – 2018-02-21 19:39:52

+0

顺便说一句,我在搜索皮包骨头或自动隐藏滚动条设计时遇到了此页面。这些让我觉得比传统的滚动条行为更有用,而且我已经看到它们在某些情况下运行良好。 – 2018-02-21 19:40:58

2

伟大的问题。请参阅RockScroll,这是now standard in Visual Studio 2013 Previewhttp://www.hanselman.com/blog/IntroducingRockScroll.aspx

RockScroll反过来启发MetalScroll

enter image description here

这反过来又激发了RockMargin

另外,Visual Studio的Jetbrains Resharper插件在垂直滚动条的右侧放置了一个垂直可供选择的示例。信息显示为不同颜色的小水平条。这些条表示可以改进的一段代码。点击一个滚动条的代码页,使有问题的代码眼帘:

enter image description here

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

http://www.scootersoftware.com/images/TextCompare1.jpg

的WinMerge有不同,同样可滚动,左窗格中,像一个滚动条功能,并复制现有的滚动条。 http://winmerge.org/about/screenshots/filecmp.png

enter image description here

最后,谷歌Chrome整合搜索功能(以下简称 “find bar”)到滚动条。

enter image description here

和Greg Raiz想出了ABC Scrollbar

enter image description here

而且Overlay Scrollbars其最小化非客户区:

enter image description here

和一个研究, gaze-enhanced scrolling techniques