社交模块里的动态卡片,怎么设计?

首页 > 科技

社交模块里的动态卡片,怎么设计?

来源:减肥餐搭配 发布时间:2023-06-10 00:20

在社交类APP或APP的社交模块中,我们常常可以看到动态卡片这类信息展现方式的利用,这类组件的设计常以图文排版为主,虽然不那么复杂,但想设计得当,却仍需注意设计上的一些细节。本篇文章里,作者就对动态卡片的设计方式进行了解析,一起来看看吧。

一、组件介绍

动态卡片是用来承载一段、一篇、一条UGC (User Generated Content,用户生成内容) 的信息展示形式,主要出现在社交类APP,或任何APP的社交模块中。

动态卡片多以图文排版为主,其排版本身并不复杂,但一旦我们说到排版不复杂,就意味着「亲密性」在排版中的重要性前所未有的高,因为越简单的排版越容易感知到亲密性的偏差。

所以简单的组件想要排好仍是有不少需要注意的点的,下面我们就一起来看看。

二、使用场景

动态卡片的使用场景相对来说仍是比较单一,社交类APP是其主要场景。但目前国内APP的生态习性导致你可能在任何APP中看到社交模块,一旦有社交模块,就必然也会随之出现动态卡片。

在社交模块中,任何用户发布的帖子(post)、推文(tweet)、朋友圈(moment)、笔记(Note)或类似的即时分享型、并可让其它用户与之进行互动的内容,我们统称为「动态」,这些地方都需要用到动态卡片。

三、设计要点

1. 布局

动态卡片的主流布局有两种,传统社交APP基本上都使用列表流,即一行只展示一个动态的流式布局;但随社交产品的越发垂直和整合,一些APP也开始使用瀑布流式布局来让页面一次承载更多的卡片。

1)宽松布局——列表流

列表流是我们常见的动态卡片布局形式,尽管跟传统的等高列表流也有所不同,它的高度实际上弹性相当大,但大致上依然遵循一行展示一个动态的核心思想。

这种布局的优点在于能够完整地 (或相对完整地) 展示动态发布的所有内容,缺点在于浏览效率比较低,你必须看完这一条才能滑动去看下一条。

这样的特性让列表流非常适合更陶醉的动态浏览,用户处于更松弛的浏览状态,这种状态非常适合文字阅读,所以我们可以从日常使用的APP中体会到,大多数采用列表流的动态,都以文字内容为主,或至少没有明显的图片/富媒体社交倾向。

上一篇:中国网红经济... 下一篇:新博88
猜你喜欢
热门阅读
同类推荐