久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

網(wǎng)站設(shè)計(jì)中的404頁(yè)面設(shè)計(jì)發(fā)布者：本站     時(shí)間：2019-11-13 10:11:04

當(dāng)你試圖訪問(wèn)一個(gè)不存在的網(wǎng)頁(yè)時(shí)，會(huì)彈出一個(gè)404頁(yè)面。如果你做了一個(gè)網(wǎng)站設(shè)計(jì)，那么你也你需要一個(gè)404頁(yè)面。傳統(tǒng)上，他們是一個(gè)巨大的挫折來(lái)源，但最好的404頁(yè)面被網(wǎng)站設(shè)計(jì)師變成了品牌的優(yōu)勢(shì)。

我們?cè)絹?lái)越多地看到定制的404頁(yè)面，這些頁(yè)面使用機(jī)智、聰明的用戶體驗(yàn)或漂亮的設(shè)計(jì)來(lái)減輕發(fā)現(xiàn)自己在錯(cuò)誤位置的痛苦。無(wú)論是一些深思熟慮的CSS動(dòng)畫，還是一個(gè)很酷的視差滾動(dòng)效果，或者只是一些比你的平均水平更聰明的拷貝，有很多方法可以活躍你的404錯(cuò)誤頁(yè)面，正如這些例子所證明的。

最好的404頁(yè)面可以成為網(wǎng)站設(shè)計(jì)本身的迷你大使，它甚至可以在Twitter或相關(guān)博客上分享，作為該網(wǎng)站致力于客戶服務(wù)或獨(dú)特設(shè)計(jì)風(fēng)格的一個(gè)例子。我們?cè)谶@里展示的404錯(cuò)誤頁(yè)面已經(jīng)實(shí)現(xiàn)了所有這些功能，所以看看吧，希望對(duì)網(wǎng)站設(shè)計(jì)師的你受到啟發(fā)，跳出自己的思維定式，更大膽創(chuàng)意的完成你的網(wǎng)站設(shè)計(jì)項(xiàng)目。

01.年度流行色

圖片：年度色彩

這個(gè)網(wǎng)站設(shè)計(jì)致力于與潘通年度色彩有關(guān)的一切，它的一切都設(shè)計(jì)得很漂亮，包括它的404頁(yè)面。網(wǎng)站進(jìn)入了一個(gè)令人印象深刻的數(shù)量的深度，與相關(guān)的色彩系統(tǒng)的部分，建議調(diào)色板，并在使用的陰影的例子。與此同時(shí)，404頁(yè)面采用了一種智能但簡(jiǎn)單的方法。網(wǎng)站上有一條簡(jiǎn)短的說(shuō)明信息，還有一塊潘通（PANTONE）404色塊的樣本，這是一種非常合適的灰棕色，以配合用戶在網(wǎng)站上的心情。

02.上野

圖片：上野

上野是一家提供全方位服務(wù)的機(jī)構(gòu)，擁有非常出色的404頁(yè)面。你在上面所看到的并沒有抓住它的全部努力：熱狗是動(dòng)畫的，所以它在一個(gè)超現(xiàn)實(shí)的風(fēng)景中無(wú)限循環(huán)運(yùn)行，并且有幾個(gè)搞笑的解釋信息要探索，它是瘋狂的和完全獨(dú)特的—訪問(wèn)這里的錯(cuò)誤頁(yè)面。

03.安卓

圖片：安卓

Android通過(guò)其游戲化的404頁(yè)面將迷失變成了一種有趣的體驗(yàn)，小小的工作機(jī)器人會(huì)吐出甜甜圈、果凍豆和棉花糖，用戶旋轉(zhuǎn)齒輪將它們導(dǎo)向正確的管子。運(yùn)動(dòng)簡(jiǎn)單，可愛和品牌設(shè)計(jì)，這款游戲是上癮的糖果正在分類，點(diǎn)擊這里查看。

04.Gymbox

Gym Box是一家致力于提供“倫敦最獨(dú)特、最多樣化的課程”的健身公司。這種說(shuō)法的局限可能是出現(xiàn)在其404頁(yè)面上的那種80年代的健身奇觀。短褲，露臍裝和骨盆插入-你還想從錯(cuò)誤頁(yè)面得到什么？

05.松弛

圖片：松弛

可以毫不夸張地說(shuō)，Slack 2019年的標(biāo)識(shí)更新引起了廣泛的恐慌，而其超級(jí)甜蜜的404頁(yè)面肯定也有不少討厭它的人。如果在Slack上出了錯(cuò)，你就會(huì)被指引到一個(gè)神奇的地方，那里有茂密的樹葉、山脈和彩虹，蝴蝶、雞和小豬在那里自由自在地漫步。隨著鼠標(biāo)移動(dòng)，場(chǎng)景也會(huì)水平滾動(dòng)（在這里試試）。

