计数器
Counter
用于展示或调整数量的组件，可以是只读数字，也可以带增加、减少和重置操作。
UI 设计术语实验室
从“这个效果叫什么”开始，直接操作术语预览、复制准确表达，再进入 333 个完整案例验证设计方法。
270 个交互术语 · 23 个精选案例映射 · 机器可读术语 API
计数器
动画计数器
Animated Counter
让数字从起始值过渡到目标值的动效组件，常用于数据看板、首屏指标和成就反馈。
表情选择器
Emoji Picker
用于搜索、分类浏览和插入表情的选择面板，常见于聊天、评论、反馈和标签表达场景。
产品引导
Product Tour
通过步骤气泡、高亮区域和前后导航，引导用户认识关键功能或完成首次任务。
富文本编辑器
Rich Text Editor
支持加粗、斜体、链接、列表、标题、撤销等格式化能力的内容输入组件。
颜色选择器
Color Picker
用于选择、预览和输入颜色值的组件，常见于主题配置、图表设置和品牌样式编辑。
自定义滚动条
Custom Scrollbar
为可滚动区域设置轨道、滑块、宽度和颜色的视觉样式，同时保持可用性和可访问性。
滚动条滑块
Scrollbar Thumb
滚动条中可拖动的滑块部分，用来表达当前位置、可滚动长度和拖拽状态。
代码编辑器
Code Editor
用于编写或预览代码的编辑区域，常包含行号、语法高亮、文件标签、错误提示和快捷键。
查询构建器
Query Builder
通过字段、操作符和值组合复杂查询条件的组件，常用于高级筛选、报表和自动化规则。
页眉
Header
页面顶部的区域，通常承载品牌标识、主导航和关键行动按钮，是用户判断站点结构的第一入口。
页脚
Footer
页面底部的信息区，通常包含版权、站点地图、政策链接、社交入口和公司信息。
侧边栏
Sidebar
主内容旁边的垂直辅助列，常用于目录导航、筛选条件、相关内容或次要操作。
区块
Section
页面中的主题内容单元，用来把首屏、功能、案例、定价等内容拆成清晰的阅读节奏。
Hero 区块
Hero Section
页面打开后最先看到的核心区域，负责用标题、说明、主行动按钮和视觉元素快速交代页面价值。
容器
Container
限制内容最大宽度并保持左右留白的布局结构，让大屏不松散、小屏不拥挤。
CTA（行动号召）
CTA (Call To Action)
引导用户完成关键动作的按钮或区块，例如注册、购买、预约、下载或继续了解。
导航栏
Navbar
帮助用户理解站点结构并跳转主要页面的导航区域，通常包含品牌、主菜单和关键操作入口。
汉堡菜单
Hamburger Menu
移动端常见的三横线菜单按钮，点击后展开隐藏导航或侧边菜单。
面包屑
Breadcrumb
展示当前页面在站点层级中的位置，帮助用户返回上级分类或理解内容归属。
分页
Pagination
把大量列表内容拆成多个页面，并提供上一页、下一页、页码和当前页状态。
选项卡
Tab
在同一块区域内切换几组并列内容，让用户不用离开当前页面就能比较或切换视图。
锚点链接
Anchor Link
点击后跳到同一页面内某个区块的链接，常用于长页面目录、落地页导航和文档页。
按钮
Button
触发具体操作的控件，例如保存、发布、删除、打开弹窗或提交表单。
卡片
Card
把一组相关信息收进独立容器，常用于文章、产品、案例、成员和功能入口。
模态框
Modal / Dialog
覆盖在当前页面之上的对话层，用于确认、编辑、查看详情或打断式关键操作。
下拉菜单
Dropdown
点击触发后展开一组选项或操作，适合收纳低频动作、排序方式或导航子菜单。
手风琴
Accordion
通过展开和收起标题下的内容，减少页面初始信息量，常用于 FAQ、设置项和说明列表。
工具提示
Tooltip
在悬停或聚焦时出现的短提示，用来解释图标、按钮或字段含义。
轻提示（Toast）
Toast / Snackbar
短暂出现的非阻塞反馈，用来告诉用户操作已成功、失败或正在处理中。
徽章
Badge
小尺寸状态或计数标签，用来标记新内容、数量、等级、类别或处理状态。
头像
Avatar
代表用户、成员或账号的圆形图像，也可以用姓名缩写作为缺省状态。
标签
Tag / Chip
用于标记类别、主题或关键词的小型文本块，帮助用户筛选和理解内容属性。
胶囊
Pill / Capsule
一种两端完全圆润的界面形状，常用于按钮、筛选项、标签、状态和分段导航，让控件更轻、更柔和、更容易被识别为可点击。
进度条
Progress Bar
用条形或环形展示任务进展、上传进度、阅读进度或完成比例。
加载指示器
Spinner / Loading
用于表示系统正在处理的短等待指示器，通常是转圈或小型进度反馈。长时间加载更适合骨架屏或加载状态。
轮播图
Carousel
在有限空间内横向切换多张图片或卡片，常用于案例、推荐内容和产品展示。
分隔线
Divider / Separator
用细线或留白把相邻内容区分开，帮助用户理解分组和层级。
骨架屏
Skeleton Screen
加载内容前先展示大致结构的占位块，让用户感知页面正在逐步出现。
输入框
Input / Text Field
用于输入单行文本的表单控件，常见于姓名、邮箱、搜索、标题和短答案。
文本域
Textarea
用于输入多行文本的表单控件，适合留言、简介、备注、评论和需求描述。
复选框
Checkbox
用于开启/关闭某个选项，或从多个选项中选择任意多个。
单选按钮
Radio Button
用于在一组选项中只选择一个，适合套餐、性别、配送方式、优先级等互斥选择。
选择器
Select
用于从预设选项中选择一个或多个值，适合国家、分类、状态和数量较少的固定选项。
开关
Toggle Switch
用于立即切换某个二元设置，例如深色模式、通知开关、公开状态或自动保存。
表单标签
Label
说明输入字段含义的文本，通常位于控件上方或左侧，是表单可读性和无障碍的基础。
占位文本
Placeholder
输入框为空时显示的示例或格式提示，用户开始输入后通常会消失。
表单校验
Validation
检查输入是否符合要求，并在缺失、格式错误或超出限制时给出明确反馈。
悬停
Hover
鼠标指针停在元素上时出现的状态变化，常用于按钮、卡片、链接和菜单项。
点击 / 轻触
Click / Tap
用户用鼠标或触摸触发操作的基础交互，常用于按钮、链接、卡片和菜单项。
滚动
Scroll
页面或容器在垂直、水平轴上的移动行为，也可以触发吸顶、进入动画、目录高亮等效果。
过渡
Transition
让颜色、尺寸、位置、透明度等状态变化变得平滑，常用于 hover、focus、展开收起和主题切换。
动画
Animation
比 transition 更完整的运动序列，可以包含淡入、滑入、弹跳、旋转、循环和分阶段变化。
关键帧
Keyframes
把动画拆成几个时间点上的状态，比如 0% 开始、50% 中间、100% 结束，适合循环、弹跳、呼吸和加载等完整运动。
缓动
Easing
控制动画速度如何变化：什么时候快、什么时候慢，决定同样时长下的手感差异。
动效时长
Motion Duration
动效时长决定动作给人的速度感。同一个位移，120ms 像快速反馈，220ms 像自然过渡，500ms 更像页面入场或引导。
错峰动画
Stagger
让一组元素按短间隔依次变化，用节奏降低同时变化带来的拥挤感。它是通用节奏概念，不限于入场。
入场动画
Entrance Animation
新内容第一次出现时的轻量动效，用来把用户视线带到正确位置。重点是落点明确，而不是动作夸张。
离场动画
Exit Animation
元素关闭或离开页面时的短动效。它的重点不是表演，而是让用户确认“这个东西正在被移除”。
加载动画
Loading Animation
数据或资源还没准备好时的等待反馈。短等待可以用小 spinner，中等待适合步骤或进度；AI 检索或生成可用思考提示，但不能伪装成完成进度；长等待需要骨架、说明和重试。
滚动动画
Scroll Animation
随着滚动位置触发的界面变化，常用于区块进入视口、目录高亮、阅读进度和轻量视差。
微交互
Micro-interaction
微交互是操作之后的一点小反馈，比如复制后变成已复制、保存后出现确认。它让用户知道刚才的动作成功了。
减少动效
Reduced Motion
当用户开启减少动态效果时，界面仍然要有反馈，但要减少大幅位移、闪烁和循环动画，改用更稳定的状态变化。
焦点
Focus
键盘或鼠标当前选中的交互元素状态，用来告诉用户接下来输入或按键会作用在哪里。
拖拽
Drag & Drop
用户按住元素并移动到新位置的交互，常用于任务看板、排序列表、上传区域和布局编辑。
滑动
Swipe
移动端用手指横向或纵向滑过屏幕触发切换、翻页、删除或返回等操作。
弹性布局
Flexbox
沿横向或纵向排列元素的 CSS 布局方式，适合按钮组、工具栏、导航、卡片内部对齐等一维布局。
网格布局
CSS Grid
用行和列组织页面区域或卡片集合的 CSS 布局方式，适合控制整体结构和多列内容。
响应式设计
Responsive Design
让同一套内容在不同屏幕上自动重排：手机单列阅读，平板分组展示，桌面利用横向空间，同时保证文字、按钮和卡片不溢出。
断点
Breakpoint
布局在某个屏幕宽度开始变化的阈值，例如从多列切换为单列、从顶部导航切换为汉堡菜单。
外边距
Margin
元素外部与其他元素之间的空间，用来控制区块之间、卡片之间或段落之间的距离。
内边距
Padding
元素边框与内部内容之间的空间，用来控制按钮、卡片、面板和输入框的呼吸感。
间距
Gap
Flex 或 Grid 子元素之间的统一间距，比给每个元素单独写 margin 更稳定。
z-index 层级
z-index
控制重叠元素谁显示在上方，常用于导航、下拉菜单、弹窗、遮罩和 Toast。
字体族
Font / Font Family
界面使用的字体体系，决定文字气质、可读性和品牌感，通常区分标题、正文和代码/数字字体。
字号
Font Size
文字显示大小，直接影响信息层级、阅读舒适度和移动端可读性。
字重
Font Weight
文字笔画的粗细，用来区分标题、强调、正文和辅助信息。
行高
Line Height
多行文字每一行之间的垂直距离，决定正文是否容易阅读、卡片文本是否拥挤。
字间距
Letter Spacing
字符之间的水平间距，常用于大标题、按钮、标签或全大写英文的细节调节。
文本对齐
Text Align
控制文字在容器内的水平对齐方式，例如左对齐、居中、右对齐或两端对齐。
标题层级
Heading (h1–h6)
页面标题和小标题的结构层级，用来组织内容、辅助扫描，也会影响语义和 SEO。
文本截断
Text Truncation / Ellipsis
当文本过长时限制显示行数，并用省略号避免撑坏卡片、按钮或列表布局。
背景色
Background Color
界面区域或组件背后的底色，用来区分层级、承载内容，并影响整体明暗和品牌气质。
渐变
Gradient
由两种或多种颜色平滑过渡形成的强调面。好的渐变要能看出方向、光源或颜色层次，同时保持克制。
阴影
Box Shadow / Drop Shadow
通过模糊、偏移和透明度表现元素层级，常用于卡片、浮层、按钮和拖拽状态。
边框
Border
围绕组件边缘的线条，用来定义边界、分隔区域、表达状态或提高浅色界面的清晰度。
圆角
Border Radius
控制组件角的圆润程度，会影响界面的亲和力、精致度和品牌性格。
透明度
Opacity
控制元素或颜色的可见程度，常用于遮罩、禁用态、叠加层和淡入淡出效果。
毛玻璃模糊
Backdrop Blur
模糊元素背后的内容，配合半透明背景形成玻璃质感，常用于顶栏、浮层和局部卡片。
图片
Image (img)
在界面中展示视觉内容的元素，需要处理尺寸比例、裁切、加载失败、替代文本和响应式适配。
视频
Video
在页面中播放或嵌入动态内容，可能来自本地文件、第三方 iframe 或短视频预览。
图标
Icon
用小型符号辅助识别操作、状态或类别，常见于按钮、导航、提示和工具栏。
网站图标
Favicon
显示在浏览器标签、收藏夹和部分分享入口的小图标，用来帮助用户识别站点。
OGP 分享图
Open Graph Image
页面被分享到社交平台或聊天工具时显示的标题、描述和预览图。
图像适配
Object Fit
控制图片或视频如何填充固定比例的容器，常用 cover 裁切填满，contain 完整显示。
组件
Component
可复用的界面单元，把结构、样式、状态和交互收在一起，适合沉淀按钮、卡片、弹窗这类会反复出现的 UI。
API
API
前端或后端与服务交换数据的接口，例如获取文章、保存表单、登录鉴权、支付回调或第三方数据。
部署
Deploy
把本地项目构建、检查并发布到可访问环境的过程，常见目标包括 Vercel、Netlify、GitHub Pages 或自有服务器。
npm / 包管理
npm (Node Package Manager)
JavaScript 项目的包管理与脚本工具，用来安装依赖、运行开发服务器、构建项目和执行检查命令。
DOM
DOM
浏览器把 HTML 解析成的页面节点树，JS 可以读取、插入、删除或更新这些节点，从而改变真实页面。
事件
Event
页面响应用户或系统变化的触发机制，比如点击、输入、提交、滚动、拖拽、键盘按下和窗口尺寸变化。
CSS 变量
CSS Variables
CSS 中可复用的命名值，适合统一管理颜色、间距、圆角、阴影和主题，让改一处就能影响整套界面。
CSS 类
CSS Class
给 HTML 元素添加的样式标识，用来复用视觉规则、组合状态，并让同类元素保持一致。
深色模式
Dark Mode
为同一界面提供深色与浅色两套主题，重点是背景、文字、边框、阴影、图表和状态色都能保持可读。
无障碍访问
Accessibility (a11y)
让更多用户能顺利使用界面的设计与实现要求，重点包括语义结构、键盘操作、焦点可见、对比度和屏幕阅读器信息。
警告提示
Alert
用于向用户展示重要状态、风险或操作结果的提示区域，通常会出现在页面内容附近。
浮层气泡
Popover
依附在某个触发点旁边的小型浮层，用来展示补充信息、快捷操作或轻量表单。
抽屉面板
Drawer
从屏幕边缘滑出的面板，常用于详情、筛选、购物车、设置或移动端导航。
命令面板
Command Palette
通过快捷键或搜索框打开的全局操作入口，让用户快速跳转页面、执行命令或查找内容。
数据表格
Data Table
用于展示多行多列结构化数据的组件，通常包含排序、筛选、分页、选择和批量操作。
空状态
Empty State
当页面、列表或搜索结果没有内容时显示的引导区域，通常包含原因、下一步和创建入口。
步骤条
Stepper
用于展示多步骤流程的当前位置、已完成步骤和后续步骤，常见于注册、支付和配置向导。
时间线
Timeline
按时间顺序展示事件、更新或里程碑的模式，适合审计日志、订单进度和项目动态。
价格表
Pricing Table
用于展示不同套餐、价格、权益和推荐方案的结构，通常服务于转化决策。
功能网格
Feature Grid
用网格方式展示产品功能、卖点或能力模块，常见于官网首页和产品介绍页。
用户评价
Testimonials
展示真实用户反馈、公司背书或案例引用的区域，用来增加信任感。
Logo 墙
Logo Cloud
集中展示客户、合作伙伴或媒体 Logo 的区域，用轻量方式建立可信度。
数据指标区
Stats Section
用几个关键数字快速传达规模、效率、增长或可信度的页面区域。
对比表
Comparison Table
用于横向比较多个方案、套餐或产品能力的表格结构。
工具栏
Toolbar
聚合一组常用操作的横向或垂直控件区域，常见于编辑器、表格和设计工具。
分段控制器
Segmented Control
用于在少量互斥选项之间切换的控件，比下拉更直接，比 tabs 更轻量。
滑块
Slider
通过拖动选择连续或分段数值的控件，适合音量、价格、强度和进度调整。
日期选择器
Date Picker
用于选择日期或日期范围的表单控件，常见于预约、筛选和报表。只选择时间时应使用时间选择器。
文件上传
File Upload
让用户选择或拖拽文件的输入模式，需要处理格式限制、进度、成功和失败状态。
组合框
Combobox
结合输入搜索和下拉选择的控件，适合选项多但仍需要精确选择的场景。
瀑布流布局
Masonry Layout
让不同高度的卡片自动填充列空间的布局，适合图片、灵感卡片和内容长度不一致的资料库。
Bento 网格
Bento Grid
用不同大小的卡片拼出强节奏的信息网格，常用于展示产品能力、案例或功能亮点。
设计 Token
Design Token
把颜色、字号、间距、圆角、阴影等设计决策命名并系统化的基础单位。
风格提示词
Style Prompt
描述界面材料、色彩面积、字体密度、组件边界和禁用项的提示词片段，用来把视觉方向变成可执行约束。
提示词模板
Prompt Template
可复用的提示词框架，把目标、上下文、输入材料、设计约束、输出格式和验收标准固定下来。
可复制提示词
Copy-ready Prompt
可以直接复制给 AI 执行的一段完整指令，通常已经写好目标、上下文、边界、输出格式和检查标准。
实时预览
Live Preview
用户改变主题、尺寸、内容、状态或参数后，界面立即更新的预览区域，用来把抽象术语变成可感知结果。
提示词迭代
Prompt Iteration
根据 AI 产出或实时预览逐步改写指令，让目标、约束、视觉细节和输出格式越来越贴近真实需求。
组件规格
Component Spec
面向实现的组件说明，明确用途、输入数据、状态、交互、响应式、无障碍和不可变边界。
验收标准
Acceptance Criteria
判断任务是否真正完成的可检查条件，覆盖行为结果、边界状态、响应式、无障碍和视觉稳定性。
极简风格
Minimalism
以内容和任务为中心，用极少元素、精准留白、清晰层级和克制色彩建立安静高效的界面秩序。
粗野主义
Brutalism
用硬边框、强对比、直接排版和裸露结构制造有态度的反精致界面。
玻璃拟态
Glassmorphism
通过半透明表面、背景模糊、细边框、柔和高光和层级阴影制造玻璃般的浮层空间。
新拟物
Neumorphism
用同色系背景、内外阴影和低对比曲面，模拟从界面表面凸起或凹陷的柔软实体。
杂志排版
Editorial Layout
用杂志编辑的方式组织网页内容，通过多栏网格、标题层级、跨栏图片、首字下沉、引文和留白建立阅读节奏。
界面语气
Tone of Voice
界面文案的表达方式，包括正式程度、情绪、行动词和错误提示的说法。
微文案
Microcopy
按钮、表单提示、空状态、错误信息和说明文字中的短文本，直接影响用户是否理解下一步。
通知中心
Notification Center
集中展示系统通知、待办、提醒和操作反馈的区域，适合信息量较大的产品。
筛选面板
Filter Panel
聚合多个筛选条件的区域，常见于资源库、商品列表、表格和搜索结果页。
搜索结果
Search Results
展示用户搜索命中的内容列表，需要处理高亮、排序、空结果和加载状态。
排序控件
Sort Control
让用户按时间、热度、价格、名称或相关性重新排列结果的控件。
排期视图
Schedule View
按日期或时间段展示事件、任务和预约的界面模式，重点是浏览安排，而不是单纯选择日期。
看板
Kanban Board
按状态列组织卡片的任务管理界面，常用于项目、销售线索和内容流程。
树形视图
Tree View
展示父子层级关系的列表模式，常见于文件管理、文档目录和分类管理。
头像组
Avatar Group
用一组头像表示参与者、成员或协作者，常搭配剩余人数计数。
上下文菜单
Context Menu
根据当前对象或区域展示相关操作的菜单，常用于列表、卡片、编辑器和文件管理。
大型菜单
Mega Menu
在导航中展示多列链接、分类和推荐内容的大型下拉菜单。
FAQ 区块
FAQ Section
用问答形式解释价格、功能、限制或流程的页面区域。
订阅表单
Newsletter Signup
收集用户邮箱或订阅意愿的页面模块，通常包含价值说明、输入框和提交反馈。
案例卡片
Case Study Card
用卡片展示案例背景、结果、行业和关键指标，帮助用户快速判断相关性。
集成网格
Integration Grid
展示产品可连接工具、平台或 API 的网格模块。
更新日志
Changelog
按时间记录产品版本、功能变更、修复和改进的内容结构。
文档布局
Docs Layout
面向长文档和知识库的布局，通常包含侧栏目录、正文、页内锚点和下一篇导航。
设置页
Settings Page
组织用户偏好、账户、通知、隐私和集成配置的页面。
仪表盘卡片
Dashboard Card
在仪表盘中承载指标、趋势、状态或快捷入口的卡片。
KPI 卡片
KPI Card
突出展示一个关键指标、变化幅度和上下文的紧凑卡片。
图表
Chart
把数据转成可视化图形的模式，用于展示趋势、分布、对比和占比。
地图视图
Map View
用地图展示位置、区域、路线或空间关系的界面模式。
提示词链
Prompt Chaining
把复杂任务拆成连续的多段提示词，每一步只解决一个问题，并把产出作为下一步输入。
设计简报
Design Brief
给设计或开发前置的需求说明，写清用户、场景、页面目标、内容范围、品牌气质、限制条件和成功标准。
参考图
Reference Image
用于说明布局、密度、组件关系、材质和交互状态的图片输入，帮助 AI 理解要借鉴什么、避开什么。
风格指南
Style Guide
规定颜色、字体、间距、圆角、图标、文案语气和组件用法的轻量规范。
组件配方
Component Recipe
把组件从结构、数据、状态、交互、样式、无障碍到验收拆成可执行步骤，像给 AI 的实现菜谱。
实现计划
Implementation Plan
把一个需求拆成可执行的开发步骤，说明要改哪些文件、数据结构、组件状态、交互逻辑和验证方式。
打磨轮次
Refinement Pass
初版完成后的定向打磨，一次只聚焦视觉层级、交互反馈、响应式、文案或无障碍中的一小块。
视觉验收
Visual QA
用真实浏览器和截图检查页面是否有溢出、遮挡、错位、异常滚动、色彩过饱和和响应式断点问题。
提示词约束
Prompt Constraints
提示词里用来约束 AI 行为的边界条件，明确哪些不能改、哪些风格要避免、哪些输出必须保留。
输出格式
Output Format
规定 AI 回答应该长什么样，例如分段结构、JSON、代码块、清单、差异说明或可复制 prompt。
设计评审
Design Critique
从目标是否明确、信息层级、可用性、视觉一致性、文案清晰度和实现风险角度评审界面。
移动应用风格
Mobile App Style
偏原生移动应用的视觉与交互风格，强调底部导航、触控尺寸、卡片堆叠和单手操作。
企业 SaaS 风格
Enterprise SaaS Style
面向工作场景的克制产品界面，强调信息密度、稳定导航、可扫描表格、明确状态和可重复操作效率。
仪表盘风格
Dashboard Style
围绕指标、趋势、筛选、异常和决策路径组织的分析型界面风格。
瑞士平面风格
Swiss Style
以网格、无衬线字体、强对齐、克制色彩和客观信息层级为核心的理性视觉风格。
复古 UI
Retro UI
借用旧电脑、早期网页、像素图形、印刷色和怀旧控件语言的复古数字界面。
赛博朋克风格
Cyberpunk
用深色城市感、霓虹边缘、冷暖冲突、技术噪声和未来排版制造强主题界面。
黏土拟态
Claymorphism
用高明度低饱和色、巨大圆角、内外双重阴影和弹性按压反馈，模拟柔软黏土被捏出的蓬松实体感。
单色风格
Monochrome
用单一色相或黑白灰，通过明度、密度、边框、纹理和排版层级建立统一视觉系统。
图标按钮
Icon Button
只使用图标表达操作的紧凑按钮，适合工具栏和空间有限的界面。
时间选择器
Time Picker
用于选择或输入具体时间，并处理时间格式、步进和可用范围。
数字输入框
Input Number
用于输入受范围和步长约束的数值，通常带增加和减少操作。
评分
Rating
让用户通过星级或等级快速表达评价的选择控件。
级联选择
Cascader
在存在父子关系的数据中逐级缩小范围并完成选择。
穿梭框
Transfer
在两个列表之间移动选中项目，适合批量分配权限或成员。
表单
Form
把标签、输入、校验和提交动作组织成完整的数据收集流程。
日历
Calendar
以月、周或日视图展示日期和事件，并允许选择日期。
评论
Comment
展示作者、正文、时间与回复操作的讨论单元。
描述列表
Descriptions
用标签和值成组展示结构化的只读信息。
列表
List
纵向展示结构相同的条目，并支持选择、操作和状态反馈。
二维码
QR Code
把短链接或结构化文本编码为可被设备扫描的二维图形。
气泡确认框
Popconfirm
在危险操作旁就地请求二次确认，避免打开完整模态框。
通知提醒框
Notification
在页面角落展示包含标题、说明和操作的非阻塞反馈。
结果页
Result
在流程结束后集中说明成功、失败或待处理状态，并给出下一步。
淡入淡出
Fade
通过透明度变化让元素柔和出现或消失。
滑入
Slide In
元素沿明确方向进入视区，用来表达空间来源，例如侧边栏从左侧来、详情面板从右侧来。
放大进场
Scale In
元素从接近正常尺寸轻微缩放到稳定状态，常用于菜单、弹层和小面板。重点是 transform-origin 对齐触发源。
错落进场
Staggered Entrance
错峰动画在入场场景里的具体用法：让一组卡片、菜单项或步骤按短延迟依次出现，但总时长要封顶。
滚动进度
Scroll Progress
根据可滚动内容的位置展示当前阅读或浏览进度。
圣杯布局
Holy Grail Layout
由页头、页脚、主内容和左右侧栏组成的经典页面骨架。
分栏面板
Split Pane
由可拖动分隔条控制两侧宽度的并列工作区。
列表-详情
List-Detail
左侧选择条目，右侧展示当前条目详情的高效工作布局。
图文左右
Media Object
固定尺寸媒体与自适应正文并排的基础内容模式。
键盘快捷键
Keyboard Shortcut
让用户通过组合键触发常用操作的交互方式，常见于命令面板、编辑器和后台工具。
触控目标
Touch Target
移动端或触屏界面中，按钮、图标和列表项实际可点击的区域大小。
加载状态
Loading State
数据或资源尚未完成时给用户的临时反馈，可以是骨架屏、进度、占位或禁用操作。
错误状态
Error State
操作失败或数据异常时的反馈状态，需要说明原因、影响范围和下一步行动。
成功状态
Success State
操作完成后确认结果的反馈状态，常用于保存、发布、支付或导入完成。
禁用状态
Disabled State
控件暂时不可操作时的状态，需要让用户理解为什么不可用以及如何恢复。
搜索空结果
Empty Search Results
搜索或筛选后没有匹配内容时的空状态，要帮助用户修改关键词或清除条件。
内联编辑
Inline Edit
直接在原位置把文本或字段切换为可编辑状态，减少跳转和弹窗。
批量操作
Bulk Action
对多个选中项一次性执行归档、删除、移动、导出等操作的工具模式。
行选择
Row Selection
在表格或列表中选择单行或多行，通常服务于批量操作和对比查看。
列显示控制
Column Visibility
允许用户显示、隐藏或固定表格列，以适应不同工作场景。
吸顶表头
Sticky Header
滚动长表格或长页面时保持标题、列名或操作栏可见的布局方式。
无限滚动
Infinite Scroll
用户滚动到底部附近时自动加载更多内容的浏览模式。
虚拟列表
Virtual List
只渲染可视区域附近的列表项，用来提升超长列表的性能。
乐观更新
Optimistic UI
用户操作后先更新界面，再等待服务端确认；失败时需要回滚或修正。
自动保存
Autosave
用户编辑时自动保存草稿或变更，减少手动提交压力。
撤销重做
Undo / Redo
允许用户回退或重新应用最近操作，常见于编辑器、看板和设计工具。
权限状态
Permission State
根据用户角色或授权范围展示可见、只读、禁用或不可访问状态。
操作日志
Audit Log
记录谁在何时对什么对象做了什么操作，常用于后台、权限和协作场景。
响应式预览
Responsive Preview
在同一工具中切换桌面、平板、移动端视口，检查布局和内容是否适配。
用户流程
User Flow
用户从进入页面到完成目标的一系列步骤，用来判断页面是否顺路。
信息架构
Information Architecture
把内容、导航和页面层级组织成用户能理解的结构。
内容层级
Content Hierarchy
通过标题、摘要、辅助信息和操作位置安排用户阅读顺序。
渐进披露
Progressive Disclosure
先展示必要内容，把复杂或低频选项放到用户需要时再展开。
可供性
Affordance
界面元素通过形状、状态和反馈暗示用户它可以做什么。
引导流程
Onboarding Flow
帮助新用户理解产品价值、完成基础设置并到达第一个成功时刻。
截图反馈
Screenshot Feedback
用截图圈出问题并配合文字说明，让 AI 或开发者更准确地修界面。
提示词变量
Prompt Variable
在提示词模板中预留可替换字段，例如目标用户、页面类型、风格和输出格式。
上下文包
Context Packet
给 AI 或协作者的一组必要背景：目标、现状、约束、文件、验收和不要做什么。
模拟数据
Mock Data
用于开发和预览的代表性数据，帮助暴露空值、长文本、异常和边界情况。
状态机
State Machine
用明确状态和事件描述界面如何从加载、成功、失败、编辑等状态之间切换。
边界情况
Edge Case
不常见但可能发生的输入、状态或数据组合，容易导致布局或逻辑问题。
兜底界面
Fallback UI
在资源缺失、接口失败、浏览器能力不足时仍能提供基本可用体验的界面。
回归检查
Regression Check
修改后确认旧功能、旧布局和关键路径没有被破坏的检查。
组件 API
Component API
组件对外暴露的属性、事件、插槽和状态约定，决定它是否容易复用。
设计系统
Design System
由组件、设计 Token、使用规范和质量标准组成的一套产品界面语言。
平面设计系统
Flat Design System
去掉纹理、复杂渐变和拟物深度，用纯色、几何形状、清晰图标和直接排版建立高效界面。
水墨风格
Ink Wash Style
以留白、墨色层次、竖排文字和克制朱红点缀表达东方意境。
可爱极简
Kawaii Minimal
把日系可爱元素和现代极简结合，用柔和粉彩、圆润形状和轻量动效传达友好感。
工业设计风格
Industrial Design Style
借用机械面板、工程网格、深色金属和功能主义排版的强实用风格。
光效风格
Light Effects Style
通过小面积辉光、光源方向和明暗层次制造沉浸式视觉焦点。
暗黑奢华
Dark Luxury
用深色 surface、细金线、衬线标题和克制留白传达高级与稀缺感。
极光渐变风格
Aurora Gradient Style
用低饱和多色渐变、模糊色团和半透明 surface 制造轻盈氛围。
亲自然设计
Biophilic Design
把植物、有机曲线、自然光感和低饱和大地色带入界面，营造平静、疗愈、可呼吸的产品体验。
材料设计
Material Design
以真实材料隐喻、海拔层级、明确状态和系统化组件为核心的 Google 设计语言。
微软 Fluent 设计 2
Fluent Design 2
微软现代设计语言，强调 Mica/Acrylic 材质、柔和层级、清晰控件和桌面生产力体验。
经典拟物化
Skeuomorphism
借用真实物体的材质、按钮、旋钮、纸张或仪表隐喻，让用户凭现实经验理解操作。
滚动叙事
Scroll Narrative
把页面滚动设计成分镜叙事，通过章节、固定画面、进度和渐进揭示引导用户理解复杂内容。
鼠标追踪效果
Mouse Tracking Effect
根据光标位置改变光晕、卡片倾斜、遮罩或局部高亮，让界面对用户动作产生即时回应。
Bento 网格风格
Bento Grid Style
用不同尺寸的模块卡片组织功能、指标和故事，让复杂信息像便当盒一样分区清楚。
侘寂风格
Wabi-Sabi Style
用不完美纹理、自然留白、低饱和泥土色和安静排版呈现克制、时间感与手作温度。
太阳朋克风格
Solarpunk Style
把可持续未来、太阳能、植物建筑和乐观科技结合起来的生态未来主义视觉风格。
Frutiger Aero
Frutiger Aero
2000 年代科技自然审美，融合蓝天、水滴、透明晶体、光泽图标和乐观数字生活感。
北欧风格
Scandinavian Style
用温暖浅木色、柔和中性色、实用布局和自然光感建立舒适、可信、少负担的界面。
蓝图风格
Blueprint Style
用浅蓝网格、工程线、尺寸标注和模块编号表达系统规划感，适合技术、建筑和流程类界面。
纸雕剪纸风格
Paper Cutout Style
通过分层纸片、柔和投影、裁切边缘和浅色纸感，做出手工、亲和、轻量的界面氛围。
手绘草图风格
Hand-drawn Sketch Style
用手绘线条、低保真结构、批注和轻微不规则边缘，让页面像正在讨论中的产品草图。
全息镭射风格
Holographic Foil Style
用低饱和彩虹薄膜、角度高光、透明层和细腻金属边缘，表达未来、收藏和高级包装感。
双色调风格
Duotone Style
用两个主色建立强识别度，通过明暗层级和留白控制信息，不依赖复杂装饰。
颗粒质感风格
Grain Texture Style
用细噪点、纸面纹理和低对比渐变给界面增加触感，避免纯平面过于塑料。
包豪斯风格
Bauhaus Style
用基础几何、红黄蓝黑、清晰网格和功能主义排版建立强秩序与现代感。
装饰艺术风格
Art Deco Style
用对称构图、阶梯线、扇形纹样、金属细线和深浅对比营造优雅、仪式感和精品感。
暗黑学院风格
Dark Academia Style
用深棕、旧纸、细线、藏书标签和古典排版表达知识、沉浸阅读和学院气质。
合成波风格
Synthwave Style
用低饱和霓虹、地平线网格、落日圆盘和复古未来字体表达音乐、游戏和夜间驾驶感。
没有匹配术语，试试描述具体状态或效果。