上次分享了首页的设计：

最新移动端首页设计思路分享

层层拆解 | 移动端首页的视觉设计思路

这次我们接着分析下一个关键页面 —— 列表页。

列表页的基本认识

列表页就是以展示列表 List 为主的页面，所以我们需要先理解列表是什么。

列表源自编程术语，是一种数据结构，即按照线性顺序排列的数据项集合（有限序列）。说人话，就是按照一定顺序展示数据的形式。

我们再用UI设计的角度来理解它，可以把它分为 “列” 和 “表” 两个部分。我们先理解表，表就是“表格”的意思，这也是计算机中存储数据最基础的形式（关系型），我们在页面中看见的多数内容都以这种形式记录。

列则是动词 “排列” 的意思，用一定的逻辑、方法、顺序将表格排列出来。这种排列是要经过设计和调整的，不会和原来的表格完全一致。

也就是说，列表设计是种对表格的转换，是种对数据的可视化呈现形式。

之所以要强调这个，就是因为想要做好列表设计就离不开对数据的理解，一个专业的列表设计不是做一个好看整齐的重复性组件，而是将数据表格清晰有效的反映出来。

数据表格对列表的影响包含下面几个要素：

• 属性字段
• 字段值
• 字段状态

属性字段的影响

属性字段就是列表内要放的具体信息点，也就是数据表格中的表头。比如一个商品列表中，要放商品图片、商品名、品牌标签、节日标签、营销标签、销售量、好评率、价格、原价……每个独立的信息就是一个字段。

而一个真实的项目列表内，往往会会包含非常多的字段，所以开始设计前要先搞清楚数量和明细，以及它们各自的含义。一方面是设计中不能有字段的缺失，另一方面是字段中包含对应的权重、分类，是设计前必须要确定的信息。

比如下面的列表内容，就包含了大量的字段信息，而这些字段既有权重的强弱，也有分类的整理，是经过设计师的专业分析和设计的结果。

属性值的影响

属性值就是每个属性具体放什么内容，有什么限制。比如商品名，肯定是放商品名称的文本，但文本一般是什么样的，最长支持多少字，这些就是属性值的基本信息。

属性值在开发环境中只能是文本（字符串），但在设计中这个值就不一定只是文本，可能还是图片、图标、符号等内容，中间会有转化过程。比如用户列表中，用户有不同的 VIP 等级，数据中记录的等级肯定是文本性质的，而展示出来却可能是专属的黄金、白银、青铜图标。

属性值的认识同样非常重要，决定了列表的设计是否准确，符合产品的规划。

字段状态的影响

最后字段的状态，就是字段展示的逻辑，简单解释起来就是字段什么情况下出现，什么时候隐藏，出现的时候显示什么内容这三个问题。

比如美团的列表中，有美团商家列表中，运输标签有美团快送、专送、全城送、商家自配等不同类型，而下方的配送时间也在样式上会有差异，这就是对字段状态的表达。

而越是复杂的列表，包含的字段状态差异就越大，往往会直接影响列表的样式，所以设计过程中就要体现尽可能能多的样式状态，也就是设计它的不同变体，确保在各种场景中它们能正确显示。

想要设计好列表，就要面对上面提到的三个问题。优秀的列表不止是一种视觉结果，而是一种能兼容相关数据展示的容器规则。

列表页的框架布局

接着我们来理解列表页的主要框架和布局形式，入门它的基本设计要点。

首先列表页不是只有列表一种组件，多数还会包含对列表数据进行搜索、筛选、排序的组件。

除此之外，部分重要的列表页还可能在顶部放运营模块，用来展示一些热门推荐内容或单纯作为广告位。

运营内容放顶部且篇幅较小是因为页面形式的限制，不能在顶部放太多内容让列表被顶到第二屏去。所以目前的设计为了更好的塞入内容，就会选择在列表中插入其它数据，比如纯运营广告，也可能是内容推荐，或者是模块入口等。

总结起来，列表的页的主要框架就是顶部搜索栏、特殊模块、筛选排序栏、列表区域的组合。

而最关键的列表区域，可以使用不同的列表来展示信息，我们可以简单分成“单列”和“多列”两个布局大类。下面我们就分别对这两个分类类型做个解析。

单列列表

单列列表就是一行只有一个数据对象的列表形式。而单列列表模式中还区分两种类型的列表，一种是引导型，一种是展示型。

引导型就是引导用户点击进入查看详情，比如商品列表、酒店列表，是为了让我们在列表中找到感兴趣的内容点击进入详情页面。

而展示型，就是直接在列表中展示主要信息，让用户直接顺着列表的顺序查看主要的内容，而不是进入到详情页查看。最有代表性的展示型列表，就是朋友圈这类动态列表了。

单列列表对单个数据对象的展示空间较大，但是单屏浏览数据量就会减少，适用于数据对象字段较多的场景。

多列列表

多列列表就是则是一行会展示多个数据对象的列表形式。通常移动端的多列列表只有两列，在少数情况下才会出现三列。而两列模式中，也包含两种布局形式，一种是等高展示，一种是瀑布流。

等高展示就是列表内数据对象的高度是保持一致的，每个数据对象的尺寸统一左右对齐，适用于字段类型、内容相对统一变化小的场景。

而瀑布流，则是数据对象高度不一致的多列布局形式，相对更灵活适用面更广，适合字段类型、内容变化较大，不同数据对象的差异极大的场景。

多列列表在单屏内展示的效率比单列高，可以提供更高的浏览效率。具体应该使用哪种得设计师自己根据场景来判断做出选择，没有绝对准确的方式。

列表页整体的框架基本就这些标准，想要完成列表页设计就要先确定布局框架，然后再进一步深入到组件设计和细节样式中去。而一个项目中可以使用多种列表布局形式，所以这也是我们在原型阶段就可以做出决策的部分。

结尾

列表页的具体样式和视觉设计要点我们就留到下篇在分享了，后面还会有不同页面类型的分享，你们想先看什么也可以在下面留言或社群里发出来。

目前我们会规划把不同页面类型的分析做成个系列，后面都会发到 UXbaike.com 知识库中，大家多转发我更新才会更快一点。

2025年都要结束了，还不快来变强，用2026迎接一个更强的自己~C端体验设计全能班开课在即，等你了~

课程介绍：2026开拔！C端体验设计解锁新篇章！

我们下篇再贱~