章节目录
首页信息架构
连接产品浏览与制造合作两条路径
访客既可能带着产品需求进入，也可能寻找制造与 OEM 合作。首页先让产品范围容易识别，再补充工厂和服务能力；页头与页尾的询价入口，为不同阅读深度提供下一步。
- 01
品牌与场景
家居清洁场景建立业务印象，四项企业优势概括制造商能力。
- 02
分类与型号
三类产品先帮助缩小范围，精选展示与四款主推型号继续展开具体选择。
- 03
制造与合作
工厂、OEM、资质与研发内容，提供判断合作适配度的信息。
- 04
阅读与联系
新闻支持进一步了解，询价与页脚联系方式衔接沟通。
品牌视觉体系
红色识别贯穿产品与制造信息
红色由品牌标志延伸到标题强调、图标与主要按钮。浅色区域承载分类和产品，深色区域突出工厂能力；家居、产品与生产场景交替出现，让生活使用与制造服务形成连续的视觉叙事。
品牌图形与正反色
完整标志与独立字标在浅色、深色和红色背景中分别展示，形成不同场景下的品牌应用方式。
品牌色与背景层级
规范以 #E81B30 为品牌红，配合 #170205 和 #343230 两种深色。红色承担关键识别，明暗背景用于区分产品、制造与联系内容。
视觉应用规范
清晰的标题、说明与操作层级
首页以 Montserrat 标题建立模块识别，Roboto 承载说明和多数按钮文字。字号、字重与留白共同区分阅读层级，让产品名称、服务信息和操作入口各有位置。
| 角色 | 字体 | 字号 | 用法 |
|---|---|---|---|
| 主要标题 | Montserrat Bold | 64 pt | 用于标识产品与服务模块，帮助访客快速定位关注内容。 |
| 分类标签 | Roboto SemiBold | 20 pt | 用于概括当前内容的类别，帮助访客理解信息之间的关系。 |
| 正文说明 | Roboto Regular | 18 pt | 用于说明产品特点与制造服务，补充标题之外的具体信息。 |
| 按钮文字 | Roboto SemiBold | 18 pt | 用于明确下一步操作，引导访客查看详情或联系询价。 |
文字层级与排版应用
标题、说明与按钮沿同一条阅读路径组织，右侧标注字体、尺寸和颜色。这里保留原稿的排版示例文字，用于展示规范中的层级关系。
四级按钮体系
红色实心按钮用于主要入口，描边形式降低辅助操作的视觉重量；短线与文字链接则服务于新闻、段落和多入口区域。相同的红色与圆角语言贯穿整页，操作强调随内容层级变化。
按钮使用规范
原稿给出主要、辅助、短线和文字四种形式，分别对应重要入口、次级操作与段落链接。
首页模块设计
从清洁产品到 OEM 合作
选择模块名称，查看对应原稿和设计说明。模块切换用于浏览案例，轮播、视频、下载与询价入口保留原始界面状态。
品牌首屏
家居场景中的清洁机器人先建立产品使用印象，左侧标题说明智能清洁定位。透明导航覆盖在首屏上方，产品、OEM 服务与询价入口并列，让产品浏览和商业合作都能从第一屏开始。
完整桌面首页
查看产品与制造信息的整体衔接
首屏场景、浅色产品卡片、深色工厂区域与红色联系模块共同形成整页节奏。图框内可滚动查看从导航到页脚的完整设计。
