前言

做UI行業(yè)的都應(yīng)該知道404頁面是非常重要的一部分設(shè)計预吆，當(dāng)頁面出現(xiàn)錯誤時它是增強用戶體驗的很好的做法，其遵循的理念是： 提供簡明的問題描述胳泉，消除訪客的挫敗感拐叉。提供合理的解決方案，輔助訪客完成訪問目標(biāo)扇商。提供個性化的友好界面凤瘦，提升訪問體驗。

關(guān)于設(shè)計案铺，關(guān)于404

設(shè)計404頁面并不是只是單純地畫一幅插畫而已廷粒。于是花了一些時間搜集和分析了404頁面的設(shè)計，思考和整理了相關(guān)的設(shè)計思路红且。

申明:這篇文章是借鑒的群友（化流水躺湖底）寫的坝茎，很多詞匯及總結(jié)的一些經(jīng)驗并非原創(chuàng)，再次向原作者表示感謝暇番。

404相關(guān)擴展傳送口onextrapixel.com/essential-guidelines-for-wordpress-404-error-pages/

文章將以下面4個問題展開嗤放，大家可以挑自己需要的著重閱讀。

什么是404頁面壁酬？

404頁面存在的作用有什么次酌？

怎么設(shè)計出符合情感化的404頁面？

404設(shè)計誤區(qū)

文章大綱

什么是404頁面

404頁面是客戶端在瀏覽網(wǎng)頁時服務(wù)器無法正常提供信息舆乔，或者是服務(wù)器無法回應(yīng)岳服，且不知道原因而返回的頁面。

一般404頁面出現(xiàn)在沒有網(wǎng)絡(luò)時希俩、主頁更名或搬遷地址時吊宋、輸入網(wǎng)址錯誤時、以及編程人員的疏忽寫錯地址等原因時颜武。

404頁面存在的作用有什么璃搜？

作用1：告知用戶錯誤所在，緩解用戶焦慮鳞上；

作用2：提供錯誤解決方案这吻；如返回上一頁或首頁，提升用戶留存率篙议。

作用3：影響用戶對網(wǎng)站體驗的情緒唾糯，即發(fā)生錯誤之后給用戶留下一個是很壞的印象(可參考峰終定律)；

終極作用：將訪客和潛在客戶留在網(wǎng)站上

諾貝爾獎得主，心理學(xué)家DanielKahneman經(jīng)過深入研究移怯，發(fā)現(xiàn)對體驗的記憶由兩個因素決定：高峰（無論是正向的還是負向的）時與結(jié)束時的感覺拒名，這就是峰終定律（Peak-EndRule）。這條定律基于潛意識總結(jié)體驗的特點：對一項事物的體驗之后芋酌，所能記住的就只是在峰與終時的體驗增显，而在過程中好與不好體驗的比重、好與不好體驗的時間長短脐帝，對記憶差不多沒有影響同云。

同時百度百科還提到“峰終定律”在404頁面的運用：

對一項事物的體驗之 后，所能記住的就只是在峰與終時的體驗堵腹，而在過程中好與不好體驗的比重炸站、好與不好體驗的時間長短，對記憶差不多沒有影響疚顷。404錯誤頁面應(yīng)該作為頁面瀏覽的一部分旱易，看到“出錯”或者“抱歉”頁面之類404頁面的時候，用戶會對網(wǎng)站的信任度迅速降低腿堤，有種挫敗感阀坏。

怎么設(shè)計出符合情感化的404頁面

世界給了我們一個酸檸檬，那我們就把酸檸檬變成檸檬水笆檀。

“當(dāng)404頁面產(chǎn)生的時候忌堂，勢必會讓用戶的心情產(chǎn)生落差而帶來一些糟糕的體驗⌒锶鳎”

顯而易見這個就是404頁面最大的痛點士修，而解決掉這個痛點，就是我們設(shè)計出符合情感化404頁面的基本準(zhǔn)則了樱衷。

所以當(dāng)用戶情緒產(chǎn)生落差的時候棋嘲，我們需要做到的是：

告知用戶

給用戶一個返回上一步，或自他的選擇

方便用戶聯(lián)系到你給予反饋

給用戶一個不錯的建議

但這些并不足以使用戶的情緒平復(fù)矩桂，為了達到情感化沸移，針對不同類型網(wǎng)站的用戶，一般我們可以采用下面的方法表達我們的態(tài)度：

直接表示出現(xiàn)錯誤

表示抱歉

轉(zhuǎn)移用戶的注意力

用詼諧幽默的方式提示用戶到了一個錯誤的頁面

賣萌耍鬓，討喜

以下是相關(guān)的設(shè)計思路的例子：

直接表示出現(xiàn)了錯誤阔籽。

通常可用搞砸的事物表示牲蜀，如斷線風(fēng)箏、斷了的鉛筆绅这、撕碎的書頁涣达、下雨天沒傘、破碎的玻璃、機器人故障等等度苔。

表示抱歉匆篓，沒能找到頁面。

向用戶道歉寇窑，而不是責(zé)備用戶（讓用戶心軟鸦概，哈哈）。

用幽默詼諧的方式提示用戶到了一個錯誤的頁面

啊啊啊啊啊啊甩骏，頁面不存在窗市！就像是從圖片中的動物口中說出來的一樣。

轉(zhuǎn)移用戶注意力饮笛，如可以在404頁面玩一會小游戲

吃豆豆游戲咨察，哈哈哈，類似的還有為人所熟知的谷歌404的跳跳龍游戲福青。

