為什麼別人家的 404 錯誤頁面總是那麼好看?

為什麼別人家的 404 錯誤頁面總是那麼好看?

我們在瀏覽網頁的時候,總會時不時地遇到404錯誤頁面。為什麼會出現404錯誤頁面?404錯誤頁面到底是什麼?這篇文章原名為 Tips for better 404 error pages — with examples ,介紹了404錯誤頁面的相關背景。同時,作者還向你介紹了7種炫酷十足的404錯誤頁面設計方法。

當你滿懷熱血地打開瀏覽器,在某篇文章中看到一個非常感興趣的超連結,然後你特別想閱讀這篇文章。當你點擊這個連結後,結果顯示404頁面無法訪問,你肯定有過這種經歷。遇到這種情況,會直接讓你感到不快,並直接導致你的用戶體驗大打折扣。

但是,你從這個404頁面上獲得了什麼訊息?這些訊息有用嗎?它們會讓你不再難過嗎?

你可以把404頁面當作一個登錄頁(landing page),雖然它可能是可以人人嫌棄的登錄頁。然後,你可以試想,假如這個錯誤頁面還可以加入其它元素,會有什麼不一樣的體驗?如果一個404頁面設計得非常好的話,它會產生截然不同的效果,會讓用戶體驗到你的品牌存在感。反之,可以說你就錯過了一個品牌宣傳機會。

這篇文章中,我將向你簡單介紹404錯誤頁面的相關背景,並推薦一些在設計方面獨樹一幟的404頁面。

 

什麼是404錯誤頁面?

首先,你可能會問,為什麼要叫做404錯誤頁面?其實,這個問題的答案有點神秘,這就要說到互聯網發展史的最開始,在差不多1990年的時候。雖然有一種傳奇說法稱,之所以叫404錯誤頁面,是因為WWW發明者 Tim Berners-Lee 的辦公室房間號就是404。而如果你想瀏覽網頁,就必須向這個房間提出申請,如果找不到這個網頁,就會提示你「404 not found」。

實際上,404錯誤頁面是客戶端(即瀏覽器)的錯誤,因為我們會透過瀏覽器瞭解你想要的資源(即你點擊跳轉進入的 URL 連結),而這個資源是不存在的,或者是無法找到的。

不過值得注意的是,404錯誤通常都不是你導致的。你從其它網站上複製貼上過來的連結,誰也無法保證這個連結的真實性和有效性,而你對此也愛莫能助。你可能需要關注的是,遇到這類404錯誤頁面時,你會怎麼做。

 

關於404錯誤頁面設計的兩種不同看法

大體上,有2種404錯誤頁面的設計方式。

一種是簡約款。這種基本上沒有什麼內容的設計方式能夠非常直觀地傳達出相關訊息:這個頁面出現了錯誤,除了給你一個返回的連結,基本上就沒有其它多餘的元素了。Google 的404錯誤頁面就是這種典型設計。

為什麼別人家的 404 錯誤頁面總是那麼好看?

然而,我並不認同這種設計方式。在我看來,404錯誤頁面至少應該告知用戶,即便用戶沒有得到其想要的內容,也並不會有太大的影響。所有的錯誤頁面,至少不應該讓用戶的內心感到不快,並且透過一些有趣的元素轉移用戶的注意力。因此,404錯誤頁面值得用心投資,從而設計出讓用戶覺得標新立異、記憶猶新的錯誤頁面。總之,你要記住的是,404錯誤頁面其實也是一種登錄頁。

 

404錯誤頁面應該包含哪些元素?

不同品牌,可以適用不同的404錯誤頁面元素。基本上,我建議包括以下7種內容:

錯誤訊息

你需要讓用戶在第一時間知道無法找到他們正在訪問的這個頁面。

品牌Logo

承認自己的錯誤,即便有時候這個錯誤並不是你導致的。值得注意的是,最好在404錯誤頁面的核心位置確保用戶能看到你的品牌 Logo。

品牌定位

同時,確保404錯誤頁面和你的品牌定位相匹配。

一絲安慰

一絲安慰,雖然並不算什麼,但在404錯誤頁面這種情況下,總是會受到用戶青睞的。只不過,你不能太誇張。

連結至相關內容

在404錯誤頁面上,你可以添加3至4個可能會讓用戶感興趣的連結。無論如何也不要選擇讓用戶直接走掉,即便是在404錯誤頁面上。

轉化行為

還記得前文說過,要把404錯誤頁面當作登錄頁來設計吧。所以,不妨加入一些登錄頁設計邏輯:在頁面添加一些「下載」、「註冊」甚至「搜索框」等元素,讓用戶在遭受「挫折」同時可以有更好的選擇。

簡而不減

誰都不願意打開404錯誤頁面,卻像點開了一本線上小說的感覺。此外,404錯誤頁面也不應該像搜尋的結果頁。你根本不需要那麼多的文字。

 

