編輯導語：在互動設計中，資訊集合的方式往往採用卡片式設計和列表設計。列表針對的集合主要是資訊欄的“排列展示”，而卡片式主要解決的是單條資訊的“內容較多”，以及此資訊的“可操作性”；本文作者分享了關於卡片式列表設計的一些思考和案例，我們一起來了解一下。
卡片式列表是一種很好的集合資訊的方式，它既有好處也有弊端，因此需要根據場景和內容確定展現形式。本文結合了案例與大家分享一下卡片式列表設計的一些思考。
一、定義
1。 什麼是卡片
物理世界中，卡片是用以承載資訊的獨立矩形薄片；例如電話卡、明信片、身份證、撲克等均屬此類，具有“便攜性、資訊簡潔和相對獨立“等特點。
當它作為一種隱喻，延伸至虛擬世界後，其資訊結構和互動方式更容易被感知和理解。
2。 卡片式列表
在列表介面記錄集結構中，我們可以採用表格、列表、圖表等方式對資料進行集合展示；其中，卡片是一種特殊的列表形式，其特點是每一個卡片高度固定（面積相對固定）。
這裡注意，從資料結構上來說，表格是二維陣列，列表則是一維陣列。這兩者是有區別的，沒有包含關係。
二、卡片式列表的特點
首先，來了解一下資料展示較常用的表格有哪些特點。
優點：
概覽性強，便於進行資料對比；
篩查功能強大，表格所具有表頭篩選功能能在一定程度上滿足使用者多種篩選查詢的訴求；
資料展示量多，在一個螢幕內能展示更多條目的資料。
缺點：
資料層次平均，針對單條資訊，呈現效果不夠豐富；
跨終端將會受侷限，運用於移動端體驗欠佳；
易引起視覺疲勞，長時間地專注處理大資料，容易疲勞，甚至產生消極情緒。
那麼相對於表格，卡片式列表的特點如下幾點：
1。 強化主次，資訊分級
卡片作為一個獨立的容器，可以在內容上進行良好的佈局組織，將資訊分塊，突出重點，從視覺感知上就對內容進行了分隔，分明的層級能夠引導使用者的瀏覽視線，有秩序地閱讀與點選。
2。 內容獨立，多端適配
對於響應式的設計來說，卡片作為一個承載內容的容器，能很容易的放大或縮小，做到既統一又相對獨立。在多裝置間能創造出一個一致獨立的美學效果，創建出一致的體驗。
3。 整體的資料展示效率低
儘管單個卡片得到了重點關照，但相對於用表格來展示資料來說，其承載的條目的資料還是偏少，整體的資訊量不足。
三、卡片式列表的場景探索
1。 從表格到卡片
在B端產品的設計中，表格是使用頻次最高的設計元素。對於資料量較大的表格，一般情況下，我們會透過凍結列的形式呈現它。
當然，我們也可以透過一些技巧，將表格轉化成卡片；如下圖，這是一個“客源跟進資訊表”，我們可以去掉表頭，把一些能隱喻的一些元素進行隱喻，比如職業可以隱喻成圖示、合併一些關聯專案，比如最晚入住時間和入住人數，透過以上形式的轉化，我們就可以把這些資料表格轉化成一個卡片。
表格轉化成卡片的技巧總結：
重要區分專案前置與強化
合併強關聯的專案
主卡片與輔助卡片（站在關聯關係角度，區分卡片之間的主從關係）
使用圖示進行必要隱喻（替代表頭的隱喻，比如生日、身高；資料內容本身的隱喻，比如性別）
狀態可以轉化成標籤（比如是否預約、是否簽約）
2。 案例場景探索
先來看一個案例，如下圖，這是一款B端的收款管理平臺，其目的是為了幫助使用者快速收對錢；在此業務場景中，使用者更關注於單筆訂單的資料情況，例如收款進度、未收款餘額以及異常訂單等資料，當資料不符合預期時會對它進行相應的處理。
方案一，採用表格進行資料展示，由於單筆訂單的資訊層級較為平均，不能很好的引導使用者的瀏覽視線，從而降低了使用者對單筆訂單的處理效率。
方案二，將表格透過一定方式轉化成卡片，此時使用者可以很清晰地看到每張卡片代表的訂單情況並快速進行相應的處理，同時卡片式也增加了視覺和互動體驗，互動可玩性更高。
從上述案例中，我們可以得到當B端業務的場景滿足以下幾種特點時可以嘗試採用卡片式列表設計：
不存有資料對比場景，更關注單個數據的情況；
不涉及大量資料的處理，更需要對單個資訊內容進行多元互動；
當主要識別的資料是頭像、封面等以影象為主時，適用於卡片（若為文字標題或具體數字，適合表格）；
本文由 @Nick 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於 CC0 協議