1. 主页 > 设计资讯 > 行业动态

交互设计中的排行榜设计详解

编辑指南:在生活中,当我们不知道吃什么,买什么的时候,很多人会参考软件上的列表。排名帮助用户做出决策,引导用户购买目标产品,大大降低了用户选择的成本。本文作者围绕排行榜的交互设计从四个方面进行了详细的分析,并与大家分享。

排行榜设计有几种展示方式?如何引导排行榜入口?有哪些视觉表现?看看这篇文章,带你全面了解排名背后的思考和实践!

交互设计中的排行榜设计详解(图1)

“今天吃什么啊?”“不知道啊,看看大众点评,哪家店比较靠前”“一会去看什么电影?”“我看豆瓣上,这部片子评分特别高,我们去看这个吧”

当我们面对“吃什么”、“买哪个牌子”、“周末去哪里玩”等问题时,面对的选择越多,就越不知道怎么做决定,或者现在做决定的时候,总会思考这个决定是不是最好的,选择的困难就成了一种流行的病。

面对用户的选择需求,每个平台都有自己的方式,帮助用户做出决策,引导用户购买目标产品,大大降低了用户选择的成本,其中排行榜是平台的常见套路。

用户的选择成本是多少?为什么排行榜可以帮助用户降低选择成本?排名只是用来降低用户选择的成本。为什么商家会涌向排名?

这就是为什么每个人都喜欢排行榜,以及我们生活在各地的“主导”和“非主导”排行榜。你可能不知道,我们的生活正在被各种排名所主宰!

交互设计中的排行榜设计详解(图2)

一、排名榜是什么?

排行榜的本质是一种无感情的信息筛选机制,通过某些相关相似事物之间的比较,反映相似事物的客观实力。

排名列表的建立是基于用户对信息筛选平台权威性的认可。比如我们买衣服会首选淘宝,电子产品会首选JD.COM,看电影会评分豆瓣,都是平台某个领域的权威认可。

用户信任平台过滤信息的权限。由于锚定效应,用户可以降低自己的选择成本,准备快速做出选择。同时,由于用户的从众心理或羊群效应,也会对上市主体产生强烈的品牌认知度,给上市主体带来更多的利益、强烈的荣誉感,甚至流量和平台代言标签,比如:哔哩哔哩百强UPs,各平台榜单销售冠军,朝阳地区第一。这一切背后的原理是什么?

交互设计中的排行榜设计详解(图3)

二、排名的原则和作用

一个完整的排名列表需要三个主要组成部分:平台、主题和用户。俗话说屁股决定脑袋,不同的定位决定了排名对三大组件的不同影响。当然,背后的原理是不一样的。

交互设计中的排行榜设计详解(图4)

1.排名-用户

1)选择班级排行榜-降低用户选择成本

在各种申请之前,我们在决定买什么或者花在哪里的时候,前期需要花费大量的人力物力。在收集相关信息后,我们可以对收集到的信息进行比较后做出决策,也就是说,用户需要经历三个过程:信息收集——备选集的建立——最优决策,等待最终结果。

建立候选集后,在做出最佳决策阶段发生的成本或费用就是用户支付的选择成本(前两个阶段发生的成本是交易成本,不是选择成本)。在建立备选集的过程中,包含的选择越多,用户选择的难度就越大,选择的成本就越高。

交互设计中的排行榜设计详解(图5)

备选集建立后,选择性排行榜利用锚效应在用户心理建立潜意识目标参照,帮助用户做出最佳决策,降低用户的选择成本。(另一方面,平台在帮助降低选择成本的同时,也会影响这个用户的最终选择,平台这边会有详细的分析。)

比如我需要买耳机的时候,如果没有大的应用,就需要找身边的耳机爱好者或者数字电子专业人士,收集信息搭建一套备选。但是由于JD.COM在电子设备方面的权威,我会优先考虑JD.COM的耳机列表,也就是说JD.COM已经完成了之前的信息收集和备选集搭建,用户根据平台给出的维度参考、品牌参考、价格和标签参考来信任平台的权威。整个过程就是用户对主播的搜索和用户对信息确定性的搜索。

