antdesign卡片_“表里不一”的设计资产 | Ant Design 4.0 系列分享

前言

嘿！如果我没有猜错，你一定是被标题吸引进来的。那...既来之则安之，跟着我的文字一起来看看，我们是如何让设计资产“表里不一”的。

今天想要和大家分享的是一个 Ant Design 的设计资产「列表」。它是企业级产品页面中重要的组成部分，几乎所有的产品都会用到它。随着企业级产品复杂业务场景的增量，Ant Design 的列表覆盖度也受到了很大的挑战，很多设计师说现有的组件和交互模式无法满足他们的业务场景，导致他们需要重新设计列表，带来了额外的设计和开发成本，同时对于全域产品的体验一致性也带来了挑战。因此，我们决定一探究竟，去看看列表的底层基因到底是什么样子，我们应该如何提高通用性和覆盖度。

表格、列表、卡片列表的区别

在研究列表之前，我们首先将表格、列表、卡片列表这三个资产，从用户的交互行为、使用场景、资产结构三个维度

进行了分析，并尝试做了明确的定义和区分，避免后期在使用过程中的概念混淆。

(1)表格的定义

表格通常是以矩阵式布局呈现，强调信息的浏览性，趋向于展示多而复杂的数据。数据按照矩阵布局对齐，方便横纵浏览以及研究数据之间的关系。

(2)列表的定义

列表通常以线性结构呈现，能交互式地展示众多数据结构相同的条目，且扩展性强。通过列表，用户更容易纵向扫读来获取宏观信息，横向浏览来了解单个条目的细节信息并进行相关操作。

(3)卡片式列表的定义

卡片列表通常以网格布局呈现，用于承载数据间相互独立的信息，扩展性大且个性化强。通过卡片列表，用户会更聚焦于单个卡片