novalon-website/UI_UX_UE_AUDIT_2026-09-01.md

Dogfood UI/UX/UE 审计 · 2026-09-01

本报告由 Playwright + agent-browser dogfood 采集 + 静态扫描 + 视觉审图自动产出，覆盖 31 个公开路由。 审计目标：UI（视觉/令牌一致性）+ UX（信息架构/叙事模型/转化路径）+ UE（交互/可达性/性能/反馈）合规度。

---

0. 结论先行

维度	评估	关键证据
设计语言统一度	B	字体/动效/缓动 ✅；书法字例外 1 处（/about/brand）
品牌红触达点	A	30/31 路由 ≥3 处；仅 /privacy 违规（2 处）
品牌红使用克制	A	全部 token 化、无大面积滥用
可访问性 WCAG AA	C	29 页页脚 text-gray-500 4:1（需 4.5）；1 页大号装饰数字 1.47:1
移动端触控目标	C	29/31 页页脚链接 18px 高 <24px；首页 CTA 23px
四层叙事完整性	D	6 个详情页 Layer 3 信任层（案例/证言/认证/伙伴）全部 = 0
Hero 视觉差异化	C	所有详情页 Hero 纯文本、无视觉（违反 Hero 变化策略）
交互 / 性能 / 稳定性	B	无 console error；CLS/LCP 全站正常
视觉留白与节奏	C	详情页 Hero 后大空白 200px+；视觉节奏单调
移动端底部固定 Tab bar	C	遮挡正文（"联系我们"被截）

总体评级：C+ （功能/性能合格，叙事模型与可访问性明显欠债）

---

1. 审计范围与方法

1.1 范围

• 31 个公开路由（marketing 组 + privacy/terms + 16 个动态详情页）
• admin 组（共 9 个页面）需登录态，不在本次审计范围
• 视口：desktop 1440×900 + mobile 390×844 + tablet 768×1024（仅核心页）
• 单次首屏截图 90 张（31×desktop + 31×mobile + tier1×tablet + 核心 fullPage 10 张）

1.2 方法

• Playwright（headless chromium）自动化采集
  • 9 维度探针：对比度 / 横向溢出 / 触控目标 / alt / 标题层级 / label / 文本截断 / 颜色频次 / 性能 LCP+CLS
  • 动态探针：console error / 网络失败 / Tab 焦点可见性
• agent-browser 交互态深挖（聚焦 /contact / 导航 / 表单；agent-browser reload 命令有 bug，已切回 Playwright）
• 静态扫描：globals.css 设计令牌 / 颜色硬编码 / framer-motion spring 残留 / shadow-* 使用
• 视觉审图：6 张首屏 + 2 张 fullPage（首页 + contact fullPage）人工审查

1.3 输出

• dogfood-ui-audit/2026-09-01T07-07-49/
  • probes.json —— 31 路由 × 3 视口全量数据
  • summary.md —— 自动分级汇总
  • screenshots/desktop|mobile|fullpage/ —— 视觉证据
• 采集脚本：scripts/audit/ui-audit.mjs（主）+ audit-fullpage.mjs（fullPage 补截）

---

2. P1（必须修复 · 系统性 / 阻断性）

P1-1 ⛔ Layer 3 信任证明层 100% 缺失

影响面：6 个核心详情页 × 4 个 Layer 3 子项 = 24/24 完全为 0 详情：

路由	案例	证言	认证	伙伴
/products/erp	0	0	0	0
/products/bi	0	0	0	0
/products/crm	0	0	0	0
/solutions/finance	0	0	0	0
/solutions/healthcare	0	0	0	0
/services/consulting	0	0	0	0

根因：CONTEXT.md 已明确记录 "Layer 3 信任证明：全新层，现有页面完全缺失"。这是设计债而非 bug，但未启动建立。 修复路径（建议）：

