UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式|北京藍(lán)藍(lán)用戶體驗(yàn)設(shè)計(jì)公司

2023-12-5    周周

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

一、組件介紹

列表卡片是一類將列表和卡片相結(jié)合的組件形式,盡管它聽起來很像列表,但是在 UI 中這兩者是完全不同的東西——列表卡片首先是一張卡片,其次才是將列表置于卡片之中。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

列表卡片的意義在于將卡片內(nèi)容——可能是一個(gè)完整的列表——的一部分進(jìn)行外露,用以吸引用戶的興趣。

二、使用場景

列表按照排序邏輯可以分為無序列表和有序列表兩種形式,那么相應(yīng)的,列表卡片也可以同樣分為無序列表卡片和有序列表卡片兩種,這兩種有不同的應(yīng)用場景。

1. 無序列表卡片

無序列表卡片主要用在內(nèi)容本身客觀上不需要,設(shè)計(jì)者主觀上也沒有意圖進(jìn)行排序的情況,列表中的條目只是一個(gè)擁有統(tǒng)一標(biāo)簽的集合。例如:內(nèi)容的推薦、趨勢、每日早報(bào)等等。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

2. 有序列表卡片

有序列表卡片多是排行榜,在一個(gè)主題之下可以明確分出前后次序,典型的如:熱搜、音樂榜單等;但也并不一定只有排行榜,設(shè)計(jì)者如果強(qiáng)行給無序列表加上次序也是可行的,這可以僅代表一種瀏覽次序或播放次序,例如:音樂 App 的每日推薦。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

三、設(shè)計(jì)要點(diǎn)

但不管是無序列表還是有序列表,在設(shè)計(jì)思路上都是類似的,區(qū)別只是列表前的序號,所以設(shè)計(jì)要點(diǎn)我們將兩者合二為一進(jìn)行講解。

1.卡片的元素和布局

列表卡片的內(nèi)容元素相對比較固定,標(biāo)題、列表、卡片背景和一個(gè)可以用來查看詳情的按鈕。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

元素盡管相當(dāng)有限,且簡單,但如何排布它們卻也不是一板一眼只有一種做法。列表除了常見的縱向排列之外,也是可以橫向排列的 (雖然這模樣看上去不太像是列表了,但組件的本質(zhì)并沒有改變);

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

單列列表,也可以做成雙列的。如果有序列表想做成雙列,序號的排列應(yīng)當(dāng)是優(yōu)先從縱向開始,也就是說第一列從 1 至末尾排列完之后,再從第二列的第一個(gè)開始。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

查看詳情的按鈕也不一定非得只能放在右上角,也可以放在最底部做一個(gè)大按鈕;卡片內(nèi)沒有其他可交互按鈕的情況下,甚至可以沒有這個(gè)查看詳情的按鈕,詳情可以靠點(diǎn)擊卡片進(jìn)入。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

2.卡片背景

列表卡片作為功能和視覺為一體的組件,在一定程度上可以承擔(dān)視覺功能,為頁面中添加一些色彩,那么卡片背景就是一個(gè)很方便進(jìn)行處理的點(diǎn)。

①純色

除了深色和淺色的純色背景之外,也可以額外設(shè)置一些非主色的、較為柔和的色彩作為卡片背景色。如果想使用主色,主色通常非常鮮艷,飽和度也很高,需要謹(jǐn)慎考慮。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

②彩色漸變

彩色漸變通常指的是單一一種色相的明度漸變,多色相漸變在 UI 中也需要謹(jǐn)慎使用,尤其是在卡片背景這種不應(yīng)該非常搶眼的元素中。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

③圖片/插畫+遮罩

比較常見于影視 App 中,劇照、海報(bào)背景與主題相當(dāng)契合。但需要注意的是,為了在圖片上疊加列表元素,還需要額外附加一層遮罩,不管是套一個(gè)矩形的純色遮罩還是漸變遮罩又或是背景模糊的遮罩,為了突出列表內(nèi)容,都十分有必要加。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

3.序號設(shè)計(jì)

序號也是有序列表卡片中一個(gè)不大不小的設(shè)計(jì)點(diǎn)。需不需要對此作出額外的設(shè)計(jì),得看實(shí)際工作中你所面對的組件是否有這種視覺需求。

①序號中的元素

序號有時(shí)并不僅僅是一個(gè)數(shù)字而已,它承載的信息除了序列號碼之外,還可以有升降名次、標(biāo)簽或者視覺化圖標(biāo)等元素。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

②徽章式設(shè)計(jì)

列表卡片中的列表通常最多展示 3 個(gè),這 3 個(gè)序列在排行中是非常重要的,所以對這三個(gè)序號的設(shè)計(jì)可以做得更花一點(diǎn),比如進(jìn)行徽章式的設(shè)計(jì)。

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

4. 不一樣的列表卡片

①波點(diǎn)音樂

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

波點(diǎn)音樂的這個(gè)列表卡片雖然大體上與其他卡片類似,但是右上側(cè)為了貼合播放按鈕而故意做大的圓角還是有一些不同之處。再者波點(diǎn)音樂偏愛使用熒光色作為色彩載體,在 App 設(shè)計(jì)中還是屬于比較大膽新潮的。

②網(wǎng)易云音樂/酷狗音樂

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

這里指的是此類音樂軟件中的歌曲排行,這些排行在設(shè)計(jì)上會(huì)稍微有一點(diǎn)點(diǎn)不一樣,比較明顯的是左側(cè)一個(gè)大的榜 1 的專輯封面或者排行榜名稱,右側(cè)才是列表。

四、樣式拓展

這里還額外收集了一些列表卡片的線上案例,也可以作為設(shè)計(jì)時(shí)的參考:

UI必看!詳細(xì)分析列表卡片的設(shè)計(jì)方式

 

 

文章來源:優(yōu)設(shè)網(wǎng)    作者:酸梅干超人

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司軟件界面設(shè)計(jì)公司、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