From 4e5b677739c044c94e3c4a022196b7073ce1a452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sun, 22 Feb 2026 23:54:47 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E5=8C=BB=E7=96=97?= =?UTF-8?q?=E5=81=A5=E5=BA=B7=E9=A3=8E=E6=A0=BC=E9=87=8D=E6=9E=84=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E6=96=B9=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 参考辉瑞、强生、阿斯利康等制药企业官网设计 - 采用专业蓝 + 印章红配色方案 - 明亮健康风格，保留品牌识别 - 包含完整的配色系统、布局结构、UI组件规范、内容策略 --- .../2026-02-22-healthcare-style-redesign.md | 413 ++++++++++++++++++ 1 file changed, 413 insertions(+) create mode 100644 docs/plans/2026-02-22-healthcare-style-redesign.md diff --git a/docs/plans/2026-02-22-healthcare-style-redesign.md b/docs/plans/2026-02-22-healthcare-style-redesign.md new file mode 100644 index 0000000..7a02dda --- /dev/null +++ b/docs/plans/2026-02-22-healthcare-style-redesign.md @@ -0,0 +1,413 @@ +# Novalon 官网医疗健康风格重构设计方案 + +**设计日期：** 2026-02-22 +**设计风格：** 医疗健康风格（明亮、温暖、专业） +**参考对象：** 辉瑞、强生、阿斯利康等全球制药企业官网 +**项目目标：** 全面重构网站，采用医疗健康风格，保留印章红品牌元素 + +--- + +## 一、设计背景与目标 + +### 重构背景 +参考 GSK（葛兰素史克）等全球制药企业的官网设计，借鉴其专业、可信赖的视觉风格和情感化叙事方式，对 Novalon 官网进行全面重构。 + +### 设计目标 +1. **视觉升级**：从深色科技风转向明亮医疗健康风格 +2. **品牌延续**：保留印章红作为品牌识别元素 +3. **信任感建立**：通过数据展示、情感化叙事增强用户信任 +4. **用户体验优化**：清晰的信息层级、流畅的交互体验 + +### 业务定位 +保持金融科技/企业服务的业务定位，借鉴制药企业网站的设计元素： +- 创新研发展示 +- 客户支持体系 +- 情感化叙事 +- 数据可视化 + +--- + +## 二、核心配色系统 + +### 主色调 - 专业蓝系 + +| 名称 | 色值 | 用途 | +|------|------|------| +| 主色 | `#005EB8` | 导航栏、按钮、重要标题 | +| 深色 | `#003B73` | 悬停状态、强调元素 | +| 浅色 | `#00A3E0` | 链接、图标、装饰元素 | +| 极浅 | `#E8F4FD` | 卡片背景、高亮区域 | + +### 品牌色 - 印章红（保留） + +| 名称 | 色值 | 用途 | +|------|------|------| +| 主色 | `#C41E3A` | Logo、CTA 按钮、核心数据 | +| 深色 | `#A01830` | 悬停状态 | +| 浅色 | `#E04A68` | 装饰元素 | +| 背景 | `#FEF2F4` | 浅色模式下的强调区域 | + +### 背景色系 - 明亮健康风 + +| 名称 | 色值 | 用途 | +|------|------|------| +| 主背景 | `#FFFFFF` | 页面主背景 | +| 次级背景 | `#F5F7FA` | Section 背景 | +| 卡片背景 | `#FFFFFF` | 卡片、容器 | +| 悬停背景 | `#EEF2F7` | 交互状态 | + +### 文字色系 + +| 名称 | 色值 | 用途 | +|------|------|------| +| 主文字 | `#1A1A2E` | 标题、重要内容 | +| 次级文字 | `#4A5568` | 正文、描述 | +| 辅助文字 | `#718096` | 提示、标签 | +| 禁用文字 | `#A0AEC0` | 禁用状态 | + +### 边框与分割线 + +| 名称 | 色值 | 用途 | +|------|------|------| +| 主边框 | `#E2E8F0` | 卡片边框、分割线 | +| 次级边框 | `#CBD5E0` | 强调边框 | +| 聚焦边框 | `#005EB8` | 输入框聚焦状态 | + +--- + +## 三、页面布局设计 + +### Hero 区域（首屏） + +**布局结构** +- 高度：`100vh`（全屏） +- 布局：左文右图（桌面）/ 上下布局（移动端） +- 背景：浅蓝渐变 `linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%)` + +**左侧内容（60%）** +- 品牌标语："金融科技 · 智创未来" +- 主标题：大号深色文字 +- 副标题：企业核心价值主张 +- CTA 按钮：印章红"立即咨询" + 蓝色轮廓"了解更多" + +**右侧视觉（40%）** +- 抽象几何图形 + 粒子动画 +- 印章元素（半透明装饰） + +### 首页 Section 结构 + +精简为 **6 个核心板块**： + +| 序号 | Section | 功能 | +|------|---------|------| +| 1 | 信任背书区 | 客户 Logo 轮播 + 资质认证图标 | +| 2 | 核心数据 | 4 个关键指标（动态计数）+ 印章红强调 | +| 3 | 产品服务 | 3 列卡片网格，蓝色图标 + 白色卡片 | +| 4 | 创新研发 | 技术栈展示 + 研发成果数据 | +| 5 | 客户案例 | 精选案例卡片 + 客户评价轮播 | +| 6 | 行动号召 | 印章红背景 + 联系表单入口 | + +### Section 间距 + +| 设备 | 间距 | +|------|------| +| 桌面 | `120px` | +| 平板 | `80px` | +| 移动端 | `60px` | + +### 内容最大宽度 + +| 设备 | 宽度 | +|------|------| +| 桌面 | `1280px` | +| 大屏 | `1440px` | +| 内边距 | `24px`（移动端）→ `48px`（桌面） | + +--- + +## 四、UI 组件设计规范 + +### 按钮系统 + +#### 主要按钮（印章红 CTA） +- 背景：`#C41E3A` → 悬停 `#A01830` +- 文字：`#FFFFFF` +- 圆角：`8px` +- 阴影：`0 4px 12px rgba(196, 30, 58, 0.25)` +- 动效：悬停上移 `2px` + 阴影增强 + +#### 次要按钮（专业蓝） +- 背景：`#005EB8` → 悬停 `#003B73` +- 文字：`#FFFFFF` +- 圆角：`8px` +- 阴影：`0 4px 12px rgba(0, 94, 184, 0.25)` + +#### 轮廓按钮 +- 背景：透明 +- 文字：`#005EB8` +- 边框：`2px solid #005EB8` +- 悬停：背景 `#E8F4FD` + +#### 按钮尺寸 +- 大号：高度 `48px`，内边距 `16px 32px`，字号 `16px` +- 中号：高度 `40px`，内边距 `12px 24px`，字号 `14px` +- 小号：高度 `32px`，内边距 `8px 16px`，字号 `14px` + +### 卡片系统 + +#### 基础卡片 +- 背景：`#FFFFFF` +- 边框：`1px solid #E2E8F0` +- 圆角：`12px` +- 阴影：`0 2px 8px rgba(0, 0, 0, 0.04)` +- 悬停：上移 `4px` + 阴影 `0 8px 24px rgba(0, 94, 184, 0.12)` + +#### 数据卡片（强调型） +- 背景：`#FFFFFF` +- 左边框：`4px solid #C41E3A`（印章红强调） +- 数字：`48px` 印章红 +- 标签：`14px` 深灰 + +#### 产品卡片 +- 背景：`#FFFFFF` +- 边框：`1px solid #E2E8F0` +- 圆角：`16px` +- 结构： + - 顶部：产品图标（专业蓝） + - 中部：产品名称 + 描述 + - 底部：特性标签 + +### 导航栏设计 + +#### 桌面导航 +- 高度：`72px` +- 背景：`#FFFFFF` + 底部阴影 `0 1px 3px rgba(0, 0, 0, 0.08)` +- 布局： + - 左侧：Logo（印章红元素） + - 中间：导航链接 + - 右侧：CTA 按钮（印章红） + +#### 导航链接样式 +- 文字：`#4A5568`（默认）→ `#005EB8`（悬停） +- 当前页：文字 `#005EB8` + 底部 `2px` 下划线 + +#### 移动端导航 +- 高度：`56px` +- 汉堡菜单：点击展开全屏抽屉 +- 抽屉背景：`#FFFFFF` + +--- + +## 五、情感化叙事与内容策略 + +### 品牌叙事框架 + +**核心使命声明** +- 主标题："为金融创新，注入健康力量" +- 副标题："我们相信，科技应该让每一次金融服务都更安全、更高效、更有温度" + +### 情感化表达原则 +1. 用"我们"代替"公司"，建立亲近感 +2. 用"帮助/赋能/守护"代替"提供/销售" +3. 用真实数据和案例支撑每一个主张 + +### 各 Section 内容策略 + +| Section | 情感化标题 | 内容重点 | +|---------|-----------|---------| +| Hero | "金融科技 · 智创未来" | 核心价值主张 + 行动号召 | +| 信任背书 | "与行业领袖同行" | 客户 Logo + 合作故事 | +| 核心数据 | "用数字说话" | 关键指标 + 成长曲线 | +| 产品服务 | "为您的业务赋能" | 痛点解决 + 价值交付 | +| 创新研发 | "持续创新，引领未来" | 技术投入 + 研发成果 | +| 客户案例 | "他们的成功，我们的骄傲" | 真实故事 + 客户评价 | +| 行动号召 | "让我们一起创造价值" | 联系入口 + 承诺保障 | + +### 客户支持体系 + +借鉴辉瑞的客户支持设计： +- 醒目的"客户支持"入口 +- 多渠道联系方式（电话、邮件、在线客服） +- 常见问题 FAQ 快速入口 +- 服务承诺响应时间 + +--- + +## 六、数据可视化与交互设计 + +### 数据展示类型 + +#### 关键指标卡片 +- 布局：4 列网格（桌面）→ 2 列（平板）→ 1 列（移动端） +- 样式：大号数字 + 印章红强调 + 单位标签 + 增长趋势箭头 +- 动效：数字从 0 计数到目标值（2 秒） + +**示例数据** +- 服务客户：500+ 家 +- 交易处理：10 亿+ 笔/年 +- 系统可用性：99.99% +- 客户满意度：98% + +#### 研发管线展示 +- 环形进度图：展示研发项目分布 +- 时间线：展示技术演进历程 +- 技术栈图标：横向滚动展示 + +### 交互设计规范 + +#### 滚动揭示动效 +- 初始状态：`opacity: 0` + `translateY(30px)` +- 进入视口：`opacity: 1` + `translateY(0)` +- 过渡时间：`600ms ease-out` +- 子元素延迟：`100ms` 递增 + +#### 悬停交互 +- 卡片：上移 `4px` + 阴影增强 +- 按钮：上移 `2px` + 阴影扩散 +- 链接：颜色过渡 + 下划线动画 +- 图片：轻微放大 `1.02` + +#### 数字计数动画 +- 起始值：`0` +- 目标值：实际数据 +- 持续时间：`2000ms` +- 缓动函数：`ease-out` +- 触发：进入视口时开始 + +--- + +## 七、响应式设计 + +### 断点系统 + +| 断点 | 宽度 | 设备 | +|------|------|------| +| `sm` | 640px | 小平板 | +| `md` | 768px | 平板竖屏 | +| `lg` | 1024px | 平板横屏/小笔记本 | +| `xl` | 1280px | 桌面 | +| `2xl` | 1536px | 大屏桌面 | + +### 布局适配策略 + +#### 导航栏 +- 桌面（≥1024px）：水平导航 +- 平板（768px-1023px）：简化导航项 +- 移动端（<768px）：汉堡菜单 + +#### Hero 区域 +- 桌面：左右分栏（60% / 40%） +- 平板：上下布局 +- 移动端：单列布局 + +#### 卡片网格 +- 桌面（≥1280px）：3 列 +- 平板（768px-1279px）：2 列 +- 移动端（<768px）：1 列 + +### 字体大小适配 + +#### 标题字号 +- H1：`64px`（桌面）→ `48px`（平板）→ `36px`（移动端） +- H2：`48px`（桌面）→ `36px`（平板）→ `28px`（移动端） +- H3：`32px`（桌面）→ `24px`（平板）→ `20px`（移动端） + +#### 正文字号 +- 正文：`16px`（桌面）→ `15px`（移动端） +- 小字：`14px`（桌面）→ `13px`（移动端） + +--- + +## 八、技术栈 + +### 核心框架 +```json +{ + "next": "16.1.6", + "react": "19.2.3", + "react-dom": "19.2.3", + "typescript": "^5" +} +``` + +### 样式方案 +```json +{ + "tailwindcss": "^4.0.0", + "framer-motion": "^12.34.3" +} +``` + +### UI 组件库 +```json +{ + "lucide-react": "^0.563.0", + "@radix-ui/react-dropdown-menu": "^2.1.16", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "tailwind-merge": "^3.4.0" +} +``` + +--- + +## 九、实施优先级 + +### Phase 1：配色系统更新（高优先级） +1. 更新 `globals.css` 中的 CSS 变量 +2. 更新 `colors.ts` 中的色彩定义 +3. 移除深色模式，统一使用明亮风格 + +### Phase 2：UI 组件重构（高优先级） +1. 重构按钮组件样式 +2. 重构卡片组件样式 +3. 重构导航栏组件 + +### Phase 3：页面布局重构（中优先级） +1. 重构 Hero 区域 +2. 精简首页 Section +3. 添加滚动揭示动效 + +### Phase 4：内容与数据展示（中优先级） +1. 实现数据可视化组件 +2. 添加客户支持入口 +3. 优化内容策略 + +### Phase 5：响应式适配（中优先级） +1. 测试各断点布局 +2. 优化移动端体验 +3. 性能优化 + +--- + +## 十、验收标准 + +### 视觉验收 +- 配色方案与设计稿一致 +- 组件样式符合设计规范 +- 响应式布局在各设备正常显示 + +### 性能验收 +- 首屏加载时间 < 2s +- Lighthouse 性能分数 ≥ 90 +- 无明显的卡顿或延迟 + +### 可访问性验收 +- Lighthouse 可访问性分数 ≥ 95 +- 键盘导航正常 +- 屏幕阅读器兼容 +- 色彩对比度符合 WCAG AA 标准 + +--- + +## 十一、总结 + +本设计方案通过**医疗健康风格**的视觉语言，将 Novalon 的**金融科技专业性**与**医疗行业的信任感**完美融合。以**专业蓝**为主色调传达可信赖，**印章红**作为品牌识别和强调色，**明亮背景**营造专业、健康的氛围。 + +设计系统遵循**极简主义**原则，注重**情感化叙事**和**数据可视化**，确保用户能够快速建立信任并理解企业价值。 + +--- + +**设计团队：** AI 设计助手 +**审核状态：** 已确认 +**下一步：** 创建实施计划 → 开始开发