你見過最好的 404 頁面是哪個?

只要你感覺好的都行,不一定要最有創意。

順便給個鏈接,欣賞一下。


一個設計師個人站點的 404 頁面: A ninja stole this page. http://huwshimi.com/404/

另外附贈兩篇收集 404 頁面的文章,裡面提到的站點都很有意思。

35 Creative 404 Error Pages http://webdesignledger.com/inspiration/35-creative-404-error-pages

40 Creative 404 Error Pages to Inspire You http://webdesignledger.com/inspiration/40-creative-404-error-pages-to-inspire-you


wow的404

==========

Four

:oh four

==========

非常魔獸,又非常有幽默感,可以調節用戶情緒

http://us.battle.net/wow/en/forum/topic/19655799999


Fotor在線平面設計工具| 免費平面設計平台和圖片編輯器,海量設計素材和模板【Fotor中國版】

一個有創意的404頁面是用戶對網站的一種新發現。它可以把令人不怎麼愉快的場景變得輕鬆起來,還可以讓用戶知道在哪兒可以獲得幫助。

接下來,Fotor將教你如何做一個有創意的404頁面:

01. 有趣

不要害怕,大膽的去做一個有趣的404頁面吧。儘可能地發揮你的想像,什麼都可以!只要能夠表達出你要傳遞的信息。

Behance/Thapwaris Chinsirirathkul

在這個有趣的404頁面,你被帶到了太空。設計師用有趣、與眾不同的方式放置404。

02. 充分利用圖形

在設計中,圖形永遠是你最好的朋友。你可以用圖形組成文字或是圖案,當然也可以用多個圖形來拼出一個新的圖形。

Behance/Manoj Bhadana

在這個頁面里,設計師就用多個圖案組合成了一個新的圖形——一個問號。問號說明用戶尋找的網頁出了一些問題。而如果只是放一個簡單的問號,則會顯得單調無趣。

03. 動起來

你可以選擇用特效使圖片看起來像是在移動,但是這已經是21世紀啦,如果你想要動態的效果,就真的讓他們動起來吧。

Behance/PBB | PITBLACKBEARD

這個404頁面的動畫非常有趣可愛。就算讀不懂頁面上的文字,你也會照樣喜歡這個頁面。帽子上擺動的流蘇給這個頁面增添了新的魅力。

04. 簡潔的風格

你可以用非常非常簡單的方式設計一個404頁面。如果你覺得複雜的頁面已經過時了或是你不喜歡這種風格,你就把它做的簡單一點,只放一些必要的信息就行。

Behance/Keren Rijensky

這個404頁面設計的超級簡單,不過傳達了足夠多的信息。把404放置在一個放大鏡里很形象——表明你在尋找一些東西,但是你卻找到了這個頁面。你不用看旁邊的文字都能立馬明白這是什麼意思。

05. 調動感情

調動人們的情緒。你可以讓人們笑或是哭或是反省自己,還有更多更多。人類是情緒化的動物,人們會對你寫的東西感同身受。

Behance/Keren Rijensky

這個可愛的小東西一定觸動了你心靈的某一個角落。它看起來十分難過,對頁面的丟失感到十分抱歉。你可能會為它的傷心感到自責,幾乎都快忘了自己打開這個頁面時有多不高興了。

06. 圖文結合

圖文結合的方式也很受人歡迎。它很有創意也展示了很多細節。所以為什麼不把它加在你的404頁面裡面呢?

Behance/kobieta

這個404頁面很有創意。一隻鴿子隔著屏幕看著你,還給你提供了一些選擇的建議。

07. 別想太多啦

不要為了追求一個獨特的404頁面而拋棄現有的一切成果來設計一些完全不同的東西。看看現在流行的是什麼,然後把他們運用到你的頁面里。

Behance/Aaron Snyder

這個頁面選了一個我們很熟悉的卡通形象。這個小人設計得不是很完美,但是很符合404這個狀況。這個表情十分意味深長。披肩也暗示著不是人人都是贏家(或是英雄)。

08. 實在點兒

不用掩飾404頁面的主題。大家都知道到這個頁面意味著什麼,所以乾脆就實在點兒,告訴他們是怎麼回事兒。

Eleks

這個頁面上有一個機器人(代表著網站或是互聯網),小機器人開始從關節的地方損壞了。它壞了,就像你想要打開的頁面一樣,也壞了。

09. 有特色一點

如果你想做圖文結合的樣式,不用非要把圖像做得真實。隨意一點,做出你自己的風格。卡通圖像會讓人覺得親近。

Behance/Diogo Marquetti

這個404頁面非常有特色。配色簡單,圖片可愛。畫面的內容也很有趣。它告訴你是一隻小羊而不是什麼高科技導致了你打不開你的頁面,因為它拔掉了你想打開的頁面的插線。

10. 運用重疊

用重疊的圖形、文字和顏色打造有趣的視覺體驗。

Behance/Evtimov