交互设计中的排行榜设计详解(图6)

交互设计中的排行榜设计详解(图7)

2)信息排名——满足社会需求

在马斯洛的需求中,当个体的生理需求和安全需求得到满足时,与他人建立情感联系或关系就成为人最强烈的需求,即社会需求。

社会化可以分为:为达到某种目的的功利社会化或为获得情感联系和体验的移情社会需求。比如QQ音乐新的功能模块,如扑通社区、微博明星超级言论列表等,满足了有共同兴趣的用户对于共情和社交的需求。

交互设计中的排行榜设计详解(图8)

无论是“功利社会化”还是“共情社会化”,传播都是首先需要的,传播的本质是信息的流通。而当双方都没有信息可以交流的时候,社会化就不成立了,像微博热搜、今日头条、The Paper这样的信息排名,为有社交需求的用户提供了同样的对话资源。

交互设计中的排行榜设计详解(图9)

在选择性排名列表中,从众心理(也称从众效应)是指人类因为信息和规范的压力而想要融入群体寻求安全感的特征,即使这种信息与自己无关。大多数人,因为担心得不到及时的信息,热衷于浏览这样的排名,以获得实时信息,融入群体生活。

每天早上上下班的路上,用户利用碎片时间的应用刷微博,浏览知乎或今日头条,了解最近发生了什么社会事件,在上班或下班休息的时候在电梯里讨论自己对事件的信息和看法,甚至和别人有相同的看法,都会产生莫名的亲近感,满足自己的社交需求。

交互设计中的排行榜设计详解(图10)

3)分享排名-自我确认需求

春节期间,每个应用都推出了自己的用户年报汇总列表。不知道大家有没有参与,有没有和朋友圈分享。在我们的日常生活中,我们也会在朋友圈和哔哩哔哩看到各种小程序来测试我们隐藏的能力或性格。人们对这类活动的热情,其实是因为人类除了信息确认之外,还需要知道自己在大数据下的自我确认,通过各种列表来判断自己的能力、情绪和价值观,实现自我认同,否则会感到焦虑。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出了他对社会生活的理解,“社会是一个舞台,每个人都是演员”。

在这个社会阶段,我们需要印象管理的过程。我们要向观众呈现什么样的形象,需要我们去思考,去理解自己,理解身边的人。因此,在社会生活中,我们在自己的思维和管理下,将自己呈现为被他人和社会所接受。人类为了保持自身的平衡,防止崩溃,会自发地以“忠诚、纪律、谨慎”来维护自己的外在形象。

另一方面,互联网平台大数据体现了“看不见的”自我,让用户更加清晰地认识自己,同时通过分享,满足了自我确认和他人确认的需求。

交互设计中的排行榜设计详解(图11)

目前我只总结这三种类型的排行榜。如果有朋友想到其他类型,请在评论区提出,加入讨论。

无论什么样的排名,用户信任的基础都来自于对平台的信任,那么用户为什么要信任平台呢?排行榜对平台意味着什么?背后的原理是什么?

2.排名-平台

对于用户来说,排名是为了满足用户对数据参数、社交信息、自我个性的确定性。选择成本是品牌经济学的核心,用户对排名的信任首先要基于平台品牌的权威性。

1)平台权限-用户端

就我们记忆所及,我们对世界的认识来自于父母或老师,他们教会了我们什么是对什么是错,是当时权威对我们的体现。长大后,我们更倾向于认可某一领域专家的权威,如医生、律师、教授等。认为权威人士在某一领域的判断比普通用户的判断更可靠,可以帮助普通用户节省研究工作,更容易做出决策,虽然不一定正确。

搜索的时候会首先想到百度,想到电影书籍中的豆瓣,听演唱会打开网易云音乐,QQ音乐等等。各大应用经过长时间的厮杀,在用户心目中确立了自己在某一领域的权威,形成品牌号召力,推动用户做出需求决策。

