Facebook Pixel Facebook Pixel

7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器

2019-04-12
36kr
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
圖片來源 : flickr
SmartM解讀】人人都不想遇到404錯誤頁面,但你曾想過善用404錯誤頁,優化後也能變成品牌推廣利器嗎?本文介紹了7種吸引目光的404錯誤頁面設計方法,讓你的錯誤頁面不再死板。
人人都不想遇到的404錯誤頁面,稍加利用則可以變成品牌推廣的利器。
編者按:我們在瀏覽網頁的時候,總會時不時地遇到404錯誤頁面。為什麼會出現404錯誤頁面?404錯誤頁面到底是什麼?這篇翻譯自在線平台Justinmind的題為Tips for better 404 error pageswith examples的文章,向你介紹了404錯誤頁面的相關背景。同時,作者還向你介紹了7種炫酷十足的404錯誤頁面設計方法。
當你滿懷熱血地打開瀏覽器,在某篇文章中看到一個非常感興趣的超鏈接,然後你特別想閱讀這篇文章。當你點擊這個鏈接後,結果顯示404頁面無法訪問,你肯定有過這種經歷。遇到這種情況,會直接讓你感到不快,並直接導致你的用戶體驗大打折扣。
但是,你從這個404頁面上獲得了什麼信息?這些信息有用嗎?它們會讓你不再難過嗎?
你可以把404頁面當作一個著陸頁(landing page),雖然它可能是可以人人嫌棄的著陸頁。然後,你可以試想,假如這個錯誤頁面還可以加入其它元素,會有什麼不一樣的體驗?如果一個404頁面設計得非常好的話,它會產生截然不同的效果,會讓用戶體驗到你的品牌存在感。反之,可以說你就錯過了一個品牌宣傳機會。
這篇文章中,我將向你簡單介紹404錯誤頁面的相關背景,並推薦一些在設計方面獨樹一幟的404頁面。

什麼是404錯誤頁面?

首先,你可能會問,為什麼要叫做404錯誤頁面?其實,這個問題的答案有點神秘,這就要說到互聯網發展史的最開始,在差不多1990年的時候。雖然有一種傳奇說法稱,之所以叫404錯誤頁面,是因為萬維網發明者Tim Berners-Lee的辦公室房間號就是404。而如果你想訪問網頁,就必須向這個房間提出申請,如果找不到這個網頁,就會提示你「404 not found」。
實際上,404錯誤頁面是客戶端(即瀏覽器)的錯誤,因為我們會通過瀏覽器瞭解你想要的資源(即你點擊跳轉進入的URL鏈接),而這個資源是不存在的,或者是無法找到的。現在你明白404錯誤頁面了吧。
不過值得注意的是,404錯誤通常都不是你導致的。你從其它站點複製粘貼的鏈接,誰也無法保證這個鏈接的真實性和有效性,而你對此也愛莫能助。你可能需要關注的是,遇到這類404錯誤頁面時,你會怎麼做。

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

