UI 组件类型 · 复合组件 / Card Group
Card Group
以一致布局组织多个卡片并表达集合关系的结构
Identity · 身份
- 子类型
- 复合组件
- 父级类目
- 内容与数据展示
What · 是什么
- 定义
- 以一致布局组织多个卡片并表达集合关系的结构
- 组成与状态
- 触发或标题、主体内容、辅助信息、主要操作、状态反馈、关闭或返回入口(按场景取舍)
Why · 为什么
- 作用
- 以一致布局组织多个卡片并表达集合关系的结构
Where · 在哪里
- 适用场景
- Web 界面设计
How · 怎么做
- 检查清单
- 定义用途;明确结构与状态;覆盖键盘/触摸/读屏;处理加载、错误和空状态;验证响应式与焦点顺序。
Lifecycle · 生命周期
- 状态
- 启用
Relation · 关联
- 相关内容
- Product Comparison
所属组件分类、组件部件与横向适用关系
关系来自本地关系表,并包含反向关联。
- Product ComparisonProduct Comparison Section相关
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- App DownloadApp Download反向 · 应用于
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Awards & CertificationsAwards & Certifications反向 · 应用于
展示奖项、认证、评测或资质信息,并提供来源和有效期上下文。
- Benefits GridBenefits Grid反向 · 应用于
用短标题、解释和视觉线索把功能转译成用户收益。
- Changelog / Release NotesChangelog / Release Notes反向 · 应用于
按版本和日期说明产品变化、影响、迁移和后续行动。
- Community / Activity FeedCommunity / Activity Feed反向 · 应用于
连续呈现社区成员、产品活动或协作事件,支持参与、筛选和回到对象。
- Comparison TableComparison Table反向 · 应用于
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Content ListContent List反向 · 应用于
以列表、卡片或网格连续呈现一组可浏览、筛选或继续阅读的内容。
- Customer Logo CloudCustomer Logo Cloud反向 · 应用于
以客户、合作方或使用组织的标志形成快速可扫读的信任线索。
- Directory / Listing GridDirectory / Listing Grid反向 · 应用于
将组织、资源、产品、人员或地点按筛选和排序组织成目录。
- Feature & ValueFeature & Value反向 · 应用于
把产品能力、用户收益和证据组织成可扫描的价值说明。
- How It WorksHow It Works反向 · 应用于
用少量步骤说明产品、服务或工具从输入到结果的工作方式。
- Integration / Partner LogosIntegration / Partner Logos反向 · 应用于
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Job ListingJob Listing反向 · 应用于
让候选人搜索、筛选、比较职位并进入申请流程。
- Loyalty / RewardsLoyalty / Rewards反向 · 应用于
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Maintenance / Status PageMaintenance / Status Page反向 · 应用于
说明服务状态、维护时间、影响范围、进展和恢复后的验证方式。
- Partner DirectoryPartner Directory反向 · 应用于
按地区、能力、行业或集成方式浏览合作伙伴和服务提供方。
- Press MentionsPress Mentions反向 · 应用于
展示媒体报道、行业引用或第三方提及,补充外部可信度。
- Pricing ComparisonPricing Comparison反向 · 应用于
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Process StepsProcess Steps反向 · 应用于
将复杂任务拆解为有顺序、有状态和有完成标准的步骤。
- Product / Plan CardsProduct / Plan Cards反向 · 应用于
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Product ConfiguratorProduct Configurator反向 · 应用于
按选项、约束和价格反馈组合或定制一个产品、方案或服务。
- Referral / InviteReferral / Invite反向 · 应用于
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Related ContentRelated Content反向 · 应用于
在当前内容之后提供语义相关、下一步阅读或相邻任务的入口。
- Screenshot GalleryScreenshot Gallery反向 · 应用于
通过连续截图、放大预览和说明展示界面、功能或视觉成果。
- Security & ComplianceSecurity & Compliance反向 · 应用于
解释安全、隐私、合规、数据处理和认证信息,支持高风险决策。
- Social EmbedSocial Embed反向 · 应用于
嵌入来自社交平台的帖子、视频或讨论,同时控制隐私、性能和失败退化。
- Social Media FeedSocial Media Feed反向 · 应用于
把社交平台上的内容、作者、时间和外链以受控方式嵌入页面。
- Social ProofSocial Proof反向 · 应用于
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Store LocatorStore Locator反向 · 应用于
让用户按位置、服务或库存查找最近的门店、机构或服务点。
- Team GridTeam Grid反向 · 应用于
以成员卡片展示团队角色、专长、身份和联系/了解更多入口。
- Timeline / MilestonesTimeline / Milestones反向 · 应用于
按时间或阶段表达项目、组织、产品或用户旅程的关键节点。
- Trust BadgesTrust Badges反向 · 应用于
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- UGC GalleryUGC Gallery反向 · 应用于
以用户生成图片、视频或帖子形成参与感、真实感和社区证明。
- Usage MetricsUsage Metrics反向 · 应用于
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Webinar / Event ScheduleWebinar / Event Schedule反向 · 应用于
呈现活动、直播或会议的时间、议程、嘉宾和参与入口。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 内容与数据展示Content & Data Display属于
用于呈现文本、媒体、对象、列表、表格、指标和关系数据的组件。