Files

T

- 参考辉瑞、强生、阿斯利康等制药企业官网设计
- 采用专业蓝 + 印章红配色方案
- 明亮健康风格，保留品牌识别
- 包含完整的配色系统、布局结构、UI组件规范、内容策略

2026-02-22 23:54:47 +08:00

11 KiB

Raw Blame History

Novalon 官网医疗健康风格重构设计方案

设计日期： 2026-02-22
设计风格： 医疗健康风格（明亮、温暖、专业）
参考对象： 辉瑞、强生、阿斯利康等全球制药企业官网
项目目标： 全面重构网站，采用医疗健康风格，保留印章红品牌元素

一、设计背景与目标

重构背景

参考 GSK（葛兰素史克）等全球制药企业的官网设计，借鉴其专业、可信赖的视觉风格和情感化叙事方式，对 Novalon 官网进行全面重构。

设计目标

视觉升级：从深色科技风转向明亮医疗健康风格
品牌延续：保留印章红作为品牌识别元素
信任感建立：通过数据展示、情感化叙事增强用户信任
用户体验优化：清晰的信息层级、流畅的交互体验

业务定位

保持金融科技/企业服务的业务定位，借鉴制药企业网站的设计元素：

创新研发展示
客户支持体系
情感化叙事
数据可视化

二、核心配色系统

主色调 - 专业蓝系

名称	色值	用途
主色	`#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

五、情感化叙事与内容策略

品牌叙事框架

核心使命声明

主标题："为金融创新，注入健康力量"
副标题："我们相信，科技应该让每一次金融服务都更安全、更高效、更有温度"

情感化表达原则

用"我们"代替"公司"，建立亲近感
用"帮助/赋能/守护"代替"提供/销售"
用真实数据和案例支撑每一个主张

各 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（移动端）

八、技术栈

核心框架

{
  "next": "16.1.6",
  "react": "19.2.3",
  "react-dom": "19.2.3",
  "typescript": "^5"
}

样式方案

{
  "tailwindcss": "^4.0.0",
  "framer-motion": "^12.34.3"
}

UI 组件库

{
  "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：配色系统更新（高优先级）

更新 globals.css 中的 CSS 变量
更新 colors.ts 中的色彩定义
移除深色模式，统一使用明亮风格

Phase 2：UI 组件重构（高优先级）

重构按钮组件样式
重构卡片组件样式
重构导航栏组件

Phase 3：页面布局重构（中优先级）

重构 Hero 区域
精简首页 Section
添加滚动揭示动效

Phase 4：内容与数据展示（中优先级）

实现数据可视化组件
添加客户支持入口
优化内容策略

Phase 5：响应式适配（中优先级）

测试各断点布局
优化移动端体验
性能优化

十、验收标准

视觉验收

配色方案与设计稿一致
组件样式符合设计规范
响应式布局在各设备正常显示

性能验收

首屏加载时间 < 2s
Lighthouse 性能分数 ≥ 90
无明显的卡顿或延迟

可访问性验收

Lighthouse 可访问性分数 ≥ 95
键盘导航正常
屏幕阅读器兼容
色彩对比度符合 WCAG AA 标准

十一、总结

本设计方案通过医疗健康风格的视觉语言，将 Novalon 的金融科技专业性与医疗行业的信任感完美融合。以专业蓝为主色调传达可信赖，印章红作为品牌识别和强调色，明亮背景营造专业、健康的氛围。

设计系统遵循极简主义原则，注重情感化叙事和数据可视化，确保用户能够快速建立信任并理解企业价值。

设计团队： AI 设计助手
审核状态： 已确认
下一步： 创建实施计划 → 开始开发

11 KiB Raw Blame History Unescape Escape