4种创意网站滚动模式

发布时间:2019-08-30 09:29:57 阅读:70

在网页设计中,旅程可以像目的地一样愉快。

进入滚动模式的世界。通过创意滚动模式,您可以调整内容的速度,交付和交互性。考虑到我们在网络上的注意力已经下降到大约8秒,令人愉快的滚动体验肯定会延长用户的兴趣。

在这篇文章中,我们将研究最常见且经过时间考验的滚动模式。正如免费电子书Web UI Patterns 2016 Vol.1中所解释的那样,每种模式都具有创造性,经过多年的改进证明可用。

那么,你怎么知道哪种情况需要哪种模式?我们将探索以下示例,用例和最佳实践:

  1. 长滚动
  2. 修正了长时间滚动
  3. 无限滚动
  4. 品味的视差滚动

让我们开始吧!

1.长滚动

勒马克斯http://le-mugs.com/

Le Mugs Long滚动图像

接受

拿它应用程序长滚动图像UXPin博客

Beoplay(https://www.bang-olufsen.com/en/headphones#in-the-zone)

Beoplay长滚动

Flickr的(https://www.flickr.com/)

在UXPin上的Flickr长滚动图像

问题

网站具有如此多的折衷内容,以至于多页面格式难以导航。

网站希望以流畅,线性的方式讲述故事。

创建单页长滚动网站,将您的内容整合到一个位置。这适用于社交媒体网站和其他具有用户生成内容的网站,其中部分乐趣是一次浏览所有内容,内容多样且难以分类,因为它始终在更新。

移动浏览的突出性支持长滚动模式,因为较小的屏幕尺寸需要更多滚动。

结合下面描述的无限滚动模式,长滚动可以创建完全身临其境的浏览体验。如果用户正在寻找特定的东西,像亚马逊这样的更结构化的导航系统可以更好地工作 - 但是对于可探索性而言,长滚动对用户来说是最快和最有趣的。

提示

  • 使用粘性导航。失调和无法返回是长滚动的固有缺点,但固定菜单允许用户自由移动。
  • 长时间滚动可能对SEO产生负面影响,但可以通过遵循Quicksprout的Neil Patel的建议来避免这种情况
  • 不要自动播放像视频这样的重型媒体,因为它们会大量减慢加载速度。
  • 您不必提交长页面滚动的单页面格式:通常网站都有一个中央长滚动主页,链接到传统的辅助页面,如FacebookTwitter的单独的个人资料页面。
  • 对于特定页面部分的一次性长滚动,请尝试下面描述的固定技术。

2.修复了长时间滚动

Squarespace(https://www.squarespace.com/)

SQUARE SPACE网站

UXPin之旅(https://www.uxpin.com/)

UXPin网站图片

问题

站点可以受益于长滚动的优点,但不希望完全从多页结构转换。

修复了长滚动网站显示的信息,否则可能需要在一个长滚动部分中有多个部分。效果感觉就像“滚动中的滚动”。

提示

  • 在确定要包含在固定滚动部分中的内容时,请确保仅选择适合统一主题或类别的内容。例如,Squarespace的固定滚动部分的每个部分都侧重于解释如何为不同的业务类型“创建一个漂亮的网站”。
  • 将CTA放入每个固定滚动框架的末尾。


  • UXPin产品导览页面显示时,您还可以考虑在顶部导航中添加“滚动进度条”。如果您有超过3-4帧,该模式有助于增加更大的节奏感。
  • 3.无限滚动

    真正的管(http://truetu.be/)

    image02

    tumblr(https://www.tumblr.com/)

    image05

    加藤(http://bykato.com/)

    image09

    Imgur(https://imgur.com/)

    image06

    问题

    内容在单个页面上更好地组织,但是一次加载所有内容太多了。

    使用无限滚动模式,根据需要加载内容以提供更节奏的体验。无限滚动证明对于具有多个屏幕内容的单页网站非常有用,尤其是对于多媒体画廊。

    无限滚动为社交媒体网站创造了一种节奏,用户可以不停地点击或等待新内容。

    无限滚动的问题是当用户失去位置时,尽管有很多方法可以解决这个问题。粘性导航是让您的用户在近乎无限的内容中移动的最佳方式。

    提示

    • 除了粘性导航,还有其他方法可以帮助无限滚动的迷失方向。Tumblr一样跳转到部分选项允许用户在丢失时返回到开始。
    • 无限滚动可以与分页相结合,以获得更准确的搜索。例如,Facebook允许用户按年搜索时间轴。
    • 不要受传统加载圈的限制 - 您选择的图标是加深网站身份的机会。FacebookTumblrImgur和其他人都有自定义加载指示符。

    4.品味的视差滚动

    行尸走肉(https://www.cabletv.com/the-walking-dead)

    image08

    奥克利:Airbrake MX(http://moto.oakley.com/)

    image07

    船(SBS)(http://www.sbs.com.au/theboat/)

    image04

    McWhopper(https://mcwhopper.com/)

    image13

    问题

    用户在长滚动格式中没有足够的参与度。

    通过视差效果为您的长滚动网站带来更多影响。数十年来已知视频游戏产业,该模式指的是在滚动时以不同速度移动的二维图像的层,即,以不同速度移动的前景和背景,或者背景的不同层。这种效果营造出令人着迷的三维感觉。

    视差效果解锁了滚动的更具创造性的方面,特别是与滚动触发的动画结合使用时。这种风格适合讲故事的网站,通过更好的视觉效果营造更加身临其境的刺激体验。

    行尸走肉使用视差和其他滚动技术(即,当你向下滚动时帧从左向右移动,非典型方向)以加深他们的叙述。虽然没有必要,但差异化的背景使得观看滚动更加愉快。由于角色对滚动做出反应,因此对于网站的上下文也有意义。




我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"4种创意网站滚动模式",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560