網站設計中的404頁面設計 - 金沙設計 SUMAART

網站設計中的404頁面設計

By:limo- 2019-10-18 09:28:55

當你試圖訪問一個不存在的網頁時,會彈出一個404頁面。如果你做了一個網站設計,那麼你也你需要一個404頁面。傳統上,他們是一個巨大的挫折來源,但最好的404頁面被網站設計師變成了品牌的優勢。


我們越來越多地看到定製的404頁面,這些頁面使用機智、聰明的使用者體驗或漂亮的設計來減輕發現自己在錯誤位置的痛苦。無論是一些深思熟慮的CSS動畫,還是一個很酷的視差滾動效果,或者只是一些比你的平均水平更聰明的拷貝,有很多方法可以活躍你的404錯誤頁面,正如這些例子所證明的。


最好的404頁面可以成為網站設計本身的迷你大使,它甚至可以在Twitter或相關部落格上分享,作為該網站致力於客戶服務或獨特設計風格的一個例子。我們在這裡展示的404錯誤頁面已經實現了所有這些功能,所以看看吧,希望對網站設計師的你受到啟發,跳出自己的思維定式,更大膽創意的完成你的網站設計專案。


01.年度流行色



圖片:年度色彩


這個網站設計致力於與潘通年度色彩有關的一切,它的一切都設計得很漂亮,包括它的404頁面。網站進入了一個令人印象深刻的數量的深度,與相關的色彩系統的部分,建議調色盤,並在使用的陰影的例子。與此同時,404頁面採用了一種智慧但簡單的方法。網站上有一條簡短的說明資訊,還有一塊潘通(PANTONE)404色塊的樣本,這是一種非常合適的灰棕色,以配合使用者在網站上的心情。


02.上野



圖片:上野


上野是一家提供全方位服務的機構,擁有非常出色的404頁面。你在上面所看到的並沒有抓住它的全部努力:熱狗是動畫的,所以它在一個超現實的風景中無限迴圈執行,並且有幾個搞笑的解釋資訊要探索,它是瘋狂的和完全獨特的—訪問這裡的錯誤頁面。


03.安卓



圖片:安卓


Android通過其遊戲化的404頁面將迷失變成了一種有趣的體驗,小小的工作機器人會吐出甜甜圈、果凍豆和棉花糖,使用者旋轉齒輪將它們導向正確的管子。運動簡單,可愛和品牌設計,這款遊戲是上癮的糖果正在分類,點選這裡檢視。


04.Gymbox


Gym Box是一家致力於提供“倫敦最獨特、最多樣化的課程”的健身公司。這種說法的侷限可能是出現在其404頁面上的那種80年代的健身奇觀。短褲,露臍裝和骨盆插入-你還想從錯誤頁面得到什麼?


05.鬆弛



圖片:鬆弛


可以毫不誇張地說,Slack 2019年的標識更新引起了廣泛的恐慌,而其超級甜蜜的404頁面肯定也有不少討厭它的人。如果在Slack上出了錯,你就會被指引到一個神奇的地方,那裡有茂密的樹葉、山脈和彩虹,蝴蝶、雞和小豬在那裡自由自在地漫步。隨著滑鼠移動,場景也會水平滾動(在這裡試試)。


06.泥精製的


Puree Maison是一家專注於傳播策略的創意公司,其特色網站設計上滿是令人愉快的動畫(建議你多點選看看)。特別喜歡這個超現實的404頁面,它以某種方式完美地捕捉到了撞上數字牆的痛苦。


07.皮克斯



圖片:皮克斯


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


08.馬特奧Vandelli


你不需要成為一個主要的品牌投入一點努力在你的404頁面,我們喜歡這個來自平面設計師Matteo Vandelli的互動例子。他利用他的設計作品集中的錯誤頁面作為另一個展示他的創造力和設計悟性的機會。當訪問者瀏覽404頁面時,它會像水一樣泛起漣漪。其效果令人著迷。


09.二十世紀福克斯



