前端设计与布局常用术语中英速查指南

'点击按钮后弹出一个居中的模态框，背景带有半透明遮罩。'

6. 层级（Z-index / Layer）

控制元素在 Z 轴上的前后叠放关系，决定谁遮挡谁。

示例描述：

'导航栏固定在顶部并始终保持在内容上层。'

7. 阴影（Shadow）

为元素增加立体感和层次感。

类型：

• 盒子阴影（box-shadow）
• 文字阴影（text-shadow）

示例描述：

'给卡片添加轻微阴影，模拟浮起效果。'

8. 圆角（Border-radius）

让方形元素的边角变得圆润，提升亲和力。

常用数值参考：

• 小圆角：4px（常规）
• 大圆角：12px（更柔和）

示例描述：

'卡片边角圆润，半径设置为 12px。'

9. 留白（Padding / Margin / Spacing）

合理的留白是布局通透的关键。

• Padding：内容与边界之间的距离。
• Margin：元素与外部其他元素之间的距离。

示例描述：

'增加卡片之间的间距，让布局呼吸感更强。'

10. 分隔（Divider / Border）

用于视觉分区，如横线、竖线或边框。

示例描述：

'在标题和内容之间添加一条浅灰色分隔线。'

11. 背景（Background）

背景可以是纯色、图片、渐变或纹理。

示例描述：

'整体背景为浅灰色，卡片使用纯白底色。'

三、排版与内容类术语

12. 标题与文本（Heading / Body text）

文字层级结构：

• H1：主标题
• H2：副标题
• P：正文段落
• Label / Placeholder：辅助说明或输入提示

示例描述：

'标题使用加粗大号字体，正文颜色稍浅。'

13. 对齐（Alignment）

• 左对齐：适用于正文内容
• 居中对齐：适用于标题、按钮
• 右对齐：适用于价格、操作栏

示例描述：

'图片居中显示，文字内容左对齐。'

14. 按钮（Button）

按钮分类：

• 主要按钮（Primary）
• 次要按钮（Secondary）
• 危险按钮（Danger）
• 禁用状态（Disabled）

示例描述：

'右下角放置一个蓝色主按钮，圆角略大。'

15. 图标（Icon）

快速传达含义的符号，如搜索、删除、设置等。

示例描述：

'搜索框左侧添加一个放大镜图标。'

四、交互与状态类术语

16. 悬停（Hover）

鼠标移入时的状态变化反馈。

示例描述：

'按钮悬停时变深色并增加阴影。'

17. 点击 / 激活（Active / Click）

用户点击时的即时视觉反馈。

示例描述：

'点击后按钮高亮显示。'

18. 响应式（Responsive）

页面能自动适配不同屏幕设备。

示例描述：

'移动端隐藏侧栏，顶部栏折叠成汉堡菜单。'

19. 动画与过渡（Animation / Transition）

让交互过程更自然流畅。

示例描述：

'模态框弹出时从底部平滑滑入。'

五、组合表达示例

你可以尝试这样描述一个完整页面：

'上方是固定顶栏（白底 + 阴影），左侧有浅灰侧栏（占 20% 宽度），中间是主内容区，里面有几张卡片（圆角 + 阴影），卡片之间留 16px 间距，页面宽度自适应。'

这样的描述能让 AI 或开发团队更准确地理解你的需求。

六、总结：前端表达的 3 个层次

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

附录：前端术语中英对照表

使用建议：

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

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

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

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

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