本文由作者 呆呆丶 于社区发布

本篇文章的问题挺有意思,虽然是一个页面中无关紧要的模式,但却是典型的反模式设计,各位可以简单读读。

读者提问:

社区论坛类产品,天涯、虎扑与百度贴吧的帖子评论页有一个设计差异。天涯、虎扑在帖子评论页有可选择评论分页的功能,可以点击页码跳转至想看的页面;而百度贴吧评论页则是以 Feed 流的形式,没有添加可选择评论分页的功能。为什么同为社区论坛类产品天涯、虎扑评论区旁边会有评论分页选择的功能,而百度贴吧没有?

面对这种细节问题,可能很多人会说:不就是因为评论比较多,产品想让用户有一个选择,可以直接跳转到后面的评论页,查看评论,所以这样做么?

可能原因确实如此,但是这样的设计方案是否存在问题?这是本篇文章想要探讨的。


要回答这个问题,我们得先从「无限加载」与「内容分页」的差异开始聊起。

无限滚动加载,通常以 Feed 流的形式出现在资讯或社交产品的内容模块中。包括图片社区的瀑布流也是类似的一种实现方式。

特点:短时间内让用户找到自己感兴趣的内容。

所以在移动端的知乎,豆瓣等内容社区中,内容都是以无限加载的方式呈现的。短视频类产品也是其中一种。

好处是,用户浏览页面内容更快,且在移动端不需要频繁点击,只需要通过手势下滑就可以刷新出更多内容。

正常会见到的做法就是提前加载,用户就会没有加载感知,可以无限下滑。

相对的,不好的点在于,内容无法定位。比如刷了一会儿,看到一条感兴趣的内容。第二次回想起来再去找,又需要重新回忆大概位置。要是感兴趣的内容比较靠后,那就需要重新刷很久,而不像分页直接点击尾页就可以出现。

所以分页的好处就是用户的控制感会强一些,只不过在信息浏览过程中,需要反复操作跳转页数。

于是形式的选择主要就取决于内容了。

结果就是:

  • 无限滚动在移动端更方便,且适用于快速浏览内容和发现内容的场景;

  • 分页更适用于对内容的掌控更强的场景,需要用户更专注,如后台表单。

所以也可以理解为,当两类相同产品,利用不同方式来对内容做区分控制时,可能的情况为:有分页的,是希望沉淀内容的;没分页的,只是让用户随机查看的。比如,我刚才看了一个作品不错,好像是在第五页?类似的。


这里解释清楚了,我们再回过头来看,当它们出现在评论这类模块中时,应该要怎么处理。

但评论这样的信息,是否有分页必要呢?

评论,从广义上来说,是低门槛无限制的,人人都能使用的一个功能。评论内容本身缺少高价值属性,算是现实生活中口舌之快的演化。刷评论的目的,是因为主题,想看到更多相关的,一旦脱离主题,评论本身就没有意义了。

因为社区论坛类产品,一个社区一个论坛就相当于一个社会的小型缩影,一个小型社会就会有各式各样的人在里面,每个人都有发声评论的权力与可能,因此评论的种类数量繁多,需要一定的规则来定义筛选出有用的内容。

比如知乎,会通过点赞数筛选出优质评论,置顶于评论区中。因此在无价值内容模块中寻找仅有的有价值信息,就需要突出单条信息来处理,而不是通过分页让用户自主去寻找。

类似的,既然评论本身并不存在什么价值,那么虎扑与天涯论坛是否有必要在评论区加入分页设置,而且是在移动端?

我仔细去体验了这两款产品,发现它们的分页并不是单纯意义上的分页,而是整合了无限加载与分页选择。

类似于无限加载下滑,但是会自动定位到具体页数上,比如我滑了 6 次,页数就到了第 2 页了。

从这里看出,移动端出现内容加载的情况时,还是以无限加载为主要方式,即使有分页,也是辅助作用。

那么无限加载搭配一个分页选择这样的设计,是不是好的方式呢?我们接着聊聊。


随着移动互联网的发展与移动设备的普及,早期的网页端社区类产品也开始尝试转战移动端,但因为受限于功能形式和用户习惯的使用差异,以至于需要在两端之间做好平衡,去考虑用户操作习惯以及两端适配的问题。

其中最典型的就是翻页问题,毕竟新闻/内容等社区类产品的核心,就是聚集用户针对某个话题进行讨论、争辩、引领等。

通常情况,这些社区论坛类产品一般会以某个主题为发帖的内容核心,围绕这个话题进行讨论,讨论的内容就是以评论的形式呈现出来。它们的目的很明确,就是为了让用户在翻看这些讨论内容时,能快速地浏览与发现信息,甚至会代入「楼中楼」的形式来合并同一个评论下的子评论。

注:楼中楼的意思是,比如你回复 3 楼,那么 3 楼里面就有你的回复了,其他回复 3 楼的内容都会在里面。而不会一直平铺下去。

这种形式的设计目的,就是为了让翻页变得省力,不需要来回跳转去查看评论信息。

上面结合起来看。

无论是无限加载还是评论区的形式优化,都是为了帮助用户在浏览这种信息价值不高的场景下忽略分页,而省时省力,现在又回来重新加个分页序号,是否本末倒置?

当然,如果强行解释为,在某主题内容下,讨论的内容很多,加上分页可以帮助用户回溯信息,那勉强也可行。

但是用户心理对于无限加载的内容本质上就是手滑获取信息,如果加上分页,是否在强加给用户一种理解,即结合的使用形式更为方便?但分页在移动设备上的操作本就属于高成本操作,在评论区这类低价值信息区域设置这样的形式,还是需要再斟酌。

