UI 设计语境 · 领域 / Web Interface Design
Web 界面设计
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
Identity · 身份
- 子类型
- UI 设计语境领域
- 父级类目
- UI
- 层级
- UI 设计语境 · 领域
What · 是什么
- 定义
- 围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
Why · 为什么
- 核心问题
- 用户如何在 Web 页面中找到内容、完成任务,并从访问走向下一步行动?
Where · 在哪里
- 适用场景
- Login Form、Settings Panel、Onboarding Flow、Kanban Board、Property Panel、Wizard、Sign Up Form、Article Layout、Page Shell、Responsive Shell、Calendar View、Dashboard Layout、Article Body、Content List、CTA Band、FAQ、Feature & Value、Footer Navigation、Global Navigation、Hero / Page Intro、Pricing Comparison、Progress / Empty / Error、Related Content、Save / Export、Search & Filter、Tool Input、Tool Result、Social Proof、Product Comparison、Home、Docs / FAQ、Tool、Contact / Conversion、Article、Blog Index、Pricing、Input、Badge、Navigation、Header、Color、Typography、Elevation、Spacing、Grid、Border、Motion、Radius、Stack、Focus Indicator、Flex、Spacer、Container、Surface、Label、Leading Icon、Trailing Icon、Loading Indicator、Shortcut Hint、Input Control、Prefix、Suffix、Helper Text、Error Message、Character Count、Clear Button、Trigger、Selected Value、Placeholder、Option、Option Group、Listbox、Popover
Lifecycle · 生命周期
- 状态
- 草稿
Relation · 关联
- 相关内容
- Dropdown、Menu、Context Menu、Command Menu、Disclosure、Tablist、Side Navigation、Footer、Toolbar、Toolbar Group、Sidebar、Stepper、Field Group、Search & Filter Bar、Checkbox Group、Radio Group、Date Picker、Time Picker、Date Range Picker、File Uploader、Rich Text Editor、Code Editor、Data Grid、Tree View、Button Group、Icon Button、Link、Link Button、Toggle Button、Menu Button、Split Button、Label、Textarea、Number Input、Searchbox、Password Input、Select、Combobox、Autocomplete、Checkbox、Radio、Switch、Divider、Icon、Button、Badge、Metric、Pagination、Related Link、Export Button
下级 UI 主题
关系来自本地关系表,并包含反向关联。
- UIUI属于
- ArticleArticle Page应用于
承载一篇完整内容的详情页面,组织标题、正文、辅助信息、相关内容和下一步行动。
- Blog IndexBlog Index应用于
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- Contact / ConversionContact & Conversion Page应用于
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Docs / FAQDocs & FAQ应用于
回答使用问题、配置问题和常见疑问的文档与问答页面。
- HomeHome Page应用于
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- PricingPricing Page应用于
解释方案、价格、差异和购买或联系路径的商业页面。
- ToolTool Page应用于
让用户输入信息、等待处理并获得可操作结果的工具型页面。
- Article BodyArticle Body应用于
承载文章核心论证、说明或叙事的正文区块,包含标题层级、段落、媒体和辅助结构。
- CTA BandCall-to-action Band应用于
在页面中段或结尾集中呈现下一步行动的转化区块。
- Content ListContent List Section应用于
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
- Feature & ValueFeature & Value Section应用于
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Footer NavigationFooter Navigation应用于
页面底部承载补充导航、法律信息、联系入口和站点范围说明的区块。
- FAQFrequently Asked Questions应用于
以问题和答案组织常见疑问的内容区块,通常位于页面决策或帮助节点附近。
- Global NavigationGlobal Navigation应用于
跨页面稳定存在的主要导航,帮助用户理解站点范围并进入核心区域。
- Hero / Page IntroHero & Page Introduction应用于
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Pricing ComparisonPricing Comparison应用于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Product ComparisonProduct Comparison Section应用于
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- Progress / Empty / ErrorProgress, Empty & Error States应用于
描述工具或页面在等待、没有结果、失败和可恢复状态下的反馈区块。
- Related ContentRelated Content应用于
根据当前页面主题、任务或用户下一步需求提供的相关内容区块。
- Save / ExportSave & Export应用于
允许用户保存、下载、复制或导出当前内容和工具结果的操作区块。
- Search & FilterSearch & Filter应用于
帮助用户在大量页面、内容或结果中缩小范围并找到目标对象的区块。
- Social ProofSocial Proof应用于
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Tool InputTool Input应用于
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- Tool ResultTool Result应用于
工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。
- Accessibility StatementAccessibility Statement反向 · 应用于
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- AI Prompt / ResponseAI Prompt / Response反向 · 应用于
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- Announcement / Site AlertAnnouncement / Site Alert反向 · 应用于
在页面顶部或关键上下文中告知维护、政策、活动或高优先级变化。
- API / Code ExampleAPI / Code Example反向 · 应用于
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- App DownloadApp Download反向 · 应用于
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Article BodyArticle Body反向 · 应用于
承载文章或长内容的标题层级、正文、媒体、引用、代码和结构化信息。
- Author BioAuthor Bio反向 · 应用于
说明作者身份、专业背景、联系方式和相关文章,建立内容责任主体。
- Awards & CertificationsAwards & Certifications反向 · 应用于
展示奖项、认证、评测或资质信息,并提供来源和有效期上下文。
- Before / After ShowcaseBefore / After Showcase反向 · 应用于
对比变化前后的视觉或结果,帮助用户理解产品、服务或过程价值。
- Benefits GridBenefits Grid反向 · 应用于
用短标题、解释和视觉线索把功能转译成用户收益。
- Breadcrumb TrailBreadcrumb Trail反向 · 应用于
显示当前页面在信息架构中的位置,并提供返回上级的路径。
- Case Study TeaserCase Study Teaser反向 · 应用于
用案例摘要连接具体客户、问题、过程和结果,支持进一步阅读。
- Changelog / Release NotesChangelog / Release Notes反向 · 应用于
按版本和日期说明产品变化、影响、迁移和后续行动。
- Chat / ConversationChat / Conversation反向 · 应用于
围绕实时或异步消息组织对话、参与者、上下文和输入动作。
- Checkout / Order SummaryCheckout / Order Summary反向 · 应用于
总结商品、价格、地址、支付和风险信息,支持用户完成交易。
- Comments / DiscussionComments / Discussion反向 · 应用于
允许用户在内容对象下阅读、发表和回复讨论,并处理审核和空状态。
- Community / Activity FeedCommunity / Activity Feed反向 · 应用于
连续呈现社区成员、产品活动或协作事件,支持参与、筛选和回到对象。
- Comparison TableComparison Table反向 · 应用于
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Contact & SupportContact & Support反向 · 应用于
让用户提出问题、请求支持或找到合适的联系渠道。
- Content ListContent List反向 · 应用于
以列表、卡片或网格连续呈现一组可浏览、筛选或继续阅读的内容。
- Cookie / Privacy ConsentCookie / Privacy Consent反向 · 应用于
解释 Cookie、追踪和隐私选择,并让用户能接受、拒绝或细化设置。
- Cookie Preference CenterCookie Preference Center反向 · 应用于
让用户查看、分组和修改非必要 Cookie、追踪或隐私权限。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Customer Logo CloudCustomer Logo Cloud反向 · 应用于
以客户、合作方或使用组织的标志形成快速可扫读的信任线索。
- Data Freshness / Last UpdatedData Freshness / Last Updated反向 · 应用于
表达数据更新时间、来源、有效期和刷新动作,避免用户误读过期内容。
- Demo RequestDemo Request反向 · 应用于
收集最少需求并预约产品、服务或销售演示。
- Directory / Listing GridDirectory / Listing Grid反向 · 应用于
将组织、资源、产品、人员或地点按筛选和排序组织成目录。
- Donation / FundraisingDonation / Fundraising反向 · 应用于
说明目标、进展和资金用途,并提供低摩擦的捐赠或支持入口。
- Event RegistrationEvent Registration反向 · 应用于
提供活动信息、报名字段、名额、费用和确认提醒。
- FAQFAQ反向 · 应用于
回答高频疑问,减少决策、使用或转化过程中的不确定性。
- Feature & ValueFeature & Value反向 · 应用于
把产品能力、用户收益和证据组织成可扫描的价值说明。
- Footer NavigationFooter Navigation反向 · 应用于
在页面末端提供次级导航、法律信息、联系入口和补充行动。
- Form Success / Next StepsForm Success / Next Steps反向 · 应用于
在表单或任务提交后确认结果、解释后续处理并提供下一步入口。
- Global NavigationGlobal Navigation反向 · 应用于
跨页面提供品牌、一级目的地、账户和全局操作的稳定入口。
- HeroHero反向 · 应用于
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- How It WorksHow It Works反向 · 应用于
用少量步骤说明产品、服务或工具从输入到结果的工作方式。
- Integration / Partner LogosIntegration / Partner Logos反向 · 应用于
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Interactive CalculatorInteractive Calculator反向 · 应用于
让用户输入假设并即时获得可解释的估算、比较或结果。
- Job ListingJob Listing反向 · 应用于
让候选人搜索、筛选、比较职位并进入申请流程。
- Lead CaptureLead Capture反向 · 应用于
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Location / MapLocation / Map反向 · 应用于
提供地点、路线、营业时间和区域上下文,支持地图之外的可访问文本路径。
- Login / AuthLogin / Auth反向 · 应用于
提供登录、注册、身份恢复或切换账户的入口与恢复路径。
- Loyalty / RewardsLoyalty / Rewards反向 · 应用于
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Maintenance / Status PageMaintenance / Status Page反向 · 应用于
说明服务状态、维护时间、影响范围、进展和恢复后的验证方式。
- Media / Product DemoMedia / Product Demo反向 · 应用于
用视频、动图或交互预览解释产品如何工作及其关键体验。
- Newsletter SignupNewsletter Signup反向 · 应用于
以低承诺方式收集邮箱并持续提供内容、产品或活动更新。
- Notification / Update FeedNotification / Update Feed反向 · 应用于
按时间、类型和已读状态聚合系统、产品或业务更新。
- Page Header / IntroPage Header / Intro反向 · 应用于
在页面上下文中说明当前位置、标题、摘要和主要动作。
- Pagination / Load MorePagination / Load More反向 · 应用于
将较大的结果集合拆分成可控制的批次,并让用户继续浏览。
- Partner DirectoryPartner Directory反向 · 应用于
按地区、能力、行业或集成方式浏览合作伙伴和服务提供方。
- Press MentionsPress Mentions反向 · 应用于
展示媒体报道、行业引用或第三方提及,补充外部可信度。
- Pricing ComparisonPricing Comparison反向 · 应用于
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Process StepsProcess Steps反向 · 应用于
将复杂任务拆解为有顺序、有状态和有完成标准的步骤。
- Product / Plan CardsProduct / Plan Cards反向 · 应用于
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Product ConfiguratorProduct Configurator反向 · 应用于
按选项、约束和价格反馈组合或定制一个产品、方案或服务。
- Progress / Empty / ErrorProgress / Empty / Error反向 · 应用于
在内容、任务或数据暂不可用时解释发生了什么,并提供等待、恢复或替代路径。
- Referral / InviteReferral / Invite反向 · 应用于
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Related ContentRelated Content反向 · 应用于
在当前内容之后提供语义相关、下一步阅读或相邻任务的入口。
- Resource / DownloadResource / Download反向 · 应用于
提供可下载、可保存或可继续阅读的资源,并说明格式、价值和限制。
- Review SummaryReview Summary反向 · 应用于
聚合评分、评论量、分布和代表性评论,让评价证据可比较。
- Save / ExportSave / Export反向 · 应用于
让用户保存、下载、复制、导出或分享当前结果与内容。
- Screenshot GalleryScreenshot Gallery反向 · 应用于
通过连续截图、放大预览和说明展示界面、功能或视觉成果。
- Search & FilterSearch & Filter反向 · 应用于
帮助用户在内容集合、工具数据或资源目录中定位目标。
- Search Suggestions / CommandSearch Suggestions / Command反向 · 应用于
在用户输入过程中提供建议、命令、历史和可直接执行的结果。
- Security & ComplianceSecurity & Compliance反向 · 应用于
解释安全、隐私、合规、数据处理和认证信息,支持高风险决策。
- Share / InviteShare / Invite反向 · 应用于
让用户把页面、结果、资源或邀请以适合目标渠道的方式分享出去。
- Social EmbedSocial Embed反向 · 应用于
嵌入来自社交平台的帖子、视频或讨论,同时控制隐私、性能和失败退化。
- Social Media FeedSocial Media Feed反向 · 应用于
把社交平台上的内容、作者、时间和外链以受控方式嵌入页面。
- Social ProofSocial Proof反向 · 应用于
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Social ShareSocial Share反向 · 应用于
让用户把当前页面或内容分享到社交平台、复制链接或发送给他人。
- Status / AvailabilityStatus / Availability反向 · 应用于
表达服务、产品、库存、功能或内容当前是否可用及其限制。
- Store LocatorStore Locator反向 · 应用于
让用户按位置、服务或库存查找最近的门店、机构或服务点。
- Survey / FeedbackSurvey / Feedback反向 · 应用于
以问卷、评分或开放反馈收集用户意见,并说明提交后的处理方式。
- Team GridTeam Grid反向 · 应用于
以成员卡片展示团队角色、专长、身份和联系/了解更多入口。
- Testimonial BlockTestimonial Block反向 · 应用于
以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。
- Timeline / MilestonesTimeline / Milestones反向 · 应用于
按时间或阶段表达项目、组织、产品或用户旅程的关键节点。
- Tool InputTool Input反向 · 应用于
让用户输入、配置或上传工具任务所需的信息。
- Tool ResultTool Result反向 · 应用于
呈现工具计算、转换、生成或分析后的结果、解释和下一步动作。
- Trust BadgesTrust Badges反向 · 应用于
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- UGC GalleryUGC Gallery反向 · 应用于
以用户生成图片、视频或帖子形成参与感、真实感和社区证明。
- Usage MetricsUsage Metrics反向 · 应用于
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Video DemoVideo Demo反向 · 应用于
用短视频展示产品、服务或操作流程,并提供字幕、摘要和替代路径。
- Waitlist / PrelaunchWaitlist / Prelaunch反向 · 应用于
在产品或活动尚未开放时收集兴趣、说明预期并提供状态更新。
- Webinar / Event ScheduleWebinar / Event Schedule反向 · 应用于
呈现活动、直播或会议的时间、议程、嘉宾和参与入口。
- 可访问性与性能Accessibility & Performance反向 · 属于
将语义、键盘、对比度、响应速度和稳定性纳入 Web UI 基础。
- 组件与交互Components & Interaction反向 · 属于
定义可复用组件的结构、状态、行为和组合方式。
- 内容与 SEOContent & Search Experience反向 · 属于
把内容结构、搜索意图、内部链接和页面可读性纳入 UI 设计。
- 表单与转化Forms & Conversion反向 · 属于
设计从理解价值到提交、注册、购买或联系的连续路径。
- 布局与响应式Layout & Responsive Behavior反向 · 属于
在不同视口和设备上组织容器、网格、间距和内容优先级。
- 导航与方向感Navigation & Orientation反向 · 属于
通过全局导航、局部导航、面包屑和当前状态帮助用户定位。
- 页面架构与信息结构Page Architecture & Information Structure反向 · 属于
组织 Web 页面、内容层级和任务路径,让用户与搜索引擎都能理解页面关系。
- 区块与页面构成Sections & Page Composition反向 · 属于
把页面拆成具有明确任务和信息职责的区块。
- 状态与反馈States & Feedback反向 · 属于
处理 Web 页面和工具在加载、空、错误、成功和进度中的体验。
- BorderBorder应用于
定义边界、分隔和层级的线性视觉元素。
- RadiusBorder Radius应用于
表达容器和控件边界的圆角规则。
- ColorColor应用于
提供色板与颜色角色的基础说明,不作为业务组件直接消费。
- ContainerContainer应用于
限制内容宽度、内边距和水平对齐的容器原语。
- ElevationElevation应用于
定义阴影、层级和 z-index 的基础尺度。
- FlexFlex应用于
用于一维对齐、分配空间和响应式排列的布局原语。
- Focus IndicatorFocus Indicator应用于
以可见方式标识当前键盘或辅助技术焦点。
- GridGrid应用于
定义容器、列、间隙和阅读宽度等布局基础。
- MotionMotion应用于
定义动效时长、缓动、位移和 reduced motion 基础规则。
- SpacerSpacer应用于
在布局中提供可控空白和剩余空间分配的布局原语。
- SpacingSpacing应用于
提供空间尺度和布局间距的基础说明。
- StackStack应用于
沿单一轴组织子元素并维护一致间距的布局原语。
- SurfaceSurface应用于
承载内容并表达背景、层级或交互边界的表面原语。
- TypographyTypography应用于
定义字体家族、字号、字重、行高和字距的基础尺度。
- AnchorAnchor反向 · 应用于
Anchor 如何在界面中被理解、操作或组合?
- AutocompleteAutocomplete相关
Autocomplete 如何在界面中被理解、操作或组合?
- AvatarAvatar反向 · 应用于
Avatar 如何在界面中被理解、操作或组合?
- BackdropBackdrop反向 · 应用于
Backdrop 如何在界面中被理解、操作或组合?
- BadgeBadge相关
显示轻量分类、状态或数量标记。
- ButtonButton相关
触发动作、提交选择或打开流程。
- CheckboxCheckbox相关
Checkbox 如何在界面中被理解、操作或组合?
- ChipChip反向 · 应用于
Chip 如何在界面中被理解、操作或组合?
- Code InputCode Input反向 · 应用于
Code Input 如何在界面中被理解、操作或组合?
- Color InputColor Input反向 · 应用于
Color Input 如何在界面中被理解、操作或组合?
- ComboboxCombobox相关
Combobox 如何在界面中被理解、操作或组合?
- Date InputDate Input反向 · 应用于
Date Input 如何在界面中被理解、操作或组合?
- DividerDivider相关
分隔内容区域,表达结构关系而非装饰。
- Error TextError Text反向 · 应用于
Error Text 如何在界面中被理解、操作或组合?
- Export ButtonExport Button相关
触发下载、复制或生成文件的明确操作组件。
- File IconFile Icon反向 · 应用于
File Icon 如何在界面中被理解、操作或组合?
- File InputFile Input反向 · 应用于
File Input 如何在界面中被理解、操作或组合?
- HeadingHeading反向 · 应用于
Heading 如何在界面中被理解、操作或组合?
- IconIcon相关
表达操作、对象、状态或方向的视觉符号。
- Icon ButtonIcon Button相关
Icon Button 如何在界面中被理解、操作或组合?
- ImageImage反向 · 应用于
Image 如何在界面中被理解、操作或组合?
- InputInput反向 · 应用于
接收用户输入,并提供焦点、错误和只读反馈。
- Keyboard KeyKeyboard Key反向 · 应用于
Keyboard Key 如何在界面中被理解、操作或组合?
- LabelLabel相关
Label 如何在界面中被理解、操作或组合?
- LinkLink相关
Link 如何在界面中被理解、操作或组合?
- Link ButtonLink Button相关
Link Button 如何在界面中被理解、操作或组合?
- List ItemList Item反向 · 应用于
List Item 如何在界面中被理解、操作或组合?
- Loading IndicatorLoading Indicator反向 · 应用于
Loading Indicator 如何在界面中被理解、操作或组合?
- Menu ButtonMenu Button相关
Menu Button 如何在界面中被理解、操作或组合?
- Menu ItemMenu Item反向 · 应用于
Menu Item 如何在界面中被理解、操作或组合?
- MetricMetric相关
展示一个数值、单位、时间范围和解释的指标组件。
- Nav LinkNavigation Link反向 · 应用于
Nav Link 如何在界面中被理解、操作或组合?
- Number InputNumber Input相关
Number Input 如何在界面中被理解、操作或组合?
- OTP InputOTP Input反向 · 应用于
OTP Input 如何在界面中被理解、操作或组合?
- PaginationPagination相关
将长列表分成多个可导航页面并显示当前位置的组件。
- Pagination ItemPagination Item反向 · 应用于
Pagination Item 如何在界面中被理解、操作或组合?
- Password InputPassword Input相关
Password Input 如何在界面中被理解、操作或组合?
- Progress BarProgress Bar反向 · 应用于
Progress Bar 如何在界面中被理解、操作或组合?
- Progress RingProgress Ring反向 · 应用于
Progress Ring 如何在界面中被理解、操作或组合?
- RadioRadio相关
Radio 如何在界面中被理解、操作或组合?
- Range SliderRange Slider反向 · 应用于
Range Slider 如何在界面中被理解、操作或组合?
- RatingRating反向 · 应用于
Rating 如何在界面中被理解、操作或组合?
- Related LinkRelated Link相关
带有上下文说明、指向相关内容或下一步任务的链接组件。
- ScrimScrim反向 · 应用于
Scrim 如何在界面中被理解、操作或组合?
- SearchboxSearchbox相关
Searchbox 如何在界面中被理解、操作或组合?
- SelectSelect相关
Select 如何在界面中被理解、操作或组合?
- SkeletonSkeleton反向 · 应用于
Skeleton 如何在界面中被理解、操作或组合?
- SliderSlider反向 · 应用于
Slider 如何在界面中被理解、操作或组合?
- SpinnerSpinner反向 · 应用于
Spinner 如何在界面中被理解、操作或组合?
- Split ButtonSplit Button相关
Split Button 如何在界面中被理解、操作或组合?
- Status IndicatorStatus Indicator反向 · 应用于
Status Indicator 如何在界面中被理解、操作或组合?
- Stepper ItemStepper Item反向 · 应用于
Stepper Item 如何在界面中被理解、操作或组合?
- Success IndicatorSuccess Indicator反向 · 应用于
Success Indicator 如何在界面中被理解、操作或组合?
- SwitchSwitch相关
Switch 如何在界面中被理解、操作或组合?
- TabTab反向 · 应用于
Tab 如何在界面中被理解、操作或组合?
- Table CellTable Cell反向 · 应用于
Table Cell 如何在界面中被理解、操作或组合?
- TagTag反向 · 应用于
Tag 如何在界面中被理解、操作或组合?
- Tag InputTag Input反向 · 应用于
Tag Input 如何在界面中被理解、操作或组合?
- TextText反向 · 应用于
Text 如何在界面中被理解、操作或组合?
- TextareaTextarea相关
Textarea 如何在界面中被理解、操作或组合?
- ThumbnailThumbnail反向 · 应用于
Thumbnail 如何在界面中被理解、操作或组合?
- Time InputTime Input反向 · 应用于
Time Input 如何在界面中被理解、操作或组合?
- ToggleToggle反向 · 应用于
表示并即时切换一个二元设置状态的控件。
- Toggle ButtonToggle Button相关
Toggle Button 如何在界面中被理解、操作或组合?
- Tree ItemTree Item反向 · 应用于
Tree Item 如何在界面中被理解、操作或组合?
- Validation MessageValidation Message反向 · 应用于
Validation Message 如何在界面中被理解、操作或组合?
- VideoVideo反向 · 应用于
Video 如何在界面中被理解、操作或组合?
- Warning IndicatorWarning Indicator反向 · 应用于
Warning Indicator 如何在界面中被理解、操作或组合?
- AccordionAccordion反向 · 应用于
通过展开和收起控制一组附加内容可见性的组件。
- Activity FeedActivity Feed反向 · 应用于
按时间和主体展示对象活动、变更或协作记录
- AlertAlert反向 · 应用于
在当前上下文中提示重要信息、风险或结果的结构
- Article CardArticle Card反向 · 应用于
专门呈现文章标题、摘要、作者、主题或发布时间的内容卡片。
- Avatar GroupAvatar Group反向 · 应用于
并列或堆叠展示多个参与者身份的结构
- BannerBanner反向 · 应用于
在页面或区域顶部持续展示重要公告或任务提示
- BreadcrumbBreadcrumb反向 · 应用于
显示当前页面在站点层级中位置的路径组件。
- Button GroupButton Group相关
把相关动作组织成有优先级和间距关系的操作组。
- CalendarCalendar反向 · 应用于
按日历网格呈现日期、事件或排期的结构
- CardCard反向 · 应用于
将相关信息和操作组合成可扫描、可比较的内容容器。
- Card GroupCard Group反向 · 应用于
以一致布局组织多个卡片并表达集合关系的结构
- Card HeaderCard Header反向 · 应用于
组织卡片标题、说明和局部操作。
- CarouselCarousel反向 · 应用于
在有限空间内浏览一组媒体或内容项的结构
- Checkbox GroupCheckbox Group相关
组织多个可多选选项并呈现组级语义的结构
- Code EditorCode Editor相关
编辑代码、配置或结构化文本的编辑器
- Code SnippetCode Snippet反向 · 应用于
展示可复制、可高亮的代码或命令片段
- Command BarCommand Bar反向 · 应用于
在任务上下文中集中呈现主要命令和更多操作
- Command MenuCommand Menu相关
通过键盘或搜索快速执行命令的菜单
- Confirmation DialogConfirmation Dialog反向 · 应用于
在不可逆或有风险操作前请求明确确认
- Content SwitcherContent Switcher反向 · 应用于
在同一区域内切换不同内容视图或数据维度
- Context MenuContext Menu相关
在对象或区域上下文中提供操作集合的菜单
- Data GridData Grid相关
支持列、行、编辑、选择和数据操作的高密度表格
- Data TableData Table反向 · 应用于
展示结构化数据并支持排序、筛选和行级操作。
- Date PickerDate Picker相关
通过输入和日历面板选择日期的组合控件
- Date Range PickerDate Range Picker相关
选择起始日期和结束日期的组合控件
- Description ListDescription List反向 · 应用于
以标签和值的对应关系呈现对象属性摘要
- DialogDialog反向 · 应用于
在当前任务上方承载聚焦任务或补充信息的对话框
- DisclosureDisclosure相关
控制一段补充内容展开与收起的交互结构
- DrawerDrawer反向 · 应用于
从边缘滑入并承载辅助任务或详情的面板
- DropdownDropdown相关
选择一个选项并显示可操作菜单的组合控件
- Empty StateEmpty State反向 · 应用于
在没有内容、没有结果或首次使用时引导下一步
- Error SummaryError Summary反向 · 应用于
集中列出表单或页面错误并链接到问题位置
- Field GroupField Group相关
将语义相关的表单控件组织成一个输入组
- File PreviewFile Preview反向 · 应用于
在上传或文件管理场景中预览文件内容和元信息
- File UploaderFile Uploader相关
选择、上传、校验并管理文件的组合控件
- Filter PanelFilter Panel反向 · 应用于
在面板中组织复杂筛选条件、应用和清除操作
- FooterFooter相关
承载辅助导航、法律信息和次要操作的页面底部结构
- FormForm反向 · 应用于
组织多个输入、校验、提交和结果反馈的任务组件。
- Form FieldForm Field反向 · 应用于
把 Label、Input、辅助说明和错误反馈组合成可理解的输入单元。
- HeaderHeader反向 · 应用于
提供产品身份、主导航和全局动作入口。
- Hover CardHover Card反向 · 应用于
悬停或聚焦对象时展示对象摘要或预览的浮层
- Image GalleryImage Gallery反向 · 应用于
浏览多张图片并支持缩略图、放大或切换的结构
- ListList反向 · 应用于
以统一节奏呈现同类对象集合的列表结构
- ListboxListbox反向 · 应用于
承载可选择选项集合的列表弹层或列表区域
- Media ObjectMedia Object反向 · 应用于
以媒体和文字并置方式呈现一个内容对象
- MenuMenu相关
承载一组可执行命令或导航项的菜单
- Message BarMessage Bar反向 · 应用于
在内容流中嵌入可理解、可操作的消息反馈
- Metric GroupMetric Group反向 · 应用于
成组展示关键指标、趋势和比较信息的结构
- ModalModal反向 · 应用于
承载需要聚焦处理的任务、确认或补充内容。
- Multi-selectMulti-select反向 · 应用于
支持从选项集合中选择多个值的组合控件
- NavigationNavigation反向 · 应用于
提供层级化页面路径和当前区域反馈。
- NotificationNotification反向 · 应用于
以可关闭或可操作的方式呈现系统通知
- Notification CenterNotification Center反向 · 应用于
集中浏览、筛选和处理多条系统通知的结构
- Page HeaderPage Header反向 · 应用于
组织页面标题、上下文、主要操作和辅助信息的页头
- Pagination BarPagination Bar反向 · 应用于
组合分页信息、页码、前后翻页和页面大小控制
- Plan CardPlan Card反向 · 应用于
呈现一个定价方案、适用对象、价格、限制和行动的比较组件。
- PopoverPopover反向 · 应用于
锚定在触发元素附近并显示补充内容或操作的浮层
- Progress SummaryProgress Summary反向 · 应用于
组合进度值、阶段、状态和补充说明的反馈结构
- Radio GroupRadio Group相关
组织一组互斥选项并管理组级选择的结构
- Results ListResults List反向 · 应用于
展示搜索或筛选结果并支持排序、分页和批量操作
- Rich Text EditorRich Text Editor相关
编辑带有格式、结构和嵌入内容的富文本区域
- Search & Filter BarSearch & Filter Bar相关
组合搜索、筛选、排序和清除操作的工具条
- Search FieldSearch Field反向 · 应用于
提供搜索输入、提交和清除操作。
- Search ResultsSearch Results反向 · 应用于
展示搜索命中、摘要、筛选和空结果反馈的结构
- SheetSheet反向 · 应用于
以底部或侧边表面承载移动端或响应式任务的面板
- Side NavigationSide Navigation相关
在侧栏中组织分层页面导航的结构
- SidebarSidebar相关
承载辅助内容、筛选或上下文工具的侧边区域
- SnackbarSnackbar反向 · 应用于
在页面底部提供短暂反馈和可选撤销操作
- Split ViewSplit View反向 · 应用于
在同一视图中并列展示列表与详情或两个相关区域
- StepperStepper相关
展示多步骤流程进度并支持步骤切换的结构
- Table ToolbarTable Toolbar反向 · 应用于
承载表格级搜索、筛选、批量操作和视图设置
- TablistTablist相关
在多个同层内容面板之间切换的导航结构
- TabsTabs反向 · 应用于
在同一上下文中切换互斥内容面板的组件。
- TestimonialTestimonial反向 · 应用于
呈现用户评价、身份和上下文的信任证明组件。
- TileTile反向 · 应用于
以块状容器承载摘要信息和可选操作的结构
- Time PickerTime Picker相关
通过输入和候选列表选择时间的组合控件
- TimelineTimeline反向 · 应用于
按时间顺序展示事件、活动或进度的结构
- ToastToast反向 · 应用于
以短暂浮层反馈刚刚发生的操作结果
- ToolbarToolbar相关
将一组相关操作集中到同一操作条中的结构
- Toolbar GroupToolbar Group相关
在工具栏中按功能聚合相关操作的结构
- TooltipTooltip反向 · 应用于
解释控件或图标含义的短文本提示
- Tree SelectTree Select反向 · 应用于
从层级选项树中选择一个或多个值的组合控件
- Tree TableTree Table反向 · 应用于
以表格列展示层级数据并支持展开的结构
- Tree ViewTree View相关
展示可展开层级节点并支持选择或导航的结构
- Article LayoutArticle Layout应用于
组织长文阅读的标题、导语、正文、媒体和相关内容。
- Calendar ViewCalendar View应用于
以日、周、月等时间视图组织事件和排期的工作区
- Dashboard LayoutDashboard Layout应用于
组织高密度信息、指标、筛选器和数据视图。
- Kanban BoardKanban Board应用于
按列组织对象并支持拖拽、状态流转和批量操作的工作区
- Login FormLogin Form应用于
收集身份凭证并处理登录、错误和辅助入口的流程结构
- Onboarding FlowOnboarding Flow应用于
帮助新用户完成初始化、偏好设置和首次成功任务
- Page ShellPage Shell应用于
定义页面级容器、导航、主体和页脚的组合骨架。
- Property PanelProperty Panel应用于
展示并编辑当前对象属性、状态和上下文操作
- Responsive ShellResponsive Shell应用于
根据屏幕和任务上下文调整导航、内容和辅助栏的应用壳
- Settings PanelSettings Panel应用于
组织一组可保存、校验和恢复的设置项
- Sign Up FormSign Up Form应用于
收集注册信息并处理校验、同意和完成反馈的流程结构
- WizardWizard应用于
把复杂任务拆成连续步骤并管理前进后退的流程模式
- ActionAction反向 · 应用于
承载解决问题或继续任务的操作
- ActionAction反向 · 应用于
查看、重试或处理通知的操作
- ActionAction反向 · 应用于
提供撤销、查看或重试的操作
- Actions RowActions Row反向 · 应用于
承载提交、取消和辅助操作的操作行
- Add Card ActionAdd Card Action反向 · 应用于
在列中创建新工作项的操作
- Alt TextAlt Text反向 · 应用于
为非视觉用户提供图片替代文本
- Article TitleArticle Title反向 · 应用于
链接到文章正文的标题
- AttributionAttribution反向 · 应用于
说明引用者身份和组织的元信息
- Author MetaAuthor Meta反向 · 应用于
呈现作者、时间和阅读信息的元数据
- AvatarAvatar反向 · 应用于
呈现引用者头像或品牌标识
- Avatar ImageAvatar Image反向 · 应用于
呈现用户或实体头像图片的区域
- Back ActionBack Action反向 · 应用于
返回上一流程步骤的操作
- BackdropBackdrop反向 · 应用于
隔离背景内容并表达模态层级的遮罩
- Board ColumnBoard Column反向 · 应用于
承载一个工作状态或分类下的卡片集合
- Breadcrumb ItemBreadcrumb Item反向 · 应用于
路径导航中的单级位置
- BreadcrumbsBreadcrumbs反向 · 应用于
说明当前页面在信息架构中的位置
- Calendar HeaderCalendar Header反向 · 应用于
承载日期范围和导航控制的头部
- Calendar SurfaceCalendar Surface反向 · 应用于
承载可视日期网格的浮层或面板
- CaptionCaption反向 · 应用于
解释图片内容或来源的说明文本
- CardCard反向 · 应用于
承载一个可拖拽工作项的卡片
- Card ActionCard Action反向 · 应用于
卡片级主要操作或可点击入口
- Card BodyCard Body反向 · 应用于
承载卡片主体摘要或内容的区域
- Card Drag HandleCard Drag Handle反向 · 应用于
提供可感知拖拽的操作入口
- Card FooterCard Footer反向 · 应用于
承载次要信息和操作的底部区域
- Card HeaderCard Header反向 · 应用于
呈现卡片标题、状态和辅助信息的头部
- Card MediaCard Media反向 · 应用于
承载图片、视频或图表的媒体区域
- Category LabelCategory Label反向 · 应用于
说明文章类别或主题的标签
- Character CountCharacter Count应用于
显示当前字符数与限制的计数器
- Clear ButtonClear Button应用于
清空当前输入值的操作
- Clear ButtonClear Button应用于
清除当前选择的操作
- Close ButtonClose Button反向 · 应用于
关闭可 dismiss 提示的操作
- Close ButtonClose Button反向 · 应用于
关闭或退出对话框的操作
- Close ButtonClose Button反向 · 应用于
手动关闭短暂反馈的操作
- Collapse TriggerCollapse Trigger反向 · 应用于
展开或收起导航分支的控制
- Column HeaderColumn Header反向 · 应用于
说明列名称、数量和列级操作的头部
- Column MenuColumn Menu反向 · 应用于
提供列隐藏、排序和筛选的菜单
- Comparison TextComparison Text反向 · 应用于
说明与目标、上期或基准的比较
- Completion ActionCompletion Action反向 · 应用于
完成流程并进入结果状态的操作
- Completion StateCompletion State反向 · 应用于
完成初始化后的成功反馈和下一步
- ControlControl反向 · 应用于
表达勾选、未勾选或混合状态的控制点
- ControlControl反向 · 应用于
接收字段值的实际控件
- ControlControl反向 · 应用于
表达互斥选择状态的控制点
- ControlControl反向 · 应用于
表达开关开启或关闭状态的控制点
- Date CellDate Cell反向 · 应用于
表达一个日期及其选择状态的单元格
- Day CellDay Cell反向 · 应用于
表达日历中的一个日期单元
- DescriptionDescription反向 · 应用于
补充选择影响或使用条件的文本
- DescriptionDescription反向 · 应用于
说明为什么为空以及用户可以做什么
- DescriptionDescription反向 · 应用于
解释任务背景或操作后果的说明
- DescriptionDescription反向 · 应用于
补充选择条件的辅助文本
- DescriptionDescription反向 · 应用于
解释开启或关闭后果的辅助文本
- Dialog BodyDialog Body反向 · 应用于
承载对话任务主要内容的主体区域
- Dialog FooterDialog Footer反向 · 应用于
承载确认、取消和辅助操作的底部区域
- Dialog HeaderDialog Header反向 · 应用于
承载标题、说明和关闭操作的头部
- DividerDivider反向 · 应用于
分隔不同导航分组的视觉结构
- DropzoneDropzone反向 · 应用于
接收拖放或点击选择文件的区域
- Error MessageError Message反向 · 应用于
指出选项校验问题的错误文本
- Error MessageError Message应用于
指出校验失败原因的错误文本
- Error MessageError Message反向 · 应用于
指出选项校验问题的错误文本
- Error SummaryError Summary反向 · 应用于
集中呈现表单错误并链接到字段的位置
- Event ItemEvent Item反向 · 应用于
呈现一个事件或排期的条目
- ExcerptExcerpt反向 · 应用于
展示文章摘要的文本
- FallbackFallback反向 · 应用于
无法获取身份图片时的替代内容
- FallbackFallback反向 · 应用于
资源加载失败或缺失时的替代呈现
- Feature ListFeature List反向 · 应用于
列出套餐包含能力的列表
- Field GroupField Group反向 · 应用于
组织语义相关字段的输入组
- Field LabelField Label反向 · 应用于
说明字段含义的标签
- File ItemFile Item反向 · 应用于
呈现单个已选或已上传文件的条目
- File NameFile Name反向 · 应用于
显示文件名称和类型的文本
- Filter BarFilter Bar反向 · 应用于
承载表格筛选和搜索的工具区域
- Filter SummaryFilter Summary反向 · 应用于
展示已应用筛选及清除入口
- FooterFooter反向 · 应用于
承载辅助链接、版权和法律信息的页脚
- Form FieldForm Field反向 · 应用于
组合标签、控件、帮助和错误的字段结构
- Form HeaderForm Header反向 · 应用于
承载表单标题、说明和上下文的页头区域
- Global HeaderGlobal Header反向 · 应用于
承载品牌、全局入口和账户操作的页头
- Grid CellGrid Cell反向 · 应用于
呈现单个数据值或编辑控件的单元格
- Grid HeaderGrid Header反向 · 应用于
呈现列名和列级操作的表头区域
- Grid RowGrid Row反向 · 应用于
承载一条数据记录的行结构
- Helper TextHelper Text反向 · 应用于
解释填写要求的辅助文本
- Helper TextHelper Text应用于
解释输入要求或格式的辅助文本
- IllustrationIllustration反向 · 应用于
表达没有内容或没有结果的视觉说明
- Image ContentImage Content反向 · 应用于
承载实际图片资源的内容区域
- IndicatorIndicator反向 · 应用于
表达当前项和总项数的分页指示器
- InitialsInitials反向 · 应用于
没有图片时显示的姓名首字母
- Inline EditorInline Editor反向 · 应用于
在单元格或行内编辑数据的控件
- InputInput反向 · 应用于
接收或显示日期值的输入区域
- Input ControlInput Control应用于
支持输入和筛选的组合输入区域
- Input ControlInput Control应用于
接收和编辑单行文本的输入区域
- LabelLabel应用于
按钮的主要可读文本
- LabelLabel反向 · 应用于
说明复选项含义的文本
- LabelLabel应用于
说明输入内容含义的标签
- LabelLabel反向 · 应用于
说明单选项含义的文本
- LabelLabel反向 · 应用于
说明开关影响的文本
- Leading IconLeading Icon应用于
按钮前置的图标插槽
- ListboxListbox应用于
展示筛选后候选项的列表区域
- ListboxListbox应用于
承载可选择选项的列表区域
- Loading IndicatorLoading Indicator应用于
提交中或处理中显示的加载提示
- Loading IndicatorLoading Indicator应用于
异步加载候选项时的反馈
- Loading PlaceholderLoading Placeholder反向 · 应用于
图片尚未加载时的占位结构
- Main ContentMain Content反向 · 应用于
承载当前页面主要内容的区域
- Main NavigationMain Navigation反向 · 应用于
承载产品或网站主导航的区域
- Menu ItemMenu Item反向 · 应用于
菜单中的单个可执行命令或导航项
- Menu SeparatorMenu Separator反向 · 应用于
分隔菜单命令组的结构
- Menu TriggerMenu Trigger反向 · 应用于
打开菜单的按钮或操作入口
- MessageMessage反向 · 应用于
提供可理解上下文的消息正文
- MessageMessage反向 · 应用于
补充通知上下文和影响的正文
- MessageMessage反向 · 应用于
说明刚刚发生的结果或变化
- MetadataMetadata反向 · 应用于
呈现时间、作者、标签等辅助元信息
- Metric LabelMetric Label反向 · 应用于
说明指标含义和维度的标签
- Metric ValueMetric Value反向 · 应用于
呈现指标当前数值的主要文本
- Month NavigatorMonth Navigator反向 · 应用于
切换月份或年份的导航控制
- Nav HeaderNav Header反向 · 应用于
承载导航区域标题或品牌入口的头部
- Nav ItemNav Item反向 · 应用于
指向页面或执行导航动作的项目
- Next ActionNext Action反向 · 应用于
进入下一引导步骤的操作
- Next ActionNext Action反向 · 应用于
校验并进入下一流程步骤的操作
- Next ControlNext Control反向 · 应用于
浏览下一项内容的操作
- No Results MessageNo Results Message反向 · 应用于
在没有命中时解释结果并提供下一步
- OptionOption应用于
可被键盘或指针选择的候选项
- OptionOption应用于
选项集合中的单个可选项
- Option GroupOption Group应用于
按语义分组的一组相关选项
- Page TitlePage Title反向 · 应用于
表达当前页面主题的标题
- PaginationPagination反向 · 应用于
承载数据分页和页面大小控制的区域
- PlaceholderPlaceholder应用于
没有选择值时的提示文本
- Plan ActionPlan Action反向 · 应用于
选择或开始使用套餐的操作
- Plan NamePlan Name反向 · 应用于
说明套餐名称的标题
- PopoverPopover应用于
承载选项列表的浮层表面
- PrefixPrefix应用于
显示在输入值前的单位或上下文内容
- Presence IndicatorPresence Indicator反向 · 应用于
表达在线、离开或忙碌状态的标记
- Previous ControlPrevious Control反向 · 应用于
浏览上一项内容的操作
- PricePrice反向 · 应用于
呈现价格、周期和计费信息的区域
- Primary ActionPrimary Action反向 · 应用于
引导用户完成首要下一步的操作
- Primary ActionsPrimary Actions反向 · 应用于
承载页面主要任务操作的区域
- Progress BarProgress Bar反向 · 应用于
显示文件上传进度的反馈
- Progress BarProgress Bar反向 · 应用于
表示 toast 自动消失剩余时间的进度
- Progress IndicatorProgress Indicator反向 · 应用于
表达引导流程当前进度的反馈
- Progress TrackProgress Track反向 · 应用于
承载进度比例或阶段位置的轨道
- Progress ValueProgress Value反向 · 应用于
表达完成比例或具体数值的区域
- Query SummaryQuery Summary反向 · 应用于
说明当前查询条件和命中数量的信息
- QuoteQuote反向 · 应用于
承载用户或客户原话的引用文本
- Range PreviewRange Preview反向 · 应用于
预览日期范围起止和悬停结果的视觉结构
- RatingRating反向 · 应用于
表达评价等级或满意度的结构
- Recommended BadgeRecommended Badge反向 · 应用于
标记推荐或常用套餐的标识
- Remove ActionRemove Action反向 · 应用于
移除已选文件的操作
- Required IndicatorRequired Indicator反向 · 应用于
表达字段是否必填的标记
- Result ExcerptResult Excerpt反向 · 应用于
展示与查询相关的摘要片段
- Result ItemResult Item反向 · 应用于
承载一条搜索命中的结果单元
- Result MetadataResult Metadata反向 · 应用于
展示来源、时间、标签等辅助信息
- Result TitleResult Title反向 · 应用于
链接到结果目标的标题
- Retry ActionRetry Action反向 · 应用于
上传失败后重新尝试的操作
- Secondary ActionSecondary Action反向 · 应用于
提供导入、了解更多或其他替代路径
- Secondary ActionsSecondary Actions反向 · 应用于
承载更多或次要页面操作的区域
- Section LabelSection Label反向 · 应用于
说明导航分组语义的标签
- Selected ValueSelected Value应用于
显示当前选择结果的区域
- Selection ControlSelection Control反向 · 应用于
选择单行或多行数据的控制点
- ShortcutShortcut反向 · 应用于
提示菜单命令对应快捷键的文本
- Shortcut HintShortcut Hint应用于
提示可用键盘快捷键的辅助内容
- Side PanelSide Panel反向 · 应用于
承载辅助导航、筛选或上下文工具的区域
- Skip ActionSkip Action反向 · 应用于
允许用户跳过非必需步骤的操作
- Skip LinkSkip Link反向 · 应用于
帮助键盘用户跳过重复导航的入口
- SlideSlide反向 · 应用于
承载单个媒体或内容项的面板
- Sort ControlSort Control反向 · 应用于
改变表格排序字段和方向的控件
- Status IconStatus Icon反向 · 应用于
表达消息严重级别或类型的图标
- Status IconStatus Icon反向 · 应用于
表达消息级别或结果类型的图标
- Status IconStatus Icon反向 · 应用于
表达操作结果或通知类型的图标
- Status LabelStatus Label反向 · 应用于
说明当前进度状态的文本
- Status TextStatus Text反向 · 应用于
显示当前开关状态的文字
- Step ContentStep Content反向 · 应用于
承载当前步骤的表单或任务内容
- Step ItemStep Item反向 · 应用于
表达某一步的名称、状态和可访问入口
- Step ListStep List反向 · 应用于
呈现所有步骤及其状态的列表
- Success MessageSuccess Message反向 · 应用于
提交成功后的结果反馈区域
- SuffixSuffix应用于
显示在输入值后的单位或辅助操作
- Supporting TextSupporting Text反向 · 应用于
解释页面目标或上下文的辅助说明
- Supporting TextSupporting Text反向 · 应用于
补充截止时间、剩余量或下一步说明
- Tab ListTab List反向 · 应用于
承载同层内容切换项的列表
- Tab PanelTab Panel反向 · 应用于
承载当前导航项对应内容的面板
- Table CaptionTable Caption反向 · 应用于
说明表格内容和范围的标题
- Table CellTable Cell反向 · 应用于
呈现单个字段值或单元格操作的区域
- Table HeaderTable Header反向 · 应用于
呈现列名、排序和列级操作的表头
- Table RowTable Row反向 · 应用于
承载一条记录的横向单元格集合
- ThumbnailThumbnail反向 · 应用于
承载文章封面或缩略图的区域
- Time GridTime Grid反向 · 应用于
按时间刻度组织日程的网格
- TimestampTimestamp反向 · 应用于
说明通知发生时间的辅助信息
- TitleTitle反向 · 应用于
概括提示原因或结论的标题
- TitleTitle反向 · 应用于
概括当前空状态原因的标题
- TitleTitle反向 · 应用于
说明对话框当前任务的标题
- TitleTitle反向 · 应用于
概括通知核心信息的标题
- Today ControlToday Control反向 · 应用于
快速回到今天日期的操作
- Today MarkerToday Marker反向 · 应用于
指出当前日期或当前时间的位置
- Trailing IconTrailing Icon应用于
按钮后置的图标插槽
- Trend IndicatorTrend Indicator反向 · 应用于
表达指标上升、下降或持平的方向
- TriggerTrigger应用于
打开选项集合的触发控件
- Validation MessageValidation Message反向 · 应用于
呈现字段校验结果的文本
- View SwitcherView Switcher反向 · 应用于
在日、周、月等时间视图之间切换
- ViewportViewport反向 · 应用于
裁切并展示当前幻灯片的可视区域
- Welcome StepWelcome Step反向 · 应用于
说明产品价值和首次任务的欢迎步骤
- AccordionAccordion反向 · 属于
通过展开和收起控制一组附加内容可见性的组件。
- Article BodyArticle Body反向 · 属于
承载文章核心论证、说明或叙事的正文区块,包含标题层级、段落、媒体和辅助结构。
- Article CardArticle Card反向 · 属于
专门呈现文章标题、摘要、作者、主题或发布时间的内容卡片。
- ArticleArticle Page反向 · 属于
承载一篇完整内容的详情页面,组织标题、正文、辅助信息、相关内容和下一步行动。
- BadgeBadge应用于
以短标签标识状态、分类、属性或优先级的轻量组件。
- Blog IndexBlog Index反向 · 属于
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- BreadcrumbBreadcrumb反向 · 属于
显示当前页面在站点层级中位置的路径组件。
- Button / CTAButton & Call to Action反向 · 属于
触发操作、提交或导航的高优先级交互组件。
- CTA BandCall-to-action Band反向 · 属于
在页面中段或结尾集中呈现下一步行动的转化区块。
- CardCard反向 · 属于
将相关信息和操作组合成可扫描、可比较的内容容器。
- Contact / ConversionContact & Conversion Page反向 · 属于
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Content ListContent List Section反向 · 属于
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
- Docs / FAQDocs & FAQ反向 · 属于
回答使用问题、配置问题和常见疑问的文档与问答页面。
- Export ButtonExport Button反向 · 属于
触发下载、复制或生成文件的明确操作组件。
- Feature & ValueFeature & Value Section反向 · 属于
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Footer NavigationFooter Navigation反向 · 属于
页面底部承载补充导航、法律信息、联系入口和站点范围说明的区块。
- FormForm反向 · 属于
组织多个输入、校验、提交和结果反馈的任务组件。
- FAQFrequently Asked Questions反向 · 属于
以问题和答案组织常见疑问的内容区块,通常位于页面决策或帮助节点附近。
- Global NavigationGlobal Navigation反向 · 属于
跨页面稳定存在的主要导航,帮助用户理解站点范围并进入核心区域。
- HeaderHeader应用于
页面顶部承载品牌、全局导航和主要操作的容器组件。
- Hero / Page IntroHero & Page Introduction反向 · 属于
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- HomeHome Page反向 · 属于
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- InputInput应用于
收集单项文本、数值或格式化信息的基础表单控件。
- MetricMetric反向 · 属于
展示一个数值、单位、时间范围和解释的指标组件。
- NavigationNavigation应用于
提供一组有层级关系的页面或功能入口的组件。
- PaginationPagination反向 · 属于
将长列表分成多个可导航页面并显示当前位置的组件。
- Plan CardPlan Card反向 · 属于
呈现一个定价方案、适用对象、价格、限制和行动的比较组件。
- Pricing ComparisonPricing Comparison反向 · 属于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- PricingPricing Page反向 · 属于
解释方案、价格、差异和购买或联系路径的商业页面。
- Progress / Empty / ErrorProgress, Empty & Error States反向 · 属于
描述工具或页面在等待、没有结果、失败和可恢复状态下的反馈区块。
- Related ContentRelated Content反向 · 属于
根据当前页面主题、任务或用户下一步需求提供的相关内容区块。
- Related LinkRelated Link反向 · 属于
带有上下文说明、指向相关内容或下一步任务的链接组件。
- Save / ExportSave & Export反向 · 属于
允许用户保存、下载、复制或导出当前内容和工具结果的操作区块。
- Search & FilterSearch & Filter反向 · 属于
帮助用户在大量页面、内容或结果中缩小范围并找到目标对象的区块。
- Search FieldSearch Field反向 · 属于
让用户输入查询词并触发内容或数据检索的专用输入组件。
- TabsTabs反向 · 属于
在同一上下文中切换互斥内容面板的组件。
- TestimonialTestimonial反向 · 属于
呈现用户评价、身份和上下文的信任证明组件。
- ToggleToggle反向 · 属于
表示并即时切换一个二元设置状态的控件。
- Tool InputTool Input反向 · 属于
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- ToolTool Page反向 · 属于
让用户输入信息、等待处理并获得可操作结果的工具型页面。
- Tool ResultTool Result反向 · 属于
工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。
- Trust / ProofTrust & Proof反向 · 属于
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- 通用 Web 设计框架Universal Web Design反向 · 属于
一个不绑定真实网站的 Web 界面知识框架,用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。