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

404頁面是UI設計中非常重要的一部分。n

Seeseed曾經採訪過的谷歌設計師Sebastien，就是Chrome經典404提示頁面的設計者，他說過：

設計錯誤提示icon是一件有意思的事情，你希望用戶最好永遠不要看到它們，而一旦他們看到了，你就要避免他們產生更多掃興的感覺。

▲Sebastien為Chrome設計的經典404 pages中的圖案

404頁面的基本作用，是告知錯誤，提供解決方案，緩解用戶的焦慮感。最終目的，是讓你的訪客和潛在客戶繼續留在網站中，不要因此離開。n

優秀的404頁面設計，不僅能消除用戶的負面情緒，甚至會讓用戶產生好感，激發更多探索這個網站的興趣。

一個用心而不失幽默與格調的404頁面，是你親近用戶的一個「特殊通道」。

1.「歡迎來到太空」

「你好像走丟了...」

「你好像已經不在地球了」

有不少網站選擇用宇宙外太空、星球場景來表現404頁面，比如以上兩例。

如果能在幽深的太空背景下再加一點幽默的元素，就能更好地調節用戶情緒～比如：

We told you not to stray too far from the ship!

「早跟你說了，不要離飛船太遠！」 （這下漂了，你說怎麼辦吧）

下方給了用戶兩個選擇：

??帶我回去吧

??讓我再漂會兒

Blend向我們證明，有時候甩鍋給用戶竟然比主動認錯效果更好。當然，這也考驗設計和文案的功力，不要弄巧成拙哦。

2.「恭喜你，中獎了！」

沒有人不喜歡被特殊對待的感覺，即使是遭遇404報錯頁面。

如果能成功傳達給用戶一種「哇，能看到這個畫面的人真是不多呢！」的信號，也是一種很好的消除負面情緒、讓用戶產生愉悅感的方式～

這種風格的404頁面設計適合那些娛樂性較強的網站。

煎蛋網

圍觀了這一幕的用戶小李表示：我雖然不知道這隻雞有什麼特別的，但既然他們說我運氣好，我就寧可信其有吧。??

3.「別慌，我們在想辦法！」

的確，讓用戶獲得輕鬆愉快的心情，產生正向的情緒，能緩解遭遇錯誤頁面時的不快。

但設計師和開發者也要根據實際情況來判斷，你的網站定位、調性、功能，是否真的適合在這個時候來一個無傷大雅的玩笑？你的用戶群體吃這一套嗎？還是說他們更看重你能儘快提供應對的方法？

一些網站在404頁面中更傾向於向用戶傳達一種可依賴的感覺：

「這個頁面找不到了。

別擔心，我們已經派出最牛的人在修復了。

不如先返回首頁再試試？」

或向用戶提供其它可能會有幫助的鏈接：

4.「文案與產品結合」

即使你懶得在視覺上為404頁面做過多的設計，不代表你的404就不能比別人出彩。這時候，一句和網站本身氣質相符的文案很重要。

比如知乎：

「你似乎來到了沒有知識存在的荒原...」

這句提示文案與知乎作為知識分享社區的定位有著很強的聯繫，用戶很輕鬆就能意會明白。

由此可以看到，404頁面的設計還有一點要注意，就是不能讓用戶以為是不小心點了外鏈，進入了可疑的網頁。不管是一致的設計風格，還是和網站有明顯相關性的提示文案，都有助於在第一時間消除用戶的疑慮。

下面這個食物網站的404頁面也是一個很好的例子，從文案到整體的設計，都與其網站主題保持了一致，讓用戶能夠以輕鬆愜意的心情繼續瀏覽：

SOMETIMES BEING EMPTY IS NOT BAD

「有時候空白（肚子餓）不見得是件壞事」

然後在下方提示用戶到網站的其它板塊瀏覽。

5.

「高冷也OK」

一些404網頁直接在大幅的背景提示404，整體顯得非常簡潔高冷。但～不能否認，這樣的設計也不乏受眾。

前提仍然是了解你的觀眾是誰，如果你認為這樣的風格也是可以被接受的，那就儘可能把它做得美一些吧～誰說404就不能充滿設計感呢？

最後，如果你來到 http://www.seeseed.com不小心走錯了的話......

也是有可能見到種子君本人的......

（啊哦！此地不適宜種子生長，返航返航！）

有朋友評論說：看了以上優秀的404頁面，覺得種子君的出場略顯單薄....

其實種子君也是這麼想的（設計師：曉得了曉得了）～但還是出來跟大家打個照面.....寫這篇內容的時候我們也在反思自己在這些細節上的不足，希望對大家有所幫助。我們一起進步～

可以給我評論，說說你們認為不錯的404

推薦閱讀：