张翔
a272e58aaa
- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
76 lines
3.0 KiB
Markdown
76 lines
3.0 KiB
Markdown
## Design Context
|
|
|
|
### Users
|
|
- 中国企业决策者（CEO/CIO/CTO），寻求数字化转型服务
|
|
- 使用场景：评估技术供应商、了解解决方案、发起咨询
|
|
- 期望感受：专业可信、文化共鸣、技术前沿
|
|
|
|
### Brand Personality
|
|
- 沉稳 · 精致 · 可信赖
|
|
- 东方水墨美学 + 现代科技感
|
|
- 不是高高在上的"专家"，而是坐下来一起想办法的"同行者"
|
|
|
|
### Aesthetic Direction
|
|
- **风格**: 水墨雅致 — 以留白和排版取胜，特效点到为止
|
|
- **参考**: Apple 中国官网（极致留白、精准排版、微妙动效）
|
|
- **核心视觉**: 墨韵流光（旋转渐变边框 + 鼠标跟随光晕）— 全站统一
|
|
- **反参考**: 过度装饰、花哨动画、多色渐变、拥挤布局
|
|
|
|
### Design Principles
|
|
|
|
1. **留白即力量** — 内容呼吸，不拥挤。section 间距 generous，卡片内部留白充足
|
|
2. **墨韵流光统一** — 所有卡片共享 ink-glow-border + mouse-follow 系统，但参数克制
|
|
3. **朱砂点睛** — 品牌红 #C41E3A 仅作点缀，不作为主色调。标题中关键词用 font-calligraphy 突出
|
|
4. **层次分明** — 通过字重和间距建立层级，而非颜色多样性
|
|
5. **克制动效** — 动效服务于信息传达，不炫技。hover 效果统一：translateY(-4px) + shadow + glow
|
|
|
|
### Design Tokens
|
|
|
|
#### Colors (Strict)
|
|
| Token | Value | Usage |
|
|
|-------|-------|-------|
|
|
| ink | #1C1C1C | 主文字、深色背景 |
|
|
| ink-light | #595959 | 次要文字（唯一值） |
|
|
| ink-muted | #A3A3A3 | 辅助文字（唯一值） |
|
|
| cinnabar | #C41E3A | 品牌强调色，仅点缀 |
|
|
| paper | #FFFFFF | 主背景 |
|
|
| paper-warm | #FAFAFA | 交替 section 背景 |
|
|
| ink-dark | #0A0A0A | CTA 深色背景 |
|
|
|
|
#### Typography
|
|
| Level | Size | Weight | Usage |
|
|
|-------|------|--------|-------|
|
|
| H1 | text-5xl sm:text-6xl lg:text-7xl | font-normal (brand) | Hero 品牌名 |
|
|
| H2 | text-3xl sm:text-4xl | font-semibold | Section 标题 |
|
|
| H3 | text-lg sm:text-xl | font-semibold | Card 标题 |
|
|
| Body | text-base | normal | 正文描述 |
|
|
| Small | text-sm | normal | 辅助信息 |
|
|
| Mono | text-xs font-mono | normal | 编号标签 |
|
|
|
|
#### Spacing
|
|
| Token | Value | Usage |
|
|
|-------|-------|-------|
|
|
| section-y | py-20 md:py-28 | Section 纵向间距 |
|
|
| card-p | p-6 md:p-8 | 卡片内边距 |
|
|
| grid-gap | gap-6 md:gap-8 | 网格间距 |
|
|
|
|
#### Card System
|
|
- 所有卡片: `ink-glow-border rounded-2xl` + mouse-follow + hover translateY(-4px)
|
|
- 鼠标光晕: `radial-gradient(400px circle, rgba(accent, 0.04), transparent 40%)`
|
|
- 阴影: hover `0 16px 32px rgba(0,0,0,0.08)` / default `0 1px 3px rgba(0,0,0,0.04)`
|
|
- 边框: ink-glow-border 旋转渐变
|
|
|
|
#### Section Backgrounds (Alternating)
|
|
1. Hero: paper (#FFFFFF)
|
|
2. Social Proof: paper-warm (#FAFAFA)
|
|
3. Product Matrix: paper (#FFFFFF)
|
|
4. Challenge: paper-warm (#FAFAFA)
|
|
5. Services: paper (#FFFFFF)
|
|
6. Methodology: paper-warm (#FAFAFA)
|
|
7. Home Solutions: paper (#FFFFFF)
|
|
8. Testimonials: paper-warm (#FAFAFA)
|
|
9. Team: paper (#FFFFFF)
|
|
10. About: paper-warm (#FAFAFA)
|
|
11. News: paper (#FFFFFF)
|
|
12. CTA: ink-dark (#1C1C1C)
|