另一方面,数据来源也会在排名中说明。比如JD.COM会在排名页面有明确的列表描述,豆瓣会根据平台数据更新,车家会依靠外部权威数据来证明其列表的公平性和透明性,从而减少用户在决策时的思考和猜测,获得用户的信任,增强平台的权威性。权限的建立对平台意味着什么?

交互设计中的排行榜设计详解(图12)

交互设计中的排行榜设计详解(图13)

2)平台权限-平台端

影响用户的决策方向:

平台的权威性意味着说服力和影响力,降低了用户的决策压力,影响了平台要求的决策方向;

平台有自己的话题:

每年的苹果发布会都会带来广泛的热议,app store里的热门推荐也带来了自己的话题和讨论热度;

输出端口优化:

排行榜作为内容输出端口,在平台的权威背书下优化自身价值,平台也可以通过排行榜优化自身平台价值;

平台盈利能力:

在平台的权威下,实现盈利的途径有很多,比如苹果app store的付费应用,百度的丰巢系统,微博热搜的第三第四排名。

3)平台权限-广告通知

当平台完成权限的建立,开始使用排名列表进行商业实现,比如百度和58的竞价排名,大部分应用都会以明显的方式通知用户,阻止平台建立品牌权限。比如微博热搜三四号广告位的“推荐”,淘宝和小红书推荐猜你喜欢的“广告”。

交互设计中的排行榜设计详解(图14)

3.排名——名单上的主体

作为整个排行榜的内容中心,用户会因为排行榜的竞争机制、筛选机制,比如游戏应用的赢家排名、王者荣耀、微信体育排行榜等而乐于分享。

交互设计中的排行榜设计详解(图15)

交互设计中的排行榜设计详解(图16)

因为马太效应,榜单上的头用户会获得更多的平台曝光度,大部分用户的关注度,以及各种潜在的资源,比如流量、资源、人脉、在某个领域的影响力、平台的代言等。这些是潜在的社会货币。这种激励机制很大程度上满足了上榜主体的荣誉感和对平台的归属感。比如哔哩哔哩会发相应的粉丝卡,粉丝顺序不同。

另一方面,平台侧也利用上市主题挖掘潜在用户,为平台带来更多新用户,强化平台的权威性,形成平台与上市主题的良性循环。即使是在上市主体流量超过平台本身流量的情况下,带走平台用户。例如,去年,随着热闹的“威客金融推出哔哩哔哩,签署西瓜视频”,每个主要平台偶尔会抓住交通高手。

交互设计中的排行榜设计详解(图17)

4.排名资源的建立

为了达到用户比较的效果,一个非常重要的充分条件是有相同需求的朋友基数足够大,从而构成排行榜设计成功的必要条件。

1)同系资源分流

对于有成功产品的公司,可以利用平台的相互分流来完成初期测试资源的建设。比如微信早期,借助QQ好友流量,带来了好友的初步爆发;Tik Tok最初的活动依赖于今天头条的流量输入。

2)自建用户系统

不断推送关注好友的信息流。通讯录里的朋友开始用标题的时候,应该发系统推送。比如常年流行的cloubhouse,就是用来和熟人社交的。你需要有这个人的联系方式才能问朋友。关注的人越多,可以解锁的聊天室就越多。通讯录,地理位置,兴趣爱好等。,不断推动社区建设中的动态信息流和朋友卡推荐。

3)伪造

在应用建立初期资源和内容不多的情况下,需要平台自行填写内容,使排行榜信息化,增加用户的活跃度,挖掘用户的需求和个性化。最好是一些小编辑推荐,猜猜自己喜欢什么之类的,或者把推送的内容发布到平台pgc上。

第三,排行榜的进入形式

面对不同的用户群体和使用场景,排行榜的进入形式将是千变万化的,大致可以分为“显性排行榜”和“隐性排行榜”。

1.优势排名

