中小型企業(yè)網(wǎng)站界面設(shè)計(jì)中的創(chuàng)意404頁(yè)面設(shè)計(jì)案例

時(shí)間：2023-09-20 15:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-20 15:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

中小型企業(yè)網(wǎng)站界面設(shè)計(jì)中的創(chuàng)意404頁(yè)面設(shè)計(jì)案例：當(dāng)瀏覽一個(gè)網(wǎng)站時(shí)，我們最不想看到的就是“這個(gè)頁(yè)面找不到”的消息。這段惱人的文字不僅表明出了問(wèn)題，而且也不能幫助我們糾正錯(cuò)誤，讓我們找到我們想要的內(nèi)容。事實(shí)上，在大多數(shù)情況下，帶有這種文本的標(biāo)準(zhǔn)404錯(cuò)誤頁(yè)面會(huì)把我們從我們正在瀏覽的網(wǎng)站趕走。正是在這樣的時(shí)刻，在網(wǎng)站設(shè)計(jì)中精心設(shè)計(jì)和深思熟慮的404錯(cuò)誤頁(yè)面的重要性變得顯而易見(jiàn)。




在本文中，我們將向您介紹一些在網(wǎng)站設(shè)計(jì)中很棒的404錯(cuò)誤頁(yè)面示例。我們將演示404頁(yè)面如何真正改善用戶體驗(yàn)，并向您展示如何使用這些頁(yè)面。我們列表中的頁(yè)面與“丟失”用戶的通信方式和他們?yōu)閱?wèn)題引入解決方案的方式是不同的。但是我們列表中的每一個(gè)例子都有其獨(dú)特的魅力，它展示了一個(gè)創(chuàng)意的404錯(cuò)誤頁(yè)面是如何說(shuō)服我們留在我們正在瀏覽的網(wǎng)站上，而不是讓我們放棄，并讓我們與這個(gè)品牌進(jìn)一步聯(lián)系。




在我們開(kāi)始研究網(wǎng)站設(shè)計(jì)中最佳的404錯(cuò)誤頁(yè)面列表之前，讓我們先定義404錯(cuò)誤頁(yè)面的基本元素是什么，以及可以添加哪些額外元素來(lái)突出錯(cuò)誤頁(yè)面。













是什么導(dǎo)致404錯(cuò)誤頁(yè)面




一個(gè)好的404錯(cuò)誤頁(yè)面需要清晰，幫助用戶輕松回到正確的軌道上，并與它所代表的品牌風(fēng)格相匹配。在大多數(shù)情況下，這些元素就足夠了。然而，404頁(yè)面還應(yīng)該具備另外三個(gè)品質(zhì)，來(lái)幫助你與用戶建立更深層次的聯(lián)系。




使您的404錯(cuò)誤頁(yè)面具有交互性




無(wú)論你做什么，使用什么媒介，與你的觀眾互動(dòng)，讓他們感覺(jué)自己是你項(xiàng)目的一部分，總是一個(gè)好主意。在網(wǎng)絡(luò)上，交互性是很自然的。但大多數(shù)人不認(rèn)為這適用于404錯(cuò)誤頁(yè)面，所以他們不合理地忽略了它們。事實(shí)是，當(dāng)一個(gè)404頁(yè)面是交互式的，它可以確保一個(gè)有趣的、愉快的、安全的返回到用戶想要找到的內(nèi)容。正如我們之前提到的，這不僅能幫助你留住用戶，還能加深他們與你的品牌之間的聯(lián)系。




404錯(cuò)誤頁(yè)面應(yīng)該很有趣




良好的幽默和與你的觀眾的聰明的溝通是贏得用戶的一個(gè)明確無(wú)誤的秘訣。當(dāng)你了解你的受眾，并且對(duì)你的品牌所代表的東西有一個(gè)清晰的愿景，適當(dāng)?shù)挠哪梢詭椭愕?04錯(cuò)誤頁(yè)面變得更加強(qiáng)大和有趣，而不是我們所習(xí)慣的標(biāo)準(zhǔn)的、枯燥的解決方案。




確保404錯(cuò)誤頁(yè)面在視覺(jué)上是有趣的




