15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 什么是网页设计中的滚动设计?如何进行滚动设计?

什么是网页设计中的滚动设计?如何进行滚动设计?

时间:2023-10-06 11:24:01 | 来源:网站运营

时间:2023-10-06 11:24:01 来源:网站运营

什么是网页设计中的滚动设计?如何进行滚动设计?:近年来,曾经的网站设计“禁忌”已经成为最受欢迎的技术之一,用户开始欣赏和喜欢网页站中的滚动设计。滚动设计摆脱了之前的标签定义,它正在重塑自己去成为交互设计的一个核心元素——这也意味着设计师们需要学习新的滚动设计规则。

在本文中,我们将探索滚动设计的重生,讨论一些滚动设计的利弊,并分析一些技巧。




为什么滚动条可以重新被人们喜爱?




答案很简单,那就是移动设备的遍及。

自从移动用户超越桌面用户以来,世界各地的UI设计师都进行了相应的调整。随着越来越多的用户使用较小的屏幕,滚动变得越来越重要:屏幕越小,滚动的时间就越长。




也有其他因素。比如,人们在更多地方可以访问高速互联网,使用滚动能更快捷地访问信息,而不是从页面到页面点击。社交媒体网站的日益强大也推动了此技术:滚动自然地适应了他们丰富的用户生成内容。




正如《2015-2016 年网页设计趋势》指南中所解释的,长滚动与基于卡片的设计一起演变。结合后,这些技术就可以为用户提供源源不断的小容量内容(这非常适合web,尤其是移动体验)。




此外,把内容都集中在一屏里而不是使用长滚动的原则被认为是一种迷信。根据实际研究,事实是用户真的不介意滚动。当然,这个迷信之所以流行,部分原因在于,在Javascript和CSS的进步之后,滚动只被认为是一种有意义的设计模式。 在此之前,通过视觉讲故事使滚动 "有趣" 要困难得多。可以想象,包含文本的长页(偶尔被图像打断)并不是一个非常吸引人的 UI 布局。但是一旦你尝试使用长滚动作为画布来展示开头,中间和结尾(通过图形,动画,图标等),那么你就会开始看到它在吸引用户注意力方面具有电影般的力量。




事实上,一些混合模式正在成为滚动的最新趋势。 例如,我们在自己的UXPin游览页面上使用的 “原地固定滚动” 创建了传统长滚动网站的相同交互式体验,而无需垂直拉伸网站。




滚动设计适合你的产品吗?




每一种设计技巧和工具,都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下,任何一方都不是本质上对错的;因此,在处理此类项目之前,权衡所有注意事项非常重要。




滚动的优点:




Photo credit: Bauer
滚动的缺点







撇开优点和缺点不谈,某些类型的网站更适合长滚动设计。更长的滚动网站更适合……




社交媒体网站带有不断和广泛的用户生成的内容,可以很好的进行长滚动设计(事实上,早在几年前,Facebook和Twitter就帮助推广了这项技术)。另一方面,像电子商务这样的目标导向的网站——需要连贯的导航——更趋向于保守的页面长度。

Photo credit: Amazon



处于中间处境的是像Etsy这样的网站:一个用户生成产品的网上商店,它使用混合解决方案:几页所谓的"无限"滚动,最后以"显示更多"的号召性用语结束。

Photo credits: Etsy



与所有 Web 设计趋势一样,不要仅仅因为看到其他网站遵循该模式而使用较长的滚动。确保您你的网站符合我们讨论的标准,否则实际上你可能会体验到更差的性能。




滚动最佳实践




长滚动、视差效应和类似机制在设计领域中仍然比较新(约4年历史),但仍从试错经验中可以获取一些基本的最佳实践。




从 2015 和 2016 的 Web 设计趋势总结,以下是成功实现长滚动的一些日常技巧。




  1. 不用担心短滚动和长滚动交替使用。 让内容决定滚动长度,而不是反过来。 使用短滚动主页和长滚动着陆页(如产品,旅游等)非常好(并且非常受欢迎)。
  2. 考虑粘性导航,以便用户始终可以快速"返回"或从滚动中的元素跳转到另一个元素。
  3. 将滚动与设计元素或工具结合,以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮,其中包含"滚动更多"或"开始"等说明,来提高页面的导航性。
  4. 明确区分滚动点击和其他CTA元素,以便网站获得所需的交互。
  5. 做一些研究,看看用户如何与滚动交互。例如,在 Google 分析中,可以打开"网页分析"选项卡,查看屏幕下方(第二屏及之后)用户的点击数。然后,你可以根据需要调整设计。
  6. 不要过分。长滚动并不意味着 500 页的连续内容 - 长滚动也可以很简单。讲述你的故事,然后适可而止,不要喋喋不休 。
  7. 专注于用户目标,并接受即使是无限滚动网站也不是真正无穷无尽的。 创建长滚动网站时,要了解用户仍需要方向感(当前位置)和导航(其他可能的路径)。
  8. 包括有助于在滚动中定位用户的视觉提示,例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。
Photo credits: MCaleicester



滚动可能是一把双刃剑,所以坚持使用它的建议用法,以避免它弊大于利。




未来的无页面设计




长滚动网站不能适应所有的情况。尽管我们已经看到流行设备上屏幕大小的起伏和流动(或增加和减少),但在可预见的将来,屏幕尺寸很小。小屏幕需要更多的滚动。




事实上,从长滚动到 "无页面" 的设计的过渡已经开始,一些设计师(如数字远程技术设计师)甚至相信这是网络的未来。随着网站不断摆脱用户思考和使用信息的一些限制,设计人员必须更彻底地思考在不同环境中创建内容的最佳方式。




交互设计是长滚动网站设计的基础。 如果用户喜欢这个界面,并且发现它直观且有趣,那么他们就不会真正关注滚动的长度(只要它不是夸张地很长)。




你并不总是需要缩短滚动长度 - 你还可以让滚动过程更有趣。


看完这篇文章,你开始对滚动设计感兴趣了吧?那么就快去试一试啦~




产品经理和UI设计师们都可以使用墨刀,很方便地对产品进行滚动设计:把鼠标放在页面最底部区域,拖动即可调整页面长度。




本文由墨刀翻译自 Jerry Cao 的The New Rules for Scrolling in Web Design。




墨刀作为一款在线原型设计与协同工具,已经帮助众多产品经理和设计师们轻松做出交互原型,展现和验证设计想法,还支持多人协作编辑,分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用!开始体验一下吧!

关键词:设计,滚动

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