在近期的B侧运维告警平台设计中，笔者与团队小伙伴就如何呈现告警指标进行了热烈的讨论，并对交互体验、信息呈现、业务效率等进行了分析。虽然作者最终对列表做了妥协，但有价值的观点还是想和同学们分享一下。

概念介绍

什么是卡型？

即UI设计通过边界明显的卡片平铺在用户界面上。与此同时，我们可以获取卡片中卡片的图片、复制信息甚至网址信息。卡片可以作为信息展示的内容，也可以作为更详细信息的入口，还具有更丰富的交互性。

卡片式UI的流行

在当下众多热门的app中，卡片式UI的设计可谓是大行其道，笔者简单举几个栗子：在众多流行的应用中，卡片式UI的设计可谓风靡一时。作者简单举了几个栗子:

在appstore、淘宝、Idle Fish的知名主页上，从App Store WAP 空版面设计的完美运用到淘宝Idle Fish的信息分类和重点，卡UI已经用到了极致，同学们可以一一感受。当然，作者会从B方业务的角度来说明卡vs单的优缺点。

卡片设计的优缺点

首先，发布了作者设计运维报警平台时的原有卡报警配置方案:

作者将不同的报警指标分为不同的卡片，每张卡片包含报警对象、指标、触发条件、推送渠道创建者等信息，支持编辑&删除能力、

卡片式的优点

(1)突出标题，提高信息深度

用户可以在第一时间观察到每个卡属于什么告警，每个告警的对象、策略、推送通道。

(2)美化排版设计

充分利用空空间和布局的卡片设计，可以产生更强的与用户的互动，提高易用性，甚至让用户感觉更美观。

(3)增加滑动深度

卡片设计自然鼓励用户滑下页面，这在某些场景下尤其重要，比如电子商务交易。

卡片类型的缺点

(1)水平显示效率低

虽然单张卡得到了优先关注，呈现的信息更深，也给了用户点进去的欲望，但总体来说，页面上的卡数还是比较少的，可能在强调效率和信息的B端产品上稍显不足。

(2)卡中重复信息较多

可以看出，在作者的设计中，虽然每张卡片都可以从报警名称的标题中区分出来，但卡片中的其他信息，如报警对象、推送通道、创建者信息等。，会出现很多重复显示现象；虽然提高了单卡的信息深度，但是对用户造成了阅读时间的浪费。但在目前大量的B端产品中，重复类流程&重复信息的输入输出几乎是家常便饭。如果使用卡类信息，可能会在一定程度上影响业务的流畅性和执行效率。

列表设计的优缺点

回到最终由作者团队决定的列表设计，我们来看看区别:

相对于卡片式，B端列表式有什么优势？

(1)快速扫描

b端业务平台一般更注重业务流程和数据。当流程逐渐复杂，数据量逐渐增加时，页面上重复的信息也会增加。“快速扫描”可以帮助用户更高效地处理相关工作。

(2)较强的横向展示能力

列表类型中每条数据可以有多个自定义字段作为表头，可以在有限的水平显示空中携带更多的数据，从而提高单个页面的显示效率，这在B端业务工作中也有很大的好处。

(3)丰富的筛选能力

列表可以支持用户根据表头字段定制过滤查询，自由度更高，既满足了用户对各种过滤查询的需求，又提高了业务处理效率。

(4)批量处理能力

列表可以支持用户批量处理列表中的数据，大大提高了业务效率。

列表有哪些缺点？

(1)信息深度不足

对于列表中的单个数据，虽然有多个表头字段可以呈现数据，但与单个卡片相比，单个列表数据的信息呈现深度仍然不足。

(2)容易引起视疲劳

列表作为一种传统的设计，在各种内部平台上大面积存在，但实际上对业务人员的体验并不是很友好，可能会造成用户长期的负面情绪甚至“催眠”。

最后的选择

基于作者分享的卡型和列表型的优缺点，在权衡了各种业务需求和用户体验后，作者最终回到了B端业务逻辑和效率的核心价值点。因此，我们以牺牲一些页面设计和用户体验为代价，追求处理能力和效率的提高。

有哪些B端业务场景可以尝试卡片式设计？

这种业务场景需要满足几个特征:

不依赖快速扫描；不依赖字段的筛选查询；不涉及大量数据的处理；

结合以上特点，笔者给出如下简单的栗子:

上图是一个B端营销平台，可以为不同的无人设备配置定制的营销方案。在这样的业务场景中使用卡片设计后，用户可以清楚地看到每张卡片所代表的营销计划和一些关键细节。同时，在营销计划数量相对不变的情况下，空之间的使用和交互体验增加，用户的“可玩性”也有所提高。

摘要

两种设计都有各自明显的优势。卡片设计的优势，比如空的利用，突出的标题，信息的深度，我们提到的交互，但是到了B端平台，更侧重于业务流程和数据处理，列表设计就变成了“王道”。

但是，当不需要接收和处理大量数据时，学生可以大胆尝试卡片设计。