- 相關(guān)推薦
如何設計404頁(yè)面
許多時(shí)候，404出錯頁(yè)面會(huì )令人感覺(jué)厭煩。但有趣的是，在一些情況下，這些頁(yè)面可以給用戶(hù)帶來(lái)樂(lè )趣，使用戶(hù)不再介意頁(yè)面本身的問(wèn)題。
如何設計404頁(yè)面
出現這種差異并不是偶然。你的404頁(yè)面應當與其他網(wǎng)頁(yè)有著(zhù)同樣的風(fēng)格和設計。這一點(diǎn)很重要，因為404頁(yè)面的彈出已經(jīng)給用戶(hù)體驗帶來(lái)了干擾。不過(guò)，如果能加以適當的處理，你可以扭轉這種不利局面，給用戶(hù)帶來(lái)意外驚喜。
情緒連接的力量
網(wǎng)站的功能、可用性和服務(wù)很重要，但用戶(hù)與網(wǎng)站之間的情緒連接最能影響他們對網(wǎng)站的評價(jià)。對于許多日常決定，人類(lèi)的決策機制通常是“跟著(zhù)感覺(jué)走”，而用戶(hù)與網(wǎng)站的互動(dòng)也是如此。換句話(huà)說(shuō)，用戶(hù)對網(wǎng)站的感覺(jué)比他們對網(wǎng)站的看法更重要。
因此，在試圖訪(fǎng)問(wèn)某一網(wǎng)頁(yè)時(shí)看到404出錯頁(yè)面給人的感覺(jué)很不好。這種出錯有可能拖累整體體驗，而如果網(wǎng)站還存在其他小缺陷，那么404頁(yè)面將會(huì )是毀滅性的。因此，網(wǎng)站開(kāi)發(fā)者必須非常謹慎地對待404頁(yè)面。
不過(guò)從好的一面來(lái)看，404頁(yè)面也帶來(lái)了逗樂(lè )的機會(huì )。網(wǎng)站沒(méi)有按正常機制工作，但你也可以借此機會(huì )給用戶(hù)帶來(lái)驚喜，因為用戶(hù)通常不會(huì )想到404頁(yè)面會(huì )帶來(lái)有趣的消息。以下是我們欣賞的幾個(gè)404頁(yè)面設計，以及為何這些頁(yè)面使我們更喜歡相應的網(wǎng)站。
搞笑
創(chuàng )造情緒連接的最古老方式之一在于搞笑，搞笑將使用戶(hù)很難形成不滿(mǎn)的情緒。
Magnet的404頁(yè)面正是如此。頁(yè)面上的維恩圖令人覺(jué)得好笑，這很清楚地創(chuàng )造了情緒鏈接。
一些404頁(yè)面則參考了流行文化，因為如果你自身無(wú)法搞笑，那么可以借鑒能搞笑的人。來(lái)自Worrydream的404頁(yè)面很經(jīng)典。請注意，“404”的字樣以煙斗煙霧的形式出現。
漂亮的視覺(jué)效果
如果無(wú)法令用戶(hù)感到有趣，那么請嘗試利用你的藝術(shù)天分去吸引他們。這樣的404頁(yè)面看起來(lái)很酷，在很多情況下能改變用戶(hù)的觀(guān)感。
忍者的形象是大眾明星，而Huwshimi的404頁(yè)面利用了這樣的形象�？蚣茉O計、繪制技巧和配色使這一頁(yè)面看起來(lái)就像是藝術(shù)作品，而我們并不介意看到這一頁(yè)面。
類(lèi)似地，來(lái)自Audiko的404頁(yè)面也很有意思。這一頁(yè)面會(huì )讓人忘卻最初打開(kāi)頁(yè)面是為了尋找什么信息。盡管不像Huwshimi的頁(yè)面一樣精致，但這幅圖片更容易吸引用戶(hù)的'注意力。
互動(dòng)功能
既不是很有趣，也沒(méi)有精美的藝術(shù)感？那么可以試試利用游戲。
來(lái)自Blue Fountain Media的404頁(yè)面非常聰明地利用了吃豆人游戲。有時(shí)，你可能會(huì )故意訪(fǎng)問(wèn)這一404頁(yè)面，以消磨時(shí)間。
另一個(gè)可以用于打發(fā)時(shí)間的404頁(yè)面來(lái)自Hot Dot。用戶(hù)可以點(diǎn)擊頁(yè)面上的點(diǎn)，觀(guān)看這些點(diǎn)的運動(dòng)。這一互動(dòng)功能比你想象中可能更有趣，而用戶(hù)很可能會(huì )長(cháng)時(shí)間注視這一頁(yè)面，忘了他們最初打開(kāi)頁(yè)面的意圖。
并非所有具備互動(dòng)功能的404頁(yè)面都令人上癮。GitHub的404頁(yè)面很簡(jiǎn)單，不會(huì )占用你很多時(shí)間，但這一頁(yè)面同樣能帶來(lái)樂(lè )趣。這一頁(yè)面的互動(dòng)功能不是很強大（前景上的對象會(huì )隨著(zhù)鼠標而移動(dòng)），但可愛(ài)的動(dòng)畫(huà)會(huì )吸引用戶(hù)。
創(chuàng )造情緒連接并不一定需要走可愛(ài)路線(xiàn)。Hakim El Hattab的404頁(yè)面上有著(zhù)令人毛骨悚然的眼球，會(huì )隨著(zhù)你的鼠標而轉動(dòng)，并有節奏地眨眼。頁(yè)面下方的文字會(huì )提示，在幾秒鐘之后，網(wǎng)站將自動(dòng)跳轉至主頁(yè)。
以巧妙的方式去宣傳品牌
一些情況下，只要引入一兩個(gè)其他元素，404頁(yè)面也會(huì )是推廣品牌的良機。馬斯洛的“情感需求層次理論”可以作為參考。你需要確保，你的品牌能對頁(yè)面的功能和個(gè)性化實(shí)現良好的補充。
例如，樂(lè )高的404頁(yè)面采用了具有幽默感、有趣的視覺(jué)效果，但也使用了該品牌標志性的形象。這一形象很簡(jiǎn)單、很可愛(ài)，能夠提高品牌認知度。僅僅看著(zhù)這一頁(yè)面就可以給你帶來(lái)一些回憶�？梢园l(fā)現，他們給前景角色選擇了紅色配色，從而更好地表達出錯的信號。
類(lèi)似地，來(lái)自eHarmony的404頁(yè)面集成了有趣的視覺(jué)畫(huà)面，同時(shí)推廣了該網(wǎng)站關(guān)于“愛(ài)”的主題。對交友網(wǎng)站來(lái)說(shuō)，開(kāi)玩笑可能并不是很合適，但這一頁(yè)面做得很好。他們還將頁(yè)面出錯轉化成了與用戶(hù)展開(kāi)對話(huà)的機會(huì )，推動(dòng)用戶(hù)注冊服務(wù)。
贏(yíng)家
我們認為，Nouveller的404頁(yè)面具備了以上所有元素。這一頁(yè)面最開(kāi)始是電影《侏羅紀公園》中央公園控制臺的DOS輸入窗口，但在幾次嘗試（交互元素）后，你會(huì )看到丹尼斯·納德利（Dennis Nadry）在電影中的臺詞（流行文化和幽默感）。此外，這一頁(yè)面也會(huì )令你感到驚訝。
當然，這樣的消息并未失控，因為你可以通過(guò)“重啟并重試”選項返回至主頁(yè)。這一404頁(yè)面擁有所有必要元素：樂(lè )趣、互動(dòng)性，以及幫助用戶(hù)返回至正確頁(yè)面的基本功能。
實(shí)用的建議
讓你的404頁(yè)面有趣只解決了問(wèn)題的一部分，你還需要記住其他原則。最后，讓我們來(lái)回顧一些通用的小技巧：
- 鏈接至熱門(mén)文章。如果用戶(hù)并不知道下一步要怎么做，那么這是一個(gè)不錯的方式。在用戶(hù)愿意接受建議的情況下，推薦你最好的內容。
- 集成搜索欄。與上一條建議類(lèi)似，集成搜索欄將幫助用戶(hù)繼續瀏覽，而不會(huì )受到太大的干擾。
- 提供選項，幫助用戶(hù)報告損壞的鏈接。推動(dòng)用戶(hù)參與將使網(wǎng)站變得更好，同時(shí)也將給用戶(hù)帶來(lái)滿(mǎn)足感。你至少可以向他們提供技術(shù)支持郵件的地址，讓他們發(fā)出自己的聲音。
- 像普通人一樣解釋狀況。告訴用戶(hù)，究竟是什么出現了錯誤（用門(mén)外漢的語(yǔ)言），并將404頁(yè)面當作信息門(mén)戶(hù)。如果設計能夠實(shí)現，那么你甚至可以同時(shí)集成搜索欄和推薦內容鏈接。請不要用技術(shù)語(yǔ)言來(lái)說(shuō)明這樣的問(wèn)題。
總而言之，對于404頁(yè)面，你應當給予與其他頁(yè)面同樣多，甚至更多的關(guān)注。通過(guò)適當的設計，你可以獲得意料之外的粉絲，這樣的人群會(huì )在社交媒體上分享聰明的設計。
【如何設計404頁(yè)面】相關(guān)文章：
優(yōu)秀404頁(yè)面設計指南02-25
有趣簡(jiǎn)單的404頁(yè)面實(shí)用技巧02-19
如何使用firework設計網(wǎng)站頁(yè)面04-03
Dreamweaver如何創(chuàng )建頁(yè)面08-08
wps文字如何布局頁(yè)面07-13
如何用PPT制作一個(gè)“鏤空感”頁(yè)面設計?06-15
單頁(yè)面網(wǎng)站設計欣賞06-04