前端设计与布局常用术语（前端术语中英对照速查表）
文章目录
- 🧭 前端设计与布局常用术语速通指南
🧭 前端设计与布局常用术语速通指南
—— 写给想用 AI 精准描述页面效果的你
当你想让 AI 生成一个页面时，也许会说：
“我想要一个漂亮的页面，上面有点东西、旁边再放点内容。”
但 AI 会懵 😅。
如果你会说：
“我想要一个带 顶部导航栏（top bar）、左侧 侧边栏（sidebar），中间是一个 卡片（card） 布局的页面，整体宽度自适应容器。”
那 AI 就能明白你在说什么。
这篇文章帮你快速掌握前端常用的 布局与设计术语，
让你能像设计师一样表达页面结构、风格与层次。
🧱 一、基础结构类术语
1️⃣ 容器（Container）
容器就是 装内容的框。页面的一切几乎都在容器里。
常见容器类型：
- 主容器（Main container）：页面的整体包裹层。
- 内容容器（Content wrapper）：主要内容区。
- 响应式容器（Responsive container）：根据屏幕自动调整宽度。
💬 示例描述：
“页面内容放在一个 1200px 宽的居中容器中。”
2️⃣ 布局（Layout）
布局是 内容怎么摆放。
常见布局：
- 单列布局：从上到下。
- 两列 / 三列布局：左侧栏 + 内容区。
- 栅格布局（Grid layout）：用网格排列元素。
- Flex 布局：灵活的弹性布局，可居中或对齐。
💬 示例描述：
“用三列布局，中间内容居中，两边各 20% 宽。”
3️⃣ 侧栏 / 顶栏 / 底栏
这些是页面最常见的结构区域：
| 区域 | 英文 | 用途 |
|---|---|---|
| 顶栏 | Header / Navbar / Top bar | 标题、搜索框、头像 |
| 侧栏 | Sidebar | 导航菜单 |
| 底栏 | Footer | 版权、页脚信息 |
💬 示例描述：
“顶部是固定导航栏，下面是主内容区域。”
🎨 二、视觉与层次类术语
4️⃣ 卡片 / 面板（Card / Panel）
常用于展示内容块，如文章、商品、用户信息等。
特点：
- 有边框或阴影
- 内含标题、图片、文字
💬 示例描述：
“每个商品用卡片展示，带圆角和轻微阴影。”
5️⃣ 模态框 / 弹窗（Modal / Dialog）
弹出的独立层，用于提示或交互。
💬 示例描述：
“点击按钮后弹出一个居中的模态框，带半透明遮罩。”
6️⃣ 层级（Z-index / Layer）
控制元素的“上下关系”，谁在上谁在下。
💬 示例描述：
“导航栏固定在顶部并始终在内容上层。”
7️⃣ 阴影（Shadow）
给元素增加立体感和层次感。
类型：
- 盒子阴影（box-shadow）
- 文字阴影（text-shadow）
💬 示例描述：
“给卡片加上轻微阴影，模拟浮起效果。”
8️⃣ 圆角（Border-radius）
让方形元素的边角变圆润。
常用数值：
- 小圆角：4px（常规）
- 大圆角：12px（更柔和）
💬 示例描述：
“卡片边角圆润，半径 12px。”
9️⃣ 留白（Padding / Margin / Spacing）
让布局更通透的关键。
- Padding：内容与边界的距离。
- Margin：元素之间的距离。
💬 示例描述：
“增加卡片之间的间距，让布局更呼吸。”
🔟 分隔（Divider / Border）
用于视觉分区，如横线、竖线、边框。
💬 示例描述：
“在标题和内容之间加一条浅灰色分隔线。”
🎨 背景（Background）
背景可以是：
- 纯色（color）
- 图片（image）
- 渐变（gradient）
- 纹理（texture）
💬 示例描述：
“整体背景为浅灰色，卡片使用白底。”
✍️ 三、排版与内容类术语
1️⃣1️⃣ 标题与文本（Heading / Body text）
文字结构：
- H1：主标题
- H2：副标题
- P：正文
- Label / Placeholder：辅助文字
💬 示例描述：
“标题使用加粗大号字体，正文浅灰色。”
1️⃣2️⃣ 对齐（Alignment）
- 左对齐：正文内容
- 居中对齐：标题、按钮
- 右对齐：价格、操作栏
💬 示例描述：
“图片居中，文字左对齐。”
1️⃣3️⃣ 按钮（Button）
按钮分类：
- 主要按钮（Primary）
- 次要按钮（Secondary）
- 危险按钮（Danger）
- 禁用按钮（Disabled）
💬 示例描述：
“右下角有一个蓝色主按钮，圆角更大一点。”
1️⃣4️⃣ 图标（Icon）
快速传达含义的符号，比如搜索、删除、设置。
💬 示例描述：
“搜索框左侧加一个放大镜图标。”
⚙️ 四、交互与状态类术语
1️⃣5️⃣ 悬停（Hover）
鼠标移上时的状态变化。
💬 示例描述：
“按钮悬停时变深色并加阴影。”
1️⃣6️⃣ 点击 / 激活（Active / Click）
用户点击时的视觉反馈。
💬 示例描述：
“点击后按钮高亮显示。”
1️⃣7️⃣ 响应式（Responsive）
页面会自动适配不同屏幕设备。
💬 示例描述：
“移动端隐藏侧栏，顶部栏折叠成菜单。”
1️⃣8️⃣ 动画与过渡（Animation / Transition）
让交互更自然流畅。
💬 示例描述：
“模态框弹出时从底部滑入。”
🧩 五、组合表达示例
💬 你可以这样描述一个页面：
“上方是固定顶栏（白底+阴影），左侧有浅灰侧栏（占 20% 宽度），
中间是主内容区，里面有几张卡片（圆角 + 阴影），
卡片之间留 16px 间距，页面宽度自适应。”
👉 这样的描述，AI 就能准确生成你想要的页面。
🧭 六、总结：前端表达的 3 个层次
| 层次 | 关注点 | 示例 |
|---|---|---|
| 结构层 | 布局与区域划分 | 顶栏、侧栏、容器、栅格 |
| 视觉层 | 样式与层次感 | 阴影、圆角、留白、背景 |
| 交互层 | 动作与响应 | 悬停、点击、动画、响应式 |
当你掌握这些术语后，就能像设计师一样“和 AI 说人话”：
“我想要一个三列卡片布局的响应式页面，整体简约风，浅灰背景，卡片带阴影和圆角。”
🧠 结语：
前端不仅仅是写代码，更是一种“视觉语言”。
学会用术语描述，AI 才能更懂你。
希望这篇速通指南能让你在前端路上越走越顺 ❤️。
📚 附录：前端术语中英对照速查表（收藏版）
| 中文术语 | 英文术语 | 一句话解释 |
|---|---|---|
| 容器 | Container | 用来包裹内容的外层框架。 |
| 布局 | Layout | 页面内容的摆放方式（如单列、双列）。 |
| 栅格布局 | Grid Layout | 用网格系统分布元素，常用于卡片或图文列表。 |
| 顶栏 | Header / Navbar / Top bar | 页面最上方的区域，通常放导航和 logo。 |
| 侧栏 | Sidebar | 页面侧边的菜单或功能区。 |
| 底栏 | Footer | 页面最下方的区域，放版权、页脚信息。 |
| 主内容区 | Main Content | 页面主要展示内容的部分。 |
| 卡片 | Card | 用于展示独立信息块的方框。 |
| 面板 | Panel | 功能区域或信息区，类似卡片但更偏向容器。 |
| 模态框 | Modal / Dialog | 弹出的交互窗口，常用于确认或输入。 |
| 层级 | Z-index / Layer | 控制元素的前后叠放顺序。 |
| 阴影 | Shadow | 增加立体感和层次感的视觉效果。 |
| 圆角 | Border-radius | 控制元素边角的弧度。 |
| 边框 | Border | 元素边缘的线条。 |
| 留白 | Whitespace | 元素间的空白区域，使布局更通透。 |
| 内边距 | Padding | 内容与边框的内部间距。 |
| 外边距 | Margin | 元素与外部之间的间距。 |
| 分隔线 | Divider | 视觉上分割区域的线条。 |
| 背景 | Background | 页面或元素的底色、图像或渐变。 |
| 标题 | Heading | 表示层级结构的文字标题（H1、H2…）。 |
| 正文 | Paragraph / Body text | 普通文本内容。 |
| 标签 | Label | 简短说明性文字（如表单标签）。 |
| 占位符 | Placeholder | 输入框内的提示文字。 |
| 按钮 | Button | 可点击执行操作的元素。 |
| 图标 | Icon | 表示功能或状态的小图形。 |
| 悬停状态 | Hover | 鼠标移入时的视觉效果。 |
| 点击状态 | Active / Click | 鼠标点击或选中时的状态。 |
| 禁用状态 | Disabled | 无法操作的按钮或输入。 |
| 响应式 | Responsive | 页面根据屏幕大小自动调整布局。 |
| 断点 | Breakpoint | 响应式布局中切换样式的临界宽度。 |
| 动画 | Animation | 元素随时间的动态变化。 |
| 过渡 | Transition | 属性变化的平滑过渡效果。 |
| 图层 | Layer | 页面中重叠的视觉层次。 |
| 透明度 | Opacity | 元素的不透明程度。 |
| 对齐 | Alignment | 内容在容器中的对齐方式（左、中、右）。 |
| 居中 | Center / Centered | 元素在容器中水平或垂直居中。 |
| 间距 | Spacing / Gap | 元素间的距离。 |
| 滚动条 | Scrollbar | 页面内容超出容器时用于滚动查看的控件。 |
| 固定定位 | Fixed Position | 元素固定在视口位置，不随滚动移动。 |
| 绝对定位 | Absolute Position | 相对于父元素精确放置位置。 |
| 相对定位 | Relative Position | 相对于自己原始位置进行偏移。 |
| 粘性定位 | Sticky Position | 滚动到特定位置后固定。 |
| 遮罩层 | Overlay / Mask | 半透明层，用于突出弹窗或内容。 |
| 透明背景 | Transparent Background | 背景透明效果。 |
| 颜色渐变 | Gradient | 从一种颜色平滑过渡到另一种颜色。 |
| 浅色模式 | Light Mode | 浅背景深文字的配色。 |
| 深色模式 | Dark Mode | 深背景浅文字的配色。 |
| 提示框 | Tooltip | 鼠标悬停显示的小提示。 |
| 通知 / 消息框 | Notification / Alert | 用于提示信息的浮层。 |
| 输入框 | Input Field | 用户输入文字的区域。 |
| 下拉菜单 | Dropdown | 点击后展开的选项列表。 |
| 标签页 | Tabs | 多页切换组件。 |
| 加载动画 | Loading Spinner | 页面或数据加载时的指示器。 |
| 骨架屏 | Skeleton Screen | 加载前的占位动画。 |
| 滑动区 | Carousel / Slider | 可左右滚动的图片或内容区域。 |
| 断点布局 | Responsive Breakpoint Layout | 不同屏幕下自动重排的布局模式。 |
🧩 使用建议：
如果你和设计师沟通页面，可以这样说：
“这个区域留白太少，卡片之间的间距建议增加到 16px。”
如果你用 AI 生成页面，可以这样开头：
“请帮我生成一个响应式页面，包含顶部导航栏、左侧侧栏和三列卡片布局。”
掌握这些词汇，你就能 更精准地描述想法、快速获得理想的前端效果。
