在日常工作中，我们也会将列表页称为List页，就是把若干内容以某维度集合起来的聚合页。本文主要给大家整理一下关于列表页的设计归纳，以及应该注意的一些细节问题。

列表页的设计，一直被大家所忽略。感觉没什么可做，亦或没什么发力点，设计侧内部给到的排期时间也不充裕，提需求的也不看重。自然，设计师输出的过程中就少了一些思考和仔细。最后进入开发或上线后，可能就会暴露问题。

今天给大家整理一下关于列表页的设计归纳，以及应该注意的一些细节问题。

概念

什么是列表页？日常工作中，我们也会叫List页，就是把若干内容以某维度集合起来的聚合页。

类型

主要常见的列表页大类我们可以划分为以下三种：

当然内容&功能list不仅仅只有微信这样的形式，这里只是示例，比如：携程的APP首页也是相同类型的列表页。筛选结果list，我们暂且定义为：从某些入口进入的，不需要用户输入任何内容的列表页。

搜索结果list和筛选结果list，除了结果内容的多少之外，貌似看上去都一样。我们聚焦在页面顶部，就会发现有两个地方不同：一个是搜索框内是否有关键词；一个是“更多筛选”的选项是否高亮。

对于搜索结果list搜索框展示关键词，大家应该都毋庸置疑。但筛选结果list，用户没有输入，是从某个入口进来的，顺推这里增设搜索框的话，搜索框内应该是没有任何内容的。如果考虑到告知用户当前是根据什么样条件展示的内容，应在页面标题栏告知。

但实际上，一些平台筛选结果list的搜索框依然有关键词。比如：天猫，从分类中女鞋-板鞋进入，如图：

我们大胆猜测两种可能：

• 一是为了节约资源，直接复用了搜索结果list；
• 另一个，为了节省屏幕空间，呈现更多内容，去掉了顶部的标题栏，间接告知用户当前页面的主题内容是什么。

但不管原因怎样，我个人觉得，这样做不是特别严谨，原因如下：

• 其一：前面提到搜索框是用户输入关键词的地方。虽然平台将若干关键词组合成某个入口，但实际用户并没有输入关键词，不应该以这样的形式呈现。
• 其二：试想，用户来到筛选结果list，想在当前的品类或内容下，再细分，在搜索框输入了关键词，如：红色，但实际天猫的搜索池是全站，出现的是红色的裙子，并非锁定在当前的品类，造成结果懵逼。

因此个人建议：筛选结果页，若考虑提供搜索框，应该是锁定在当前品类下或者某些条件的，如前面图所示的京东房产筛选结果列表，亦或告知用户此搜索的搜索范畴。

下图是当时做TOPLIFE的筛选列表页的时候，考虑到以上问题，没有提供搜索框，同时还有另一个原因，一期上线的时候，SKU数量相对较少。

再简单说下“更多筛选”高亮的问题，因为在入口处，已经锁定了一些“筛选”内的一些选项，搜索结果页和筛选结果页的底层逻辑是一样的，故这里选择了高亮状态，来告知用户，“筛选”中有被选中的选项。

搜索结果list和筛选结果list是很像，但他们的确不一样。

作用

如下图，列表页背后的终极目标就是提高效率，解决问题。

我们举例电商平台的列表页，来到列表页，就是想快速找到我想要购买的商品，完成凑单、查找商品等任务。其中对比，包含不同纬度的排名对比，以及内容之间的对比。而筛选是让结果能够更精准，减少对比内容的数量。

大多数的列表页都是某个流程上的重要中间环节，并不是用户的最终目的。故此，我们在设计中，应该将效率作为整个列表页的KPI来进行考核。

主要结构

围绕作用，我们再来看看列表页都应该提供哪些内容。

主要分为两个大模块，如图：

内容是主体，功能是提高效率的工具，两者也有着相互关系。主体有内容时，工具才能发挥作用，工具也会影响内容的呈现。

