novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
10404dbb3642ef16ffad88709dae1193583856c0
novalon-website/.impeccable/critique/2026-07-23T04-11-33Z__src-app-marketing.md
T
张翔 10404dbb36 chore: sync marketing pages, CMS extensions, tests and project docs 
同步工作区剩余变更，主要包括：
- 营销页面组件与布局持续优化（about/news/services/solutions/team 等）
- 详情页四层叙事组件、布局组件、UI 组件调整
- CMS 数据模型、API 路由、权限、工作流、站内通知、媒体管理扩展
- 新增/补充单元测试与 E2E 测试（cms-workflow.spec.ts 等）
- ESLint 9 迁移、jest/tsconfig 配置更新、依赖调整
- 新增 ADR、CMS 评估文档、Release Review / Acceptance 报告
- 移除水墨装饰组件与大体积未使用字体文件
2026-07-25 08:04:01 +08:00

8.4 KiB
Raw Blame History

target, total_score, p0_count, p1_count, timestamp, slug
target total_score p0_count p1_count timestamp slug
评价当前的系统设计，尤其是UI设计 23 1 3 2026-07-23T04-11-33Z src-app-marketing

Novalon 官网 UI 设计评审

Design Health Score

# Heuristic Score Key Issue
1 Visibility of System Status 3 滚动 reveal、hover 反馈、移动菜单动画均到位；桌面 MegaDropdown 缺少 ESC 关闭的显性提示。
2 Match System / Real World 3 中文商业语言自然，符合 CEO/CIO 决策语境；"Bain 式深红"是内部设计语言，对访客无意义。
3 User Control and Freedom 3 可返回首页，移动菜单支持 ESC/点击遮罩关闭；缺少面包屑或历史路径辅助。
4 Consistency and Standards 2 首页 Hero 为深红色，而 Products/Solutions/Services 页面 Hero 均为白色，同一站点 Hero 调性不一致。
5 Error Prevention 3 无复杂表单或交易流程，CTA 指向明确。
6 Recognition Rather Than Recall 3 导航常驻、卡片标签可见；产品/方案卡片信息密度偏高，需要记忆多个 capability。
7 Flexibility and Efficiency of Use 2 缺少搜索框、快捷入口、方案对比等效率工具；决策者需逐页浏览。
8 Aesthetic and Minimalist Design 2 Hero 色彩面积过大、案例区单条过长、服务卡片标签与指标堆砌，信息噪音偏高。
9 Error Recovery n/a 当前首页无可让用户出错的交互流程。
10 Help and Documentation 2 缺少 FAQ、悬浮帮助、行业白皮书下载入口，首次访问者只能依赖导航。
Total 23/40 Acceptable：基础可用，核心视觉与信息层级需要调整。

Anti-Patterns Verdict

LLM assessment：整体不像是典型 AI 模板——没有渐变文字、大圆角卡片、手绘插画、英雄指标模板等常见 slop。但存在几处训练数据反射：首页使用大面积深红 Hero（明显模仿 Bain 风格）、每个 Section 重复“短线 + eyebrow 标签”、标题过度紧凑（leading-[0.95] + tracking-tight）。这些痕迹让页面在“专业咨询风”与“模板 SaaS 风”之间摇摆。

Deterministic scan：detect.mjs 在 src/app/(marketing) 与 src/components 中命中 1 处警告：

  • src/components/detail/detail.test.tsx:175 的 cubic-bezier(0.34, 1.56, 0.64, 1) 被判定为 bounce-easing。该文件为测试文件，不影响生产 UI，属于生产误报。

Visual overlays：未执行 detect.js 注入式 overlay；改由浏览器快照与源码交叉验证。快照检查未发现生产环境可见的反模式。

Overall Impression

当前首页已经完成了从“水墨装饰风”到“咨询专业风”的转型，数据驱动的叙事和响应式基础都不错。但 首页 Hero 的大面积深红背景直接违反了项目自己定义的品牌红面积 ≤10% 约束，造成视觉冲击过强、与产品/方案/服务页面的白色 Hero 不一致，并且服务卡片在真实 CMS 数据下出现空缺。整体处于“可用但需要校准”的状态，最大机会是把首页 Hero 拉回与其他页面一致的白底克制造型，并压缩案例区的移动长度。

What's Working

  1. 数据驱动叙事明确：Hero、信任区、服务区、案例区都围绕量化指标（500+、98%、40% 等）展开，符合 Bain“答案优先”策略，对 CEO/CIO 有说服力。
  2. 卡片交互一致性高：bain-card（globals.css:689-700）统一了 translateY(-4px) + 阴影 hover，全站卡片体验一致。
  3. 响应式基础扎实：桌面到 375px 移动端布局正确折叠，字号和间距有断点控制。

Priority Issues

