参考研究与设计立场:从一餐到一份
研究沿革:本文保留当轮判断和原稿引用,不覆盖当前v0.3品牌方向。现用方案与本地/公开边界见品牌索引;已撤下的试验网页和中间截图从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 | 暗色场景、大面积层次变化、清楚的焦点;模板与背景是分层资源 | 先确定视觉场景,再让内容与控件占据合适位置 | 首页要有一个食物主场景;不引入粒子、金属球等与食材无关的主视觉 |
| SmoothUI / Dynamic Island | 白色控件通过细描边、阴影和运动形成层次,文档描述展开/收起与减少动效支持 | 选中、加入、确认应可追踪;质感来自细微的深度和状态连续性 | 规格选中底板滑动、肉篮局部确认;只使用短反馈,不用持续循环动画 |
| Norrly | 收集整站截图、滚动视频和设计信息;主页明确强调滚动中的体验 | 评价对象应含页面节奏及状态变化 | 连看首页、详情、选规格、加入和异常恢复,不能只挑一张漂亮首屏 |
| Book of Shapes / Flow Dots | 图形由明确生成规则形成规律与变化,Flow Dots 解释点列如何沿向量场展开 | 一个可复用的形状规则,比装饰集合更适合建立识别 | 用重复切片线条表达切法与规格;本地原创 CSS 图形,不复制站点资产;标明示意,不假装真实肉品尺寸 |
| SwiftUI / Materials / Motion | 框架强调状态驱动;HIG 将材质用于层级区分,要求动效有目的且可减少 | 内容与操作层区分清楚,状态变化应连续且可理解 | 照片保持真实,浮在照片上的少量操作有稳定底色与轻微模糊;页面正文不整片玻璃化。这是 Web 转译,不是 SwiftUI 原生实现 |
| Bencho | 减少环境噪声,将控件置于足够空间中;组件展示选择、拖拽、计数等状态 | “可把玩”的反馈须服务于任务,且保留直接点击途径 | 切法与克重有明确选中反馈;不让用户必须拖动才能买肉,不引入隐蔽手势 |
| Finexus | 完整加载后,深色场景承托标题与导航,品牌识别和视觉主场景明确 | 先确定主次、画面尺度与背景关系,再处理细节 | 可学整体构图;金融科技的蓝黑、粒子和空间场景不直接移植到食品购买 |
这些参考差异很大,不能把它们解释成用户要求某一种颜色。它们共同给出的启发是:层级、材质、形状、内容和交互有相互支持的关系。
我的设计主张
让用户自然地从“这一餐看起来好吃”,走到“这一份选得清楚”。
鼎味的特点来自鲜肉、切配与预约三件事。它既要建立食欲,也要让选择有把握。首页负责让用户看到一种具体的餐桌可能;详情负责把这份期待落实为部位、规格、切法与配送。信任存在于可查的记录和可恢复的状态中。
五个可验证的决定
- 食品是画面的主体。 首屏先建立成菜与原切肉之间的关系,保留看原切的入口。视觉焦点来自照片的尺寸与位置,品牌色只承担有限强调。
- 内容和操作有两个层次。 食物图像、商品名、描述直接排版;工具以有轻微体积的控件出现。避免把所有内容放进相同的圆角卡片。
- 切片成为识别线索。 从切法中抽出重复线条与间隔,应用在品牌小标、切法示意和选择状态;它必须有用途,而不是随处铺纹样。
- 每段内容有自己的节奏。 大场景 → 紧凑商品摘要 → 小型选择 → 信息记录;不让每块都像同一规格的组件演示卡。
- 状态变化是美感的一部分。 选择底板跟随点击,图像在原切与成菜之间过渡,加入后在对应动作位置确认;所有操作无需等待动画,减少动效时保持完整功能。
视觉取舍
使用明亮中性底与深灰文字保留阅读精度,少量深叶绿承担操作与选中,食物本身提供暖色。深叶绿是本轮设计判断,不推断用户偏好,也不暗示健康或检验合格。主要形状随内容变化:照片用较大弧度收边,规格采用连续的分段控制,正文不用容器包裹。字体层级靠字号、行距与分组共同完成,不靠全部加粗。
这种方向接受两个代价:优质图片对画面影响较大;精细交互需要比静态卡片更多的状态处理。当前素材继续使用原型图片,避免借外部作品制造质量假象。真实产品摄影规范仍需后续制定。
V3 页面验证
试验入口见 fresh-market,V1/V2 留作对照。V3 为独立构图与交互文件,不替换公共 token 或当前完整模块包。
评判重点:
- 原切与成菜切换,能否帮助理解“买什么、能做什么”;是否仍看得清商品和价格。
- 选择克重/切法时,视线是否能连续跟踪选中状态、金额和摘要。
- 去掉品牌字样后,照片与操作层的关系、切片图形和内容节奏是否仍有辨识度。
- 缺货或时段不可用时,原来的选择能否保留,下一步是否明确。
反证条件:若精细控件抢过食物、图形无助于理解、需要解释才能找到购买入口,应撤销相应设计;若只得到“柔和”的评价但没有识别度,不能视为方向收敛。
本轮主会话负责设计推导及自评,尚无独立设计评审结论。用户反馈继续用于检验方向,而不是直接替代设计方案。