404 页面
404 Page
别名:404 页面找不到页面页面不存在页面打不开链接点进去空的迷路页死链页
这是什么
在用户请求的地址不存在时展示的兜底页面：用一句人话说明发生了什么，提供返回首页、搜索或推荐入口，把一次失败访问转成继续浏览的机会。它不解决问题本身，但决定用户是离开还是留下。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 请求路径不存在或页面已下线
- 用户输入或点击了错误链接
- 内容被删除后仍需承接旧流量
✕ 不适用场景
- 服务端或后端故障（应使用 500 服务错误页）
- 未登录或权限不足（应引导登录或返回）
- 旧链接可精确重定向到新地址（直接跳转即可）
常见形式
极简提示
Minimal
只有状态码、一句说明和一个返回入口
带搜索
With Search
提供搜索框与热门链接，帮用户自己找回目标
插图引导
Illustrated
用插画与推荐内容弱化失败感
页面结构
- 01
状态码与标题
用 404 加一句人话标题，先让用户明白没有崩。
- 02
说明文案
一句话解释地址不存在，避免技术术语与自责语气。
- 03
插图
轻量插画或图标，弱化失败感但不喧宾夺主。
- 04
操作入口
主按钮返回首页，次入口返回上一页或联系支持。
- 05
推荐内容
搜索框或热门链接，把用户带向下一步而不是终点。
实现要点
flexgridmin-height: 100vhtext-align: centermax-width: 48ch整页用 min-height 100vh 加 flex 居中，内容宽度限制在 48ch 内保证文案可读。状态码可用大号 font-serif 做视觉锚点， 搜索框与推荐链接放在同一 max-width 容器内。服务器返回真实 404 状态码，不要用 200 包裹错误页，否则搜索引擎会收录空页。
相关概念
在后端异常、请求无法完成时展示的页面：不暴露内部细节，用中性语气说明是服务端问题，给出稍后重试或联系支持的路径，并尽量保留用户已输入的内容。它承担故障期间的信任维护。
页面相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件包含组件固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件包含组件当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式使用模式