网站中的内容再好,总得让用户能看到,才有价值,而矛盾在于,首屏的空间始终是有限的。所以,我们总希望用户能够滚动页面向下看,从某种意义上来说,长滚动页面和无限滚动的设计,如此地受欢迎,就是因为它贴合了用户下意识滚动浏览的习惯,也符合内容的创建者希望被用户看到的需求。

长滚动式的页面有着如下的优势:

·更为精简的导航
·更容易呈现故事,拥有吸引用户的潜质
·与移动端设备的良好兼容性

如果你希望你的网页更能吸引用户滚动,那么下面的5种策略,应该能够帮你向着你想要的目标,更进一步。

01 有趣的开篇内容

尽管许多用户习惯于在页面加载的时候就开始滚动,但是首屏的内容对于用户决策的影响是至关重要的。首屏内容的好坏, 会让用户对于后续的内容的期待有明显的影响,如果首屏内容足够有趣,用户会主动向下滚动,并且希望看到同样有意思的内容。

所以,作为整体设计的一部分,设计师应当尽量让用户感兴趣的内容置于首屏,传递给用户一种信息,就是后面的内容同样有趣。

在设置内容的时候,尽量为用户提供:

·有趣的元素和内容(吸引用户注意力的内容和信息)
·引人入胜的图片或视频(用户会密切关注这类视觉信息)

02 给用户视觉线索

有的时候,想让用户向下滚动可以直接告知用户这么做。为用户提供这方面的视觉线索,比如指向下方的箭头,或者直接用文本写上“Scroll Down”来告知用户,更多的内容在首屏之下。

视觉线索的呈现方式有不少,上述的明示如果不够“优雅”的话,你可以试着让下方的内容在首屏上露个头,让用户明白下方有更多,也不错。

03 保持导航可见

导航是网站的重要组成部分,它能成就一个网站的好体验,也能毁掉它。而在设计网页的时候,最大的风险之一,就是可用性低的导航设计,导致用户在使用过程中迷失。通常,这种设计会让用户感到挫败感。所以,尽量使用悬浮置顶的导航栏,或者固定式的导航栏,一方面让用户始终明白自己所处的位置,另一方面也方便用户跳转到其他的位置。

当为移动端进行设计的时候,需要注意的是导航会不会占据太大的空间,比较合理的策略是让导航在滚动的时候隐藏,当准备回到顶部或者停下的时候显现。

如果受限于屏幕空间,无法添加导航栏,那么你应该优先考虑跳转式的导航设计:

04 动效提升参与感

视差滚动为代表的动画特效是让用户滚动浏览更加有趣的一种设计技巧,同时它通过有趣的设计,吸引用户不停滚动下去,让用户始终处于探索“接下来还有什么”的过程中。

考虑到页面常常被设计成不同的区块,可以将富有创意的动效到不同的区块当中,让用户在不断滚动当中,沿着设计好的路径来浏览。

视差滚动是目前最流行的特效之一,设计师可以借助元素移动速度差来创造深度和沉浸感。当用户在平滑的滚动浏览内容的时候,视差特效所创造出的沉浸感能够让用户有身临其境的感觉。

05 避免滚动劫持

滚动劫持这个概念并不难理解,浏览器本身的滚动机制被替代,用户无法按照他们预期的、习惯的方式来滚动浏览,有的时候这种状况是设计师刻意营造的浏览效果,但是并不一定能给用户以好的体验,至少多数时候是超出用户预期并且难以控制的。滚动劫持这种状况要尽量避免。

滚动是用户交互中最基础、最核心的部分,创造良好的滚动体验只是网页设计的基础,内容的设计,多媒体和动效的加入,都是为了围绕着同一个目的而运作的:让用户浏览下去。只有让用户接收到信息,它们的价值才能传递出去。

