做網站是系統工程。首頁的內容要層次分明，導航要結構清晰，子頁面要排版均衡，相對而言自由度稍高一點的，應該是404頁面了。雖然404本身就是一個告知用戶內容訪問出錯的錯誤代碼，但是富有創意的設計師會充分利用機會，展現網站的獨特氣質；重視用戶體驗的設計師，則會充分考慮此刻用戶的心情，竭盡全力引導用戶去對的頁面。

所以，404頁面可以做的很簡單，但也可以創意十足。今天的酷站推薦，就推薦50個創意爆棚的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頁面，也正是從字體、色彩到樣式都充分進行了調整，進行了極具創造性的設計，打破了常規的視覺設計。

16. 使用負空間

學會讓頁面呼吸，可以讓你的頁面更大氣。這個404頁面使用了藍綠色和白色，并且通過適當的留白使得整個頁面足夠簡單大氣。

17. 雙關

404本質上是告訴用戶，他要的東西沒有找到，那么我們要怎么樣展現這個事實？有的時候，用一些內容和視覺上的“雙關”來展現這一點。而這個404頁面就是這樣處理的，通過荒島這個意象來向用戶傳遞“你走錯了”這個概念。

18. 大膽表現

如果你有更加有趣的方式來展現404的代碼，不妨盡量讓兩者之間產生關聯，然后再表現。這個案例當中，設計師使用了“氧氣含量不夠”來同404代碼之間產生關聯，有趣詼諧，意境也接近。

19. 拓展維度

合理地運用視覺設計，能讓二維的頁面給人以三維的沖擊感。這個頁面的設計就是這樣做的，刀的角度和頁面配色使得整個頁面看起來像是三維的一樣。

20. 貫穿始終的設計

如果你喜歡什么什么風格，就一定要堅持使用。喜歡棱角分明的造型，就不要過多融入圓潤的元素。這個404頁面就是非常典型，圓潤的風格融入刀每一個細節當中，貫穿始終。

21. 保持精致

如果你喜歡精致細膩的設計，那么請堅持使用這樣的樣式和風格。如果你一直保持精致的設計，那么整個設計會讓人感覺非常高端。這個404頁面的設計，從配色到風格都高度的一直，精致華麗，富有質感，延續性也很強。

22. 充分利用品牌

你的品牌有什么特色？有什么視覺特征？它能否融入刀404頁面當中?當然可以，這個404頁面就是，作為一個花卉公司，在404頁面中使用花卉元素又有何不可呢？

23. 指示明確

如果你不想為用戶提供過多的選擇，那么可以用一兩個明確的指示，來引導他們。這個網頁的設計在保持清爽的同時，也指示明確。可愛的小飛機在地圖上飛躍，告訴用戶該按哪個按鈕。

24. 使用不同的介質

你的404頁面不一定非得是單純的數字，它也可以融入到其他的介質中去。這個案例中，設計師讓404的提示以刺繡圖案的形式展現，并且鑲嵌在畫框中，古怪，但是很有趣。

25. 思維不要局限于電腦

其實和上一點很相似，為什么一定要用更加“數字化”的方式來展現么？刺繡可以，黏土人也可以。

【優質404網頁養成手冊】

案例加持：
《柳暗花明！17個讓人想親自體驗的404頁面》

模板加持：
《良心資源！20個風格多樣的高質量404模板免費下載》

情懷加持：
《做有情懷的設計師！如何打造善意優雅的404頁面？》

原文地址：designschool
優設譯者：@陳子木

「子木說」

創意不僅需要恰如其分，而且需要捕捉時機。今年WWDC上發布的iOS9、Mac OS X 10.11，iOS 9，watchOS 2，乍一看給人強烈的新鮮感，但是其中許多設計其實早已有之。最典型的就是OSX和iOS9中的窗口分割的設計，從Windows到Android，其實早就有了，但是為何蘋果能給人如此不同的感覺？因為他們確實有所創新，交互和細節上的打磨不僅在現有的設計上進行調整和打磨，符合邏輯，更加好用，而且他們還掌控好了時機——用戶已經開始對這樣的設計熟悉了，他們需要這樣的設計，并且現有的設計還不夠好！

不僅僅是軟件，硬件也是如此。最新最快并不是最好的，只要你做的足夠好，足夠用心，時機足夠好，即使你是后來者，一樣可以贏得認可和尊敬。當然，“抄襲”和“借鑒”是另外的問題了。

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量96萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：