视觉分析｜从首选 H5 还原鼎味品牌风格
研究沿革：本文保留当轮判断和原稿引用，不覆盖当前v0.3品牌方向。现用方案与本地/公开边界见品牌索引；已撤下的试验网页和中间截图从f894dc7恢复。现用商标的形体保留，消费者配色已转暖肉色。
分析日期：2026-09-22 样本：
docs/design/prototypes/customer-miniapp/source/dingwei-meat-market/结论级别：provisional；当前用于补全 Foundation，不替代人类发布确认
1. 观察到的视觉世界
首选 H5 不是冷白色的生鲜货架，也不是黑金餐饮会所。它把三种材料放在一起：
- 肉铺纸：
--paper作为大面积环境，带有包装纸、桌面和日常的温度； - 骨白内容层：
--bone作为商品、订单和事实的安静承载面，避免界面像促销海报； - 真实食材：肉、陶盘、纸张、香草和自然光形成可感知的材料证据，图像保留留白和纹理。
因此品牌风格不是“乡土复古”，而是把家庭餐桌的温度和供应链记录的准确放在同一张纸面上。
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. 需要反复检查的压力场景
- 首页同时出现鲜切卡、预购配送和菜谱横滑时，砖红是否仍只有一个承诺焦点；
- 计划包含午餐/晚餐、多菜、已预约和待确认时，餐轨是否仍能读懂；
- 配送超时或网络未知时，页面是否先说明已知状态，再给恢复路径，而不是直接显示失败红块；
- 长中文、窄屏、系统字号放大时，标签、批次、时间和价格是否仍不会互相覆盖；
- 后续 operations/backoffice 引入高密度表格时，是否仍保留事实先于承诺，而不是复制消费者大圆角和大图。