工業原材料企業的官網，常見兩種問題：一種只有公司簡介、廠房照片和一個「聯絡我們」；另一種把所有資歷、設備和產能堆在首頁，採購人員翻了半天也找不到自己關心的資訊。結果是網站看起來「很像樣」，查詢卻很少，或者來的查詢資訊不全，還要反覆溝通。
這篇拆解 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 網站：拆解海外採購與工業品拓客邏輯 和 品牌網站設計指南。