1. /cases 列表页与详情页打通—— 当前 /cases 没有详情链接（详见 P3-2）
2. 详情页增加 "客户案例" Section（logo 墙 + 1-2 段客户故事）
3. 增加 "客户证言" 区块（头像 + 公司 + 职位 + 引言）
4. 增加 "资质认证" 区块（ISO/等保/合规徽标） 优先级：P0（设计 DNA 的核心叙事层，整个转化链路的最短板）

P1-2 ⛔ 页脚 text-hint 对比度 4:1（需 4.5）—— 29 页

影响面：全站统一页脚分隔符 |，29/31 路由受影响 证据：

[29 页 / 29 处] rgb(107, 114, 128) ON rgb(10, 14, 20) | ratio=4.0 | need=4.5
  span.hidden.sm:inline :: "|" (14.625px/400)

根因：页脚 src/components/layout/footer.tsx:166 直接写死 text-gray-500（Tailwind 内置色 #6B7280），未走设计令牌 text-hint（#7C8CA5）。globals.css 同时定义了 --color-text-hint: #7C8CA5（line 83）和 #94A3B8（line 415），但页脚没用。 修复：将 text-gray-500 → text-text-hint（统一使用 --color-text-hint），并在 hover/focus 提深一档（如 --color-text-secondary）以确保 4.5:1。文件改动 1 处，全站生效。 验证：跑 npm run check:contrast 应全部通过。 优先级：P1（已知遗留，IMPECCABLE_AUDIT.md 6/20→14/20→17/20 评分轮次中"剩 text-hint"被点名未修）

P1-3 ⛔ /about "服务编号" 大号数字对比度 1.47:1

证据：

[1 页 / 6 处] rgba(100, 116, 139, 0.3) ON rgb(255, 255, 255) | need=3 | ratio=1.47
  div.text-4xl.md:text-5xl :: "01" (63px/900)
  div.text-4xl.md:text-5xl :: "02" (63px/900)
  div.text-4xl.md:text-5xl :: "03" (63px/900)

影响：WCAG 大文本阈值 3:1，实际 1.47:1 —— 几乎不可见。 判定：服务编号（Service Number 设计语言）的"大号浅色水印"风格，设计意图是大背景装饰数字，但数字属可见元素（非纯装饰），不能跳过对比度规则。 修复选项（任选一）：

1. 加 aria-hidden="true" + CSS opacity: 0.5（明确纯装饰属性，跳过 WCAG 文本检查）
2. 提高 rgba alpha 到 0.5+（约 3:1）
3. 改为 text-text-hint（#7C8CA5）作为视觉弱化，但对比度 5.8:1 反而过高—— 需要找到既弱化又合规的色值（如 #BCC3CE alpha=0.6 → 约 3.1:1） 优先级：P1（设计意图可保留，但需正式标记或调色）

P1-4 ⛔ /methodology "服务编号" 装饰数字对比度 1.13:1

证据：

[1 页 / 16 处] rgba(100, 116, 139, 0.1) ON rgb(255, 255, 255) | need=3 | ratio=1.13
  span.text-4xl.font-bold :: "01" (45px/700)

影响：更夸张，几乎完全不可见 —— alpha=0.1 意味着 10% 不透明度，是水印。 修复：同 P1-3，建议走 aria-hidden + opacity 0.3 路线。 关联：4 处 /team 页相同问题（4 处 text-[11px] eyebrow + "正式成立"/"研发启航" 等小字）。

---

3. P2（重要修复）

P2-1 移动端触控目标 < 24px —— 29/31 页

根因聚类（29 页统一模式）：

[29 页 / 145 处] 56x18 | a       例: "贸易零售","教育培训","医疗健康"...
[29 页 / 29 处]  86x18 | a       例: "ERP 管理系统"
[29 页 / 29 处]  91x18 | a       例: "CRM 客户管理"
[29 页 / 29 处]  73x18 | a       例: "BI 数据平台"
[29 页 / 29 处]  90x18 | a       例: "CMS 内容平台"
[29 页 / 29 处] 101x18 | a       例: "SDS 供应链决策"
[29 页 / 29 处]  79x18 | a       例: "OA 协同办公"
[29 页 / 29 处]  84x18 | a       例: "睿视 NovaVis"
[29 页 / 29 处]  42x18 | a       例: "制造业"

