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