94 lines
2.7 KiB
Markdown
94 lines
2.7 KiB
Markdown
# 菲西尔智能 Landing Page 设计方案
|
||
|
||
**日期**: 2026-05-02
|
||
**项目**: fischer-site Landing Page 重新设计
|
||
**状态**: 已批准
|
||
|
||
---
|
||
|
||
## 1. 项目概述
|
||
|
||
### 1.1 目标
|
||
为上海菲西尔智能科技有限公司重新设计 Landing Page，打造具有差异化、现代化、国际化的企业智能叠加服务 landing page。
|
||
|
||
### 1.2 核心定位
|
||
- **品牌定位**: AI 赋能者 - "让现有业务系统叠加 AI 能力"
|
||
- **目标受众**: 企业决策者(A)、中层管理者(B)、渠道合作伙伴(D)
|
||
- **核心行动**: 立即咨询(A) + 预约演示(C)
|
||
- **差异化**: 现代、有特色、摆脱传统企业网站沉闷感
|
||
|
||
---
|
||
|
||
## 2. 设计约束
|
||
|
||
### 2.1 技术实现
|
||
- 全新开始，不基于现有 index.html
|
||
- 纯 HTML/CSS/JS 单页面实现
|
||
- 轻量、加载快、易部署
|
||
|
||
### 2.2 内容保持
|
||
- 核心业务: AI+物业 / AI+资管 / AI+CRM
|
||
- 品牌名称: 菲西尔智能
|
||
- 联系方式和咨询表单
|
||
|
||
---
|
||
|
||
## 3. 三个设计方案
|
||
|
||
### 方案一: 新锐科技 + 极简留白
|
||
**参考**: Linear + Apple + 高级感
|
||
|
||
| 元素 | 设计规格 |
|
||
|------|----------|
|
||
| 背景色 | `#0a0a0a` 深黑 |
|
||
| 文字色 | `#ffffff` 纯白 |
|
||
| 强调色 | 单一品牌色点缀 |
|
||
| 标题 | 超大(clamp 72-96px)、极多留白 |
|
||
| 动效 | 克制优雅：淡入、轻微位移、hover 微交互 |
|
||
| 特点 | 呼吸感强、品牌色点缀、信任感与未来感并存 |
|
||
|
||
### 方案二: 杂志美学 + 3D 沉浸
|
||
**参考**: The Verge + Spline + WebGL 背景
|
||
|
||
| 元素 | 设计规格 |
|
||
|------|----------|
|
||
| 背景色 | 渐变暗色背景 |
|
||
| 文字色 | 亮色文字 |
|
||
| 卡片 | 玻璃拟态效果 |
|
||
| 排版 | 杂志式大图、编辑感标题、不对称布局 |
|
||
| 动效 | 3D 背景、视差滚动、卡片悬浮、粒子/光效 |
|
||
| 特点 | 视觉冲击强、现代感足、记忆点突出 |
|
||
|
||
### 方案三: 高端质感 + 电影叙事
|
||
**参考**: 徕卡官网 + 高端品牌 + 叙事性滚动
|
||
|
||
| 元素 | 设计规格 |
|
||
|------|----------|
|
||
| 配色 | 黑白主调 + 胶片颗粒 + 暖色或冷色点缀 |
|
||
| 排版 | 故事线驱动、大量图片/视频、慢节奏阅读 |
|
||
| 动效 | 缓慢 zoom、交叉溶解、胶片噪点质感 |
|
||
| 特点 | 沉浸感强、品牌调性高、差异化显著 |
|
||
|
||
---
|
||
|
||
## 4. 通用信息架构
|
||
|
||
所有方案共享以下信息架构：
|
||
|
||
1. **Hero Section**: 品牌标语 + 核心 CTA
|
||
2. **Pain Points**: 目标客户的核心痛点
|
||
3. **Solutions**: 三大解决方案 (物业/资管/CRM)
|
||
4. **Approach**: 实施方法论
|
||
5. **Trust Metrics**: 信任背书/数据
|
||
6. **Contact**: 咨询表单/预约演示
|
||
|
||
---
|
||
|
||
## 5. 成功标准
|
||
|
||
- [ ] 三个方案都能在浏览器中正常打开
|
||
- [ ] 响应式设计，适配桌面和移动端
|
||
- [ ] CTA 按钮清晰可见
|
||
- [ ] 加载速度 < 3秒
|
||
- [ ] 无 AI 味的文案表达
|