内容模块，根据平台或者业务属性不同，需要展示的信息也不同。但所有的列表页都要明确告知用户，当前页面是根据什么条件展示的内容。

以上三种类型的列表页功能可以大致归为如图以下内容：

以上归纳了几种常见功能，不同场景下的列表页，选用的功能也是根据自身实际情况来决定，当然也要根据用户的实际需求来设定，如电商平台列表页的功能和社交平台的列表承载的一定是不一样的。

但是要遵循一点：平衡效率和内容呈现量。如果一股脑子全露出，必定会影响用户的实际效率，优先级一定要理清楚。

我们可以参考天猫，搜索结果list，当用户向下浏览的时候，顶部所有内容，会向上隐藏，屏幕留出最大区域来展示主体。

设计细节

1. 尽量减少用户输入

搜索容易出错，筛选路径拉长，两者如果体验不佳，都会造成用户流失。关于列表页内的搜索，减少输入一般策略有，用户点击搜索框，就会出现热搜、历史搜索。用户输入内容时，就会出现联想搜索等等，甚至有些自动帮你填好热门的关键词，只要点击确认就可以。

这里提供一个建议，如果用户输入的关键词涉及到多个品类时，结果列表页中是否可以能够外露出品不同品类名称，让用户去点击。实际就是将重要的筛选项外露出来，减少用户再次输入或减短筛选的路径。

如用户搜索”咖啡“，则会在结果页上呈现出：速溶咖啡、咖啡粉、咖啡豆、咖啡利口酒等。同时也存在不同品类，涉及到内容也不尽相同，是否能够在资源充足的情况下，能够针对性的提供对应方案。

2. 合理解决异常流

出错是永远避免不了的，用户出错的”智慧”也是无穷的，我们只能尽量减少。针对出错，我们应该怎样让用户找到“正确”结果 。

搜索是最容易出现出错的， 下图为京东房产搜索异常的处理，列表页并非全以空状态展示，而是即便你出错，我也能给你内容。

3. 尊重需求

用户的需求是多样化的，如：我需要这个功能，但是我不常用，不过你要在我能轻易找到的地方出现。其实对于筛选列表页的搜索框有着类似的需求。实际案例中，微信首页顶部的搜索栏就是这样设计的，打开APP时，默认搜索栏被移到标题栏的后面隐藏起来，下拉才会出现。

其次，对于列表页的筛选及排序，也是应该根据平台特性及用户需求定义的。如咸鱼的综合排序内有“离我最近”的排序项，这是需要我们设计时注意的。

4. 合理布局及结构

1）突出主体

无论什么类型的列表页，内容才是重头戏，功能只是辅助，更多的篇幅应该是留给主体。

2）结合平台实际情况，选择合理的布局

移动端布局，大部分都是上下结构，一些扩展功能会选择抽屉形式。 我们再看PC，PC的列表页样式就多种多样了。搜索结果list和筛选结果list主要有两种，一种左右结构，一种上下结构。

如下图所示：

3）分组分类

列表页往往都是内容丰富的，合理的模块化，会让页面内容更清晰。如微信中的“发现”，iPhone的系统设置，对信息都是进行了归类。

5. 主体内容呈现形式尽量多样化

列表页内的主体内容，建议多样化。电商平台一般都提供两种模式：一种偏列表形式，一种偏宫格形式，意在让用户选择，自己更倾向看哪种信息。

6. 注意PC筛选器与面包屑的相辅相成

如今很多网站已经看不到了面包屑，大部分电商平台仍在保留，意在能够让用户明确当前页面所处的位置，以及快速的返回到之前的页面。这里不仅仅呈现的是用户选择的内容，也代表着层级关系，设计过程中不可忽略。

由于逻辑复杂，内容较多，下期可以再细聊。

结语

以上是对日常工作对列表页的设计进行的归纳总结，关于列表页，个人认为实际还是有很多可以探索，仍有不足，感谢各位前辈能够补充讨论。

作者：天琦，公众号：未知素设计

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

题图来自 Pexels，基于 CC0 协议