大體上,有2種404錯誤頁面的設計方式。
一種是簡約素款。這種基本上沒有什麼內容的設計方式能夠非常直觀地傳達出相關信息:這個頁面出現了錯誤,除了給你一個返回到主頁的鏈接,基本上就沒有其它多餘的元素了。谷歌的404錯誤頁面就是這種典型設計。
7種吸引目光的「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錯誤頁面,背景是一張帶有上個世紀50年代科幻大片的圖片。背景圖上的火箭人正在全力衝向外太空。
「啊!看起來好像已經到達了宇宙的盡頭。趕緊回來吧,勇敢的探索者!」
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
播放視頻內容的404錯誤頁面:Nectafy
專注內容運營的網站Nectafy的404錯誤頁面就非常有趣。當你進入404錯誤頁面後,這個網站會通過一段文字提示告訴你錯誤信息,同時向你推薦了一個視頻。
這個視頻是一個原創的MV短片。通過改寫U2樂隊的一首歌,填入新的歌詞,而歌詞大意基本上就是告訴你,你現在打開了錯誤頁面,不要難過,你可以通過這個404頁面上的搜索框和其它鏈接跳轉查找你感興趣的內容。
這種404錯誤頁面非常有創意,而且這個想出這個創意的人把他的家人都請來演這部MV,自彈自唱這首原創歌曲。
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
讓人思考的404錯誤頁面:Medium
著名的在線寫作閱讀平台Medium的404錯誤頁面設計非常簡約,進入這個頁面就有一個碩大的黑體「404」字樣映入眼簾。除了這個主要信息外,還有一個顯眼的搜索框,3篇關於頁面錯誤的文章鏈接。這種設計也非常有想法!
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
設計可愛的404錯誤頁面:Github
軟件項目托管平台Github的404錯誤頁面就非常有意思,加入了動畫元素,設計非常可愛。同時,當你用鼠標將箭頭放置在卡通人物上方時,還能看到一種視差效果。此外,Github的500錯誤頁面也值得一看!
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
交互型404錯誤頁面:Canva
在線平面設計軟件Canva就利用其設計方面的優勢,向用戶展示了一個基於交互的404錯誤頁面。除了一句錯誤信息提示和一個跳轉至主頁的鏈接,剩下的只有一副打亂的拼圖。找不到你想跳轉的頁面,不妨花一點時間玩一下拼圖遊戲也行。
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
技術宅型404錯誤頁面:Klaus
網頁開發服務商Klaus的404錯誤頁面,完全是404錯誤頁面中的「另類」。你在頁面中基本上找不到404錯誤頁面的基本元素——沒有品牌Logo,沒有行為召喚按鈕,甚至都沒有退出這個頁面的按鈕。
你好似也明白他們在傳達出的信息:基本元素規則都是留給笨蛋的。
Klaus公司的404錯誤頁面非常有趣。整個界面風格是Commodore 64(Commodore公司1982年推出的電腦型號)的載入界面。界面內容正在加載一個程序,而這個程序正在搜索你想跳轉的鏈接。在完成搜索沒有匹配結果後,頁面就列出了磁盤目錄,並找到兩個文件名分別為FOO和BAR的文件。明白了嗎?
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
GIF動畫的404錯誤頁面:Kickpush
Gif動畫再簡單不過了,你可能之前都看到過這個動畫。總部位於倫敦的產品設計工作室Kickpush在其404錯誤頁面上也很好地結合了自己的優勢。
簡簡單單的幾個字,讓你第一時間知道了錯誤信息。同時,背景還有一個非常有名的Gif動畫——經典黑色幽默犯罪電影《低俗小說》其中的主角文森特·維嘉(Vincent Vega)迷路的Gif動畫。老實說,這個Gif動畫真的非常應景。
7種吸引目光的「404錯誤頁面」,善用也能成為品牌推廣利器
寫在最後
404錯誤頁面,其實是一個向用戶展示自身創意的機會。雖然出了一個問題,但是從另一個角度來說,其它方面都沒有問題。把錯誤頁面當作著陸頁來設計,說不定還可以幫你推廣品牌,並且提高轉化率。
 
延伸閱讀
原文出處
【超過300本影音說書陪你成就更好的自己】讓大大學院與你共讀,幫助「沒時間讀書」、「讀書速度很慢」、「讀完就忘記」、「抓不到重點」的你,利用18分鐘領略閱讀的樂趣,吸收並帶走鮮明觀點,真正讓知識內涵融會於日常生活。立即點擊加入
大大讀書|全台最大線上影音說書
本網站內容未經允許,不得轉載。歡迎來信投稿、洽談文章授權。

關注職場最新趨勢,為知識學習創造最佳環境

大大學院「全台最大影音說書.知識學習平台」,致力於推廣終生學習、培養職場人士的閱讀習慣。

按讚、追蹤「大大學院」Facebook粉絲團,每天更新最新職場趨勢文章,帶你掌握關鍵資訊。

加入「大大學院|職場趨勢新觀點」,最新、最實用的職場課程都在這,學習資訊不漏接!請用手機點擊「加入Line好友」連結,或是掃描QR Code加入。

處理中