好看的404頁面

一、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頁面雖然在用戶體驗中只佔了一小部分，但卻是建立品牌形象，讓用戶感到趣味與驚喜的重要一環。希望以上設計案例能夠給各位開發者帶來一些啟發。