06.泥精制的

Puree Maison是一家專注于傳播策略的創(chuàng)意公司，其特色網(wǎng)站設(shè)計(jì)上滿是令人愉快的動(dòng)畫（建議你多點(diǎn)擊看看）。特別喜歡這個(gè)超現(xiàn)實(shí)的404頁(yè)面，它以某種方式完美地捕捉到了撞上數(shù)字墻的痛苦。

07.皮克斯

圖片：皮克斯

有些人就是把事情看得太重，皮克斯的404頁(yè)面以2015年大受歡迎的《頭腦特工隊(duì)》（Inside Out）中的悲傷為特色，它簡(jiǎn)單、直接，而且很有效。如果它代表了你對(duì)404錯(cuò)誤的反應(yīng)，那么也許你需要重新審視一下你的生活。

08.馬特奧Vandelli

你不需要成為一個(gè)主要的品牌投入一點(diǎn)努力在你的404頁(yè)面，我們喜歡這個(gè)來(lái)自平面設(shè)計(jì)師Matteo Vandelli的互動(dòng)例子。他利用他的設(shè)計(jì)作品集中的錯(cuò)誤頁(yè)面作為另一個(gè)展示他的創(chuàng)造力和設(shè)計(jì)悟性的機(jī)會(huì)。當(dāng)訪問(wèn)者瀏覽404頁(yè)面時(shí)，它會(huì)像水一樣泛起漣漪。其效果令人著迷。

09.二十世紀(jì)?？怂?/span>

找不到你想要的電影？福克斯電影的網(wǎng)站有一個(gè)很好的方式來(lái)激勵(lì)你時(shí)，你得到一個(gè)錯(cuò)誤的URL；它的404頁(yè)面會(huì)彈出一部邪典電影的劇照，配上精練的字幕和一些你可能想看的其他電影。我們已經(jīng)看過(guò)《剪刀手愛德華》、《書呆子的復(fù)仇》和《大人物拿破侖》等電影的片段。具有諷刺意味的是，在撰寫本文時(shí)，可單擊的文本會(huì)導(dǎo)致另一個(gè)設(shè)計(jì)不太好的404頁(yè)面。

10.云服務(wù)器

云服務(wù)器是在美國(guó)、歐洲和亞太地區(qū)運(yùn)行的云服務(wù)器和云托管服務(wù)。雖然靈活的云服務(wù)器很有用，但它們并不是很有趣，我們猜測(cè)這就是為什么該公司在其半開玩笑的404錯(cuò)誤頁(yè)面中添加了一些幽默元素的原因。我們想知道要過(guò)多久這個(gè)看起來(lái)很有幫助的初級(jí)開發(fā)者才會(huì)被競(jìng)爭(zhēng)對(duì)手挖走。

11.BluePath

另一個(gè)在404錯(cuò)誤頁(yè)面上使用幽默的網(wǎng)站設(shè)計(jì)是亞特蘭大數(shù)據(jù)戰(zhàn)略咨詢公司BluePath，這一頁(yè)顯示了一張亞特蘭大的地圖，在頁(yè)面的另一邊有一個(gè)小點(diǎn)，表示訪問(wèn)者“完全不在地圖上”。在一個(gè)極其脆弱的鏈接中，該地圖還包括數(shù)據(jù)驅(qū)動(dòng)的信息，顯示該地區(qū)的犯罪報(bào)告。“為什么？因?yàn)槟氵€沒雇我們是犯罪！”這些古怪的數(shù)據(jù)分析師。

12.奇跡

漫威將404錯(cuò)誤頁(yè)面建立在《宇宙觀察者》的基礎(chǔ)上，從而保持了品牌的穩(wěn)固。也許因?yàn)閁atu長(zhǎng)得不怎么樣（抱歉），漫威決定迎合比我們膚淺的游客，在黑寡婦的背景下只增加他的眼睛。額外的酷點(diǎn)，使眼睛跟隨訪問(wèn)者的光標(biāo)在屏幕上。

13.Kualo

網(wǎng)絡(luò)托管公司Kualo已經(jīng)運(yùn)營(yíng)了15年，在互聯(lián)網(wǎng)時(shí)代是永恒的，它的404頁(yè)面通過(guò)向訪問(wèn)者提供Kualo主題的太空入侵者游戲讓人回想起了過(guò)去，但它不是完美的。首先，切斷艦隊(duì)外圍以減緩入侵者下降速度的關(guān)鍵策略行不通。但它很有趣，如果你設(shè)法獲得超過(guò)1000分，它可以為你的托管協(xié)議贏得折扣。

