UI 组件类型 · 基础类型 / Typography
Typography
定义字体家族、字号、字重、行高和字距的基础尺度。
Identity · 身份
- 子类型
- 基础
- 父级类目
- 基础视觉与设计要素
What · 是什么
- 组成与状态
- Font family、type scale、weight、leading、tracking。
Why · 为什么
- 作用
- 定义字体家族、字号、字重、行高和字距的基础尺度。
Where · 在哪里
- 适用场景
- Web 界面设计
Lifecycle · 生命周期
- 状态
- 启用
所属组件分类与横向适用关系
关系来自本地关系表,并包含反向关联。
- Accessibility StatementAccessibility Statement反向 · 应用于
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- AI Prompt / ResponseAI Prompt / Response反向 · 应用于
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- Announcement / Site AlertAnnouncement / Site Alert反向 · 应用于
在页面顶部或关键上下文中告知维护、政策、活动或高优先级变化。
- API / Code ExampleAPI / Code Example反向 · 应用于
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- Article BodyArticle Body反向 · 应用于
承载文章或长内容的标题层级、正文、媒体、引用、代码和结构化信息。
- Author BioAuthor Bio反向 · 应用于
说明作者身份、专业背景、联系方式和相关文章,建立内容责任主体。
- Breadcrumb TrailBreadcrumb Trail反向 · 应用于
显示当前页面在信息架构中的位置,并提供返回上级的路径。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Checkout / Order SummaryCheckout / Order Summary反向 · 应用于
总结商品、价格、地址、支付和风险信息,支持用户完成交易。
- Comments / DiscussionComments / Discussion反向 · 应用于
允许用户在内容对象下阅读、发表和回复讨论,并处理审核和空状态。
- Cookie / Privacy ConsentCookie / Privacy Consent反向 · 应用于
解释 Cookie、追踪和隐私选择,并让用户能接受、拒绝或细化设置。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Data Freshness / Last UpdatedData Freshness / Last Updated反向 · 应用于
表达数据更新时间、来源、有效期和刷新动作,避免用户误读过期内容。
- FAQFAQ反向 · 应用于
回答高频疑问,减少决策、使用或转化过程中的不确定性。
- Footer NavigationFooter Navigation反向 · 应用于
在页面末端提供次级导航、法律信息、联系入口和补充行动。
- Form Success / Next StepsForm Success / Next Steps反向 · 应用于
在表单或任务提交后确认结果、解释后续处理并提供下一步入口。
- HeroHero反向 · 应用于
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- Lead CaptureLead Capture反向 · 应用于
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Maintenance / Status PageMaintenance / Status Page反向 · 应用于
说明服务状态、维护时间、影响范围、进展和恢复后的验证方式。
- Notification / Update FeedNotification / Update Feed反向 · 应用于
按时间、类型和已读状态聚合系统、产品或业务更新。
- Page Header / IntroPage Header / Intro反向 · 应用于
在页面上下文中说明当前位置、标题、摘要和主要动作。
- Pricing ComparisonPricing Comparison反向 · 应用于
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Product / Plan CardsProduct / Plan Cards反向 · 应用于
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Progress / Empty / ErrorProgress / Empty / Error反向 · 应用于
在内容、任务或数据暂不可用时解释发生了什么,并提供等待、恢复或替代路径。
- Review SummaryReview Summary反向 · 应用于
聚合评分、评论量、分布和代表性评论,让评价证据可比较。
- Security & ComplianceSecurity & Compliance反向 · 应用于
解释安全、隐私、合规、数据处理和认证信息,支持高风险决策。
- Social ProofSocial Proof反向 · 应用于
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Status / AvailabilityStatus / Availability反向 · 应用于
表达服务、产品、库存、功能或内容当前是否可用及其限制。
- Testimonial BlockTestimonial Block反向 · 应用于
以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。
- Timeline / MilestonesTimeline / Milestones反向 · 应用于
按时间或阶段表达项目、组织、产品或用户旅程的关键节点。
- Tool ResultTool Result反向 · 应用于
呈现工具计算、转换、生成或分析后的结果、解释和下一步动作。
- Trust BadgesTrust Badges反向 · 应用于
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- Usage MetricsUsage Metrics反向 · 应用于
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 基础视觉与设计要素Foundations & Visual Primitives属于
颜色、排版、间距、图标、网格、分隔线和层级等构成界面的基础视觉与结构语言。