15個404網頁出錯創意設計 —— 設計資源 06
做網站是系統工程。首頁的內容要層次分明，導航要結構清晰，子頁面要排版均衡，相對而言自由度稍高一點的，應該是404頁面了。雖然404本身就是一個告知用戶內容訪問出錯的錯誤代碼，但是富有創意的設計師會充分利用機會，展現網站的獨特氣質；重視用戶體驗的設計師，則會充分考慮此刻用戶的心情，竭盡全力引導用戶去對的頁面。
所以，404頁面可以做的很簡單，但也可以創意十足。今天小編就推薦15個創意爆棚的404頁面，每個頁面配以相應的技巧說明，希望能給你幫助。
來源：優設
編譯：陳子木
01. 有趣的設計
這是一個有趣的404頁面，用隕石坑來表現404代碼，身處太空暗示你來錯了地方。如果你訪問這個設計所處的Behance頁面，會發現更多有趣的地方。
02. 圖形化
圖標可以發揮各種各樣的作用，指示作用，裝飾，甚至作為紋理都可以。這個案例中，設計師用小圖標來搭建問號，告知用戶他們所尋找的內容并不在此。
03. 使用動效
這是一個好玩兒又可愛的404頁面，從文案到動畫都非常之有趣，如果你正好也很無聊的話，可以盯著這個動畫玩一整天……
04. 簡約設計
這個404頁面超級簡單，但是非常有效。簡約清爽的設計，放大鏡和404的組合足夠說明問題。
05. 情感化設計
情感化的設計總能讓人印象深刻。這個頁面的設計能讓人情緒有所觸動，傷感的動漫角色拿著404的小旗子，扁平插畫風令人賞心悅目。最下方綠色按鈕可以帶你會首頁繼續尋找你需要的內容，關鍵是，文案還很貼心。
06. 插畫說明
插畫在網頁中的運用非常廣泛，功能也多種多樣。這個網頁中的插畫，不僅靈活地傳達出頁面跳轉錯誤的情況，而且為你作出了正確的引導。
07. 不要想復雜了
想打造獨特的404頁面，并不需要非得找到某種獨一無二的創意和徹底的創新，有時候掌握流行趨勢就夠你脫穎而出了。在這個404頁面中，設計師使用了網絡流行的涂鴉插畫角色，此刻的文案也非常應景，整個頁面的氣質非常有趣。很獨特，不是嗎？
08. 直接說明
其實到了這一步，用戶通常都知道他們遭遇404頁面了，你并不需要回避這個話題，照直說就好了。在這個案例中，404旁邊，一個手臂斷裂的機器人以無比形象的方式，告訴你出錯了。
09. 風格化
如果你想用更形象的方式來展現，你并不需要真的花費巨量的時間來精雕細琢。用詼諧而風格化的方式來展現就好了。在這個404頁面中，扁平化的圖形和色彩非常協調的結合在一起，創造出漂亮的場景。場景簡單，羊叼著插頭所傳達的信息也非常清晰。
10. 重疊效果
使用重疊的形狀、字母、色彩來創造有趣的404頁面效果。這個404頁面的設計也很簡單，黑白模式，無襯線字體，圖形和字體重疊，大小對比強化404的概念，簡單而不單調。
11. 使用相關的圖像
有時候在頁面中使用毫無關聯的圖片是很有意思的，而使用有關聯的圖片，則顯得更加有用。這個案例中，設計師加入了紅燈警示，也是在暗示用戶：你們來錯了地方。
12. 有限度地使用色彩
挑選那些能夠和諧搭配的色彩，即使要變幻色彩也是基于其中的一種或者幾種來進行調整，并堅持如此。創建一套主題，這樣可以簡化一系列的設計過程。這個404網站也正是這樣來設定它的色調。
13. 擁抱紋理
在扁平化成為標準的今天，恰當地使用紋理還是能很大程度降低工作難度的。這個404頁面依然使用著扁平風的用色，但是適當地加入一些紋理之后，整體看起來更協調更有質感了。
14. 提供選擇
當訪客進入404頁面之后，他需要做什么？是訪問首頁還是回到上一步？你提供的選擇越多，就越有可能帶領他們走到他們真正想要的地方。你要做的是讓訪客留在你的網站。這個頁面就是，當用戶來到這里的時候，網站設計師為他們留下了足夠的選擇，讓用戶盡量留在自己的網站。
15. 標新立異
我想，標新立異打破常規是許多設計師都會想到的問題。而這個404頁面，也正是從字體、色彩到樣式都充分進行了調整，進行了極具創造性的設計，打破了常規的視覺設計。
由優設推出的“50個實用設計思路幫你設計創意404頁面”，我們將之整理成三篇為大家推薦，盡請期待下一期。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
![[下載] H5手機移動項目，4月份截屏下載 ——設計師資源 05](https://file.digitaling.com/eImg/cover/20150606/20150606161519_36816.jpg)
![[下載] H5手機移動項目，3月份截屏下載 ——設計師資源 04](https://file.digitaling.com/eImg/cover/20150603/20150603222245_65981.jpg)
評論
評論
推薦評論
全部評論（1條）