因?yàn)?04錯(cuò)誤頁(yè)面是你網(wǎng)站不可或缺的一部分，所以它應(yīng)該符合你品牌的風(fēng)格和特點(diǎn)。考慮到這一點(diǎn)，應(yīng)該以一種仔細(xì)和深思熟慮的方式來(lái)設(shè)計(jì)它們。如果你把每件事都做對(duì)了，一個(gè)漂亮有效的404頁(yè)面會(huì)讓用戶覺(jué)得他們甚至沒(méi)有走錯(cuò)方向。這種沉浸式體驗(yàn)會(huì)改善你網(wǎng)站上的用戶體驗(yàn)，甚至還會(huì)讓你在瀏覽過(guò)程中露出一兩個(gè)微笑。




下面的網(wǎng)站將這三種品質(zhì)完美地融入到他們的404頁(yè)面設(shè)計(jì)中。有些人只關(guān)注一個(gè)元素，有些人則成功地平衡了這三個(gè)元素，但毫無(wú)疑問(wèn)，它們都能幫助你了解自己有多有創(chuàng)造力，以及在所有網(wǎng)站頁(yè)面中處于劣勢(shì)的人(也就是404錯(cuò)誤頁(yè)面)身上你能取得多大的成就。




Zhenya Rynzhuk













Zhenya Rynzhuk獨(dú)特的設(shè)計(jì)讓她脫穎而出。當(dāng)談到為她的項(xiàng)目選擇正確的顏色和字體，創(chuàng)造引人注目的設(shè)計(jì)組合和使用有趣的動(dòng)畫(huà)效果時(shí)，她是最優(yōu)秀的。振亞的404錯(cuò)誤頁(yè)面也不例外。當(dāng)你看到它的時(shí)候，你甚至感覺(jué)不到你已經(jīng)進(jìn)入了死胡同。事實(shí)上，它看起來(lái)和她網(wǎng)站設(shè)計(jì)上的其他部分一樣。她將我們?cè)谏厦媪谐龅乃性睾喜⒌剿腻e(cuò)誤頁(yè)面中，并在其中添加了一點(diǎn)交互性。當(dāng)你移動(dòng)光標(biāo)時(shí)，先前落在整個(gè)頁(yè)面上的笑臉開(kāi)始從光標(biāo)上消失。這讓我們喜笑顏開(kāi)，并確保了愉快的用戶體驗(yàn)。當(dāng)我們玩完這些笑臉后，我們可以點(diǎn)擊屏幕中央的“帶我回來(lái)”文本，繼續(xù)瀏覽她的網(wǎng)站。




Romain Avalle













羅曼·阿瓦萊(Romain Avalle)作品集的404頁(yè)面簡(jiǎn)單、有效，能讓我們輕松回到正軌。像他網(wǎng)站的其他部分一樣，這個(gè)頁(yè)面也是互動(dòng)的。鼠標(biāo)指針在頁(yè)面周?chē)幸粋€(gè)大致輪廓的圓圈。當(dāng)您停止移動(dòng)它時(shí)，圓形圍繞著點(diǎn)形光標(biāo)，然后將點(diǎn)形光標(biāo)放置在圓圈的中心。這個(gè)小游戲讓整個(gè)瀏覽體驗(yàn)更有趣。該頁(yè)面還具有所有必要的鏈接，使用戶可以輕松導(dǎo)航到他的網(wǎng)站的其他部分。




Agnes Lloyd-Platt













好的幽默和聰明的溝通是一個(gè)不會(huì)弄錯(cuò)的組合，可以贏得大多數(shù)訪問(wèn)者，并讓他們留在你的網(wǎng)站上。Agnes Lloyd-Platt的404錯(cuò)誤頁(yè)面沒(méi)有像我們平?？吹降哪菢语@示常見(jiàn)的404錯(cuò)誤頁(yè)面文本，而是將圖片(有一張破蛋殼的照片)和文字(你打碎了它)巧妙地結(jié)合在一起，告訴我們剛剛發(fā)生了什么。當(dāng)你在頁(yè)面上移動(dòng)光標(biāo)時(shí)，她的作品開(kāi)始彈出。這是一個(gè)很好的方式來(lái)展示她的藝術(shù)，同時(shí)娛樂(lè)訪客，這使得這個(gè)錯(cuò)誤頁(yè)面瀏覽起來(lái)就像她的網(wǎng)站的其他部分一樣愉快。




