前端设计与布局常用术语中英速查指南
旨在帮助开发者用专业术语精准描述页面结构与视觉风格。
当你需要向 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)
弹出的独立层级,用于提示确认或进行交互操作。

