ascii-layout-guide.md 14 KB
ASCII布局绘图指南
常用字符集
边框字符
┌ ─ ┐ 顶部边框
│ │ 左右边框
└ ─ ┘ 底部边框
├ ─ ┤ 中间分隔
┬ ┴ ┼ 交叉连接
双线边框
╔ ═ ╗ 顶部边框
║ ║ 左右边框
╚ ═ ╝ 底部边框
╠ ═ ╣ 中间分隔
╦ ╩ ╬ 交叉连接
圆角边框
╭ ─ ╮ 顶部边框
│ │ 左右边框
╰ ─ ╯ 底部边框
布局模板
1. 经典三栏布局
┌─────────────────────────────────────────────────┐
│ Header │
├─────────────────────────────────────────────────┤
│ ┌──────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │ │ │
│ │ Left │ │ Main │ │ Right │ │
│ │ Side │ │ Content │ │ Sidebar │ │
│ │ │ │ │ │ │ │
│ └──────┘ └──────────────┘ └──────────────┘ │
├─────────────────────────────────────────────────┤
│ Footer │
└─────────────────────────────────────────────────┘
2. 左侧导航布局
┌──────┬──────────────────────────────────────────┐
│ │ Header │
│ ├──────────────────────────────────────────┤
│ │ │
│ Nav │ Main Content │
│ │ │
│ │ │
│ ├──────────────────────────────────────────┤
│ │ Footer │
└──────┴──────────────────────────────────────────┘
3. 卡片网格布局
┌─────────────────────────────────────────────────┐
│ Header │
├─────────────────────────────────────────────────┤
│ ╭─────────╮ ╭─────────╮ ╭─────────╮ │
│ │ Card 1 │ │ Card 2 │ │ Card 3 │ │
│ ╰─────────╯ ╰─────────╯ ╰─────────╯ │
│ │
│ ╭─────────╮ ╭─────────╮ ╭─────────╮ │
│ │ Card 4 │ │ Card 5 │ │ Card 6 │ │
│ ╰─────────╯ ╰─────────╯ ╰─────────╯ │
└─────────────────────────────────────────────────┘
4. 仪表盘布局
┌─────────────────────────────────────────────────┐
│ Logo [Search Bar] [User] [Settings] │
├──────┬──────────────────────────────────────────┤
│ │ ╔═══════════╗ ╔═══════════╗ │
│ │ ║ Metric 1 ║ ║ Metric 2 ║ │
│ Menu │ ╚═══════════╝ ╚═══════════╝ │
│ │ │
│ Nav │ ┌────────────────────────────────────┐ │
│ │ │ │ │
│ │ │ Chart / Graph │ │
│ │ │ │ │
│ │ └────────────────────────────────────┘ │
│ │ │
│ │ ┌──────────────┐ ┌──────────────┐ │
│ │ │ Table │ │ Activity │ │
│ │ └──────────────┘ └──────────────┘ │
└──────┴──────────────────────────────────────────┘
5. 移动端布局
┌─────────────────┐
│ ☰ Title 🔍 │
├─────────────────┤
│ │
│ Hero Image │
│ │
├─────────────────┤
│ │
│ Content Block │
│ │
├─────────────────┤
│ ╭───────────╮ │
│ │ Card │ │
│ ╰───────────╯ │
│ ╭───────────╮ │
│ │ Card │ │
│ ╰───────────╯ │
├─────────────────┤
│ [ Button ] │
└─────────────────┘
6. 表单布局
┌─────────────────────────────────────┐
│ Form Title │
├─────────────────────────────────────┤
│ │
│ Label: [________________] │
│ │
│ Label: [________________] │
│ │
│ Label: [________________] │
│ [________________] │
│ │
│ ○ Option 1 ○ Option 2 │
│ │
│ ☐ Checkbox 1 │
│ ☐ Checkbox 2 │
│ │
│ [Cancel] [Submit] │
└─────────────────────────────────────┘
7. 模态对话框
┌─────────────────────────┐
│ Dialog Title [×] │
├─────────────────────────┤
│ │
│ Dialog content here │
│ │
│ More information... │
│ │
├─────────────────────────┤
│ [Cancel] [Confirm] │
└─────────────────────────┘
8. 标签页布局
┌─────────────────────────────────────────────────┐
│ [Tab 1] [Tab 2] [Tab 3] │
├─────────────────────────────────────────────────┤
│ │
│ Tab Content Area │
│ │
│ │
└─────────────────────────────────────────────────┘
组件符号
按钮
[ Button ] 普通按钮
[ Primary ] 主按钮
╔═══════════╗ 强调按钮
║ Action ║
╚═══════════╝
输入框
[________________] 文本输入
[_________] 🔍 搜索框
[Select ▼] 下拉选择
图标
☰ 菜单
🔍 搜索
⚙ 设置
👤 用户
🔔 通知
✉ 邮件
❤ 喜欢
⭐ 收藏
✓ 完成
× 关闭
+ 添加
- 删除
↑↓ 排序
◀▶ 翻页
状态指示
● 实心圆点
○ 空心圆点
■ 实心方块
□ 空心方块
☐ 复选框（未选）
☑ 复选框（已选）
◉ 单选按钮（选中）
○ 单选按钮（未选）
绘图技巧
1. 保持对齐
使用等宽字体确保字符对齐，每个区块的宽度应该一致。
2. 标注说明
在布局图旁边或下方添加文字说明，解释各区域功能。
3. 层次表达
- 使用不同的边框样式表示层次（单线、双线、圆角）
- 内嵌的组件使用更细的边框
- 重要区域可以使用双线边框突出
4. 尺寸比例
尽量按照实际比例绘制，让布局图更直观。
5. 响应式标注
可以绘制多个尺寸的布局图，展示响应式变化：
Desktop (>1200px) Tablet (768-1200px) Mobile (<768px)
┌─────────────────┐ ┌──────────────┐ ┌─────────┐
│ [ Layout ] │ │ [ Layout ] │ │ [Layout]│
└─────────────────┘ └──────────────┘ └─────────┘
完整示例
电商首页布局
┌───────────────────────────────────────────────────────────────┐
│ Logo [Search Bar........................] 🛒 Cart 👤 Login │
├───────────────────────────────────────────────────────────────┤
│ Home │ Categories │ Deals │ About │ Contact │
├───────────────────────────────────────────────────────────────┤
│ │
│ Hero Banner / Carousel │
│ [Shop Now] │
│ │
├───────────────────────────────────────────────────────────────┤
│ │
│ Featured Products │
│ │
│ ╭──────────╮ ╭──────────╮ ╭──────────╮ ╭──────────╮ │
│ │ Image │ │ Image │ │ Image │ │ Image │ │
│ │ │ │ │ │ │ │ │ │
│ │ Product │ │ Product │ │ Product │ │ Product │ │
│ │ $99.99 │ │ $99.99 │ │ $99.99 │ │ $99.99 │ │
│ │ [Add ⊕] │ │ [Add ⊕] │ │ [Add ⊕] │ │ [Add ⊕] │ │
│ ╰──────────╯ ╰──────────╯ ╰──────────╯ ╰──────────╯ │
│ │
├───────────────────────────────────────────────────────────────┤
│ Categories │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Icon │ │ Icon │ │ Icon │ │ Icon │ │
│ │Category │ │Category │ │Category │ │Category │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
├───────────────────────────────────────────────────────────────┤
│ About Us │ Contact │ FAQ │ Shipping │ Returns │
│ © 2026 Company Name. All rights reserved. │
└───────────────────────────────────────────────────────────────┘
注意事项
- 使用UTF-8编码确保特殊字符正确显示
- 在Markdown代码块中使用，保持格式不变
- 测试在不同编辑器中的显示效果
- 可以使用在线ASCII绘图工具辅助创建复杂布局
- 保持简洁，不要过度复杂化