列表是界面设计中最常见的信息表达形式，应用非常的广泛。为什么使用列表，究竟要解决什么问题？根据业务需求和实际用户场景，主要表现在列表的信息组织与操作引导方式不同，可分为功能列表、内容列表与交互模式等类型。

1. 列表的本质

探究列表设计我们需要认清列表的本质。

列表的样式有各种各样，承载各种信息，但是对于大多数产品来说，其实列表只是一个任务的转场衔接，用户最终目标并不是停留在列表页。

如下面第一个图淘宝的商品列表是商品图片与价格的展示，帮助用户筛选找到目标；第二个图，“我的”功能列表页面是图标和名称的展示，让用户快熟识别找到功能；最后一个文章列表页是标题和图片的展示，帮助用户找到感兴趣的内容点击进去。

不要被表面的设样式迷惑，对列表信息组合缩减，他们无非都是一系列图文信息和操作引导的组合，  信息是对列表页上信息展示的有效组织，行为是帮助用户快速找到感兴趣的信息并引导进入下一步的操作。

所以总结起来列表的本质其实是为用户提供一系列的同类信息展示，通过有效的信息组织，帮助用户快速找到感兴趣的信息并操作引导进入具体内容。

下面就来研究不同形式的列表设计体验。

2. 图标功能列表

 图标加文字的列表样式最符合列表的本质样式，图文信息＋操作引导。图标式列表大多在二级功能处使用，例如app中的个人中心页，iphone手机的设置页等。

一般来说人们对图形、颜色、方位等信息的识别速度度高于文字内容。对于一个新用户，当用户刚开始使用这个功能的时候会去读文字。但当用户已经很熟悉这个功能的时候，你会把文字及其对应的视觉元素建立关联，在很熟悉之后就不需要读文字了，只需要扫一眼，瞄到图形对应的按钮就点击了。

图形能够直观快速的表现功能时自然要比单纯文字更加易于定位接受。这种图标式列表在信息架构上也是很容易扩展的，它可以毫无压力的增加副标题也就是说明行文字，例如上图金融列表。

图标是把双刃剑，图形吸引用户注意力，所以图标使用要更慎重，因为简单的图形并不容易表达含义复杂的复合词语，这也是在更深层记得列表中很少使用图标的原因，所以图标使用不当更容易适得其反，对用户视线产生干扰影响效率。如果图标无法做到直观快速的表现功能时，那么他在这里就没有存在的价值。对于生疏的功能对于用户来说是陌生的，需要用户慢慢接受图标样式，用户存在一定学习成本。

3. 图文列表

 图文纵向列表是最常见的布局样式，我们看新闻类app，搜索商品等都是图文列表样式。

在内容获取的数量和效率上占有很大优势。

其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。当用户浏览新闻的时候，需求是什么？大部分人一方面想要知道最近发生的一些事情，这是量的需求；另一方面，想找到感兴趣的了解具体内容，这是深度阅读的需求。而量的需求往往具有先行性，深度阅读是在其后的。基于这样的需求，用户在浏览新闻时候的行为模式大概如下：快速大量浏览→选择→深度阅读→快速大量浏览，需要快速地处理大量的信息，而且高频地在极短时间内进行决策。因此，高效性就极为重要，假如在一屏中只显示一两条信息显然是不合适的。

图文列表多为呈现同质化的内容，这种高度一致性的展示形式，便于用户纵向对比进行筛选和判断，用户想要高效聚焦情境下的合理形式。例如淘宝的商品搜索页是使用图文列表，纵向对比图片、价格、是否包邮的信息的对比，帮助用户快速找到商品目标。

可拓展的设计样式

在设计样式上，列表设计可以展示较长内容的标题，更多次级的内容，层级清晰。例如个大外卖平台的列表，扩展了丰富内容。但是可扩展性也要有限度，信息太多反而不利于用户对一致性信息的对比。

当然图文列表也有一些缺点，后方列表容易被忽视，同级内容过于相似，文字描述一般多于缩略图，相比卡片式列表更容易使用户产生视觉疲劳，后方列表容易被忽视。

4. 放大缩略图——双卡图文列表

双卡的布局形式，比较常见于视觉导向为主的App，用户大多利用图片对比做决定，例如，花瓣与Pinterest、小红书和大众点评10.0的改版的feed流都使用双卡列表