layui导航栏页面滚动固定_帮你搞定长滚动网页的设计!这5种设计策略需谨记!...相关推荐

  1. layui导航栏页面滚动固定_网站建设页面导航如何降低用户寻找的时间

    做为正确引导客户体验网站的莱单导航栏,从检索视角上而言,也起着关键的功效,莱单导航栏不但联系网站的外界,也联系着网站主页面及其别的网页,是全部网站的"管理中心",因此网站建设中莱单 ...

  2. ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题

    ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题. 经过多次分析是因为底层大背景被设置了默认颜色引起,把它设置成对应白色就可以了: sel ...

  3. layui导航栏鼠标经过青色条块怎么移到顶部?

    layui导航栏鼠标经过青色条块怎么移到顶部? layui-nav-bar怎么移到导航栏的顶部? 青色条块其实就是在鼠标经过时会变成,所以,如果我们把top:111px变成top:0,青色条块就可以移 ...

  4. 2022-06-20 工作记录--CSS-sticky实现导航栏、侧边栏固定,右侧展示内容顺畅滑动效果

    CSS-sticky实现导航栏.侧边栏固定,右侧内容顺畅滑动效果 不积跬步无以至千里~ 细节决定成败,加油

  5. python降低图片分辨率_手把手:扫描图片又大又不清晰?这个Python小程序帮你搞定!...

    原标题:手把手:扫描图片又大又不清晰?这个Python小程序帮你搞定! 大数据文摘作品 编译:HAPPEN.于乐源.小鱼 一位乐于分享学生精彩笔记的大学教授对于扫描版的文件非常不满意--颜色不清晰并且 ...

  6. python查看微信撤回消息_想查看微信好友撤回的消息?Python帮你搞定

    要说微信最让人恶心的发明,消息撤回绝对能上榜. 比如你现在正和女朋友用微信聊着天,或者跟自己喜欢的女孩子聊着天,一个不留神,你没注意到对方发的消息就被她及时撤回了,这时你很好奇,好奇她到底发了什么?于 ...

  7. a类不确定度计算器_统统帮您搞定:LIMS系统,换版、内审、期间核查、不确定度、数据分析…………...

    CNAS实验室认可ISO17025三年的过渡期,所有获认可实验室应在2020年11月30日前完成新版CL01的转换工作.实验室转换工作的完成以取得依据ISO/IEC17025:2017颁发的认可证书为 ...

  8. 调节e18-d80nk的测量距离_线缆太长负载太远,负载端电压难测量?三种方法帮你搞定...

    关键词:电缆, 线缆阻抗, 负载电流, 开尔文检测 在产品设计,研发过程中,我们常会碰到稳压器与负载分离的情况.此时,如果电缆线太长,线缆阻抗无法忽略.负载电流太大,这些都会使得配电线上的压降增大,从 ...

  9. 计算机上面的东西爆满怎么清理,电脑C盘满了怎么清理?一招帮你搞定

    在日常电脑的使用中,我们总是会发现C盘的东西越来越多,然而对于C盘里面的东西我们又不知道如何清理,很多系统文件又不懂识别,无用和缓存文件堆积的特别多,最后导致C盘爆满,电脑卡顿.运作效率慢.那么,当C ...

最新文章

  1. PostgreSQL 并行vacuum patch - 暨为什么需要并行vacuum或分区表
  2. 分布式事务中间件Fescar—全局写排它锁解读
  3. ML之LGBMRegressor(Competition):2018年全国大学生计算机技能应用大赛《住房月租金预测大数据赛》——设计思路以及核心代码—191017再次更新
  4. 两经纬度之间的距离计算
  5. C# 深入浅出 委托与事件
  6. 前端预览word文件_2020国开形考计算机练习题Word练习
  7. String 类详解
  8. vista 中php4, php5 共存
  9. 环境配置与PyG中图与图数据集的使用
  10. net空间一次购买终身使用_net域名与org域名哪个投资价值更高?
  11. JAVA编码 —— 字符串关键字内容替换
  12. 频率与时间,电容,电感,电阻,计算机,分贝 单位换算
  13. 小攻是鸿蒙小受是鲲鹏,洪荒之鸿蒙大天尊
  14. Firebird学习(02):数据库的中文参考资料
  15. linux wrf软件安装,wrf安装
  16. 西门子SMART200 PLC和托利多电子称自由口通讯程序
  17. Echarts icon图标 默认样式 样式总结
  18. 学校校车运营各项安全管理制度_学校校车安全管理制度.doc
  19. UI自动化常见的等待方式
  20. 字典的添加、更新、修改

热门文章

  1. HTML+CSS+JS实现 ❤️卡通湖面上日出动画特效❤️
  2. c语言将字符串按空格分割_字符串单词输入反向输出怎么搞?C语言又带着二维数组来了!...
  3. python 2048源码_一个python的2048简单实现
  4. python接口测试框架django_开源~自研接口测试平台 Django2.0+Vue
  5. C++ 读取单个字符
  6. C++ 重载new和delete运算符
  7. Jsoup消除不受信任的HTML(用于防止XSS的攻击)
  8. 途牛java面试题_途牛java面试题.docx
  9. python电子相册制作软件_电子相册怎么做
  10. banner信息是什么_我的设计成长笔记—第10篇(banner)