列表卡片這類組件樣式，可以將卡片內容的一部分進行外露，以吸引用戶興趣。那么，列表卡片可以怎么設計呢？這篇文章里，作者總結了相應的設計要點，一起來看一下吧，或許會對你有所幫助。

一、組件介紹

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

列表卡片的意義在于將卡片內容——可能是一個完整的列表——的一部分進行外露，用以吸引用戶的興趣。

二、使用場景

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

1. 無序列表卡片

無序列表卡片主要用在內容本身客觀上不需要，設計者主觀上也沒有意圖進行排序的情況，列表中的條目只是一個擁有統一標簽的集合。例如：內容的推薦、趨勢、每日早報等等。

2. 有序列表卡片

有序列表卡片多是排行榜，在一個主題之下可以明確分出前后次序，典型的如：熱搜、音樂榜單等。

但也并不一定只有排行榜，設計者如果強行給無序列表加上次序也是可行的，這可以僅代表一種瀏覽次序或播放次序，例如：音樂App的每日推薦。

三、設計要點

但不管是無序列表還是有序列表，在設計思路上都是類似的，區別只是列表前的序號，所以設計要點我們將兩者合二為一進行講解。

1. 卡片的元素和布局

列表卡片的內容元素相對比較固定，標題、列表、卡片背景和一個可以用來查看詳情的按鈕。

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

單列列表，也可以做成雙列的。如果有序列表想做成雙列，序號的排列應當是優先從縱向開始，也就是說第一列從1至末尾排列完之后，再從第二列的第一個開始。

查看詳情的按鈕也不一定非得只能放在右上角，也可以放在最底部做一個大按鈕；卡片內沒有其他可交互按鈕的情況下，甚至可以沒有這個查看詳情的按鈕，詳情可以靠點擊卡片進入。

2. 卡片背景

列表卡片作為功能和視覺為一體的組件，在一定程度上可以承擔視覺功能，為頁面中添加一些色彩，那么卡片背景就是一個很方便進行處理的點。

1）純色

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

2）彩色漸變

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

3）圖片/插畫+遮罩

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

3. 序號設計

序號也是有序列表卡片中一個不大不小的設計點。需不需要對此作出額外的設計，得看實際工作中你所面對的組件是否有這種視覺需求。

1）序號中的元素

序號有時并不僅僅是一個數字而已，它承載的信息除了序列號碼之外，還可以有升降名次、標簽或者視覺化圖標等元素。

2）徽章式設計

列表卡片中的列表通常最多展示3個，這3個序列在排行中是非常重要的，所以對這三個序號的設計可以做得更花一點，比如進行徽章式的設計。

4. 不一樣的列表卡片

1）波點音樂

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

2）網易云音樂/酷狗音樂

這里指的是此類音樂軟件中的歌曲排行，這些排行在設計上會稍微有一點點不一樣，比較明顯的是左側一個大的榜1的專輯封面或者排行榜名稱，右側才是列表。

四、樣式拓展

這里還額外收集了一些列表卡片的線上案例，也可以作為設計時的參考：