如果沒有重疊的元素,這個頁面看起來會過於簡單了。它運用黑白的配色和一些簡單的文字共同打造了一個具有設計感的頁面。

11. 選擇相關的圖片

儘管選擇一些與主題不相關的圖片可能會很有趣,但是使用相關的圖片要更實際一些。相關的圖片可以表達主題,也更講得通。

Behance/Colin Tossijn

這個頁面就使用了很相關的圖片。紅燈告訴你,出了一些問題,你得停下了。但是他們用了他們自己的Logo代替了原本的圖形。這很有創意地宣傳了他們的品牌。

12. 用有限的顏色

只挑選幾種可以搭配起來的顏色或是用同一色系深淺不同的顏色來打造你的頁面。這樣可以構建出一個統一的主題,而且設計的時候會比較簡單,因為不需要用到那麼多種顏色。

Behance/Alessandro Ceporina

這個頁面用了很多陰影和深淺不同的藍色,看起來很不錯。雖然用的都是藍色,但是深淺的差異又比較大,不會讓人感覺「太藍了」。而且主題鮮明,各個構件聯繫緊密。

13. 有質感的設計

大多網頁都是使用平面化的、配色簡單的設計,所以如果使用立體的,比較有質感設計絕對可以使你脫穎而出。

Behance/Damien Pereira

這個頁面還是用了比較簡單的配色,不過立體的質感給這個頁面填了一絲別樣的風采。設計師在下方用了一個摺紙展開的效果,文字下方的深青色背景又使整體畫面看起來不會那麼擁擠。

14. 提供選擇

當用戶訪問到了404頁面時,為他們提供一些選擇的機會比較重要。他們應該返回到上一個頁面,還是直接跳轉回你的主頁?你提供的選擇越多,他們越有可能留在你的網站而不是直接退出。

Behance/Harry Tran

這個頁面為用戶提供了很多選擇。他們可以回到主頁,或是搜索網站內容,或是訪問網站的社交網路頁面。比起把404頁面當作訪問的終點,設計師充分的利用了這個頁面,盡最大可能留住用戶而不是放棄他們。

15. 打破常規

不要把自己局限在常規的網頁設計中,可以選擇的不單單只有文字、顏色和圖案。打破常規,做些不一樣的事,都可以讓你從眾多設計中與眾不同。

Behance/Rodrigo Costa

這個頁面就是一個打破常規的很好的示例。與傳統的404不同,他們用他們公司的傢具拼出了404。這個做法很有創意,也很有趣,打破了單調的傳統。

16. 多留些空間

沒必要把你的404頁面的每一寸都填滿。讓每一個構件都有呼吸的空間是種更好的選擇。

Behance/Jacopo Caracci

除了logo和幾條信息,這個頁面的大部分空間都是空白的藍色。左面和右面的信息中有很大一片空白,就像頁面上的雲朵一樣,兩者給人一種在飄動的感覺。

17. 雙關

404頁面的意思就是有些東西找不到了,所以為什麼不利用這個事實呢?想想有什麼有趣的表達或是場景是與這個事實有關聯的,並把他們用到你的頁面中。

Behance/Zach Daley

這個頁面想到了一個與丟失有關聯的場景——一座大海中渴望被發現的孤島。

18. 無厘頭一點

如果你有一些有趣的點子想放到404頁面上,記得使用和主題相關的圖片。

Behance/Zach Daley

這個頁面上有一條有趣的信息:別慌,記得隨時檢查你的氧氣含量。設計師還在旁邊放了一個飄在太空中彷彿脫離控制了的宇航員。所以,這條消息到底是留給你的,還是留給宇航員的呢?

19. 打破次元

將幾個不同的畫面疊加起來,打造一種打破次元壁的感覺。

Behance/Dariusz S

這個頁面中,一把尖銳的刀劃破了寫有幾條信息的白色背景。深紅色和黑色的對比為頁面增加了層次感。儘管畫面中只有兩層背景,看起來卻像有三層一樣。

20. 和諧的風格

記得提前確定好你的頁面要用什麼風格。如果想用尖銳的、有菱角的圖形,就一個圓滑的元素都不要用。不論是哪一種風格,都要在頁面里的所有元素上都運用這種風格,包括字體。

Behance/Cristina Maria

這是一個很圓潤的嘗試。與圓圓的雲彩相同的風格也運用到了字體上。如果他們使用了一個普通的字體,看起來就會十分不和諧。


html 404頁面模板源代碼下載,很有愛的404頁面 (可愛的小象)

分享2款比較好看的404頁面-分享-最代碼

html 62個404出錯網頁頁面提示免費模板源代碼下載

外星人劫持404 html網頁模板源代碼下載,有進度條顯示特效

藍色大氣404網頁特效模板源碼下載-分享-最代碼


借題分享下這篇:

同樣是404 Not Found,為什麼只有你的用戶跑了?


剛發現SOSO問問的404:

(我是從知乎上另一個問題的回答中,跳到這個404的...囧)

以下:

誠如你所見,刷新有更多發現.

只要有心,用404也能做善事,贊一個.