界面中有明显的列表名称、排序、判断规则、列表主题、卖点信息等。排序和内容主题是这个排名列表的基本组成部分,其他则根据不同的产品类型和产品需求来决定是否显示。

1)页面选项卡

它以tab形式出现在首页的底部或顶部,多出现在以UGC或文字信息为核心的产品中,以内容信息为主,经常出现在以信息热度为主要功能的信息和新闻应用中。比如:知乎,今日头条,36Kr。

交互设计中的排行榜设计详解(图18)

知乎热榜内容全面上线;36Kr分为话题列表和人气列表。主题列表只显示前5项,人气列表显示10项。只有前5项有排名图标。在36Kr的热门名单中间,会有收藏名单和综合名单。

交互设计中的排行榜设计详解(图19)

今天的头条在整个页面的三分之一上只显示了部分“头条热榜”。点击“查看更多”后,推出“头条热点榜”、“今日关注”、“北京热点榜”。整个互动形式类似微博热搜。

交互设计中的排行榜设计详解(图20)

2)图标入口

首页功能入口有明显的排行榜图标,优先级高,往往自带推荐属性,可以帮助用户快速选择,降低选择成本,依靠排行榜的应用。比如:豆瓣、音乐、腾讯动画等应用。

交互设计中的排行榜设计详解(图21)

其中豆瓣和网易云音乐有很多各种类型的排行榜。点击图标后,不同维度的列表类型平铺在当前页面上,用户点击跳转;腾讯动画列表类型相对较少,在左边栏切换不同列表。

交互设计中的排行榜设计详解(图22)

3)产品详细信息页面的列表条目

当用户查看产品细节时,他们可能希望在最终决定购买该产品之前横向比较类似的产品。常见于电子商务应用,如JD.COM、拼多多、拿货等。点击进入不同的列表页面,获取更多产品信息进行筛选。(淘宝的产品详情页没有列表,但是首页有隐形列表,隐形列表模块会详细说明。).

交互设计中的排行榜设计详解(图23)

4)搜索过滤器(没有明确的搜索目的)

当用户没有明确的搜索目的时,平台会在搜索框底部推荐没有明确方向性的热门产品信息。一般衡量标准是搜索的热度或者信息本身的热度。利用列表效果留住用户,如微博热搜、淘宝热卖、Tik Tok热卖列表等。

交互设计中的排行榜设计详解(图24)

2.隐藏排行榜

没有明显的排名和规则,但是经过大数据、平台或者榜单制作者筛选后呈现给平台用户。位置越高,在用户心目中的默认位置就越高,比如淘宝的“好货”和编辑选择。

1)编辑推荐/边肖推荐

平台建立初期,平台没有特别的内容可以呈现。这时候就需要平台手动有目的的推荐一些内容了。不同于基于用户行为数据的“猜你喜欢什么”,编辑推荐更多平台希望用户看到的内容,一方面作为平台内容的输出端口引导用户,另一方面平台发布自己的内容,也能保证内容的高质量。

交互设计中的排行榜设计详解(图25)

2)猜测自己喜欢什么/相关推荐

平台根据之前的用户行为数据如页面浏览、收藏、转发、搜索等向用户推荐相关内容。此时应用已经基本过了最初的客户获取期,有大量的平台用户使用数据。“猜你喜欢什么或者推荐什么”模块,用来增加用户的浏览时间和购买可能性。各大应用平台适用性强,一般都出现在首页。

交互设计中的排行榜设计详解(图26)

3)年度总结清单

每年年底朋友圈都会展示各种生活、音乐、消费排行榜,其实是用户认识自己、喜欢别人认识自己的一种方式。用户通过网络数据反映自己的轮廓,清楚地认识自己。

交互设计中的排行榜设计详解(图27)

4)排名靠前

不知道你小的时候有没有看过第十放映室。这是我对排行榜的最早印象。会有各种最佳动作片,最佳男配角等等的总结。香港电影比较多,这是我早期的电影信息库。现在我们还会在小红书、Tik Tok、微信官方账号平台上刷各种顶级推荐,其实就是一种排名榜。

