SPARKFUL
真抱歉,这个页面尚未被翻译成你的语言,但是我们正在努力中了!

Blog

SPARKFUL 团队心得与生活点滴

用趣味留住使用者:10 個令人驚喜的 404 頁面設計

Decill Changexperience-design
name

我們在網路上瀏覽時,一般都是利用網址來找尋你需要的網頁。而每次當你輸入的網址錯誤、或是原本的網址更改了,就會出現「HTTP 404」找不到網頁的畫面。一般我們看到的畫面會是類似以下的狀況:

看起來很眼熟對吧?有時候光是看到這個畫面就會想嘆嘆氣呢。由於 404 可以說是最常見的一種 HTTP 狀態碼,因此許多網站都會特地為這個 404 的畫面做客製化,讓瀏覽者即使從錯誤的連結來訪你的網站,也不會有「連結是壞的,可能這個網站不存在了」或是「網站可能消失了,不再經營了」的感覺而直接關閉網頁、無形中失去了原本可能來拜訪的瀏覽者。

而一個詼諧有趣的 404 畫面不僅能讓瀏覽者知道自己來對了地方,要是夠有趣的話,還會讓人會心一笑呢!讓我們來看看各大公司網站為我們這些可能迷路的旅人準備的小驚喜吧:

Google 的 404 網頁,相信有不少人看過了,簡單的手繪插畫讓人覺得輕鬆又可愛

www.google.com/404

Dribbble 的 404 網頁,"dribble" 在籃球中是指運球的意思(Dribbble 的 Logo 本身就是一顆洋紅色的籃球!),而在 dribbble 上的 404 網頁就是一個 Air Ball 囉。

dribbble.com/404

GitHub 的 404 網頁相當精緻,相信星戰迷一定對這個場景不陌生,記得點進去移動你的滑鼠看看網頁的互動效果。

github.com/404

Dropbox 由於具有檔案分享的功能,所以它的 404 同樣一定也很多人看過:是個衍生自 Dropbox Logo 的視覺錯視立體方塊圖

www.dropbox.com/404

臉書 Facebook 雖然是世界網站流量排名第一的網站,但它的 404 其實不是這麼常見,而自然臉書的 404 也是從按「讚」設計延伸出來的。

www.facebook.com/404notfoundfortheurl

Lego 網站的 404 畫面做得相當活潑有趣

www.lego.com/404

這是一個諧音梗,壞掉的連結有時候我們稱之為死亡的連結 "Dead Link",而 Link 又剛剛好是任天堂著名遊戲的主角姓名...

www.pixiapps.com/404/

一樣是老遊戲,紅白機上的小蜜蜂畫面搭配著 "Play again",將瀏覽者帶回網站的主要頁面。

www.marketingvirtuel.fr/404notfound

老遊戲的梗常常被拿出來惡搞:還記得到處都找不到正牌公主的瑪莉歐嗎?

彩色 Bar 跟藍色當機畫面讓大家可以回味以往的美好時光?

自定的 HTTP 404 雖然平常在網頁上看不到、很容易被設計師忽略,但如果你只是讓使用者看到那個瀏覽器預設的 404 畫面時,往往使用者會直接關閉網頁離開呢。相對的要是可以針對 404 頁面做適當的設計,即使瀏覽者來錯了入口,也可以提升瀏覽者對你的好印象,進而順利引導瀏覽者回到你的網站中。也記得為你的客人們準備一些小小的驚喜吧!


參考文獻

  1. Wiki HTTP 404 ( 圖片來源: Andrew Stawarz, CC Licensed)
Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
相关文章
name

如何為產品注入玩心?Fourdesire 遊戲化設計的五個心法

Sammy 是 Fourdesire 的助理製作人,在 2017 年底加入 Fourdesire 後,開始參與遊戲化產品設計,目前負責經營《記帳城市》以及研發新產品。這篇文章會有這幾年在 Fourdesire 參與產品設計的正面和側面觀察,一...阅读更多
name

配樂與音效,在互動作品中該扮演什麼角色?

多數影像的配樂與音效都是在作品完成之後,再交給配樂師進行後製,或許你會說這是專業分工和業界流程,亦可以減少修改的問題,那如果配樂、音效與作品同時開始進行製作呢?3 月 6 日(三)以「配樂與音效在作品製作上,該扮...阅读更多
name

接案還是創作?李百罡:「滿足他人也是一種能力。」

3 月 6 日(三)由 FourdesireU 主辦的「配樂與音效在作品製作上,該扮演什麼樣的角色?」講座,邀請到製作獨立遊戲《返校》配樂與原聲帶的作曲家張衞帆,以及 App《Walkr》、《記帳城市》配樂音效製作人李百罡...阅读更多