免费的 UI 模式查找工具 · 仅限网页界面 这个 UI 元素叫什么，它应该如何表现？描述你看到的 UI 元素，它的外观或行为，或者你的编码代理哪里出错了。比较可能的网页 UI 模式，并留下一个可测试的实施简要。给我惊喜：随机模式 诊断控制台 描述审核证据的规则只适用于 UI 元素、行为或实施问题 仅限英语网页 UI 描述。请勿粘贴秘密或私人源代码。 0 / 500 尝试报告 免费使用 使用诊断、比较和参考页面，无需支付。无需账户即可识别 UI 元素。 在你的浏览器中运行 当前的诊断规则在此页面上评估你的描述。 保护私人信息 不要粘贴秘密、凭据或私人源代码。 从视觉线索到行为合同 如何识别一个你无法命名的 UI 元素 组件名称只有在它能导致正确的交互、焦点、键盘、关闭和移动行为时才有用。 01 描述可观察证据 从打开界面的内容开始，它出现在哪里，后面的页面是否仍然可用，它包含什么内容，以及如何关闭。你不需要知道组件的名称。像 “在聚焦时打开一个卡片并包含一个链接” 这样的具体行为比 “小弹窗” 这样的视觉标签更有用。 02 比较附近的替代方案 诊断会保留两个或三个合理的候选，而不是假装第一个关键字匹配是正确的。然后只提问那些能改变结果的问题。这很重要，因为工具提示、弹出层和悬停卡片可能共享浮动形状，但需要不同的交互性和持久性规则。 03 复制可测试的简要 最终输出将所选模式转化为实施合同。它记录触发、关闭、模态、焦点、键盘行为、放置、移动行为、被排除的替代方案和可观察的接受检查。将该简要交给编码代理，然后测试结果，而不是仅仅相信标签。 需要先手动处理吗？阅读识别未命名 UI 模式的逐步指南。 使用正确水平的语言 UI 元素、UI 组件或 UI 模式？这些术语描述同一界面的不同层次。首先从你可以观察到的 UI 元素开始，转向开发者可以构建的组件，然后确认与任务行为匹配的模式。 01 UI 元素 用户面对的最广泛的术语，指可见或可交互的内容，例如字段、按钮、面板、图标或浮动表面。当你可以描述这个东西但还不能命名它时使用它。 02 UI 组件 设计系统或代码库中的可重用实施单元。组件可能会暴露多种状态和行为，其库名称不一定正确标识底层交互。 03 UI 模式 接口问题的可重复解决方案。该模式将可见形式与预期行为相连接，包括触发、焦点、键盘支持、关闭、放置和移动适应。 8个歧义集 昂贵的错误存在于标签之间 每个集围绕着改变焦点、键盘、模态或值行为的决策构建。 01 悬停与上下文信息比较图 悬停与上下文信息 选择补充文本、预览和交互上下文表面。 02 对话框与侧面表面比较图 对话框与侧面表面 将语义对话框行为与边缘型展示分开。 03 选择与建议比较图 选择与建议 在固定选择、可编辑选择和建议行为之间做出选择。 04 菜单与导航比较图 菜单与导航 区分命令、对象上下文操作和持久导航。 05 反馈与通知比较图 反馈与通知 根据紧迫性、持久性、范围和所需操作选择消息通道。 06 渐进式披露比较图 渐进式披露 将多部分结构与单一显示或隐藏关系和通用折叠行为分开。 07 选择与二元状态控制比较图 选择与二元状态控制 在独立的选中选择、组中的单一选择、开或关设置，以及保持按下的按钮中选择。 08 结构容器与状态比较图 结构容器与状态比较图 在内容容器、指令性空视图和分层阻塞表面之间做出选择。 审核的参考集 39 种模式、行为和表现形式 这些条目故意没有简化为一种虚假的分类法。每个页面声明其名称可以和不能保证的内容。 01 悬停与上下文信息 · 语义模式 工具提示 一个小的、非交互的文本弹出框，当它接收到悬停或键盘焦点时，会补充一个控制项。工具提示行为图 工具提示行为指南