当前位置：首页 > news >正文

前端设计与布局常用术语（前端术语中英对照速查表）

news 2025/10/7 10:17:22

文章目录

🧭 前端设计与布局常用术语速通指南
- 🧱 一、基础结构类术语
- - 1️⃣ 容器（Container）
  - 2️⃣ 布局（Layout）
  - 3️⃣ 侧栏 / 顶栏 / 底栏
- 🎨 二、视觉与层次类术语
- - 4️⃣ 卡片 / 面板（Card / Panel）
  - 5️⃣ 模态框 / 弹窗（Modal / Dialog）
  - 6️⃣ 层级（Z-index / Layer）
  - 7️⃣ 阴影（Shadow）
  - 8️⃣ 圆角（Border-radius）
  - 9️⃣ 留白（Padding / Margin / Spacing）
  - 🔟 分隔（Divider / Border）
  - 🎨 背景（Background）
- ✍️ 三、排版与内容类术语
- - 1️⃣1️⃣ 标题与文本（Heading / Body text）
  - 1️⃣2️⃣ 对齐（Alignment）
  - 1️⃣3️⃣ 按钮（Button）
  - 1️⃣4️⃣ 图标（Icon）
- ⚙️ 四、交互与状态类术语
- - 1️⃣5️⃣ 悬停（Hover）
  - 1️⃣6️⃣ 点击 / 激活（Active / Click）
  - 1️⃣7️⃣ 响应式（Responsive）
  - 1️⃣8️⃣ 动画与过渡（Animation / Transition）
- 🧩 五、组合表达示例
- 🧭 六、总结：前端表达的 3 个层次
- 📚 附录：前端术语中英对照速查表（收藏版）

🧭 前端设计与布局常用术语速通指南

—— 写给想用 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	不同屏幕下自动重排的布局模式。