Web Interface Design

承载一篇完整内容的详情页面，组织标题、正文、辅助信息、相关内容和下一步行动。

聚合文章、主题和筛选入口的内容列表页，帮助用户发现和选择下一篇内容。

承接用户咨询、注册、预约或其他高意图行动的转化页面。

回答使用问题、配置问题和常见疑问的文档与问答页面。

面向首次访问和回访用户的站点入口页面，解释站点价值并提供主要探索路径。

解释方案、价格、差异和购买或联系路径的商业页面。

让用户输入信息、等待处理并获得可操作结果的工具型页面。

承载文章核心论证、说明或叙事的正文区块，包含标题层级、段落、媒体和辅助结构。

在页面中段或结尾集中呈现下一步行动的转化区块。

以列表、卡片或摘要集合呈现一组相关内容的页面区块。

把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。

页面底部承载补充导航、法律信息、联系入口和站点范围说明的区块。

以问题和答案组织常见疑问的内容区块，通常位于页面决策或帮助节点附近。

跨页面稳定存在的主要导航，帮助用户理解站点范围并进入核心区域。

页面开头用于确认页面主题、价值和主要行动的介绍区块。

并列或分层展示方案、价格、限制和适用对象的商业比较区块。

按一致维度比较产品、竞品或替代方案，并说明差异、限制、证据和适用对象的页面区块。

描述工具或页面在等待、没有结果、失败和可恢复状态下的反馈区块。

根据当前页面主题、任务或用户下一步需求提供的相关内容区块。

允许用户保存、下载、复制或导出当前内容和工具结果的操作区块。

帮助用户在大量页面、内容或结果中缩小范围并找到目标对象的区块。

通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。

工具型页面中收集用户输入、设置参数和触发处理的输入区块。

工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。

公开说明无障碍承诺、支持范围、已知限制和反馈渠道。

让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。

在页面顶部或关键上下文中告知维护、政策、活动或高优先级变化。

用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。

引导用户下载移动应用、桌面客户端或浏览器扩展，并说明平台兼容性。

承载文章或长内容的标题层级、正文、媒体、引用、代码和结构化信息。

说明作者身份、专业背景、联系方式和相关文章，建立内容责任主体。

展示奖项、认证、评测或资质信息，并提供来源和有效期上下文。

对比变化前后的视觉或结果，帮助用户理解产品、服务或过程价值。

用短标题、解释和视觉线索把功能转译成用户收益。

显示当前页面在信息架构中的位置，并提供返回上级的路径。

用案例摘要连接具体客户、问题、过程和结果，支持进一步阅读。

按版本和日期说明产品变化、影响、迁移和后续行动。

围绕实时或异步消息组织对话、参与者、上下文和输入动作。

总结商品、价格、地址、支付和风险信息，支持用户完成交易。

允许用户在内容对象下阅读、发表和回复讨论，并处理审核和空状态。

连续呈现社区成员、产品活动或协作事件，支持参与、筛选和回到对象。

按维度对比产品、方案、服务或决策选项，帮助用户减少记忆和来回跳转。

让用户提出问题、请求支持或找到合适的联系渠道。

以列表、卡片或网格连续呈现一组可浏览、筛选或继续阅读的内容。

解释 Cookie、追踪和隐私选择，并让用户能接受、拒绝或细化设置。

让用户查看、分组和修改非必要 Cookie、追踪或隐私权限。

在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。

以客户、合作方或使用组织的标志形成快速可扫读的信任线索。

表达数据更新时间、来源、有效期和刷新动作，避免用户误读过期内容。

收集最少需求并预约产品、服务或销售演示。

将组织、资源、产品、人员或地点按筛选和排序组织成目录。

说明目标、进展和资金用途，并提供低摩擦的捐赠或支持入口。

提供活动信息、报名字段、名额、费用和确认提醒。

回答高频疑问，减少决策、使用或转化过程中的不确定性。

把产品能力、用户收益和证据组织成可扫描的价值说明。

在页面末端提供次级导航、法律信息、联系入口和补充行动。

在表单或任务提交后确认结果、解释后续处理并提供下一步入口。

