9.13日(rì)音(yīn)訊,談談404頁面的γ↓(de)創意設計(jì)。前陣子(zǐ)做(zuò↓∑π)我們一(yī)淘優惠商家(jiā)統一(≥φ↓yī)的(de)報(bào)錯(cuò)頁面，整理(lǐ≥≈')了(le)一(yī)些(xiē)有(yǒu)$β意思的(de)404頁面（後簡稱404），加之最<€γ®近(jìn)網友(yǒu)熱(rè)議(y✘±↔ì)的(de)QQ空(kōng)間(jiān)公益404頁面γβγ，在這(zhè)裡(lǐ)一(yī)起拿(®βφná)出來(lái)跟大(dà)家(jiā)↑±®分(fēn)享一(yī)下(xià)。
什(shén)麽是(shì)404頁面？
404是(shì)HTTP其中一(yī)種的(d♠©×e)标準回應信息，通(tōng)俗的(de)說(shuō÷↑€)，當用(yòng)戶浏覽網頁時(shí)，服務器(qì)無法正常提供信&☆↓₩息，例如(rú)用(yòng)戶輸入了(le)錯(cuò)誤鏈接；或者無法相(★λλ¥xiàng)應并且找不(bù)到(dào) ♦÷®原因，這(zhè)時(shí)候頁面會(huì)出現✘→≠(xiàn)這(zhè)個(gè)404頁面。404€≈是(shì)一(yī)個(gè)信息碼，通(tōng)常之後會 €(huì)有(yǒu)一(yī)個(gè)可(kěδσ)讀(dú)信息反饋給用(yòng)戶：NotFound★≠§↓。它意味著(zhe)網頁不(bù)存在。
為(wèi)什(shén)麽叫404？
據說(shuō)在第三次科(kē)技(jì)革命之前，互聯網的(d<÷"✘e)形态就(jiù)是(shì)一(yī)個(gè)大($§ ±dà)型的(de)中央數(shù)據庫，這(zh↔εè)個(gè)數(shù)據庫就(jiù)設置在40₩λα×4房(fáng)間(jiān)裡(lǐ)面。那(nà)時(s$"hí)候所有(yǒu)的(de)請(qǐng)求都(dōu)是(shì)∞→有(yǒu)人(rén)工(gōng)手動完成¥±↓₽的(de)，如(rú)果在數(shù)據庫中×↕↓ 沒有(yǒu)找到(dào)請(qǐngΩ€)求者所需要(yào)的(de)文(wén)件(jiàn)，或者>§由于請(qǐng)求者寫錯(cuò)了(le)ε文(wén)件(jiàn)編号，用(yòng)戶就(jiù₩λ§)會(huì)得(de)到(dào)一(yī)個(gè)返回信息：room40§±4:filenotfound。後來(lái)互聯網興起後，人(ré≤'ε∑n)們也(yě)就(jiù)習(xí)慣了(le)×÷β用(yòng)404作(zuò)為(wèi)±₽₩服務器(qì)未找到(dào)文(wén)件(jiàn)的(de)錯(cuò)← ₩誤代碼了(le)。（via百度百科(kē)）
為(wèi)什(shén)麽要(yào)設計(jì)404頁面？
盡管404頁面被用(yòng)戶看(kàn)到(dà♠&o)的(de)概率相(xiàng)對(duì)全站(×∏≈πzhàn)的(de)其他(tā)頁面要(yào)小(¥ xiǎo)很(hěn)多(duō)，但(dàn)頁面難免會(huì)出錯λ≤β(cuò)，無論是(shì)用(yòng)戶的(de)誤操作(zuò)→>♣還(hái)是(shì)服務器(qì)的(de)原因，這(zhè)是(shì)¶≥≠一(yī)個(gè)極少(shǎo)數(shù)才會(huì)出現(xià &n)的(de)錯(cuò)誤情況，作(zφ$ uò)為(wèi)網頁的(de)設計(jì)者或者&™↑↓開(kāi)發者，有(yǒu)時(shí)"γ候我們無法控制(zhì)錯(cuò)誤頁面的(de)出現(xià÷✘β•n)，但(dàn)我們可(kě)以通(tōng)過使用(yòng)一(yī)★>♣個(gè)定制(zhì)的(de)404錯(cuò)誤頁面将損®←λ©害降到(dào)最低(dī)。好(hǎo)的(δ♦de)用(yòng)戶體(tǐ)驗是(shì)我們不 ♦ε(bù)能(néng)放(fàng)過任何一(yī)個(₹✔β€gè)小(xiǎo)的(de)細節，一(yī)我們需要(≤±™≤yào)在這(zhè)個(gè)頁面很(hěn)好(hǎo)的(de)把∞♠信息傳達給用(yòng)戶，二引導用(y€¶òng)戶下(xià)一(yī)步的(de<Ω)操作(zuò)，引導用(yòng)戶留γ♦在我們的(de)網站(zhàn)而不(bù)是(shì)沮喪的(☆↔γde)關閉窗(chuāng)口。
他(tā)們都(dōu)在404上(shàng)做(z≤±$→uò)了(le)什(shén)麽？
下(xià)面我們先來(lái)看(kàn)幾個(gè)直觀形象版的(d•↔∑e)404頁面：
俄文(wén)網站(zhàn)，首屏巨大(>$dà)無比的(de)404和(hé)傷心欲絕的(deσ↔₹♣)小(xiǎo)裸男(nán)，直觀的(de)讓用(yòng↑←±)戶感受到(dào)網頁出了(le)問(wèn)題。但(dàn)對(duì×λ₽)于不(bù)懂(dǒng)互聯網的(de)用(yòng)戶來±∏✘(lái)說(shuō)，不(bù)能(néng)明(míng)白(©×bái)404的(de)含義，并且圖案下(xià)方相(xiàng)關解釋±ε文(wén)字特别小(xiǎo)，都(dōu)是(shì)對∏€∏λ(duì)用(yòng)戶無用(yòng)的(de)信息，隻簡單的(de)說§&♥∞(shuō)明(míng)了(le)可(kě)以返回到(dào)首βα頁。
報(bào)道(dào)點評新聞的(de)網站(zhàn)Rλ★etardnews，簡單“粗暴”的(de)←β×圖片展示。
搞笑(xiào)版的(de)404頁面：
美(měi)國(guó)動畫(huà)片南(nán)方公®¥±Ω園的(de)網站(zhàn)，在404上(α∞☆shàng)依舊(jiù)采用(yòng)了(le)無厘頭的(de↕₽∏×)風(fēng)格，Kyle和(hé)胖α$子(zǐ)Eric以對(duì)話(huà)的(de)•♥↑Ω形式告知(zhī)用(yòng)戶頁面不(bù)存在，延續惡搞風(fēng♥←)格。
Jotsai中讓人(rén)會(huì)心一(yī)笑(x¶ iào)的(de)404小(xiǎo)圖片，頁面沒有(yǒu)找到(dào)®σ♣，布偶說(shuō)因為(wèi)我把它吃§γ(chī)了(le)。
AcornCreative的(de)英式幽默。看(kàn)完搞笑(x <iào)版的(de)讓我們走一(yī)走溫情路 ÷≠•(lù)線：
美(měi)女(nǚ)圖片的(de)社交網站(zhàn)Zivity，π& 首先告訴了(le)用(yòng)戶頁面沒有(yǒu)找到♣π<λ(dào)，使用(yòng)了(le)美(měi)女(nǚ)↕σ圖片：雖然一(yī)些(xiē)不(bù)好(hǎo)的(de)情況，但(dγ ₹àn)我們仍然愛(ài)你(nǐ)。最後依舊(jiù)讓用(yò₩γ↑ng)戶選擇想要(yào)去(qù)的(de)地(dì)方。
有(yǒu)愛(ài)的(de)404
歐洲的(de)一(yī)家(jiā)公益組織ChildFocus在✔¶→♦去(qù)年(nián)10月(yuè)$σδ推出了(le)一(yī)項名為(wèi)“NotFo•♠und”的(de)計(jì)劃，利用(yòng)β<網站(zhàn)的(de)404頁面幫助找回走丢的(εΩde)孩子(zǐ)。
同一(yī)時(shí)期，在Missin∏≠♥"gChildrenEurope和(hé)Europea✘>nFederationforMissingandSexuallyExploi¶≥ αtedChildren等公益組織的(de)号召下(xià)，益∑♦←雲社會(huì)創新中心将404公益模式引入≈Ω→國(guó)內(nèi)，發起了(le)“404公益&rdquoπ≈™;行(xíng)動。
最近(jìn)，騰訊也(yě)利用(yòng)其自 ₽≈(zì)身(shēn)平台和(hé)廣大(dà)的± (de)用(yòng)戶群體(tǐ)，以新的(de)™&↔形式通(tōng)過404去(qù)承擔社會(huì)責任，發揮産品的(de)π↓社會(huì)影(yǐng)響力。
最後說(shuō)一(yī)下(xià)γ↓我們這(zhè)次設計(jì)的(de)一(yī)淘404頁面,采♥™用(yòng)了(le)傳統的(de)提示+相(xiàn♣≠₩g)關推薦引導的(de)形式：
1.向用(yòng)戶表示歉意，用(yòng)戶不(bù)會(huì)λ€π主動訪問(wèn)404，訪問(wèn)到(d¥™ào)404讓用(yòng)戶很(hěn)不(bù)愉快(kuài)，α道(dào)歉可(kě)以使用(yòng)戶減少(shǎo↔β)對(duì)網站(zhàn)的(de)抱怨。并明(míng)确提示用(γ♣yòng)戶想要(yào)的(de)信息不(bù)存在；
2.形象的(de)圖片配合文(wén)字，讓用(yòng)戶≈ ≥¶直觀感受；
3.适當的(de)引導用(yòng)戶，并給他(tā)們有(yǒu)用(Ω&yòng)的(de)鏈接，自(zì)動跳(tià •o)轉，秒(miǎo)數(shù)倒計(jì)時(shí)也(yě)是(s×≈hì)貼心的(de)服務；
4.其他(tā)一(yī)些(xiē)選₹♥✔≠擇，因為(wèi)訪問(wèn)到(dào)404的(de)不(bù)止是(㶀↓shì)個(gè)人(rén)，也(yě)有(yǒu)可(kě)能(néng)γ"是(shì)商家(jiā)；
5.推薦網站(zhàn)內(nèi)的(de)相(xià®≤§∑ng)關熱(rè)門(mén)商家(jiā)，不(bù)'₩♠≠讓用(yòng)戶失望而歸。
一(yī)個(gè)精心設計(jì)的(de)404錯(cuò) ™∞δ誤頁可(kě)以幫助網站(zhàn)避免丢失用(yò£> ng)戶的(de)信任，并正确引導用(yò"≥ng)戶返回站(zhàn)點其它頁面，以便用(yòn✘≈g)戶能(néng)停留在網站(zhàn)上±λ(shàng)更長(cháng)時(shí)間(jiā&£n)，減少(shǎo)客戶的(de)流失量。設置404頁面，其實也(yě)是(λ©shì)提高(gāo)用(yòng)戶體✔£(tǐ)驗的(de)一(yī)種表現(xiàn)形式。
結束語
訪問(wèn)到(dào)錯(cuò)誤頁面是(shì)不(bù)♦β愉快(kuài)的(de)用(yòng)戶體(✔÷★tǐ)驗，但(dàn)作(zuò)為(wèi)設計(jì)者£σ≤±我們可(kě)以為(wèi)用(yòng)戶想的(de£★φσ)更多(duō)，無論是(shì)像騰訊的(de)公益使40£ ∏4變廢為(wèi)寶，做(zuò)有(yǒu)愛(ài)的(de)404，還ε₹(hái)是(shì)一(yī)些(xiē)幽默圖片讓用(yòng)☆± ≤戶會(huì)心一(yī)笑(xiào)，我們需要(y ¶≤Ωào)花(huā)更多(duō)的(de)精©☆♥∏力和(hé)時(shí)間(jiān)做(zuò)更多(duō<♦α∏)有(yǒu)創意的(de)事(shì)←¥情。
