在社交類APP或APP的社交模塊中，我們常?？梢钥吹絼討B(tài)卡片這類信息展現(xiàn)方式的利用，這類組件的設(shè)計常以圖文排版為主，雖然不那么復(fù)雜，但想設(shè)計得當(dāng)，卻仍需注意設(shè)計上的一些細節(jié)。本篇文章里，作者就對動態(tài)卡片的設(shè)計方式進行了解析，一起來看看吧。

一、組件介紹

動態(tài)卡片是用來承載一段、一篇、一條UGC (User Generated Content，用戶生成內(nèi)容) 的信息展示形式，主要出現(xiàn)在社交類APP，或任何APP的社交模塊中。

動態(tài)卡片多以圖文排版為主，其排版本身并不復(fù)雜，但一旦我們說到排版不復(fù)雜，就意味著「親密性」在排版中的重要性前所未有的高，因為越簡單的排版越容易感知到親密性的偏差。

所以簡單的組件想要排好還是有不少需要注意的點的，下面我們就一起來看看。

二、使用場景

動態(tài)卡片的使用場景相對來說還是比較單一，社交類APP是其主要場景。但目前國內(nèi)APP的生態(tài)習(xí)性導(dǎo)致你可能在任何APP中看到社交模塊，一旦有社交模塊，就必然也會隨之出現(xiàn)動態(tài)卡片。

在社交模塊中，任何用戶發(fā)布的帖子（post）、推文（tweet）、朋友圈（moment）、筆記（Note）或類似的即時分享型、并可讓其它用戶與之進行互動的內(nèi)容，我們統(tǒng)稱為「動態(tài)」，這些地方都需要用到動態(tài)卡片。

三、設(shè)計要點

1. 布局

動態(tài)卡片的主流布局有兩種，傳統(tǒng)社交APP基本上都使用列表流，即一行只展示一個動態(tài)的流式布局；但隨社交產(chǎn)品的越發(fā)垂直和整合，一些APP也開始使用瀑布流式布局來讓頁面一次承載更多的卡片。

1）寬松布局——列表流

列表流是我們常見的動態(tài)卡片布局形式，盡管跟傳統(tǒng)的等高列表流也有所不同，它的高度實際上彈性相當(dāng)大，但大致上依然遵循一行展示一個動態(tài)的核心思想。

這種布局的優(yōu)點在于能夠完整地 (或相對完整地) 展示動態(tài)發(fā)布的所有內(nèi)容，缺點在于瀏覽效率比較低，你必須看完這一條才能滑動去看下一條。

這樣的特性讓列表流非常適合更沉浸的動態(tài)瀏覽，用戶處于更松弛的瀏覽狀態(tài)，這種狀態(tài)非常適合文字閱讀，所以我們可以從日常使用的APP中體會到，大多數(shù)采用列表流的動態(tài)，都以文字內(nèi)容為主，或至少沒有明顯的圖片/富媒體社交傾向。

2）緊湊布局——瀑布流

一些新出現(xiàn)的圖文和富媒體分享平臺會采用瀑布流式布局。

瀑布流的優(yōu)點即一眼能瀏覽到更多獨立的條目，但缺點也是單個條目的信息被大大壓縮，在這種情況下圖片的占比變得非常大，所以主要以富媒體或圖片為核心的社交平臺多使用瀑布流式布局。同時也比較適合目的性強的動態(tài)瀏覽狀態(tài) (比如搜索)。

2. 內(nèi)容

瀑布流的內(nèi)容相對固定，也沒有太多的東西要講，我們這里著重討論一下列表流動態(tài)中，都會呈現(xiàn)哪些內(nèi)容。

總體來說，列表流動態(tài)卡片需要分成三個部分來討論：發(fā)布信息、內(nèi)容信息、互動信息。

1）發(fā)布信息

包含發(fā)布者的信息、關(guān)注按鈕、發(fā)布時間、發(fā)布在哪個細分社區(qū)等與發(fā)布相關(guān)的信息。

2）內(nèi)容信息

為動態(tài)的主體內(nèi)容，包含文字、圖片、富媒體和標(biāo)簽，有些APP會把標(biāo)簽做到正文內(nèi)，也有把標(biāo)簽單獨做在底部的做法。

3）互動信息

