【前端UI行话】前端 UI 术语速查表

关注

原创 2026-03-20 13:30:52 772 阅读 AI 写同款· GEO 优化 ›

Fast DDS源代码走读 DDS, PDP, EPD, DataWriter, DataReader 阅读详情

你让 AI 帮你写前端，AI 回复里蹦出一堆术语，“加个 backdrop-blur”、“用 radial-gradient 做 vignette”、“hover 时 scale 1.02”。你知道它在说代码，但不知道效果长什么样。
在这里插入图片描述

这篇文章把前端 UI 中最常见的视觉术语整理成一张表，用后端同学能理解的方式解释每个术语是什么、长什么样、什么时候用。下次和 AI 对话或者审查设计稿时，你至少能说出"这里需要一个 glassmorphism 的卡片"而不是"把这个框弄得好看一点"。

一、颜色与背景

先从最基础的开始。前端的颜色不只是"红绿蓝"，渐变和透明度才是让页面有层次感的关键。

术语	英文	是什么	后端类比
渐变	Gradient	颜色从 A 平滑过渡到 B，可以是线性（从左到右）或径向（从中心向外）	类似于热力图的颜色映射
线性渐变	Linear Gradient	颜色沿直线方向过渡，比如从上到下、从左到右	—
径向渐变	Radial Gradient	颜色从一个中心点向四周扩散	—
透明度/不透明度	Opacity	元素的透明程度，0 完全透明，1 完全不透明	类似日志级别，opacity(不透明度) 越低信息越"弱"
RGBA	RGBA	颜色值带透明度通道，如 `rgba(0, 0, 0, 0.5)` 表示 50% 透明的黑色	四元组，前三位是 RGB，第四位是 alpha 通道
强调色	Accent Color	页面中用于突出重要元素（按钮、链接、徽章）的颜色，通常全站统一	类似于日志里的 WARN 颜色，用来引起注意

在这里插入图片描述

Linear Gradient 和 Radial Gradient 的区别一看便知，一个沿直线过渡，一个从中心发散。Opacity 那列展示了同一个颜色"变淡"的过程，这就是 RGBA 中第四个参数 alpha 在做的事。最右边的 Accent Color 面板是关键：按钮、链接、徽章虽然形态不同，但只要共享同一个颜色，整个页面就有了统一感。

一个常见的误区：后端同学习惯给颜色用十六进制（#FF5733），但前端实际工作中 rgba() 用得更多，因为你经常需要控制透明度，而十六进制不方便做这件事。

二、遮罩与模糊

这一组术语是"背景图处理"的核心工具箱。当你有一张大图做背景，直接在上面放文字通常看不清，下面这些效果就是解决这个问题的。

术语	英文	是什么	什么时候用
遮罩层	Overlay	覆盖在内容上面的半透明层，通常是深色的，让上层文字更容易阅读	背景图上叠文字时必用
渐变遮罩	Gradient Overlay / Gradient Mask	遮罩的透明度是渐变的，比如左边不透明、右边透明，让图片一侧"溶"入背景	Hero 区块背景图 + 左侧文字的经典组合
暗角	Vignette	图片四周逐渐变暗，视觉焦点集中在中央	大图背景想让用户注意中心内容时
羽化	Feathered Edge	图片边缘逐渐变透明，和背景没有明确分界线	图片需要"融入"页面背景而不是"贴在"上面
毛玻璃	Glassmorphism / Backdrop Blur	元素背景半透明 + 模糊，能看到后面的内容但看不清，像隔了一层磨砂玻璃	导航栏、弹窗、卡片，想保持层次感又不遮挡内容
CSS Mask	mask-image	用渐变或图片控制元素哪些部分可见、哪些部分透明	实现 vignette、羽化等效果的技术手段

光看文字可能还是抽象，放一张对比图就清楚了：

在这里插入图片描述

五种效果都是在"原图"基础上做文章：Overlay 是整体压暗让文字可读，Gradient Overlay 只压一侧、另一侧保留画面细节，Vignette 把视线往中心收，Feathered Edge 让图片边缘"消融"进背景，Glassmorphism 则是在前景加一层磨砂玻璃感的浮层。理解了这五种效果，你就掌握了前端"背景图处理"的大部分手法。

三、布局与间距

布局是前端最底层的骨架。后端同学其实对"布局"并不陌生，你写过 YAML 配置、排过表格、调过终端输出的对齐，本质上都是在做同一件事。

