# Study 14：安静的选购空间

2026-09-23 · 用户认可“安静的专业”，要求尊重消费者边界。保持原型方向provisional。

后续局部反馈：消费者认为封闭圆角规格框偏老土。现改为上下细线、左右开放的浅色区域，底色向两侧渐淡；去掉克重和切法整排的嵌套底板，仅选中项保留白底与清楚轮廓。规格整体性由分区底色和对齐维持。已查看393×715与320×568截图，并检查393×659默认首屏完整、三个视口无横向溢出、切法选择同步汇总。[更新截图](quiet-proof/open-sku-715.png)。此为样式调整，未重跑完整业务审查。

## 编排判断

首页承担情绪开场；商品详情承接已经产生的选购意图。撤掉“这一份，照你的做法”的宣言，将提问式“切成什么样、买几份”改为“切法、数量”。简短标签负责定位，等宽图形、选中轮廓、实时总量负责解释结果。做法参考由消费者主动展开。

以食材小幅照片与品名、价格构成上部，规格放在独立的浅色单面中，资料入口与购买栏在下方明确收束。图片和留白随可用高度共同变化。固定购买栏使用不透底的白色，避免内容文字从下面透出。默认状态的食材介绍与下厨提示进入资料抽屉，保持主动索取的信息边界。

照片尺寸和间距有上下限；不强行压缩所有屏幕。393×659、715、852常规首屏完整结束在资料入口，未裁切控件或藏起规格。320×568与展开参考、菜谱上下文或放大文字时允许自然滚动，不以固定高度裁剪内容。

## 实现与代价

`StudyProductInfo`复用原版资料抽屉，保留商品描述、配送入口、批次、示例声明和烹饪提示。关闭后焦点返回资料入口，规格与数量仍在当前商品页。资料多一次主动打开，换取更完整的主购买区域；来源与检验仍在商品信息旁直接可达。

`purchase-stage`以商品所在app-frame高度分配空间，而非只按浏览器窗口推算；底部资料入口与购买栏有明确间隔。现有SKU、计价、做法建议和模拟交易规则沿用。

## 本地验证

`verify-counter.mjs`增加默认393视口无额外滚动、资料入口完整位于底栏之上、说明默认关闭、打开与关闭保留800g×2份薄片、Escape关闭及焦点恢复检查。既有8款商品、4视口、五切法同排、44px触控、键盘选择、做法建议、计价和售罄检查继续执行。另实际操作计划→菜谱→商品→资料→加购，确认菜谱来源上下文仍有效；货架回归通过。

证据：[结果](quiet-proof/results.json)、[393×715](quiet-proof/393-715.png)、[393×852](quiet-proof/393-852.png)、[资料抽屉](quiet-proof/info.png)。上游93个文件仍与35c0d16一致。验证为本机Chromium，未声称真机或独立审美验收；原版计划语义分歧、跨路由数量恢复等既有债务仍开放。

可恢复性：展示改动局限实验组件、转换与CSS；4300原版保留。主设计会话负责后续体验反馈，本轮不提交或推送Git。