毕竟评论区的内容一扫也就过了。

这种设计形式就类比于:微信聊天列表,删除某个聊天框,二次确认后,再弹出一个撤销操作。

从逻辑上讲似乎没问题,但是从用户行为上来说,还是过度化设计了。

????思考

移动端界面本是寸土寸金,任何位置加一个内容,都会消耗用户思考的精力,即使看起来好像是一个很小的细节点,也应该再三考量。

所以我个人不是很喜欢天涯与虎扑评论区加了分页的这种形式。

无限滚动就像是无尽的游戏,不管滚动多远,都感觉永远无法结束,本质上属于沉浸式设计。

而有限的结果数量,可以让用户去做选择。David Kieras 在人机交互的心理学理论中提出:「显示终点可提供控制感」。当用户看到结果总数时,他们就能够预估找到内容的所需时间。

它们的属性存在差异,导致两者使用的方式也不同,更多时候还是与产品定位、属性有关。两者不同属性的模式被结合使用,可能会违背用户的心理模型,成为一种「反模式」。

当然,肯定没有哪种方案是绝对的「优质体验」,都是视场景而定,且各有优劣。

于是,针对这个问题,我宁愿在空余部分更多引导用户去发表评论,或呈现其他内容,而不是强行塞一个无关紧要的功能吧。

------正文分割线------

点个“在看”吧

分页与无限滚动在评论区的设计差异相关推荐

  1. c# ui 滚动 分页_UI备忘单:分页,无限滚动和“加载更多”按钮

    c# ui 滚动 分页 重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...

  2. antd-mobile InfiniteScroll 无限滚动

    需求背景:做一个分页的无限滚动,第一次用这个ui库,也算是吃了点苦头,好记性不如烂笔头记录一下- 框架使用:react + hooks; 注意点:: 如果带有搜索功能尽量不使用useeffct的副作用 ...

  3. 使用 GraphQL 无限滚动

    在构建为用户提供一长串信息的应用程序时,例如新闻提要.论坛中的帖子或聊天应用程序中的消息,我们的目标是向用户显示合理数量的信息. 用户开始滚动浏览初始列表后,Web 客户端应立即加载更多内容以继续向用 ...

  4. 软文营销评论区怎样营造好的氛围?

    网络时代,不仅给我们的日常生活带来了便利,也增加了我们的实时交互能力.发布者和读者能够通过互联网更加快捷的进行沟通,读者可以实时反馈自己的想法,发布者也可以更快的接受读者的想法,这是不同于之前报纸广播 ...

  5. 表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口

    不知道UI抽什么风,所有列表都没用分页器,一律采用滚动加载.但我又是个懒蛋,不想手写所以就用了element-plus的无限滚动,但是v-infinite-scroll和el-table这俩搁一块就有 ...

  6. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  7. datagridview滚动条自动滚动_掘金上摸鱼的新发现,无限滚动(infinitescroll)

    前言 上班摸鱼,下班摸鱼,一直摸一直爽.在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所示: ‍‍‍‍‍‍‍‍‍‍掘金官网 ...

  8. JS无限滚动、回到顶端和图片懒加载

    目录 前言 1 无限滚动(垂直) 1.1 效果和代码 1.2 过程解释 1.2.1 监听页面滚动 1.2.2 获取距页面底部的距离 2 回到顶端 2.1 效果和代码 2.2 过程解释 3 图片懒加载 ...

  9. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

最新文章

  1. ResNeSt之语义分割,ADE20K全新SoTA 47.6%
  2. 微信也许会有重大变化
  3. hyperterminal使用教程_如何在Win中安装使用超级终端HyperTerminal.doc
  4. 用户使用报告_【市场】最新手机用户使用报告 8+256GB成首选 小屏党哭了
  5. 景驰无人车总部落户广州:明年最低量产500辆,回应百度官司
  6. win7欢迎界面时间长_win7系统msvcr100.dll丢失如何解决msvcr100.dll丢失解决方法【详解】...
  7. 组合数据浅析之“幻方”
  8. 对称 symmetric
  9. windbg拦截驱动加载
  10. couchbase导出mysql
  11. 计算机网络期中考试总结反思,期中考试总结反思
  12. 字节跳动员工晒出税后工资,网友:怀疑你是日薪
  13. 计算机二级什么叫项目符号,项目符号
  14. 鸿蒙和小米哪个值得入手,鸿蒙系统能够吸引小米的优势是什么
  15. HEBUT_环境保护与可持续发展_课件整理_05模块五
  16. eel库实现JS调用python方法
  17. 编写简单的中文分词程序
  18. Xtensa处理器架构基础-架构简介与常见寄存器
  19. PT2262软件解码程序
  20. 天空盒里放风筝,OpenGL就这么任性:想怎么放,就怎么放!

热门文章

  1. 2021年新高考八省联考成绩查询辽宁,辽宁八省联考成绩什么时候出 辽宁八省联考成绩查询入口...
  2. 基于 Wasm 和 ORAS 简化扩展服务网格功能
  3. Canonical 开源 MicroK8 | 云原生生态周报 Vol. 25
  4. 云原生生态周报 Vol.9| K8s v1.15 版本发布
  5. linux mysql 不稳定_Linux服务器mysql数据库自动停止的解决方法 | 很文博客
  6. tp5 批量更新多条记录_tp5批量导入数据库
  7. pdo mysql分页_php运用PDO连接数据库,实现分页效果
  8. Non-Blind图像反卷积论文整理
  9. 【星球知识卡片】模型量化的核心技术点有哪些,如何对其进行长期深入学习...
  10. 【每周CV论文推荐】 初学GAN必须要读的文章