跨页面提供品牌、一级目的地、账户和全局操作的稳定入口。

用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。

用少量步骤说明产品、服务或工具从输入到结果的工作方式。

展示可连接的平台、技术伙伴或生态服务，降低兼容性和迁移疑虑。

让用户输入假设并即时获得可解释的估算、比较或结果。

让候选人搜索、筛选、比较职位并进入申请流程。

收集完成转化所需的最少信息，并提供明确的价值交换和提交反馈。

提供地点、路线、营业时间和区域上下文，支持地图之外的可访问文本路径。

提供登录、注册、身份恢复或切换账户的入口与恢复路径。

表达积分、等级、权益和兑换路径，帮助用户理解长期价值。

说明服务状态、维护时间、影响范围、进展和恢复后的验证方式。

用视频、动图或交互预览解释产品如何工作及其关键体验。

以低承诺方式收集邮箱并持续提供内容、产品或活动更新。

按时间、类型和已读状态聚合系统、产品或业务更新。

在页面上下文中说明当前位置、标题、摘要和主要动作。

将较大的结果集合拆分成可控制的批次，并让用户继续浏览。

按地区、能力、行业或集成方式浏览合作伙伴和服务提供方。

展示媒体报道、行业引用或第三方提及，补充外部可信度。

把方案、价格、权益、限制和选择动作放在同一比较结构中。

将复杂任务拆解为有顺序、有状态和有完成标准的步骤。

用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。

按选项、约束和价格反馈组合或定制一个产品、方案或服务。

在内容、任务或数据暂不可用时解释发生了什么，并提供等待、恢复或替代路径。

说明邀请机制、奖励和状态，让用户能安全分享并追踪邀请结果。

在当前内容之后提供语义相关、下一步阅读或相邻任务的入口。

提供可下载、可保存或可继续阅读的资源，并说明格式、价值和限制。

聚合评分、评论量、分布和代表性评论，让评价证据可比较。

让用户保存、下载、复制、导出或分享当前结果与内容。

通过连续截图、放大预览和说明展示界面、功能或视觉成果。

帮助用户在内容集合、工具数据或资源目录中定位目标。

在用户输入过程中提供建议、命令、历史和可直接执行的结果。

解释安全、隐私、合规、数据处理和认证信息，支持高风险决策。

让用户把页面、结果、资源或邀请以适合目标渠道的方式分享出去。

嵌入来自社交平台的帖子、视频或讨论，同时控制隐私、性能和失败退化。

把社交平台上的内容、作者、时间和外链以受控方式嵌入页面。

通过用户证言、评分、数量、客户标志或外部评价降低不确定性。

让用户把当前页面或内容分享到社交平台、复制链接或发送给他人。

表达服务、产品、库存、功能或内容当前是否可用及其限制。

让用户按位置、服务或库存查找最近的门店、机构或服务点。

以问卷、评分或开放反馈收集用户意见，并说明提交后的处理方式。

以成员卡片展示团队角色、专长、身份和联系/了解更多入口。

以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。

按时间或阶段表达项目、组织、产品或用户旅程的关键节点。

让用户输入、配置或上传工具任务所需的信息。

呈现工具计算、转换、生成或分析后的结果、解释和下一步动作。

呈现安全、认证、付款、隐私或平台资质等降低风险的标识。

以用户生成图片、视频或帖子形成参与感、真实感和社区证明。

用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。

用短视频展示产品、服务或操作流程，并提供字幕、摘要和替代路径。

在产品或活动尚未开放时收集兴趣、说明预期并提供状态更新。

呈现活动、直播或会议的时间、议程、嘉宾和参与入口。

将语义、键盘、对比度、响应速度和稳定性纳入 Web UI 基础。

定义可复用组件的结构、状态、行为和组合方式。

把内容结构、搜索意图、内部链接和页面可读性纳入 UI 设计。

设计从理解价值到提交、注册、购买或联系的连续路径。

在不同视口和设备上组织容器、网格、间距和内容优先级。

通过全局导航、局部导航、面包屑和当前状态帮助用户定位。

