发布时间：2022-8-22 分类： 行业资讯
在回顾了之前的文章之后，我发现他们中的许多人正在讨论某个功能模块的设计方法，包括搜索，护照和支持。目前，根据后续安排，我们将继续输出一些具体的功能模块设计方法，力求更加扎根。气，更实用。那么今天，我们来谈谈下一个功能模块设计方法——列表页面。
概念描述
列表模块，第一个直觉是一个模块，它对一类具有相同维度或属性的内容进行排序和呈现;大多数联想的想法都会落在明星，电影，游戏，众神等领域，或App Store，豆瓣榜上的排名表明应用程序列表非常广泛，没有绝对的使用限制，而且它在内容类和游戏应用程序中更常见。
该列表实际上是一种游戏化设计，与建筑用户的荣誉感密切相关。无论这种荣誉感真的来自用户自己，列表的排名总会刺激目标用户更深入的参与感。
入口
巧合的是，列表页面是类似内容的聚合，因此它不会成为正常逻辑下的产品主页，一般是辅助页面或扩展页面，因此必须有相应的条目;
列表的输入基于页面的级别，有两种设计和正常处理方式。
当列表条目出现在主页上时，列表条目通常被设计为并排标记样式（图标或文本条目）或其他内容，因为还有更多其他高加权消息或功能需要暴露。样式显示;
（网易音乐; QQ音乐;魔术音乐）
当列表的条目出现在辅助页面上时，列表的条目的权重将相应地增强，并且条目的显着性也将增加，这将在卡的高度和颜色中更加突出。
（泡沫; doki;阿里星球）
清单类型
根据内容类型的内容，列表设计风格也有不同的风格，主要是看音乐，明星，游戏/粉丝列表的设计风格。
音乐列表
由于音乐需要花时间欣赏，用户无法根据页面中的元信息更直观地感受到列表中音乐的内容，因此列表的排名规则特别重要，或者标题是名单。音乐列表页面的头部将突出显示列表的标题和类型，方便用户快速识别;相应的播放，选择，缓存，共享等功能将在列表中设置。
（网易音乐; QQ音乐;魔术音乐）
明星名单
明星名单主要是为了显示明星的影响力。排名主要基于平台上粉丝的相关互动行为，包括列表，支持，互动等。对于用户来说，明星个人形象是列表中最重要的。特别是在前3名中。星表的设计将主要突出当前的第一颗星，作为头部地图显示，与当前用户流量密切相关;其次，金钱的用户信息得到增强，无论是在化身的大小，装饰设计，颜色和元信息的数量将更加突出。
（泡沫; doki;阿里星球）
游戏/粉丝列表
列表设计的游戏化在游戏排名的设计中相当令人满意，因为游戏列表中的排名内容不是诸如音乐，明星等用户可以直接用于消费的内容，主要是为了呈现游戏用户排名，因此游戏列表单一设计更倾向于显示更多排名信息，突出显示列表中的前3位，突出显示用户当前的排名位置，但由于游戏横向屏幕页面的特殊性，列表样式由于垂直排列的高度有限，所以对设计风格有一定的限制。
（耶稣生存 - 刺激战场;终结者）
粉丝列表类似于游戏排名列表，但是根据垂直屏幕样式，页面布局上将有更多特定的设计样式，并且前三个信息也可以突出显示。
（爱豆; OWHAT;泡泡;阿里星球）
设计风格
从上述分类情况可以看出，虽然列表呈现的信息内容不同，但是在列表中使用整体风格，并且为了增加游戏化效果，将突出显示前3名或名字。激发用户的荣誉感，这些方式直接与内容的下一部分相关联 - ——相互作用。
页面布局
言归正传，相对完整的一般设计风格的清单主要有：专业化负责人+前三名+专业化名单;如果当前列表与用户行为直接相关，则通常根据需求进行放置;排名”突出显示相关信息以刺激用户参与。
（列表页面总体布局样式）
尺寸切换
列表本身具有强时间属性，因此在列表表示的维度中，除了分类条件之外，时间也是重要的筛选标准。根据产品策略的两个维度的重要性，您可以在三个位置进行设计：
（1）标题栏
可以折叠和扩展标题栏以支持以不同维度切换列表的内容;位置更重要，但操作过程更多;
（2）标签
页面的顶部选项卡是一种常用的切换方法，也适用于列表;滑动或点击切换标签时，交互成本较高，因此标签数量不应设置过多;另一方面，由于列表内容的特殊性，时间维度具有较大的跨度，每日列表，每周列表，月度列表和年度列表都可能出现，因此标签样式不适合时间维度切换，更多使用和切换分类维度;
（3）进入页面
维度切换条目存在于页面或列表中，可以在设计样式中突出显示。用户需要单击展开选择器以选择页面内容;由于位置原因，当切换维度时，用户直观地理解列表的内容是部分切换，列表的主题属性不变，因此页面中的切换条目对于时间维度切换也更常见。
（尺寸开关条目）
互动行为
增强功能输入，添加注释和屏幕功能。这些在明星列表的设计中尤为重要，因为列表中的每个内容不仅要求用户点击查看，更多的目的是引导用户参与交互和支持。浏览并与后续业务线连接以形成完整的逻辑闭环，从而增加页面内的用户交互和页面保留量。
（泡沫; doki;阿里星球）
但是，应该注意，增加交互式条目需要注意逻辑循环问题。
逻辑问题需要注意
在列表中的交互式条目之后，有两种方法可以处理它：
（1）简单路径
交互操作可以直接在当前页面上完成，而无需跳转到完整的登录页面。此时，可以通过掩模层或弹出窗口形式满足用户的交互操作。这种处理方法的逻辑简单明了，不跳出当前列表场景，不影响整体逻辑跳转;
（2）复杂路径
当存在更多的交互式操作过程或需要呈现更多结果时，需要引导相应的登陆页面进行交互操作，这实现了“列表 - 交互页面”的跳转逻辑。
但是，这里插入逻辑的第一个地方是主页功能页面。 “主要功能”页面包含用户可以使用的核心信息和交互区域。用户消费的核心信息的存在是否易于理解，没有相应的内容消费，以及用户的交互意愿？交互区域需要激发用户的交互欲望，因此在完整性和一致性方面，产品将不可避免地将相应的单个列表信息和所有列表条目放置在一起构建完整的页面内容生态，并且交互式可以执行操作，并且可以单击列表条目以跳转到整个列表页面。
然后问题就来了：
列表页面上有一个交互式门户，主页功能页面的交互区域配置列表条目没有明确的包含关系，因此没有逻辑包容性，因此形成如下图所示的循环路径。用户可以继续以无限循环操作。单击返回时，它将继续在功能主页和列表页面之间切换，从而对体验造成一定的损害。
（列表与主页功能页面之间的逻辑关系）
因此，在设计列表页面时，不仅需要考虑页面本身的内容布局和交互模式，还需要扩展思维领域，并考虑与其他相关页面的逻辑跳转。
但是，这种逻辑循环不是由错误引起的，而是一个正常的过程。因此，对于一般产品，当前逻辑不是独立处理的。毕竟，这将大大增加前端的逻辑处理负荷。只要类进程返回逻辑清晰且进程顺利，通常就没有问题;但是，如果要面对的产品是细节控制，则需要执行这种逻辑的新处理，例如，默认情况下。在主页功能之后，你可以杀死前一个进程，这样当你再次返回时，你将不会经历列表页面的过程，然后简单而猛烈地打破循环逻辑，但这种处理也更多突然，需要谨慎使用。
结论
更多关于列表页面设计是信息架构的处理，如何安排同类信息，同时突出关键内容，增加互动门户，合理化维度切换;同时，高阶处理是掌握列表页面与其他页面之间的逻辑关系，明确页面之间的跳转过程，以合理的方式处理循环问题。
专栏
虾和肥，微信公众号：pangmiaodesign，每个人都是产品经理专栏作家。高级互动设计师（百度/爱奇艺），夫妻搭档，猫奴。他曾作为非营利产品，视听媒体产品，目前专注于企业级产品和娱乐社区产品体验设计。 “有成千上万只美丽的猫！”
这篇文章最初发表。未经许可，禁止复制。
该地图来自Unsplash，基于CC0协议
