平生不見(jiàn)404，閱盡全網(wǎng)也惘然。對(duì)，如果你從未打開(kāi)過(guò)404頁(yè)面，就可以說(shuō)你幾乎未曾真正用過(guò)互聯(lián)網(wǎng)。
404頁(yè)面的出現(xiàn)的原因很簡(jiǎn)單：當(dāng)你輸入鏈接，瀏覽器向服務(wù)器提出請(qǐng)求，但是服務(wù)器無(wú)法解析你提供的URL的時(shí)候，服務(wù)器就會(huì)返回給你一個(gè)“404為找到”的頁(yè)面，換句話就是“服務(wù)器是正常的，只是沒(méi)找到你要的頁(yè)面”。
的確，404頁(yè)面的出現(xiàn)就是這么簡(jiǎn)單。它誕生于互聯(lián)網(wǎng)和瀏覽器剛剛興起的時(shí)代，但是經(jīng)過(guò)近20年的演化之后，它早已進(jìn)化出基于互聯(lián)網(wǎng)的亞文化——404頁(yè)面并不簡(jiǎn)單。
所以，要?jiǎng)?chuàng)造出一個(gè)完美的404錯(cuò)誤頁(yè)面，有一些規(guī)則可供遵循。
設(shè)計(jì)
首先，404頁(yè)面的設(shè)計(jì)不應(yīng)該轉(zhuǎn)移用戶的注意力，令用戶偏移最初的目的。的確，絕大多數(shù)用戶認(rèn)為404頁(yè)面非常惱人。所以，404頁(yè)面應(yīng)該在網(wǎng)站設(shè)計(jì)之初就要考慮到，并令它能夠幫助用戶找到他們需要的東西，并且在此過(guò)程中避免用戶跳轉(zhuǎn)到其他的網(wǎng)站。
作為一個(gè)次要目標(biāo)，404頁(yè)面的設(shè)計(jì)也可以提供一個(gè)建立并強(qiáng)化品牌的機(jī)會(huì)。如果404頁(yè)面設(shè)計(jì)得足夠積極，那么它可以令用戶留下持久的印象。一般而言，用戶遭遇404頁(yè)面一般是因?yàn)?ldquo;打開(kāi)的方式不對(duì)”造成的，它是一種負(fù)面體驗(yàn)，但是如果404頁(yè)面能夠幫助用戶達(dá)成目標(biāo)(其實(shí)這形同危機(jī)公關(guān))，那么用戶可能會(huì)改變對(duì)你網(wǎng)站的看法。
為了避免用戶對(duì)404頁(yè)面產(chǎn)生逆反情緒，網(wǎng)頁(yè)的用色和圖片都應(yīng)該控制好比例和視覺(jué)效果。優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)，才能強(qiáng)化品牌。
社交媒體
在404頁(yè)面上提供社交媒體鏈接是個(gè)好想法，一方面可以幫助誤入歧途的用戶解決問(wèn)題，另一方面也可以通過(guò)社交媒體吸引更多用戶。將網(wǎng)站的Facebook、Twitter、Google+、Tumblr、微博、微信鏈接附加在404頁(yè)面上，可以讓用戶在無(wú)法解決問(wèn)題的情況下通過(guò)社交媒體進(jìn)行互動(dòng)，尋求解決方案。通常，在官方無(wú)法即刻給出解決方案的是，其他的用戶或者粉絲也可能會(huì)給予用戶一定的幫助。
重要鏈接
每個(gè)網(wǎng)站都會(huì)有一些用戶經(jīng)常訪問(wèn)的頁(yè)面，這些核心的頁(yè)面會(huì)引領(lǐng)用戶尋求其他的重要信息。值得一提的是，在404頁(yè)面展現(xiàn)網(wǎng)站的整個(gè)網(wǎng)站地圖是不合適的，因?yàn)橛脩艨赡軙?huì)迷失于其間，本身用戶就沒(méi)找到他們想要的東西，再繼續(xù)從幾十個(gè)鏈接中找他們想要的東西的話，這個(gè)體驗(yàn)可想而知有多糟糕。所以，在這個(gè)時(shí)候，最好設(shè)定至多6~7個(gè)重要的鏈接。通常情況下，它們應(yīng)該包含以下幾個(gè)鏈接：
返回首頁(yè)
最近的帖子
搜索框
關(guān)于我們
聯(lián)系我們
當(dāng)然，網(wǎng)站的搜索功能可以固化在頁(yè)面上，而以內(nèi)容為主的網(wǎng)站或者博客類型的網(wǎng)站可以將近期熱門(mén)帖子添加到網(wǎng)站上，起到引流的作用。
提供在線聯(lián)系方式
作為一種溝通用戶的方式，在404頁(yè)面提供一個(gè)內(nèi)嵌表格讓用戶留言是一種頗具誠(chéng)意的解決方案。用戶可以通過(guò)表格留下聯(lián)系方式，碰到的問(wèn)題，或者試圖尋找的信息和內(nèi)容等。
如果網(wǎng)站本身是偏向銷售向的，那么在線客服也是不錯(cuò)的解決方法，直接與客服進(jìn)行在線溝通能夠挽留住更多的訂單，不是么?與客服進(jìn)行直接溝通可以找到他們想要的東西。
當(dāng)然，不論是在線表格提交系統(tǒng)還是在線客服系統(tǒng)都請(qǐng)保持簡(jiǎn)約直接的形式，不要讓用戶迷失在復(fù)雜交互和鏈接中。
幽默與多媒體
當(dāng)用戶進(jìn)入404頁(yè)面的時(shí)候，可以在頁(yè)面上嵌入自動(dòng)播放的音頻或者視頻，為用戶介紹網(wǎng)站或者引導(dǎo)用戶。在視頻或者動(dòng)畫(huà)中注入適當(dāng)?shù)挠哪唾u萌，可以緩解誤入此處用戶的抵觸情緒。
把控好展示的度，可能會(huì)為用戶帶來(lái)驚喜、愉悅的情緒，如果能引導(dǎo)用戶解決問(wèn)題就更好了。
接下來(lái)，我會(huì)通過(guò)下面我所搜集的案例來(lái)向你展示，大家都是如何設(shè)計(jì)優(yōu)秀的404頁(yè)面的。其中很多頁(yè)面頗為有趣，有些還有待提升，但是它們都在某些方面做的頗為突出，值得學(xué)習(xí)。
craigslist
Craigslist 的404頁(yè)面設(shè)計(jì)的頗為簡(jiǎn)約有趣，并且提供了首頁(yè)鏈接來(lái)引導(dǎo)用戶。
Niki Brown
這個(gè)404頁(yè)面除了提供了一些重要的鏈接之外，還提供了幾個(gè)秘密鏈接，當(dāng)用戶點(diǎn)開(kāi)之后，會(huì)發(fā)現(xiàn)一些頗為不錯(cuò)的音樂(lè)。這種方式會(huì)增加網(wǎng)站的黏度。
cubeecraft
作為一個(gè)紙模類的網(wǎng)站，它的404頁(yè)面突出了網(wǎng)站的特征：它不僅選取了一個(gè)與錯(cuò)誤有關(guān)的人物角色，還提供了圖片下載鏈接——紙模用戶可以將其打印出來(lái)，做成這個(gè)角色的紙模，獨(dú)具匠心。
Project-euh
這是一個(gè)非常獨(dú)特的404頁(yè)面，當(dāng)你進(jìn)入這個(gè)404頁(yè)面的時(shí)候，系統(tǒng)會(huì)有機(jī)器音提醒你進(jìn)入了一個(gè)404頁(yè)面，而頁(yè)面內(nèi)提供的圖片其實(shí)是一個(gè)動(dòng)畫(huà)的鏈接，它會(huì)引領(lǐng)你進(jìn)入一個(gè)個(gè)好玩的隨機(jī)頁(yè)面。
Technorati
這是一個(gè)簡(jiǎn)單的報(bào)錯(cuò)頁(yè)面，它還提供了訂閱和最近的文章，這些內(nèi)容可能會(huì)吸引一部分用戶。
Acme
這是一個(gè)獨(dú)特的404頁(yè)面，不過(guò)毫無(wú)疑問(wèn)它還可以補(bǔ)充更多的內(nèi)容。
Expansion Broadcast
如果你沒(méi)有找到你要的信息，可以通過(guò)這個(gè)頁(yè)面上的表格提交反饋信息。同時(shí)頁(yè)面中的Facebook和Twitter鏈接也可以幫助用戶了解更多信息。
Attrition
這個(gè)404頁(yè)面設(shè)計(jì)簡(jiǎn)單，信息也很直觀。
Orange Coat
使用流程圖來(lái)引導(dǎo)用戶找到信息的404頁(yè)面還是非常令人耳目一新的。
Disney
迪士尼的404頁(yè)面匯總了常見(jiàn)的問(wèn)題和解答，添加了下載鏈接等一些有用的信息。
Design Zillas
優(yōu)秀的404頁(yè)面長(zhǎng)啥樣?這就是個(gè)典型，視覺(jué)設(shè)計(jì)大氣，社交媒體鏈接完整，聯(lián)系方式清晰。
Twingly
通過(guò)“忍者”這種人物角色來(lái)傳遞信息，看起來(lái)不錯(cuò)。
webo group
這也是一個(gè)簡(jiǎn)約的404頁(yè)面。
Griffin Technology
這個(gè)404頁(yè)面也使用了討喜的插畫(huà)，添加了聯(lián)系方式和支持團(tuán)隊(duì)的聯(lián)系方式。
nosh
這是一個(gè)獨(dú)特的404頁(yè)面，用視頻來(lái)吸引用戶留在網(wǎng)站。作為一個(gè)有客戶端的網(wǎng)站，Nosh 將網(wǎng)站的Android和iOS客戶端鏈接也添加到頁(yè)面上。Nosh甚至不忘在404頁(yè)面上留下注冊(cè)網(wǎng)站的入口。
YepLike
同普通的404頁(yè)面相比，YepLike算是非常用心的了。
TrentWalten
這個(gè)404頁(yè)面在信息呈現(xiàn)上做的不夠好，但是它在頁(yè)面上展示隨機(jī)圖片的方式值得借鑒。
Marvel
作為老牌動(dòng)漫大廠，Marvel在404頁(yè)面上提供了高級(jí)搜索功能絕對(duì)是必要的——幫助用戶在他們的海量動(dòng)漫里面找到他們想要的那一期還真不是一件容易的事情。
Mozilla
Mozilla的404頁(yè)面為用戶提供了一些小技巧，去往首頁(yè)的鏈接以及Bug反饋的鏈接。
THCNET
THCNET的404頁(yè)面也算是獨(dú)具一格了，它并沒(méi)有幫迷路的用戶找到他們想要的東西，而是……為用戶提供了一個(gè)80年代早期的文字冒險(xiǎn)游戲Zork。如果你是一個(gè)對(duì)此稍有了解的歐美用戶的話，會(huì)為此著迷的。至少，對(duì)我而言，感到非常驚喜。
Limpfish
Limpfish的設(shè)計(jì)頗為幽默，不過(guò)為用戶提供的信息還不夠完整，有待提升。
Starbucks
星巴克的404頁(yè)面中，為用戶提供了首頁(yè)鏈接、網(wǎng)站導(dǎo)航以及反饋?lái)?yè)面。頁(yè)面保持星巴克本身一貫的風(fēng)格，優(yōu)雅簡(jiǎn)約。
Heinz
Heinz 的頁(yè)面設(shè)計(jì)也非常整潔，最重要的是它非常巧妙地將自家的產(chǎn)品融入到頁(yè)面設(shè)計(jì)中來(lái)了。
Inspiration Bit
這個(gè)404頁(yè)面為用戶提供了流行的、推薦的以及最受歡迎的信息。網(wǎng)站還提供了社交媒體的入可。
Realmac Software
看過(guò)《宿醉》系列和《預(yù)產(chǎn)期》的同學(xué)，看到這個(gè)頁(yè)面的時(shí)候，絕對(duì)會(huì)會(huì)心一笑。網(wǎng)站底部還提供了了Twitter、Flickr和Vimeo的鏈接。
Home Star Runner
這個(gè)404頁(yè)面使用了簡(jiǎn)單的卡通圖片和幽默的文字，頗為帶感。
StudyTonight
StudyTonight 使用了一個(gè)卡通獅子的動(dòng)漫角色，配合一段相應(yīng)的文案來(lái)吸引用戶。
