# 设计表达映射参考

> 将用户非专业、模糊的设计表述映射为具体的设计参考值。配合 `color_matching_principles`（配色原理）和 `composition_principles`（构图原理）使用。

---

## 一、位置表达映射

用户说"某物在XX位置"，对应到画面中的参考区域：

### 1.1 九宫格定位

| 用户表达 | 画面区域参考 | 近似坐标 |
|:--------|:-----------|:--------|
| 左上 / 左上角 | 画面左上方区域 | top:10%, left:10% |
| 上中 / 上边中间 / 顶部中间 | 画面上方中间 | top:10%, left:50% |
| 右上 / 右上角 | 画面右上方区域 | top:10%, right:10% |
| 左中 / 左边中间 | 画面左侧中间 | top:50%, left:10% |
| 正中 / 中间 / 正中央 | 画面正中央 | top:50%, left:50% |
| 右中 / 右边中间 | 画面右侧中间 | top:50%, right:10% |
| 左下 / 左下角 | 画面左下方区域 | bottom:10%, left:10% |
| 下中 / 下边中间 / 底部中间 | 画面下方中间 | bottom:10%, left:50% |
| 右下 / 右下角 | 画面右下方区域 | bottom:10%, right:10% |

```
┌──────────┬──────────┬──────────┐
│          │          │          │
│  左 上   │  上 中   │  右 上   │
│          │          │          │
├──────────┼──────────┼──────────┤
│          │          │          │
│  左 中   │  正 中   │  右 中   │
│          │          │          │
├──────────┼──────────┼──────────┤
│          │          │          │
│  左 下   │  下 中   │  右 下   │
│          │          │          │
└──────────┴──────────┴──────────┘
```

### 1.2 半区定位

| 用户表达 | 画面区域参考 |
|:--------|:-----------|
| 在上边 / 在上面 / 顶部 | 画面上半部区域（y: 0–50%） |
| 在下边 / 在下面 / 底部 | 画面下半部区域（y: 50%–100%） |
| 在左边 | 画面左半部区域（x: 0–50%） |
| 在右边 | 画面右半部区域（x: 50%–100%） |

### 1.3 特殊定位

| 用户表达 | 画面区域参考 |
|:--------|:-----------|
| 占据整个 / 全屏 / 铺满 | 画面全覆盖（100%宽×100%高） |
| 靠边 / 贴着边 | 紧贴画面边缘，不留或极少留白 |
| 角落 | 四个角的任意一个，需进一步确认 |
| 偏上一点点 / 往上一点 | 在当前位置基础上向↑偏移约10%–20% |
| 偏下一点点 / 往下一点 | 在当前位置基础上向↓偏移约10%–20% |
| 偏左一点点 / 往左一点 | 在当前位置基础上向←偏移约10%–20% |
| 偏右一点点 / 往右一点 | 在当前位置基础上向→偏移约10%–20% |

---

## 二、颜色表达映射

将用户说的抽象颜色名映射到接近的十六进制色值参考。

### 2.1 红色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 红 / 红色 | `#FF0000` | 🟥 |
| 淡红 / 浅红 | `#FFCCCC` | 🟥 |
| 深红 / 暗红 | `#990000` | 🟥 |
| 中国红 / 正红 | `#CC0033` | 🟥 |
| 酒红 / 枣红 | `#660033` | 🟥 |
| 粉红 / 粉色 | `#FFC0CB` | 🟥 |
| 玫红 / 玫瑰红 | `#FF007F` | 🟥 |
| 西瓜红 | `#FF6666` | 🟥 |
| 豆沙红 | `#CC6666` | 🟥 |
| 桃红 | `#FF66B2` | 🟥 |

### 2.2 橙色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 橙 / 橙色 | `#FF6600` | 🟧 |
| 淡橙 / 浅橙 | `#FFCC99` | 🟧 |
| 深橙 / 暗橙 | `#CC5500` | 🟧 |
| 橘黄 / 橘色 | `#FF9900` | 🟧 |
| 杏橙 | `#FFAA66` | 🟧 |

### 2.3 黄色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 黄 / 黄色 | `#FFCC00` | 🟨 |
| 淡黄 / 浅黄 | `#FFFFCC` | 🟨 |
| 深黄 / 暗黄 | `#CC9900` | 🟨 |
| 金黄 / 金色 | `#FFD700` | 🟨 |
| 米黄 / 奶油色 | `#FFF8DC` | 🟨 |
| 土黄 | `#CC9933` | 🟨 |
| 鹅黄 | `#FFF5C0` | 🟨 |
| 柠檬黄 | `#FFFF00` | 🟨 |

### 2.4 绿色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 绿 / 绿色 | `#00CC00` | 🟩 |
| 淡绿 / 浅绿 | `#CCFFCC` | 🟩 |
| 深绿 / 暗绿 | `#006600` | 🟩 |
| 翠绿 / 亮绿 | `#00FF66` | 🟩 |
| 墨绿 | `#003300` | 🟩 |
| 草绿 | `#66CC00` | 🟩 |
| 青绿 / 青 | `#00CC99` | 🟩 |
| 橄榄绿 | `#666633` | 🟩 |
| 薄荷绿 | `#99FFCC` | 🟩 |
| 荧光绿 | `#66FF00` | 🟩 |

