?

七寶SEO七寶SEO七寶SEO

404 not found頁面設置及404頁面的作用

  你肯定有過這種經歷:看到一個非常感興趣的超鏈接,點擊后顯示 404 頁面無法訪問。

  遇到這種情況,你的用戶體驗肯定會大打折扣。但是,這個 404 頁面是否給了你什么其他信息?這些信息有用嗎?它們會讓你不再難過嗎?

向日葵app下载安装  你可以把 404 頁面當作一個著陸頁(landing page),雖然它可能是可以人人都不喜歡的著陸頁。試想,假如這個錯誤頁面加入其它元素,會有什么不一樣的體驗?

  如果一個 404 頁面設計得非常好的話,它會產生截然不同的效果,會讓用戶體驗到你的品牌存在感。反之,可以說你錯過了一個品牌宣傳機會。

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

  首先,你可能會好奇,為什么叫 404 錯誤頁面?404 not found是什么意思

  這個問題的答案有點神秘,這就要說到互聯網發展史的最開始,在差不多 1990 年的時候。

  有一種傳奇說法,之所以叫 404 錯誤頁面,是因為萬維網發明者 Tim Berners-Lee 的辦公室房間號就是 404。如果你想訪問網頁,就必須向這個房間提出申請,如果找不到這個網頁,就會提示你“404 not found”。

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

向日葵app下载安装  不過值得注意的是,404 錯誤通常都不是你導致的。從其它站點復制粘貼的鏈接,誰也無法保證真實性和有效性。

  你可能需要關注的是,遇到這類 404 錯誤頁面時,你該怎么做。

  關于 404 錯誤頁面的不同看法

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

向日葵app下载安装  一種是簡約款。這種基本上沒有什么內容的設計方式能夠非常直觀地傳達出相關信息:這個頁面出現了錯誤,除了給你一個返回到主頁的鏈接,基本上就沒有其它多余的元素了。

向日葵app下载安装  谷歌的 404 錯誤頁面就是這種典型設計。

404 not found頁面設置及404頁面的作用(圖1)

  然而,我并不認同這種設計方式。在我看來,404 錯誤頁面至少應該告知用戶,即便用戶沒有得到其想要的內容,也并不會有太大的影響。

  所有的錯誤頁面,至少不應該讓用戶的內心感到不快,并且通過一些有趣的元素轉移用戶的注意力。

向日葵app下载安装  因此,404 錯誤頁面值得用心投資,從而設計出讓用戶覺得標新立異、記憶猶新的錯誤頁面。

向日葵app下载安装  404 錯誤頁面應該包含哪些元素?

向日葵app下载安装  不同品牌,適用不同的 404 錯誤頁面元素。基本上,我建議包括以下 7 種內容:

  # 錯誤信息 #

向日葵app下载安装  你需要讓用戶在第一時間知道無法找到他們正在訪問的這個頁面。

  # 品牌 Logo #

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

  # 品牌定位 #

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

  # 一絲安慰 #

  給予用戶一絲安慰。雖然并不算什么,但在 404 錯誤頁面這種情況下,總是會受到用戶青睞的。但是不能太夸張。

  # 鏈接至相關內容 #

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

  # 行為召喚 #

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

  # 簡而不減 #

向日葵app下载安装  誰都不愿意打開 404 錯誤頁面,卻像點開了一部在線小說的感覺。此外,404 錯誤頁面也不應該像百度搜索的結果頁面。你根本不需要那么多的文字。

向日葵app下载安装  7 種炫酷十足的 404 錯誤頁面設計

向日葵app下载安装  許多品牌 404 錯誤頁面的設計風格,都是中規中矩的,而且大多數沒有一點創意。大家肯定希望能看到哪怕有一絲不同的錯誤頁面。

向日葵app下载安装  我總結出了以下 7 種受用戶青睞的 404 錯誤頁面設計:

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

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

向日葵app下载安装  “啊!看起來好像已經到達了宇宙的盡頭。趕緊回來吧,勇敢的探索者!”

404 not found頁面設置及404頁面的作用(圖2)

向日葵app下载安装  2、播放視頻內容的 404 錯誤頁面:Nectafy

  專注內容運營的網站 Nectafy 的 404 錯誤頁面就非常有趣。

向日葵app下载安装  當你進入 404 錯誤頁面后,這個網站會通過一段文字提示告訴你錯誤信息,同時向你推薦一個視頻。

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

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

404 not found頁面設置及404頁面的作用(圖3)

向日葵app下载安装  3、讓人思考的 404 錯誤頁面:Medium

向日葵app下载安装  著名的在線寫作閱讀平臺 Medium 的 404 錯誤頁面設計非常簡約,進入這個頁面就有一個碩大的黑體“404”字樣映入眼簾。

向日葵app下载安装  除了這個主要信息外,還有一個顯眼的搜索框,3 篇關于迷失錯過(lost)的文章鏈接。這種設計也非常有想法!

404 not found頁面設置及404頁面的作用(圖4)

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

  軟件項目托管平臺 Github 的 404 錯誤頁面,加入了動畫元素,設計非常可愛。同時,當你用鼠標將箭頭放置在卡通人物上方時,還能看到一種視差效果。此外,Github 的 500 錯誤頁面也值得一看!

404 not found頁面設置及404頁面的作用(圖5)

  5、交互型 404 錯誤頁面:Canva

向日葵app下载安装  在線平面設計軟件 Canva 利用其設計方面的優勢,向用戶展示了一個基于交互的 404 錯誤頁面。

  除了一句錯誤信息提示和一個跳轉至主頁的鏈接,剩下的只有一副打亂的拼圖。找不到你想跳轉的頁面,不妨花一點時間玩一下拼圖游戲也行。

404 not found頁面設置及404頁面的作用(圖6)

  術宅型 404 錯誤頁面:Klaus

向日葵app下载安装  網頁開發服務商 Klaus 的 404 錯誤頁面,完全是 404 錯誤頁面中的“另類”。你在頁面中基本上找不到 404 錯誤頁面的基本元素——沒有品牌 Logo,沒有行為召喚按鈕,甚至都沒有退出這個頁面的按鈕。

  你好像能感覺到他們在傳達的信息:基本元素規則都是留給笨蛋的。

  Klaus 公司的 404 錯誤頁面非常有趣。整個界面風格是 Commodore 64 (Commodore 公司 1982 年推出的電腦型號)的載入界面。

  界面內容正在加載一個程序,而這個程序正在搜索你想跳轉的鏈接。在完成搜索沒有匹配結果后,頁面就列出了磁盤目錄,并找到兩個文件名分別為 FOO 和 BAR 的文件。

404 not found頁面設置及404頁面的作用(圖7)

向日葵app下载安装  4 錯誤頁面:Kickpush

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

向日葵app下载安装  簡簡單單的幾個字,讓你第一時間知道了錯誤信息。

  同時,背景還有一個非常有名的 Gif 動畫——經典黑色幽默犯罪電影《低俗小說》其中的主角文森特·維嘉(Vincent Vega)迷路的 Gif。這個 Gif 動畫真的非常應景。

  北京SEO論壇七寶SEO向日葵app下载安装總結:404 錯誤頁面,其實是一個向用戶展示自身創意的機會。

向日葵app下载安装  雖然出了一個問題,但是從另一個角度來說,其它方面都沒有問題。把錯誤頁面當作著陸頁來設計,說不定還可以幫你推廣品牌,提高轉化率。


未經允許不得轉載:七寶SEO » 404 not found頁面設置及404頁面的作用