什么是动态卡片

SaaS观察:动态卡片的价值_结构化

目前百度百科没有对动态卡片有一个明确的定义,但是通常理解可以有如下的定义:

动态卡片是一种输出信息的展示形式,为用户展示关注或感兴趣的信息,常用于带有社交、新闻或者搜索的APP。

在C类用户的场景里,存在大量的动态卡片,比如搜索的快捷卡片,可以快速根据算法智能呈现用户搜索词的目的。比如搜索”孔子的生日”,直接呈现搜索词的目的,而非包含“孔子的生日”的网页

Bing搜索动态卡片

SaaS观察:动态卡片的价值_前端_02

Iphone动态卡片

SaaS观察:动态卡片的价值_搜索_03

苹果手机的动态卡片功能,可以把苹果自带功能或者三方应用提供的动态卡片拖拽到动态卡片页。动态卡片可以实时的呈现信息或带轻量级交互的功能。

夸克搜索动态卡片

SaaS观察:动态卡片的价值_前端_04

夸克浏览器的动态卡片,可以以不同的方式对新闻做呈现,比如数据指标型、列表型、轮播框等,动态卡片不仅集成在夸克首页,也可以呈现在苹果手机的动态卡片上。

动态卡片解决什么样的问题

SaaS观察:动态卡片的价值_结构化_05

从互联网技术发展的开始,始终解决的核心问题,就是效率。即通过信息化技术革命,大幅度提高生效效率、沟通效率。

动态卡片要解决的核心问题,就是信息的体验和效率。

相比传统的全文本方式,内容过多杂乱,用户无法快速获取想要的信息;相对短文本来说,内容单一,不够丰富,体验不好;而使用富文本形式的动态卡片,则可以在体验和效率上达到最好的平衡。即快速将信息聚合在卡片,以一种较好的用户体感给用户呈现信息。

动态卡片的要素

富文本的形式的组件很多,那我们所表述的动态卡片需要具备什么样的特征,才能跟普通的文本做区分?

  1. 形态结构化

我们所认为动态卡片要具备的要素之一,就是具有结构化。这个结构化可以是预定义的形式,比如高度和宽度,也可以是在已有的框架上,用户可以自定义展现形式。但是一定是有相对固定的结构的。在微信聊天发送的文本或者图片,就不能称之为动态卡片。

  1. 数据动态化

动态卡片和图片最大的不同点,就是动态性,当用户打开动态卡片时,根据上下文和用户的信息能动态刷新或者可交互。比如新闻卡片,每次用户打开获取的都是最新的新闻,比如苹果的动态卡片,用户可以点击进行进一步交互。

  1. 高度复用性

动态卡片是可以高度复用的,可以用于常态化复用,比如消息通知类卡片,定义好卡片形态后,业务可以直接复用。

  1. 跨平台

动态卡片设计的基础就是跨平台,如果不跨平台,每个平台各实现一套Native的,成本就高的难以落地。因此大部分卡片都是以H5或者小程序的方式实现,可以轻松实现多端一致的效果。

动态卡片在SaaS服务的应用

动态卡片出现的本质,就是提升用户的信息触达体验和效率。除了体验之外,B类用户效率则成为了动态卡片的核心关注因素。

因此SaaS系统里想提高用户效率的场景下,都可以考虑使用动态卡片的形式。从使用形态上来说有两种形式,一种是通知形式,另外一种是常驻卡片形式。

  1. 通知形式

这种也是动态卡片最多的使用场景,用于向客户发送消息通知,业务提醒、信息通知、营销活动等等。

SaaS观察:动态卡片的价值_搜索_06

  1. 常驻形式

诸如苹果手机的动态卡片页、钉钉工作台、支付宝等等,都是常驻形式的卡片,这种动态卡片类似页面的基础组件,只是通过对产品模型进行高度抽象,形成符合各类功能的动态卡片。

SaaS观察:动态卡片的价值_结构化_07

动态卡片的优势

动态卡片除了业务上的价值外,对于系统来说也有很高的价值。比如动态卡片的高度抽象能力,使得整体卡片容器有可视化编排的优势。

  1. 高复用性

同源系统可以轻易的复用卡片的能力,只要约定好协议,就能轻易的生成一个卡片。

  1. 可编排性

动态卡片本身也是一种抽象组件的形式,相对稳定的结构化、固定形态,就使得编排变得更为简单。比如苹果手机,可以任意根据用户关注的内容编排动态卡片;钉钉工作台,管理员可以添加和删除卡片。

  1. 易扩展性

这本身不是卡片的能力,但是这种组件化的思想的一个出发点就是易扩展性,即在原有卡片上,新增一种形式的卡片很简单,在已有卡片上扩展内容也比较简单。

SaaS动态卡片使用场景

SaaS服务也基本上有两种主要的场景可以使用动态卡片,一种是消息通知,一种是常驻页面。比如SaaS应用消息通知、营销广告等,都可以定义动态卡片来实现。对于OA协同入口、门户、个人工作台等常驻入口,可以通过动态卡片的方式来实现。可以使用组件化技术,实现最大的扩展性。

参考文章

developer.aliyun.com/article/878…

SaaS观察:动态卡片的价值_复用_08

关注公众号:ali老蒋 或访问网站:www.javaer.com.cn/