7種炫酷的404錯誤頁面設計

許多品牌404錯誤頁面的設計風格,都是中規中矩的,而且大多數沒有一點創意。我們肯定希望能看到哪怕有一絲不同的錯誤頁面。以下,我總結了大概7種受用戶青睞的404錯誤頁面設計。

高概念、具有視覺衝擊的404錯誤頁面:Huemor

總部在紐約的網站設計公司 Huemor 的404錯誤頁面,背景是一張帶有1950年代科幻片的圖片。背景圖上的火箭人正在全力衝向外太空。

「啊!看起來好像已經到達了宇宙的盡頭。趕緊回來吧,勇敢的探索者!」

為什麼別人家的 404 錯誤頁面總是那麼好看?

播放影片內容的404錯誤頁面:Nectafy

專注內容經營的網站 Nectafy 的404錯誤頁面就非常有趣。當你進入404錯誤頁面後,這個網站會透過一段文字提示告訴你錯誤訊息,同時向你推薦了一個影片。

這個影片是一個原創的 MV 短片。透過改寫U2樂隊的一首歌,填入新的歌詞,而歌詞大意基本上就是告訴你,你現在打開了錯誤頁面,不要難過,你可以透過這個404頁面上的搜索和其它連結跳去找你感興趣的內容。

這種404錯誤頁面非常有創意,而且這個想出這個創意的人把他的家人都請來演這部MV,自彈自唱這首原創歌曲。

為什麼別人家的 404 錯誤頁面總是那麼好看?

讓人思考的404錯誤頁面:Medium

著名的在線寫作閱讀平台 Medium 的404錯誤頁面設計非常簡約,進入這個頁面就有一個碩大的黑體「404」字樣映入眼簾。除了這個主要訊息外,還有一個顯眼的搜尋欄,3篇關於頁面錯誤的文章連結。這種設計也非常有想法!

為什麼別人家的 404 錯誤頁面總是那麼好看?

 

設計可愛的404錯誤頁面:Github

軟體專案平台 Github 的404錯誤頁面就非常有意思,加入了動畫元素,設計非常可愛。同時,當你用滑鼠將箭頭放置在卡通人物上方時,還能看到一種視差效果。此外,Github 的500錯誤頁面也值得一看!

為什麼別人家的 404 錯誤頁面總是那麼好看?

 

互動型404錯誤頁面:Canva

線上設計工具平台 Canva 就利用其設計方面的優勢,向用戶展示了一個基於互動設計的404錯誤頁面。除了一句錯誤訊息提示和一個跳轉至主頁的連結,剩下的只有一張打亂的拼圖。找不到你想要的頁面,不妨花一點時間玩一下拼圖遊戲也行。

為什麼別人家的 404 錯誤頁面總是那麼好看?

技術宅型404錯誤頁面:Klaus

網頁開發服務商 Klaus 的404錯誤頁面,完全是404錯誤頁面中的「另類」。你在頁面中找不到404錯誤頁面的基本元素——沒有品牌 Logo,沒有行為轉化按鈕,甚至都沒有退出這個頁面的按鈕。

你好似也明白他們在傳達出的訊息:基本元素規則都是留給笨蛋的。

Klaus 公司的404錯誤頁面非常有趣。整個界面風格是 Commodore 64(Commodore公司1982年推出的電腦型號)的載入界面。界面內容正在載入一個程式,而這個程式正在搜尋你想找的連結。在沒有找到結果後,頁面就列出了磁碟機的目錄,並找到兩個分別為 FOO 和 BAR 的檔案。明白了嗎?

為什麼別人家的 404 錯誤頁面總是那麼好看?

GIF動畫的404錯誤頁面:Kickpush

Gif 動畫再簡單不過了,你可能之前都看到過這個動畫。總部位於倫敦的產品設計工作室Kickpush在其404錯誤頁面上也很好地結合了自己的優勢。

簡簡單單的幾個字,讓你第一時間知道了錯誤訊息。同時,背景還有一個非常有名的 Gif 動畫——經典黑色幽默犯罪電影《黑色追緝令》其中的主角文生·韋格(Vincent Vega)迷路的 Gif 動畫。老實說,這 Gif 動畫真的非常應景。

為什麼別人家的 404 錯誤頁面總是那麼好看?

寫在最後

404錯誤頁面,其實是一個向用戶展示自身創意的機會。雖然出了一個問題,但是從另一個角度來說,其它方面都沒有問題。把錯誤頁面當作登錄頁來設計,說不定還可以幫你推廣品牌,並且提高轉化率。

 

36Kr
作者

36氪(36Kr.com)累計發表超過10.8萬條包含圖文、音訊、影片在內的優質內容。氪原創內容體系涵蓋新創公司、大公司、投資機構、地方產業與二級市場等內容模組,設置有快訊、深度商業報導

使用 Facebook 留言
發表回應
謹慎發言,尊重彼此。按此展開留言規則