移动端列表页设计的难点3个要素与2种布局

一、列表页的拆解基本认识

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

列表源自编程术语，端列是表页布局一种数据结构 ，即按照线性顺序排列的设计素种数据项集合（有限序列）。说人话，难点就是拆解按照一定顺序展示数据的形式。

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

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

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

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

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

1. 属性字段
2. 字段值
3. 字段状态

1. 属性字段的影响

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

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

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

2. 属性值的影响

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

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

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

3. 字段状态的影响

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

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

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

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

二 、列表页的框架布局

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

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

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

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

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

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

1. 单列列表

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

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

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

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

2. 多列列表

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

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

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

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

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

结尾

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

作者 ：超人的电话亭