一個有趣的404頁面,是如何體現的?

2020-11-24 人人都是..

有趣的404頁面能緩解用戶的焦慮和挫敗感，那麼一個有趣的404頁面，是如何體現的？

【天天問每周精選】第102期：你見過哪些有趣的404頁面，是如何體現的？

以下內容來自天天問用戶：@Jasmine @JaylonG @joe @CHIN_PM @小u @請叫我馬小胖 @月半小閣 @九久玖

404頁面，指的是顯示網站錯誤連結的頁面，可能是該訪問的頁面不存在，也可能是頁面已經被刪除。出現404異常狀態，用戶體驗可能不佳，但有趣的404頁面能緩解用戶的焦慮和挫敗感。於是許多網站/App各出奇招，出現了不少讓人眼前一亮的404頁面。

01

那麼在了解「一個有趣的404頁面，是如何體現的？」之前，先了解幾個在做這類頁面設計時會考慮的問題：

  • 問題一：為什麼會存在404頁面？
  • 問題二：什麼人群會看到404頁面？
  • 問題三：404頁面的作用
  • 問題四：404頁面的表現形式

通過以上流程的思考，能夠幫助避免主觀盲目設計這類頁面。

問題一和問題二幫我們界定404頁面存在的狀況以及人群，具體要通過用戶體驗以及調研去得到具體的答案。大概來說，一般看到404頁面的人群，基本也屬於「網絡情況問題」和「產品本身問題」，但是他們都有個相同的特徵，就是在「需要你的時候，你掛了」。

所以問題三，404頁面存在的作用有兩個：

  1. 緩解用戶當前遇到的問題所產生的焦慮
  2. 解決用戶當前所遇到的問題

我們應該從問題一到問題三來思考404頁面的表現形式，而不是說自認為越炫越好，首先要意識到這個頁面是因什麼而存在，存在又是為了什麼。如果你不能思考到這個問題，那你的設計是盲目的。

02

接下來就到了如何定義表現形式了。在研究分析了幾十款404頁面設計之後，發現優秀的設計方式都包含下列元素：圖形（動畫）+文字+（操作按鈕）

  1. 圖形——品牌形象/可愛形象等——緩解轉移用戶焦點
  2. 動畫——品牌形象——緩解用戶焦慮
  3. 文字——提示問題/引導操作——給出解決方案
  4. 遊戲/互動——互動性引導——緩解用戶焦慮
  5. 按鈕——引導操作——（視情況而定）

因此，綜合以上這些元素，可以把有趣的404頁面分為以下幾類展現方式：轉移注意力法、隱喻手法、平鋪直敘法、遊戲娛樂法、自嘲手法。

1. 轉移注意力法

這種方法將404頁面視作可被利用的空間，來呈現公益信息，這種方法暫時減弱了用戶對產品的憤怒，將注意力轉向對弱勢群體或社會問題的關心，側面感受產品的社會價值，這種方法適用於社會公益性質或相關業務的產品。

比如騰訊公益的404頁面，這個項目的靈感源於歐洲失蹤兒童聯合會主導的，名為「NotFound Project」的網絡公益工程。就是利用404頁面展示那些被拐賣兒童、失蹤兒童的信息，幫助那些孩子重新找到家人。

比如丁香園的404頁面，文案是「你所訪問的頁面就如那些遇害的同道，已離我們遠去。」下面還會有這些白衣天使的照片和名字。以這樣的方式悼念亡者，也側面展現了丁香園的社會價值。

2. 隱喻手法

這是一種很藝術很委婉的方式，404這幾個大字太平鋪直敘，缺少細細品味和想像的餘地。隱喻手法運用現實中的事物對404的意義進行比喻，具有藝術審美價值，適合產品品牌介紹網頁。

