# 参考研究与设计立场：从一餐到一份

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

> 2026-09-22 · 设计研究及 V3 页面试验；未发布 Foundation。

## 设计责任

用户对 V1/V2 的反馈是体验证据，不是颜色、圆角或风格的施工指令。设计师应提出可解释的整体判断，再让实际页面接受反证。V1 把鲜明理解为高对比，V2 把舒服理解为柔化，同一页面骨架没有改变；两版都不足以证明独立的品牌理念。

## 参考证据与本地转译

已用 Chromium 打开用户提供的七个站点，查看实际首屏；补看 Book of Shapes 的 Flow Dots、SmoothUI 的 Dynamic Island 文档，以及 Apple HIG 的 Materials / Motion。Finexus 首次截图停在加载层，等待资源完成后重新查看；Norrly 的文本抓取超时，但浏览器已成功打开。以下只记录实际看到的内容；未购买模板或使用第三方付费素材，未把全部组件标为已验证。

| 参考 | 观察 | 可借鉴机制 / 转译条件 | 鼎味本地判断 |
|:---|:---|:---|:---|
| [GetLayers](https://www.getlayers.ai/) | 暗色场景、大面积层次变化、清楚的焦点；模板与背景是分层资源 | 先确定视觉场景，再让内容与控件占据合适位置 | 首页要有一个食物主场景；不引入粒子、金属球等与食材无关的主视觉 |
| [SmoothUI](https://smoothui.dev/) / [Dynamic Island](https://smoothui.dev/docs/components/dynamic-island) | 白色控件通过细描边、阴影和运动形成层次，文档描述展开/收起与减少动效支持 | 选中、加入、确认应可追踪；质感来自细微的深度和状态连续性 | 规格选中底板滑动、肉篮局部确认；只使用短反馈，不用持续循环动画 |
| [Norrly](https://norrly.io/) | 收集整站截图、滚动视频和设计信息；主页明确强调滚动中的体验 | 评价对象应含页面节奏及状态变化 | 连看首页、详情、选规格、加入和异常恢复，不能只挑一张漂亮首屏 |
| [Book of Shapes](https://bookofshapes.com/) / [Flow Dots](https://bookofshapes.com/patterns/flow_dots) | 图形由明确生成规则形成规律与变化，Flow Dots 解释点列如何沿向量场展开 | 一个可复用的形状规则，比装饰集合更适合建立识别 | 用重复切片线条表达切法与规格；本地原创 CSS 图形，不复制站点资产；标明示意，不假装真实肉品尺寸 |
| [SwiftUI](https://developer.apple.com/cn/documentation/swiftui/) / [Materials](https://developer.apple.com/design/human-interface-guidelines/materials) / [Motion](https://developer.apple.com/design/human-interface-guidelines/motion) | 框架强调状态驱动；HIG 将材质用于层级区分，要求动效有目的且可减少 | 内容与操作层区分清楚，状态变化应连续且可理解 | 照片保持真实，浮在照片上的少量操作有稳定底色与轻微模糊；页面正文不整片玻璃化。这是 Web 转译，不是 SwiftUI 原生实现 |
| [Bencho](https://bencho.dev/) | 减少环境噪声，将控件置于足够空间中；组件展示选择、拖拽、计数等状态 | “可把玩”的反馈须服务于任务，且保留直接点击途径 | 切法与克重有明确选中反馈；不让用户必须拖动才能买肉，不引入隐蔽手势 |
| [Finexus](https://www.finexusgroup.com/) | 完整加载后，深色场景承托标题与导航，品牌识别和视觉主场景明确 | 先确定主次、画面尺度与背景关系，再处理细节 | 可学整体构图；金融科技的蓝黑、粒子和空间场景不直接移植到食品购买 |

这些参考差异很大，不能把它们解释成用户要求某一种颜色。它们共同给出的启发是：层级、材质、形状、内容和交互有相互支持的关系。

## 我的设计主张

**让用户自然地从“这一餐看起来好吃”，走到“这一份选得清楚”。**

鼎味的特点来自鲜肉、切配与预约三件事。它既要建立食欲，也要让选择有把握。首页负责让用户看到一种具体的餐桌可能；详情负责把这份期待落实为部位、规格、切法与配送。信任存在于可查的记录和可恢复的状态中。

### 五个可验证的决定

1. **食品是画面的主体。** 首屏先建立成菜与原切肉之间的关系，保留看原切的入口。视觉焦点来自照片的尺寸与位置，品牌色只承担有限强调。
2. **内容和操作有两个层次。** 食物图像、商品名、描述直接排版；工具以有轻微体积的控件出现。避免把所有内容放进相同的圆角卡片。
3. **切片成为识别线索。** 从切法中抽出重复线条与间隔，应用在品牌小标、切法示意和选择状态；它必须有用途，而不是随处铺纹样。
4. **每段内容有自己的节奏。** 大场景 → 紧凑商品摘要 → 小型选择 → 信息记录；不让每块都像同一规格的组件演示卡。
5. **状态变化是美感的一部分。** 选择底板跟随点击，图像在原切与成菜之间过渡，加入后在对应动作位置确认；所有操作无需等待动画，减少动效时保持完整功能。

### 视觉取舍

使用明亮中性底与深灰文字保留阅读精度，少量深叶绿承担操作与选中，食物本身提供暖色。深叶绿是本轮设计判断，不推断用户偏好，也不暗示健康或检验合格。主要形状随内容变化：照片用较大弧度收边，规格采用连续的分段控制，正文不用容器包裹。字体层级靠字号、行距与分组共同完成，不靠全部加粗。

这种方向接受两个代价：优质图片对画面影响较大；精细交互需要比静态卡片更多的状态处理。当前素材继续使用原型图片，避免借外部作品制造质量假象。真实产品摄影规范仍需后续制定。

## V3 页面验证

试验入口见 [fresh-market](../proof/experiments/fresh-market/README.md)，V1/V2 留作对照。V3 为独立构图与交互文件，不替换公共 token 或当前完整模块包。

评判重点：

- 原切与成菜切换，能否帮助理解“买什么、能做什么”；是否仍看得清商品和价格。
- 选择克重/切法时，视线是否能连续跟踪选中状态、金额和摘要。
- 去掉品牌字样后，照片与操作层的关系、切片图形和内容节奏是否仍有辨识度。
- 缺货或时段不可用时，原来的选择能否保留，下一步是否明确。

反证条件：若精细控件抢过食物、图形无助于理解、需要解释才能找到购买入口，应撤销相应设计；若只得到“柔和”的评价但没有识别度，不能视为方向收敛。

本轮主会话负责设计推导及自评，尚无独立设计评审结论。用户反馈继续用于检验方向，而不是直接替代设计方案。