TOP类别是经过人工筛选的排行榜。有的答案是从众多选择中选出并给出理由,而用户只需要在筛选出的内容中做出决定,节省了选择的成本。比如豆瓣电影每年都有。另一个TOP列表虽然不能帮助用户做决策,但是可以迎合用户确定性需求的各种库存列表。比如Tik Tok的TOP榜就是盘点各种内容和人。

交互设计中的排行榜设计详解(图28)

5)搜索过滤器(具有明确的搜索目的)

与其他排行榜相比,过滤后的内容反映了用户的具体需求,高效清晰地为用户提供了选项,引导用户快速选择。

交互设计中的排行榜设计详解(图29)

第四,排名的体现

排行榜一般由必要的列表头、列表上的主体、不必要的列表规则和更新信息组成;列表上的主题由必要的主题信息和排名,以及不必要的推荐理由、排名变化和热度信息组成。

1.排行榜信息结构-排行榜负责人

好的列表可以快速吸引用户找到自己的需求点,引导用户点击列表查看。列表头也因功能需求不同分为唯一性列表头和可重用性列表头。

1)唯一性列表的标题

当整个应用中只有一个排行榜时,排行榜头的背景和排行榜的名字通常是个性化的和品牌化的。比如微博的微博热搜,知乎的盐选榜,今日头条热搜,公众评论榜等。其中微博、头条、大众点评等都有品牌在其名下泄露,增加了平台的品牌权威性。

交互设计中的排行榜设计详解(图30)

2)可重用性列表负责人

在一些应用平台上,内容需要在不同纬度的各种排行榜上显示。为了统一平台,降低后期维护成本,一般使用可重复使用的排行榜,如豆瓣、JD.COM、QQ音乐等。

交互设计中的排行榜设计详解(图31)

通过更换左右切换商品进行宣传来获取东西。豆瓣、微博、马蜂窝都是通过替换图片和文案进行改编,但根据场景不同有所不同。豆瓣和微博由于列表效应,根据列表第一名的变化改变了底图和副本;马蜂巢遵循自有品牌的蜂巢形状和“马蜂巢列表”的标签设计形式,通过改变复制底图来应用不同的主题;JD.COM相对简单,只是改变拷贝的标题,以实现多主题改编。

2.排名信息结构——列表的主体

由于不同场景的业务需求,排行榜上的主题一般有纯文本、图文结合、横向+列表结构三种表现形式,其中主题信息和排名是排行榜的必备信息,而推荐原因、排名变化、热度信息、评分等非必不可少的信息则根据用户的关注信息点进行泄露。

1)纯文本形式

纯文本排行榜通常以内容(或标题)加排名的形式出现,往往是基于信息的排行榜,如微博、知乎、今日头条等专注于信息的应用,或者是搜索列表下方的热门排行榜。一般来说,信息流行度是作为信息排名列表中的衡量标准,因此在标题和排名中添加了各种形式的突出流行度信息,如关注流行度的人数,或者显示流行度的标签,如“流行度”、“新度”和“爆炸”,如Tik Tok和微博。淘宝的搜索人气增加了标签外涨跌的排名变化。

交互设计中的排行榜设计详解(图32)

2)图文结合

与纯文本形式相比,由于图片信息的增加,整个列表的主体占据了更多的空,也可以显示更多的产品信息,帮助用户做出选择。

图片格式:

一般来说,列表上的图片有三种类型:水平版、方形版和垂直版。

头条、知乎等信息应用都采用传统的横图形式,延续了用户阅读新闻信息的习惯;豆瓣,腾讯动漫等。,因为书皮、电影海报等用户视觉场景在现实中是垂直构图,所以也以垂直画面的形式使用;、大众点评、马蜂巢使用方形图,可能是因为产品的多样性需要考虑多个画面的改编。(视频和游戏由于场景的使用,多以横画面的形式出现;不过因为游戏封面和海报也会有竖排的形式,比如:漫游者之星空,小黑盒)

