易捷网络专注企业网站建设
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效果。如果运用得当,它可以创造出一个非常好的纵深感。这种形式很适合那些故事描述性的网站,用好的视觉元素创造一个更加沉浸式并且更有趣更刺激的体验。

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


浙江爱就推门玩具网站制作首页设计效果图
浙江爱就推门玩具
上海傲秀展览展示网站制作首页设计效果图
上海傲秀展览展示
东莞莲泉净水设备网站制作首页设计效果图
东莞莲泉净水设备
青岛沃柏斯智能实验网站制作首页设计效果图
青岛沃柏斯智能实验
深圳华力兴新材料股份网站制作首页设计效果图
深圳华力兴新材料股份
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
佛山红海豚门业网站制作首页设计效果图
佛山红海豚门业
深圳信雅文化传播网站制作首页设计效果图
深圳信雅文化传播
东莞五源企业形象设计网站制作首页设计效果图
东莞五源企业形象设计
广州黑蜂科技有限公司网站制作首页设计效果图
广州黑蜂科技有限公司
 

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


做网站设计时应该要注意哪些方面易捷网站设计对企业网站建设的影响使用搜索引擎优化服务提升销售深圳网站建设之营销怎么省力气色彩如何让网站设计更出众定制软件哪个好网站网页设计的一些小常识如何有效的维护企业网站网站关键词布局的方法有哪些讲解如何降低着陆页面的跳出率删除域名的规律和域名状态解释途牛5亿美元“卖身”京东,缘何如何提高网站转化率来看一图胜千言如何选择一家正规的建设网站公司深圳网站设计公司,网页设计有哪些原则企业进行网站建设时目的是什么网站建设应该迎合大众审美营销型网站,是内容重要还是形式(设计)重要怎样在网上寻找优秀网页设计网站当今中小型企业网络营销缺乏的三个层面 效果好的网站设计公司联系方式 网站制作的流程是什么深圳网站制作关键词优化技巧和排名布局策略UX设计目的规则小编浅谈18年企业建站有哪些选择深圳制作一个简单的网站建设所需要的费用大概是多少什么类型的网站建设吸引人简述定制网站建设有什么优势常规网站建设的技巧企业邮箱怎么登陆深圳网站建设报价为何会有那么大差异颜值爆表网站的点评规范是啥体育网站该怎么建造 公司网站设计哪家便宜 一个营销型网站必须具备一些功能做网站建设前需要考虑什么问题百度新推出站点整改反馈功能即将上线网站优化:如何提升网站访问速度​选择直销网站建设公司需考虑哪些因素如何更好的建设直销网站了解网页开发过程的基础浓缩干货!网站优质体验的元素哪些关键指标影响着网页设计呢网站建设如何选取核心关键词 品牌网站设计公司哪家不错 一篇文章让你重新认识网络营销,你服不服网站建设中如何防止黑客攻击创业成功需要从一而终交互干货!消灭网站「空状态界面」的常用方法建设网站需要提前准备哪几点大数据时代来临我们网站制作公司该如何迎接网络给我们的生活带来了哪些影响深圳网站建设公司会为客户提供哪些服务营销型网站建设怎么进行新开发一个网站需要多长时间单页应用的搜索引擎优化如何去做网络销售才可以事倍功半提高网页加载速度的七点分析 网站设计有哪五个思维步骤需要人性化企业网站建设中日常维护主要包括哪些内容深圳网站建设解析SEO优化更新内容的目的是什么
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询