张翔
10404dbb36
同步工作区剩余变更，主要包括： - 营销页面组件与布局持续优化（about/news/services/solutions/team 等） - 详情页四层叙事组件、布局组件、UI 组件调整 - CMS 数据模型、API 路由、权限、工作流、站内通知、媒体管理扩展 - 新增/补充单元测试与 E2E 测试（cms-workflow.spec.ts 等） - ESLint 9 迁移、jest/tsconfig 配置更新、依赖调整 - 新增 ADR、CMS 评估文档、Release Review / Acceptance 报告 - 移除水墨装饰组件与大体积未使用字体文件
107 lines
8.4 KiB
Markdown
107 lines
8.4 KiB
Markdown
---
|
||
target: 评价当前的系统设计，尤其是UI设计
|
||
total_score: 23
|
||
p0_count: 1
|
||
p1_count: 3
|
||
timestamp: 2026-07-23T04-11-33Z
|
||
slug: 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. 服务首卡片的“全宽突出”设计是否必要？当数据为空时，这个设计会留下巨大空洞。
|