用途:为卡片(Card)组件的设计与实现提供规范参考,覆盖卡片内容结构、层级、网格布局和交互方式。
主要能力: 一、卡片解剖。基础元素按需选取:媒体(图片、视频、图标)作为视觉锚点;标题承载主要信息;描述提供次要语境(最多两行,超出用省略号截断);元数据包含日期、作者、分类、状态;操作包括按钮、链接、菜单。 二、卡片内层级。媒体(如有)获得最高视觉权重;标题是最大的文字元素;描述起辅助作用、不与标题竞争;元数据最小最轻;操作置于底部或情境化(悬停、菜单)。 三、卡片网格布局。固定列:2、3 或 4 列,卡片尺寸一致;瀑布流:高度可变的卡片(Pinterest 风格),仅适用于视觉/媒体内容;列表视图替代:面向内容密集的卡片应始终提供列表视图选项。 四、反模式。仅有文字、无视觉锚点的卡片应改用列表;5 个以上操作按钮的卡片认知负荷过高;一行内高度不一致的卡片应使用固定宽高比或瀑布流;可点击卡片若只有局部为点击区域,应让整张卡片可点击或明确定义点击目标。
使用方式:作为卡片设计时的检查清单与规范依据,逐项对照上述层级、布局与反模式进行取舍。
适用场景:产品界面、内容列表、媒体展示等需要卡片化呈现的设计与前端实现。
限制:资料未提供具体代码、组件库实现、安装命令及价格等信息,暂未提供。