一种功能模块设计方法——列表页

回顾之前的文章，发现很多都是讨论某个功能模块的设计方法，包括搜索、通行证、支持等。目前，根据后续安排，我们将继续输出一些具体的功能模块，力求更加接地气。 齐，比较实用。 那么今天我们来说说下一个功能模块设计方法——列表页。概念说明

第一直觉是列表模块是一个对具有相同维度或属性的一类内容进行排序和呈现的模块； 我们大部分的联想思维都会落在名人、电影、游戏高手排行榜等领域，或者是App Store、豆瓣榜单上的排名，可以看出榜单的应用范围很广，而且使用上没有绝对的限制。 它在内容和游戏应用程序中更常见。

榜单实际上是一种游戏化的设计方法，与建立用户的荣誉感密切相关。 不管这种荣誉感是否真的来自用户本身，榜单排名总会激发目标用户更深层次的参与感。

入口

无独有偶，列表页是相似内容的聚合，所以正常逻辑下不会成为产品首页。 一般是二级页面或者扩展页面，所以必须有对应的入口；

根据页面层次的不同，列表入口可以设计为突出和普通两种方式。

当列表条目出现在首页时，由于需要暴露的其他高权重信息或功能较多，因此列表条目一般采用平行标签样式（图标或文字条目）设计，或者与其他内容同构。 定向风格展示；

（网易音乐；QQ音乐；幻影音乐）

当列表条目出现在二级页面时，列表条目的权重会相应增加，条目的显着性也会增加，卡片的比例、高度和颜色会更加突出。

（泡泡；doki；阿里星球）

列表类型

根据不同的内容类型，列表设计风格也有不同的风格。 我们主要看一下音乐、名人、游戏/粉丝列表的设计风格。

音乐排行榜

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

（网易音乐；QQ音乐；幻影音乐）

明星名单

名人榜主要呈现名人的影响力排名。 排名主要依据粉丝和用户在平台上的相关互动行为，包括排名、支持、互动等。对于用户来说，榜单中明星的个人形象是最重要的。 ，尤其是前三名的位置。 明星列表的设计会优先突出当前第一颗明星作为页面的头部图片，与当前的用户流量密切相关； 其次，第三面的用户信息将会被突出显示，无论是在头像的大小、装饰设计、颜色以及元信息量上都会更加突出。

（泡泡；doki；阿里星球）

游戏/粉丝列表

游戏化排行榜设计在游戏排行榜的设计上中规中矩，因为游戏排行榜中的排行榜内容并不是用户可以直接消费的内容，比如音乐、名人，而是主要呈现游戏用户的排名，所以游戏排行榜单一的设计更倾向于显示更多的排名信息，突出显示列表前3名，突出用户当前的排名位置。 但由于游戏横屏页面的特殊性，列表样式在竖向排列的高度上受到限制，因此设计风格有一定的限制。

（绝地求生-刺激战场；终结者）

粉丝列表与游戏排行榜类似，但由于竖屏风格，在页面布局上会有更专门的设计风格，并且也可以突出显示前三名的信息。

（Idou；OWHAT；泡泡；阿里星球）

设计风格

从上述分类案例可以看出，虽然列表呈现的信息内容有所不同，但普遍采用列表样式。 同时，为了增加游戏化效果，前3名或第一名将被突出显示。 激发用户的荣誉感，而这些方法都直接链接到下一部分要讨论的内容——交互。

页面布局

言归正传，榜单比较完整的总体设计风格主要是：专门的呈现标题+专门的前三+列表； 如果当前列表与用户行为直接相关，一般会根据需要放置“我的”。 “排名”相关信息突出显示，激发用户参与度。

（列表页常用布局样式）

维度切换

榜单本身具有很强的时间属性，因此在榜单呈现维度中，除了分类条件之外，时间也是重要的筛选标准。 根据这两个维度对产品策略的重要性，可以在三个位置进行设计：

