回顾了一下以前的文章，发现很多都是在讨论某个功能模块的设计方法，包括搜索、passport、应援等，目前按照后续的安排，还会继续输出一些具体功能模块的设计方法，力求更加接地气，更加有实用性。那么今天就来聊一聊下一种功能模块设计方法——榜单页面。

　　概念描述

　　榜单模块，第一直觉上就是对一类具有相同维度或者属性的内容进行排序并呈现的模块;大家的联想思维大部分会落在明星、电影、游戏大神排名等领域，或者App Store、豆瓣上的排名，可见榜单其实应用的范围很广，没有绝对的使用限制，在内容类、游戏的APP中更加常见。

　　榜单实际上是游戏化设计方式的一种，与构建用户的荣誉感紧密相关，无论这种荣誉感是否真正来自用户本身，榜单排名总是会刺激目标用户更深的参与感。

　　入口

　　无独有偶，榜单页面是相似内容的聚合，因此在正常逻辑下不会成为产品主页，一般是一个二级页或者展开页面，因此也就必然存在对应进入的入口;

　　榜单入口根据所处页面层级的不同，在设计上有显著化与普通处理两种方式。

　　当榜单入口出现在主页上时，由于还有更多其他高权重信息或者功能需要露出，因此榜单入口一般会设计成并列的标签样式(icon或者文字入口)，或者与其他内容通过同质化的样式显示;

　　(网易音乐;QQ音乐;幻音音乐)

　　当榜单入口出现在次级页面上时，榜单入口的权重会相应增强，入口的显著性也会随之提升，在card的占比高度、色彩上会更加突出。

　　(泡泡;doki;阿里星球)

　　榜单类型

　　依据不同的内容内容类型，榜单设计样式也有着迥异的风格，主要来看一下音乐、明星、游戏/粉丝榜单的设计样式。

　　音乐榜单

　　由于音乐需要消费时间去欣赏，用户无法在页面中根据meta信息更加直观的感受到榜单中音乐的内容，因此榜单的排行规则就显得尤为重要，或者说是榜单的标题。音乐榜单页面的头部会突出显示榜单标题和类型，便于用户快速识别;榜单列表中会设置对应的播放、选择、缓存、分享等功能操作。

　　(网易音乐;QQ音乐;幻音音乐)

　　明星榜单

　　明星榜单主要是呈现明星的影响力排行，排名依据主要是粉丝用户在平台上的相关互动行为，包括打榜、应援、互动等，对于用户而言，明星个人形象在榜单中是最重要的，尤其所处前3名位置。明星榜单的设计主要会优先突出当前首位明星，作为页面头图展示，这与当前的用户流量息息相关;其次是钱3面用户信息突强化显示，无论是在头像的尺寸、装饰设计、色彩以及meta信息数量上都会更加突出。

　　(泡泡;doki;阿里星球)

　　游戏/粉丝榜单

　　游戏化的榜单设计在游戏排名的设计中反而比较中规中矩，因为游戏榜单中的排名内容不是音乐、明星等这类用户可以直接用来消费的内容，主要是呈现游戏用户排名，所以游戏榜单设计更加倾向于展示更多排名信息，，突出上榜前3名，突出展示用户自己当前的排名位置，但是由于游戏横屏页面的特殊性，列表样式在纵向排列的高度上受限，所以在设计样式上有一定的限制。

　　(绝地求生-刺激战场;终结者)

　　粉丝榜单与游戏排名榜单类似，但是鉴于竖屏的样式，页面布局上会有更多特异化的设计样式，前三名的信息同样可以显著显示。

　　(爱豆;OWHAT;泡泡;阿里星球)

　　设计样式

　　从上述的分类案例就可以看出来，尽管榜单呈现的信息内容不同，但是整体上都是使用了列表的样式，同时为了增加游戏化效果，会突出显示前3名或者第一名，用以刺激用户的荣誉感，而这几种方式也就直接链接到了下一部分要讲的内容——互动。

　　页面布局

　　言归正传，榜单的相对完整的通用设计样式主要是：特异化呈现的头部+特异化的前三名+列表;如果当前榜单与用户行为有直接关联，一般会根据需求放上“我的排名”相关信息突出显示，刺激用户参与。

　　(榜单页面通用布局样式)

　　维度切换