Downloaded 11 times
Uploaded byiProspect
Design for 404 error pages
本文探讨了如何通过设计不同风格的404错误页面来改善用户体验，方案包括幽默、互动、品牌传播等多种设计风格。作者提供了实际案例和设计风格建议，旨在增强用户满意度并减少网站跳出率。文中还提到了一些具体的建议，如链接到热门内容和添加搜索框，以提高404页面的有效性。
Design for 404 error pages
- 1. 【別讓你的 404 錯誤頁面繼續NG 下去了！】 Prepare by : WIS 社群編輯室 Neal Liou Date: 2015 / 05 / 21
- 2. 前言 曾經瀏覽網站時出現「找不到網頁」的窘境嗎？當網站出現錯誤 提示時，不僅會降低網友的好感度與信任度，更容易讓網友產生 不好的使用者經驗 (User Experience)，我們可以利用網頁設計的方 式，將404 錯誤頁面 (404 error pages) 搭景成不同風貌，就能預防 網友狠心跳出。因此我們特別整理幾種不同 404 錯誤頁面的設計 風格以及實際網站給大家參考，希望大家都能從中獲得設計靈感。
- 3. Design Style #1 使網友會心一笑 Emotion Style 這種設計方式雖然老梗，但藉由流行文化 的圖文搭配與網友產生情感連結，可以使 網友會心一笑。
- 4. 1 Magnt 利用數學交集概念分享產生 404 錯誤頁面的因果關係。 2Worrydream 以煙斗的方式，運用 Pop 流行文 化與 404 錯誤頁面結合。 點擊圖片能夠瀏覽範例網站！
- 5. Design Style #2 搶眼視覺效果 分散網友注意力 Visualization Style 發揮藝術天分將 404 錯誤頁面加入多元素材， 使 404 錯誤頁面看起來獨樹一格。有時候這 種些微的改變，就可能改變網友的想法。
- 6. 1 Huwshimi 2Worrydream 利用詼諧的元素取悅網友。 忍者表示： 「網頁是我偷的！」 加入色彩繪畫的元素，讓 404 錯誤 頁面可以更生動有趣。 點擊圖片能夠瀏覽範例網站！
- 7. Design Style #3 以互動的方式 提升網友停留時間 Interaction Style 透過遊戲的方式與網友互動，消磨網友等待 時間為企業網站爭取更多時間，協助網友指 向正確頁面。
- 8. 長時間的互動，使網友消氣與殺時間 1 Blue FountainMedia 小時候的回憶，小精靈遊戲 居然出現在 404 錯誤頁面！ 2 Hot Dot 點擊 404 就能破壞字體，讓進入 404 錯誤頁面的網友能夠消消氣。 點擊圖片能夠瀏覽範例網站！
- 9. 短暫互動後，網站將重新指向正確頁面 1 GitHub 移動滑鼠能與使網頁物件跟著移 動，有別於其他 404錯誤頁面。 2 Hakim EI Hattab 網頁陸續出現眼睛，並跟著滑 鼠移動方向而變化。 點擊圖片能夠瀏覽範例網站！
- 10. Design Style #4 危機反而是轉機 Branding Style 404 錯誤頁面也能增加品牌傳播的機會，只 要在 404 錯誤頁面中置入一個或更多其他元 素，與網友產生情感連結。
- 11. 1 LEGO 在 404錯誤頁面加入品牌元素，並告 知網友此網頁無法使用。 2 Worrydream 交友網站的 404 錯誤頁面利用修補愛 情關係的圖片來加增強品牌傳遞價值。 點擊圖片能夠瀏覽範例網站！
- 12. Design Style #5 另類的設計風格 Humor Style 另類的設計風格，往往出乎網友的意料之外， 而這種設計風格顛覆以往對 404 錯誤頁面的 印象，加深網友對網站的印象。
- 13. 這款 404 錯誤頁面最厲害...（笑） Nouveller 404錯誤頁面會出現 DOS 畫面，等網友輸入 之後，將以特定的圖片以及語言與網友互動。 點擊圖片能夠瀏覽範例網站！
- 14. 參考以下建議，讓 404 錯誤頁面更完整！ 1 連結至有趣的貼文： 建議網站人員將404 錯誤頁面重新 導向到網站最受歡迎的內容。 2 加入搜尋欄： 讓網友直接搜尋想獲得的相關資訊。 3 新增意見欄或聯絡信箱： 網友回饋、建議最直接，迴響的名 單也是企業必須追蹤的重點之一。
- 15. 添加回報功能： 協助網友可以即時回報錯誤，持續 提升使用者經驗。 6 4 解釋 404 錯誤頁面的原因： 讓404 錯誤頁面扮演公關發言人，透 過與網友分享網站遭遇的問題，降低 網友的疑慮，成功解決公關危機。 5 提供 Sitemap 的功能： 指引網友能夠在網站中找尋正確的網頁。
- 16. 圖片及參考資料 The art oferror: 12 clever 404 pages http://wis.tw/1AhZYsC 圖片來源 http://wis.tw/1HrVCyI http://wis.tw/1Fus83Y http://wis.tw/1JZocrH http://wis.tw/1Lk54pg
- 17.