這篇文章也啟發(fā)了美國(guó)害蟲控制公司Pointe pest - control，在它的404錯(cuò)誤頁(yè)面中加入了自己的害蟲入侵者游戲，包括不同的飛行和爬行的蟲子。

正如Pointe網(wǎng)站的克洛伊?佐林格（Chloe Zollinger）所言：“對(duì)于網(wǎng)站用戶來(lái)說(shuō)，訪問(wèn)404錯(cuò)誤頁(yè)面最令人沮喪?！蔽覀兠靼拙W(wǎng)頁(yè)上的用戶體驗(yàn)有多重要。為了改善訪問(wèn)者的體驗(yàn)，我們的團(tuán)隊(duì)致力于在我們的404頁(yè)面上創(chuàng)建一個(gè)互動(dòng)游戲?！?

14.Waaark

NSFW；先戴上耳機(jī)

法國(guó)工作室Waaark的404頁(yè)面看起來(lái)很不錯(cuò)，但聽起來(lái)更好——盡管可能不是在工作的時(shí)候。受《銀河系和傳送門》（Hitchhiker’s Guide to the Galaxy and Portal）作者斯蒂芬·霍金（Stephen Hawking）的啟發(fā)，它使用了一個(gè)名為meSpeak的JavaScript文本語(yǔ)音轉(zhuǎn)換工具，讓你聽一場(chǎng)言辭激烈的機(jī)器人長(zhǎng)篇大論。插上耳機(jī)，看一看。

15.史蒂夫?蘭伯特

紐約藝術(shù)家史蒂夫·蘭伯特將此描述為“互聯(lián)網(wǎng)上最尷尬的404未找到頁(yè)面”，你知道，他可能是對(duì)的。它的特點(diǎn)是一個(gè)折磨人的一塊相機(jī)，只是繼續(xù)下去。我們不相信你在看完他的視頻時(shí)，身體的任何部分都沒有繃緊。

16.維多利亞Spicer

圖片：維多利亞Spicer

維多利亞·斯派塞是倫敦的布景設(shè)計(jì)師和道具設(shè)計(jì)師，正如你所預(yù)料的那樣，她的作品集站點(diǎn)充滿了美麗的照片，她的404錯(cuò)誤頁(yè)面也不例外。它展示了她頑皮的一面，同時(shí)還保持著東西看起來(lái)光彩照人。

17.Figma

即使我們?cè)谶@里有一個(gè)Illustrator CC的副本，可以在任何時(shí)候使用錨點(diǎn)和Bezier曲線，我們?nèi)匀槐籉igma的404頁(yè)面所吸引。超大的404文本將以向量的形式呈現(xiàn)，您可以根據(jù)您的核心內(nèi)容進(jìn)行重新設(shè)計(jì)。

18.Airbnb

這張來(lái)自Airbnb的404頁(yè)面上有一個(gè)簡(jiǎn)單但令人愉快的動(dòng)畫，一個(gè)不幸的女孩把冰淇淋掉在了地板上。Airbnb的聲譽(yù)建立在它的風(fēng)度和友好上，這個(gè)404頁(yè)面完美地符合它的品牌形象。

19.熱導(dǎo)生產(chǎn)

Hot Dot Productions在其令人印象深刻的404頁(yè)面中加入了“設(shè)計(jì)與技術(shù)相遇之處”（where design meets technology）的口號(hào)。404頁(yè)面上有三個(gè)由數(shù)百個(gè)小圓點(diǎn)組成的數(shù)字，這些小圓點(diǎn)會(huì)隨著訪問(wèn)者鼠標(biāo)的移動(dòng)而改變方向或分散。你可以自己在這里嘗試一下。

20.樂高

在我們眼中，樂高不會(huì)做錯(cuò)任何事（你讀過(guò)我們關(guān)于樂高如何將自己重塑為超級(jí)品牌的文章嗎？）我們喜歡這個(gè)可愛的404頁(yè)面，它用一些嚇人的樂高數(shù)字和一個(gè)無(wú)術(shù)語(yǔ)的解釋使事情變得簡(jiǎn)單。

21.GitHub

你會(huì)期望從一個(gè)致力于代碼版本控制的網(wǎng)站上看到一些技術(shù)奇跡，當(dāng)你移動(dòng)鼠標(biāo)的時(shí)候，404頁(yè)面通過(guò)一個(gè)簡(jiǎn)單的模仿《星球大戰(zhàn)》的效果來(lái)吸引不同類型的極客。GitHub還有一個(gè)不錯(cuò)的500頁(yè)，可以在服務(wù)器崩潰時(shí)使用。

22.CSS忍者

