工业原材料企业的官网，常见两种问题：一种只有公司简介、厂房照片和一个「联系我们」；另一种把所有资质、设备和产能堆在首页，采购人员翻半天找不到自己关心的信息。结果是网站看起来「很像样」，询盘却很少，或者来的询盘信息不全，还要反复沟通。
这篇拆解 Foundax 案例库里的 MERIDIAN 衡原。它是一个虚构的铜、铝、锌大宗原材料供应商，网站没有购物车，核心目标只有一个：让合适的采购方提交一条信息完整的询盘。它的做法是：用材料影像建立第一印象，再把「了解材料 → 理解协作方式 → 提交需求」做成一条清楚的路径。
B2B 工业品网站难在哪
- 访客是专业采购。 他们要的不是品牌口号，而是「你供不供应我需要的材料」「规格和交付怎么谈」。
- 信息决定询盘质量。 网站没讲清楚，询盘里就只剩「请报价」三个字。
- 信任要有依据。 证书、检测和产能如果写得空泛，反而降低可信度。
- 没有价格可以展示。 大宗材料按规格和数量议价，传统电商的商品页用不上。
所以衡原的设计目标是：先让采购确认「这里有我要的材料」，再说清楚规格、文件和交付怎么沟通，最后把需求交给一个明确的表单。
设计概念：材料的分量，合作的尺度
品牌主张是「让供应，成为确定」。首页的六个章节对应采购判断的顺序：先感受材料的分量，再找到需要的材料，然后确认品质与文件、理解交付步骤，接着认识团队，最后提交需求。每一章都只回答一个问题。
视觉语言：沉稳、有呼吸的工业感
衡原参考的是建筑事务所和工业年报的秩序感：暖灰大留白、石墨色正文、克制的铜色标记。照片保留材料的重量、表面纹理和真实尺度，避免把工业材料拍成「珠宝」。
- 石灰
#EEECE5页面底色，大面积留白 - 石墨
#252B29正文、结构线与询盘章节底色 - 原铜
#A15B3D少量、有功能的强调：标签与关键线条 - 灰绿
#606761次要文字与注解
| 用途 | 字体 | 为什么 |
|---|---|---|
| 英文 | Manrope | 宽阔的几何无衬线字，标题稳重，参数清楚 |
| 中文 | 思源黑体（Noto Sans SC） | 和英文一致的理性气质，适合大量说明文字 |
四个招牌时刻
目录
从材料，进入对话
铜、铝、锌像材料目录一样排列，选中一种就显示供应形态、适用场景、待确认事项和「询问这种材料」入口。
依据
每一项要求，都有据可谈
检验近景旁列出材料规格、批次文件和包装资料三项，并提供「洽谈材料与文件要求」的入口。
步骤
从你的要求，到每一步安排
交付协作拆成明确需求、核对资料、协商发运、持续沟通四步，每一步配一句具体说明。
询盘
从你的需求开始
石墨色的收尾章节里，左边一句邀请，右边是采购表单；从材料详情页进来时，意向材料会自动带入。
六幕页面分镜
01
首屏：让供应，成为确定
大幅铜杆卷与铝坯的近景，配一句品牌主张和「了解材料」入口。首屏就交代了行业和合作方向。
02
材料：从材料，进入对话
Cu、Al、Zn 三个标签切换材料，右侧列出供应形态、适用场景和需要确认的规格要点，每种材料都有直达询盘的入口。
03
品质：每一项要求，都有据可谈
戴手套用量具核对铜杆的近景，旁边是规格、批次文件、包装资料三项说明。不写无法核实的认证和产能。
04
交付：从你的要求，到每一步安排
仓储宽幅背景下，交付拆成四个具体步骤，让采购在提交询盘前就知道后续怎么推进。
05
合作：材料有分量，合作有尺度
用工作现场的照片讲团队如何核对材料和响应需求，品牌介绍控制篇幅，链接到「关于衡原」页面。
06
询盘：从你的需求开始
公司名称、联系人、邮箱、意向材料为必填，采购量、交付地点和需求说明为选填。提交前需要同意信息使用说明。
询盘表单怎么提高质量
衡原的表单只问做判断必需的信息，并且把「必填」和「选填」标清楚：公司、联系人、工作邮箱和意向材料是必填，采购量、交付地点和需求说明是选填。提交失败时，错误会显示在对应字段旁边；表单还附带一句信息只用于回复本次需求的同意说明。这些做法也符合 W3C WCAG 2.2 对表单标签、说明和错误提示的要求。
表单本身是 Foundax 的原生表单能力，提交记录会进入后台，方便团队跟进。想了解这部分功能，可以看 Foundax 功能介绍。
诚实，比堆砌资质更有说服力
案例里的材料摄影是概念图，由 Foundax 团队用图像生成工具制作，不能当作自有工厂或真实产能的证明。正式使用时，证书、客户标识、企业规模和检测能力都应该换成可以核实的资料。设计上，衡原也刻意只写「可以讨论的材料与服务范围」，把判断空间留给采购方。
可以直接借鉴的清单
- 首页章节按采购判断的顺序排列：材料、品质、交付、团队、询盘。
- 材料用目录式排版，每种材料都有直达询盘的入口。
- 把交付流程拆成几个具体步骤，减少询盘后的反复确认。
- 表单只问必需的信息，清楚标出必填和选填。
- 从材料页发起询盘时，自动带入意向材料。
- 资质和产能只写能核实的内容，概念照片不当作证明。
常见问题
B2B 网站没有价格，怎么促成询盘？
用信息代替价格：讲清楚供应形态、规格确认方式、文件和交付安排，让采购在提交前就能判断是否合适。信息越具体，询盘质量越高。
询盘表单应该放在哪里？
衡原在每种材料、品质和交付章节都放了入口，首页最后一章是完整表单，另外还有独立的采购联系页。访客在任何一个判断点都能直接提交需求。
衡原是真实企业吗？
不是。MERIDIAN 衡原是 Foundax 团队制作的虚构品牌案例，表单在案例中仅作演示。
可以用这个设计开始做自己的网站吗？
可以。在 衡原案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的材料、照片和企业资料。如果你在规划工业品外贸网站，也可以看 B2B 外贸网站规划与建设体系 和 品牌独立站设计指南。