列表是一个很基础的组件，但就算是最基础的组件，也有很多地方值得我们学习。

如果有人问你什么时候用列表？什么时候用表格？列表通常在什么样的产品、什么样的功能中使用，解决什么样的问题？你怎么回答？

之前有朋友问我，b端交互（UX）怎么学习，感觉做b端设计没有成就感（话语权）。如果只是把产品的原型重新再画一遍确实没啥意思，虽然你画的比产品好看，但b端最不看重的就是好看，但有时候最看重的也是好看，是不是很矛盾。

因为b端公司拿项目，很多时候都是靠关系或者解决方案，客户只关心你这个方案能不能帮他解决当下问题，如果可以加上有关系，那就有可能拿下。至于产品好不好用，美不美观，对方并不关心。后续也不是他用，他的任务就是解决问题。所以好看在很多领导眼中不重要。

但有时候公司需要拓展一个功能或者一个业务，短期类研发做不出来，这个时候就需要设计把这个产品设计的很漂亮、酷炫（动效、3d），让人眼前一亮。因为要拿出去宣传用，如果用户有兴趣，再单独定制开发，开发完后就可以纳入到通用产品，这样成本、风险小了很多。所以好看有时候也很重要。

至于b端怎么学习，我的建议是先看书，例如：界面设计模式、搜索模式、信息架构、导航设计等。然后把学到的知识带入到产品中，也可以利用所学分析其它产品，你会发现做的事情比之前有意思了一些。

题外话有点多了，下面来说列表：

列表的作用

1、全局浏览

用户可以快速浏览列表，并理解列表的内容。但有时候可能需要图片或精心设计的视觉元素来传达这种印象。

例：teambition 项目列表，除了标题文字，还利用了图片进行信息传达，用户可以自定义图片，这样可以加快识别项目类别。

2、逐个浏览

进入详情后，应该很容易返回列表并找到另一个项目，或直接进入下一个项目。

需求：年末你需要写总结，但这一年你做了很多工作。有些内容不太记得，你去任务列表中查看。任务比较多，你需要逐条浏览。为了高效，你希望进入详情后，可以直接点击下一条，不需要返回列表再次点击。

例：teambition 的任务列表点击进入详情后，你可以选择“返回”也可以点击“下一条”快速浏览。 图片 图片

3、搜索浏览

用户想快速找到需要的内容，这个过程中要尽量减少点击、滚动和来回切换的次数。

例：在钉钉文档列表搜索后，进入搜索结果页面，发现不对，我想换一个“关键字”搜索，这时不要返回列表，可以在左边列表上直接再次搜索。

4、排序和过滤

用户需要快速找到某一类型的数据，除了搜索还可以通过排序和过滤，来帮助用户快速找到想要的内容。

例：钉钉“文档”列表可以按照时间进行排序，“知识库”列表可以对文件类型、创建人等进行过滤。

5、重新排列、添加、删除或重新分类项目

上面4条主要介绍了用户怎么浏览，但有时候用户还需要去改变列表。所以我们还需要结合业务来思考，用户在列表上需要哪些功能。

例：钉钉“文件库”中用户可能需要对文件进行分组、移动、编辑、删除等操作。

列表信息设计需要考虑的问题

信息设计是b端产品里面非常重要的一项。在保证整体美观的同时，又不会影响到易读和易发现性，这需要设计师站在业务的角度合理的设计。

如果用户从一开始就看不到页面提供了什么信息，需要用户做什么，那么后续功能都是空谈。

下面是列表设计时需要考虑的一些问题：

长度

列表信息很长怎么设计？

例：邮箱内容列表，内容与操作项应该怎么处理，多少字进行省略，操作项是一直显示还是触发显示...

排序

列表是否需要排序，按什么排？字母、时间、类别还是其它。 用户是否可以更改列表的排列顺序？

分组

列表项是否需要分组？用户是否可以自己创建分组？

类型

列表内容是文字展示，还是视觉丰富的卡片展示。

交互

在列表中，是显示完整内容，还是只显示一部分，其余隐藏？ 列表上的内容是只能查看，还是带有操作可以点击跳转？ 用户是否可以一次选择多个列表项？

列表展示方案

在看方案前，想思考4个问题：

1、当用户从列表中选择一个项目时，我们应该在哪里显示该项目的详细信息？

2、如何展示具有大量视觉元素的项目列表？

3、如何管理一个非常长的列表？

4、如何展示按类别或层次结构组织的列表？

分割视图

指界面上两个并排的面板。第一个面板显示用户可以选择的项目；第二个面板显示所选项目的内容。 这种布局模式适用于：需要同时展示项目列表和所选项目内容的情况。用户可以在第一个面板中选择感兴趣的项目，第二个面板则展示了所选项目的详细信息、内容或预览。

Billfish 图片管理器

QQ邮箱

QQ音乐

特点：分割视图模式可以提高用户的效率和导航体验，因为用户无需频繁切换页面或打开新的窗口来查看所选项目的详细信息。

缺点：这种模式不适用于较小的空间，在较小的空间使用时需要考虑信息展示问题。

向下钻取

在单个屏幕中显示一个列表项。当用户从列表中选择一个项目时，将该项目的详细信息或内容显示在屏幕上，替换列表项。 图片 腾讯云小程序 特点：在小屏幕上，这种模式可以充分利用屏幕上的空间。通过逐步深入的形式，帮助用户更好的浏览项目和查看详情，同时也能轻松返回到列表页面。 缺点：用户需要在列表和详情页之间来回跳转才能查看不同的项目。需要很多次点击才能查看多个项目。不能像双面板选择器轻松切换，但可以通过使用“返回”和“下一个”将用户直接连接到列表中的前一个和后一个项目来缓解这个问题。

嵌入式列表

当用户选择一个项目时，在列表本身中打开该项目的详细信息。允许项目相互独立地打开和关闭。

南航机票列表（收起状态）

南航机票列表（详情展开状态）

iphone 录音功能

特点：利用列表上下文中显示项目的详细信息。用户可以同时查看多个项目的详细信息。如果用户需要频繁比较两个或多个项目，这可能是最佳选择。

缺点：打开一个项目时，会扩展该项目的空间，将后续的项目向下推移。

卡片列表

卡片是一种非常流行且灵活的组件，可以包含图片、文字和操作按钮。 图片 钉钉文档

特点：卡片在布局和尺寸上有很高的灵活性，可以适应不同屏幕尺寸。

缩略图网格

缩略图网格对大批量图片列表有很强的吸引力。图片多的时候可以利用标题进行分割。

pc 图片展示

移动图片展示

轮播

将多张图片排列成水平条形或弧形，用户可以通过拖动、滑动或点击左右箭头来切换图片的位置。 这种布局适用于展示多张图片、产品展示、新闻文章等。它可以提供更多的信息展示空间，并且用户可以自由浏览和选择感兴趣的内容。

水平滚动条是一种常见的UI设计模式，可以在网页、移动应用和其他数字界面中找到。 它提供了一种直观和交互式的方式来展示和浏览大量的视觉内容。

站酷首页banner轮播与素材推荐

谢谢观看！