章节目录
首页信息架构
围绕产品与制造能力建立阅读路径
对门锁五金的采购方而言，产品类型、制造能力与沟通入口都是重要信息。首页由整体印象逐步进入具体产品，再补充定制与合作内容，形成连续的阅读顺序。
- 01
业务识别
门锁主视觉与制造商定位，承接产品、团队、研发和质量四类能力。
- 02
公司与产品
公司介绍之后，依次展示产品分类与新品，提供浏览和单品询盘入口。
- 03
服务与合作
定制服务独立成区，合作伙伴和新闻继续补充品牌信息。
- 04
询盘与联系
姓名、邮箱、电话和留言集中在页尾，页脚保留产品与联系方式。
品牌视觉体系
红色识别与黑白对比的视觉语言
品牌标志以红、黑、白建立识别。页面在深色产品场景与浅色信息区域之间切换，红色集中用于按钮、分类状态和短标签，让关键入口与内容层级保持一致。
品牌图形与正反色
规范展示完整标志在浅色、红色与深色底上的应用，同时提供独立图形的使用方式。
品牌色与背景层级
主色聚焦操作入口和当前分类，深色用于品牌场景，白色与浅灰色承载产品和说明。原稿色卡中的文字色值与实际填色有差异，展示图保留原样。
视觉应用规范
字体、图文关系与按钮层级
Roboto Slab 的厚重标题与 Open Sans 的说明文字形成对比。标题帮助识别模块，标签提示内容类别，正文提供细节，操作入口紧跟对应说明。
| 角色 | 字体 | 字号 | 用法 |
|---|---|---|---|
| 模块标题 | Roboto Slab Bold | 64 pt | 用于标识首页主要模块，帮助访客快速把握阅读层级。 |
| 分类标签 | Open Sans Semi Bold | 20 pt | 用于简要说明内容类别，帮助访客理解后续标题与说明。 |
| 正文说明 | Open Sans Regular | 18 pt | 用于补充产品与业务信息，承接标题后的详细说明。 |
| 按钮文字 | Open Sans Semi Bold | 18 pt | 用于标明当前可执行的操作，引导访客继续浏览或发起询盘。 |
文字层级与图文组合
规范示例把标签、标题、说明和按钮放在同一条阅读路径中，并在右侧对应列出字体、尺寸与颜色。
四级按钮体系
实色按钮突出重要入口，描边按钮提供辅助操作，短线链接和文字链接适合段落及多入口区域。按钮的视觉重量随所在内容层级调整。
按钮使用规范
原稿分别给出主要、辅助、短线与文字四种按钮形式，以及它们对应的使用场景。
首页模块设计
从产品发现到合作询盘
选择模块名称，可以查看对应的原稿和设计说明。这里的切换用于浏览案例，页面中的分类、轮播与表单仍以原始设计状态展示。
品牌首屏与能力入口
门锁五金的近景让访客快速识别业务，左侧标题与 View More 构成第一处阅读入口。下方四张图片分别承载产品范围、团队、研发与质量控制，从产品印象延伸到制造能力。
完整桌面首页
查看模块之间的衔接与整体节奏
深色首屏建立业务印象，白色区域承载公司、产品和合作信息，定制与联系模块用宽幅场景形成节奏变化。图框内可滚动查看完整首页。
