# 多色低饱和导航试验

> 历史迭代记录。用户已认可雾面呼吸与最终预约文案并固定f894dc7；后续清理撤掉配色/构图切换，当前入口统一为/app。以下逐轮试验段落只解释来路，不覆盖模块README的当前状态。

用户授权以nginx反代提供可操作对照，待反馈，不覆盖当前版。

首页鲜讯试验：用户反馈此前文字过轻，希望成为引导合理预约、便于按需备货的公告。当前采用燕麦色横向便笺、细陶红侧边，小标题「明日鲜讯」，主句「明日猪肉，已开放预约。」，辅助说明「提前安排，我们也好按需备货。」与右上角到店时间。主句15px，辅助文字11px；不旋转、不做厚描边。时间仅为原型示例，框外说明，不接入库存/供货事实。

便笺替换旧收尾；「安排明日」走现有nav到计划页，采用计划页现有默认明日定位，不新增支付或配送逻辑。下方自主选肉入口继续保留。侧边框与纸面区分公告和导航，不用倒计时、库存警报或催促文案。

纸面材质复评：用户认可比例，但指出斜向渐变偏金属、下方邀请空泛。因此保留公告尺寸与层级，去掉方向性高光，采用中性暖纸底色、低对比度灰度纤维噪声和下沿薄影。原不规则点阵移至便笺下沿，在邀请两侧渐淡，文字中央留空；「把喜欢的，带上桌。」使用宋体优先字体栈、13px字级和缓慢墨色呼吸，不新增封闭按钮框。选择纸面而非玻璃高光，也不恢复大面积点阵，以免重新争抢主图。字体依赖终端可用字体，跨设备字形一致性仍待真机验证；减少动态偏好下关闭呼吸。

本轮实际截图复核：首页比例与导航位置保留；公告、选肉入口互不覆盖；自动检查覆盖邀请跳至商品区并聚焦标题、预约跳计划及减少动态设置。材质感属于待用户确认的视觉判断，不以功能测试代替。修改仅在home-news.css的试验作用域，稳定版不变；回退此轮CSS即可恢复上一轮材质。维护责任：主会话，采用决定：用户。

再次复评（用户指出几乎看不出变化）：上轮高频噪声虽生效，正常393px宽截图不足以支持“纸纤维可辨认”的结论；13px宋体也仍像辅助文字。当前用明确的短纤维SVG替代滤镜噪声，以可见的下沿纸边补充厚度；邀请提升至16px、600字重和更深墨色，两侧渐隐短线与疏点阵留出中央空白，箭头使用26px淡色圆面（整个按钮仍至少44px可点）。不靠动画才能识别入口。初次复截图的纤维过长、像装饰短横，随后缩小到61×46px平铺尺寸。首屏及导航几何、两条点击路径与减少动态检查通过；视觉接受度继续由用户反馈，不宣称跨浏览器材质一致。

最新复评（字形显大、锋利）：撤回16px半粗宋体与两侧短线，改为14px常规无衬线、400字重，文字固定墨色，不参与动画；箭头去掉圆底并减细笔画。呼吸转交给两侧不规则halftone：7.2秒循环，点粒分三组错峰轻微缩放，整体透明度在0.48—1之间变化，中央留空，不挤压文字。预约便笺及首屏布局不变。鼠标悬停/键盘聚焦入口时暂停点阵，系统减少动态偏好下完全静止。已截取0/3.6秒两相位检查，完成预约、选肉、导航与尺寸回归；低性能真机动画成本尚未实测，后续如出现掉帧优先退为仅整体透明度变化。

用户澄清后的当前取舍：认可的是衬线与箭头圆底，不认可16px半粗字的锋利和体量；不应把反馈解释为撤换整个风格。因此恢复宋体优先字体栈，保留14px、400字重，恢复26px暖色箭头圆底。halftone改为4.8秒一轮、透明度0.12—1、较深的陶棕点粒，扩大明暗变化而不放大文字；文字保持静止可读。检查新增字号/字重/字体栈/圆底断言，以及0和2.4秒相位的透明度差值；已截图检查最浓相位，原有两条路径与首屏几何回归通过。便笺、主图和导航未调整。

中心扩散修订：恢复邀请两侧渐隐短线。原桥接区上缘点阵不适合中心强调，试验版改用study-invitation-field.tsx：240个固定种子的非网格颗粒，以文字中心（排除箭头）为中心，呈不规则椭圆分布，向外位移并渐淡；文字笔画附近降低颗粒浓度，外围使用椭圆雾化遮罩。保留14px衬线、暖色箭头圆底、4.8秒循环与减少动态支持。只构建home-news试验产物，稳定origin产物不重建；恢复原组件调用和本轮CSS可回退。新增测试检查分割线、点数与文字/点阵中心对齐；最浓相位截图用于检查阅读干扰及外沿越界。真机流畅度仍未验证。