术语	英文	是什么	后端类比
留白	Whitespace / Padding	元素之间或元素内部的空白区域，不是"浪费空间"而是让内容更容易阅读	代码里的空行和缩进，没有也能跑，但有了才能读
网格布局	Grid Layout	把页面分成行和列的二维布局系统	类似数据库表的行列结构
弹性布局	Flexbox	一维布局系统，元素沿一个方向（横向或纵向）排列	类似于数组，元素按顺序排列
响应式	Responsive	页面根据屏幕宽度自动调整布局（手机一列、平板两列、桌面三列）	类似于根据请求参数返回不同格式的 API
断点	Breakpoint	屏幕宽度的分界值，超过或低于这个值时切换布局，常见的有 768px（平板）、1024px（桌面）	类似于 if-else 条件分支
固定定位	Sticky / Fixed	元素固定在屏幕某个位置，页面滚动时不跟着动	导航栏常用，类似于终端里的状态栏

Grid 和 Flexbox 是最容易混淆的一对，看图就明白了：

在这里插入图片描述
Grid 是二维棋盘，你同时控制行和列；Flexbox 是一维队列，元素沿一个方向排开；Responsive 不是一种布局技术，而是一种策略。这种方式用断点（Breakpoint）判断屏幕宽度，在不同宽度下切换 Grid 或 Flexbox 的参数，让同一套内容适配手机到桌面的所有尺寸。

四、视觉效果

如果说布局是骨架，视觉效果就是皮肤。下面这些属性决定了一个元素"看起来怎么样"。

术语	英文	是什么	什么时候用
阴影	Box Shadow	元素周围的投影效果，让元素看起来"浮"在页面上	卡片、按钮、弹窗，营造层次感
圆角	Border Radius	元素四角的圆弧程度，0 是直角，`9999px` 是完全圆形	—
网格背景	Grid Background	用 CSS 画的细线网格作为页面底纹，增加层次感但不抢眼	Hero 区块、空白区域的背景装饰
渐变文字	Gradient Text	文字颜色不是单色，而是渐变的（用 `background-clip: text` 实现）	品牌名、标题，增加视觉吸引力
脉冲动画	Pulse Animation	元素不停地缩放或闪烁，像心跳一样	状态指示器（"在线"绿点）、需要引起注意的元素

每种效果长什么样，看一眼就记住了：
在这里插入图片描述

Box Shadow 的 on/off 对比最直观，同一个白色卡片，加了阴影就有了"层次"。

Border Radius 从 0 到 9999px 的变化展示了一个矩形如何变成圆形。

Grid Background 是那种"说不出哪里好但去掉就觉得空"的背景纹理。

Gradient Text 常见于品牌标题，Pulse 则是状态指示器的标配（你见过的"在线"绿点大多在做这个动画）

这些效果里，阴影 + 圆角是使用频率最高的组合。一个没有阴影和圆角的卡片就是一个光秃秃的矩形框，加上 border-radius: 12px 和 box-shadow: 0 4px 12px rgba(0,0,0,0.1) 之后立刻有了"浮"在页面上的感觉。你跟 AI 说"给卡片加点层次感"，它大概率就是在做这两件事。

五、交互效果

静态页面只是起点，用户的鼠标移上去、页面滚动、元素出现，这些时刻都可以加上动效，让界面"活"起来。

术语	英文	是什么	后端类比
悬停效果	Hover Effect	鼠标移到元素上时的视觉变化（变色、放大、浮起）	类似于 IDE 里鼠标悬停显示提示信息
过渡	Transition	元素状态变化时的平滑动画，比如颜色从白变蓝用 0.2 秒渐变而不是瞬间切换	类似于数据库的渐进式迁移而非直接替换
缩放	Scale	元素放大或缩小，`scale(1.02)` 表示放大 2%，常用于 hover 时制造"浮起"感	—
位移	Translate	元素在水平或垂直方向移动，`translateY(-4px)` 表示往上移 4 像素	—
入场动画	Entrance Animation	元素首次出现时的动画效果，通常是从下方滑入 + 淡入	类似于命令行工具的 progressive output
滚动条动画	Marquee	内容像跑马灯一样自动水平滚动，常用于品牌 Logo 展示	类似于日志流的实时输出

每种交互效果单独看一眼，比混在一起讲清楚得多：
在这里插入图片描述

六种交互效果各司其职：Hover 改变外观告诉用户"这里可以点"，Transition 让变化平滑而非突变，Scale 和 Translate 经常组合使用——放大 2% + 上移 4px 就是经典的"悬浮卡片"效果。Entrance Animation 让页面元素不是一瞬间全部出现，而是依次"滑入"，制造阅读节奏。Marquee 则专门用来展示一排品牌 Logo 或合作伙伴，自动滚动意味着有限空间里可以塞更多内容。

