UI 组件类型 · 单一组件 / Icon
Icon
表达操作、对象、状态或方向的视觉符号。
Identity · 身份
- 子类型
- 单一组件
- 父级类目
- 基础视觉与设计要素
What · 是什么
- 组成与状态
- Glyph、Viewbox、Size、Stroke、Accessible Label。
Why · 为什么
- 作用
- 表达操作、对象、状态或方向的视觉符号。
Where · 在哪里
- 适用场景
- Web 界面设计
Lifecycle · 生命周期
- 状态
- 启用
所属组件分类、组件部件与横向适用关系
关系来自本地关系表,并包含反向关联。
- Accessibility StatementAccessibility Statement反向 · 应用于
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- AI Prompt / ResponseAI Prompt / Response反向 · 应用于
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- Announcement / Site AlertAnnouncement / Site Alert反向 · 应用于
在页面顶部或关键上下文中告知维护、政策、活动或高优先级变化。
- API / Code ExampleAPI / Code Example反向 · 应用于
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- Benefits GridBenefits Grid反向 · 应用于
用短标题、解释和视觉线索把功能转译成用户收益。
- Breadcrumb TrailBreadcrumb Trail反向 · 应用于
显示当前页面在信息架构中的位置,并提供返回上级的路径。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Community / Activity FeedCommunity / Activity Feed反向 · 应用于
连续呈现社区成员、产品活动或协作事件,支持参与、筛选和回到对象。
- Comparison TableComparison Table反向 · 应用于
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Contact & SupportContact & Support反向 · 应用于
让用户提出问题、请求支持或找到合适的联系渠道。
- Content ListContent List反向 · 应用于
以列表、卡片或网格连续呈现一组可浏览、筛选或继续阅读的内容。
- Cookie / Privacy ConsentCookie / Privacy Consent反向 · 应用于
解释 Cookie、追踪和隐私选择,并让用户能接受、拒绝或细化设置。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Data Freshness / Last UpdatedData Freshness / Last Updated反向 · 应用于
表达数据更新时间、来源、有效期和刷新动作,避免用户误读过期内容。
- FAQFAQ反向 · 应用于
回答高频疑问,减少决策、使用或转化过程中的不确定性。
- Feature & ValueFeature & Value反向 · 应用于
把产品能力、用户收益和证据组织成可扫描的价值说明。
- Form Success / Next StepsForm Success / Next Steps反向 · 应用于
在表单或任务提交后确认结果、解释后续处理并提供下一步入口。
- Global NavigationGlobal Navigation反向 · 应用于
跨页面提供品牌、一级目的地、账户和全局操作的稳定入口。
- How It WorksHow It Works反向 · 应用于
用少量步骤说明产品、服务或工具从输入到结果的工作方式。
- Integration / Partner LogosIntegration / Partner Logos反向 · 应用于
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Job ListingJob Listing反向 · 应用于
让候选人搜索、筛选、比较职位并进入申请流程。
- Lead CaptureLead Capture反向 · 应用于
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Location / MapLocation / Map反向 · 应用于
提供地点、路线、营业时间和区域上下文,支持地图之外的可访问文本路径。
- Maintenance / Status PageMaintenance / Status Page反向 · 应用于
说明服务状态、维护时间、影响范围、进展和恢复后的验证方式。
- Notification / Update FeedNotification / Update Feed反向 · 应用于
按时间、类型和已读状态聚合系统、产品或业务更新。
- Page Header / IntroPage Header / Intro反向 · 应用于
在页面上下文中说明当前位置、标题、摘要和主要动作。
- Process StepsProcess Steps反向 · 应用于
将复杂任务拆解为有顺序、有状态和有完成标准的步骤。
- Progress / Empty / ErrorProgress / Empty / Error反向 · 应用于
在内容、任务或数据暂不可用时解释发生了什么,并提供等待、恢复或替代路径。
- Related ContentRelated Content反向 · 应用于
在当前内容之后提供语义相关、下一步阅读或相邻任务的入口。
- Save / ExportSave / Export反向 · 应用于
让用户保存、下载、复制、导出或分享当前结果与内容。
- Screenshot GalleryScreenshot Gallery反向 · 应用于
通过连续截图、放大预览和说明展示界面、功能或视觉成果。
- Search Suggestions / CommandSearch Suggestions / Command反向 · 应用于
在用户输入过程中提供建议、命令、历史和可直接执行的结果。
- Security & ComplianceSecurity & Compliance反向 · 应用于
解释安全、隐私、合规、数据处理和认证信息,支持高风险决策。
- Social ShareSocial Share反向 · 应用于
让用户把当前页面或内容分享到社交平台、复制链接或发送给他人。
- Status / AvailabilityStatus / Availability反向 · 应用于
表达服务、产品、库存、功能或内容当前是否可用及其限制。
- Testimonial BlockTestimonial Block反向 · 应用于
以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。
- Timeline / MilestonesTimeline / Milestones反向 · 应用于
按时间或阶段表达项目、组织、产品或用户旅程的关键节点。
- Trust BadgesTrust Badges反向 · 应用于
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- Usage MetricsUsage Metrics反向 · 应用于
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 基础视觉与设计要素Foundations & Visual Primitives属于
颜色、排版、间距、图标、网格、分隔线和层级等构成界面的基础视觉与结构语言。