金荷包APP:APP界面的卡片式设计怎么样?

金荷包APP:APP界面的卡片式设计怎么样?

金荷包APP:APP界面的卡片式设计怎么样?

金荷包APP:APP界面的卡片式设计怎么样?

什么是卡片式?即通过一张张带有明显边界的卡片,在用户界面上平铺展示的UI设计,同时在卡片中我们能获取到卡片的图片、文案信息、甚至是url等信息。卡片可以作为信息展示的内容组成,也可以作为更加详细的信息入口,同时也具有更加丰富的可互动性。

卡片式UI的流行

在当下众多热门的app中,卡片式UI的设计可谓是大行其道,笔者简单举几个栗子:

在大家所熟知的appstore、淘宝、闲鱼的首页,从appstore的完美利用空间布局设计到淘宝闲鱼的信息分级和重点突出,卡片式UI已经被运用的炉火纯青,各位同学们可以逐一感受。当然,笔者接下来将从B端业务的角度去阐述卡片式vs列表式的优劣。

卡片式设计的优劣

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

笔者将不同的告警指标分为不同的卡片,每张卡片内容包含告警对象、指标、触发条件、推送渠道已经创建者等信息,同时支持编辑&删除的能力,

卡片式的优势

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

用户可以第一时间观察到每张卡片分别属于什么告警,每个告警针对的对象、策略、以及推送渠道。

(2)排版设计美化

充分利用空间和布局的卡片式设计能够与用户之间产生更强的互动性,提高可使用性,甚至是能让使用者的心情更加美丽。

(3)提高滑动深度

卡片式的设计天生就会鼓励用户将页面往下滑动,这在某一类场景上尤其重要,比如电商交易类。

卡片式的劣势

(1)横向展示效率较低

尽管单个卡片得到了重点关照,同时呈现的信息深度更深,也给了用户点进去的欲望,但就整体来看,页面中的卡片数量仍旧较少,在更为强调效率和信息量的B端产品上,可能会稍显力不从心。

(2)卡片中重复类信息较多

可以看到在笔者的设计中,每张卡片尽管从告警名称的title上可以做到差异化,但卡片中的其他信息,如告警对象、推送渠道、创建者信息等都会出现大量的重复展示现象;尽管单张卡片的信息深度提高了,但对用户来说却造成了阅读时间浪费。但在目前大量的B端产品中,重复类流程&重复类信息输入和输出几乎是家常便饭,如果采用卡片式,也许会在一定程度上影响业务的流畅性和实施效率。

金荷包APP:APP界面的卡片式设计怎么样?

>金荷包APP:APP界面的卡片式设计怎么样?

相关文章