找不到你想要的電影?福克斯電影的網站有一個很好的方式來激勵你時,你得到一個錯誤的URL;它的404頁面會彈出一部邪典電影的劇照,配上精練的字幕和一些你可能想看的其他電影。我們已經看過《剪刀手愛德華》、《書呆子的復仇》和《大人物拿破崙》等電影的片段。具有諷刺意味的是,在撰寫本文時,可單擊的文字會導致另一個設計不太好的404頁面。


10.雲伺服器


雲伺服器是在美國、歐洲和亞太地區執行的雲伺服器和雲託管服務。雖然靈活的雲伺服器很有用,但它們並不是很有趣,我們猜測這就是為什麼該公司在其半開玩笑的404錯誤頁面中添加了一些幽默元素的原因。我們想知道要過多久這個看起來很有幫助的初級開發者才會被競爭對手挖走。


11.BluePath



另一個在404錯誤頁面上使用幽默的網站設計是亞特蘭大資料戰略諮詢公司BluePath,這一頁顯示了一張亞特蘭大的地圖,在頁面的另一邊有一個小點,表示訪問者“完全不在地圖上”。在一個極其脆弱的連結中,該地圖還包括資料驅動的資訊,顯示該地區的犯罪報告。“為什麼?因為你還沒僱我們是犯罪!”這些古怪的資料分析師。


12.奇蹟


漫威將404錯誤頁面建立在《宇宙觀察者》的基礎上,從而保持了品牌的穩固。也許因為Uatu長得不怎麼樣(抱歉),漫威決定迎合比我們膚淺的遊客,在黑寡婦的背景下只增加他的眼睛。額外的酷點,使眼睛跟隨訪問者的游標在螢幕上。


13.Kualo



網路託管公司Kualo已經運營了15年,在網際網路時代是永恆的,它的404頁面通過向訪問者提供Kualo主題的太空入侵者遊戲讓人回想起了過去,但它不是完美的。首先,切斷艦隊外圍以減緩入侵者下降速度的關鍵策略行不通。但它很有趣,如果你設法獲得超過1000分,它可以為你的託管協議贏得折扣。


這篇文章也啟發了美國害蟲控制公司Pointe pest - control,在它的404錯誤頁面中加入了自己的害蟲入侵者遊戲,包括不同的飛行和爬行的蟲子。


正如Pointe網站的克洛伊•佐林格(Chloe Zollinger)所言:“對於網站使用者來說,訪問404錯誤頁面最令人沮喪。”我們明白網頁上的使用者體驗有多重要。為了改善訪問者的體驗,我們的團隊致力於在我們的404頁面上建立一個互動遊戲。”


14.Waaark




NSFW;先戴上耳機


法國工作室Waaark的404頁面看起來很不錯,但聽起來更好——儘管可能不是在工作的時候。受《銀河系和傳送門》(Hitchhiker’s Guide to the Galaxy and Portal)作者斯蒂芬·霍金(Stephen Hawking)的啟發,它使用了一個名為meSpeak的JavaScript文字語音轉換工具,讓你聽一場言辭激烈的機器人長篇大論。插上耳機,看一看。


15.史蒂夫•蘭伯特



紐約藝術家史蒂夫·蘭伯特將此描述為“網際網路上最尷尬的404未找到頁面”,你知道,他可能是對的。它的特點是一個折磨人的一塊相機,只是繼續下去。我們不相信你在看完他的視訊時,身體的任何部分都沒有繃緊。


16.維多利亞Spicer



圖片:維多利亞Spicer


維多利亞·斯派塞是倫敦的佈景設計師和道具設計師,正如你所預料的那樣,她的作品集站點充滿了美麗的照片,她的404錯誤頁面也不例外。它展示了她頑皮的一面,同時還保持著東西看起來光彩照人。


17.Figma


即使我們在這裡有一個Illustrator CC的副本,可以在任何時候使用錨點和Bezier曲線,我們仍然被Figma的404頁面所吸引。超大的404文字將以向量的形式呈現,您可以根據您的核心內容進行重新設計。


18.Airbnb



這張來自Airbnb的404頁面上有一個簡單但令人愉快的動畫,一個不幸的女孩把冰淇淋掉在了地板上。Airbnb的聲譽建立在它的風度和友好上,這個404頁面完美地符合它的品牌形象。


19.熱導生產


