编辑导读：排行榜组件在交互设计中常用于表达用户参与深度、产品关注热度，通过榜单营造氛围感，进而激励用户行为。我们常见的形式有游戏化榜单设计，这是因为游戏化榜单设计体验沉浸度往往较高，对行为对激励效果更加有效，设计原理来源于心流理论，这种由全神贯注所产生的心流体验，被认为是一种最佳的体验。

01 榜单目的

1. 用户维度

排行榜作为用户体验中链接筛选、搜索或追赶机制的中端环节，多投放于生活服务类业务场景，是一种与用户心智模型紧密相关的情感化设计。

心理学大师佛洛依德说过：“一个人做事的动机不外乎两点，性冲动和渴望伟大。”

攀比在心理学上被界定为中性略阴性的心理特征，即个体发现自身与参照个体发生偏差时产生负面情绪的过程。当不同行为之间存在差异化和比较的时候，我们总是希望比别人更强。排行榜中常用的“追赶机制”便由此得来。

而用户需求随认知不断攀升，“马斯洛需求层次”中提到的社交、需求尊重和自我实现是情感化设计的核心观点。

如微信运动的步数统计，当步数超越好友并占据TOP1时，自定义背景图还会出现在好友封面。这一细节设计极大的满足了虚荣攀比心理，若想占据更多人的榜单，就需要投入更多的运动量，通过获取用户的真实行为从而增强了粘性。

微信读书通过每周24h结算，将用户使用数据可视化，并结合用户间相互PUSH的交互设计，焕发了“沉默用户”的活力，并维系了用户间的好友关系。而通过好友列表的书单，也大幅帮助用户缩短了筛选的时间，提升了决策效率。

由此联想到蚂蚁森林的种树模式，或许有朝一日用户还可通过捐赠自己的周阅读量/时常，以换取购书折扣或兑换纸质书资源，来帮助贫困地区的孩子们。

由此根据用户认知模型可总结为以下三点：

• 本能层：寻找权威，辅助决策，减少关注成本
• 行为层：激发参与，场景触达，增强粘性
• 反思层：理念认同、身份象征、自我实现

2. 产品维度

获取数据：促活冷启动用户/信息流体系，带动UGC模式

精耕运营：数据反雏，带动渠道引流；优化流量分配，构建盈利模式闭环

02 内容承载形式

榜单的内容承载形式通常根据功能优先级确定，根据需求采取不同的设计策略，多以弹窗和页面为主。弹窗排行榜常见场景：短小活动中，例如跳一跳，作为一个快速附件，不打断操作流程且对用户有即时的刺激。而页面排行榜常见场景则是：稍大型活动中，不太能够刺激用户行为，且需要打断操作的场景。

• 弹窗：信息文字量较少，可读性强，操作热区面积较小且集中、即时刺激、强引导性
• 页面：可视化信息承载量大，多层级分类、差异化排序、沉底锚点个人定位、长效周期

03 榜单分类

根据用户使用过程中的决策动机，将排行榜类型分为“4+1”类。其中用户参与型、内容搜索型、关键影响因子型和纯信息型，是以排行榜本身为载体的功能组件设计。“复合组件”则作为链接前后的过渡，给予用户友好的缓冲体验。

1. 用户参与型

游戏类 社交类 电商类

代表案例：王者荣耀、网易狼人杀、消消乐

特征：顶部切换榜单类别、头部玩家排行置顶、沉底锚点定位个人信息（追赶机制）

2. 内容搜索型

社交、热点话题

代表案例：雪球、抖音、微博

特征：可视化标签、多层信息注释入口、UV反哺个性化推送

3. 关键影响因子型

小游戏、公益类、养成类

代表案例：蚂蚁森林、微信运动

特征：实时动态榜单、关键影响因子数据可视化、可操作性变量

4. 纯信息型

新闻类、音乐类、读书类

代表案例：网易云音乐、樊登读书

特征：深度嵌套内容主题、沉浸式瀑布分类、“不断电”用户体验、定向合辑推送、UV数据指标

组件小结：

5. 复合组件“榜单+筛选”

除了游戏化榜单设计，在生活服务类APP使用场景中（如寻找房源、找工作、选购商品等），榜单的功能同质化于功能排序，有时也可转换成一种单维度的筛选。当内容的复杂性和需要的专注度较高时，则结合筛选控件，一起构建“用户使用搜索前”的闭环。

常见的复合组件形式有：单频筛选+综合排序，多重组合筛选。

单频筛选，是一种入口型筛选。筛选条件作为查询结果的前提，把高频的筛选项直接用tab展示。设计筛选条件时，最好不要多于三项；较为复杂且无必要事先决定的筛选内容可放在后续列表页去做二次筛选，提高信息筛选的效率。

单频筛选+综合排序，结合入口型筛选模态，将需要用户决策的其他条件，用抽屉或列表的形式收纳在综合排序框架中。其中，侧边式设计模态，承载的信息量更多，操作区域偏右，相对来说更方便用户操作，但对页面阻碍感比较强，需要退出后才能进行其他筛选项的选择；下拉式更方便切换选择其他的筛选项，且适用于有多层级联动的筛选。

飞猪采用单频加综合筛选的方式，第一层是常规筛选，第二层综合排序，第三个是独立筛选按钮。有三个独立的筛选入口，分别为位置，星级和推荐。飞猪在顶部使用了一个筛选按钮入口，点开会下拉出现9个子类目，对应右侧提供了单选和复选两种状态。并将用户决策目标“标签化”设计，及时标注，便于用户选择后进行删减。

用户的筛选维度和频率有高度相关性，对于寻找房源来说，最先考虑的可能是地理位置，品牌和星级，其次是推荐排序。设计思路是把高频的筛选项直接用tab展示，把低频的筛选项收起。如飞猪在第二层提供了9个可定制切换的子类目，将会有更高的效率，同样的操作在携程需要至少三步甚至更多操作，三级标签全部外露，大量的信息会给用户造成一定干扰。

同时，在用户完成排序和筛选时，飞猪使用“查看酒店”，引导用户点击按钮，使目标感更强。而携程使用的“完成”更像筛选流程的完结。

04 榜单设计总结

设计前期，明确产品目标和期望的用户行为是什么，该行为是否可以用排行榜组建来激励；

设计中期，利用权重影响因子来主动提高某些场景的价值预期

设计后期，关注用户操作前后的榜单模态及反馈

排行榜组建利用榜单营造氛围感，通过用户渴望“榜上有名”和游戏化“追赶机制”来影响用户，制造“头部玩家稀缺感”可以刺激用户完成期望行为，但也要考虑差异化设计会不会带来不可控但负面效应。

而在“榜单+筛选”复合组件中，则是一个帮助用户快速定位信息的过程，目的在于缩短用户对于数据的寻找时间；但在设计过程中往往会遇到多种维度的排序信息，用户对它们的需求频次是不同的，设计前期不妨先对各种维度划分优先级，然后再选择的合理的筛选的形式，最后根据信息内容多少来规划排序与筛选的展现方式。

本文由 @理财佳 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议