UI必看｜组件应用 - 动态卡片设计方式详解
动态卡片多以图文排版为主，其排版本身并不复杂，但一旦我们说到排版不复杂，就意味着「亲密性」在排版中的重要性前所未有的高，因为越简单的排版越容易感知到亲密性的偏差。
所以简单的组件想要排好还是有不少需要注意的点的，下面我们就一起来看看。
在社交模块中，任何用户发布的帖子(post)、推文(tweet)、朋友圈(moment)、笔记(Note)或类似的即时分享型、并可让其它用户与之进行互动的内容，我们统称为「动态」，这些地方都需要用到动态卡片。
1. 布局
动态卡片的主流布局有两种，传统社交APP基本上都使用列表流，即一行只展示一个动态的流式布局；但随社交产品的越发垂直和整合，一些APP也开始使用瀑布流式布局来让页面一次承载更多的卡片。
列表流是我们常见的动态卡片布局形式，尽管跟传统的等高列表流也有所不同，它的高度实际上弹性相当大，但大致上依然遵循一行展示一个动态的核心思想。
这种布局的优点在于能够完整地 (或相对完整地) 展示动态发布的所有内容，缺点在于浏览效率比较低，你必须看完这一条才能滑动去看下一条。
这样的特性让列表流非常适合更沉浸的动态浏览，用户处于更松弛的浏览状态，这种状态非常适合文字阅读，所以我们可以从日常使用的APP中体会到，大多数采用列表流的动态，都以文字内容为主，或至少没有明显的图片/富媒体社交倾向。
一些新出现的图文和富媒体分享平台会采用瀑布流式布局。
瀑布流的优点即一眼能浏览到更多独立的条目，但缺点也是单个条目的信息被大大压缩，在这种情况下图片的占比变得非常大，所以主要以富媒体或图片为核心的社交平台多使用瀑布流式布局。同时也比较适合目的性强的动态浏览状态 (比如搜索)。
2.内容
瀑布流的内容相对固定，也没有太多的东西要讲，我们这里着重讨论一下列表流动态中，都会呈现哪些内容。
总体来说，列表流动态卡片需要分成三个部分来讨论：发布信息、内容信息、互动信息。
包含发布者的信息、关注按钮、发布时间、发布在哪个细分社区等与发布相关的信息。
为动态的主体内容，包含文字、图片、富媒体和标签，有些APP会把标签做到正文内，也有把标签单独做在底部的做法。
包括点赞收藏转发分享等互动按钮和部分评论，有些APP甚至会在每个动态下方都加一个评论输入框 (例如QQ空间)。
3.排版
有了内容，我们就能聊聊排版了。动态卡片因为信息比较多，所以在细节的排版上有不少细微的差别，这些差别或许只是形式的不同，并没有优劣之分，具体如何选取则需要根据项目需求自行决定。
即上述三类信息块的排版，因为整体只有三块，所以排版来说相对好排，通常做法从上至下依次为发布信息、内容信息、互动信息。
不同顺序的排版也曾经见过，例如内容在先、发布者信息在后的形式，但近几年是越发少见了。
除了两端对齐的基本做法，也可以让内容信息和互动信息与昵称对齐，这样做能让卡片的区分更加明显，形成内容归属于发布者的强烈印象。
位置上，存在均分、偏分、单侧三种情况。
均分是大多数设计的选择，视觉上更加稳定。
你如果要问4个按钮的情况该如何各自对齐，我建议是4个按钮按照下方的均居中对齐处理。
偏分则起源于手机交互中拇指的交互舒适区会稍微偏左侧一点，所以也有不少App会把比较重要的交互按钮放在左侧，不重要的放在右侧。但在大屏手机的时代，右侧反而比左侧更容易交互，所以也出现了完全相反的设计；
单侧排版则是由于为了稍微压缩高度，把其中一部分内容(例如标签)和交互按钮放在同一行了，所以按钮只能居右。
4.图片展示形式
产品对图片权重的不同定义往往也会影响着图片排版的设计，具体来说，常见的图片展示形式有两种：画报和网格。
对于图片权重更大的动态卡片，图片会占用更大的区域来进行展示，多图则以画报左右划动的形式出现。
网格 (或称之为九宫格、宫格) 是更加常见的图片展示形式，非常适合文本和图片没有明显权重区分，或是不希望给以用户某一方倾向的动态类型。
但我们要注意到，对于某些特定数量的图片，设计师需要针对性的给出适合该数量的布局。例如：单独一张图片的时候，其比例可以随图片的原生比例进行适配，这也可以很大程度上解决视频的适配问题；但两图以上则会将图片比例限制在正方形内。
再例如：4张图片的时候，为了防止第二行只有一张图片的尴尬情况出现，会特意将四图安排在九宫格的左上四个格子内。
甚至在某些极端需求下，设计师可能需要单独制定1-9张图各自的展示规则。
5.不一样的动态卡片
tumblr的设计当年也是社交App品类中的标杆之一，尽管如今大体早已没落，但早期的交互遗产至今依然有不少在熠熠发光。就比如动态卡片的图片版式，Tumblr允许用户自己定义图片的行和列，每一行有几张图都是可以自己进行调整的，所以在Tumblr中动态的图片排版花样非常多。
在编辑器中，只需拖动图片到某个位置就能自动完成排版。
Moo音乐本是一个音乐App，但是加入了一些车叫元素，所以Moo音乐的动态卡片与音乐有比较强的关联性，我们便能看到动态卡片中出现音乐富媒体的做法。
这里收集了一些动态卡片的线上案例，也可以作为设计时的参考：