WordPress网站设计原则：把导航、标题、图片和表单做得清楚好用

如果页面看起来已经整齐，用户仍不停来问基础规格，问题可能是信息没有写全；规格明明有，却没人找到，可能是位置与标题不清楚；用户点了咨询却没结果，则要查交互和提交过程。三种情况需要不同修改，不能都用“换一个更高级的主题”处理。

先写出这张页面要帮助谁完成什么

假设你有一张工业配件详情页，主要读者是采购人员。他们可能从搜索结果直接进入，手里只有设备型号，需要判断接口、尺寸和使用条件是否匹配，再提交需求。页面的任务就可以写成：“让采购者判断配件是否适用，并带着型号和需求发起咨询。”

围绕这个任务，产品名称、用途、关键图片、规格、限制与咨询入口都有明确工作。几屏品牌口号不能替代接口说明；一张巨大场景图也未必能帮助比较安装孔。内容完整度先确定，视觉轻重才有依据。

同样的方法放到其他页面，顺序会不同。文章读者可能急着修复一个错误，开头应先给可用处理方向；服务页需要交代服务对象、范围、过程和交付；分类页帮助比较一组选择，不必重复每个产品的整篇说明。

列出页面模块后，分别写一句它回答的问题。找不到对应问题的模块，可以后移、缩短或取消；会影响判断的限制条件，即使不够“漂亮”，也应该保留。简洁不等于把用户需要的信息藏起来。

导航让人认得路，也允许从中途进入

栏目名尽量说清目的地。“产品”“建站教程”“SEO 服务”给出了内容预期；“探索未来”“赋能空间”如果没有上下文，访客只能先点一次猜。品牌语言可以放在介绍里，导航先把路指清楚。

产品很多时，页眉放主要类别，分类页再承担筛选与型号比较。文章很多时，可以通过文章中心、专题和WordPress 建站知识库这样的学习入口组织，不必把全部文章堆进下拉菜单。

从搜索进入详情页的人没经过首页。给他清楚的所属分类、面包屑或返回列表入口，才能继续比较其他型号。正文中“相关产品”也应有关系依据，例如同系列不同接口，而不是随意列几张卡片填满底部。

导航状态同样属于设计。当前栏目是否可辨认，下拉菜单打开后能否顺利移入，手机菜单展开后如何关闭，都影响实际使用。W3C 菜单教程特别强调鼠标、键盘和触摸操作，以及清楚的菜单状态。

不要只检查鼠标悬停。用 Tab 进入导航，观察焦点是否可见，再测试展开、进入子项和退出；手机上直接点击一级项，确认它到底跳转还是展开，行为要与图标和标签一致。一个看起来像链接的栏目却只负责展开，旁边又没有提示，会让用户反复点错。

信息顺序先支持判断，再承接咨询

继续看配件页。读者最先需要识别“这是哪一款”，随后才是“能不能用”。可以先放产品名称、用途和清楚的整体图，再提供关键规格与适用条件，最后补充可选方案、安装资料和咨询流程。

这里没有一套所有产品通用的固定模块顺序。如果兼容性是选型的前提，就提前放兼容信息；如果外观与尺寸本身决定选择，图和尺寸表应更靠前。页面顺序应跟着买方判断过程走。

读者的问题	更合适的信息	单靠什么通常不够
这是我要找的型号吗？	准确名称、型号、用途与整体图	宽泛品牌标语
能否与现有设备配合？	尺寸、接口、适用与不适用条件	没有标注的场景照片
几种规格怎样选？	同属性比较表、具体选择解释	一排内容几乎相同的卡片
我需要提供什么才能报价？	数量、规格、用途与必要资料说明	只有一个“联系我们”按钮

涉及证书、性能和交期时，用确实属于该产品的资料。不能用生成图模拟证书，也不能借别的型号测试结果证明当前型号。资料还不完整时，明确哪些需要进一步确认，比在页面中做一个看似权威的空模块更可靠。

标题要能独立表达内容，装饰只负责帮助分节

