UI 组件类型 · 复合组件 / Card
Card
将相关信息和操作组合成可扫描、可比较的内容容器。
Identity · 身份
- 子类型
- 复合组件
- 父级类目
- 内容与数据展示
What · 是什么
- 定义
- 将相关信息和操作组合成可扫描、可比较的内容容器。
Why · 为什么
- 作用
- 承载文章、功能、产品、资源和结果等内容对象。
Where · 在哪里
- 适用场景
- Web 界面设计、Skeleton、Primary、Secondary、Filled、Large
How · 怎么做
- 检查清单
- 标题是否唯一;摘要是否必要;链接区域是否清楚;响应式下内容是否溢出;键盘是否能到达操作。
Lifecycle · 生命周期
- 状态
- 启用
所属组件分类、组件部件与横向适用关系
关系来自本地关系表,并包含反向关联。
- Accessibility StatementAccessibility Statement反向 · 应用于
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- AI Prompt / ResponseAI Prompt / Response反向 · 应用于
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- API / Code ExampleAPI / Code Example反向 · 应用于
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- App DownloadApp Download反向 · 应用于
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Article BodyArticle Body反向 · 应用于
承载文章或长内容的标题层级、正文、媒体、引用、代码和结构化信息。
- Author BioAuthor Bio反向 · 应用于
说明作者身份、专业背景、联系方式和相关文章,建立内容责任主体。
- Before / After ShowcaseBefore / After Showcase反向 · 应用于
对比变化前后的视觉或结果,帮助用户理解产品、服务或过程价值。
- Benefits GridBenefits Grid反向 · 应用于
用短标题、解释和视觉线索把功能转译成用户收益。
- Comments / DiscussionComments / Discussion反向 · 应用于
允许用户在内容对象下阅读、发表和回复讨论,并处理审核和空状态。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Data Freshness / Last UpdatedData Freshness / Last Updated反向 · 应用于
表达数据更新时间、来源、有效期和刷新动作,避免用户误读过期内容。
- FAQFAQ反向 · 应用于
回答高频疑问,减少决策、使用或转化过程中的不确定性。
- Feature & ValueFeature & Value反向 · 应用于
把产品能力、用户收益和证据组织成可扫描的价值说明。
- HeroHero反向 · 应用于
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- How It WorksHow It Works反向 · 应用于
用少量步骤说明产品、服务或工具从输入到结果的工作方式。
- Integration / Partner LogosIntegration / Partner Logos反向 · 应用于
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Location / MapLocation / Map反向 · 应用于
提供地点、路线、营业时间和区域上下文,支持地图之外的可访问文本路径。
- Loyalty / RewardsLoyalty / Rewards反向 · 应用于
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Process StepsProcess Steps反向 · 应用于
将复杂任务拆解为有顺序、有状态和有完成标准的步骤。
- Resource / DownloadResource / Download反向 · 应用于
提供可下载、可保存或可继续阅读的资源,并说明格式、价值和限制。
- Share / InviteShare / Invite反向 · 应用于
让用户把页面、结果、资源或邀请以适合目标渠道的方式分享出去。
- Team GridTeam Grid反向 · 应用于
以成员卡片展示团队角色、专长、身份和联系/了解更多入口。
- Webinar / Event ScheduleWebinar / Event Schedule反向 · 应用于
呈现活动、直播或会议的时间、议程、嘉宾和参与入口。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 内容与数据展示Content & Data Display属于
用于呈现文本、媒体、对象、列表、表格、指标和关系数据的组件。
- Card ActionCard Action反向 · 属于
卡片级主要操作或可点击入口
- Card BodyCard Body反向 · 属于
承载卡片主体摘要或内容的区域
- Card FooterCard Footer反向 · 属于
承载次要信息和操作的底部区域
- Card HeaderCard Header反向 · 属于
呈现卡片标题、状态和辅助信息的头部
- Card MediaCard Media反向 · 属于
承载图片、视频或图表的媒体区域
- MetadataMetadata反向 · 属于
呈现时间、作者、标签等辅助元信息
- FilledFilled应用于
以实色表面表达层级和可操作性的变体。
- LargeLarge应用于
适合主要任务、触屏和强调场景的大尺寸变体。
- PrimaryPrimary应用于
承担上下文中最重要任务的主要视觉变体。
- SecondarySecondary应用于
承担次要但仍重要任务的视觉变体。
- SkeletonSkeleton应用于
内容结构已知但数据尚未到达的占位状态。