WordPress 页眉页脚怎么设计：导航项数与询盘入口

页眉和页脚加起来占不到整页面积的 15%，但它们决定三件事：客户第一眼知不知道你是谁、想联系时找不找得到入口、离开前信不信你。

这篇不讲配色和动效，只回答四个可以被检验的问题：导航放几项、产品菜单怎么分层、询盘按钮放几个位置、页脚该放哪些信任元素。每个问题给一个数值标准，再给一个”改完怎么验证”的方法。

先说一个反例。我们复盘过一个外贸站，页眉做了六个下拉、两层嵌套、每层十几个型号。看起来”产品线丰富”，实际上七成的点击都落在前三个菜单上，其余五项基本没人点——它们占着首屏那条横带，换来的是零。

页眉的成本不是设计成本，是首屏面积。这句话决定了后面所有取舍。

一、页眉：客户第一眼只做三个动作

一个第一次进站的海外采购，在页眉停留的时间通常不到三秒，做的只有三件事：

三个动作对应三个设计决定：导航项数、产品菜单结构、询盘按钮位置。下面逐个说。

二、导航：5 到 7 项，第 8 项开始是负担

导航项不是越多越好。项数一多，每一项的点击率都会被摊薄，而且首屏宽度不够时会被挤成两行，页面直接显得拥挤。

外贸站够用的组合通常是这样六项：

1. 产品（或 Solutions）
2. 应用行业
3. 案例
4. 关于我们
5. 资料 / 博客
6. 联系

如果产品线确实复杂，可以加一项”定制服务”或”质量与认证”，到 7 项为止。第 8 项起，读者开始扫视而不是阅读，点开概率明显下降。

判断自己该砍哪项的简便方法：打开统计后台，看每个导航项过去 90 天的点击量。排在后三位的，如果能被别的项覆盖，就挪进页脚或二级菜单。砍导航不是减信息，是减同一层级上的竞争。

产品菜单：分类下拉，两层就够

产品线超过 8 类时，平铺会让读者无从下手；但下拉也不能无限嵌套。

两层是上限：第一层按品类，第二层按应用场景或规格段。三层以上，移动端会变成折上折，读者根本点不开。

反例是常见的”按型号罗列”——把 40 个 SKU 直接铺进下拉。采购不是这么找东西的，他先想到的是”我要耐腐蚀的阀”，不是”我要型号 A105N”。所以第二层的命名，应该用客户脑子里的词（耐腐蚀、高温、食品级），而不是你内部的型号体系。

导航文案：把行业黑话换成采购的词

有一类词，站内看很专业，客户看了没信息量：

“Solutions” 是 B2B 营销词，不是搜索词。客户在谷歌里搜的是 “custom manufacturer”、”OEM supplier”，不是 “solutions provider”。导航文案跟着搜索词走，跳出率会低一些。

做多语言站时，导航要优先人工核对。机器翻译常把”解决方案”直译成 Solutions，把”实力”译成 Strength，这两种译法在英语采购眼里都不成立。

搜索框：50 个 SKU 是分界线

产品少于 50 个，搜索框是占位置的摆设——客户用导航两下就找到了。

超过 50 个 SKU 才值得放，而且放了就得让搜索结果页能按分类和参数筛选。搜出来一堆不带筛选的列表，比没有搜索更糟：客户会认为你的站”内容乱”。

三、询盘按钮：三个位置，少一个就漏一批人

外贸站和普通企业站差的就在这一层。普通企业站的转化路径是”了解 → 打电话”，外贸站的路径是”了解 → 填表 → 等回复”。中间断一步，这个客户就没了。

三个位置，各有各的职责，不能互相替代：

页眉按钮点击率通常在 1%–3% 之间。低于 0.5%，先查两件事：按钮在移动端是否被折叠进汉堡菜单里（那样几乎没人点得到），以及文案是不是写成了 “Submit”。

文案上的一条经验：动作词加一个具体承诺，比单纯的动作词好。”Get a Quote” 优于 “Contact Us”，”Contact Us” 优于 “Submit”。因为 Submit 描述的是客户的动作，前两个描述的是他得到什么。