包括點贊收藏轉(zhuǎn)發(fā)分享等互動按鈕和部分評論，有些APP甚至?xí)诿總€動態(tài)下方都加一個評論輸入框 (例如QQ空間)。

3. 排版

有了內(nèi)容，我們就能聊聊排版了。動態(tài)卡片因為信息比較多，所以在細節(jié)的排版上有不少細微的差別，這些差別或許只是形式的不同，并沒有優(yōu)劣之分，具體如何選取則需要根據(jù)項目需求自行決定。

1）整體排版

即上述三類信息塊的排版，因為整體只有三塊，所以排版來說相對好排，通常做法從上至下依次為發(fā)布信息、內(nèi)容信息、互動信息。

不同順序的排版也曾經(jīng)見過，例如內(nèi)容在先、發(fā)布者信息在后的形式，但近幾年是越發(fā)少見了。

2）內(nèi)容縮進

除了兩端對齊的基本做法，也可以讓內(nèi)容信息和互動信息與昵稱對齊，這樣做能讓卡片的區(qū)分更加明顯，形成內(nèi)容歸屬于發(fā)布者的強烈印象。

3）互動按鈕

位置上，存在均分、偏分、單側(cè)三種情況。

均分是大多數(shù)設(shè)計的選擇，視覺上更加穩(wěn)定。

你如果要問4個按鈕的情況該如何各自對齊，我建議是4個按鈕按照下方的均居中對齊處理。

偏分則起源于手機交互中拇指的交互舒適區(qū)會稍微偏左側(cè)一點，所以也有不少App會把比較重要的交互按鈕放在左側(cè)，不重要的放在右側(cè)。但在大屏手機的時代，右側(cè)反而比左側(cè)更容易交互，所以也出現(xiàn)了完全相反的設(shè)計；

單側(cè)排版則是由于為了稍微壓縮高度，把其中一部分內(nèi)容(例如標(biāo)簽)和交互按鈕放在同一行了，所以按鈕只能居右。

4. 圖片展示形式

產(chǎn)品對圖片權(quán)重的不同定義往往也會影響著圖片排版的設(shè)計，具體來說，常見的圖片展示形式有兩種：畫報和網(wǎng)格。

1）畫報

對于圖片權(quán)重更大的動態(tài)卡片，圖片會占用更大的區(qū)域來進行展示，多圖則以畫報左右劃動的形式出現(xiàn)。

2）網(wǎng)格

網(wǎng)格 (或稱之為九宮格、宮格) 是更加常見的圖片展示形式，非常適合文本和圖片沒有明顯權(quán)重區(qū)分，或是不希望給以用戶某一方傾向的動態(tài)類型。

但我們要注意到，對于某些特定數(shù)量的圖片，設(shè)計師需要針對性的給出適合該數(shù)量的布局。例如：單獨一張圖片的時候，其比例可以隨圖片的原生比例進行適配，這也可以很大程度上解決視頻的適配問題；但兩圖以上則會將圖片比例限制在正方形內(nèi)。

再例如：4張圖片的時候，為了防止第二行只有一張圖片的尷尬情況出現(xiàn)，會特意將四圖安排在九宮格的左上四個格子內(nèi)。

甚至在某些極端需求下，設(shè)計師可能需要單獨制定1-9張圖各自的展示規(guī)則。

5. 不一樣的動態(tài)卡片

1）tumblr

tumblr的設(shè)計當(dāng)年也是社交App品類中的標(biāo)桿之一，盡管如今大體早已沒落，但早期的交互遺產(chǎn)至今依然有不少在熠熠發(fā)光。就比如動態(tài)卡片的圖片版式，Tumblr允許用戶自己定義圖片的行和列，每一行有幾張圖都是可以自己進行調(diào)整的，所以在Tumblr中動態(tài)的圖片排版花樣非常多。

在編輯器中，只需拖動圖片到某個位置就能自動完成排版。

2）Moo音樂

Moo音樂本是一個音樂App，但是加入了一些車叫元素，所以Moo音樂的動態(tài)卡片與音樂有比較強的關(guān)聯(lián)性，我們便能看到動態(tài)卡片中出現(xiàn)音樂富媒體的做法。

四、樣式拓展

這里收集了一些動態(tài)卡片的線上案例，也可以作為設(shè)計時的參考：