動態卡片是一種輸出信息的展示形式，為用戶展示關注或感興趣的信息，常用于帶有社交功能的APP。經過整理動態卡片，主要從以下四個點做出總結:類型、圖片數量、對齊方式、文字。

一. 類型

      動態卡片，根據功能和需求會有不同的展示方式，這里通過圖片占比的不同作為動態卡片的分類依據。

1.  圖片社交

      動態卡片中，圖片內容占較大篇幅，通常占整個橫向空間部分，常見圖片社交類型，如Ins、Lofter、Nice等。

      在圖片社交的卡片中，不一定以圖片為主，但在有圖的情況下會優先展示圖片。

2. 內容社交

      卡片中視覺焦點在文字上，圖片占較小篇幅，和文字共同橫向排列，縮短卡片整體高度，單頁展示動態數量更多，常見如知乎、豆瓣、簡書等。

二. 圖片的數量

      不同的卡片形式對一定空間內展示的圖片數量有要求，圖片的多少直接影響到圖片所展示的信息內容。

1. 1張圖片

      當卡片中僅展示一張圖片時通常有兩種形式，1.撐滿整個卡片的寬度，2.與文字區域上下或左右對齊。

      當圖片區域可操作時（如左右滑動），通過瀏覽進度的方法展示圖片總數，如“2/3”,前者為當前瀏覽位置，后者為圖片總數可產生對比，簡化了圖片排列。

2. 2張圖片

      當卡片中僅展示兩張圖片時，采用等分的方法

3. 3張圖片

       當卡片中最多展示3張圖片時，有兩種方法，一種是將指定區域等分成三分，另一種是采用一大兩小的圖片展示，通過大小對比帶來視覺沖突。

4. 9張圖片

      當卡片中最多可展示9張圖片時，根據圖片數量的不同，對于展示圖片有不同的方案。

      展示一張圖片時，由于圖片長寬比不同，指定圖片大小會影響圖片瀏覽，為保證展示原圖，避免拉伸，一張圖片的展示會比較長寬來決定定寬或定高。當長＞寬，則定長展示圖片；長＜寬，則定寬展示圖片。

      展示4張圖片時，采用四宮格的形式。

      其他數量的圖片展示可按照九宮格的等分方式處理。

三. 對齊

      在卡片中的排版需要元素之間的對齊體現整體感，不同的對齊方式會帶來不同的視覺體驗，這是同種布局下的不同對齊。

四. 文字

1. 標題和簡介

      標題的擺放有兩種，1、占據卡片的整個橫向空間，2、在圖片占據較小篇幅的情況下與簡介的文字區域同等寬度。

      一般來說，標題的行數不超過2行，簡介的行數限制在2~4行。

2. 層級

      文字的層級使閱讀會更輕松，減輕閱讀負擔，文字要體現文字的層級，可以從大小、字重、顏色來展現。

      瀏覽信息時，文字的大小最直觀的表現了文字的層級。示例中4個字段就用了4個字號，標題(17pt)＞用戶信息(16pt)＞正文(14pt)＞時間(12pt)，整體突出了標題。

      注：尊重原創文章,轉載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-19843.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050