江苏龙网

  1. 首页 > 资讯 > 科技 > >

“卡片式UI”和“列表式UI”在B端业务中的应用


笔者近期在设计B端运维告警平台时 ， 就告警指标如何呈现 ， 选择卡片式or列表式与团队的小伙伴们进行了激烈的讨论 ， 从交互体验、信息呈现到业务效率等多方面进行了分析 ， 尽管笔者最终向列表式作出了妥协 ， 但其中有价值的观点想与各位同学们分享 。
【“卡片式UI”和“列表式UI”在B端业务中的应用】“卡片式UI”和“列表式UI”在B端业务中的应用
本文插图

概念介绍
什么是卡片式？
即通过一张张带有明显边界的卡片 ， 在用户界面上平铺展示的UI设计 ， 同时在卡片中我们能获取到卡片的图片、文案信息、甚至是url等信息 。 卡片可以作为信息展示的内容组成 ， 也可以作为更加详细的信息入口 ， 同时也具有更加丰富的可互动性 。
卡片式UI的流行
在当下众多热门的app中 ， 卡片式UI的设计可谓是大行其道 ， 笔者简单举几个栗子：
“卡片式UI”和“列表式UI”在B端业务中的应用
本文插图

在大家所熟知的appstore、淘宝、闲鱼的首页 ， 从appstore的完美利用空间布局设计到淘宝闲鱼的信息分级和重点突出 ， 卡片式UI已经被运用的炉火纯青 ， 各位同学们可以逐一感受 。 当然 ， 笔者接下来将从B端业务的角度去阐述卡片式vs列表式的优劣 。
卡片式设计的优劣
首先放出笔者在设计运维告警平台时最初的卡片式告警配置方案：
“卡片式UI”和“列表式UI”在B端业务中的应用
本文插图

笔者将不同的告警指标分为不同的卡片 ， 每张卡片内容包含告警对象、指标、触发条件、推送渠道已经创建者等信息 ， 同时支持编辑&删除的能力 ，
卡片式的优势
（1）突出标题 ， 提高信息深度
用户可以第一时间观察到每张卡片分别属于什么告警 ， 每个告警针对的对象、策略、以及推送渠道 。
（2）排版设计美化
充分利用空间和布局的卡片式设计能够与用户之间产生更强的互动性 ， 提高可使用性 ， 甚至是能让使用者的心情更加美丽 。
（3）提高滑动深度
卡片式的设计天生就会鼓励用户将页面往下滑动 ， 这在某一类场景上尤其重要 ， 比如电商交易类 。
卡片式的劣势
（1）横向展示效率较低
尽管单个卡片得到了重点关照 ， 同时呈现的信息深度更深 ， 也给了用户点进去的欲望 ， 但就整体来看 ， 页面中的卡片数量仍旧较少 ， 在更为强调效率和信息量的B端产品上 ， 可能会稍显力不从心 。
（2）卡片中重复类信息较多
可以看到在笔者的设计中 ， 每张卡片尽管从告警名称的title上可以做到差异化 ， 但卡片中的其他信息 ， 如告警对象、推送渠道、创建者信息等都会出现大量的重复展示现象；尽管单张卡片的信息深度提高了 ， 但对用户来说却造成了阅读时间浪费 。 但在目前大量的B端产品中 ， 重复类流程&重复类信息输入和输出几乎是家常便饭 ， 如果采用卡片式 ， 也许会在一定程度上影响业务的流畅性和实施效率 。
列表式设计的优劣
回到笔者团队最终确定的列表式设计 ， 我们来看看区别是什么：
“卡片式UI”和“列表式UI”在B端业务中的应用
本文插图

相比卡片式 ， 列表式在B端的优势是什么？
（1）快速扫描
B端业务平台一般会更着重于业务流程和数据 ， 当流程逐渐复杂 ， 数据体量逐渐增大时 ， 页面上的重复类信息也会增多 ， “快速扫描”能帮助用户更高效的处理相关工作 。
（2）更强的横向展示能力
列表式的每条数据可以存在多个自定义字段作为表头 ， 在有限的横向展示空间里可以承载更多的数据 ， 进而提高单个页面的展示效率 ， 这在B端业务工作中也有较大益处 。


推荐阅读


上一篇：产品更新中，如何稳健地进行版本迭代？

下一篇：荔枝“弯道超车”，喜马拉雅该何去何从？