將產品的形象融入到404頁面，也是一個不錯的法子，不僅顯得有趣，提高了用戶體驗，也提升了品牌認知。像之前收集過的一張棒球網站404，同時也可以延伸出許多靈感，例如：足球類產品404可以放張守球失敗相關圖片，而籃球可以放張「三不沾」的照片，結合自身產品以此類推。也可以根據不同行業，在提示信息中加入行業詞語，例如：教育類的「老師累了，需要休息，請稍後再來哦」.

3. 平鋪直敘法

這種方法雖然沒有藝術性，沒有幽默感或者社會意義，但也是最負責的表達方式，直接告知用戶頁面出現了問題，導致問題的原因有哪些，聚焦於如何解決404頁面問題，適合效率為主的產品，例如電商類產品。

4. 遊戲娛樂法

遊戲可以促進多巴胺產生，玩遊戲或有趣的交互互動，可以激發快樂感受，這種方法可能消耗較多開發和設計人力，用戶體驗價值也難以量化，所以慎用吧。

一個典型的慄子是谷歌404小恐龍。呆萌的小恐龍趣味性十足，網上還有用戶發布了谷歌404小恐龍教程，像這類小遊戲404應用的網站也比較多。

5. 自嘲手法

這種方式一般會將產品擬人化，採用用戶熟悉的人物形象，用偏幽默的方式告知用戶頁面崩了，有點像喜劇中自嘲的手段，逗樂用戶，創造積極體驗。適合娛樂類產品，例如電影類網站等。

結語

無論如何，404頁面之所以出現，是因為沒有滿足用戶需求。所以不管做得再怎麼好玩有趣，原本該出來的沒有出來，用戶想知道的沒有知道，做得再好玩也都是本末倒置的。

404頁面如同你在跟女神表白，表達了你想跟她在一起的需求，但她拒絕了你。把404頁面做得有趣，就有點像女神在委婉拒絕，話說得再好聽，拒絕了就是拒絕了，終究是會影響用戶體驗的。

那麼有趣的404頁面存在的意義，大概是「雖然女神拒絕了我，但不妨礙她有趣的靈魂會一直吸引我」。

你還見到過哪些有趣的404頁面？點擊下面的連結，一起來分享吧~

更多精彩回覆：http://996.pm/zL5XV

相關閱讀

【天天問每周精選】第101期：如果支付寶和微信只能留一個，你留哪個？為什麼？

【天天問每周精選】第100期：你會為互動職場劇哪一環節（如面試/工作/離職）設置怎樣的互動，來擊中用戶的興奮點？

【天天問每周精選】第99期：什麼樣的場景，才能讓用戶心甘情願購買付費會員？

【天天問每周精選】第98期：為什麼長文網站需要點擊「閱讀更多」，才能看到全部內容？

【天天問每周精選】第97期：微博和抖音之間，為何會有「是否自動跳轉到下一視頻」的設計差異？

素材來源：天天問話題精選

「天天問」為人人都是產品經理社區旗下的互助問答模塊，致力產品、運營、營銷等領域知識的學習交流。

本欄目由天天問運營 @Ella 整理編輯發布，歡迎大家踴躍提問，一起交流。

題圖源於網絡

