15個(gè)404網(wǎng)頁(yè)出錯(cuò)創(chuàng)意設(shè)計(jì) —— 設(shè)計(jì)資源 06

轉(zhuǎn)載贊8 收藏19 評(píng)論1

舉報(bào) 2015-06-14

掃描,分享朋友圈

做網(wǎng)站是系統(tǒng)工程。首頁(yè)的內(nèi)容要層次分明，導(dǎo)航要結(jié)構(gòu)清晰，子頁(yè)面要排版均衡，相對(duì)而言自由度稍高一點(diǎn)的，應(yīng)該是404頁(yè)面了。雖然404本身就是一個(gè)告知用戶內(nèi)容訪問(wèn)出錯(cuò)的錯(cuò)誤代碼，但是富有創(chuàng)意的設(shè)計(jì)師會(huì)充分利用機(jī)會(huì)，展現(xiàn)網(wǎng)站的獨(dú)特氣質(zhì)；重視用戶體驗(yàn)的設(shè)計(jì)師，則會(huì)充分考慮此刻用戶的心情，竭盡全力引導(dǎo)用戶去對(duì)的頁(yè)面。

所以，404頁(yè)面可以做的很簡(jiǎn)單，但也可以創(chuàng)意十足。今天小編就推薦15個(gè)創(chuàng)意爆棚的404頁(yè)面，每個(gè)頁(yè)面配以相應(yīng)的技巧說(shuō)明，希望能給你幫助。

來(lái)源：優(yōu)設(shè)

編譯：陳子木

01. 有趣的設(shè)計(jì)

這是一個(gè)有趣的404頁(yè)面，用隕石坑來(lái)表現(xiàn)404代碼，身處太空暗示你來(lái)錯(cuò)了地方。如果你訪問(wèn)這個(gè)設(shè)計(jì)所處的Behance頁(yè)面，會(huì)發(fā)現(xiàn)更多有趣的地方。

02. 圖形化

圖標(biāo)可以發(fā)揮各種各樣的作用，指示作用，裝飾，甚至作為紋理都可以。這個(gè)案例中，設(shè)計(jì)師用小圖標(biāo)來(lái)搭建問(wèn)號(hào)，告知用戶他們所尋找的內(nèi)容并不在此。

03. 使用動(dòng)效

這是一個(gè)好玩兒又可愛(ài)的404頁(yè)面，從文案到動(dòng)畫都非常之有趣，如果你正好也很無(wú)聊的話，可以盯著這個(gè)動(dòng)畫玩一整天……

04. 簡(jiǎn)約設(shè)計(jì)

這個(gè)404頁(yè)面超級(jí)簡(jiǎn)單，但是非常有效。簡(jiǎn)約清爽的設(shè)計(jì)，放大鏡和404的組合足夠說(shuō)明問(wèn)題。

05. 情感化設(shè)計(jì)

情感化的設(shè)計(jì)總能讓人印象深刻。這個(gè)頁(yè)面的設(shè)計(jì)能讓人情緒有所觸動(dòng)，傷感的動(dòng)漫角色拿著404的小旗子，扁平插畫風(fēng)令人賞心悅目。最下方綠色按鈕可以帶你會(huì)首頁(yè)繼續(xù)尋找你需要的內(nèi)容，關(guān)鍵是，文案還很貼心。

06. 插畫說(shuō)明

插畫在網(wǎng)頁(yè)中的運(yùn)用非常廣泛，功能也多種多樣。這個(gè)網(wǎng)頁(yè)中的插畫，不僅靈活地傳達(dá)出頁(yè)面跳轉(zhuǎn)錯(cuò)誤的情況，而且為你作出了正確的引導(dǎo)。

07. 不要想復(fù)雜了

想打造獨(dú)特的404頁(yè)面，并不需要非得找到某種獨(dú)一無(wú)二的創(chuàng)意和徹底的創(chuàng)新，有時(shí)候掌握流行趨勢(shì)就夠你脫穎而出了。在這個(gè)404頁(yè)面中，設(shè)計(jì)師使用了網(wǎng)絡(luò)流行的涂鴉插畫角色，此刻的文案也非常應(yīng)景，整個(gè)頁(yè)面的氣質(zhì)非常有趣。很獨(dú)特，不是嗎？