[P0] 首页 Hero 深红背景违反品牌约束

  • What：home-content-v14.tsx:55 使用 bg-brand-section（#8B1530），整个 90vh 为深红色，远超 CONTEXT.md 规定的品牌红面积 ≤10%。
  • Why it matters：品牌识别被“一片红”主导，沉稳变成沉重；与 PRODUCTS/SOLUTIONS/SERVICES 的白色 Hero 形成断裂，破坏一致性。
  • Fix：将 Hero 背景改回 #FFFFFF 或 #FAFAFA，品牌红仅用于关键词高亮、CTA 按钮、下划线点缀。
  • Suggested command：$impeccable colorize src/app/(marketing)/home-content-v14.tsx 或 $impeccable layout src/app/(marketing)/home-content-v14.tsx

[P1] 标题排版过紧，可读性下降

  • What：多处使用 leading-[0.95] + tracking-tight + font-black（home-content-v14.tsx:72、153、204、340）。
  • Why it matters：中文字符在紧凑行高下显得拥挤，尤其移动端；与 globals.css 中 --letter-spacing-tighter: -0.03em 地板要求冲突。
  • Fix：标题行高提升至 leading-[1.05] 或 leading-[1.1]，字间距放宽到 -0.02em。
  • Suggested command：$impeccable typeset src/app/(marketing)/home-content-v14.tsx

[P1] 服务首卡片内容缺失/空状态异常

  • What：浏览器检查显示服务首卡片区域异常；代码中 hasValidData 判断依赖 services[0]?.highlights（home-content-v14.tsx:180），空数据时 Fallback 呈现粗糙。
  • Why it matters：首页核心服务区看起来像半成品，直接损害“专业可信”的品牌人格。
  • Fix：补充 CMS 服务数据；若数据不足，使用设计好的占位骨架或降级为静态 3 服务展示。
  • Suggested command：$impeccable harden src/app/(marketing)/home-content-v14.tsx

[P1] 案例区过长，移动端体验差

  • What：CasesSection 在移动端需要滚动 3-4 屏才能看完一个案例，每条内部结构重复（挑战-洞察-方案-成果-评价）。
  • Why it matters：移动用户极易中途放弃；CEO 在手机上无法快速抓住核心价值。
  • Fix：案例列表页仅展示“行业 + 3 个核心指标 + 标题 + 摘要”，详情通过“了解详情”进入独立页面。
  • Suggested command：$impeccable layout src/app/(marketing)/home-content-v14.tsx 与 $impeccable adapt src/app/(marketing)/home-content-v14.tsx

[P2] eyebrow 标签重复，像模板语法

  • What：信任区、服务区、案例区都使用 w-10 h-px bg-brand + 小字 eyebrow 标签。
  • Why it matters：连续出现会触发“AI 生成的 SaaS 页面”既视感。
  • Fix：保留 1-2 个核心 Section 的 eyebrow，其余改用更大的 Section 编号或更克制的标题样式。
  • Suggested command：$impeccable quieter src/app/(marketing)/home-content-v14.tsx

Persona Red Flags

Jordan（首次访问者）

  • 首屏大标题未出现公司名“睿新致远/Novalon”（仅 Header logo，透明背景下不醒目），5 秒内无法确认“这是谁”。
  • 服务区首卡片内容缺失，会误以为网站未加载完成。
  • 案例区篇幅极长，找不到“行业 + 客户”的清晰入口。

Casey（移动用户）

  • Hero 大标题在 375px 下折成多行，深红背景加剧压迫感。
  • CTA 按钮位于 Hero 底部或最底部，中段无固定转化入口，单手拇指难以触及。
  • 案例区单条高度超过一屏，是“长内容地狱”。

中国企业决策者 CEO/CIO

  • 看不到具体客户名称或行业标杆案例，无法验证“你们服务过谁”。
  • 服务区缺少“适合我的企业规模/行业”的入口。
  • Hero 数据指标“500+、6、200+”缺少上下文，对首次访问者不够自明。

Minor Observations

  1. 标题层级语义问题：服务卡片中 subtitle 和 title 都使用了 <h3>，同一卡片内两个 h3，屏幕阅读器会误判层级。
  2. CTA 按钮箭头 hover 动画失效：CTAButton 使用 group-hover:translate-x-2，但按钮本身缺少 group 类，箭头不会动。
  3. Header 切换 abrupt：深红 Hero 上的白色 Header 滚动后切换为白色背景深色文字，过渡缺乏 subtle blur/opacity。
  4. 品牌红与错误色混用：--color-error 与 --color-brand 同为 #C41E3A，未来表单验证时会造成“品牌强调 vs 错误提示”歧义。

Questions to Consider

  1. 首页 Hero 是否必须与其他页面完全不同？如果品牌人格是“沉稳、精致、可信赖”，白色底 + 克制红是否更一致？
  2. 案例区是否应该在首页完整展开？首页更需要“信任快照”而非“全文阅读”。
  3. 服务首卡片的“全宽突出”设计是否必要？当数据为空时，这个设计会留下巨大空洞。
Reference in New Issue View Git Blame Copy Permalink