交互效果有一条潜规则：Transition 几乎永远要加。不管是按钮变色、卡片浮起还是元素出现，没有 transition 的变化是"突变"，看起来像 bug。加上 transition: all 0.2s ease 就变成了平滑的动效。这条你可以直接告诉 AI：“所有交互都要有 transition。”

六、组件设计模式

知道了视觉效果和交互，接下来是组件。前端的"积木块"，一个落地页(landing page)翻来覆去用的也就这几种。

术语	英文	是什么	什么时候用
徽章	Badge	小标签，通常是圆角小方块 + 几个字，放在标题上方吸引注意	“新功能”、“推荐”、"Beta"标记
行动号召	CTA (Call to Action)	页面上最希望用户点击的按钮或链接	“立即注册”、"免费试用"按钮
主按钮/次按钮	Primary / Secondary Button	主按钮是实心高亮色（最重要的操作），次按钮是边框或透明（次要操作）	类似于确认/取消的主次关系
卡片	Card	一个有边框/阴影/圆角的矩形容器，把相关内容分组展示	类似于 API 响应里的一个 JSON 对象
进度条	Progress Bar	水平填充的条形元素，展示完成度或数值	类似于 CI/CD pipeline 的阶段进度
分隔线	Divider	一条细线，用来视觉上分隔不同内容区域	类似于代码里的空行或注释分隔符
社会证明	Social Proof	通过展示用户评价、客户 Logo、使用数据来建立信任	类似于 GitHub 的 Star 数和 Used by 徽章

这些组件长什么样？一图胜千言：在这里插入图片描述

这六种组件几乎覆盖了所有落地页的"基本零件"：Badge 做标记、CTA 引导点击、Card 组织内容、Progress Bar 展示数据、Divider 划分区域、Social Proof 建立信任。你跟 AI 说"加个 Badge"比说"在标题上面放个小标签"精确得多。

七、配色术语

最后说配色。前端配色不是"选个好看的颜色"那么随意，它有一套命名体系。

术语	英文	是什么
主色	Primary Color	品牌主色调，用于按钮、链接、重要图标
前景色/背景色	Foreground / Background	前景色是文字和图标的颜色，背景色是底色
灰阶	Neutral / Gray Scale	一组从白到黑的灰色，用于文字、边框、背景等不需要强调的地方
暗色模式	Dark Mode	深色背景 + 浅色文字的配色方案，减少屏幕亮度对眼睛的刺激
深浅交替	—	页面中深色区块和浅色区块交替排列，制造视觉节奏感，避免单调

这几个概念看图比看表清楚：

在这里插入图片描述

Primary Color 那格的关键信息是"统一"，按钮、链接、图标虽然形态不同，但只要共享一个色值，页面就有品牌感。

Gray Scale 的三个箭头揭示了灰色系的分工：最浅的做背景、中间的做边框、最深的做文字，大部分页面 80% 的颜色其实都是灰。

Dark Mode 不只是"反色"那么简单，前景和背景的对比度需要重新调校。

最右下的深浅交替（Rhythm）是很多落地页的"隐藏套路"，一浅一深交替排列，用户滚动时自然感觉到内容在分段，不用额外加分隔线。

配色里最实用的一条建议：全站只用一个强调色。按钮、链接、高亮文字、选中状态，全部用同一个颜色（和它的深浅变体）。颜色一多就容易乱，而统一的强调色会让整个页面看起来"专业"。你跟 AI 说"accent color 统一用 #6366f1"，它就知道该怎么处理所有需要高亮的元素。

八、实用速查：和 AI 对话时怎么说

掌握了这些术语，你就可以把模糊的需求变成精确的指令：

你以前可能会说	用术语可以这么说
“把背景弄好看点”	“加一张全屏背景图，上面叠一层 50% 透明度的深色 overlay”
“让这个框有质感”	“用 glassmorphism 效果，半透明背景 + backdrop-blur + 细边框”
“图片边缘太硬了”	“用 CSS mask 做一个 feathered edge / vignette 效果”
“这个按钮太丑了”	“改成圆角胶囊按钮（border-radius: 9999px），hover 时 scale 1.02 + 加深阴影”
“页面太单调了”	“深浅区块交替排列，加网格背景纹理，卡片加 box-shadow 层次感”
“颜色不搭”	“全站统一用一个强调色（accent color），所有高亮元素用同一色值”
“这块内容看不清”	“加一层 gradient overlay，或者用 backdrop-blur 的毛玻璃效果”