根因：Footer 链接行高不足 18px（页脚 src/components/layout/footer.tsx 链接文本容器 py-1.5 → 18px = 1.5 × 12px row + 14px text）。 WCAG 2.2 AA 2.5.8：最小 24×24 CSS px，或 间距豁免（与相邻目标间距使 24px 圆不重叠）。 修复选项：

1. 提页脚链接 py-2.5 (20px) → 不够 24px。建议 py-3 或 min-h-[28px]
2. 检查间距豁免条件（页脚是垂直列表，行距 > 6px 可豁免）—— 当前垂直间距通常 ≥4px，可能豁免。需人工评估
3. 首选：在链接容器设 min-h-[24px] + inline-flex items-center 优先级：P2（WCAG 2.2，间距豁免可能成立，但若间距不足则违规）

P2-2 移动端首页底部 Tab bar 遮挡内容

证据：mobile 首屏截图，联系我们 被截断显示为"联系"。 根因：固定底部 Tab bar 高度约 64px，但页面 main 容器未加 pb-16 / pb-[64px]。 影响：所有 mobile 页面底部内容都会被遮挡，不仅是首页。 修复：Footer 全局加底部安全区适配，或 Tab bar 组件本身在页面 main 上加 padding-bottom: 64px。 优先级：P1（影响所有 mobile 用户，视觉完整性问题）

P2-3 详情页 Hero 大量空白（200px+）

