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

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


深圳华力兴新材料股份网站制作首页设计效果图
深圳华力兴新材料股份
东莞莲泉净水设备网站制作首页设计效果图
东莞莲泉净水设备
上海三羽电器网站制作首页设计效果图
上海三羽电器
阳光雨露信息技术服务网站制作首页设计效果图
阳光雨露信息技术服务
江苏小太阳机械科技网站制作首页设计效果图
江苏小太阳机械科技
深圳尚青文化创意网站制作首页设计效果图
深圳尚青文化创意
山东博纳电气网站制作首页设计效果图
山东博纳电气
深圳趣团建文化传播网站制作首页设计效果图
深圳趣团建文化传播
千瑞文化信息有限公司网站制作首页设计效果图
千瑞文化信息有限公司
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
 

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


网站优化干万不可以忽略这几个方面事关实际效果为您解读手机网站建设的前景网络给我们的生活带来了哪些影响创业到底要具备什么条件你知道吗你如何看待百度支持GoogleAMP页面数据提交自适应网站与响应式网站建设的区别是什么网站建设怎么对已经做好的网站进行测试企业为什么要建设自适应网站做网站建设的具体规范有哪些深圳专业建站公司,建设外贸网站需要考虑哪些因素深圳网站建设如何增加网站流量旅游行业网站建设应该注意哪些问题“三项举措”强化大、中队网站建设及日常维护网站推广越来越难做,原因竟然是这样!深圳企业网站建设该如何合理选择色彩深圳网站建设解析如何做好APP的ASO优化深圳市网站建设要注重客户体验Facebook在印度免费互联网推广,背后暗箱引起争议深圳网站制作中一般要设计规划哪些内容分解提高网站粘度的小妙招门户网站设计需考虑哪些标准小叶子订餐网每天解决订单近一万笔关键字在SEO中最重要的位置深圳网络推广公司应该如何选择电子商务网站建设提升的方式深圳网站建设需要注意哪些方面的问题模板网站和自助建站的优缺点是什么网站建设中友情链接有什么意义新建网站需要了解的一些攻略怎样的网站建设效果好网址100M规范空间能做是多少事深圳网站建设应具备那些要素浅谈营销型网站交换友情链接5大原则软件定制项目为何难做软件外包企业应该如何发展网页设计有哪些注意事项深圳企业网站建设中404页面如何进行美观设计风靡全球的ALS冰桶挑战赛,一场叹为观止的智慧营销网站SEO优化中如何做好网站的友情链接企业公司网站会惹上官司到底是怎么回事深圳福田企业网站制作,中小企业如何利用网站seo优化获得流量和排名域名Google-Legal.com被仲裁,谷歌已轻车熟路怎么做用户喜欢的网站建设呢《超级访问》再发力摘冠视频网站推广立奇功福田网站建设中的色彩运用艺术 如何运营好独立的B2C商城网站 很好的网站设计公司哪个品牌好 新手来收!设计师必备设计黄金法则深圳网站建设之什么是WAP网站有什么优势 好口碑的网站设计公司联系方式 营销型建站,深圳网络公司家好百度站长平台VIP俱乐部新首页上线,特权相继兑现深圳网站建设中客户较在意的五点 比较实用的网页设计建议有哪些分享企业网页制作是什么怎么做哪些是网站建设中影响优化的因素深圳福田旅游网站制作,旅游行业网站建设有哪些好的解决方案建站公司在开发和设计网站时应注意什么网页设计在网站制作中的重要性怎么去挑选好的网站空间网站建设之前你需要考虑到的几个问题
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询