实战经验总结!如何能让用户与你的网站进行滚动交互?

 二维码
发表时间:2018-08-19 06:10作者:原创文章来源:蜂锐网络科技有限公司网址:http://www.limego.cn

长滚动页面和无限滚动式的网站在最近变得越来越流行,这一技术很好地转化为移动设备,但并非巧合。移动屏幕的使用增加了对无限滚动技术的广泛接受的关键作用:屏幕越小,相同内容所需要展现的页面就越长,进而,滚动条就越长。


长滚动页面设计打开了许多设计师的新大门。然而,这种模式也有其自身的缺点。它要求设计师对内容、导航和动效给予强烈的关注。


这里有 5 个技巧,可以帮助你在设计长滚动页面时,更好地满足用户的期望。


1. 从一开始就提供有趣的内容


尽管用户通常在页面加载的时候就开始滚动,但是屏幕顶部的内容是非常重要的。页面顶部出现的内容会给用户带来初步印象,并为用户设置高质量的期望。用户可以滚动,但只有当他们进入页面时看到的内容是有希望的。


为了确保人们滚动浏览,你需要提供让访问者感兴趣的内容。因此,把你最吸引人的内容放在页面的最上面:


  • 提供有趣的内容(吸引访问者的内容,并保持他们的注意力))

  • 使用吸引用户的图像(用户密切关注包含相关信息的图像和图片)


2. 给用户一个视觉提示


有时候,让用户滚动的最好方法就是直接让他们去做。简单地告诉用户,大部分内容都可以在折叠下面找到。一个微妙的视觉提示,例如指向屏幕外的箭头或“向下滚动”的文本,可以告诉用户绝大多数的内容都在下方。


给用户一个视觉提示


3. 保持导航选项持续可见


导航是网站用户体验的一个成败。在你的设计中使用长滚动页面的最大风险之一是用户可能会迷失方向。如果导航栏在用户向下滚动时失去了它的可见性,那么当用户在页面深处时,导航栏就会一直滚动。通常,这种行为会让用户感到困惑和沮丧。


解决这个问题的一个显而易见的解决方案是使用一个悬浮导航菜单,它能够显示当前位置,并且始终悬浮在屏幕特定的位置,让用户看见。


移动设备:由于移动端屏幕比桌面端屏幕小得多,可见的导航条可能会占据屏幕相对重要的部分。


解决小屏幕空间问题的一种方法是在用户滚动浏览新内容时隐藏导航栏,而当用户向下滚动时可以看到它,以便回到顶部。


4. 使用动画效果来吸引访问者


像视差滚动和滚动触发式动效这样的创意效果可以让用户滚动更多的内容。他们把滚动浏览变成更有趣的东西,让用户好奇并期待接下来会发生什么。


考虑将页面分解成可滚动的“块”。“在每个区块内,你都可以通过创作动效来介绍内容。当用户滚动时,动效会将他们转换到下一个屏幕,同时创建一条内容路径。


视差是另一种受欢迎的动画效果,可以改善滚动体验。视差效果通过使背景图像移动的速度比前景中的内容慢,从而让用户产生一种深度和浸入的错觉。当你的网站想要以流畅的线性方式讲述一个故事时,长滚动和视差效果可以帮助用户创造一种完全沉浸式的浏览体验。


5. 避免默认滚动加载


实现默认滚动加载的网站可以控制滚动,并覆盖网页浏览器的基本功能。滚动劫持很糟糕,因为用户不再能够完全控制页面滚动,无法预测其行为。用户对网站滚动交互的期望不应该影响到叙事体验或者直接被破坏。


结语


长滚动页面可以创建完全沉浸式的用户体验。当用户喜欢你的网站上的内容并发现 UI 直观时,他们就不会真正在意滚动条的长度了。



「 Skr,这些网页设计干货值得收藏! 」

01. 如何从情感角度设计一个网站?

02. 如何减少你的网站的摩擦?来看高手的角度!

03. 在线信任:赢得你的购买者信任的12个技巧

04. 移动端网页设计:当前和未来的12个流行趋势

05. 实战深度总结!如何创建一个更有吸引力的网站?

06. 如何驱动和转换网站流量?这儿有份超详细的指南

07. 评价网站设计好坏的7个标准,网页设计师都该学学!

08. 是什么让访问者离开你的网站?来看高手的经验总结!

09. 如何设计出吸引访客的网站主页?看这篇文章就知道!

10. 为什么要在网页设计中使用渐变?我想和你分享这10个理由



版权声明:本文系蜂锐网络科技有限公司原创,如需转载,请联系我们。未经授权,转载必究。



蜂锐网络科技有限公司官网二维码

扫 码 , 设 计 干 货 轻 松 get √


在线客服
 
 
 
 
 工作时间
周一至周日 :8:30-18:30
周六至周日 :9:00-18:00
 联系方式
商务合作:0772-2128906
商务合作:13597066859
商务合作:18177296290
企业邮箱:1872187250@qq.com