SuperAPI AI 工具集

card-design

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:Card Design 提供卡片组件的设计模式与布局规范,用于博客、产品列表、仪表盘、团队介绍等界面中的卡片设计与网格系统。

主要能力:定义卡片解剖结构,包括媒体/图片、分类标签、标题、描述、元数据/页脚和操作区,其中标题为必需项,其余为可选项。给出卡片变体及适用场景:内容卡片用于博客文章、文章、产品;操作卡片用于仪表盘组件、快捷操作;个人资料卡片用于团队成员、用户资料;数据卡片用于 KPI、指标、数字;媒体卡片用于视频、图片、音频缩略图。

网格布局:2 列适合并排比较、编辑类内容;3 列适合产品列表、博客归档,最常见;4 列适合密集网格、小卡片、仪表盘;瀑布流适合 Pinterest 风格、高度可变内容。

使用规则:网格中保持卡片高度一致,或使用瀑布流;常规网格中混用高度会显得破碎。每张卡片只设一个主操作,整卡可点击或仅一个 CTA。避免信息过载,超过 4-5 条信息应考虑其他格式。图片比例需统一,选定 16:9、4:3 或 1:1 后在整个网格中保持一致。悬停状态应体现可交互性,如轻微上浮、边框变化或背景变化。

限制与反模式:避免一张卡片有 3 个不同可点击区域导致目标混乱;避免过重阴影主导页面;圆角不宜过大,8-12px 通常合适,24px 过大;避免卡片只是无交互用途的样式化 div。

其他:资料未提供安装命令、代码示例、收费或平台信息。