文、G小編

 

還記得聯成電腦資訊分享:網頁設計的404代碼嗎?當你正在瀏覽網站或是搜尋資料時,一直跳出404網頁,心裡一定很不開心吧!如果這個404網頁具有設計感或是幽默感,此刻的你應該會會心一笑,短暫忘了找不到資料的苦。

 

好的404網頁具備什麼樣的條件,相信大家都還記得,小編介紹的每一個404網頁設計都好棒,但看過那麼多頁,讓小編印象最深刻的NO.1是幽默感與設計感兼備的蒼蠅先生和猴子小姐。

來源:https://dribbble.com/shots/2249189-404-error

 

來源:http://rbardini.com/p/404/

 

以下我們就來介紹其他不錯的404網頁設計,由於有些404網頁已改版不存在了,就以圖片提供給大家參考,這邊簡單分為:創意幽默風格、遊戲設計風格、太空風格、極簡或文字風格、電影卡通風格5大類。

 

創意幽默風格:

不用多說,這樣的創意相信誰都喜歡!

來源:https://mikandi.com/404notfound

 

這是flash動畫喔!但因為很有創意,所以希望大家可以看完。

來源:http://www.bluedaniel.com/404

 

結合品牌的404網頁,加上互動小遊戲,資料找累了嗎?玩一下再走吧!

來源:https://www.kitkat.com/404notfound

 

這麼多眼睛,你害怕了嗎?

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

 

遺失的書本象徵404錯誤,簡約的設計一看就懂,還有引導的按扭,小編覺得蠻有創意。

來源:http://aeaonline.org/404

 

又是一個結合品牌的404網頁,只剩空盤子,意味著這裡沒有你要找的頁面喔!

來源:http://cooklet.com/Home/Http404/?aspxerrorpath=/404%22%20rel=%22NOFOLLOW%22%3E

 

遺失的一片西瓜,很多404網頁都會由類似這樣的創意延伸。

來源:https://dribbble.com/shots/2174311-Day-033-404-Page

 

斷掉的……畫面設計得很可愛,也很容易理解。

來源:https://dribbble.com/shots/411777-Browser-FAIL

 

結合公司產品,小編覺得這是一個很棒的創意。

來源:http://www.404notfound.fr/page/lego

 

手指受傷,其實小編也蠻喜歡的。

來源:http://www.404notfound.fr/page/facebook

 

迷失的長頸鹿,和一般正常的長頸鹿,形成強烈對比。

來源:http://www.404notfound.fr/page/giraffe

 

消失的東西也是很常被應用在404網頁的手法喔!

來源:http://www.404notfound.fr/page/acm-interiors

 

3D黏土的創意很有趣,頁面也有相當明確的導航功能。

來源:https://www.behance.net/gallery/17044573/404-Page-Design

 

遊戲設計風格:

來源:http://androiddev101.com/404notfound

 

來源:http://www.404notfound.fr/page/espnza

 

有互動的404網頁還是最吸引人的,讓小編聯想到復古的小遊戲。

來源:https://lubie.co/404notfound

 

來源:https://dribbble.com/shots/2049610-404-Page

 

來源:https://dribbble.com/shots/1799551-Page-Cannot-Be-Found

 

來源:https://dribbble.com/shots/1713075-404

 

來源:https://dribbble.com/shots/2843873-Oops-404

 

外太空風格:

除了遺失的東西、迷路之外,外太空也是常被用來作為404網頁設計元素。

來源:https://dribbble.com/shots/2680537-404

 

來源:https://www.agens.no/404

 

來源:https://dribbble.com/shots/3198699-404-Space-error

 

來源:https://www.behance.net/gallery/25864773/404-Page-not-found-cloud-tutorialcom

 

充滿太空風格的404文字設計。

來源:https://dribbble.com/shots/2928075-404-illustration

 

來源:https://dribbble.com/shots/2424315-Daily-UI-008-404-Page

 

來源:https://dribbble.com/shots/2311590-UI-challenge-404-page-008-PSD

 

極簡或文字風格:

簡約、單純的設計風格,不管是什麼頁面一直都很吃香,因為一目了然,重點很容易被看見。

來源:https://www.behance.net/gallery/44774997/404-Error

 

來源:https://dribbble.com/shots/2907450-404-page-for-Kultprosvet-website

 

來源:https://dribbble.com/shots/3017401-404-page-DailyUI-008 

 

來源:https://www.behance.net/gallery/48736971/DailyUI-Challenge-008-404-Error-page

 

來源:http://criticalzero.co.uk/404

 

來源:https://dribbble.com/shots/1565044-Missing-File

 

來源:http://www.twinpx.ru/404

 

來源:http://www.oroza.com/404

 

來源:http://veerle.duoh.com/404

 

來源:http://www.taptapdesign.com/404notfound

 

來源:https://www.behance.net/gallery/30577723/Daily-UI-Day-8-Error-404

 

來源:https://dribbble.com/shots/2328974-404-concept

 

來源:https://dribbble.com/shots/2678675-Work-Site

 

來源:https://dribbble.com/shots/2314288-404-Page

 

電影卡通風格:

蝙蝠俠你還看見了誰?

來源:http://www.batman-3d.de/404

 

俏皮的卡通人物,會使得404網頁更加幽默。

來源:https://www.behance.net/gallery/48829267/404

 

小編也很喜歡這個404網頁的風格,有一種手遊的感覺。

來源:https://www.behance.net/gallery/47376731/Daily-UI-008-404-page

 

來源:https://www.behance.net/gallery/47341003/Oops-404-Page-Design

 

相撲選手的404網頁也很可愛。

來源:https://dribbble.com/shots/1919813-Awkward-Sumo-Butt-SignUpSumo-s-404

 

來源:https://dribbble.com/shots/2060873-Little-scared-monster

 

來源:https://dribbble.com/shots/2455801-Awesome-Kit-404-illustration

 

來源:https://dribbble.com/shots/2783738-Environmental-Preservation-404-Page

 

別懷疑連皮老闆也來了!

來源:http://www.eternalmoon.com/404.htm

 

來源:https://www.behance.net/gallery/43889911/Oh-no-404-Error-Page-Illustration

 

來源:https://dribbble.com/shots/2116733-404-funky-monkey

 

來源:https://www.behance.net/gallery/48912025/404-ERRO

 

來源:http://www.lissasleeckx.be/404.html

 

來源:https://www.behance.net/gallery/10286437/404-Pages

 

很明確的404網頁,提供搜尋工具,讓您可以更快速找到頁面。

來源:https://www.behance.net/gallery/46539017/404-Page

 

來源:http://www.projectfedena.org/404

 

來源:https://dribbble.com/shots/1547014-404

 

看完了這麼多創意,不妨思考一下您的網站是不是能變得更有趣?讓來訪者對您的網站更印象深刻呢?還有很多創意沒辦法完全收錄,喜歡的朋友也可以開始收錄好的設計,讓它成為你的創意來源喔!

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享:全方位養成  設計、行銷、企劃一次學會

聯成電腦資訊分享:網頁設計的404代碼

聯成電腦資訊分享:不會寫語法,也能輕鬆做網站!

聯成電腦資訊分享:網站設計的40個靈感泉源(四)

聯成電腦菜鳥救星:9個免費工具,讓你成為配色達人(下)

 

 

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()