易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

3个要点设计好无限滚屏

来源:网站建设行业资讯网
添加时间:2021-12-16
随着社交网络的流行,无限滚屏刷新feed流成为探索更多内容的一种必要的交互方式,如同Flickr、Facebook所做的。用户愿意浏览大量内容去寻找自己感兴趣的东西,用户会先关注内容再关注其他东西,而无限滚屏形式能让用户找到他们想要的内容。
  此外,无限滚屏的线性结构能让网页编辑容易操控。随着用户向下滚动页面,迥异的布局可以配合各种微动画效果,来营造一种让用户好奇“接下来会发生什么”的氛围。
  TheBoat就是一个很好的案例,无限滚屏增强了故事性,创造一种全新的视觉文案布局形式。
无限滚屏形式给设计师打开了一扇新的大门,然而他也有缺点。它需要设计师花精力去关注内容,导航以及动画。
如果无限滚屏是你的不二选择,那么深圳网站建设科技告诫,最好时刻铭记下面几点:
引导用户滚屏调整导航形式以适应滚屏用动画去强化滚屏形式。
一、引导用户滚屏
尽管用户通常会在加载完页面就开始向下滚屏查看,第一屏的内容仍然是非常重要的。
首屏的内容会产生第一印象并让用户对后面的内容质量有一个相应的预期,只有当首屏内容足够吸引的时候用户才会愿意滚屏查看更多。这种情况不管是在手机,平板电脑或者PC上都是适用的,只有当用户认为滚屏查看的内容值得的时候才会去做。
1.给用户有趣的内容
用户不需要付出任何操作成本看到的内容才是能让用户产生向下滚屏行为的动力。想确保用户下拉查看更多内容,你就必须提供用户感兴趣的内容。因此,首屏必须放最有吸引力的内容:
好的页面简介,是内容的一个缩影并帮助用户了解这个页面是干嘛的。有趣并且真实的内容能够吸引用户产生持续的关注。吸引人的图片(内容与质量)用户对包含他们感兴趣的相关信息的图片非常关注
Tips:用一款叫做whereisthefold?的免费工具来查看在当前流行的屏幕分辨率下你的第一屏内容到底有多少?
2.避免错误的页底展示
首屏的内容会影响余下的内容,首屏的内容应该提示用户滚屏后有更多有价值的内容。当你错误的展示首页底部时,或者说首屏内容展示完毕看起来下面没有更多内容了,那么用户也没有理由相信下面有更多内容,因而用户就很少会滚屏。
避免错误的首页底部展示其实很简单,只需要在视觉上提示用户下面有更多信息。例如:网格状或者卡片式布局就可以在第一屏的结束位置被裁剪来告诉用户滚动方向以及有更多内容
二、调整导航形式以适应滚屏
导航在网站的用户体验中会产生好的或坏的影响,一个好用的导航很关键,因为用户必须能够快速的定位他们在页面中的位置,并且知道怎样去他们想要的页面。
1.使用固定式的导航(栏)
长长的滚屏会让导航变得很麻烦,如果用户在滚动到页面深处后看不到导航栏,那么他们就不得不一直往上滚动页面到顶部。一个很直接的解决办法就是固定式的导航栏,它能始终让导航栏保持可见,因而可以让用户很方便和快捷地导航去不同的页面或区域。
然而,如果你想节约有限的屏幕空间,那么可以在查看更多的滚动方向上隐藏导航栏并在相反方向上让其可用。
这种方法在移动端尤其适用,因为手机屏幕比平板电脑、笔记本、PC都要小得多,导航栏会占掉相当一部分屏幕空间。如果屏幕展示的是一个滚动的瀑布流,那么当用户滚屏查看新内容时可以隐藏导航栏而在用户准备返回顶部时显示。
2.考虑使用定位按钮
无限滚屏的另外一个普遍存在的问题就是——可能造成用户迷失。用户可能会很难找到页面中之前看过的内容,当页面内容被分割成许多同等重要的部分,或者区块时(例如:一个很长的用户引导页面)这种问题(用户迷失),显得尤为明显,使用页面快速定位按钮能够解决这个问题。
页面定位其实是一系列能够让用户快速跳到页面相关内容的页面内链接,它其实与内容目录几乎同理。例如:在Tumblr上,用户可以直接跳到页面底部,或者当他们迷失的时候直接跳回顶部。页面内容被分割为不同的区块,这些区块很容易区分并且有大大的定位点固定在屏幕的左侧。
3.确保返回按钮好用
当用户打开一个页面内(不跳转)的链接后,然后点击返回按钮,他们是期望能够回到上一个页面的相同位置的。
但如果在页面中的位置没有被保留,那么使用浏览器的返回按钮就会将位置重置到页面的顶部,失去之前的阅读位置使用户不得不滚屏一段他们已经看过的内容。在这种情况下用户很容易因为没有返回原来位置的功能而感到沮丧。
Flickr的返回按钮是一个很好的符合用户预期的案例,它会记住用户下拉的位置,因此当用户点击返回按钮的时候会回到他之前页面内的初始位置。
三、用动画去强化滚屏形式
考虑到用户在一个页面的注意力大概能集中8秒左右,一个非常愉悦的滚屏体验能够明显延长用户的停留时间,使用得当的动画能够在滚屏体验中很好的引导用户。
1.滚屏激活的动画效果
考虑到把页面分割成可滚屏的部分,而每一个部分都可以通过动画效果来引入其内容。当用户滚屏时,动画通过创造内容的运动轨迹将用户的视线过度到下一屏。
这是一种对于要保持用户对接下来内容感兴趣,而展示给用户内容流的非常有效的方法(通过动画衔接不同区块的内容并让用户保持持续的兴趣)。
2.视差效果
当你的网站想要把故事讲得很流畅,长滚屏加上视差效应可以创造出一个完全沉浸式的浏览体验。
视差滚屏意味着背景内容相对于前景元素移动得稍慢点,当你下滚页面时它可以创造出一个3D效果。如果运用得当,它可以创造出一个非常好的纵深感。这种形式很适合那些故事描述性的网站,用好的视觉元素创造一个更加沉浸式并且更有趣更刺激的体验。

