前端设计与布局常用术语速通指南
在利用 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)
让方形元素的边角变圆润。

