米乐M6 米乐社交模块里的动态卡片怎么设计？
米乐 M6米乐米乐 M6米乐在社交类 APP 或 APP 的社交模块中，我们常常可以看到动态卡片这类信息展现方式的利用，这类组件的设计常以图文排版为主，虽然不那么复杂，但想设计得当，却仍需注意设计上的一些细节。本篇文章里，作者就对动态卡片的设计方式进行了解析，一起来看看吧。
动态卡片是用来承载一段、一篇、一条 UGC ( User Generated Content，用户生成内容 ) 的信息展示形式，主要出现在社交类 APP，或任何 APP 的社交模块中。
动态卡片的使用场景相对来说还是比较单一，社交类 APP 是其主要场景。但目前国内 APP 的生态习性导致你可能在任何 APP 中看到社交模块，一旦有社交模块，就必然也会随之出现动态卡片。
动态卡片的主流布局有两种，传统社交 APP 基本上都使用列表流，即一行只展示一个动态的流式布局；但随社交产品的越发垂直和整合，一些 APP 也开始使用瀑布流式布局来让页面一次承载更多的卡片。
列表流是我们常见的动态卡片布局形式，尽管跟传统的等高列表流也有所不同，它的高度实际上弹性相当大，但大致上依然遵循一行展示一个动态的核心思想。
这样的特性让列表流非常适合更沉浸的动态浏览，用户处于更松弛的浏览状态，这种状态非常适合文字阅读，所以我们可以从日常使用的 APP 中体会到，大多数采用列表流的动态，都以文字内容为主，或至少没有明显的图片 / 富媒体社交倾向。
瀑布流的内容相对固定，也没有太多的东西要讲，我们这里着重讨论一下列表流动态中，都会呈现哪些内容。
总体来说，列表流动态卡片需要分成三个部分来讨论：发布信息、内容信息、互动信息。
包含发布者的信息、关注按钮、发布时间、发布在哪个细分社区等与发布相关的信息。
为动态的主体内容，包含文字、图片、富媒体和标签，有些 APP 会把标签做到正文内，也有把标签单独做在底部的做法。
包括点赞收藏转发分享等互动按钮和部分评论，有些 APP 甚至会在每个动态下方都加一个评论输入框 ( 例如 QQ 空间 ) 。
有了内容，我们就能聊聊排版了。动态卡片因为信息比较多，所以在细节的排版上有不少细微的差别，这些差别或许只是形式的不同，并没有优劣之分，具体如何选取则需要根据项目需求自行决定。
即上述三类信息块的排版，因为整体只有三块，所以排版来说相对好排，通常做法从上至下依次为发布信息、内容信息、互动信息。
不同顺序的排版也曾经见过，例如内容在先、发布者信息在后的形式，但近几年是越发少见了。
除了两端对齐的基本做法，也可以让内容信息和互动信息与昵称对齐，这样做能让卡片的区分更加明显，形成内容归属于发布者的强烈印象。
偏分则起源于手机交互中拇指的交互舒适区会稍微偏左侧一点，所以也有不少 App 会把比较重要的交互按钮放在左侧，不重要的放在右侧。但在大屏手机的时代，右侧反而比左侧更容易交互，所以也出现了完全相反的设计；
产品对图片权重的不同定义往往也会影响着图片排版的设计，具体来说，常见的图片展示形式有两种：画报和网格。
对于图片权重更大的动态卡片，图片会占用更大的区域来进行展示，多图则以画报左右划动的形式出现。
网格 ( 或称之为九宫格、宫格 ) 是更加常见的图片展示形式，非常适合文本和图片没有明显权重区分，或是不希望给以用户某一方倾向的动态类型。
tumblr 的设计当年也是社交 App 品类中的标杆之一，尽管如今大体早已没落，但早期的交互遗产至今依然有不少在熠熠发光。就比如动态卡片的图片版式，Tumblr 允许用户自己定义图片的行和列，每一行有几张图都是可以自己进行调整的，所以在 Tumblr 中动态的图片排版花样非常多。
Moo 音乐本是一个音乐 App，但是加入了一些车叫元素，所以 Moo 音乐的动态卡片与音乐有比较强的关联性，我们便能看到动态卡片中出现音乐富媒体的做法。米乐M6 米乐
扫一扫关注微信公众帐号
