制作超长滚动页面?7个你应使用的方法助你成功

很多时候,我们都遵循一个选择——让内容保持在一页之内,但这不总是适用的,有些时候我们需要一个可以持续向下滚动的页面,允许他们长时间浏览,并保持用户的关注。

滚动加载是最佳的吸引住用户的方式之一,可以呈现在单页上无法实现的功能,例如通过滚动,可以动态加载更多的内容。诚然,这种方式有不利于抓取等缺点,但如今的用户非常习惯滚动这种使用方式,所以我们需要放下成见,在适当的地方使用它们。

1.有参与度的内容

60433073 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

这类网站成功的关键是内容质量,没有什么是比内容更加重要的。

不幸的是,不存在一种测试可以告诉你什么内容质量比较好,你只有投入使用后通过用户分析来实现这一点。

尽管如此,你仍然有几种方法可以创建更加的内容:

  • 讲一个有趣的故事,并代入你的内容
  • 使用高分辨率的和有趣的视觉内容,如照片、插图和视频
  • 给用户滚动的理由,比如某些章节的中断,促使他们滚动继续阅读
  • 限制选择。给用户操作空间,但不要给予过多选择,每个页面或加载的内容块中,有一个交互内容就足够了。
  • 动人的内容。虽然视觉效果可以创造第一印象,但内容才是真正促使用户阅读的原因。使用生动的词汇,创作有代入感或认同感的可信故事。

2.建立一个视觉主题

1751533 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

强有力的视觉主题将帮助用户理解页面的内容。一些视觉上的提示,比如下划线、箭头和链接线,可以有助于保持用户在页面上滚动查看内容。

如果你希望知道滚动设计是否在网站上奏效,可以分析用户的停留时间——在开启这个设置之前,用户的停留时间是更长了还是更短了?他们和页面的互动是增加了还是减少了?最终对转化的期望是增加了还是减少了?

滚动页面应该有助于提升网站流量,如果并没有,说明用户不能很好地理解你的视觉主题,或者滚动页面的设计概念根本不适合这个用户群。

3.增强互动效果

43583194 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

长滚动页面的好处之一就是可以在网络上创造沉浸式的阅读体验,使用取悦用户的小型的交互技术可以提升这种体验。

切换动画,幻灯片操作,变形的图像,这些在滚动中的小型交互可以帮用户保持联系。上面截图中的网站Beatrate就使用了诸如视频、动画框、悬停效果、旋转计数器和图像滑块等交互技术。

滚动的每个部分对应的动画都应该是相关的,这样才有助于用户的理解。

4.滚动技术的使用

99414722 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

设计师青睐滚动加载网站的原因之一,就是它们可以在桌面和移动端上都良好地运转。

许多用户实际上更喜欢滚动而不是点击,尤其是在更小的设备上,因为这不仅不需要切换页面而且访问起来更加容易。

使用滚动技术,如时差、色彩遮挡或混合的内容来保持设计的流畅感,这些设计将提示用户内容的变化,同时保持页面趣味性。同时,它们也将鼓励用户滚动,因为用户会期望看到接下来会出现什么。

通过滚动设计,大部分内容将在单一页面上呈现,这也让你不必重新考虑弹出窗口或隐藏移动导航等问题。

5.长滚动和短滚动

38721120 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

正如在滚动中可以交替使用各种设计效果,长滚动和短滚动也可以搭配使用。短滚动应该包含可以快速接受和易于消化的内容块,如图像和大字体的少量文字。而长滚动则可以包括信息图或大量文本等模块。对于长短滚动的选择可以遵循这个基本的原则。

混合长滚动和短滚动可以帮助用户保持新鲜感,就像在撰写书籍时,长短句搭配可以防止形式上的单调并防止读者感到无聊。

6.提供一个线路图

44344419 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

如果你的网站需要长时间滚动,用户会想知道他们在阅读什么位置,以及他们什么时候可以到达目的地。这就是线路图的作用。

线路图有多种形式可供选择:

  • 固定位置的导航
  • 显示剩余内容的点或类似元素
  • 指引操作的箭头或符号
  • 回到起始点或前进到末尾的方式

7.明确设计意图

63850402 - design, sharing - 制作超长滚动页面?7个你应使用的方法助你成功

长滚动网站包括无限滚动网站,不应该是漫无目的的。设计应该包括开始和结束,并为用户提供明确的目标。

不论设计看起来多么好,你都需要给用户空间,否则网站有什么意义呢?

所以,在思考设计事前,你需要明确设计的最终目标。滚动的每一个部分,都应该设计为用户达成这个目标,就像上面的例子一样,每个页面或滚动都包含号召性用语(如“立即购买”、“查看详情”或“联系我们”)的按钮,它位于设计的核心位置,易于查看和点击。

在多个位置安置号召性用语很重要,因为并非每个用户都会看到长页面的结尾——无论故事有多么好,视觉内容有多么棒,交互有多么精彩——大多情况下甚至会用很短的时间(几秒钟内)做出决定。所以,你需要确保号召性用语按钮在一开始就清晰可见,并在每个阶段都可以很容易地访问。

 

英文来源:Design Shack

英文标题:7 Ways to Ensure Your Long-Scrolling Website Is Successful

原作者:Carrie Cousins

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

2 条回复

  1. 卡米雷特说道:

    Thanks for your comment on kamilet.cn! You did a good job & your site is awesome. I’ll contact you via mail.

  2. Jan Zac说道:

    Hello ,

    I saw your tweets and thought I will check your website. Have to say it looks very good!
    I’m also interested in this topic and have recently started my journey as young entrepreneur.

    I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive.
    Can you recommend something what works best for you?

    Would appreciate, if you can have a quick look at my website and give me an advice what I should improve: [url deleted]
    (Recently I have added a new page about FutureNet and the way how users can make money on this social networking portal.)

    I wanted to subscribe to your newsletter, but I couldn’t find it. Do you have it?

    Hope to hear from you soon.

    P.S.
    Maybe I will add link to your website on my website and you will add link to my website on your website? It will improve SEO of our websites, right? What do you think?

    Regards
    Jan Zac

发表评论

电子邮件地址不会被公开。 必填项已用*标注