一起尋找失蹤寶貝


大部分404頁面都是交互和動態的,所以每一個頁面我都在截圖下面加了鏈接。

一定要點開體驗!!!

http://pebblecode.com/404

模仿早期的蘋果電腦桌面,可以操作。

http://www.bloomberg.com/404

這個動圖很有意思……

另外,這個網站的500頁面也很有趣:http://www.bloomberg.com/500

https://github.com/500

Github的500頁面,和其他答案里提到的404頁面一樣,有滑鼠的交互。

https://www.hillaryclinton.com/404/

希拉里網站上的404頁面,右邊的動圖是希拉里的火車票出問題了,一直刷……

http://www.bluefountainmedia.com/404

這個404上面有吃豆人可以玩。

下面這兩個頁面和美劇Lost有關:

http://devinhalladay.com/404/

http://www.bluedaniel.com/404

這個404是有音效的,而且有滑鼠交互,地鐵每過一會兒就會來一班。

https://www.southwesttrains.co.uk/404

鐵路公司的404,和上面那個一樣,也會有列車駛過。

http://hotdot.pro/en/404/

這個交互很棒!

https://nclud.com/404

這個頁面是一個命令行。

http://newism.com.au/404

這兩個404頁面用了同一個演員的動圖:

https://muxumuxu.com/404

http://messinmotion.com/404.html

這三個404頁面有信號不穩定的閃爍效果:

https://alexpate.uk/404/

https://montag.uy/404

這個效果非常棒!

http://weareblend.la/404

這兩個頁面上的眼睛會隨著滑鼠轉動:

http://enstyled.com/404

http://lab.hakim.se/404/netmag.html

這個是reveal.js的作者的作品,另外,他的網站上還有很多有趣的demo。

http://antonandirene.com/404

https://joyneop.xyz/404

文字漂浮效果,顏色會變換。

https://paper-leaf.com/404

動圖和文字很搭調。

http://belka.us/en/404

http://builtbykrit.com/404

這個非常幽默!!

下面幾個頁面每次刷新都會出來不同的圖片或動圖:

http://mynameismartin.com/404

https://adpearance.com/this-page-isnt-real

http://purplerockscissors.com/404

https://unsplash.com/404

http://www.mistakenforstrangers.com/404

http://froont.com/aliens-stole-the-cow

http://stackoverflow.com/xxxxxxxxxxx

Stack Overflow的404,這裡有對這段代碼的解釋:What"s the joke in the Stack Overflow 404 page code?

因為開了太多404,中間Chrome崩潰了一次:(,寫好的答案全沒了……

另外,Oops Pages - Creative 404 Sites 這個網站收集了很多有創意的404頁面。


毛遂自薦一個,我的個人主頁的404頁面http://www.yangzhou301.com/404


騰訊產品QQ詞典網頁版的404挺不錯,一個便簽上手寫404,有一句詩:

從前有座山,山上有座廟

廟裡有個頁面,現在找不到

這裡,騰訊以一個有趣並且是廣為人知的詩句緩解了用戶的使用壓力。http://dict.qq.com/404.html

個人認為,其實404頁面能做到以下幾點就算是一個好設計:

  1. 能夠減緩用戶對錯誤操作的挫敗感
  2. 簡潔不複雜,能讓用戶知道出了什麼事情
  3. 能夠為用戶給出解決辦法
  4. 能夠體現網站的主題。

p.s. 騰訊CDC團隊曾經探討過404頁面的設計問題,如下:

http://cdc.tencent.com/?p=2907


lighthouse的:


自薦一個:

http://www.netcan666.com/404/



http://hilo.hawaii.edu/academics/ccecs/islandsummer.php

加一個

http://heyzap.com/404


雖然不是具體網址的404,但Google chrome 的這個相當好玩

這隻小恐龍大家肯定見得多了吧,別以為它只是只恐龍,你按一下空格就會發生神奇的事情了

有時候谷歌的程序員真是萌呢~


2016-05-08更新:

丁香園http://chest.dxy.cn/article/646410

————————————————原2013-12-03答案———————————————————


有趣的煎蛋:



https://www.google.com.hk/search?q=dead+linknewwindow=1safe=strictsource=lnmstbm=ischsa=Xei=wfdnUr6JIObqiAerwoGgDwved=0CAkQ_AUoAQbiw=1303bih=683


暴雪的404頁面 很炫~

http://us.blizzard.com/en-us/error.html


https://dribbble.com/OliaGozha


推薦閱讀:

如何在排版編輯中建立網格系統?(具體軟體操作)
前端開發中有哪些插件或組件,值得自己去實現一次?
為什麼很多網頁喜歡這樣設定字體:{ font-family: Arial, Helvetica; }?
《The Daily Mail》現在是新聞類媒體中流量之冠,超過《紐約時報》,設計角度有什麼可取之處?
前端小白前端小白階段的項目都是在哪裡找的~?

TAG:網頁設計 | 調查類問題 | 頁面設計 | 404頁面 |