本篇文章总结了“查看更多”的应用场景:品类区、信息流、评论区。
![](https://img.haomeiwen.com/i2459124/1ddba205c83c6deb.png)
一.定义
“查看更多”是页面内或者页面之间交互的一种链接,是一种获得更多内容的方式。
广义的查看更多,以文本、按钮、icon、页面指示器、分页、甚至加载样式,广泛使用于移动端的页面中,用来提示用户,点击可以看到被折叠的内容。
![](https://img.haomeiwen.com/i2459124/6385232cb5cc5c58.png)
二.应用场景
2.1 品类区
品类区是国内的APP上非常常见的一个模块,它位于首屏。对于出售商品的平台来讲,品类区主要放置的是商品(实物或虚拟)的分类,各大电商类产品;对于提供服务的产品来讲,品类区主要用来展示所提供的业务范围。
因为移动端首屏空间的珍贵,我们不可能全部罗列展示这些品类;不重要的、使用频率低的品类就会被折叠起来。
目前市场上主要有以下三种处理方式:侧滑式、图标式、折叠式。
![](https://img.haomeiwen.com/i2459124/5f6960d7ff15af82.png)
1.侧滑式
侧滑式的品类区使用屏幕的横向空间来承载内容。
首屏展示用户高频使用的品类,二屏放置非头部品类;侧滑的品类区底部通常会有页面指示器来提示用户,滑动以可以查看更多,比如下图的淘宝和马蜂窝。
![](https://img.haomeiwen.com/i2459124/4dd7b6bfc7864c44.png)
侧滑式相对比较灵活,在当前页面即可查看后续内容,交互成本较低(尽管如此,二屏品类的曝光和点击通常还是比首屏低于10倍)
除了页面指示器之外,也可以通过图标的部分显示来提示更多,比如掌阅课外书。
![](https://img.haomeiwen.com/i2459124/f5c24a9a6d720bb1.png)
2.图标式
固定放置高频使用的头部品类,通常用最后一个品类图标表示更多,适用于分类非常丰富的产品——比如58、美团,都属于全品类服务,当用户想获得其他服务,就要通过点击更多打开新页面,查看全部服务内容。
![](https://img.haomeiwen.com/i2459124/7caa70f965c9599d.png)
但是因为点击后用户缺乏对于内容的预知,用户并不知道这些新内容值不值得他们等待一个新页面,因而会产生犹豫。
除此之外,一些产品支持用户通过“更多”来自定义品类:比如猿题库,点击更多后,会跳转到科目选择页;虎牙和熊猫,通过“更多”用户可以根据兴趣定义自己的品类。
![](https://img.haomeiwen.com/i2459124/88507abf9b077de7.png)
3.折叠式
折叠这种形式并不多见,它是在品类区下方显示“查看更多”的按钮,比如蘑菇街,采用了一种半透明遮罩+文本的形式,暗示品类区的后续内容。
优点:半透明的遮罩可以让用户看到下层的部分信息,点击前用户有预知,能够减少用户的不确定情绪。
缺点:展开后会推开下方的模块,前后只节省了半行的空间,并且展开后没有收回按钮。
推测是蘑菇街是为了在首屏显示发现模块的图片信息,因此降低了部分品类区的权重。
![](https://img.haomeiwen.com/i2459124/f48a0bcdc48bd829.png)
2.2 信息流
APP端的内容通常是由一个个模块组成,每个模块区域是固定的,所以通常页面内的“查看更多”基本为点击后跳转到新页面;或者采用侧滑卡片、换一换等衍生形式。
注:信息下没有其他模块的,比如头条、各大app的猜你喜欢,通常会以瀑布流(预加载和懒加载)的形式,允许用户不断往下滚动,直接查看更多内容。这部分后面会单独写,不在本文的讨论范围内。
![](https://img.haomeiwen.com/i2459124/cedb8b0742bf9c46.png)
1.标题栏
在模块标题右侧放置“查看更多”是最常见、最普遍的一种展示形式,它已经成为用户认知里的习惯用法,通常由文字+指示icon、或者单个指示icon组成。
![](https://img.haomeiwen.com/i2459124/cc27048ddca29db6.png)
常见为浅灰色弱化展示,重点突出模块内容,比如掌阅;根据具体产品的需求,如果要突出内容的丰富性/提高页面跳转等,也可以文字加大/加重/特殊色展示,比如自如。
但是因为用户没有对新内容的预期,点击欲望比较低。豆瓣就对此做了优化——增加了数字提示,让用户点击前就能知道页面内的信息量,消除顾虑。
![](https://img.haomeiwen.com/i2459124/f0b1da4f115b89ca.png)
除此之外,也有一些产品把点击更多的指示icon直接和标题结合起来,用户通过点击标题进行交互,比如腾讯视频。它适合于和标题关联性强的内容,同时留出了右侧空间,对长标题的模块比较友好。
![](https://img.haomeiwen.com/i2459124/3ef3f1e7d709309f.png)
优点:已经成为习惯用法,没有学习成本; 节省页面空间。
缺点:点击区域小;位于顶端,对于内容超过一屏的模块,用户需要上滑返回才能点击。
2.模块底部
“查看更多”以按钮形式存在于模块底部,因为空间留白和明确了按钮的表现形式,可点击性会增加。当我们增加期望后续内容的曝光时,可以采用这种形式。
优点:不会扰乱用户从上到下的扫描顺序;明确可点击。
![](https://img.haomeiwen.com/i2459124/686a9ea1d5b515a8.png)
缺点:比较浪费页面空间;会和内容争抢用户的注意力。
3.换一换
需要打开新页面的“查看更多”对于用户来说无论如何有较高的成本,“换一换”就是因此衍生而来——用户点击后,无需跳转,直接在当前页对该模块内容进行刷新。
![](https://img.haomeiwen.com/i2459124/bb0d292aedf004f2.png)
优点:操作成本低,虽然内容依旧是缺少预期的,但是在用户的接受范围内,还有一种抽盲盒的惊喜。
缺点:因为随机感,多被用于推荐类模块,不适合有秩序的模块,比如榜单;且其依旧局限于模块大小,用户需要依靠多次点击来查看更多,效率比较低。
4.组合
很多APP会在模块内组合使用“查看更多”和“换一换”两种方式,来弥补单一交互的不足。用户可以根据自己的需求选择是换一换,或者新页面看更多。
常见的样式是二者作为按钮放在模块底部,共用一行空间,比如腾讯动漫,此时二者权重均衡。当有侧重点时,比如QQ音乐的歌单模块,就通过视觉的大小和空间,突出换一换,弱化更多。
![](https://img.haomeiwen.com/i2459124/babf39d8d16c5292.png)
5.侧滑卡片
因为纵向空间受限,许多产品开始利用横向来拓展页面空间。侧滑卡片就是其中代表,它通过显示部分内容来暗示用户这里可左右滑动,比如考拉、爱奇艺,滑动n个后会出现查看更多的卡片,引导用户点击下一页。
![](https://img.haomeiwen.com/i2459124/11059acc113aa760.png)
侧滑卡片有些滑动到底后没有查看更多,如大众点评的攻略模块,用户依旧需要点击右上角来查看更多内容。
2.3 评论区
1.内容
社交、社区类的平台,主打UCG,用户产出信息、用户之间的交流,用户之间有大量的沟通数据,同样需要“查看更多”来折叠和展开后续内容。
在文字描述上,为了让用户有信息量的预期,此处的“查看更多”通常具体化为当前信息条数——查看全部xx条评论。
在视觉上,主打内容的产品,“查看更多”通常弱化处理,比如知乎和ins ,在内容下方用浅灰色的文本显示“查看更多评论”,这也是为什么知乎和ins点赞数都远高于评论的一个原因了。
当然,知乎进入全部评论页后,楼中楼的“查看更多”就是以按钮形式显示了。
![](https://img.haomeiwen.com/i2459124/d5d429ef2c83c6d1.png)
2.互动
而微博在文字上增加了最新评论用户的ID名,视觉上也用高亮色突出,引导性更强。
如果是知乎是UGC+PGC的社区,那么微博就是在这的基础上,围绕这些内容发酵为话题进行二次讨论,用户间的互动性更强。
![](https://img.haomeiwen.com/i2459124/3dee282c8d161f3e.png)
总结
本文主要总结了三种”查看更多“的应用场景(品类区、信息流、评论区),同时分析了各自的适用范围。肯定还有没有被总结到的内容,欢迎大家在评论里补充,谢谢!
更多精彩内容请关注作者公众号:白鹭漫谈
![](https://img.haomeiwen.com/i2459124/c6a110dd3292b238.jpg)
网友评论