Hot Dot Productions在其令人印象深刻的404頁面中加入了“設計與技術相遇之處”(where design meets technology)的口號。404頁面上有三個由數百個小圓點組成的數字,這些小圓點會隨著訪問者滑鼠的移動而改變方向或分散。你可以自己在這裡嘗試一下。


20.樂高



在我們眼中,樂高不會做錯任何事(你讀過我們關於樂高如何將自己重塑為超級品牌的文章嗎?)我們喜歡這個可愛的404頁面,它用一些嚇人的樂高數字和一個無術語的解釋使事情變得簡單。


21.GitHub



你會期望從一個致力於程式碼版本控制的網站上看到一些技術奇蹟,當你移動滑鼠的時候,404頁面通過一個簡單的模仿《星球大戰》的效果來吸引不同型別的極客。GitHub還有一個不錯的500頁,可以在伺服器崩潰時使用。


22.CSS忍者



網站設計世界喜歡忍者,通常是自封的工作頭銜的一部分。CSS Ninjas的404頁面順應了這一潮流(我們猜,它的名字也是如此),它的特點是簡潔、有風格的插圖,反映了網站的總體設計思路。


23.MailChimp



2018年秋,超時尚的電子郵件通訊服務MailChimp進行了網站設計改版,其404頁面也進行了更新。新外觀的錯誤頁面上的功能是圍繞MailChimp的新品牌中心的不合時宜的,天真的插圖。說真的,說“我迷路了”,有什麼比一頭腦袋埋在洞裡的驢子更合適呢?


24.Volta鞋類



圖片:沃爾特


Volta是一家位於米蘭的鞋店,它的網站包含了很多很酷的UI設計,我們喜歡它不僅僅是一個標準的404頁面。高質量,專注的產品攝影與一個古怪的觸控-一個微型大理石雕像,點頭到旗艦店的義大利家-幫助提升這個錯誤的頁面。


25.佈雷特·維克多



電腦科學家Bret Victor的404頁面,當然是受到Rene Magritte的標誌性畫作《影象的背叛》的啟發,向觀眾提出了一些富有挑戰性的哲學問題。如果這不是一頁,那它是什麼?什麼是“頁面”?它是一種可以真正說存在的東西嗎?這個明顯沒有頁面的“this”指的是什麼?有什麼是真的嗎?讓你覺得不是嗎?


26.IMDb


另一個很棒的基於電影的404錯誤頁面可以在IMDb網站上找到,這個全面的電影事實資料庫在其404頁面上添加了一些著名電影的經典臺詞,並對其進行了巧妙的編輯,以適應其新的用途。看看你得到了什麼。


27.bit.ly



圖片:Bitly的


404頁面的連結縮短服務位,ly的特色是一條可愛的河豚魚在互動的海洋中上下翻騰。擱淺的魚會對你的滑鼠移動做出反應,而云朵和海鷗中微妙的動畫細節有助於營造一種平靜的情緒。


28.DropBox



DropBox取代了多年來裝飾其404頁面的埃舍爾式的“不可能的盒子”,取而代之的是一幅同樣古怪的插畫。我們喜歡把所有出錯的事情都抽象地表現出來——輪子掉了。這是一個漂亮的、簡單的手繪插圖,它很好地傳達了資訊,並提供了大量有用的導航連結,為頂級使用者提供了體驗。


29.eHarmony



當你在尋找愛情的時候,你最不想聽到的就是:你找不到它。線上婚戀網站eHarmony的404頁面顯示,雖然你所訪問的頁面無法訪問,但海里還有大約50萬條魚。


30.星巴克



星巴克充分利用其主要產品來說明其404資訊,在這個例子中,丟失咖啡杯的“洩密”標誌被用來講述這個故事,還有一些無術語的拷貝來幫助使用者找到他們想要的。


31.暴雪娛樂公司



視訊遊戲開發商暴雪對其404頁面採取了獨創的方式,在它,工作的網站設計似乎已經成為破碎:標題導航下降,有一個破碎的螢幕效果。沒有太多有用的連結,相反,暴雪選擇了一個嚴肅的錯誤資訊:“這個頁面不存在或其他一些可怕的錯誤已經發生”。