笔者近期在设计B端运维告警平台时，就告警指标如何泛起，选择卡片式or列表式与团队的小同伴们举办了剧烈的接头，从交互体验、信息泛起到业务效率等多方面举办了阐明，尽量笔者最终向列表式作出了妥协，但个中有代价的概念想与列位同学们分享。

观念先容

什么是卡片式？

即通过一张张带有明明界线的卡片，在用户界面上平铺展示的UI设计，同时在卡片中我们能获取到卡片的图片、文案信息、甚至是url等信息。卡片可以作为信息展示的内容构成，也可以作为越发具体的信息进口，同时也具有越发富厚的可互动性。

卡片式UI的风行

在当下浩瀚热门的app中，卡片式UI的设计可谓是大行其道，笔者简朴举几个栗子：

在各人所熟知的appstore、 *** 、闲鱼的首页，从appstore的完美操作空间机关设计到 *** 闲鱼的信息分级和重点突出，卡片式UI已经被运用的出神入化，列位同学们可以逐一感觉。虽然，笔者接下来将从B端业务的角度去叙述卡片式vs列表式的黑白。

卡片式设计的黑白

首先放出笔者在设计运维告警平台时最初的卡片式告警设置方案：

笔者将差异的告警指标分为差异的卡片，每张卡片内容包括告警工具、指标、触发条件、推送渠道已经建设者等信息，同时支持编辑&删除的本领，

卡片式的优势

（1）突出标题，提高信息深度

用户可以之一时间调查到每张卡片别离属于什么告警，每个告警针对的工具、计策、以及推送渠道。

（2）排版设计美化

充实操作空间和机关的卡片式设计可以或许与用户之间发生更强的互动性，提高可利用性，甚至是能让利用者的脸色越发瑰丽。

（3）提高滑动深度

卡片式的设计天生就会勉励用户将页面往下滑动，这在某一类场景上尤其重要，好比电商生意业务类。

卡片式的劣势

（1）横向展示效率较低

尽量单个卡片获得了重点看护，同时泛起的信息深度更深，也给了用户点进去的欲望，但就整体来看，页面中的卡片数量仍旧较少，在更为强调效率和信息量的B端产物上，大概会稍显力有未逮。

（2）卡片中反复类信息较多

可以看到在笔者的设计中，每张卡片尽量从告警名称的title上可以做到差别化，但卡片中的其他信息，如告警工具、推送渠道、建设者信息等城市呈现大量的反复展示现象；尽量单张卡片的信息深度提高了，但对用户来说却造成了阅读时间挥霍。但在今朝大量的B端产物中，反复类流程&反复类信息输入和输出险些是屡见不鲜，假如回收卡片式，也许会在必然水平上影响业务的流通性和实施效率。

列表式设计的黑白

回到笔者团队最终确定的列表式设计，我们来看看区别是什么：

对比卡片式，列表式在B端的优势是什么？

（1）快速扫描

B端业务平台一般会更着重于业务流程和数据，当流程逐渐巨大，数据体量逐渐增大时，页面上的反复类信息也会增多，“快速扫描”能辅佐用户更高效的处理惩罚相关事情。

（2）更强的横向展示本领

列表式的每条数据可以存在多个自界说字段作为表头，在有限的横向展示空间里可以承载更多的数据，进而提高单个页面的展示效率，这在B端业务事情中也有较大益处。

（3）富厚的筛查本领

列表可以支持用户按照表头字段自界说筛选和查询，自由度上更高，在满意用户多种筛选查询的需求的同时提高了业务处理惩罚效率。

（4）批量处理惩罚本领

列表可以支持用户批量处理惩罚列表中的各项数据，对业务效率也有较大晋升。

列表的劣势又是什么？

（1）信息深度不敷

针对列表内的单条数据，尽量有多个表头字段可以泛起数据，但对比于单个卡片，单条列表数据的信息泛起深度仍有所不敷。

（2）易引起视觉疲惫

列表作为传统的设计，在各类内部平台城市大面积的存在，但其实对业务人员的体验来说并不算太友好，持久下来大概会引起用户消极的情绪，甚至是“催眠”。

最后的选择