组织 Web 页面、内容层级和任务路径，让用户与搜索引擎都能理解页面关系。

把页面拆成具有明确任务和信息职责的区块。

处理 Web 页面和工具在加载、空、错误、成功和进度中的体验。

定义边界、分隔和层级的线性视觉元素。

表达容器和控件边界的圆角规则。

提供色板与颜色角色的基础说明，不作为业务组件直接消费。

限制内容宽度、内边距和水平对齐的容器原语。

定义阴影、层级和 z-index 的基础尺度。

用于一维对齐、分配空间和响应式排列的布局原语。

以可见方式标识当前键盘或辅助技术焦点。

定义容器、列、间隙和阅读宽度等布局基础。

定义动效时长、缓动、位移和 reduced motion 基础规则。

在布局中提供可控空白和剩余空间分配的布局原语。

提供空间尺度和布局间距的基础说明。

沿单一轴组织子元素并维护一致间距的布局原语。

承载内容并表达背景、层级或交互边界的表面原语。

定义字体家族、字号、字重、行高和字距的基础尺度。

Anchor 如何在界面中被理解、操作或组合？

Autocomplete 如何在界面中被理解、操作或组合？

Avatar 如何在界面中被理解、操作或组合？

Backdrop 如何在界面中被理解、操作或组合？

显示轻量分类、状态或数量标记。

触发动作、提交选择或打开流程。

Checkbox 如何在界面中被理解、操作或组合？

Chip 如何在界面中被理解、操作或组合？

Code Input 如何在界面中被理解、操作或组合？

Color Input 如何在界面中被理解、操作或组合？

Combobox 如何在界面中被理解、操作或组合？

Date Input 如何在界面中被理解、操作或组合？

分隔内容区域，表达结构关系而非装饰。

Error Text 如何在界面中被理解、操作或组合？

触发下载、复制或生成文件的明确操作组件。

File Icon 如何在界面中被理解、操作或组合？

File Input 如何在界面中被理解、操作或组合？

Heading 如何在界面中被理解、操作或组合？

表达操作、对象、状态或方向的视觉符号。

Icon Button 如何在界面中被理解、操作或组合？

Image 如何在界面中被理解、操作或组合？

接收用户输入，并提供焦点、错误和只读反馈。

Keyboard Key 如何在界面中被理解、操作或组合？

Label 如何在界面中被理解、操作或组合？

Link 如何在界面中被理解、操作或组合？

Link Button 如何在界面中被理解、操作或组合？

List Item 如何在界面中被理解、操作或组合？

Loading Indicator 如何在界面中被理解、操作或组合？

Menu Button 如何在界面中被理解、操作或组合？

Menu Item 如何在界面中被理解、操作或组合？

展示一个数值、单位、时间范围和解释的指标组件。

Nav Link 如何在界面中被理解、操作或组合？

Number Input 如何在界面中被理解、操作或组合？

OTP Input 如何在界面中被理解、操作或组合？

将长列表分成多个可导航页面并显示当前位置的组件。

Pagination Item 如何在界面中被理解、操作或组合？

Password Input 如何在界面中被理解、操作或组合？

Progress Bar 如何在界面中被理解、操作或组合？

Progress Ring 如何在界面中被理解、操作或组合？

Radio 如何在界面中被理解、操作或组合？

Range Slider 如何在界面中被理解、操作或组合？

Rating 如何在界面中被理解、操作或组合？

带有上下文说明、指向相关内容或下一步任务的链接组件。

Scrim 如何在界面中被理解、操作或组合？

Searchbox 如何在界面中被理解、操作或组合？

Select 如何在界面中被理解、操作或组合？

Skeleton 如何在界面中被理解、操作或组合？

Slider 如何在界面中被理解、操作或组合？

Spinner 如何在界面中被理解、操作或组合？

Split Button 如何在界面中被理解、操作或组合？

Status Indicator 如何在界面中被理解、操作或组合？

Stepper Item 如何在界面中被理解、操作或组合？

Success Indicator 如何在界面中被理解、操作或组合？

Switch 如何在界面中被理解、操作或组合？

