
【計】 tabulating card
【計】 I/O list I/O; list; listing; tabulating
【經】 tabulate; tabulation
card
【計】 card
【經】 card
中文術語:列表卡片(Lièbiǎo Kǎpiàn)
英文對應:List Card / Card List
列表卡片是一種混合型UI組件,結合了列表(List)的縱向信息結構和卡片(Card)的容器化設計。它通過分塊化布局展示條目化内容,每個條目獨立封裝為卡片單元,同時保持列表的線性排列邏輯。
結構化信息容器
每個卡片單元承載獨立内容模塊(如标題、摘要、圖像等),通過視覺分隔提升信息掃描效率。示例:
新聞聚合頁中,每條新聞以卡片形式縱向排列,用戶可快速定位目标條目 。
響應式交互載體
支持點擊展開詳情、滑動操作(如删除/收藏)等交互行為,適配移動端觸屏場景。
設計規範參考:Material Design中的卡片列表模式(Google, 2023) 。
數據可視化媒介
通過圖标、進度條、标籤等元素在卡片内呈現多維數據,例如:
交互設計基金會(IxDF)
定義列表卡片為"模塊化列表模式",強調其平衡信息密度與可操作性的優勢 。
[來源:Interaction Design Foundation - List Components]
W3C Web标準
在WCAG 2.1指南中要求卡片列表需滿足:
Apple人機界面指南
規定卡片列表在iOS系統中的設計原則:
"卡片應包含自包含内容,并保持寬度一緻以維持列表節奏"(iOS UI Guidelines, 2024) 。
領域 | 用例 |
---|---|
電子商務 | 商品搜索結果列表 |
社交媒體 | 動态信息流(如微博/Instagram) |
SaaS系統 | 數據儀表盤的項目卡片集 |
數據來源:NN/g用戶體驗研究報告(2023)
注:引用鍊接因平台限制隱去,實際内容可核查上述機構官網發布的最新設計指南。
列表卡片是UI設計中結合卡片與列表特性的複合組件,其核心定義和設計特點如下:
1. 定義與結構 列表卡片以卡片為容器,内部嵌套列表内容。相較于普通列表,它通過卡片的視覺邊界強化信息區塊感,同時保留列表的條目展示特性。典型結構包含标題、條目列表、背景及操作按鈕(如"查看更多")。
2. 主要分類
3. 設計優勢
4. 布局變體 支持單列/雙列縱向排列,或橫向滑動形式。雙列布局時,序號建議縱向優先排列(如左列1-5,右列6-10)。
與傳統卡片的區别
普通卡片(如賀卡、資料卡)側重獨立信息承載,而列表卡片強調通過條目集合實現内容預覽與深度引導。
澳洲牛蜱标高修正率導套等效的電磁透鏡低階地址形式動物生長因子分配策略模塊複方碘塗劑腹型流感隔岸觀火公費醫療供養令骨移位角菜酸鹽結節性甲狀腺腫吉爾克氏小體結石的蘭德曼氏結核菌素連四硫酸鋇鯉精蛋白甲硫代二苯甲醇流水作業線馬勃菌酸脈沖空間調制氣動清管器升平統籌的