08. 直接說(shuō)明

其實(shí)到了這一步，用戶通常都知道他們?cè)庥?04頁(yè)面了，你并不需要回避這個(gè)話題，照直說(shuō)就好了。在這個(gè)案例中，404旁邊，一個(gè)手臂斷裂的機(jī)器人以無(wú)比形象的方式，告訴你出錯(cuò)了。

09. 風(fēng)格化

如果你想用更形象的方式來(lái)展現(xiàn)，你并不需要真的花費(fèi)巨量的時(shí)間來(lái)精雕細(xì)琢。用詼諧而風(fēng)格化的方式來(lái)展現(xiàn)就好了。在這個(gè)404頁(yè)面中，扁平化的圖形和色彩非常協(xié)調(diào)的結(jié)合在一起，創(chuàng)造出漂亮的場(chǎng)景。場(chǎng)景簡(jiǎn)單，羊叼著插頭所傳達(dá)的信息也非常清晰。

10. 重疊效果

使用重疊的形狀、字母、色彩來(lái)創(chuàng)造有趣的404頁(yè)面效果。這個(gè)404頁(yè)面的設(shè)計(jì)也很簡(jiǎn)單，黑白模式，無(wú)襯線字體，圖形和字體重疊，大小對(duì)比強(qiáng)化404的概念，簡(jiǎn)單而不單調(diào)。

11. 使用相關(guān)的圖像

有時(shí)候在頁(yè)面中使用毫無(wú)關(guān)聯(lián)的圖片是很有意思的，而使用有關(guān)聯(lián)的圖片，則顯得更加有用。這個(gè)案例中，設(shè)計(jì)師加入了紅燈警示，也是在暗示用戶：你們來(lái)錯(cuò)了地方。

12. 有限度地使用色彩

挑選那些能夠和諧搭配的色彩，即使要變幻色彩也是基于其中的一種或者幾種來(lái)進(jìn)行調(diào)整，并堅(jiān)持如此。創(chuàng)建一套主題，這樣可以簡(jiǎn)化一系列的設(shè)計(jì)過(guò)程。這個(gè)404網(wǎng)站也正是這樣來(lái)設(shè)定它的色調(diào)。

13. 擁抱紋理

在扁平化成為標(biāo)準(zhǔn)的今天，恰當(dāng)?shù)厥褂眉y理還是能很大程度降低工作難度的。這個(gè)404頁(yè)面依然使用著扁平風(fēng)的用色，但是適當(dāng)?shù)丶尤胍恍┘y理之后，整體看起來(lái)更協(xié)調(diào)更有質(zhì)感了。

14. 提供選擇

當(dāng)訪客進(jìn)入404頁(yè)面之后，他需要做什么？是訪問(wèn)首頁(yè)還是回到上一步？你提供的選擇越多，就越有可能帶領(lǐng)他們走到他們真正想要的地方。你要做的是讓訪客留在你的網(wǎng)站。這個(gè)頁(yè)面就是，當(dāng)用戶來(lái)到這里的時(shí)候，網(wǎng)站設(shè)計(jì)師為他們留下了足夠的選擇，讓用戶盡量留在自己的網(wǎng)站。

15. 標(biāo)新立異

我想，標(biāo)新立異打破常規(guī)是許多設(shè)計(jì)師都會(huì)想到的問(wèn)題。而這個(gè)404頁(yè)面，也正是從字體、色彩到樣式都充分進(jìn)行了調(diào)整，進(jìn)行了極具創(chuàng)造性的設(shè)計(jì)，打破了常規(guī)的視覺(jué)設(shè)計(jì)。

由優(yōu)設(shè)推出的“50個(gè)實(shí)用設(shè)計(jì)思路幫你設(shè)計(jì)創(chuàng)意404頁(yè)面”，我們將之整理成三篇為大家推薦，盡請(qǐng)期待下一期。

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。