交互设计中的排行榜设计详解(图33)

左右VS左右:

在设计图文结合的部分时,首先要考虑的是采用左图右图还是左图右图的形式。很多人可能会说两种形式差别不大,没什么好纠结的!或者认为因为视频、图片、文字对人类的吸引力在下降,所以应该选择左图右文的形式。但事实上,这与我们长期以来的阅读习惯以及应用程序希望接触的用户类型有很大关系。

人类阅读和扫描图片通常有三种布局模式,包括古腾堡、z型和f型。

其中,产品列表页面最常用的是F型布局模式,这是雅各布·尼尔森(Jacob Nielsen)在公司进行眼球追踪研究后首次提出的。

像其他模式一样,眼睛从上/左水平移动到上/右,然后返回左边缘进行水平扫描。但F型布局第二次扫频后,向右扫的频率会越来越少,眼球向下移动会紧贴左边缘。用户也倾向于在F模式下浏览整个页面,即从左到右,从上到下。阅读模式越低,信息获取效率就会越低。

交互设计中的排行榜设计详解(图34)

交互设计中的排行榜设计详解(图35)

所以今天的头条、知乎等需要通过文字传递给用户的精准丰富的新闻信息应用,一般都是以左右图片的形式展示。而电影、游戏、动画等用图片触及用户需求的应用,都是采用左图右文的表达方式,比如腾讯动画、爱奇艺、拿东西等等。

交互设计中的排行榜设计详解(图36)

3)水平+列表表达式

说到排行榜,我们通常会先想到领奖台,很多平台也采用前三横排+其他排行榜的结构。纯榜单形式下,平台用户的注意力大多集中在第一位,而领奖台的形式模仿现实生活中的奖励形式和仪式感,将整个榜单的关注范围从第一位扩大到第三位。另一方面,榜单的竞争关系从单个争夺一个名次变为前三名的竞争关系,增加了第一名的高度。(目前只在微博的明星实力榜和Tik Tok的直播榜看到这种形式)

交互设计中的排行榜设计详解(图37)

3.列表信息结构-列表规则和信息更新(不需要)

列表规则是列表规则的描述,是平台权限的体现。列表规则有些平台有自己的数据库,会有JD.COM等相关平台数据支持;车家依靠“汽车行业协会”的外部数据支持,增加平台的权威性和榜单的可信度;

交互设计中的排行榜设计详解(图38)

信息更新一般存在于列表头和列表主体之间,部分是定时更新,也有类似微博热搜的模式是实时更新。作为用户的痛点,腾讯动画更新会在延续企鹅形象的侧边栏头部标明列表的更新周期。

交互设计中的排行榜设计详解(图39)

动词 (verb的缩写)总结

排行榜的成功看似是解决了人们选择和获取信息的困难,但说到底是因为人们害怕不确定性,无论是信息的不确定性还是自身价值的不确定性。另一方面,平台利用金钱、声誉、奖励等外在激励,结合满足、确定、社交等内在激励,使得排行榜成为任何平台上非常受欢迎的产品功能。

排行榜作为一个平台,由于产品受众、关注焦点、宣传方式的不同,会以各种形式出现入口和呈现。作为设计师,需要深入了解排名榜等功能背后的产品逻辑,以及用户操作行为背后的思维和心理效应,提出合理的设计,帮助用户了解产品功能,满足用户需求。

来源:

社交的本质社会心理学对用户体验的影响系列:权威性原则3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern交互分析:排行榜应该如何设计?如何利用好排行榜产生榜单效应?万字长文深度分析:产品排行榜的设计和玩法关于排行榜的设计,这有一份7000字干货手把手教你做!淘宝“有好货”竞品分析:淘宝为何要把排行榜藏起来?我们晒网易、支付宝年度榜单,其实只是在晒自己?

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处.

联系我们

在线咨询:点击这里给我发消息

微信号:ffjianzhan@qq.com

工作日:9:30-18:30,节假日休息