展示公益廣告摄狱、甚至傳播正能量

頁面的去向

腦洞下沒有找到的頁面的下落，如頁面正在休息无午，頁面消失了媒役，頁面被吹走了。網(wǎng)頁被忍者偷去啦宪迟！

表示訪客迷失刊愚。

如表示訪客迷路了，迷失在茫茫宇宙踩验，到了不正確的地方等示意用戶這是錯誤頁面鸥诽。

如果你的網(wǎng)站受眾是年輕人，你也可以選擇賣個萌箕憾，討個喜牡借。

最后談一下404設(shè)計誤區(qū)

要知道一個能服務(wù)于用戶的設(shè)計才是一個很好的設(shè)計，所以為了服務(wù)好用戶袭异，404設(shè)計需要遵循以下規(guī)則：

1.不要將404錯誤轉(zhuǎn)向到網(wǎng)站主頁钠龙，否則可能會導(dǎo)致主頁在搜索引擎中消失。

2.404頁面不要自動跳轉(zhuǎn)御铃，讓用戶來決定去向碴里。

3、不使用專業(yè)術(shù)語：“404錯誤”這個詞的使用一直非常規(guī)范上真，但這并不是你使用專業(yè)術(shù)語嚇跑訪客的理由咬腋。“找不到網(wǎng)頁”這個說法相比來說更準(zhǔn)確也更易于接受睡互。

4根竿、不要責(zé)備訪客

5陵像、提示訪客檢查拼寫（常出現(xiàn)在搜索引擎中）：還有一個可能是訪客看到404錯誤頁面是由于他們自己在輸入URL網(wǎng)址時出現(xiàn)了拼寫錯誤。提示訪客檢查他們的拼寫寇壳，但不要失禮醒颖。

6、明確表明404：清楚地向訪客聲明他們正在搜尋的頁面無法找到壳炎，且不要讓錯誤頁面看起來與正常的內(nèi)容頁（如加入過多的文本和鏈接）太過相似泞歉。你是想要表明這是一個錯誤頁面，所以就不要羞于向訪客們聲明這一點匿辩。

7腰耙、放置網(wǎng)站主頁鏈接：不要讓訪客無處可去或是無法找到你的網(wǎng)站信息。至少應(yīng)該有一個鏈接鏈回你的網(wǎng)站主頁撒汉。這樣一來沟优，從其他網(wǎng)站鏈接而來的訪客就可以了解你以及你的網(wǎng)站，甚至他們可能在你的網(wǎng)站中找到一些他們喜歡的內(nèi)容睬辐。

8挠阁、訪客方便反饋信息：如果訪問者點擊了你網(wǎng)站上的一個錯誤鏈接，你會想了解這個鏈接故障溯饵。如果通過404頁面給他們提供一個反饋信息的便捷方式侵俗，讓他們可以報告這個故障以便你去解決。這只需要一個非常簡短的形式來提示訪客告訴你他們來自哪個頁面及哪個鏈接丰刊。通過這個方法隘谣，你可以獲取到所有你需要的信息。

9啄巧、保持品牌風(fēng)格：我們都看過非逞捌纾酷的“讓訪客發(fā)現(xiàn)一個巨大的“復(fù)活節(jié)蛋”“的錯誤頁面的設(shè)計案例。但千萬不要使這個頁面的設(shè)計與你網(wǎng)站的其他頁面相差太大秩仆，否則會看起來這個頁面不像你網(wǎng)站的設(shè)計码泛，會讓訪客產(chǎn)生疑惑，誤以為自己已經(jīng)被帶到了一個外部網(wǎng)站澄耍。

10噪珊、語言版本：如果你的網(wǎng)站是多語種的，404錯誤頁面將從你所有語言版本的網(wǎng)站中獲取錯誤信息齐莲。無論你想要顯示任何信息痢站，都需要將其翻譯成各個語言版本，使每個人都能理解选酗。同時還需提供一個鏈接返回到訪客所對應(yīng)的語言版本的網(wǎng)站阵难。

11、讓訪客搜索想要的：如果訪客正在訪問的頁面已被移動星掰，你可能想給他們一個途徑來搜索頁面被移動到了何處多望，可以考慮在頁面增加一個搜索框嫩舟。

相關(guān)擴展——缺省頁鏈接傳送口blog.jobbole.com/84836/

下面是自己臨摹作品氢烘，這件作品上犯了一個錯誤怀偷，404頁面不要自動跳轉(zhuǎn)，讓用戶來決定去向播玖。總結(jié)出來椎工，你就會發(fā)現(xiàn)自己的設(shè)計錯誤。

記资裉ぁ：404頁面不要自動跳轉(zhuǎn)维蒙，讓用戶來決定去向

臨摹分析：整體以比較俏皮的方式顯示404頁面，用文字直觀的告訴大家出現(xiàn)頁面出錯了果覆，顏色搭配飽和度不夠颅痊，整體配色顯示比較臟，犯了一個錯誤局待，404頁面最好不要自動跳轉(zhuǎn)斑响，讓用戶來決定方向。

臨摹分析：

色彩明亮钳榨，配色和諧舰罚，同樣文字直觀的告訴大家出現(xiàn)404，頁面的出現(xiàn)了錯誤薛耻，同時告訴用戶下一步可以怎么做营罢，可以選擇返回主頁，也可以選擇聯(lián)系我們饼齿。

寫在后面的話

你所遇到的問題饲漾，以后都會變成你的能力！

加油缕溉！