# 视觉分析｜从首选 H5 还原鼎味品牌风格

> 研究沿革：本文保留当轮判断和原稿引用，不覆盖当前v0.3品牌方向。现用方案与本地/公开边界见[品牌索引](README.md)；已撤下的试验网页和中间截图从f894dc7恢复。现用商标的形体保留，消费者配色已转暖肉色。

> 分析日期：2026-09-22
> 样本：`docs/design/prototypes/customer-miniapp/source/dingwei-meat-market/`
> 结论级别：provisional；当前用于补全 Foundation，不替代人类发布确认

## 1. 观察到的视觉世界

首选 H5 不是冷白色的生鲜货架，也不是黑金餐饮会所。它把三种材料放在一起：

1. **肉铺纸**：`--paper` 作为大面积环境，带有包装纸、桌面和日常的温度；
2. **骨白内容层**：`--bone` 作为商品、订单和事实的安静承载面，避免界面像促销海报；
3. **真实食材**：肉、陶盘、纸张、香草和自然光形成可感知的材料证据，图像保留留白和纹理。

因此品牌风格不是“乡土复古”，而是**把家庭餐桌的温度和供应链记录的准确放在同一张纸面上**。

## 2. 证据 → 推理 → 设计约束

| 证据 | 观察 | 归纳的品牌约束 |
|:--|:--|:--|
| `hero.jpg`、`pork-loin.jpg`、`green-pork.jpg` | 暖色自然光、浅色桌面/陶器、食材纹理明显，画面有留白 | 图像先让人看见材料和食物，不用黑背景和过度高光制造奢侈感 |
| `src/tokens/design-tokens.css` | 纸面、骨白、砖红、鼠尾草、深墨、低对比边线 | 颜色按环境/内容/承诺/计划分工，不做彩色状态墙 |
| `src/components/brand.tsx` | `FreshLabel`、`JustRightScale`、`MealRail`、`Timeline`、`DingweiBalance` | 品牌识别来自“事实如何被组织”，不只来自 Logo |
| `src/styles/app.css` | 22px 页面内边距、细线、12–20px 圆角、180/320ms 短动效 | 低噪声、中低密度、可触控但不肥厚；留白是信息层级的一部分 |
| 首页鲜切卡 + 购买动作 | 商品、分割时间、批次、份量和动作相邻 | 承诺 CTA 前必须有足以做决定的事实 |
| 餐轨 + Balance | 日、午晚餐、采购量和肉类估算逐级汇总 | “刚好”要可解释，不能只给一个漂亮分数 |
| 肉篮浮球 | 全局入口常驻，加入后短暂展开反馈 | 购物入口可见但不持续打断；反馈服务于确认，不服务于促销 |

## 3. 视觉性格

用关系而不是形容词描述：

- **温暖，但不模糊**：暖纸面负责降低距离，标签和时间线负责提高确定性；
- **朴素，但不简陋**：少量品牌色、细线和自然图像形成秩序，不靠复杂装饰堆价值；
- **专业，但不居高临下**：数字、批次和单位解释过程，不用健康权威压迫选择；
- **有照顾感，但不替用户决定**：推荐、Balance 和计划给理由，最终承诺仍由用户触发。

## 4. 角色化颜色

当前 Foundation token 的语义映射如下，具体值以 `docs/design/tokens/tokens.json` 为准：

| 角色 | 视觉任务 | 使用位置 | 不应做什么 |
|:--|:--|:--|:--|
| `color.surface.page` | 肉铺纸环境 | 页面底、留白、外框 | 不作为信息卡的强调色 |
| `color.surface.raised` | 骨白事实层 | 商品、订单、摘要、弹层 | 不堆成无差别卡片墙 |
| `color.brand.mark` | 鼎味识别 | Logo、少量标记 | 不覆盖整页 |
| `color.action.promise` | 当前唯一承诺 | 确认、加入、按菜买肉 | 不表示普通链接、折扣和所有可点击元素 |
| `color.status.success` | 计划/事实已完成或可恢复 | 已安排、已保存、可继续 | 不伪造真实支付/履约成功 |
| `color.status.warning` | 用户需要注意的条件 | 截止、时段、待确认 | 不制造倒计时焦虑 |
| `color.status.blocking` | 停止/不可逆/异常 | 失败、超时、不可用 | 不用作品牌装饰 |

砖红的品牌感来自稀缺和位置，不来自覆盖面积；鼠尾草的价值来自“平衡/计划/照顾”，不来自通用成功绿。

## 5. 版式和形状

- 页面以约 `390–430px` 移动画布为基准，内边距约 `22px`，信息在窄屏上保持可读；
- 标题使用较紧的字距和克制重量，正文给足行高；英文 eyebrow / 时间 / 批次用小型元数据，不抢中文事实；
- 采用 `20px` 左右内容卡圆角、`12px` 左右控件圆角；圆角是触控和纸面柔和度，不是“App 卡片风格”本身；
- 线条比阴影更重要；阴影只用于浮层、手机框和肉篮浮球的层次，不制造漂浮促销块；
- 一个页面先有内容层级，再决定是否需要卡片。能用标题、细线、标签解决的问题，不再包一层卡片。

## 6. 图像与图标

- 食材图优先自然光、浅色桌面/陶盘/纸张和可辨认纹理；裁切保留材料关系，不把肉切成无法判断的颜色块；
- 菜谱图可以有更强的食欲，但仍保持暖色、真实份量和家庭餐桌的尺度；
- 图标使用线性、圆角、低装饰的 Lucide 语法；图标解释动作或状态，不承担品牌插画的全部情绪；
- `CutPattern` 将切丝、薄片、厚片和切块转成简单线条，是“标准可选”的品牌化证据，不是装饰图标库。

## 7. 动效与状态

当前 H5 的 `180ms / 320ms` 短动效可以保留为 provisional：页面进入、餐次更新、加入肉篮和标尺选择应有轻微确认；状态不可用时不使用夸张摇晃或红色闪烁。减少动态效果时，所有信息和恢复动作仍必须完整可见。

## 8. 需要反复检查的压力场景

1. 首页同时出现鲜切卡、预购配送和菜谱横滑时，砖红是否仍只有一个承诺焦点；
2. 计划包含午餐/晚餐、多菜、已预约和待确认时，餐轨是否仍能读懂；
3. 配送超时或网络未知时，页面是否先说明已知状态，再给恢复路径，而不是直接显示失败红块；
4. 长中文、窄屏、系统字号放大时，标签、批次、时间和价格是否仍不会互相覆盖；
5. 后续 operations/backoffice 引入高密度表格时，是否仍保留事实先于承诺，而不是复制消费者大圆角和大图。