來吧，一起來看看這個404頁的設計，你可以看到它是很清楚。我特別選擇了這樣的東西簡單明了，這樣我們就不會迷失在不必要的鐘聲和口哨聲。
這種設計的整體外觀和感覺是簡單，為了這個例子的，在同一時間，以便為布局。我會向你解釋不久，一個404頁面不應該有很多事情，所以在布局保持簡單了。你不需要在雜亂的任何網頁，包括錯誤的。
404頁面的可用性
在一個可用的頁面，也就是一個具有良好用戶體驗的方面，你需要保持4個主要規則的初衷。我會配合各那些在本教程中的樣本設計。
1。用通俗易懂的語言和解釋什么是怎么回事
不管是什么樣可能會顯示錯誤頁面，總是解釋通俗易懂的語言錯誤，使訪問者可以了解剛剛發生了什么。這是不公平的他們有解密的東西為什么基于技術術語不工作了，還是差了一堆這意味著有些事只有到項目的開發商數字。這是不夠好的。一個彈出，上面寫著“不正確的輸入”，當他們錯過了他們的電子郵件的形式@符號，而不是說“你的電子郵件地址似乎是無效的”。就像在這個例子中，我說：“很抱歉，此頁面不存在......”這是簡單的，并解釋發生了什么。
2。提供了一個出路
404頁面就是一個很好的例子。所以，沒有找到該頁面，它不存在：現在怎么辦？那么，在我們的404頁我提供了一個具體的下一步，這是返回到主頁。這實際上是404頁相當普遍。你也可以提供是返回到前一個頁面，如果頁面是通過一個不存在的鏈接訪問。
3。保持相同的設計
這一點伴隨著前一個關于保持導航，你應該把一切都相同。保持相同的布局，外觀和感覺......一切。只是頁面訪問出錯了，并不意味著你需要把他們帶到一個全新設計的，完全不同的頁面。這將混淆了您的訪客。我們不希望把它們混淆，我們不想嚇唬他們，我們想幫助他們。你應該把錯誤頁面，如404錯誤，因為從原來的頁面模板的任何其他頁面。同樣重要的是要保持影響很小，因為這不是一個頁面，需要被提醒 - 這是一個頁面，需要清楚地傳達幫助。
4。允許報告
無論多么微不足道的錯誤，總是要報告。可能有一些錯誤，你是不知道的，可能是你的頁面與服務器連接不上等原因。也許人們被賦予了錯誤的鏈接提醒，他們無法找到該網頁。或者，也許人們正試圖訪問一個頁面，你不再擁有和重定向不工作。它不會傷害用戶體驗，只是讓人們告知你，有一個奇怪的或反復出現的問題 - 而不是僅僅在404頁。給他們一個按鈕或鏈接到與您取得聯系，它可以幫助您確定您的訪客的痛苦。
總結
現在，我們明白了404頁面存在的原因，讓我們編寫了一個簡單的例子。
基本結構和設置
我會從一個簡單的HTML結構。你可以看到，什么也沒有，但是適當的頁面標題和一些CSS的空間。也沒有必要包括一個外部文件對于本例的目的。
<！DOCTYPE HTML>
<元 的charset = “UTF-8” />