试着只读一遍页面的小标题。如果依次是“产品介绍、我们的优势、更多信息、立即行动”，读者很难判断去哪找安装条件。换成“适用设备与接口”“尺寸如何确认”“询价前需要哪些资料”，浏览时就能提前选择阅读位置。

主标题说明整页主题，二级标题划分主要内容，三级标题只在某一节确实需要再细分时使用。字号大小与 HTML 层级分开设置。W3C 标题教程解释了标题如何表达章节关系，也支持读者通过标题导航。

长文主要章节可以有小号 01、02 序号，搭配浅色背景或边框；大段内容转换可以加分割线。把这套样式稳定用在同一级标题上，读者就能形成阅读预期。序号不能代替标题本身，也不需要给每个短段落都加一张背景卡，否则整页没有轻重。

段落则保持一个明确话题。步骤适合有序列表，同属性比较适合表格，一段推理不必拆成五条粗体短句。读者需要连续理解时，完整自然段比不断跳转的卡片更顺畅。

中文正文可以从 16–18px、约 1.6–1.8 倍行高开始试读，再根据字体、容器宽度和真实段落调整。这是起点，不是通用规范。中英文混排、数字单位、长型号都要放进测试内容；用短占位文字调好的版式，换成真实资料后可能完全不同。

宽屏正文要有适当限宽，窄屏则减少无用左右内边距。不要为了把全部内容挤进一屏持续缩小字号，也不要把每个段落压得很短、再用巨大留白撑高页面。留白应该反映内容分组：同组接近，不同章节有清楚间隔。

颜色先建立稳定职责：深色正文、明确的链接、一个主要强调色，必要状态有文字说明。根据WCAG 对比度说明，普通文字通常需要至少 4.5:1，大文字为 3:1，并存在规定的适用条件与例外。浅色可以做背景，不必为了品牌统一把正文也变成很淡的颜色。

图片、表格和卡片按信息关系选择

产品整体图用于识别，细节图解释接口和安装位置，示意图帮助理解工作方式。图片紧邻它解释的段落，用户才容易把说明与对象对应起来。图片很多，却全是相近角度，并不会自然增加信息量。

替代文字也取决于作用。展示安装孔的图片，可以描述孔位和所示细节；纯装饰图片通常使用空替代文本；作为按钮的图标需要表达功能。复杂示意图还要在正文提供完整解释，不能期待一行 alt 代替全部数据。W3C 图片教程按这些用途区分处理方式。

把文字直接做进图片后，手机上可能难读，也不方便修改。规格和注意事项尽量保留为网页文字。确实需要图片内标注时，保证清晰，并在附近解释结论。配图不能冒充真实后台截图、产品证据或测试报告。

表格适合在同样属性上比较。两款产品的材质、尺寸和适用条件可以按列对照，单位和命名保持一致；长段品牌故事不适合塞进多列表格。表头要表达属性含义，不能只靠背景颜色暗示哪一列是什么。

卡片适合提供相对独立的入口。若每张卡片都要读完才能完成一个连续步骤，用普通步骤更直接。手机上数据表确实需要横向查看时，让表格区域独立滚动，并有可识别的提示；不要让整篇正文也跟着横向移动。

表单设计要覆盖填写、等待、错误和成功

“咨询这个型号”“下载规格表”“查看安装方法”让人知道点击结果。“了解更多”在每个位置都一样，则需要用户反复回看上下文。产品页可以突出咨询，把下载资料设为次要入口；两个动作不必同样大、同样醒目。

咨询表单先保留业务真正需要的字段。联系人、邮箱、产品型号和需求说明通常可以承接基础咨询，电话、地址或公司资料是否必填应由处理流程决定。产品页已经知道型号时，可以考虑带入并让用户确认，避免他还要返回页面抄一遍；同时确保后台收到的值正确。

输入框外保留可见名称，占位提示只承担格式示例。用户输入后仍应知道这一格在填什么。仅在旁边摆一段“邮箱”文字也不够，还需要表单控件与标签在实际结构中关联。W3C 表单标签教程说明了关联对操作和辅助技术的作用。