(1)标题栏

标题栏可折叠、展开，支持不同维度列表内容切换； 位置比较突出，但操作程序较多；

(2) 标签

页面顶部的标签是常用的切换方式，也适用于列表。 水平滑动或点击切换标签时，交互成本较高，因此标签数量不宜设置过多。 另一方面，考虑到榜单内容的特殊性，时间维度跨度较大，可能会出现日榜、周榜、月榜、年榜，因此标签样式不适合时间维度切换，需要更多的分类维度的使用和切换；

(3) 页面入口

维度切换入口存在于页面或列表中，并且可以在设计风格中突出显示。 用户需要点击展开选择器来选择页面内容； 由于其位置的原因，在切换这个维度时，用户会更直观地理解为选择列表的部分内容。 切换时，列表的主题属性保持不变，因此页面中的切换条目在时间维度上也比较常见。

（维度切换入口）

互动行为

加强曝光功能入口、添加评论、霸屏功能在名人榜的设计中尤为重要，因为榜单中的每一条内容不仅需要用户点击查看，而且还起到引导用户观看的目的。参与互动、支持、浏览，并与后续业务线对接，形成完整的逻辑闭环，增加页面的用户交互量和页面留存量。

（泡泡；doki；阿里星球）

但需要注意的是，增加交互入口需要注意逻辑循环问题。

需要注意的逻辑问题

交互条目出现在列表中后，有两种处理方式：

(1)简单路径

交互操作可以直接在当前页面完成，无需跳转到完整登陆页面。 此时，可以通过遮罩或者弹窗来满足用户的交互操作。 这种处理方式逻辑比较简单清晰，不会跳出当前列表场景，不影响整体逻辑跳转；

(2)复杂路径

当交互操作过程较多或者需要呈现较多结果时，需要引导到对应的登陆页面进行交互操作，实现了“列表-交互页面”的跳转逻辑。

不过，我们这里插入一段逻辑，就是首页功能页。 首页功能页面主要承载核心信息和供用户消费的交互区域。 供用户消费的核心信息的存在很容易理解。 如果没有相应的内容可供消费，用户如何愿意互动？ 交互区域需要激发用户的交互欲望。 因此，从完整性和一致性的角度来看，产品必然会包含相应的单列表信息和所有列表条目，从而构建页面内容的完整生态并允许交互。 操作，点击列表条目可跳转到所有列表页面。

那么问题来了：

列表页设有交互入口，首页功能页的交互区域配置有列表入口。 两者之间没有明确的包容关系，不存在逻辑上的包容性，所以会形成如下图这样的循环路径。 用户可以无限循环地继续操作，点击返回时会不断在功能首页和列表页之间切换，对体验造成一定的损害。

（列表与首页功能页的逻辑关系）

因此，在设计列表页面时，不仅需要考虑页面本身的内容布局和交互方式，还需要扩展思维领域，考虑与其他相关页面的逻辑跳转。

不过，这种逻辑循环并不是由bug引起的，而是一个正常的过程。 因此，对于一般产品来说，电流逻辑往往不是独立处理的。 毕竟这会大大增加前端的逻辑处理负担； 这个只要类流程的返回逻辑清晰，流程顺利，一般不会有问题； 但是，如果你面对的产品是细节控制，那么你需要对这一类逻辑进行新的处理，比如默认进入首页功能启用后，你可以杀掉之前的进程，这样你再次返回时不会再走列表页的流程，简单粗暴地打破了循环逻辑。 但这种处理也比较突然，需要谨慎使用。

结论

列表页设计更多涉及到信息架构的处理，如何排列相似的信息，同时突出重点内容，增加交互入口，合理化维度切换； 同时，更高层次的处理是掌握列表页面与其他页面之间的逻辑关系，明确页面之间的跳转过程，并使用合理的方法处理循环问题。

本文转载自：woshipm.com/ucd/944296.html