經(jīng)常有看到一些平臺(tái)分享404頁(yè)面的設(shè)計(jì)，但只是丟了一些別人設(shè)計(jì)好的頁(yè)面，再無(wú)其它說(shuō)明。畢竟設(shè)計(jì)師都清楚設(shè)計(jì)404頁(yè)面并不是只是單純地畫一幅插畫而已。于是花了一些時(shí)間搜集和分析了404頁(yè)面的設(shè)計(jì)，思考和整理了相關(guān)的設(shè)計(jì)思路。
作者：_Ammy
在此之前先簡(jiǎn)單明確一下404頁(yè)面的定義，404頁(yè)面是客戶端在瀏覽網(wǎng)頁(yè)時(shí)，服務(wù)器無(wú)法正常提供信息，或是服務(wù)器無(wú)法回應(yīng)，且不知道原因所返回的頁(yè)面。
自定義404頁(yè)面是處理空白狀態(tài)的一種情況，其在用戶體驗(yàn)上的作用通常是：
告知用戶錯(cuò)誤所在，緩解用戶焦慮。
提供解決方案，如返回上一頁(yè)或首頁(yè)，提升用戶留存率。
影響用戶對(duì)網(wǎng)站的印象。
同時(shí)百度百科還提到“峰終定律”在404頁(yè)面的運(yùn)用：
對(duì)一項(xiàng)事物的體驗(yàn)之 后，所能記住的就只是在峰與終時(shí)的體驗(yàn)，而在過程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長(zhǎng)短，對(duì)記憶差不多沒有影響。404錯(cuò)誤頁(yè)面應(yīng)該作為頁(yè)面瀏覽的一部分，看到“出錯(cuò)”或者“抱歉”頁(yè)面之類404頁(yè)面的時(shí)候，用戶會(huì)對(duì)網(wǎng)站的信任度迅速降低，有種挫敗感。
下面是一些相關(guān)的設(shè)計(jì)思路：
1.直接表示出現(xiàn)了錯(cuò)誤。
通常可用搞砸的事物表示，如斷線風(fēng)箏、斷了的鉛筆、撕碎的書頁(yè)、下雨天沒傘、破碎的玻璃、機(jī)器人故障等等。
2.表示抱歉，沒能找到頁(yè)面。
向用戶道歉，而不是責(zé)備用戶（用戶心軟，哈哈）。
3.用幽默詼諧的方式提示用戶到了一個(gè)錯(cuò)誤的頁(yè)面。
啊啊啊啊啊啊，頁(yè)面不存在！就像是從圖片中的動(dòng)物口中說(shuō)出來(lái)的一樣。
4.轉(zhuǎn)移用戶注意力，如可以在404頁(yè)面玩一會(huì)小游戲、展示公益廣告、甚至傳播正能量：
吃豆豆游戲
類似的還有為人所熟知的谷歌404的跳跳龍游戲。
5.頁(yè)面的去向
腦洞下沒有找到的頁(yè)面的下落，如頁(yè)面正在休息，頁(yè)面消失了，頁(yè)面被吹走了。
網(wǎng)頁(yè)被忍者偷去啦！
6.表示訪客迷失。
如表示訪客迷路了，迷失在茫茫宇宙，到了不正確的地方等示意用戶這是錯(cuò)誤頁(yè)面。
7.如果你的網(wǎng)站受眾是年輕人，你也可以選擇賣個(gè)萌，討個(gè)喜。
關(guān)于404頁(yè)面的設(shè)計(jì)注意事項(xiàng)有許多，覺得百科上已經(jīng)寫得很詳細(xì)，就搬過來(lái)了：
1.不要將404錯(cuò)誤轉(zhuǎn)向到網(wǎng)站主頁(yè)，否則可能會(huì)導(dǎo)致主頁(yè)在搜索引擎中消失。
2.404頁(yè)面不要自動(dòng)跳轉(zhuǎn)，讓用戶來(lái)決定去向。
3、不使用專業(yè)術(shù)語(yǔ)：“404錯(cuò)誤”這個(gè)詞的使用一直非常規(guī)范，但這并不是你使用專業(yè)術(shù)語(yǔ)嚇跑訪客的理由。“找不到網(wǎng)頁(yè)”這個(gè)說(shuō)法相比來(lái)說(shuō)更準(zhǔn)確也更易于接受。
4、不要責(zé)備訪客
5、提示訪客檢查拼寫（常出現(xiàn)在搜索引擎中）：還有一個(gè)可能是訪客看到404錯(cuò)誤頁(yè)面是由于他們自己在輸入U(xiǎn)RL網(wǎng)址時(shí)出現(xiàn)了拼寫錯(cuò)誤。提示訪客檢查他們的拼寫，但不要失禮。
6、明確表明404：清楚地向訪客聲明他們正在搜尋的頁(yè)面無(wú)法找到，且不要讓錯(cuò)誤頁(yè)面看起來(lái)與正常的內(nèi)容頁(yè)（如加入過多的文本和鏈接）太過相似。你是想要表明這是一個(gè)錯(cuò)誤頁(yè)面，所以就不要羞于向訪客們聲明這一點(diǎn)。
7、放置網(wǎng)站主頁(yè)鏈接：不要讓訪客無(wú)處可去或是無(wú)法找到你的網(wǎng)站信息。至少應(yīng)該有一個(gè)鏈接鏈回你的網(wǎng)站主頁(yè)。這樣一來(lái)，從其他網(wǎng)站鏈接而來(lái)的訪客就可以了解你以及你的網(wǎng)站，甚至他們可能在你的網(wǎng)站中找到一些他們喜歡的內(nèi)容。
8、訪客方便反饋信息：如果訪問者點(diǎn)擊了你網(wǎng)站上的一個(gè)錯(cuò)誤鏈接，你會(huì)想了解這個(gè)鏈接故障。如果通過404頁(yè)面給他們提供一個(gè)反饋信息的便捷方式，讓他們可以報(bào)告這個(gè)故障以便你去解決。這只需要一個(gè)非常簡(jiǎn)短的形式來(lái)提示訪客告訴你他們來(lái)自哪個(gè)頁(yè)面及哪個(gè)鏈接。通過這個(gè)方法，你可以獲取到所有你需要的信息。
9、保持品牌風(fēng)格：我們都看過非常酷的“讓訪客發(fā)現(xiàn)一個(gè)巨大的“復(fù)活節(jié)蛋”“的錯(cuò)誤頁(yè)面的設(shè)計(jì)案例。但千萬(wàn)不要使這個(gè)頁(yè)面的設(shè)計(jì)與你網(wǎng)站的其他頁(yè)面相差太大，否則會(huì)看起來(lái)這個(gè)頁(yè)面不像你網(wǎng)站的設(shè)計(jì)，會(huì)讓訪客產(chǎn)生疑惑，誤以為自己已經(jīng)被帶到了一個(gè)外部網(wǎng)站。
10、語(yǔ)言版本：如果你的網(wǎng)站是多語(yǔ)種的，404錯(cuò)誤頁(yè)面將從你所有語(yǔ)言版本的網(wǎng)站中獲取錯(cuò)誤信息。無(wú)論你想要顯示任何信息，都需要將其翻譯成各個(gè)語(yǔ)言版本，使每個(gè)人都能理解。同時(shí)還需提供一個(gè)鏈接返回到訪客所對(duì)應(yīng)的語(yǔ)言版本的網(wǎng)站。
11、讓訪客搜索想要的：如果訪客正在訪問的頁(yè)面已被移動(dòng)，你可能想給他們一個(gè)途徑來(lái)搜索頁(yè)面被移動(dòng)到了何處，可以考慮在頁(yè)面增加一個(gè)搜索框。
如果只是像下面這樣，可能會(huì)不太合適：
圖片來(lái)自網(wǎng)絡(luò)
當(dāng)然，如果你的用戶就是程序員，你也可以這樣啦：
以上只是有限的設(shè)計(jì)思路，然而創(chuàng)意是無(wú)限的，比如這樣：
注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請(qǐng)移步到建站教程頻道。