Tab 如何在界面中被理解、操作或组合？

Table Cell 如何在界面中被理解、操作或组合？

Tag 如何在界面中被理解、操作或组合？

Tag Input 如何在界面中被理解、操作或组合？

Text 如何在界面中被理解、操作或组合？

Textarea 如何在界面中被理解、操作或组合？

Thumbnail 如何在界面中被理解、操作或组合？

Time Input 如何在界面中被理解、操作或组合？

表示并即时切换一个二元设置状态的控件。

Toggle Button 如何在界面中被理解、操作或组合？

Tree Item 如何在界面中被理解、操作或组合？

Validation Message 如何在界面中被理解、操作或组合？

Video 如何在界面中被理解、操作或组合？

Warning Indicator 如何在界面中被理解、操作或组合？

通过展开和收起控制一组附加内容可见性的组件。

按时间和主体展示对象活动、变更或协作记录

在当前上下文中提示重要信息、风险或结果的结构

专门呈现文章标题、摘要、作者、主题或发布时间的内容卡片。

并列或堆叠展示多个参与者身份的结构

在页面或区域顶部持续展示重要公告或任务提示

显示当前页面在站点层级中位置的路径组件。

把相关动作组织成有优先级和间距关系的操作组。

按日历网格呈现日期、事件或排期的结构

将相关信息和操作组合成可扫描、可比较的内容容器。

以一致布局组织多个卡片并表达集合关系的结构

组织卡片标题、说明和局部操作。

在有限空间内浏览一组媒体或内容项的结构

组织多个可多选选项并呈现组级语义的结构

编辑代码、配置或结构化文本的编辑器

展示可复制、可高亮的代码或命令片段

在任务上下文中集中呈现主要命令和更多操作

通过键盘或搜索快速执行命令的菜单

在不可逆或有风险操作前请求明确确认

在同一区域内切换不同内容视图或数据维度

在对象或区域上下文中提供操作集合的菜单

支持列、行、编辑、选择和数据操作的高密度表格

展示结构化数据并支持排序、筛选和行级操作。

通过输入和日历面板选择日期的组合控件

选择起始日期和结束日期的组合控件

以标签和值的对应关系呈现对象属性摘要

在当前任务上方承载聚焦任务或补充信息的对话框

控制一段补充内容展开与收起的交互结构

从边缘滑入并承载辅助任务或详情的面板

选择一个选项并显示可操作菜单的组合控件

在没有内容、没有结果或首次使用时引导下一步

集中列出表单或页面错误并链接到问题位置

将语义相关的表单控件组织成一个输入组

在上传或文件管理场景中预览文件内容和元信息

选择、上传、校验并管理文件的组合控件

在面板中组织复杂筛选条件、应用和清除操作

承载辅助导航、法律信息和次要操作的页面底部结构

组织多个输入、校验、提交和结果反馈的任务组件。

把 Label、Input、辅助说明和错误反馈组合成可理解的输入单元。

提供产品身份、主导航和全局动作入口。

悬停或聚焦对象时展示对象摘要或预览的浮层

浏览多张图片并支持缩略图、放大或切换的结构

以统一节奏呈现同类对象集合的列表结构

承载可选择选项集合的列表弹层或列表区域

以媒体和文字并置方式呈现一个内容对象

承载一组可执行命令或导航项的菜单

在内容流中嵌入可理解、可操作的消息反馈

成组展示关键指标、趋势和比较信息的结构

承载需要聚焦处理的任务、确认或补充内容。

支持从选项集合中选择多个值的组合控件

提供层级化页面路径和当前区域反馈。

以可关闭或可操作的方式呈现系统通知

集中浏览、筛选和处理多条系统通知的结构

组织页面标题、上下文、主要操作和辅助信息的页头

组合分页信息、页码、前后翻页和页面大小控制

呈现一个定价方案、适用对象、价格、限制和行动的比较组件。

锚定在触发元素附近并显示补充内容或操作的浮层

组合进度值、阶段、状态和补充说明的反馈结构

组织一组互斥选项并管理组级选择的结构

展示搜索或筛选结果并支持排序、分页和批量操作

