三个方向，讲的是同一件事。
郭氏做出了让国内不再依赖进口辐射管的材料。这件事，现在的网站没有讲出来。
下面三套方案都在讲它，区别在于先讲给谁听，以及把多少技术细节摆到明面上。
四件必须做到的事。
英文优先，中文对等
英文是默认语言，也是默认排版。中文不是把英文翻一遍贴上去，而是一套完整的平行版本。切换语言时停留在同一个页面，不跳回首页。
环保要讲得实在
不用绿叶、地球那类图标。对炉窑客户来说，环保就是单位产量少烧多少气、一支管子多用几个月不用换。所以我们用能耗、寿命、温度来讲，不用符号。
经得起工程师看
真正决定采购的是炉窑工程师。单位、区间、结构形式都得是真的。一个国外工程师应该不用先发邮件问，就能判断郭氏值不值得进入短名单。
耐看，而不是赶时髦
工业类网站十年才改一次版。三套方案都建立在字体、栅格、对比这些耐久的东西上，不用那些过两年就能看出年份的效果。
这些只定一次，三套通用。
不管最后选哪个方向，下面这些都保留。也就是说，接下来要选的是气质，不是功能。
三套都是可运行的站点。
请切换语言、点进产品页试用；导航与询价表单均可操作。
站在炉膛里往外看
深色底，余烬的光，一条从冷绿贯到窑火橙的连续热梯度。全部产品沿一条 200–1600 ℃ 的温度轴排开，点哪个看哪个；进到产品页，同一条轴会再画一次，高亮出这个系列自己的区间。
设计元素
- 温度轴。它不是装饰条，它就是产品导航。五个标记按各自的真实使用温度定位，点开就是那个系列的参数表。
- 热梯度。绿→琥珀→炽红这一条渐变贯穿全站：标题、分隔线、管件示意、按钮，都从它取色。
- 余烬粒子。首屏背景里缓慢上升的暗火星，透明度很低。全站只此一处动效，系统开启"减少动态效果"时自动停。
- U 型 / W 型管线图。用渐变色画的真实管型。这种图只有做这行的公司画得出来。
为什么这么设计
讲的是对热的掌控。郭氏的产品不是躲开火，是待在火里，而且比替代品更快把热量传出去。一张自己会发光的深色页面，在读到第一个字之前就把这件事说完了。渐变的绿色那一端就是环保诉求所在——同一条标尺，既是热，也是被省下来的热。
色彩
字体
把网站做成一份技术文件
明亮、克制、编排严谨。章节编号、左侧文件控制栏、版本日期，产品条目展开就是一份规格书。用的是工程师本来就信任的那套纸面语言。每个系列都有自己的编号规格书，01 到 06 章节完整。
设计元素
- 文件控制栏。左边一条固定边栏，写着章节号、文件编号、版本、生产基地，跟图纸的标题栏是一个意思，贯穿整页。
- 00–05 章节编号。编号是真的文件结构，不是拿来装的：目录、工艺、公告登记，各归其位。
- 产品即可展开的规格书。编号、名称、工况区间排在同一行；展开就是典型技术指标表。
- 衬线体说话，压缩体报数。Newsreader 承担主张，Barlow Condensed 承担所有数字和标签。规格书区分论述和实测值，就是这么区分的。
为什么这么设计
讲的是可追溯。两项国家专利、2009 年 3 月定型的工艺，本身就是记录；记录就该用记录的样子呈现。这套方案想说的是：郭氏是那种产品和文件一起交付的供应商。而且——敢把数字摆出来的公司，通常是对数字有底气的公司。
色彩
字体
从晶体讲起，不从公司讲起
干净、明亮，材料科学的气质。首屏是一张实时绘制的六方晶格，也就是 β-氮化硅晶体本身；标题下面直接写反应式。整页从材料性能往外推到产品，而不是反过来。含深色模式。
设计元素
- 晶格。β-氮化硅是六方晶系，所以首屏就画六方晶格，鼠标移到哪里哪里亮。公司真实的晶体结构，成了公司的背景图形。
- 把反应式直接写出来。3 Si + 2 N₂ → Si₃N₄，1250–1400 ℃，就放在标题下面。对材料采购方来说，没有比这更快的专业信号。
- 性能卡片，然后是寿命对比图。四项实测性能，接一张与被替代材料的等比寿命对比。真正促成成交的是后面这张图。
- 六边形分级标记。每张产品卡上一排小六边形，标出这个系列能到多高的温度。晶格母题被拿来当数据用了。
- 郭氏自己的照片。红布棚拍的那几张已抠成透明底，厂区和现场安装照重新裁切。用的是贵司现有素材，不是图库图。
为什么这么设计
讲的是：这是一家新材料公司，不是耐火材料厂。2017 年更名已经说了这句话，但现在的网站没有兑现。从晶体结构和实测性能开场，这句话就从口号变成了事实。而且这套克制、低墨量的配色本身就是环保信号——效率，不是装饰。
色彩
字体
十一个页面，三套完全一致。
打开任一方案，用它自己的导航就能走到下面全部页面，中英文都能用。
| 页面 | 放什么 |
|---|---|
| 首页 | 定位表述、四项核心数据、产品体系、寿命对比、应用领域，以及进入询价的入口。 |
| 产品列表 | 五大系列和各自的工况区间。访客不用读完就能判断跟自己有没有关系。 |
| 产品详情 ×5 | 每个系列：概览数据、两段正文、典型技术指标表、规格与型式表、"为什么有效"、应用场景、相关产品。辐射管页另有直管 / U 型 / W 型结构示意。 |
| 公司 | 厂区数据、2008 年到 2017 年更名的沿革、四段式氮化工艺。 |
| 公告与资讯 | 公司公告与行业动态，分类标注。2017 年更名那条写清了客户真正关心的信息：原合同与质保继续有效，无需办理任何手续。 |
| 询价 | 决定报价的四个问题——温度、气氛、生产节奏、上次失效形式。从产品页进来会自动选好对应系列。 |
| 404 | 一个真实的页面，并给出返回路径。不是白屏，也不是悄悄跳回首页。 |
做到了没人夸，没做到就出事的那些地方。
这些不影响方案的样子，但影响它能不能用。
规格页可以直接打印
工程师习惯把参数页打出来带去现场。三套都做了打印版式：去掉导航、表格不跨页断开。方案 A 打印时自动转成浅色，否则一页下来是一整块黑，费墨也看不清。
单个产品页可以直接转发
销售把某个产品页发给客户时，对方收到的链接自带产品名称，不是一律显示"郭氏"。收藏夹里也认得出是哪一款。
没网也能演示
每套方案是一个独立文件，图片全部内嵌。车间那台不联网的电脑，插 U 盘就能打开——实际给客户演示时往往就是这个场景。
手机上逐页看过
三套 × 11 个页面 × 中英文 × 四种屏幕宽度，确认没有页面需要左右滑动、没有文字被切掉、按钮不会点不中。这一轮也确实查出并修掉了三个只在手机上才出现的问题。
询价表单会指出哪里没填
直接标出缺哪一项，并把光标移过去，而不是在底部丢一句"请填写完整"让人自己找。少一次来回，就少流失一个询盘。
没有任何跟踪代码
不加载统计、广告或第三方脚本，所以也不需要那条讨人厌的 Cookie 提示条。海外客户对这一点比国内敏感得多。
过程中发现：辐射管下面还有热电偶保护管、助燃器及十字支架、氮化硅保护套管这些独立条目，目前都归到了系列页。如果它们是单独报价的，建议各自成页——请一并告知。
Logo 不动，其他围着它来。
此前的草稿里我们用了一个自己画的标记，这是我们的问题。GSJT 标识是整个站点上最不该未经许可就改的东西。三套现已全部换回真实 logo，并把品牌藏青纳入配色。
浅色底
白底或近白底上原色使用，不作任何改动。方案 B、C 用这一版。
深色底
反白版本：藏青转米白，红色提亮成珊瑚色，让那道火焰仍然认得出来。方案 A 和 C 的深色模式用这一版。
以品牌藏青为骨
Logo 上那个藏青，在方案 C 里承担结构与数据；青绿保留作技术性的强调色；品牌红只留给标识本身，不外扩。
需要矢量原稿
网上能取到的只有一张 248 × 186 像素的 JPG。我们做了去底处理，导航栏尺寸够用，但上线前和印刷都需要 AI / EPS / CDR 原稿。
一张表看清差别。
| A · 热线 | B · 受控文件 | C · 晶格 | |
|---|---|---|---|
| 页面范围 | 三套完全相同：首页、产品列表、5 个产品页、公司、公告、询价，共 11 页，中英双语。 | ||
| 第一印象 | 有力、炽热、自信 | 严谨、有据、沉稳 | 干净、科学、现代 |
| 先说给谁听 | 厂长、展会客户 | 采购、选型工程师、OEM | 研发合作方、技术型经销商 |
| 环保怎么讲 | 用渐变呈现被回收的热 | 用寿命与可查证的能效 | 用实测性能与克制的用色 |
| 动效 | 氛围余烬，仅此一处 | 无，只有展开收起 | 可交互晶格 + 图表呈现 |
| 深色模式 | 本身即深色 | 本身即浅色 | 双模式，可切换 |
| 照片依赖 | 三套均已接入郭氏自有照片（红布棚拍已抠透明底，厂区照片重新裁切）。 | ||
| 开发工作量 | 中 | 最低 | 中偏高（晶格与双主题） |
需要贵司确认的事。
前三项不定下来就不能上线，后面几项是把效果做满，不卡进度。