热门标签 | HotTags
当前位置:  开发笔记 > 开放平台 > 正文

分析传统分页与瀑布流加载对访客产生的不同体验

最近百度图片搜索进行了升级改版。改版后我们可以看到有几个大的的变动,当然其中最明显的要数图片搜索结果的展示模式。我们可以看到改变后图片搜索结果将不再是以往的分页模式显示...SyntaxHighlighter.all();
最近百度图片搜索进行了升级改版。改版后我们可以看到有几个大的的变动,当然其中最明显的要数图片搜索结果的展示模式。我们可以看到改变后图片搜索结果将不再是以往的分页模式显示,取而代之的是更加灵活、动感的加载模式,也可以说是近年来热门常见的瀑布流加载模式。如下图所示的对比图。

  

\

 

  这就引发笔者对于采用分页布局方式与瀑布流加载布局方式两者所存在的差异的思考。对于站点来说,往往一个页面并不能容纳我们某一方面的信息,我们采用多个页面来显示是我们常见到的模式。而不论是老老实实的采用分页布局方式还是采用更为活泼鲜明的瀑布流加载方式,都会对用户带来不同的站点体验,下面我们就来简单的谈谈这两种模式的体验差异。

  采用分页布局方式

  采用分页的布局方式是我们最常见到的,也是最早的模式,这种模式是将一篇大篇幅的内容分成几个小块,然后将这些片段单独的放在一些连续的页面上,方便访客可以轻松的找到自己想要的片段。访客可以借由这种布局方式清楚的知道自己要看的内容的篇幅有多长,已经阅读到哪一个片段,还有多少内容等等。

  我们经常可以再一些篇幅较长的内容页面见到分页。通过分页访客可以首先大概的了解到这一篇文章有多长,同时采用分页的话还可以给读者一个阅读停顿、休息的时间。对于我们的站点用户的翻页点击也是提升PV的一个不错的方式。

  我们再来看看搜索引擎或者电商平台的搜索结果页面,我们也都可以看到这样的分页布局。

  

\

 

  我们在搜索引擎或者电商站点上搜索一个关键词的时候,我们根本无法预计会有多少内容,而分页的布局模式就可以直观的告诉搜索者信息量的高低。分页的模式同时还可以让用户可以快速的跳过一些自己不想要的信息,选择阅读的内容将更加的灵活。分页的模式还可以方便用户回到之前的页面,比如笔者在搜索一件外套时,翻了十页,发现还是第五页的那件外套好看,笔者就可以直接跳转到第二页进行下单购买。

  瀑布流的加载模式

  近年来,一种更加鲜明活泼的布局明显更受到用户的青睐,那就是瀑布流式的加载模式。当一个页面滚动到底部的时候,下一页的内容会被自动的加载进来。

  我们经常能够在一些社交网站上见到这种布局模式,特别是一些基于社交媒体的购物站点,比如蘑菇街、美丽说。通过这一模式,页面与页面之间就没有明显的分割与停顿,访客将可以不受限制的浏览下去。

  但是由于这种模式内容是自动加载的,看一个页面好像永远见不到底,很难预估还有多少内容。不断的加载会让访客找不到北。用户会产生这样页面多久可以到底?已经浏览了多少的内容了?等等的疑惑。如果用户想要回到之前看到的内容也是有点困难的。

  两者取其精华

  既然我们知道了这两种模式在用户体验上的优缺点之后,我们就可以有针对性的使用,采取这两种模式的精华,综合使用。对此我们可以先来看一个案例。

  

\

 

  如上图我们也可以看看百度的图片搜索结果页面,百度的搜索结果页面也采用类似瀑布流的加载模式,但是我们可以看到百度在每一个加载后的页面都加上了定位用的页面,这样就可以更好的方便用户回到刚刚看到的页面。

  采用分页或者瀑布流的加载模式虽然都可以提供给用户丰富的内容,但是这一个小细节却可以让用户产生不同的体验感受。而一个成功的站点就是在不断的追求满足用户的体验需求。作为一个站点我们需要根据用户的不同需求做出满足用户需求的模式。以上就是来自兼职吧http://www.jianzhi8.com/的几点看法