编辑带有格式、结构和嵌入内容的富文本区域

组合搜索、筛选、排序和清除操作的工具条

提供搜索输入、提交和清除操作。

展示搜索命中、摘要、筛选和空结果反馈的结构

以底部或侧边表面承载移动端或响应式任务的面板

在侧栏中组织分层页面导航的结构

承载辅助内容、筛选或上下文工具的侧边区域

在页面底部提供短暂反馈和可选撤销操作

在同一视图中并列展示列表与详情或两个相关区域

展示多步骤流程进度并支持步骤切换的结构

承载表格级搜索、筛选、批量操作和视图设置

在多个同层内容面板之间切换的导航结构

在同一上下文中切换互斥内容面板的组件。

呈现用户评价、身份和上下文的信任证明组件。

以块状容器承载摘要信息和可选操作的结构

通过输入和候选列表选择时间的组合控件

按时间顺序展示事件、活动或进度的结构

以短暂浮层反馈刚刚发生的操作结果

将一组相关操作集中到同一操作条中的结构

在工具栏中按功能聚合相关操作的结构

解释控件或图标含义的短文本提示

从层级选项树中选择一个或多个值的组合控件

以表格列展示层级数据并支持展开的结构

展示可展开层级节点并支持选择或导航的结构

组织长文阅读的标题、导语、正文、媒体和相关内容。

以日、周、月等时间视图组织事件和排期的工作区

组织高密度信息、指标、筛选器和数据视图。

按列组织对象并支持拖拽、状态流转和批量操作的工作区

收集身份凭证并处理登录、错误和辅助入口的流程结构

帮助新用户完成初始化、偏好设置和首次成功任务

定义页面级容器、导航、主体和页脚的组合骨架。

展示并编辑当前对象属性、状态和上下文操作

根据屏幕和任务上下文调整导航、内容和辅助栏的应用壳

组织一组可保存、校验和恢复的设置项

收集注册信息并处理校验、同意和完成反馈的流程结构

把复杂任务拆成连续步骤并管理前进后退的流程模式

承载解决问题或继续任务的操作

查看、重试或处理通知的操作

提供撤销、查看或重试的操作

承载提交、取消和辅助操作的操作行

在列中创建新工作项的操作

为非视觉用户提供图片替代文本

链接到文章正文的标题

说明引用者身份和组织的元信息

呈现作者、时间和阅读信息的元数据

呈现引用者头像或品牌标识

呈现用户或实体头像图片的区域

返回上一流程步骤的操作

隔离背景内容并表达模态层级的遮罩

承载一个工作状态或分类下的卡片集合

路径导航中的单级位置

说明当前页面在信息架构中的位置

承载日期范围和导航控制的头部

承载可视日期网格的浮层或面板

解释图片内容或来源的说明文本

承载一个可拖拽工作项的卡片

卡片级主要操作或可点击入口

承载卡片主体摘要或内容的区域

提供可感知拖拽的操作入口

承载次要信息和操作的底部区域

呈现卡片标题、状态和辅助信息的头部

承载图片、视频或图表的媒体区域

说明文章类别或主题的标签

显示当前字符数与限制的计数器

清空当前输入值的操作

清除当前选择的操作

关闭可 dismiss 提示的操作

关闭或退出对话框的操作

手动关闭短暂反馈的操作

展开或收起导航分支的控制

说明列名称、数量和列级操作的头部

提供列隐藏、排序和筛选的菜单

说明与目标、上期或基准的比较

完成流程并进入结果状态的操作

完成初始化后的成功反馈和下一步

表达勾选、未勾选或混合状态的控制点

接收字段值的实际控件

表达互斥选择状态的控制点

表达开关开启或关闭状态的控制点

表达一个日期及其选择状态的单元格

表达日历中的一个日期单元

补充选择影响或使用条件的文本

说明为什么为空以及用户可以做什么

解释任务背景或操作后果的说明

补充选择条件的辅助文本

解释开启或关闭后果的辅助文本

承载对话任务主要内容的主体区域

承载确认、取消和辅助操作的底部区域

