前言
做UI行業(yè)的都應(yīng)該知道404頁面是非常重要的一部分設(shè)計(jì)，當(dāng)頁面出現(xiàn)錯(cuò)誤時(shí)它是增強(qiáng)用戶體驗(yàn)的很好的做法，其遵循的理念是： 提供簡明的問題描述，消除訪客的挫敗感。提供合理的解決方案，輔助訪客完成訪問目標(biāo)。提供個(gè)性化的友好界面，提升訪問體驗(yàn)。
關(guān)于設(shè)計(jì)，關(guān)于404
設(shè)計(jì)404頁面并不是只是單純地畫一幅插畫而已。于是花了一些時(shí)間搜集和分析了404頁面的設(shè)計(jì)，思考和整理了相關(guān)的設(shè)計(jì)思路。
申明:這篇文章是借鑒的群友（化流水躺湖底）寫的，很多詞匯及總結(jié)的一些經(jīng)驗(yàn)并非原創(chuàng)，再次向原作者表示感謝。
404相關(guān)擴(kuò)展傳送口onextrapixel.com/essential-guidelines-for-wordpress-404-error-pages/
文章將以下面4個(gè)問題展開，大家可以挑自己需要的著重閱讀。
什么是404頁面？
404頁面存在的作用有什么？
怎么設(shè)計(jì)出符合情感化的404頁面？
404設(shè)計(jì)誤區(qū)
什么是404頁面
404頁面是客戶端在瀏覽網(wǎng)頁時(shí)服務(wù)器無法正常提供信息，或者是服務(wù)器無法回應(yīng)，且不知道原因而返回的頁面。
一般404頁面出現(xiàn)在沒有網(wǎng)絡(luò)時(shí)、主頁更名或搬遷地址時(shí)、輸入網(wǎng)址錯(cuò)誤時(shí)、以及編程人員的疏忽寫錯(cuò)地址等原因時(shí)。
404頁面存在的作用有什么？
作用1：告知用戶錯(cuò)誤所在，緩解用戶焦慮；
作用2：提供錯(cuò)誤解決方案；如返回上一頁或首頁，提升用戶留存率。
作用3：影響用戶對網(wǎng)站體驗(yàn)的情緒，即發(fā)生錯(cuò)誤之后給用戶留下一個(gè)是很壞的印象(可參考峰終定律)；
終極作用：將訪客和潛在客戶留在網(wǎng)站上
諾貝爾獎(jiǎng)得主，心理學(xué)家DanielKahneman經(jīng)過深入研究，發(fā)現(xiàn)對體驗(yàn)的記憶由兩個(gè)因素決定：高峰（無論是正向的還是負(fù)向的）時(shí)與結(jié)束時(shí)的感覺，這就是峰終定律（Peak-EndRule）。這條定律基于潛意識總結(jié)體驗(yàn)的特點(diǎn)：對一項(xiàng)事物的體驗(yàn)之后，所能記住的就只是在峰與終時(shí)的體驗(yàn)，而在過程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長短，對記憶差不多沒有影響。
同時(shí)百度百科還提到“峰終定律”在404頁面的運(yùn)用：
對一項(xiàng)事物的體驗(yàn)之 后，所能記住的就只是在峰與終時(shí)的體驗(yàn)，而在過程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長短，對記憶差不多沒有影響。404錯(cuò)誤頁面應(yīng)該作為頁面瀏覽的一部分，看到“出錯(cuò)”或者“抱歉”頁面之類404頁面的時(shí)候，用戶會對網(wǎng)站的信任度迅速降低，有種挫敗感。
怎么設(shè)計(jì)出符合情感化的404頁面
世界給了我們一個(gè)酸檸檬，那我們就把酸檸檬變成檸檬水。
“當(dāng)404頁面產(chǎn)生的時(shí)候，勢必會讓用戶的心情產(chǎn)生落差而帶來一些糟糕的體驗(yàn)。”
顯而易見這個(gè)就是404頁面最大的痛點(diǎn)，而解決掉這個(gè)痛點(diǎn)，就是我們設(shè)計(jì)出符合情感化404頁面的基本準(zhǔn)則了。
所以當(dāng)用戶情緒產(chǎn)生落差的時(shí)候，我們需要做到的是：
告知用戶
給用戶一個(gè)返回上一步，或自他的選擇
方便用戶聯(lián)系到你給予反饋
給用戶一個(gè)不錯(cuò)的建議
但這些并不足以使用戶的情緒平復(fù)，為了達(dá)到情感化，針對不同類型網(wǎng)站的用戶，一般我們可以采用下面的方法表達(dá)我們的態(tài)度：
直接表示出現(xiàn)錯(cuò)誤
表示抱歉
轉(zhuǎn)移用戶的注意力
用詼諧幽默的方式提示用戶到了一個(gè)錯(cuò)誤的頁面
賣萌，討喜
以下是相關(guān)的設(shè)計(jì)思路的例子：
通?？捎酶阍业氖挛锉硎荆鐢嗑€風(fēng)箏、斷了的鉛筆、撕碎的書頁、下雨天沒傘、破碎的玻璃、機(jī)器人故障等等。
向用戶道歉，而不是責(zé)備用戶（讓用戶心軟，哈哈）。
啊啊啊啊啊啊，頁面不存在！就像是從圖片中的動物口中說出來的一樣。
吃豆豆游戲，哈哈哈，類似的還有為人所熟知的谷歌404的跳跳龍游戲。
腦洞下沒有找到的頁面的下落，如頁面正在休息，頁面消失了，頁面被吹走了。網(wǎng)頁被忍者偷去啦！
如表示訪客迷路了，迷失在茫茫宇宙，到了不正確的地方等示意用戶這是錯(cuò)誤頁面。
最后談一下404設(shè)計(jì)誤區(qū)
要知道一個(gè)能服務(wù)于用戶的設(shè)計(jì)才是一個(gè)很好的設(shè)計(jì)，所以為了服務(wù)好用戶，404設(shè)計(jì)需要遵循以下規(guī)則：
1.不要將404錯(cuò)誤轉(zhuǎn)向到網(wǎng)站主頁，否則可能會導(dǎo)致主頁在搜索引擎中消失。
2.404頁面不要自動跳轉(zhuǎn)，讓用戶來決定去向。
3、不使用專業(yè)術(shù)語：“404錯(cuò)誤”這個(gè)詞的使用一直非常規(guī)范，但這并不是你使用專業(yè)術(shù)語嚇跑訪客的理由。“找不到網(wǎng)頁”這個(gè)說法相比來說更準(zhǔn)確也更易于接受。
4、不要責(zé)備訪客
5、提示訪客檢查拼寫（常出現(xiàn)在搜索引擎中）：還有一個(gè)可能是訪客看到404錯(cuò)誤頁面是由于他們自己在輸入U(xiǎn)RL網(wǎng)址時(shí)出現(xiàn)了拼寫錯(cuò)誤。提示訪客檢查他們的拼寫，但不要失禮。
6、明確表明404：清楚地向訪客聲明他們正在搜尋的頁面無法找到，且不要讓錯(cuò)誤頁面看起來與正常的內(nèi)容頁（如加入過多的文本和鏈接）太過相似。你是想要表明這是一個(gè)錯(cuò)誤頁面，所以就不要羞于向訪客們聲明這一點(diǎn)。
7、放置網(wǎng)站主頁鏈接：不要讓訪客無處可去或是無法找到你的網(wǎng)站信息。至少應(yīng)該有一個(gè)鏈接鏈回你的網(wǎng)站主頁。這樣一來，從其他網(wǎng)站鏈接而來的訪客就可以了解你以及你的網(wǎng)站，甚至他們可能在你的網(wǎng)站中找到一些他們喜歡的內(nèi)容。
8、訪客方便反饋信息：如果訪問者點(diǎn)擊了你網(wǎng)站上的一個(gè)錯(cuò)誤鏈接，你會想了解這個(gè)鏈接故障。如果通過404頁面給他們提供一個(gè)反饋信息的便捷方式，讓他們可以報(bào)告這個(gè)故障以便你去解決。這只需要一個(gè)非常簡短的形式來提示訪客告訴你他們來自哪個(gè)頁面及哪個(gè)鏈接。通過這個(gè)方法，你可以獲取到所有你需要的信息。
9、保持品牌風(fēng)格：我們都看過非?？岬摹白屧L客發(fā)現(xiàn)一個(gè)巨大的“復(fù)活節(jié)蛋”“的錯(cuò)誤頁面的設(shè)計(jì)案例。但千萬不要使這個(gè)頁面的設(shè)計(jì)與你網(wǎng)站的其他頁面相差太大，否則會看起來這個(gè)頁面不像你網(wǎng)站的設(shè)計(jì)，會讓訪客產(chǎn)生疑惑，誤以為自己已經(jīng)被帶到了一個(gè)外部網(wǎng)站。
10、語言版本：如果你的網(wǎng)站是多語種的，404錯(cuò)誤頁面將從你所有語言版本的網(wǎng)站中獲取錯(cuò)誤信息。無論你想要顯示任何信息，都需要將其翻譯成各個(gè)語言版本，使每個(gè)人都能理解。同時(shí)還需提供一個(gè)鏈接返回到訪客所對應(yīng)的語言版本的網(wǎng)站。
11、讓訪客搜索想要的：如果訪客正在訪問的頁面已被移動，你可能想給他們一個(gè)途徑來搜索頁面被移動到了何處，可以考慮在頁面增加一個(gè)搜索框。
相關(guān)擴(kuò)展——缺省頁鏈接傳送口blog.jobbole.com/84836/
下面是自己臨摹作品，這件作品上犯了一個(gè)錯(cuò)誤，404頁面不要自動跳轉(zhuǎn)，讓用戶來決定去向。總結(jié)出來，你就會發(fā)現(xiàn)自己的設(shè)計(jì)錯(cuò)誤。
臨摹分析：整體以比較俏皮的方式顯示404頁面，用文字直觀的告訴大家出現(xiàn)頁面出錯(cuò)了，顏色搭配飽和度不夠，整體配色顯示比較臟，犯了一個(gè)錯(cuò)誤，404頁面最好不要自動跳轉(zhuǎn)，讓用戶來決定方向。
臨摹分析：
色彩明亮，配色和諧，同樣文字直觀的告訴大家出現(xiàn)404，頁面的出現(xiàn)了錯(cuò)誤，同時(shí)告訴用戶下一步可以怎么做，可以選擇返回主頁，也可以選擇聯(lián)系我們。
寫在后面的話
你所遇到的問題，以后都會變成你的能力！
加油！
