网页滚动条在交互设计上有哪些需要考虑的点？
时间：2024-02-16 09:35:01 | 来源：网站运营
时间：2024-02-16 09:35:01 来源：网站运营
网页滚动条在交互设计上有哪些需要考虑的点？：嘿，滚动条！这是一个细节见真章的东西，需要较强的设计能力。由于显示设备的区域限制，当显示内容超出时，就有必要用到这个控件了。
先从我们最常见的滚动条介绍吧，大家都熟悉的windows滚动条，一般分为滚动框、滚动滑块和滚动箭头。这个很传统，传统到很少有人或公司想去改变它。滚动框代表显示内容的长度或宽度、滚动滑块影射当前显示区域（与显示内容成比较显示）、鸡肋式的滚动箭头。
在上面这个传统试的滚动条基础上，有许多创新的设计，挑一个最有代表性的设计吧，Google Wave（见下图），初见Wave时我个人对这个滚动条印象很深刻，纯从理念上来讲wave scrollbar设计得不错。将传统滚动滑块的大小固定了，也就是说滚动滑块并不会因为显示内容占整体内容的比例而变化（保证了点击区域），滚动箭头集成至滚动滑块内，不再是像传统那样一上一下的蛋痛设计了，并跟随滚动滑块，保证了功能的集中。
但缺点也是很明显的，固定了滑块大小，又需要显示当前显示内容在整个内容中所在位置，引申出半透明灰色块的设计，半透明灰色块与滚动滑块之前的逻辑复杂，这让用户从本质上就产生了歧义（与习惯相违背）。另外还有终止条，根据官方的说明，因为移动设备和上网本的区域有限，为了这样的用户考虑，他们将光标移动范围进行了限定，所以有了这个玩意，除了让我不至一次尝试去点击它，并使我迷惑外，再无其它作用。
虽然，wave的scrollbar并没有得到大多数设计者的认同，但google的设计师对于细节的研究和尝试还是值得我们学习的，这比微软万年不变的滚动条设计强太多了。
有兴趣的朋友可以去down个Demo尝试一下，放个下载链接：
https://github.com/rastasheep/google-wave-scrollbarWave的例子是一个极端，再回到头来讲一个优雅的例子，OS X Lion系统对原生滚动条的改进，滚动条只在执行滚动操作时才会出现。因此，它不会遮挡屏幕上的内容，并且只在鼠标移至滚动条位置时整个滚动条区域才放大以供操作，将滚动箭头也去掉了（实际使用当中用户对滚动箭头的需求较少）。这种设计最初出现在iOS系统里，因其简洁并具有相当优秀的特性被移植入OS X系统内。可能也有一些人会问“如何在用户未进行任何操作时体现整体内容的大小呢？”，苹果在Finder里的处理方式是：滚动条出现 --> 消失，提示用户，但不干扰用户。
Less is More在这里被体现到极致，在我（用户）需要时它出现，在我（用户）拖动时才放大。以用户为基础，以操作状态为区分，很好的体现了滚动条最本质的设计诉求。
除了上述这些滚动条，还有一些因其它需求而对滚动条加以设计的例子，如果您正在使用Chrome的话，请使用它搜索一下当前页面，看看滚动条会发了什么变化。
以及为了使用户快速查找到以某种架构化的信息而设计的滚动条，如：联系人的字母表或Timeline等
另外，你可以根据需求重新整理一下滚动条，以使之能够提供更好的用户体验！ over...
在线咨询
