UI 设计语境 · 主题 / Components & Interaction
组件与交互
定义可复用组件的结构、状态、行为和组合方式。
Identity · 身份
- 子类型
- UI 设计语境主题
- 父级类目
- Web 界面设计
- 层级
- UI 设计语境 · 主题
What · 是什么
- 定义
- 定义可复用组件的结构、状态、行为和组合方式。
Why · 为什么
- 核心问题
- 组件如何保持一致,同时适应不同内容和任务?
- 分类目的
- 建立按钮、卡片、输入、切换和反馈组件。
Where · 在哪里
- 适用场景
- Save / Export、Tool Input、通用 Web 设计框架、Header、Navigation、Button / CTA、Input、Search Field、Badge
Lifecycle · 生命周期
- 状态
- 草稿
所属 UI 领域与横向 Web 关系
关系来自本地关系表,并包含反向关联。
- Save / ExportSave & Export应用于
允许用户保存、下载、复制或导出当前内容和工具结果的操作区块。
- Tool InputTool Input应用于
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- AI Prompt / ResponseAI Prompt / Response反向 · 应用于
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- API / Code ExampleAPI / Code Example反向 · 应用于
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Data Freshness / Last UpdatedData Freshness / Last Updated反向 · 应用于
表达数据更新时间、来源、有效期和刷新动作,避免用户误读过期内容。
- Interactive CalculatorInteractive Calculator反向 · 应用于
让用户输入假设并即时获得可解释的估算、比较或结果。
- Product ConfiguratorProduct Configurator反向 · 应用于
按选项、约束和价格反馈组合或定制一个产品、方案或服务。
- Save / ExportSave / Export反向 · 应用于
让用户保存、下载、复制、导出或分享当前结果与内容。
- Survey / FeedbackSurvey / Feedback反向 · 应用于
以问卷、评分或开放反馈收集用户意见,并说明提交后的处理方式。
- Tool InputTool Input反向 · 应用于
让用户输入、配置或上传工具任务所需的信息。
- Tool ResultTool Result反向 · 应用于
呈现工具计算、转换、生成或分析后的结果、解释和下一步动作。
- Web 界面设计Web Interface Design属于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Drag HandleDrag Handle反向 · 应用于
表达可拖拽对象起始位置和抓取目标的控件。
- Inline LoadingInline Loading反向 · 应用于
嵌入内容上下文中的轻量加载指示器。
- MeterMeter反向 · 应用于
显示处于范围内但不一定代表完成度的数值。
- Presence IndicatorPresence Indicator反向 · 应用于
表达用户、设备或协作者在线/离线状态的指示器。
- Status DotStatus Dot反向 · 应用于
用小型圆点表达在线、警告、成功或其他状态。
- Action BarAction Bar反向 · 应用于
在列表、表格或对象上下文中集中呈现批量和主要操作。
- Action GroupAction Group反向 · 相关
把多个相关操作组合为一致的动作集合。
- Segmented ControlSegmented Control反向 · 应用于
在有限的互斥选项中快速切换视图、模式或筛选条件。
- Speed DialSpeed Dial反向 · 应用于
将多个次要操作收纳在一个可展开的浮动操作入口中。
- Toggle GroupToggle Group反向 · 应用于
把多个互斥或可多选的切换项组织为一个选择组。
- AccordionAccordion反向 · 属于
通过展开和收起控制一组附加内容可见性的组件。
- Article CardArticle Card反向 · 属于
专门呈现文章标题、摘要、作者、主题或发布时间的内容卡片。
- BadgeBadge应用于
以短标签标识状态、分类、属性或优先级的轻量组件。
- BreadcrumbBreadcrumb反向 · 属于
显示当前页面在站点层级中位置的路径组件。
- Button / CTAButton & Call to Action应用于
触发操作、提交或导航的高优先级交互组件。
- CardCard反向 · 属于
将相关信息和操作组合成可扫描、可比较的内容容器。
- Export ButtonExport Button反向 · 属于
触发下载、复制或生成文件的明确操作组件。
- FormForm反向 · 属于
组织多个输入、校验、提交和结果反馈的任务组件。
- HeaderHeader应用于
页面顶部承载品牌、全局导航和主要操作的容器组件。
- InputInput应用于
收集单项文本、数值或格式化信息的基础表单控件。
- MetricMetric反向 · 属于
展示一个数值、单位、时间范围和解释的指标组件。
- NavigationNavigation应用于
提供一组有层级关系的页面或功能入口的组件。
- PaginationPagination反向 · 属于
将长列表分成多个可导航页面并显示当前位置的组件。
- Plan CardPlan Card反向 · 属于
呈现一个定价方案、适用对象、价格、限制和行动的比较组件。
- Related LinkRelated Link反向 · 属于
带有上下文说明、指向相关内容或下一步任务的链接组件。
- Save / ExportSave & Export反向 · 属于
允许用户保存、下载、复制或导出当前内容和工具结果的操作区块。
- Search FieldSearch Field应用于
让用户输入查询词并触发内容或数据检索的专用输入组件。
- TabsTabs反向 · 属于
在同一上下文中切换互斥内容面板的组件。
- TestimonialTestimonial反向 · 属于
呈现用户评价、身份和上下文的信任证明组件。
- ToggleToggle反向 · 属于
表示并即时切换一个二元设置状态的控件。
- Tool InputTool Input反向 · 属于
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- 通用 Web 设计框架Universal Web Design应用于
一个不绑定真实网站的 Web 界面知识框架,用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。