使用固定元素

本文是翻译,版权归原作者所有


过去的几个月里,有个很大的趋势,很多新网站正在添加这个功能。我们将在本文讨论固定元素。这些元素可以是导航、侧边栏(带有社会化媒体)、甚至底部。让我们更加深入地探讨这个话题。

赞同方

当导航仍然可见的时候,如果你想到达另一个页面,你不需要向上滚动页面。我猜测,这是此功能最大的好处。这个好处也被用于固定底部,其包含了诸如联系信息、小地图或简版导航之类的东东。保持重要信息总是可见和便利,节约了你的时间和不必要的动作,使你有更好的浏览体验。好的用户体验是我们作为设计师和开发者都想要的。

反对方

然而,这个功能可以是正确的,同时也可以是错误的。在网站上为某些元素选择固定位置将不可避免地占用一部分空间,这部分空间本可以用于其它途径的。是的,空间大小取决于元素的大小,但是一些空间为了固定元素仍然需要放置一个占位符。在桌面程序这没有害处,但是考虑下较小的情况。如果你想使用固定位置,尽量只瞄准桌面和平板用户。借助媒体查询(media queries)或JavaScript代码片段,是很容易搞定的。这样,你将在任何设备上保持着较高水平的体验。

固定位置被用于的另一种方式是广告。你可能看过特别优惠,或者让你注册newsletter什么的。鉴于此,我把这个选项放在了反对方。然而,我不是完全反对广告,只是我不喜欢广告。是的,你的网站需要托管在某个地方,你不得不支付账单,但是用这种方式从人们那里挣钱,对我而言……有些恶心。你是一个内容提供商。人们访问你的网站是因为它提供了有意思的内容。对于用户而言,把有用的空间浪费在像这种不重要的东西上,降低了体验,这应该是你从来都不能考虑或要做的。

折中方法(当向上滚动页面时的固定)

发布平台Medium和好多其它网站选择了这种有趣的方案。它们是这样做的,仅仅在用户向上滚动一点点的情况下,使用固定元素导航条。然而,导航保持着隐藏状态。这或许是个好方法,解决了占据内容的有用空间的问题。不过,问题在于用户要向上滚动多少?你怎么能够区分,为了看导航而滚动,还是重读一行文本而滚动?对你来说,这听起来或许不重要,但是请考虑一下。你正在阅读一篇文章或博文,想返回一点,重读最后那句话。你向上滚动页面,发生了什么……你想读的那行是出现了,但是隐藏的固定导航也出现了,因此你不得不滚动多一些。有些怪怪的(如果你喜欢这种幽默感的话)。

这个例子告诉我们,这种方式的弱点是什么。让我们更深入一些,假如你正在手机上看网页。现在,根据你的屏幕尺寸和导航尺寸,当你向上滚动时,屏幕的1/4空间都被导航占据了。这不是一行文本。它一次就盖住了多行。在桌面和平板,这可能有些恼人。在移动端,它严重伤害了用户体验,甚至导致网页被关掉。

基于滚动的固定元素可以是种做法,但是总是考虑所有存在的其它因素,问问自己,这个功能是否重要到用这种方式来固定。

总结

每个东东都应该合理地使用。过度使用固定位置,或用在较大的元素上,会占据屏幕空间、影响内容。记住,不是每个用户都是在高分辨率桌面或平板上访问你网站的。做为web设计师或开发者,你的目标是用独一无二的方式提供内容。你不应该只是因为一个不重要的元素而损害到内容。保持内容优先,其它第二的原则。其它可以放一放。

原文地址:http://alexsblog.org/2014/07/30/using-fixed-elements/

译文:使用固定元素 》| 腊八粥