章节目录
首页信息架构
品牌、产品、场景与咨询的内容层级
品牌做什么，产品是什么，适合哪些场景，如何进一步沟通。长页通过不同的信息层级，将这些问题串成一条连续的阅读路径。
- 01
品牌认知
新能源主视觉、品牌导航与第一处入口。
- 02
产品介绍
认证标识、储能系统、设备与电芯。
- 03
品牌与业务优势
应用场景、团队、制造能力、品牌愿景与可持续发展。
- 04
资讯与合作咨询
新闻、常见问题、咨询入口与页脚导航。
品牌视觉体系
科技与自然主题下的品牌识别
明亮的品牌色、深色背景与自然场景共同构成视觉方向。浅色区域承载产品和信息，深色区域突出品牌与技术。
品牌图形与正反色
完整标志和独立图形分别适配浅色、深色背景，在不同尺寸中保持品牌识别。
色彩选择与应用逻辑
浅蓝色 #86D3E6 呼应清洁能源的清新感，并突出按钮与关键入口。
蓝绿色 #225665 连接科技与自然，用于品牌色块和内容分区。
深蓝绿色 #122D35 为技术与产品展示提供沉稳背景，与浅色文字形成明暗对比。
三种颜色保持相近色相，通过明度差异建立页面层级。
视觉应用规范
字体层级与界面元素规范
DM Serif Display 用于英文展示标题，Inter 用于说明与界面文字。通过字体、颜色和布局的一致使用，将视觉规则延伸到按钮层级与图文组合。
| 角色 | 字体 | 字号 | 用法 |
|---|---|---|---|
| 首屏标题 | DM Serif Display | 64 px | 叠加在首屏主视觉上概括品牌主题，与简短说明和主要入口共同建立浏览起点。 |
| 模块标题 | DM Serif Display | 56 px | 用于产品、应用场景与品牌介绍等模块的开头，概括当前主题并区分页面章节。 |
| 分类标签 | Inter | 20 px | 以简短的大写词组标注内容类别，放在主标题上方帮助用户快速识别模块主题。 |
| 正文说明 | Inter 常规 | 18 px | 用于补充产品特点、业务内容与品牌信息，以 1.6 倍行高支持连续阅读。 |
| 按钮文字 | Inter 半粗体 | 16 px | 以简短的操作词说明查看详情或联系咨询等下一步行动，并紧邻对应内容设置。 |
图文与操作入口组合规范
以「供应链」模块为例，短标签、主标题、说明与入口逐级展开，保持同一条阅读方向。
四级按钮体系
实色按钮用于主要入口，描边按钮用于辅助操作，短线或文字链接适合段落和多入口区域。原稿规范也说明了各层级的使用场景。
首页模块设计
模块布局与内容组织
从初稿到结构调整版，选择标题即可查看对应的产品、应用场景、品牌或信息模块。
品牌首屏
风力发电、储能设备与汽车组成新能源场景。标题、说明和「了解更多」入口靠左排列，底部圆点表达轮播状态。
移动端响应式设计
信息层级与纵向布局
375px 移动稿沿用品牌色与模块主题，将认证标识改为双列、产品改为纵向陈列、优势改为单列。首屏重新裁切场景，页脚采用分组与折叠标识。
移动首屏构图
使用更聚焦的图像裁切，保留标题、说明和主要入口。
认证标识双列布局
横向标识改为两列，在小屏幕上保持识别尺寸。
产品纵向列表
桌面的三列变为纵向列表，每件产品都有独立标题和入口。滚动图框可查看全部产品。
页脚分组
分组标题配合加减符号表达展开与收起。原稿为静态设计，点击反馈和完整展开逻辑尚未定义。
移动端信息层级
与阅读顺序
移动端主要调整列数、图像裁切和阅读顺序。标题负责引导，按钮始终靠近对应内容。
首页结构方案探索
产品信息优先级与模块编排
两个结构方案都保留品牌视觉，主要调整产品、认证与数据的位置。方案 2 将认证压缩成标识带，让电芯介绍更早出现。文件未标记最终采用方案，因此这里并列展示三版设计。
桌面首页 · 初稿
从认证、储能系列和产品陈列开始，再延伸到应用场景、合作优势、品牌故事、可持续发展与新闻，完整展示品牌与产品。
首屏方向 · 多镜切换
原稿将其命名为「首张视频（多镜切换）」，提出了动态方向；当前提供的材料为静态画板。
首屏方向 · 实景
另一张画板沿用相同的文字区域，用实景图像比较视觉效果。