好看的404页面

小蓝 • 2024-11-17 02:39 • 编程

一、404页面是什么

404页面，即在互联网上访问不存在的页面时，服务器无法提供访问的页面，会返回一个状态码为404的页面。

通常情况下，404页面呈现的是一个空白页面，或者只是简单的文字提示。但随着互联网的发展，越来越多的网站开始注重404页面的设计，使得这些页面不只是提供错误信息，而成为网站设计中重要的一环。

二、好看的404页面有何特点

一份好看的404页面，至少应该具备以下特点：

1、与网站整体设计风格保持一致，形成统一的品牌形象。

2、提供友好且有趣的提示语，让用户感受到温暖和乐趣。

3、提供可操作的页面元素，例如返回首页、搜索框等，方便用户快速找到需要的页面。

三、好看的404页面的设计案例

1、Lost in Space

这是一个来自Broken Links网站的404页面设计案例。背景是外太空环境，一只太空龙虎和太空人在寻找着遗失的404页面。提示语也很有趣，“继续飞向新的页面！”，并提供返回首页的链接。

<div class="container">
  <div class="error">
    <div class="spaceship">
      <img src="http://www.example.com/images/spaceship.png" alt="Spaceship">
      <img src="http://www.example.com/images/shadow.png" alt="Shadow">
    </div>
    <div class="planet">
      <img src="http://www.example.com/images/planet.png" alt="Planet">
    </div>
    <div class="astronaut">
      <img src="http://www.example.com/images/astronaut.png" alt="Astronaut">
    </div>
    <div class="dragon">
      <img src="http://www.example.com/images/dragon.png" alt="Dragon">
    </div>
    <p class="title">404—Lost in Space</p>
    <p class="sub-title">We're sorry, but the page you're looking for can't be found. Keep searching for a new one!</p>
    <a href="/" class="button">Take Me Home</a>
  </div>
</div>

2、Figma

这是一份来自Figma网站的404设计案例。404页面的背景采用了动态的波浪线，以及有趣的文案提示——”页面不见了”，并提供了两个可操作的功能，分别为重新搜索和返回到上一页。

<div class="container">
  <div class="wave">
    <img src="http://www.example.com/images/wave.gif" alt="Wave">
  </div>
  <div class="text">
    <p class="title">页面不见了</p>
    <p class="sub-title">我们发现您似乎迷路了，请重新搜索或返回您之前的页面。</p>
    <div class="buttons">
      <a href="/" class="button">重新搜索</a>
      <a class="button goBack" onclick="goBack()">返回上一页</a>
    </div>
  </div>
</div>

3、GitHub

Github的404页面借鉴了火星探险器背面上印刻着人类艺术品的设计，显示了一个图形化的太空场景，形象生动，给用户带来了趣味感和科技感。

<div class="container">
  <svg>
    <defs>
      <pattern id="pattern" x="0" y="0" width="70" height="70" patternUnits="userSpaceOnUse">
        <line x1="0" y1="0" x2="0" y2="70" stroke="#4E5F7B"></line>
        <line x1="0" y1="0" x2="70" y2="0" stroke="#4E5F7B"></line>
      </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="#0DC9F7"></rect>
    <rect x="40" y="40" width="260" height="80" fill="url(#pattern)" transform="rotate(45)"></rect>
    <rect x="140" y="140" width="160" height="320" fill="url(#pattern)" transform="rotate(45)"></rect>
    <text x="180" y="240" font-size="30" font-weight="bold" fill="#f2f2f2">404</text>
  </svg>
  <h1>Oops, This Page Could Not Be Found!</h1>
  <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
  <a href="/" class="button">Take Me Home</a>
</div>

四、结语

好看的404页面虽然在用户体验中只占了一小部分，但却是建立品牌形象，让用户感到趣味与惊喜的重要一环。希望以上设计案例能够给各位开发者带来一些启发。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/155399.html