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

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

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

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

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

01 有趣的开篇内容

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

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

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

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

b62be67c5ddcd8d9855bcc6db6f10425.png

02 给用户视觉线索

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

aa0869d77151e5c6e93f0dbe5ae8ca47.png

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

03 保持导航可见

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

843d6cdabd25cd45d5679116f1beb25f.gif

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

92bd71665220fb91ee3c6116e6fe6a58.gif

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

6097bbbf792229068f27e7a64c8a44e9.png

04 动效提升参与感

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

f397400130e85c064d78a7e7190a74c8.gif

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

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

549c32c543d8c99049df76e0fc1f710c.gif

05 避免滚动劫持

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

25e0cc4b732cb986d302c9260360c2a4.png

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hdata datax交流总结

http://blog.csdn.net/zlm838687/article/details/74781522 hdata datax交流总结 今天和阿里云的同学就数据同步做了简要的交流,下面就交流的内容做一个总结 分片相关 datax目前可以支持单机(standalone)和集群模式(cluster).目前开源的是单机版本。无论是单机版本还…

南邮计算机专硕考研专业课,南京邮电大学(专业学位)计算机技术研究生考试科目和考研参考书目...

考研真题资料优惠价原价选择南京邮电大学(专业学位)计算机技术教材,也叫南京邮电大学(专业学位)计算机技术考研参考书、指定书目等等,是考验专业课复习过程中最重要的资料。考研是一种针对性很强的考试项目,参考书目由报考院校的研究生院制定…

ios 设置属性的center_【从0到1的Stata图表学习1】图例设置

导读规则:正文出现非加粗红色字体,对应Stata命令;正文中出现蓝色字体,对应往期链接;do文件中:"/**/"符号代表作者注释内容,帮助理解;"//"代表分节,便…

CentOS7 升级Python2.x到3.x

CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级。由于很多基本的命令、软件包都依赖旧版本,比如:yum。所以,在更新 Python 时,…

计算机网络的应用领域有那些,计算机网络应用领域

描述计算机网络应用领域一、计算机网络在现代企业中的应用计算机网络的发展和应用改变了传统企业的管理模式和经营模式。在现代企业中企业信息网络得到了广泛的应用。它是一种专门用于企业内部信息管理的计算机网络,覆盖企业生产经营管理的各个部门,在整…

ffmpeg rtsp转hls_Qt音视频开发24-ffmpeg音视频同步

## 一、前言用ffmpeg来做音视频同步,个人认为这个是ffmpeg基础处理中最难的一个,无数人就卡在这里,怎么也不准,本人也是尝试过网上各种demo,基本上都是渣渣,要么仅仅支持极其少量的视频文件比如收到的数据包…

1119. Pre- and Post-order Traversals (30)

友情提示:这题非常值得自己思考独立做出来,请反复确认后再往下拉 1119. Pre- and Post-order Traversals (30) 时间限制400 ms内存限制65536 kB代码长度限制16000 B判题程序Special作者CHEN, YueSuppose that all the keys in a binary tree are distinc…

单招计算机英语面试口语,单招面试英语自我介绍范文 自我介绍说什么

单招面试英语自我介绍范文 自我介绍说什么2018-03-11 10:50:17文/李男学好英语就意味着可能有更多的机会,单招面试中英语自我介绍也是很重要的。那么,英语自我介绍说什么呢?下面小编整理了一些英语自我介绍范文,供大家参考&#x…

jsp中导入jsf标签库_初学jsf,自制的标签使用时报错?解决办法

当前位置:我的异常网 Java Web开发 初学jsf,自制的标签使用时报错?解决办法初学jsf,自制的标签使用时报错?解决办法www.myexceptions.net 网友分享于:2013-09-12 浏览:10次初学jsf,自制的标签…

bzoj 2245 [SDOI2011]工作安排【最小费用最大流】

其实不用拆点,对于每个人我们假装他是\( s[i]1 \)个点,可以由他向T点分别连\( s[i]1 \)条边,容量为\( t[i][j]-t[i][j-1]\),由S点向所有产品i连容量为c[i]的边,由所有产品向能制造它的人连容量为inf的边。 因为是最小费…

angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法(完整版)

本教程使用AngularJs版本:1.5.3摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope、绑…

通信、计算机、电子相关专业技术工作

中国联合网络通信有限公司&#xff08;福建分公司2018招聘&#xff09;<1>IT工程师相应岗位&#xff08;软件方向&#xff09;岗位需求1.以C/C等计算机语言为主要武器&#xff0c;参与公司IT开发、维护、优化2.根据公司发展和业务需求进行软件设计、参与代码开发、系统测…

python可视化报表制作教程_如何使用Python快速制作可视化报表

数据可视化能力已经越来越成为各岗位的基础技能。领英的数据报告显示&#xff0c;数据可视化技能在2017年中国最热门技能中排名第一。就数据分析而言&#xff0c;可视化探索几乎是你正式进行数据分析的第一步&#xff0c;通过SQL拿到数据之后&#xff0c;我们需要使用可视化方法…

vfp程序改错 计算机和英语,vfp程序改错教案.doc

Visual Foxpro程序改错〖第1题〗(练习题所在文件夹:163)*题目&#xff1a;该程序完成口令检验功能。输入三次不正确退出。*注意&#xff1a;不可以增加或删除程序行&#xff0c;也不可以更改程序的结构。SET TALK OFFCLEARass1"AbCdEf"TT1DO WHILE TT<410,20 SAY …

青春

青春 最后一班午夜列车&#xff0c;悄悄地带走了青春&#xff0c;溪水淌过的路终将不会倒流而去。 青春就像一件新买的衬衫&#xff0c;尽管新颖夺目&#xff0c;却始终逃不了岁月的洗礼&#xff0c;一遍一遍的脱去新颖的靓丽&#xff0c;尽管你小心的呵护&#xff0c;终将守护…

lisp遍历表中所有顶点_三十张图片让你彻底弄明白图的两种遍历方式:DFS和BFS...

1 引言遍历是指从某个节点出发&#xff0c;按照一定的的搜索路线&#xff0c;依次访问对数据结构中的全部节点&#xff0c;且每个节点仅访问一次。  在二叉树基础中&#xff0c;介绍了对于树的遍历。树的遍历是指从根节点出发&#xff0c;按照一定的访问规则&#xff0c;依次…

未来教育计算机二级预测c,二级C语言(附光盘)(全国计算机等级考试预测试卷与真考题库)...

摘要&#xff1a;高质量预测试卷 首创命题模拟系统,专家层层把关,瞄准每年的更新试题 最新版无纸化考试题库 提供1035道题,所有试题均有正确答案与详尽解析 无纸化真考模拟系统 操作环境,评分机制与真实考试系统的完全一致,带您提前"进入"考场 名师视频课堂 机考误区…

通用测试用例大全

为方便平时写测试用例&#xff0c;整理如下&#xff1a; 功能条件测试步骤测试数据预期结果备注搜索或查询 单独遍历各查询条件&#xff0c;测试按各查询条件是否都能够查询出相应的值. 查询出符合条件的记录 设置界面上所有查询条件进行查询,单击查询按钮后&#xff0c;测试执…

cαr怎么发音_【英语拼读发音规则】连读、略读、重读、断句、语调……

在说汉语的时候&#xff0c;我们讲究的是“字正腔圆、掷地有声”&#xff0c;而英语恰恰相反&#xff0c;它需要将一句话中的某些重点词汇突出&#xff0c;弱化非重点词汇。所以&#xff0c;对已经习惯了“字正腔圆”的我们来讲&#xff0c;就会觉得英语听起来“太含含糊糊”了…

中职计算机英语c答案,中职高考计算机试题及答案-20210622105004.docx-原创力文档...

* 1&#xff0e;计算机采用“存储程序”原理的提出者是()A&#xff0e;莫尔B&#xff0e;比尔盖茨C&#xff0e;冯 诺依曼D&#xff0e;科得2&#xff0e;下列表示计算机运行速度的是()A. 7200转B. 2GHZC&#xff0e; 20GD. 1024 x 768像素(l00101 ) 2 对应的十进制数是( )A. 3…