网站建设计最新案例赏析:


天津高美测仪科技网站制作首页设计效果图
天津高美测仪科技
深圳市航冠实业网站制作首页设计效果图
深圳市航冠实业
广州庄齐实验室工程网站制作首页设计效果图
广州庄齐实验室工程
深圳四强科技网站制作首页设计效果图
深圳四强科技
上海三羽电器网站制作首页设计效果图
上海三羽电器
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
深圳华璨文化传播网站制作首页设计效果图
深圳华璨文化传播
广州恒星制冷设备集团网站制作首页设计效果图
广州恒星制冷设备集团
广东思远工程技术网站制作首页设计效果图
广东思远工程技术
上海科宁会展服务网站制作首页设计效果图
上海科宁会展服务
 

网站建设行业资讯推荐阅读:


网站建设域名过期之后多久才能再被注册深圳网站建设如何优化提高转化率盘点时下90后创业,还需要磨练URL静态化之网站优化结构基本方式营销推广类网站内链如何做提升营销型网站制作的五大要素有哪些浅析网页设计对于SEO的影响浅析品牌网站建设有什么作用营销型网站设计需要包含什么内容美国大学生的创业路:热衷辍学到硅谷创业手机网站基本建设必须留意什么难题建站公司应该如何抓住发展机会为什么网站建设排名并不是非常好缘故有什么常见的响应式网站布局有哪些 网站设计公司哪家售后好 艺术!大图设计搞定网站建设科技分享如何正确挑选网站域名网页设计成功秘诀营销型网站企业实现盈利的关键专车新规比预期偏紧未来加大用户补贴力度是否可行网站建设你需要知道哪些基本常识影响着ASO的质量是什么及ASO运营出色的手机网站建设应当考虑哪些标准Robots的5个好处和Robots的风险及应对办法超级变身再生招聘网站可否迈入“第二春”易捷网络支招增加网站访问量深圳网站建设公司讲解什么是网络营销画龙点睛教你改善界面交互式体验网站排名,有效的SEO标签有哪些,如何用一个新网站如何快速获取好的排名编程:6个简单的BUG追踪技巧营业型网站的主要特点网站建设对企业的功效极大做商城网站建设应该注意哪些问题手机网站建设应当留意的关键点点深圳网站设计的优势专业设计网站时间跟什么因素有关如何让企业网站建设更有价值门户网站设计需考虑哪些标准做搜索营销需要从细节方面去改进从六个方面提升中小企业营销型网站建设实用干货!网站建设类型的优缺点分析网站建设要如何赢的用户的第一印象建设网站时不应该做的10件事情电子商务网站建设阿里京东等电商的移动江湖网站制作设计的三大关键要素如何避免失去客户的网页设计技巧建网站需要什么这种事宜一定要了解网站建设中如何将PC推行与移动2013年较佳WordPress插件解析自媒体付费是好还是坏呢深圳网站建设让传统行业与互联网好邂逅深圳网页设计怎么都不会错的6条配色原则创业的你需要注意这些思维怪圈建设网站需要了解适合哪种类型高端定制响应式网站建设如何让深圳网站建设更精彩起来广州易捷网站建设教你处理好网站的安全问题网站SEO优化之中为重要的几大因素深圳网站设计之网络安全新手启程:技术基础知识十六问答
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询