相關焦點

  • 404 的傳說:你訪問的頁面找不到了!
    （你對這個頁面也許不陌生）這樣的說法讓「 404 錯誤」的傳奇色彩蕩然無存，可能會讓很多人失望吧。不過自從網際網路誕生以來，設計師們為了讓你不會因為錯誤訪問而對網站失望，在 404 頁面上花了不少功夫，而 404 頁面的變化也是網際網路交互形式發展的一個剪影。下面愛範兒帶你來看看中外網站那些有趣的 404 頁面。
  • 如何修復WordPress 404頁面「Not Found」錯誤
    如果沒有正確維護，您通常會在您的網站上遇到WordPress 404頁面錯誤。但有時候您的網站處於維護狀態，您的訪問者也會自動轉到404錯誤頁面。你是否也遇到過WordPress 404錯誤？不要害怕，wpnicer為您提供解決方案。
  • 16款優秀的網站404錯誤頁面HTML模板-站長之家
    站長之家（CHINAZ.com）3月20日編譯：404錯誤頁面是一個非常普遍的現象，該頁面的目的是告訴瀏覽者其所請求的頁面不存在或連結錯誤，同時引導用戶使用網站其他頁面而不是關閉窗口離開。
  • 【遊俠導讀】404錯誤頁面是伺服器接到瀏覽器訪問請求後返回的狀態...
    404錯誤頁面是伺服器接到瀏覽器訪問請求後返回的狀態碼（伺服器信息頭），不同的代碼有著不同的含義，但是它們都是告訴你一件事，出錯了！這個頁面打不開了！
  • 科技公益404頁面變身失蹤兒童尋人啟事
    科技也公益：404頁面變身失蹤小孩告示你一天能在網上看到多少404錯誤頁面？為什麼不充分利用一下這種資源呢？現在，你可以用它幫助別人尋找失蹤的孩子。NotFound Project是由Missing Children Europe和European Federation for Missing and Sexually Exploited Children等公益組織聯合發起的一個項目，他們希望利用閒置不用的網絡空間發揮公益的力量：讓更多人幫忙尋找失蹤兒童。
  • NotFound計劃:把404頁面換成尋找丟失小孩的公告 | 雷鋒網
    Missing Children Europe和Child Focus打算與網站合作把他們的404錯誤頁面換成尋找丟失或受性虐兒童的公告。這些組織說在歐盟每年都有數千個兒童丟失，到目前為止找到他們並帶回安全地方最有效的辦法就是張貼他們的照片。NotFound計劃由總部設於布魯塞爾的廣告機構Famous管理。
  • 網站出現 404 錯誤時應如何處理?-站長之家
    一個網站想要長久地擁有良好的排名，必須做好平時網站問題的排查工作。比如，網站出現了404、 503 等訪問錯誤，站長們需要了解清楚其出現的原因和快速解決的方法。下面文章內容是針對網站出現 404 錯誤時應如何處理的介紹。
  • 404錯誤頁面幫找失蹤兒童:公益域名NotFound.org亮了-站長之家
    404錯誤頁面幫找失蹤兒童：公益域名NotFound.org亮了 易名中國（eName.cn）9月28日訊，據悉，Missing Children Europe和European Federation
  • 404Error:這部片子告訴你,那些打不開的頁面背後都藏著什麼秘密
    比如，當你興致勃勃地單擊了一個信息量爆表的標題，彈出來的卻是「404Error 你訪問的頁面不存在」……有多少人每次看了這個頁面會忍不住想掀桌子？終於，有人站出來意淫這個萬惡的404了，還帶了部片子——《404次元》。
  • 為什麼我的上傳的數據會「404 No Found」?
    大家在上網的時候，一定經歷過404 No Found（無法找到頁面）的情景。出現頁面404的原因有很多，有可能是在伺服器停了，有可能是伺服器因為一些外部原因而壞掉了。 但不管如何，儲存在這個頁面的數據已經消失了，再也無法找回。
  • 網站伺服器經常性出現404錯誤的解決方案
    網絡上瀏覽頁面呈現的過錯連結提示多種多樣，呈現404notfound也算是一個很普遍的問題，信任上網族都遇到過該情況，當咱們翻開某網頁時會呈現提示：404NotFound，看到該頁面心境本就糟糕了，404notfound首要用於瀏覽器無法抓取網頁內的信息，是引導讀者繼續瀏覽網站其他頁面仍是什麼都不做
  • 什麼是「404 Not Found」?為什麼會出現?意思不僅僅是未找到
    第一個數字表示客戶端錯誤，比如一個錯誤的網址，伺服器基本在表示無法理解錯誤的語法請求，但允許經過修改後提出後續請求。後面兩位數字表示該類錯誤的具體類型，所以在這裡」04″代表著伺服器找不到任何與請求匹配的內容，並無法得知這種情況是暫時還是永久的。「未找到」只是一個由HTTP規範定義的能讓一般人理解的解釋用語，但是這部分可以被修改甚至去掉。
  • 必應搜索, 深度踐行「404公益」
    （1月31日，北京）近日，必應搜索與「益雲公益」社會創新中心等機構聯合推出「404公益「行動，並成為該活動的特別支持方。必應搜索不僅將在404錯誤頁面放置公益廣告幫助失蹤兒童回家，而且成為率先將公益信息更加深入地整合到搜索結果中的搜尋引擎。
  • 404,一個在中國地圖不存在的城市
    原標題：尋找404城的前世今生404的誕生，與中國核工業的發展有著密切的聯繫，因此它的存在長久以來都是被嚴格保密的。在神秘的404，建成過中國第一個軍用核反應堆，也曾造出原子彈。1996年，中華人民共和國政府鄭重宣布：從當年7月30日起暫停核試驗。這個代號404，幾乎全封閉的半軍事化小城，只能保持著高度的秩序化，在仿佛凝固的時間裡，褪盡榮耀後沉寂。
  • 404 not found是什麼鬼?怎麼解決!_網易訂閱
    08 16:22:38　來源: 酷我科技交流小站 舉報 　　大家在瀏覽網頁時經常會遇到網頁404
  • 為什麼老遇上404 not found?你懂的
    學霸在網上衝浪多年留下的都是美好的回憶除了一個噩夢般的存在——404錯誤頁面又稱「網際網路的最後一頁」因為404就是一個網站的墓志銘啊嗯……這404吧404並不是一個人在戰鬥它背後有一個龐大的「錯誤家族」其兄弟姐妹還包括了
  • 谷歌新計劃:跟「404 Not Found」說拜拜-404,Not found,谷歌...
    上網時，恐怕沒有什麼比遇到「404 Not Fonud」更讓人蛋碎的事情了，不過現在谷歌正在嘗試解決之。谷歌為此計劃推出了名為「Service Workers」的全新 WEB 瀏覽器標準，其目的在於讓本地可以存儲更多的頁面信息，只要瀏覽器使用者同意，網頁就會在本地建立高速的數據緩存，尤其是已經訪問過的網頁。因此，即使網際網路連接已經斷開，用戶仍然能夠看到舊的離線內容，而不是可怕的「404 Not Fonud」頁面信息。
  • 【極客人物】404 not found 背後的布道師 | 極客公園
    2013 年 5 月 12 日，濟南市一個 8 歲的小女孩鈺鈺失蹤，父母立即報了案，騰訊 404 公益頁面上很快掛出失蹤信息。9 天后，鈺鈺的屍體被警察在一個樹林找到，她的媽媽聽到噩耗後哭倒在床上久久不能站立。404 公益頁面的志願者 lily 在網上搜索到該事件的報導，得知這個女孩已經是該家庭失去的第二個孩子，「如果能再早一點找到她就好了。」
  • 404,505,502究竟代表什麼含義?別再讓你的網頁再走丟了!
    當你滿懷期待、迫不及待 地要點擊紅色的「確定購買」按鈕時，卻彈出：404 Not Found氣憤又無奈的同時，瘋狂刷新總算頁面上終於不是404了卻看到：502 Bad這惱人的頁面我們又該如何應對？今天小編就來帶大家一探究竟吧！其實，剛剛提到的這些數字都屬於HTTP狀態碼。它是用以返回伺服器對客戶端的請求的響應狀態的數字代碼。所有狀態碼的第一個數字代表了響應的狀態。
  • 出現網頁錯誤時,數字502、404等分別是什麼意思? - 北京科學中心
    平時，我們在瀏覽網頁時也偶爾會遇到寫有502的報錯頁面，更多時候會出現404錯誤頁面，那麼它們到底是什麼意思呢？我們來一探究竟吧。上網需要哪些過程在此之前，我們先來了解一下，登陸一個網頁，計算機後臺都需要哪些步驟？