# 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. │ └───────────────────────────────────────────────────────────────┘ ``` ## 注意事项 1. 使用UTF-8编码确保特殊字符正确显示 2. 在Markdown代码块中使用，保持格式不变 3. 测试在不同编辑器中的显示效果 4. 可以使用在线ASCII绘图工具辅助创建复杂布局 5. 保持简洁，不要过度复杂化