表单字段：必填只留两个

字段越多，提交率越低，这个关系在外贸站上尤其明显——客户填表时还在比价阶段，不愿意先交底。

没有附件字段，客户只能另发一封邮件，这一封往往就发不出来了。

防垃圾邮件不要叠两层。蜜罐字段（honeypot）能挡掉大部分机器人，再叠验证码的站，通常换来的是更多垃圾和更少询盘——验证码先拦住的是真人。

备选通道：至少留一条不用填表的路

WhatsApp、邮箱、在线聊天，三个里至少留一个。

地区差异很明显：中东、南美、东南亚客户更习惯 WhatsApp，欧美客户更愿意走邮件。只留表单的站，等于把不习惯填表的那部分人挡在门外。

四、页脚：六个信任元素，缺一个少一分

页脚是客户离开前看的那个位置。它承担的不是导航，是可信度。

不要放的：一排没链接的社交图标（点进去发现半年没更新，反而减分）、友情链接堆砌、访问计数器、挡住页脚的订阅弹窗。

页脚导航分三栏就够：产品分类、公司信息、支持（FAQ / 资料下载 / 联系）。分四五栏，反而不好扫。

五、四个容易忽略的细节

一、页眉高度吃首屏。 页眉加顶部条超过 120px，笔记本 768px 高度下首屏就被切掉一块。移动端固定页眉控制在 60px 以内，否则小屏手机上首屏只剩半张图。

二、页眉可能是 LCP 元素。 如果页眉用了大背景图或视频，它往往就是 LCP 那一块。背景图压到 100KB 以内，或者干脆用纯色加小图，比事后优化脚本有效得多。

三、移动端菜单的层级。 桌面端的二级下拉，在手机上会变成折叠菜单。层级超过两层，第三层基本没人点开——把重要的产品分类提到第一层，是移动端见效很快的一处改动。

四、多语言切换的位置。 放顶部条右侧，不要藏进移动端菜单深处。海外客户换语言是高频动作，多一次点击就多一批流失。

六、在哪改：三处入口

知道该放什么之后，落点只有三处，别去动主题模板文件——升级会覆盖。

改完必须清缓存。页眉页脚经常被缓存成静态副本，不清的话你自己看到的还是旧版——分层排查方法见 清除缓存没生效怎么查。

七、改完怎么验证

不要靠设计评审，靠数据。三个可量化的检查：

• 页眉询盘按钮点击率：正常 1%–3%，低于 0.5% 就说明位置或文案有问题。
• 页脚到达率：有多少人滚到页脚。低于 30%，说明页面太长或中间缺转化点。
• 移动端首屏：用真机打开（不是模拟器），看页眉占了多少高度、询盘按钮在不在首屏内。

改版前后各看两周数据。两周是个门槛——短于这个时间，样本量不够，波动会被误读成效果。

八、常见问题

页眉一定要做吸顶吗？

看页面长度。产品页和长文页建议吸顶，短页面（首页、关于我们）不必。吸顶会增加一点渲染成本，但省下的”返回顶部找按钮”的操作更值钱。

导航项能不能做成图标？

工业品站不建议。图标在没有文字的情况下歧义太大，齿轮既可能代表”服务”也可能代表”设置”。图标可以加，但文字不能省。

页脚要不要放地图？

放静态图片就行，不要嵌 Google Maps 的 iframe。一个地图 iframe 能拖慢首屏几百毫秒，而客户看页脚时并不需要交互式地图。

多语言站的页眉要做两套吗？

结构和项数保持一致，只换文案。不同语言做不同结构，维护成本会翻倍，而且客户切换语言后会迷路。

九、继续读

• WordPress 首页策划：产品型、方案型、品牌型三种排法：页眉之下第一屏怎么排
• 表单邮件收不到怎么查：按钮点了、表填了，邮件为什么没到
• WordPress 网站速度优化指南：页眉背景图、字体对 LCP 的影响
• 外贸建站怎么做：从 0 到上线的完整决策框架