網頁設計指南:如何設計出優秀的404頁面

網頁設計指南:如何設計出優秀的404頁面 - 網頁設計, 網站設計, 網頁方案, Website Design, 網絡推廣

對用戶來說,上網衝浪時最不想見到什麼?沒錯,就是404錯誤頁面,當你見到它的那刻,明明愉悅的心情會在1秒內切換為氣憤、沮喪、失望等消極情緒。如果要說世界上最糟糕的用戶體驗是什麼?404頁面應該可以和彈窗並列。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

但大多時候我們無法避免404頁面的出現,於是很多設計師都會在404頁面設計上花費很多心機,設計出非常有創意404錯誤頁面,讓用戶在網站里迷失方向時能獲得歸屬感,並儘可能減少挫敗感。

如何設計出優秀的404頁面?

① 404頁面設計的目的

404頁面的目的是告訴用戶所請求的頁面不存在或鏈接錯誤,同時引導用戶進入網站其他頁面,而不是直接關閉頁面離開。

因此,404頁面設計不應該轉移用戶的注意力,儘管大多數用戶都認為404頁面非常惱人,而是幫助用戶找到他們需要的東西如嘗試引導用戶進入相關內容的頁面,避免用戶跳轉到其他網站。

此外,大多用戶遇到404頁面都是「打開方式不對」造成,如果404頁面能幫助用戶達成目標,用戶可能會改變對網站的看法,並留下深刻的印象,繼而獲得一個建立並強化品牌的機會。

② 404頁面設計包含的內容

● 社交媒體

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

在404頁面上添加社交媒體標籤,可以在用戶無法藉由網頁解決問題的情況下,通過社交媒體與其他用戶進行互動,藉此找到解決方法。

● 重要頁面鏈接

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

404頁面設置搜索功能,及添加用戶經常訪問的頁面鏈接、返回首頁鏈接、關於我們鏈接,以及聯繫我們鏈接等,能很好地起到引流得作用。

另外,千萬別將整個網站地圖放置到404頁面上,本來用戶就沒有在這裡找到想要的內容,如果還要繼續在數十個鏈接中找想要的東西,他們會崩潰的。

● 提供在線聯繫方式

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

在404頁面中提供讓用戶留言的溝通方式,讓用戶通過留下聯繫方式、碰到的問題或試圖尋找的信息和內容等,同時以最短的時間反饋給用戶,這會讓用戶對網站的印象加分不少。

如果網站本身屬於電商類網站,添加在線客服按鈕,讓用戶直接與客戶進行在線溝通,還有機會挽留更多訂單。

● 幽默動畫

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

當用戶進入404頁面時,在頁面上嵌入幽默且生動的動畫,為用戶介紹網站或引導用戶進入頁面,能有效緩解用戶因無法打開頁面的抵觸情緒。

但要注意把握好「幽默」的度,有時幽默是帶動氣氛的調味劑,能讓用戶感到驚喜而又不覺得失禮;但太過就會讓用戶感到輕浮,沒有安全感。

③ 優秀的404頁面類型

○ 插畫設計:鮮明的色彩加上有趣的形狀,生動地向用戶傳達「頁面鏈接的錯誤是一場美麗的意外」的信息。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

○ 圖形化設計:404與圖形元素巧妙,將原本死氣沉沉的報錯界面,瞬間變得趣味十足。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

○ 展示場景:充分發揮想像力,為404頁面創建一個能觸動情緒的故事場景,能讓原本正抓狂的用戶平靜下來。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

○ 象徵手法:藉助一些視覺元素,如未插好的插頭、斷掉的鉛筆、缺了一塊的西瓜……向用戶傳遞404信息,非常有創意。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

○ 動效設計:有趣好玩的動態效果能讓用戶瞬間心情大悅,忘記404頁面的存在。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

○ 情感化設計:藉助可愛的形象來表達404頁面所帶來的悲傷情緒,能很好地起到情緒共鳴的作用。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

○ 充分利用影像:在404這個令人煩躁的頁面里,利用精美好的圖片能吸引人的注意力,有效緩解人們鬱悶的情緒。

網頁設計指南:如何設計出優秀的404頁面
網頁設計指南

優秀的404錯誤頁面,從能讓用戶在網站迷失方向的時候,緩解他們的挫敗感和焦慮感。但要如何設計出優秀的404頁面?這就需要設計師花很多心思,讓用戶被他們的創意所打動,而忘記404頁面所帶來的消極情緒。


香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk