当该区域没有滚动条时,指示该区域可以滚动的最佳方法是什么?


13

我唯一想到的就是说:上方的“滚动查看完整菜单”。人们在做什么呢?


3
箭?上下文将非常重要。您可以张贴样品吗?
斯科特

2
你为什么需要那个?移动和OSX上没有滚动条,人们不会感到困惑。
bjb568 2014年

2
这是别人无法解决的问题,因此我们必须解决它。
摩根

@ bjb568:我曾经使用过一些我没有意识到可以沿特定方向滚动的应用程序。如果屏幕切断了我在一个方向或另一个方向上看到的部分内容,这是很清楚的,但有时某些情况恰好与屏幕边框对齐,并且用户没有意识到他们可以/必须滚动。花了一段时间让我意识到我可以在新的Facebook应用上横向滚动。
Mooing Duck 2014年

@MooingDuck Facebook不算数,只是胡扯:P但是是的,您必须像Confused所说的那样。
bjb568

Answers:


9

人们与用户界面中的物理相对性关系很好。换句话说,如果您想让界面感觉自然,或使界面的控件变得明显,则可以使用物理真实感的外观来实现。为了获得明显的功能,正确的图标始终也是必须要做的。


滚动区域的外观如何?简单!外框下方的内容层。为了获得那种外观,您可以在外层使用盒子阴影

  • 提示:创建CSS框阴影时,可以将多个阴影与逗号放在一起。使用较浅的远阴影和较短的短阴影以获得良好的效果。使用RGBA(不透明度控制)实现轻触!

接下来,没有滚动条,想到的最佳实践是将JQuery与可单击的滚动框一起使用,该滚动框附加在具有滚动内容的框架的边缘,当内部元素突出到框内时,框会显示出来。四个方向中的任何一个。

如果您希望该栏默认情况下不存在或隐藏,请使其保持隐藏或不透明,直到将滚动区域悬停或轻击,然后出现滚动机制。

  • 易于使用:此框应在悬停事件时轻轻激活(开始滚动子元素),并在鼠标按下时完全激活。

这是一个示范:

在此处输入图片说明

对于长滚动区域,必须通过这种做法来加快滚动速度,否则将限制用户快速浏览内容的能力。


摆弄之后,我想我可以为其创建一个JQuery插件,并在我的下一个Web应用程序中使用此做法。


6

确保首先显示的默认内容量在底部显示一个项目(假设垂直滚动),而该项目只是部分显示出来,从而通知用户下方还有更多内容,他们可以访问/显示。


Windows(/ Phone)8似乎经常在水平方向执行此操作-当标题占用的空间超过可用水平空间时,它会鼓励您向左/向右滑动以查看更多选项。
Katana314

1
可能在底部有轻微的淡入/不透明度渐变,表明还有更多。
wchargin

4

这是我会尝试的方法:

柔和的渐变覆盖了少量内容。这表明下面还有更多。此外,您当然可以添加一个小箭头。

在此处输入图片说明


谢谢-我确实检查了其他答案,以确保我没有重复。
benteh 2014年

2

您想使它变得多么明显取决于您认为受众是谁以及背景是什么。

折叠以外继续使用的常规寻路技术(例如箭头和图形)可以帮助用户旅行。另外,您可以使用许多单页站点使用的锚定菜单/导航系统。

最明显和最丑陋的解决方案是弹出窗口,通知用户向下滚动以获取更多内容,然后在actor滚动时隐藏(cookie通知样式)。


1

另一种选择是将鼠标悬停在元素上时将光标更改为指示滚动的内容,例如指向并指示向下的移动箭头,或者指示“通过滚动阅读更多内容”。

当然,这仅适用于台式机。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.