双卡列表的浏览模式是上下左右跳动的”z”型视觉流，不便于用户聚焦关键信息纵向对比，很容易消磨用户的耐性，无法长时间处于沉浸状态，而且用户浏览模式是跳跃式浏览图片，这样容易让用户错过一些内容。例如淘宝付款完成后的商品推荐就使用双卡列表展示，用户此时没有明确的目的，不用信息对比，是靠图片等内容吸引用户点击，增加转化率。这就展示了纵向图文列表与双卡列表的使用情境区别，所以双卡列表样式不适合用户有明确目的浏览情景，在功能上都会有列表与宫格设计的按钮切换，给用户浏览方式的自主性，而且更方便用户读取信息。

5. 放大缩略图到通栏——大图列表

大图列表设计是airbnb改版后随之流行起来的的一种新的设计趋势，主要应用在以图片为主的产品，去除界面中的卡片与分割线，用图片和留白来区分内容。这样对图片的要求也会很高，用户上传的图片会受到限制，比如instagram，发布图片前，用户被强制对图片进行正方形截取，才能保证图片在feed流里的宽度，撑满全屏，从而看起来很整体。但是大图这种展示方式也带来了弊端，截图列表模糊不清，当用户图片质量不高时，反而会放大列表模糊的缺点。去除了多余的分割线，界面留白间距使用不恰当，就会出现像上图好奇心日报界面，分不清内容的归属，使用户阅读信息分组混乱。

 使用大图列表要确保功能内容简单，内容有规律的，Airbnb采用的大图设计，原因是它们的信息元素很统一、重复，才给人营造出比较整体的感觉。同时，合理的运用大标题也起到关键性作用。这种大图设计更适合界面元素简洁，小众且垂直的产品，如果你是像微博，淘宝，微信等体量的产品，用户群体广，内容繁杂且层级较深。那就需要使用信息呈现更有效率的卡片设计，无框设计可能就不太适合了，这就是卡片与大图列表的使用区别。

6.卡片列表 

从Google推出卡片式设计，它就被越来越多的运用到界面设计中, 这种布局常见于微博、Facebook等社交类App，Google 将其称之为"Inside Out Design (由内而外式)”，他是以内容为优先，框架向内容妥协的设计。而卡片式设计的本质, 是更好的处理信息集合 。

设计统一性 

卡片就像一个容器,把不同维度的信息放在各个卡片中，他们在内容区分的同时还能保持是一个整体，界面也不不会显得混乱。卡片有着天然的”归类”效果，不同大小、方向的卡片很自然的归结为同一种逻辑类型。例如上图买车宝典就把不同的信息归类到各个卡片中，有集合成了整个界面，并没有感觉突兀，比起传统列表项 + 分割线 + 标题的视觉效率要高很多，显得更有有秩序。

可拓展性   

卡片式其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富，而且可以让用户对其进行评论、点赞等操作、省去了跳转到详情页面的步骤。而且卡片视觉立体的特点、暗示了可以配合用户更多的手势操作，他可以它可以堆叠、覆盖、移动、划去，或者翻转，这样就极大的拓展了一个内容块的视觉深度和可操作性.

响应式设计 

卡片样式广受欢迎就是它的响应式，能够同时适用于PC端和移动端。它对于移动端有着良好的兼容性，使用这种设计我们可以将图片、文本等整合到卡片中，而这些卡片有灵活的高度和宽度，可以根据屏幕的尺寸，快速重组网站的内容元素，在大屏幕上是横直的，在小屏幕显示垂直。

由于卡片的信息很多，在小屏幕上并不能显示多个卡片，占空间大，而且卡片的分界反而浪费空间，相对于图文列表呈现内容少，如果不分业务需求滥用卡片样式，会使信息获取更低效 ，当用户需要快速浏览、接收、比较紧凑的信息时，卡片式的信息呈现就会相对列表式低效，比如对于一些新闻或数据类的网站来说，列表式的设计方式可能更加紧凑高效，更能够满足用户的基本需求。

用户甚至不会察觉你使用了什么设计样式，界面对他们来说只是搜索信息的手段罢了，卡片化趋势越来越弱，让用户更多的关注到内容才是王道，所以在网站中使用卡片式设计还是应该”对症下药”，三思而后行”。

还有一篇文章 ，对列表的一些设计细节详细分析。