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

1️⃣ 容器（Container）

容器就是 装内容的框。页面的一切几乎都在容器里。

常见容器类型：

• 主容器（Main container）：页面的整体包裹层。
• 内容容器（Content wrapper）：主要内容区。
• 响应式容器（Responsive container）：根据屏幕自动调整宽度。

💬 示例描述：

"页面内容放在一个 1200px 宽的居中容器中。"

2️⃣ 布局（Layout）

布局是 内容怎么摆放。

常见布局：

• 单列布局：从上到下。
• 两列 / 三列布局：左侧栏 + 内容区。
• 栅格布局（Grid layout）：用网格排列元素。
• Flex 布局：灵活的弹性布局，可居中或对齐。

💬 示例描述：

"用三列布局，中间内容居中，两边各 20% 宽。"

3️⃣ 侧栏 / 顶栏 / 底栏

这些是页面最常见的结构区域：

💬 示例描述：

"顶部是固定导航栏，下面是主内容区域。"

🎨 二、视觉与层次类术语

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 才能更懂你。
希望这篇速通指南能让你在前端路上越走越顺 ❤️。

📚 附录：前端术语中英对照速查表（收藏版）

🧩 使用建议：

如果你和设计师沟通页面，可以这样说：

"这个区域留白太少，卡片之间的间距建议增加到 16px。"

如果你用 AI 生成页面，可以这样开头：

"请帮我生成一个响应式页面，包含顶部导航栏、左侧侧栏和三列卡片布局。"

掌握这些词汇，你就能 更精准地描述想法、快速获得理想的前端效果。