The Feebles













組成這個(gè)工作室的二人組顯然喜歡在任何可能的時(shí)候打乒乓球來(lái)享受樂(lè)趣和放松?！叭鯂?guó)”的錯(cuò)誤頁(yè)面就是一個(gè)真實(shí)的證明，因?yàn)樗@示了他們倆在打乒乓球，而視頻后面的文字說(shuō)，我們剛剛結(jié)束比賽，我們馬上就到那里!他們以一種詼諧而獨(dú)特的方式與參觀者交流，讓參觀者了解他們的設(shè)計(jì)世界、關(guān)系和工作的空間，同時(shí)展示他們的作品的原創(chuàng)性。




MSTQ













簡(jiǎn)單而強(qiáng)大的404錯(cuò)誤頁(yè)面符合MSTQ工作室的品牌精神，它給我們留下了強(qiáng)大的影響，就像他們網(wǎng)站的其他部分一樣。當(dāng)頁(yè)面加載時(shí)，由于屏幕上出現(xiàn)了一個(gè)巨大的“404”，我們馬上就知道我們?cè)谀睦?。整個(gè)體驗(yàn)是所有更愉快的感謝奇妙的和有點(diǎn)迷幻的背景動(dòng)畫(huà)。工作室的標(biāo)志和菜單按鈕也顯示在頁(yè)面上——前者帶我們回到網(wǎng)站設(shè)計(jì)的主頁(yè)面，后者讓我們選擇我們想要訪問(wèn)的部分。




LEQB













LEQB的404錯(cuò)誤頁(yè)面看起來(lái)甚至不像一個(gè)錯(cuò)誤頁(yè)面，而是作為某個(gè)交互式的實(shí)驗(yàn)性web項(xiàng)目的主要部分。與光標(biāo)交互的流體動(dòng)畫(huà)確保了有趣的瀏覽體驗(yàn)。實(shí)際上，唯一能說(shuō)明這一點(diǎn)的是，一個(gè)錯(cuò)誤頁(yè)面是鼠標(biāo)指針后面的一個(gè)返回home文本的小單擊。整個(gè)網(wǎng)站都設(shè)計(jì)得很漂亮，導(dǎo)航很有趣，界面也很“糟糕”，所以我們并不指望錯(cuò)誤頁(yè)面會(huì)有什么不同。




Andrea Reni













Andrea Reni的404錯(cuò)誤頁(yè)面是另一個(gè)例子，展示了404頁(yè)面如何讓人感覺(jué)像一個(gè)吸引人的實(shí)驗(yàn)，完全適合網(wǎng)站的其他部分。當(dāng)我們移動(dòng)鼠標(biāo)指針時(shí)，這個(gè)異常豐富多彩的抽象表面會(huì)跟隨它的移動(dòng)。安德烈·雷尼(Andrea Reni)是一名軟件開(kāi)發(fā)人員，他的投資組合網(wǎng)站設(shè)計(jì)上的導(dǎo)航與他的職業(yè)相匹配——錯(cuò)誤頁(yè)面上有說(shuō)明，告訴我們輸入“m”作為菜單，輸入“h”作為幫助。




Combo













Combo是一個(gè)策略、品牌和設(shè)計(jì)工作室，擁有一個(gè)簡(jiǎn)單有效的404頁(yè)面。組合錯(cuò)誤頁(yè)面上的菜單垂直放置在屏幕的中央，就像網(wǎng)站的其他部分一樣。這是一個(gè)很棒的設(shè)計(jì)組合和有趣的視覺(jué)解決方案，將導(dǎo)航放在了關(guān)注的中心，盡管巨大的404數(shù)字與其他元素形成對(duì)比，占據(jù)了大部分屏幕。這里顯示的元素立即告訴我們，我們遇到了一個(gè)錯(cuò)誤頁(yè)面。他們的定位方式與網(wǎng)站的其他部分相匹配，所以我們沒(méi)有問(wèn)題找到我們周?chē)姆绞?，并返回到網(wǎng)站的其他部分。




Figma













