​ 你让 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(不透明度) 越低信息越弱RGBARGBA颜色值带透明度通道如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 Maskmask-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: 9999pxhover 时 scale 1.02 加深阴影”“页面太单调了”“深浅区块交替排列加网格背景纹理卡片加 box-shadow 层次感”“颜色不搭”“全站统一用一个强调色accent color所有高亮元素用同一色值”“这块内容看不清”“加一层 gradient overlay或者用 backdrop-blur 的毛玻璃效果”​核心原则术语越精确AI 的输出越接近你的预期。这张表不需要背下来需要的时候翻一翻找到对应的英文术语粘贴给 AI 就行。