歡迎來(lái)到培訓(xùn)無(wú)憂網(wǎng)!
咨詢熱線 400-001-5729
> 新聞資訊 > 電腦/IT > UI設(shè)計(jì) > UI設(shè)計(jì)學(xué)習(xí)動(dòng)態(tài)卡片設(shè)計(jì)思路2022-02-07 15:12:23|已瀏覽:165次

動(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