【品牌提升之官网建设】

品牌提升之官网建设

首页的详细原型（wireframe / hi-fi prototype）和VI标准（Visual Identity，视觉识别规范）

一、首页详细原型（Prototype）

这里先分成 结构布局 和 功能模块，然后给出一份内容层级示意。

1.1 首页结构布局（参考B2B/企业服务类网站）

• 顶部导航区

  • Logo（左上角，统一VI）
  • 主导航菜单（关于我们 | 产品与服务 | 行业方案 | 客户案例 | 资源中心 | 联系我们）
  • 语言切换（中/英）
  • 搜索框（可选）

• 首屏 Banner

  • 全屏大图/视频（突出品牌调性）
  • 价值主张 Slogan（简洁有力）
  • CTA按钮（了解更多 / 联系我们 / 免费演示）

• 核心价值展示

  • 3~4个核心卖点图标卡片（比如：全球化、灵活定制、数据驱动、行业深耕）

• 产品与服务模块

  • ERP核心产品/模块
  • 服务能力（实施、二开、运维、培训）
  • CTA（产品详情）

• 行业解决方案

  • 制造业 / 医药 / 零售电商 / SaaS / 服务业
  • 每个行业有简短描述和「了解更多」链接

• 客户成功案例

  • 2~3个典型客户 Logo+案例简介
  • 视频/图文链接

• 资源中心

  • 白皮书、行业洞察、活动/研讨会报名入口
  • 可做滚动推荐

• 底部信息

  • 联系方式（电话、邮箱、地址）
  • 快速导航
  • 社交媒体（LinkedIn、微信公众号、抖音）
  • 版权信息

---

1.2 首页信息层级（内容优先级）

1. Logo + 核心价值主张
2. 核心CTA（联系我们 / Demo）
3. 产品与服务概览
4. 行业方案入口
5. 客户案例背书
6. 资源中心 & 资讯
7. 联系方式 & 底部信息

---

二、VI标准（Visual Identity）

为了保证首页和后续页面一致性，需要一套视觉规范：

2.1 Logo使用规范

• 主logo（标准色、黑白反白）
• 最小使用尺寸
• 安全留白区

2.2 标准色彩

• 主色：蓝色系（科技/信任感）
  例：#004B9B
• 辅助色：橙色/绿色（活力/创新）
  例：#FF6A00 或 #2ECC71
• 中性色：灰、黑、白用于背景与文字
  例：#333333 #666666 #F5F5F5

2.3 字体规范

• 标题：无衬线字体（黑体/Roboto Bold）

• 正文：清晰易读（思源黑体 / Roboto Regular）

• 字号层级：

  • H1：32px
  • H2：24px
  • 正文：16px
  • 辅助文字：14px

2.4 图形元素

• Icon风格：线性、简洁
• 按钮规范：圆角 6–8px，主色填充，悬停变浅
• 版式：网格系统（12列，常规间距 24px）

2.5 图片风格

• 行业相关场景图（制造车间、医药实验室、零售物流等）
• 高质量、统一色调（偏冷色，科技感）

2.6 交互规范

• 按钮 hover 状态
• 链接 underline
• Banner 自动切换/手动切换