交付出件箱

← 返回出件箱

历史原型图 · 审美评估与继承决策

dev2 · 2026-08-21 · 长官令「做审美评估,之前做得不好可以采用新的,但色系尽量与系统一致」
方法:把老图真渲染出来用眼看(不是读 CSS 空谈),逐张评。

一、评了什么

图 渲染 评价
phase63-tablet-refractive-record-demo(平板 · 屈光检查记录) ✅ 看过 A 级,直接继承视觉语言
phase52-org-insight-ranking(后台 · 机构洞察) ✅ 看过 A- 级,后台页照它
phase68-seat-credential / phase70-seat-edit-drawer ⚠️ 渲染失败 依赖外网 CDN,违规,不作样板

二、phase63(检查记录)—— 好在哪,继承什么

好(这套水准不低,推翻重做是浪费):
1. 三栏工作台分工清楚:左=儿童/历史/眼轴缩略曲线,中=录入,右=完成度+摘要+待补录
2. 完成度圆环(86%/64%)+「待补录 2 项」 —— 把"还差什么"变成可视化,专业感强
3. 「与上次可比检查相比」橙卡(OD 眼轴 +0.16mm / 间隔 94 天)—— 真业务价值,不是装饰
4. 字段行统一:标签 + OD/OS 两列 + 右侧状态勾;分节用蓝/紫/琥珀圆角图标区分
5. 色彩克制:蓝为主,紫/琥珀只做点缀,大面积留白

继承:设计令牌、卡片与分节图标、状态勾、完成度环、上次对比卡、字段行结构。

不能照搬(必须改):
1. 🔴 它是 11 英寸平板横屏三栏,C 端家长是手机竖屏 360px —— 布局要重做成
单列 + 可折叠段(参照品 B 也是这个形态)
2. 🔴 术语密度对家长过高(DS/DC/AX/UCT/ACT/NPC…)—— C 端要降门槛:
每段加「如何填写ⓘ」、必填标星、非必填默认折叠
3. 🔴 它是纯手工录入工作台;C 端主路径是拍照识别自动填,视觉重心要放在
"上传 → 自动填 → 核对",而不是一格一格敲

三、phase52(后台洞察)—— 后台页照它

好:左侧深色侧边栏 + 顶部四张指标卡(数字大、图标弱化、副说明灰字)+ Tab 切换 +
排行卡片(序号徽章、标签胶囊、行内次级指标、右侧"看证据 >"下钻)。
这正是我们「子席位」页要的:统计卡 + 聚合列表 + 明细下钻,结构一一对应。

要改进的一点:它的排行卡每张占两行、信息重复("续费概率·待 Phase 53"每行都重复一遍),
我们的子席位列表改用紧凑表格(一行一机构),把下钻放行尾按钮 —— 密度更高、扫读更快。

四、结论:继承 + 局部升级,不推翻

部分 决策
设计令牌(色/字/圆角/阴影) 完全沿用(--primary:#2563eb 那套;H5 用 #2fa37c 绿)
PC 后台「子席位」页 照 phase52 结构,列表改紧凑表格(升级点)
开通/管控弹窗 phase68/70 不能用(CDN 违规),自己按令牌重画,交互照现网席位页
C 端检查单 继承 phase63 视觉语言,布局重做为手机单列 + 折叠段 + 拍照回填优先(升级点)
C 端完成度/上次对比 继承(眼轴变化对比对家长同样有价值,而且是我们比参照品强的地方)

五、我要做的三处"新的"(老图没有,但值得加)

  1. 上传即回填的视觉反馈:回填字段高亮 + 「自动填」小标 + 识别中/成功/失败三态
    —— 老图没有这条路径,是本期核心
  2. 手机单列折叠段:必填段默认展开、选填段折叠,长表单才填得下去
  3. 紧凑表格式聚合列表:比 phase52 的双行卡片密度高

⚠️ 全程守两条:色系与系统一致 · 零外网 CDN(老图那两张就是栽在 CDN 上,渲染直接报错)

云机环境 · 非验收证据。