ui component page module type / Before / After Showcase
Before / After Showcase
对比变化前后的视觉或结果，帮助用户理解产品、服务或过程价值。
Key fields
Identity
- Subtype
- 模块
What
- Definition
- 对比变化前后的视觉或结果，帮助用户理解产品、服务或过程价值。
Why
- Implementation Goal
- 先确认该模块解决的信息或任务问题，再控制内容密度、阅读顺序和动作优先级；所有证据、外链和社交内容都应有来源、替代路径和可访问语义。
Where
- Applicable Context
- Content & Interface Language, Image, Button, Link, Container, Web Interface Design, Media Card, Card, Home Page, Landing Page, Pricing Page, Feature & Value Section
How
- Implementation Guidance
- 先确认该模块解决的信息或任务问题，再控制内容密度、阅读顺序和动作优先级；所有证据、外链和社交内容都应有来源、替代路径和可访问语义。
How much
- Metrics
- 中 · 辅助
Lifecycle
- Status
- 启用
Additional content
- Legacy Tags
- 场景化 · 中 · 辅助 · 媒体
Related content
Relationships come from the local knowledge graph and include reverse links.
- Home PageHomeRelated
面向首次访问和回访用户的站点入口页面，解释站点价值并提供主要探索路径。
- Landing PageLanding PageRelated
围绕单一活动、受众或转化目标组织的独立页面模板。
- Pricing PagePricingRelated
解释方案、价格、差异和购买或联系路径的商业页面。
- Feature & Value SectionFeature & ValueRelated
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Web Interface DesignWeb 界面设计Related
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Content & Interface Language内容与界面语言Related
用标签、提示、说明和错误文案帮助用户理解界面和采取行动。
- ContainerContainerRelated
限制内容宽度、内边距和水平对齐的容器原语。
- ButtonButtonRelated
触发动作、提交选择或打开流程。
- ImageImageRelated
Image 如何在界面中被理解、操作或组合？
- LinkLinkRelated
Link 如何在界面中被理解、操作或组合？
- CardCardRelated
将相关信息和操作组合成可扫描、可比较的内容容器。
- Media CardMedia CardRelated
结合图片、视频或音频预览、元信息和动作的内容卡片。