不要只设计表单空白时的截图。至少把下列状态走一遍：

状态	用户需要看到什么	应避免什么
开始填写	字段名称、必填说明、必要格式要求	输入后才突然出现新要求
内容有误	哪个字段不对、怎样修改	只有红色边框或笼统“提交失败”
正在处理	明确的等待反馈，避免误以为没点到	长时间无反馈、反复产生重复提交
成功	确认已提交及后续联系渠道	没有依据就写保证回复时限
网络或服务失败	可理解的提示与下一步，尽量保留输入	清空全部内容让用户重新填写

例如邮箱缺少必要格式，错误提示应该帮助改这一个字段，而不是让整页变红。若网络失败还不能确定服务器是否收到，应避免直接告诉用户“一定没有提交”，必要时提供核查或重试方式。成功页面也不要展示不需要公开的完整客户资料。

W3C 表单通知教程强调错误与成功反馈都要清楚。业务端还要另查保存和通知：前台成功后，后台是否有条目，负责人是否实际收到？表单与邮件送达能帮助把视觉之外的流程接上。

手机与键盘检查，沿着完整任务走

拿同一个页面，从打开菜单、找到型号、查看规格，到填写并提交咨询。不要只看手机首屏截图。两列堆叠以后，标题、图片、限制和按钮之间的顺序可能变了；固定聊天按钮也可能正好盖住提交位置。

缩窄视口、放大文字，再检查内容能否完整阅读。W3C 重排说明针对纵向阅读内容使用等效 320 CSS 像素宽度等条件，并为确实需要二维布局的内容保留例外。表格可局部滚动，不意味着普通段落可以被裁掉。

常用按钮可以以接近 44×44 CSS 像素的可点击区域作为设计起点，配合合理间距。它是便于操作的建议；WCAG 2.2 最小目标尺寸的 AA 条款是 24×24 CSS 像素，并包含间距、行内链接等例外。不能把“所有链接都必须44px”当作统一结论。

键盘检查时，Tab 焦点应该可见，顺序应能理解，菜单和表单可以使用。打开弹窗后要能退出，关闭后也不能把人留在无法操作的位置。错误不能只靠颜色表达，输入框名称与反馈要能被识别。

这些是实用检查起点，不等于完成整套无障碍评估。若发现某一类控件反复失败，应该修这一类组件的实现，再检查使用它的其他页面，而不是给每页临时补一个不同的按钮。

在 WordPress 里，先找到负责它的对象

一款产品的说明和图片通常属于内容；所有详情页共用的标题位置通常属于模板；全站颜色和字体可能属于主题或构建器共享样式。改错范围，会出现一个页面改善、其他页面突然变样的情况。

先打开两三个同类页面，确认要改的模块是否共享。再决定修改内容、模板还是全局设置。WordPress 主题的作用与结构解释了这些关系；使用构建器时，可以结合Elementor 入门教程辨认对象与样式范围。

实际安排修改，可以按后果排序。咨询按钮无法打开、手机表单不能提交，先修；影响选型的参数缺失、标题让人找不到内容，随后补；边框、阴影和细节间距再统一。视觉需要认真做，但它不能代替缺失的答案。

找一位不熟悉页面的人完成具体任务，例如“找出可用于这台设备的型号，并说明咨询前还缺什么资料”。让他自己操作，记录停在哪里、误点哪里、哪些信息找不到。不要一边测试一边替他指路，否则看不出页面本身的问题。

把观察记成“任务—卡住位置—可能原因—修改—复测结果”。如果用户找到规格却不理解单位，下一步是补解释；如果理解后按钮无反应，下一步是修交互。修改之后重复同一任务，确认解决的是原来的问题，而不是仅仅换了一套外观。

代表页面通过后，再把适合复用的标题、按钮、颜色和间距应用到同类模板，抽查长标题、多图片、无图片及不同字段数量的页面。文章页和归档页有各自任务，不必照搬产品询盘页的全部模块。