網(wǎng)站設(shè)計(jì)世界喜歡忍者，通常是自封的工作頭銜的一部分。CSS Ninjas的404頁(yè)面順應(yīng)了這一潮流（我們猜，它的名字也是如此），它的特點(diǎn)是簡(jiǎn)潔、有風(fēng)格的插圖，反映了網(wǎng)站的總體設(shè)計(jì)思路。

23.MailChimp

2018年秋，超時(shí)尚的電子郵件通訊服務(wù)MailChimp進(jìn)行了網(wǎng)站設(shè)計(jì)改版，其404頁(yè)面也進(jìn)行了更新。新外觀的錯(cuò)誤頁(yè)面上的功能是圍繞MailChimp的新品牌中心的不合時(shí)宜的，天真的插圖。說(shuō)真的，說(shuō)“我迷路了”，有什么比一頭腦袋埋在洞里的驢子更合適呢？

24.Volta鞋類

圖片：沃爾特

Volta是一家位于米蘭的鞋店，它的網(wǎng)站包含了很多很酷的UI設(shè)計(jì)，我們喜歡它不僅僅是一個(gè)標(biāo)準(zhǔn)的404頁(yè)面。高質(zhì)量，專注的產(chǎn)品攝影與一個(gè)古怪的觸摸-一個(gè)微型大理石雕像，點(diǎn)頭到旗艦店的意大利家-幫助提升這個(gè)錯(cuò)誤的頁(yè)面。

25.布雷特·維克多

計(jì)算機(jī)科學(xué)家Bret Victor的404頁(yè)面，當(dāng)然是受到Rene Magritte的標(biāo)志性畫作《圖像的背叛》的啟發(fā)，向觀眾提出了一些富有挑戰(zhàn)性的哲學(xué)問(wèn)題。如果這不是一頁(yè)，那它是什么？什么是“頁(yè)面”？它是一種可以真正說(shuō)存在的東西嗎？這個(gè)明顯沒有頁(yè)面的“this”指的是什么？有什么是真的嗎？讓你覺得不是嗎？

26.IMDb

另一個(gè)很棒的基于電影的404錯(cuò)誤頁(yè)面可以在IMDb網(wǎng)站上找到，這個(gè)全面的電影事實(shí)數(shù)據(jù)庫(kù)在其404頁(yè)面上添加了一些著名電影的經(jīng)典臺(tái)詞，并對(duì)其進(jìn)行了巧妙的編輯，以適應(yīng)其新的用途?？纯茨愕玫搅耸裁础?

27.bit.ly

圖片：Bitly的

404頁(yè)面的鏈接縮短服務(wù)位，ly的特色是一條可愛的河豚魚在互動(dòng)的海洋中上下翻騰。擱淺的魚會(huì)對(duì)你的鼠標(biāo)移動(dòng)做出反應(yīng)，而云朵和海鷗中微妙的動(dòng)畫細(xì)節(jié)有助于營(yíng)造一種平靜的情緒。

28.DropBox

DropBox取代了多年來(lái)裝飾其404頁(yè)面的埃舍爾式的“不可能的盒子”，取而代之的是一幅同樣古怪的插畫。我們喜歡把所有出錯(cuò)的事情都抽象地表現(xiàn)出來(lái)——輪子掉了。這是一個(gè)漂亮的、簡(jiǎn)單的手繪插圖，它很好地傳達(dá)了信息，并提供了大量有用的導(dǎo)航鏈接，為頂級(jí)用戶提供了體驗(yàn)。

29.eHarmony

當(dāng)你在尋找愛情的時(shí)候，你最不想聽到的就是：你找不到它。在線婚戀網(wǎng)站eHarmony的404頁(yè)面顯示，雖然你所訪問(wèn)的頁(yè)面無(wú)法訪問(wèn)，但海里還有大約50萬(wàn)條魚。

30.星巴克

星巴克充分利用其主要產(chǎn)品來(lái)說(shuō)明其404信息，在這個(gè)例子中，丟失咖啡杯的“泄密”標(biāo)志被用來(lái)講述這個(gè)故事，還有一些無(wú)術(shù)語(yǔ)的拷貝來(lái)幫助用戶找到他們想要的。

31.暴雪娛樂公司

視頻游戲開發(fā)商暴雪對(duì)其404頁(yè)面采取了獨(dú)創(chuàng)的方式，在它，工作的網(wǎng)站設(shè)計(jì)似乎已經(jīng)成為破碎：標(biāo)題導(dǎo)航下降，有一個(gè)破碎的屏幕效果。沒有太多有用的鏈接，相反，暴雪選擇了一個(gè)嚴(yán)肅的錯(cuò)誤信息：“這個(gè)頁(yè)面不存在或其他一些可怕的錯(cuò)誤已經(jīng)發(fā)生”。