一開(kāi)始，F(xiàn)igma的404頁(yè)面看起來(lái)像一個(gè)典型的錯(cuò)誤頁(yè)面，一個(gè)黑色的大404被寫(xiě)在白色的背景上，就像我們以前看到的那樣。然而，這并不是這個(gè)頁(yè)面的全部?jī)?nèi)容。




所有的企業(yè)都應(yīng)該嘗試使用他們的網(wǎng)站來(lái)加深與用戶的聯(lián)系，并以最好的方式展示他們所提供的產(chǎn)品，F(xiàn)igma在他們的404頁(yè)面上就是這么做的。他們賣(mài)的是一個(gè)界面和設(shè)計(jì)工具，他們巧妙地利用了404錯(cuò)誤頁(yè)面，讓我們了解了他們的工具可以做什么，404頁(yè)面上到處都是可點(diǎn)擊的錨點(diǎn)，我們可以隨心所欲地移動(dòng)它們。




他們還在頁(yè)眉顯示了整個(gè)菜單，在頁(yè)腳顯示了有用的鏈接。因此，即使你因?yàn)辄c(diǎn)擊了404頁(yè)面而有點(diǎn)惱火，你也可以輕松地訪問(wèn)你最初想訪問(wèn)的部分網(wǎng)站。結(jié)合頁(yè)面中間有趣的交互元素，確保了一個(gè)非常輕松的404錯(cuò)誤頁(yè)面體驗(yàn)。




Neundex













Neundex的404錯(cuò)誤頁(yè)面很好地展示了作者嘗試的意愿，這一點(diǎn)在網(wǎng)站的界面上并不像在他的項(xiàng)目中那么明顯。網(wǎng)站設(shè)計(jì)精美，考慮周到，流量很大。當(dāng)你打開(kāi)404頁(yè)面的時(shí)候，你會(huì)意識(shí)到它看起來(lái)像一個(gè)實(shí)驗(yàn)和一個(gè)項(xiàng)目，而不是網(wǎng)站界面的一部分。這對(duì)眼睛來(lái)說(shuō)不是件容易的事，因?yàn)橛泻芏嚅W爍的東西在進(jìn)行，但它的奇特和驚訝足以刺激我們?nèi)ヌ剿骶W(wǎng)站而不是離開(kāi)它。如果你知道你的目標(biāo)受眾是誰(shuí)，一次令人振奮的震撼可以把他們推向正確的方向，比我們都習(xí)慣的其他更有效、更視覺(jué)上令人愉悅的方法更有效。




New Company













New Company的錯(cuò)誤頁(yè)面很好地說(shuō)明了一個(gè)靜態(tài)的、簡(jiǎn)單的404錯(cuò)誤頁(yè)面如何具有良好的圖形和清晰的導(dǎo)航，從而在幫助人們獲得他們想要的內(nèi)容方面具有功能和效率。生動(dòng)、豐富多彩的視覺(jué)效果會(huì)給用戶留下深刻印象，增強(qiáng)他們與品牌的聯(lián)系。




Cusp













Cusp的錯(cuò)誤頁(yè)面簡(jiǎn)潔而有效，它提供了一個(gè)交互式小球，由多個(gè)沿著鼠標(biāo)指針?lè)较蛞苿?dòng)的404數(shù)字組成。這個(gè)有趣的元素讓我們可以稍微玩一下，但同時(shí)，它告訴我們我們所看到的是什么樣的頁(yè)面。我們可以很容易地訪問(wèn)菜單和機(jī)構(gòu)的項(xiàng)目。他們的標(biāo)志也會(huì)顯示出來(lái)，如果我們點(diǎn)擊它，它會(huì)帶我們到主頁(yè)。




Wheel of Foreplay













Wheel of Foreplay最初是一個(gè)性隔離游戲，目的是鼓勵(lì)人們通過(guò)性來(lái)增強(qiáng)免疫系統(tǒng)，并產(chǎn)生免疫球蛋白a，從而保護(hù)我們免受流感和其他疾病的侵襲。前戲404頁(yè)面的輪子與網(wǎng)站設(shè)計(jì)的其余部分的氛圍完全匹配，具有很強(qiáng)的視覺(jué)特征。特色的文本和圖形內(nèi)容非常具有啟發(fā)性，它們共同刺激用戶返回到更有幫助的頁(yè)面并繼續(xù)瀏覽該站點(diǎn)。