### 2.5 青色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 青 / 青色 | `#00CCCC` | 🟦 |
| 淡青 / 浅青 | `#CCFFFF` | 🟦 |
| 深青 / 暗青 | `#006666` | 🟦 |
| 青蓝 / 碧蓝 | `#0099CC` | 🟦 |
| 蒂芙尼蓝 | `#81D8D0` | 🟦 |

### 2.6 蓝色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 蓝 / 蓝色 | `#0000FF` | 🟦 |
| 淡蓝 / 浅蓝 / 天蓝 | `#99CCFF` | 🟦 |
| 深蓝 / 暗蓝 | `#000066` | 🟦 |
| 宝蓝 / 亮蓝 | `#0066FF` | 🟦 |
| 藏蓝 / 深蓝黑 | `#000033` | 🟦 |
| 湖蓝 | `#33CCFF` | 🟦 |
| 靛蓝 / 紫蓝 | `#333399` | 🟦 |
| 水蓝 | `#66CCFF` | 🟦 |
| 灰蓝 | `#6699CC` | 🟦 |
| 克莱因蓝 | `#002FA7` | 🟦 |

### 2.7 紫色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 紫 / 紫色 | `#9900CC` | 🟪 |
| 淡紫 / 浅紫 | `#CCCCFF` | 🟪 |
| 深紫 / 暗紫 | `#330066` | 🟪 |
| 紫红 | `#CC0066` | 🟪 |
| 薰衣草紫 | `#B399FF` | 🟪 |
| 葡萄紫 | `#660099` | 🟪 |
| 香芋紫 | `#D3A3D9` | 🟪 |

### 2.8 黑白灰色系

| 用户说 | 参考十六进制 | 色样 |
|:-------|:-----------:|:----:|
| 白 / 白色 | `#FFFFFF` | ⬜ |
| 纯黑 / 黑 | `#000000` | ⬛ |
| 深黑 | `#111111` | ⬛ |
| 灰 / 灰色（中性） | `#999999` | ⬜ |
| 浅灰 / 淡灰 | `#CCCCCC` | ⬜ |
| 深灰 / 暗灰 | `#666666` | ⬛ |
| 银灰 / 银色 | `#C0C0C0` | ⬜ |
| 米白 / 象牙白 | `#FFFFF0` | ⬜ |
| 灰白 | `#F5F5F5` | ⬜ |
| 炭灰 | `#333333` | ⬛ |
| 烟灰 | `#555555` | ⬛ |

### 2.9 其他常用

| 用户说 | 参考值 |
|:-------|:-------|
| 透明 / 无色 | `transparent` 或 `rgba(0,0,0,0)` |
| 渐变：红到黄 | `#FF0000` → `#FFCC00` |
| 渐变：蓝到紫 | `#0000FF` → `#9900CC` |
| 渐变：黑到金 | `#000000` → `#FFD700` |
| 渐变：白到透明 | `#FFFFFF` → `rgba(255,255,255,0)` |
| 暖色调 | 偏向红/橙/黄色系 |
| 冷色调 | 偏向蓝/绿/紫色系 |
| 中性色 | 黑白灰或低饱和度色彩 |
| 马卡龙色 | 高明度、低饱和度的柔和粉彩色系 |
| 莫兰迪色 | 低饱和度、灰调的沉稳色系 |
| 撞色 | 色相环上相距≥120°的对比色搭配 |

---

## 三、使用说明

### 3.1 色值使用原则

| 规则 | 说明 |
|:-----|:-----|
| **参考而非绝对** | 以上色值为参考值，实际使用时需根据画面整体效果微调 |
| **淡/浅 = 加白** | 用户说"淡/浅"指在原色基础上加白、降低饱和度、提高明度 |
| **深/暗 = 加黑** | 用户说"深/暗"指在原色基础上加黑、降低明度 |
| **亮/鲜艳 = 提纯** | 用户说"亮/鲜艳"指提高饱和度，向纯色方向调整 |
| **柔/暗沉 = 降纯** | 用户说"柔和/暗沉"指降低饱和度，向灰色方向调整 |

### 3.2 语境判断

| 场景 | 调整方向 |
|:-----|:--------|
| 电商促销 | 颜色偏鲜艳，对比度提高 |
| 高端品牌 | 颜色偏沉稳，降低饱和度 |
| 母婴产品 | 颜色偏柔和，使用淡色调 |
| 科技产品 | 颜色偏冷，蓝灰色系为主 |
| 食品餐饮 | 颜色偏暖，橙红黄为主 |

### 3.3 关联知识

| 知识 | 用途 |
|:-----|:-----|
| `color_matching_principles` | 配色原理、配色方案、60-30-10法则 |
| `composition_principles` | 构图原理、位置摆放、视觉动线 |
| `color_system` | 品牌色板定义、UI色值规范 |