推荐阅读
  • 本文介绍了求解gcdexgcd斐蜀定理的迭代法和递归法,并解释了exgcd的概念和应用。exgcd是指对于不完全为0的非负整数a和b,gcd(a,b)表示a和b的最大公约数,必然存在整数对x和y,使得gcd(a,b)=ax+by。此外,本文还给出了相应的代码示例。 ... [详细]
  • 本文讨论了同事工资打听的话题,包括同工不同酬现象、打探工资的途径、为什么打听别人的工资、职业的本质、商业价值与工资的关系,以及如何面对同事工资比自己高的情况和凸显自己的商业价值。故事中的阿巧发现同事的工资比自己高后感到不满,通过与老公、闺蜜交流和搜索相关关键词来寻求解决办法。 ... [详细]
  • 众筹商城与传统商城的区别及php众筹网站的程序源码
    本文介绍了众筹商城与传统商城的区别,包括所售产品和玩法不同以及运营方式不同。同时还提到了php众筹网站的程序源码和方维众筹的安装和环境问题。 ... [详细]
  • 本文介绍了C++中的引用运算符及其应用。引用运算符是一种将变量定义为另一个变量的引用变量的方式,在改变其中一个变量时,两者均会同步变化。引用变量来源于数学,在计算机语言中用于储存计算结果或表示值抽象概念。变量可以通过变量名访问,在指令式语言中引用变量通常是可变的,但在纯函数式语言中可能是不可变的。本文还介绍了引用变量的示例及验证,以及引用变量在函数形参中的应用。当定义的函数使用引用型形参时,函数调用时形参的改变会同时带来实参的改变。 ... [详细]
  • 本文讨论了如何查看js的一些方法的官方文档,作者提到了在实现打印功能时遇到了困惑,不知道如何查看方法。虽然百度有时可以得到答案,但作者想要知道官方文档的用法,因为有时候百度并不能满足自己的需求。 ... [详细]
  • SLAM中相机运动估计的基本问题及解决方案
    本文讨论了SLAM中相机运动估计的基本问题,指出了解决方案的存在。作者认为阅读相关SLAM书籍是掌握基础原理的有效途径,而不是仅仅依赖现成的解决方案。同时,作者也提到了激光雷达和特征点匹配等技术在SLAM中的应用,并建议读者深入理解相关原理,而不是盲目追求现成的代码。 ... [详细]
  • 英语思维导图大全 词汇与语法结构详解
    本文详细介绍了英语思维导图大全中的词汇与语法结构,包括新鲜一感的理解和订阅后获取百度网盘链接的方法。通过阅读本文,您将对英语思维导图的相关知识有更深入的了解。 ... [详细]
  • 树莓派语音控制的配置方法和步骤
    本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助,文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行,然后使用Eoman的控制方法,即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 如何提高PHP编程技能及推荐高级教程
    本文介绍了如何提高PHP编程技能的方法,推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力,本文提醒读者要有足够的耐心和时间投入。通过实践操作学习,可以更好地理解和掌握PHP语言的特异性,特别是单引号和双引号的用法。同时,本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言,建议读者要从整体来考虑局部,培养大局观。最后,本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]
  • 本文由编程笔记#小编整理,主要介绍了关于数论相关的知识,包括数论的算法和百度百科的链接。文章还介绍了欧几里得算法、辗转相除法、gcd、lcm和扩展欧几里得算法的使用方法。此外,文章还提到了数论在求解不定方程、模线性方程和乘法逆元方面的应用。摘要长度:184字。 ... [详细]
  • 嵌入式处理器的架构与内核发展历程
    本文主要介绍了嵌入式处理器的架构与内核发展历程,包括不同架构的指令集的变化,以及内核的流水线和结构。通过对ARM架构的分析,可以更好地理解嵌入式处理器的架构与内核的关系。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 一次上线事故,30岁+的程序员踩坑经验之谈
    本文主要介绍了一位30岁+的程序员在一次上线事故中踩坑的经验之谈。文章提到了在双十一活动期间,作为一个在线医疗项目,他们进行了优惠折扣活动的升级改造。然而,在上线前的最后一天,由于大量数据请求,导致部分接口出现问题。作者通过部署两台opentsdb来解决问题,但读数据的opentsdb仍然经常假死。作者只能查询最近24小时的数据。这次事故给他带来了很多教训和经验。 ... [详细]
author-avatar
路纺雅
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有