承载标题、说明和关闭操作的头部

分隔不同导航分组的视觉结构

接收拖放或点击选择文件的区域

指出选项校验问题的错误文本

指出校验失败原因的错误文本

指出选项校验问题的错误文本

集中呈现表单错误并链接到字段的位置

呈现一个事件或排期的条目

展示文章摘要的文本

无法获取身份图片时的替代内容

资源加载失败或缺失时的替代呈现

列出套餐包含能力的列表

组织语义相关字段的输入组

说明字段含义的标签

呈现单个已选或已上传文件的条目

显示文件名称和类型的文本

承载表格筛选和搜索的工具区域

展示已应用筛选及清除入口

承载辅助链接、版权和法律信息的页脚

组合标签、控件、帮助和错误的字段结构

承载表单标题、说明和上下文的页头区域

承载品牌、全局入口和账户操作的页头

呈现单个数据值或编辑控件的单元格

呈现列名和列级操作的表头区域

承载一条数据记录的行结构

解释填写要求的辅助文本

解释输入要求或格式的辅助文本

表达没有内容或没有结果的视觉说明

承载实际图片资源的内容区域

表达当前项和总项数的分页指示器

没有图片时显示的姓名首字母

在单元格或行内编辑数据的控件

接收或显示日期值的输入区域

支持输入和筛选的组合输入区域

接收和编辑单行文本的输入区域

按钮的主要可读文本

说明复选项含义的文本

说明输入内容含义的标签

说明单选项含义的文本

说明开关影响的文本

按钮前置的图标插槽

展示筛选后候选项的列表区域

承载可选择选项的列表区域

提交中或处理中显示的加载提示

异步加载候选项时的反馈

图片尚未加载时的占位结构

承载当前页面主要内容的区域

承载产品或网站主导航的区域

菜单中的单个可执行命令或导航项

分隔菜单命令组的结构

打开菜单的按钮或操作入口

提供可理解上下文的消息正文

补充通知上下文和影响的正文

说明刚刚发生的结果或变化

呈现时间、作者、标签等辅助元信息

说明指标含义和维度的标签

呈现指标当前数值的主要文本

切换月份或年份的导航控制

承载导航区域标题或品牌入口的头部

指向页面或执行导航动作的项目

进入下一引导步骤的操作

校验并进入下一流程步骤的操作

浏览下一项内容的操作

在没有命中时解释结果并提供下一步

可被键盘或指针选择的候选项

选项集合中的单个可选项

按语义分组的一组相关选项

表达当前页面主题的标题

承载数据分页和页面大小控制的区域

没有选择值时的提示文本

选择或开始使用套餐的操作

说明套餐名称的标题

承载选项列表的浮层表面

显示在输入值前的单位或上下文内容

表达在线、离开或忙碌状态的标记

浏览上一项内容的操作

呈现价格、周期和计费信息的区域

引导用户完成首要下一步的操作

承载页面主要任务操作的区域

显示文件上传进度的反馈

表示 toast 自动消失剩余时间的进度

表达引导流程当前进度的反馈

承载进度比例或阶段位置的轨道

表达完成比例或具体数值的区域

说明当前查询条件和命中数量的信息

承载用户或客户原话的引用文本

预览日期范围起止和悬停结果的视觉结构

表达评价等级或满意度的结构

标记推荐或常用套餐的标识

移除已选文件的操作

表达字段是否必填的标记

展示与查询相关的摘要片段

承载一条搜索命中的结果单元

展示来源、时间、标签等辅助信息

链接到结果目标的标题

上传失败后重新尝试的操作

提供导入、了解更多或其他替代路径

承载更多或次要页面操作的区域

说明导航分组语义的标签

显示当前选择结果的区域

选择单行或多行数据的控制点

提示菜单命令对应快捷键的文本

提示可用键盘快捷键的辅助内容

承载辅助导航、筛选或上下文工具的区域

允许用户跳过非必需步骤的操作

帮助键盘用户跳过重复导航的入口

承载单个媒体或内容项的面板

改变表格排序字段和方向的控件

表达消息严重级别或类型的图标

表达消息级别或结果类型的图标

