项目定位
FrostMax 是一个B2B制冰设备外贸网站，目标市场为东南亚（高温高湿）与非洲（高温、电网波动较大）。网站定位为 “热带工业制冰专家” ，通过展示产品耐用性、节能特性和本地化服务，建立信任并获取销售线索。
核心目标
提升品牌在目标市场的专业认知
清晰展示三大产品系列（片冰、管冰、方冰）的技术参数与应用场景
引导潜在客户提交询盘或直接通过WhatsApp沟通
通过案例和客户证言增强信任
设计原则
简洁工业风，强调可靠性与效率
移动优先响应式设计（东南亚/非洲移动端占比高）
突出“耐高温”“节能”“耐腐蚀”等关键词
低带宽友好（使用字体图标代替大体积图片，加载迅速）
二、页面结构（信息架构）
整个网站为单页滚动式 + 锚点导航，共包含6个主要区块：
区块 ID 名称 内容要点
#home Hero 首屏 品牌标语、核心价值、CTA按钮、信任数据（年份/安装量/支持）
#features 四大优势 耐高温、节能、坚固耐用、智能控制，图标+简短说明
#products 产品展示 片冰机、管冰机、方冰机三卡片，含规格、用途、询价按钮
#testimonials 客户证言 尼日利亚/印尼/肯尼亚真实客户评价，带姓名与地区
#contact 联系与询盘 左侧联系方式+社交链接，右侧表单（姓名、邮箱、电话、产品选择、留言）
Footer 页脚 公司简介、快速链接、目标市场列表、技术支持声明
导航栏：Logo + 首页/产品/优势/客户/联系 + 语言切换（EN/FR 展示，为后续多语言预留）
三、功能模块详解
模块 功能描述 实现方式
响应式导航菜单 桌面端横排，移动端汉堡菜单折叠，点击链接平滑滚动至对应区块 CSS + JavaScript
产品快速询价按钮 每个产品卡片内的“Request Quote”按钮，自动填充表单中的产品名称和留言内容，并平滑滚动至联系表单 JavaScript 监听点击、操作 select 与 textarea 值
联系表单提交 收集姓名、邮箱、电话、感兴趣产品和具体需求；前端非空校验并弹出提交成功提示（可对接后端API） HTML5 + JS 模拟提交，真实环境可POST至CRM
WhatsApp 浮动按钮 固定于右下角，点击直接打开 WhatsApp 聊天，预设问候语 <a> 标签 + https://wa.me/ 链接
语言切换示意 提供 EN / FR 按钮，当前仅做视觉展示（可后续接入i18n） 静态占位
平滑滚动 点击导航或按钮滚动到指定区域，不跳变 CSS scroll-behavior:smooth + JS
四、视觉风格（UI设计系统）
1. 色彩体系
角色 色值 应用场景
主色调（深蓝绿） #0b5e7e 导航栏、按钮、标题强调、图标 hover
辅助色（橙色） #ff8c42 CTA、价格标签、特殊强调文字
背景浅色 #f5f9fc 产品区、客户评价区背景
中性深灰 #1e2a3a 正文、页脚文字
白色 #ffffff 卡片背景、表单背景
2. 字体
西文字体：Inter，无衬线，兼具现代感与可读性
字重：300/400/600/800，标题用800，正文用400
3. 图形与图标
主要使用 Font Awesome 6 图标（雪花、冰块、温度计、闪电等）
首屏用大幅 fa-icicles 图标代替产品实拍图，降低加载成本，同时寓意“冰”
产品卡片内用线性渐变背景 + 大图标，保持轻盈
4. 布局与间距
容器最大宽度 1280px，两侧留白响应式
卡片圆角 16px/24px，搭配细阴影，营造现代工业质感
区块间距 80px，保证呼吸感
5. 氛围基调
工业、冷静、可信赖
通过浅蓝渐变的 hero 背景传达“制冷”与“海洋/热带”的联想
橙色点缀增加活力与行动导向
五、内容策略（针对东南亚与非洲市场）
1. 文案调性
务实、直接、技术导向，但避免过于晦涩
强调 “能够在 45°C 环境稳定运行”、“低电压适应性”、“耐腐蚀不锈钢”
解决客户痛点：停电恢复快、维护简单、适合渔业/酒店/零售
2. 关键内容板块策略
板块 文案核心信息 本地化暗示
Hero 标题 “Powerful Ice Machines Built for SEA & Africa” 直接点名目标地区，产生归属感
信任数据 15+年经验、2000+安装、24/7支持 缓解跨境采购顾虑
四大优势 耐高温、节能、耐用、智能控制 每一项都呼应热带/非洲实际运营环境
产品卡片 每种冰型的典型用途（渔业/混凝土降温、餐饮、酒店） 贴合当地主要产业
客户证言 明确写 尼日利亚、印尼、肯尼亚 客户，真实姓名+职位 社交证明，地域匹配
联系表单 要求填写国家、容量需求 帮助销售快速判断方案
页脚市场列表 列举具体国家名（泰国、越南、尼日利亚、肯尼亚等） SEO + 心理贴近
3. 转化路径
主要路径：浏览产品 → 点击“Request Quote” → 表单自动填充产品 → 提交询盘
次要路径：点击 WhatsApp 浮动按钮 → 直接对话
辅助路径：首页“Get Quote”按钮滚动至表单
4. 信任元素
认证标识（CE, ISO, SONCAP）在页脚或产品区提及
提供仓库及支持中心位置：上海、内罗毕、曼谷（增强售后真实感）
电话和邮箱真实风格显示
5. 多语言规划（预留）
当前显示 EN / FR 切换（法语覆盖西非部分国家）
未来可扩展斯瓦希里语或越南语版本
六、技术实现要点（开发参考）
前端：HTML5 / CSS3 / 原生 JavaScript
图标库：FontAwesome 6（免费 CDN）
布局：Flex + Grid 无复杂框架，加载轻量
表单：前端校验 + 演示 alert，生产环境需配置后端 API（如 Formspree / PHP 邮件 / CRM）
性能：无大尺寸图片，所有装饰采用 CSS 和图标，首屏加载迅速
兼容性：支持主流浏览器及移动端 Safari/Chrome
七、后续可扩展建议
产品详情页：为每个机型添加独立页面，包含参数表、尺寸图、制冷量曲线
视频/工厂实拍：插入短视频展示机器在热带工厂的运行情况（可用YouTube/Vimeo嵌入）
案例研究下载：提供PDF版“鱼厂制冰方案”或“酒店制冰 ROI 计算表”
实时在线客服：接入 Tidio 或其他 Live Chat，提升转化
SEO 优化：针对“ice machine for Nigeria”“flake ice maker Indonesia”等关键词增加 meta 标签