向下浮动试验：用户认可中心构图，要求将忽隐忽现改为自上而下浮动。保留同一组颗粒、字体、圆底及短线；移除整体透明度呼吸和径向扩散，每颗粒以5.6px/s向下循环，利用上下雾化边缘完成衔接，不反向回弹。文字和箭头固定不动，减少动态时恢复静态点阵。检查0/1.2秒相位的向下位移与恒定透明度，核对两相位截图；点击、首屏几何及导航回归仍执行。仅更新试验产物，未改稳定版。

试验结论：用户反馈向下浮动像“屏幕脏了”，不采用。当前恢复此前认可的中心不规则扩散、4.8秒明暗呼吸及边缘雾化，删除下落动画与对应参数；14px衬线、箭头圆底、两侧短线和其余布局保持不变。此反馈表明本区域更适合整体有节奏的显隐，不适合持续颗粒下落。

雾面底色试验（当前）：用户提议舍弃halftone。首页试验不再渲染点阵组件，改用文字中心下方的一片暖陶色柔散底色，固定位置与尺寸，只以4.8秒周期改变透明度，不做高光、背景玻璃模糊或文字模糊。保留14px常规宋体、箭头圆底、两侧渐隐短线；便笺与页面比例不动。旧点阵源文件保留作研究记录，不导入当前构建。已比较最浅/最深相位截图，测试确认点阵不存在、底色对齐文字中心、明暗范围、减少动态设置及既有导航/选肉路径；主会话维护，视觉采用待用户评审，真机性能未验证。恢复组件引用和对应CSS可回退到上一研究方案。

源码仍在runtime/origin-home.tsx；通过编译开关分离试验。构建时在deployment.md所列docker run中增加`-e STUDY_VARIANT=home-news`，产物为generated/home-news-app.js与home-news-build-info.json。默认origin构建保留原收尾。/morandi使用试验产物及home-news.css；/warm、/origin仍使用原产物。没有通过CSS伪元素或DOM篡改伪造可见文案。

鲜讯验证：实际截图检查后，便笺高度小于主图一半，与选购入口不相交，选购入口完整位于导航上方；「安排明日」进入计划、返回首页、三导航、构图切换、商品规格及四档外屏检查通过。主图与首屏容器尺寸未改；通过减小中间区间距容纳公告。是否替换正式首页仍待用户对比例的反馈。

入口：http://100.90.0.100:4304/ → nginx /navigation-study → 同网络preview:3000；iframe /morandi共用当前暖色应用，只添加morandi-navigation.css。4303/app、4301展示与后台保持原样。

三种构图：默认轻轻探出、同一图形收在栏内、上一版青玉色块。切换仅启停样式与改变图形位置，不刷新iframe或重置规格；不同端口的浏览器演示数据独立。研究限定导航，食品照片和正文色彩不变。

图形以陶粉、灰紫、燕麦色三片展开面组合，借餐次卡片表达日常安排，但可能被读成叶片或花，需要用户反馈。常驻彩色与选中分开：三入口选中统一加深字色和细下划线。保留导航标签，不用装饰承担全部识别任务。

屏幕393×852，顶部59px、宿主栏44px；iframe为393×749，直接绘制到屏幕底部。系统横条绝对定位、透明背景、pointer-events:none，不参与排版。按用户最新要求，不额外预留34px避让；已移除safe-area-preview.css及其高度补偿，首页和详情按实际749px自然布局。悬浮导航占60px不变。4303/4301旧版暂保留原模拟方式作对照。

当前微调：只将悬浮导航整体上移18px，保留其60px布局占用，不恢复额外底部padding。导航纸面下沿与系统横条上沿相距4.5px；页面仍使用完整749px，购买栏与弹窗不受此局部调整影响。上一版对照保留原位置。

验证目标：iframe底部与屏幕底部重合、悬浮导航盒下沿731、纸面下沿725、横条上沿729.5，无额外底部padding，购买栏正常贴底；不再要求与旧715px内部坐标相同。系统横条仅为原型模拟，不宣称覆盖所有真实设备/键盘情形。真机和无障碍审查仍待开展。

部署：仓库根目录 `docker compose -f docs/design/prototypes/customer-miniapp/compose.yml up -d navigation-proxy`。后端重建容器导致IP变化时，执行同Compose的`restart navigation-proxy`，重新解析上游。nginx仅服务此演示反代，不修改宿主其他应用；无认证，仅用于受控网络。停止试验用`stop navigation-proxy`，不停止preview、不删数据。

验证：`PLAYWRIGHT_MODULE=/absolute/path/to/playwright/index.mjs node docs/design/prototypes/customer-miniapp/verify-navigation-study.mjs`。覆盖真实nginx入口、切换保留状态、三导航、商品选择、固定视窗与四档外屏、源码访问拒绝。主会话维护本试验，用户决定是否采用。

实测上述检查通过；nginx配置测试通过，100.90.0.100:4304/navigation-study返回200，已查看首页及计划截图。初次根路径跳转曾带上容器8080端口，已设置absolute_redirect off并通过根入口重跑。当前拉取镜像digest：sha256:df221db836e1754089190208cee7eeda94f233197056426eda74a43ab1abeac2。