動(dòng)態(tài)卡片是一種輸出信息的展示形式，為用戶展示關(guān)注或感興趣的信息，常用于帶有社交功能的APP。經(jīng)過(guò)整理動(dòng)態(tài)卡片，主要從以下四個(gè)點(diǎn)做出總結(jié):類型、圖片數(shù)量、對(duì)齊方式、文字。

一. 類型

      動(dòng)態(tài)卡片，根據(jù)功能和需求會(huì)有不同的展示方式，這里通過(guò)圖片占比的不同作為動(dòng)態(tài)卡片的分類依據(jù)。

1.  圖片社交

      動(dòng)態(tài)卡片中，圖片內(nèi)容占較大篇幅，通常占整個(gè)橫向空間部分，常見圖片社交類型，如Ins、Lofter、Nice等。

      在圖片社交的卡片中，不一定以圖片為主，但在有圖的情況下會(huì)優(yōu)先展示圖片。

2. 內(nèi)容社交

      卡片中視覺焦點(diǎn)在文字上，圖片占較小篇幅，和文字共同橫向排列，縮短卡片整體高度，單頁(yè)展示動(dòng)態(tài)數(shù)量更多，常見如知乎、豆瓣、簡(jiǎn)書等。

二. 圖片的數(shù)量

      不同的卡片形式對(duì)一定空間內(nèi)展示的圖片數(shù)量有要求，圖片的多少直接影響到圖片所展示的信息內(nèi)容。

1. 1張圖片

      當(dāng)卡片中僅展示一張圖片時(shí)通常有兩種形式，1.撐滿整個(gè)卡片的寬度，2.與文字區(qū)域上下或左右對(duì)齊。

      當(dāng)圖片區(qū)域可操作時(shí)（如左右滑動(dòng)），通過(guò)瀏覽進(jìn)度的方法展示圖片總數(shù)，如“2/3”,前者為當(dāng)前瀏覽位置，后者為圖片總數(shù)可產(chǎn)生對(duì)比，簡(jiǎn)化了圖片排列。

2. 2張圖片

      當(dāng)卡片中僅展示兩張圖片時(shí)，采用等分的方法

3. 3張圖片

       當(dāng)卡片中最多展示3張圖片時(shí)，有兩種方法，一種是將指定區(qū)域等分成三分，另一種是采用一大兩小的圖片展示，通過(guò)大小對(duì)比帶來(lái)視覺沖突。

4. 9張圖片

      當(dāng)卡片中最多可展示9張圖片時(shí)，根據(jù)圖片數(shù)量的不同，對(duì)于展示圖片有不同的方案。

      展示一張圖片時(shí)，由于圖片長(zhǎng)寬比不同，指定圖片大小會(huì)影響圖片瀏覽，為保證展示原圖，避免拉伸，一張圖片的展示會(huì)比較長(zhǎng)寬來(lái)決定定寬或定高。當(dāng)長(zhǎng)＞寬，則定長(zhǎng)展示圖片；長(zhǎng)＜寬，則定寬展示圖片。

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

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

三. 對(duì)齊

      在卡片中的排版需要元素之間的對(duì)齊體現(xiàn)整體感，不同的對(duì)齊方式會(huì)帶來(lái)不同的視覺體驗(yàn)，這是同種布局下的不同對(duì)齊。

四. 文字

1. 標(biāo)題和簡(jiǎn)介

      標(biāo)題的擺放有兩種，1、占據(jù)卡片的整個(gè)橫向空間，2、在圖片占據(jù)較小篇幅的情況下與簡(jiǎn)介的文字區(qū)域同等寬度。

      一般來(lái)說(shuō)，標(biāo)題的行數(shù)不超過(guò)2行，簡(jiǎn)介的行數(shù)限制在2~4行。

2. 層級(jí)

      文字的層級(jí)使閱讀會(huì)更輕松，減輕閱讀負(fù)擔(dān)，文字要體現(xiàn)文字的層級(jí)，可以從大小、字重、顏色來(lái)展現(xiàn)。

      瀏覽信息時(shí)，文字的大小最直觀的表現(xiàn)了文字的層級(jí)。示例中4個(gè)字段就用了4個(gè)字號(hào)，標(biāo)題(17pt)＞用戶信息(16pt)＞正文(14pt)＞時(shí)間(12pt)，整體突出了標(biāo)題。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.hebeijilong.cn/news-id-19843.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050