中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、組件介紹

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

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

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

二、使用場景

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

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

三、設計要點

1. 布局

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

1）寬松布局——列表流

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

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

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

2）緊湊布局——瀑布流

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

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

2. 內容

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

總體來說，列表流動態卡片需要分成三個部分來討論：發布信息、內容信息、互動信息。

1）發布信息

包含發布者的信息、關注按鈕、發布時間、發布在哪個細分社區等與發布相關的信息。

2）內容信息

為動態的主體內容，包含文字、圖片、富媒體和標簽，有些APP會把標簽做到正文內，也有把標簽單獨做在底部的做法。

3）互動信息

包括點贊收藏轉發分享等互動按鈕和部分評論，有些APP甚至會在每個動態下方都加一個評論輸入框 (例如QQ空間)。

3. 排版

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

1）整體排版

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

不同順序的排版也曾經見過，例如內容在先、發布者信息在后的形式，但近幾年是越發少見了。

2）內容縮進

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

3）互動按鈕

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

均分是大多數設計的選擇，視覺上更加穩定。

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

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

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

4. 圖片展示形式

產品對圖片權重的不同定義往往也會影響著圖片排版的設計，具體來說，常見的圖片展示形式有兩種：畫報和網格。

1）畫報

對于圖片權重更大的動態卡片，圖片會占用更大的區域來進行展示，多圖則以畫報左右劃動的形式出現。

2）網格

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

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

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

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

5. 不一樣的動態卡片

1）tumblr

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

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

2）Moo音樂

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

四、樣式拓展

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