列表算是一个非常基础的设计元素，产品设计中大多数的内容都是通过列表展示的，很多人可能会觉得列表很简单，但是再简单的东西，也有很多细节需要思考，一个信息结构合理，列表设计简洁明确，能够快速的帮助用户定位到内容，很考验产品经理的功力，今天就来聊聊列表设计的思路。

列表常见的使用情境

1、概览

浏览较多的的资讯时，列表可以提供一种概观性的的方式来呈现内容。

2、搜寻

使用者可能在清单上寻找他们想要的资讯，就像百度搜寻结果。

3、分类与筛选

使用者可能正在分类资讯或者使用一些方式（特殊标签、生成时间等）筛选内容。

4、项目的整理、新增、删除与分类

使用者正在整理资讯，此时很有可能需要多选、修改、删除，转移的辅助功能。

一、移动端常见的列表设计样式

移动端纯文字标题的不常见，原因：不美观，视觉容易疲劳。

最常见的就是图文结合的展示方式。

整体从排列方向上分类，有纵向和横向两种分类方式

（1）纵向列表

首先给大家介绍的是纵向列表，它是纵向罗列多个条目，这是一个最基本的列表形式。无论是手机端还是网页端都会使用这种列表形式，我们随便打开一个手机app，都可以看到各种各样不同形式的纵向列表导航。

特点：文字信息为主，图片次要

使用场景：一般在电商、资讯相关APP。适用于文字信息为主要内容的列表，图片不是很重要的信息。

左图右字多为电商类产品，露出部分内容信息，以帮助用户快速了解，找到感兴趣的内容。

左字右图多为新闻资讯类产品，一般显示标题加图片，然后少量细节信息。帮助用户快速浏览。

优点：干净、清晰，用户容易理解，能够轻易达到自己想要的目标。

注意：

1、用户的阅读习惯是从左往右的，然后是从上往下，所以一般是左对齐

2、做好条目的详细程度以及条目数量之间的一个平衡。条目越详细，单屏上能显示的条目数量越少，这个还需要从具体的需求出发，就好像对于外卖订单来说，用户往往只需要关注自己刚刚点的那份外卖的订单，所以你对于这个订单的内容如果足够详细，用户就没必要点击进去查看具体详情了。

这样就会显得非常便捷，但如果把垂直列表放到通讯录里面，那么情况有不同了，用户必然希望在同一时间内，看到足够多的联系人，这样也能够更快的找到目标，所以我们要做好条目的详细程度以及页面所展示条目数量之间的一个平衡。

以上是垂直列表中常见的模式，我们可以根据具体的需求选择合适的方案。

特殊模式：

列表导航还有两种特殊的模式，分别是时间轴的形式以及对话框的形式。两者应用场景都是和时间顺序有关，例如聊天记录，物流信息记录 房源或客户跟进记录。当你想要表达什么时间发生了什么事情就可以考虑用这两种形式。

（2）横向列表

首页的轮播面板是横向列表形式，用户在使用轮播面板导航的时候，只需要左右去滑动面板，就会实现图片的一个切换。像这样大型展示banner的轮播面板，可以称之为大型的图片展示型，它一次就着重展示一个条目，这种形式常常位于页面的上方作为广告位，通过大图来生动的展示或者推广我们的商品。

特点：通栏图片，卡片式设计

使用场景：一般用在电商、旅游、视频等相关APP界面设计。

优点：醒目，大气、辨识度高 ，突出主题，适合营销推广，吸引用户。

既然有大图展示型，对应的也有小图展示型，就好像下图中经常会看到的样式，这种相比于之前的大图，能够在页面上罗列更多的展示项。

特点：图文位置固定，常见的列变分为两列或三列

优点：展示内容整体性强、适合分类；左右切换流畅。

但是不管大图还是小图，两者在本质上还是横向罗列，把信息藏到页面外，因此能够充分利用页面的空间，但是这样也有他的不足，用户可能并不知道这里可以左右滑动，所以这里需要一些提示来告诉用户页面之外还有内容。

就像轮播面板使用圆点的指示器，图片大小设计的时候，故意露出隐藏的图片，或者设置左右滑动箭头指示。

特殊模式：旋转木马：横向浏览图片,当前（中间）的项目较大显示。
将一组项目使用水平弧线或水平排列的呈现方式，允许使用者向左或向右检视内容，

优点：因为使用到空间z轴，

缺点：，其他资讯无法完整的展示

（3）网格列表

除了垂直列表和横向列表以外，在移动端还有一种兼顾了两种维度的一个列表形式，看起来就像围棋的棋盘一样，我们称之为网格列表。

特点：图文位置固定，宽度.长度固定

优点：能同时显示大量图片，提升界面魅力。

腾讯视频和网易云音乐，我们看到了他使用了大量的网格列表，网格列表基本上以展示图片为主，偶尔会配合一些文字说明，如果你想集中展示大量图片，网格列表无疑是一种非常适合的表现形式。

如果我们把网格列表和垂直列表放在一起对比的话，那垂直列表大多数是用于展示文字往往显得很清晰干净。网格列表更加富有情感化，善于使用网格列表，会让你的界面更加富有感染力。

特殊模式：瀑布流

这里再向大家介绍一种网格的变种，图文宽度固定，长度不同的网格。如果是田字格在排版上还有一丝严谨的话，那瀑布流的图片排列方式会显得非常随意，这种设计常见图片浏览类和短视频浏览类的软件。

二、列表页设计注意要点？

1、明确列表的目的，目的决定形式

列表页要达到的目的无非有几种：

（1）概观性，列表可以提供给用户一种概观性的方式来呈现内容。

（2）搜寻：用户可能需要在列表上寻找他们想要的信息。

（3）分类与过滤：用户可能正在分类信息或者使用一些方式（档案大小、名称）过滤内容。

（4）项目的整理、增减与分类：整理信息，此时很有可能需要多选、搬移的辅助功能。

2、明确列表页有多少项，项决定逻辑关系

列表单元中可能包括图片、主标题、副标题、标识、图标等列表项，设计师需要将这些已经筛选出来的信息进行组织。但有效地组织前，必须有效地知道某个图标、人物头像或者商品照片的大小，还有主标题的最多字数和最少字数大概为多少，这样为你提出好的信息排布形式提供论据。

3、组织主次关系

手机的视觉显示中：左边的信息比右边的信息重要，上面的比下面的重要，所以主角信息要尽量放在左边以及上面，配角放在右边或主角的下面，一些需要强调的副角则可以通过字体大小或者颜色进行强调。

总结：

在手机端，列表页是一个很常见的组件，它是由手机这个特殊媒介的特征所决定的。手机端的内容呈现和pc端不同，有一定的阅读局限性，一个页面只能表明一个信息，同时上下空间可无限延伸。

对交互组件做定义很重要，应该从现有的基本概念出发，来定义全新的交互对象。而不是将列表直接定义为一个貌似纵向排列的表单，这样就限制了交互的创新设计，典型的列表是纵向列表，。

由于分类方式不一样，名称也不样！分为：缩图分格、标签卡片、清单嵌板、通栏清单等等。篇幅有限，浅谈为主！

这次的产品分享，到此结束，欢迎加我微信zcstime，一起学习！‍