影响页面：/about /products/erp /products/bi /products/crm /products/oa /products/cms /products/sds /solutions/* /services/* /methodology /contact 全员 证据：见各页首屏截图，Hero 顶部 ~200px 空白（视口起始到 eyebrow 之间）。 根因：Hero 组件固定 min-h-screen 或 py-32 padding，未根据内容自适应。 修复：

1. 桌面端 Hero padding 收敛（pt-24 md:pt-28 而非 pt-32）
2. 或允许 Hero 高度按视口比例（min-h-[calc(100vh-200px)]）
3. 首选：填充内容（呼应 P1-1 Layer 3 —— 详情页可加 hero 区装饰） 优先级：P2（视觉节奏问题，影响"高级感"）

P2-4 详情页 Hero 缺乏视觉差异化（Hero 变化策略违反）

证据：所有详情页 Hero 均为纯文本（左对齐 + eyebrow + 标题 + 副文 + CTA），无图、无装饰、无动效背景。 CONTEXT.md 约束："色调+背景纹理+布局微调" 三类变化允许；当前零差异化。 影响：详情页之间同质化严重，削弱 HSI 架构（Hub-Spoke-Independent）的 Spoke 与 Independent 区分度。 修复：为每个 Spoke/Independent 详情页实现 Hero 视觉变体（如 ERP 几何网格 / CRM 数据流 / 安全产品盾牌纹样等语义化背景）。 优先级：P2（设计 DNA 层级，渐进式推进）

P2-5 /about/brand 字体语言不一致（书法字）

证据：睿新致远 使用书法字体（毛笔字），其他所有页面均为统一的黑体（思源黑体变体）。 判定：设计意图？还是回归 bug？

• 若有意——需要正式确认（CONTEXT.md 当前未提及书法字），并在设计文档中明确
• 若无意——替换为与全站统一的字体 影响：跨页面字体语言断裂；移动端尤为突兀（书法字在小尺寸可读性下降）。 优先级：P2（需张翔决策——保留还是回滚）

P2-6 /privacy 品牌红触达点仅 2 处（违反 ≥3 处约束）

证据：brandCount = 2（仅 rgb(196, 30, 58) 1 个变体） 其他 30 路由均 ≥4 处。 修复：在 /privacy 页面加 1 处品牌红触达点（建议：Section eyebrow 或结尾 CTA）。 优先级：P2（硬约束违反，但只 1 页）

---

4. P3（体验优化）

P3-1 /cases 列表页缺失详情路由

根因：scripts/audit/ui-audit.mjs 从 /cases 抓链接 0 条（列表页可能是客户端渲染，curl 抓不到）。 手动确认：/cases 页面是否真有可点击的详情链接？若无—— /cases 详情页路由 /cases/[slug] 在静态审计中未发现真实数据。 影响：Layer 3 信任层（案例）的依赖项阻塞。 优先级：P0（与 P1-1 联动）

P3-2 /privacy 与 /terms 缺少 h1 验证

证据：自动探针发现 /privacy 无 h1。 影响：SEO + 可访问性。 优先级：P3

P3-3 表格焦点无可见指示（2 页）

证据：/about 与 /contact Tab 焦点元素 outline: none 且无 box-shadow 替代。 修复：增加 focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2。 优先级：P3（键盘可达性）

P3-4 数据大字报单页品牌红元素过多

证据：/about/brand 用 4 个品牌红数据（2026 / 10+ / 6 / 100%），/team 用 3 个（2026 / 10+ / 6）。 CONTEXT.md 约束："数据高亮（≤2 个/页）"—— 这是软约束，但当前突破。 建议：保留 ≤2 个品牌红数据高亮，其余用次级色。 优先级：P3

P3-5 视觉审查观察：装饰元素与标题文字重叠

证据：首页 mobile Hero 标题"驱"字右上角有红色装饰点压在文字边缘（红点是 Hero 背景"星座图"的一部分）。 影响：轻微 —— 装饰与文字重叠在"软化设计"语境下可接受，但需确认无更多文字被装饰挤压。 优先级：P3

P3-6 /products/oa 触控目标违规数 +1（14 vs 13）

证据：其他产品详情页统一 13 处，唯独 oa 多 1 处。 修复：定位 OA 页独有的 1 处 <24px 元素，可能是某个 spec 卡片或步骤列表项。 优先级：P3

---

5. 静态扫描补充

检查	结果	说明
spring 残留	✅ 0	grep type:'spring' = 0，IMPeccable 评分项保持
ease-ink 缓动	✅ 已定义	--ease-ink: cubic-bezier(0.22, 1, 0.36, 1)
阴影系统	⚠️ 1 异常	solution-service-card.tsx:128 使用 shadow-blue-500/20，非设计令牌。应迁到 shadow-brand-hover 或新设计令牌
颜色硬编码	⚠️ 1 处	footer.tsx:166 text-gray-500（与 P1-2 同源）
text-[11px] 极小字号	⚠️ 1 页	/team "正式成立"/"研发启航" eyebrow 11px——过小不易识别，建议 ≥12px

---

6. 修复优先级矩阵（建议）

优先级	项	工作量	决策依赖
P0	P1-1 Layer 3 信任层 + P3-1 /cases 详情	L (大型)	内容策划 + CMS 字段
P0	P1-2 页脚 text-hint → token	XS (1 文件)	无
P1	P1-3 / P1-4 大号装饰数字 aria-hidden	XS	张翔决策（保留/调色）
P1	P2-2 移动端 Tab bar 遮挡	XS	无
P2	P2-1 移动端触控目标	S	张翔决策（间距豁免判定）
P2	P2-3 Hero 空白	S	无
P2	P2-5 书法字决策	XS	张翔决策
P2	P2-4 Hero 视觉差异化	L	设计 + 实现（按产品逐个）
P2	P2-6 /privacy 品牌红补齐	XS	无
P3	P3-2 /privacy h1	XS	无
P3	P3-3 焦点可见	XS	无
P3	P3-4 品牌红数据高亮 ≤2	XS	无
P3	P3-5 装饰与文字重叠	XS	无
P3	P3-6 /products/oa 唯一 1 处	XS	无
P3	shadow-blue-500 → token	XS	无

SLA 建议：

• P0（4 项）应在 Phase 2 首批闭环
• P1（3 项）同批推进
• P2（4 项）按张翔决策后分批
• P3 顺带处理

---

7. 证据清单（可复核）

dogfood-ui-audit/2026-09-01T07-07-49/
├── probes.json                            # 31 路由 × 3 视口全量探针数据
├── summary.md                              # 自动分级汇总
└── screenshots/
    ├── desktop/    31 张首屏（home/about/about-brand/cases/contact/methodology/products/team/products-erp...）
    ├── mobile/     31 张首屏
    ├── tablet/     8 张首屏（核心页）
    └── fullpage/   10 张长图（home/products/products-erp/solutions-finance/services-consulting/about/contact × 2 视口）

复跑命令：

node scripts/audit/ui-audit.mjs                          # 全站
node scripts/audit/audit-fullpage.mjs                    # 核心页 fullPage

---

8. 已知遗留 & 与 IMPECCABLE_AUDIT 对齐

项	IMPECCABLE 轮次	本次	状态
text-hint 对比度	6/20 → 14/20 → 17/20 仍"剩 text-hint"	P1-2 仍未修	1 行 CSS 可解，建议本批闭环
字体加载	已修	本次未复查	—
渐变文字 / 弹性 / 特效库	全部 0	确认	✅
阴影系统	文档已定义	1 处 shadow-blue-500 不在令牌系统	新发现

---

9. 不在本次范围

• admin 模块（9 个页面）—— 需登录态，建议下一轮单独审计
• API Routes / 路由处理函数 —— 性能 + 安全审计
• 浏览器兼容性（Firefox / WebKit / Safari）—— e2e 已有基线（test:visual:browsers）
• Lighthouse / Core Web Vitals 整体 —— 已纳入 CI，本次只采样 CLS/LCP

---

---

10. 修复记录（2026-09-01 同日闭环）

10.1 Phase 1 —— 4 文件 5 处

#	文件	改动	对应项
1	src/components/layout/footer.tsx:149	text-gray-500 → text-text-hint（走令牌，消除硬编码）	P1-2
2	src/app/globals.css:1280-1294	移动端 main / [role="main"] / footer 增加 64px + env(safe-area-inset-bottom) 安全区	P2-2 / P1-4
3	src/app/(marketing)/products/product-detail-content-v3.tsx:420	ERP 专题链接加 py-0.5（23px → 27px）	P3-6（已修正归因为 /products/erp 非 /products/oa）
4	src/components/detail/solution-service-card.tsx:128	shadow-blue-500/20 → shadow-brand（纳入令牌系统）	§5 静态扫描
5	同上 CSS 块	nav/header/footer 交互元素 mobile min-height/width: 44px	P2-1 部分

关键坑：marketing layout 使用 <div role="main"> 而非真 <main> 元素，首版 CSS 只写 main {} 不命中 —— 表现为 CSS chunk 已含新规则但截图 MD5 完全一致。选择器必须写 main, [role="main"]。且只补 main 不够，footer 在 main 之外同样被 64px Tab bar 截断。

10.2 Phase 2 —— 5 文件 8 处（残存 P1 清零）

用户决策：装饰数字走 aria-hidden；页脚触控认定 WCAG 2.5.8 间距豁免不改；/about/brand 书法字保留。

执行时对决策做了必要拆分 —— 残存 3 处 P1 不全是装饰元素：

类别	位置	处理	理由
A 装饰	about-content-v4.tsx:212（01/02/03）	aria-hidden="true"	与右侧 value.title 并列，无独立语义
A 装饰	team-content-v3.tsx:82（01-05）、:115（01-03）	aria-hidden="true"	同上，1.13:1
A 装饰	product-detail-content-v3.tsx:288、solution-detail-content-v3.tsx:378	aria-hidden="true"	客户名首字占位图形；探针盲区（渐变背景被跳过），同类问题一并修
B 语义	brand-content.tsx:129、team-content-v3.tsx:206	text-text-secondary/70 → /80	真实副文案，不可 aria-hidden；4.35:1 → 5.74:1，视觉几乎无变化
B 语义	brand-content.tsx:271	text-text-muted → text-text-secondary	「正式成立/研发启航」标签在 bg-tertiary #F1F5F9 上 4.34:1 → 9.45:1

对决策的纠正：B 类若按「一律 aria-hidden」处理，会把公司简介与里程碑年份从屏幕阅读器中删除 —— 用可访问性缺陷替换对比度缺陷。已按语义拆分处理。

10.3 探针同步改造（否则证据无法闭环）

ui-audit.mjs 原本不识别 aria-hidden，改完页面数字不会下降。已增加：

• 对比度检测：命中 [aria-hidden="true"] 祖先则跳过，并累计 decorativeSkipped 让豁免量可见（防止用 aria-hidden 刷绿）
• 触控检测：命中 aria-hidden 的可聚焦元素计入 ariaHiddenFocusable 单独上报，不静默跳过（隐藏内容不应可聚焦，属 ARIA 误用）

10.4 验证数据

指标	修复前基线	Phase 1 后	Phase 2 后
P1	29	3	0
P2	34	34	34
P3	0	0	0
有对比度违规的页面	29	3	0
触控目标违规总数	441	441	441（用户决策：认定豁免，不改）

豁免核对（证明未刷绿）：/about decorativeSkipped=3、/team =8（5+3）、/about/brand =0；三页 ariaHiddenFocusable 全为 0。

门禁：type-check 0 error · check:contrast 7/7 ✅ · eslint（5 个受影响文件）0 error · 全站 31 路由复跑 0 P1。

产物：dogfood-ui-audit/2026-09-01T07-59-30/（终态）、2026-09-01T07-34-54/（Phase 1）。

---

11. P0-1 Layer 3 定位修正（重要）

审计把「Layer 3 信任层 100% 缺失」列为 P0。用户选定其为下一步后做了数据源勘察，结论需要修正：

Layer 3 子项	数据源	现状
客户案例	prisma/seeds/case-studies.ts	空数组，注释：「公司成立于 2026-01-15，处于首批客户共创阶段，暂无对外可验证的客户案例，因此保持为空数组。待真实案例获得客户授权后再补充。」
客户证言	src/lib/constants/	无任何 testimonial 数据文件
资质认证	同上	无任何 certification 数据文件
合作伙伴	同上	无任何 partner 数据文件

即 Layer 3 不是「忘了做」，而是刻意留空以避免编造未授权的客户案例（公司成立仅 7 个月）。这符合 AGENTS.md 的「零编造」原则，但意味着：

• 案例 / 证言 不可由 AI 生成 —— 虚构客户案例属商业诚信风险
• 该层只有拿到真实内容授权后才能建立

零编造前提下可推进的替代信任信号（不虚构事实）：

1. 方法论透明度 —— /methodology 已有真实内容，在详情页交叉引用「我们怎么做」
2. 团队资历 —— /team 有真实 strengths/culture 数据，复用为「谁来做」
3. 成立与里程碑透明 —— /about/brand 有真实里程碑，可作为「坦诚的早期公司」叙事
4. 服务承诺 / 交付标准 —— 需业务确认，属可设计项（不虚构已发生的事实）

建议：把 P0-1 从「填充案例」改为「建立 Layer 3 骨架 + 接入上述 4 类真实信号」，案例/证言位留占位待授权后填充。

---

报告生成时间：2026-09-01 审计脚本：scripts/audit/ui-audit.mjs、scripts/audit/audit-fullpage.mjs 审计员：dogfood (Playwright + agent-browser)