鼎味肉市DESIGN ATELIER
← 资料目录docs/design/brand/reference-direction-study.md阅读原文

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

研究沿革:本文保留当轮判断和原稿引用,不覆盖当前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 完整加载后,深色场景承托标题与导航,品牌识别和视觉主场景明确 先确定主次、画面尺度与背景关系,再处理细节 可学整体构图;金融科技的蓝黑、粒子和空间场景不直接移植到食品购买

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

我的设计主张

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

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

五个可验证的决定

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

视觉取舍

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

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

V3 页面验证

试验入口见 fresh-market,V1/V2 留作对照。V3 为独立构图与交互文件,不替换公共 token 或当前完整模块包。

评判重点:

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

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