表达操作结果或通知类型的图标

说明当前进度状态的文本

显示当前开关状态的文字

承载当前步骤的表单或任务内容

表达某一步的名称、状态和可访问入口

呈现所有步骤及其状态的列表

提交成功后的结果反馈区域

显示在输入值后的单位或辅助操作

解释页面目标或上下文的辅助说明

补充截止时间、剩余量或下一步说明

承载同层内容切换项的列表

承载当前导航项对应内容的面板

说明表格内容和范围的标题

呈现单个字段值或单元格操作的区域

呈现列名、排序和列级操作的表头

承载一条记录的横向单元格集合

承载文章封面或缩略图的区域

按时间刻度组织日程的网格

说明通知发生时间的辅助信息

概括提示原因或结论的标题

概括当前空状态原因的标题

说明对话框当前任务的标题

概括通知核心信息的标题

快速回到今天日期的操作

指出当前日期或当前时间的位置

按钮后置的图标插槽

表达指标上升、下降或持平的方向

打开选项集合的触发控件

呈现字段校验结果的文本

在日、周、月等时间视图之间切换

裁切并展示当前幻灯片的可视区域

说明产品价值和首次任务的欢迎步骤

通过展开和收起控制一组附加内容可见性的组件。

承载文章核心论证、说明或叙事的正文区块，包含标题层级、段落、媒体和辅助结构。

专门呈现文章标题、摘要、作者、主题或发布时间的内容卡片。

承载一篇完整内容的详情页面，组织标题、正文、辅助信息、相关内容和下一步行动。

以短标签标识状态、分类、属性或优先级的轻量组件。

聚合文章、主题和筛选入口的内容列表页，帮助用户发现和选择下一篇内容。

显示当前页面在站点层级中位置的路径组件。

触发操作、提交或导航的高优先级交互组件。

在页面中段或结尾集中呈现下一步行动的转化区块。

将相关信息和操作组合成可扫描、可比较的内容容器。

承接用户咨询、注册、预约或其他高意图行动的转化页面。

以列表、卡片或摘要集合呈现一组相关内容的页面区块。

回答使用问题、配置问题和常见疑问的文档与问答页面。

触发下载、复制或生成文件的明确操作组件。

把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。

页面底部承载补充导航、法律信息、联系入口和站点范围说明的区块。

组织多个输入、校验、提交和结果反馈的任务组件。

以问题和答案组织常见疑问的内容区块，通常位于页面决策或帮助节点附近。

跨页面稳定存在的主要导航，帮助用户理解站点范围并进入核心区域。

页面顶部承载品牌、全局导航和主要操作的容器组件。

页面开头用于确认页面主题、价值和主要行动的介绍区块。

面向首次访问和回访用户的站点入口页面，解释站点价值并提供主要探索路径。

收集单项文本、数值或格式化信息的基础表单控件。

展示一个数值、单位、时间范围和解释的指标组件。

提供一组有层级关系的页面或功能入口的组件。

将长列表分成多个可导航页面并显示当前位置的组件。

呈现一个定价方案、适用对象、价格、限制和行动的比较组件。

并列或分层展示方案、价格、限制和适用对象的商业比较区块。

解释方案、价格、差异和购买或联系路径的商业页面。

描述工具或页面在等待、没有结果、失败和可恢复状态下的反馈区块。

根据当前页面主题、任务或用户下一步需求提供的相关内容区块。

带有上下文说明、指向相关内容或下一步任务的链接组件。

允许用户保存、下载、复制或导出当前内容和工具结果的操作区块。

帮助用户在大量页面、内容或结果中缩小范围并找到目标对象的区块。

让用户输入查询词并触发内容或数据检索的专用输入组件。

在同一上下文中切换互斥内容面板的组件。

呈现用户评价、身份和上下文的信任证明组件。

表示并即时切换一个二元设置状态的控件。

工具型页面中收集用户输入、设置参数和触发处理的输入区块。

让用户输入信息、等待处理并获得可操作结果的工具型页面。

工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。

通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。

一个不绑定真实网站的 Web 界面知识框架，用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。