【UI/UX設計乾貨】404頁面設計指南

做爲一名UX設計師，雖然有點難啓齒我夢想的案子就是去「設計一個404頁面」，不過404頁面的設計確實跟用戶體驗息息相關。咱們使用產品的過程當中，不可避免會出錯，那至少會有一個界面在此時提供一些有價值的信息。

在最近我參與的一個對UI和UX再設計的項目中，咱們從新評估了404頁面的信息，而且決定拋棄掉那些模糊晦澀、幾乎無用的語言。

藉此，我也想分享一些關於404頁面設計的技巧。用戶看到了好的404界面，會原諒這些錯誤，甚至會以爲你家產品頗具魅力，讓人忍俊不由。

瞭解技巧以前，咱們先來回顧下Jacob Nielsen的十大可用性設計原則，他提到：

幫助用戶識別、診斷錯誤，以及解決錯誤：錯誤信息應以簡單平實的語言（無代碼語言）來表示，準確指出問題，並建設性地提出解決方案。

踐行着這個原則，咱們可使用如下這些設計技巧。

避免使用行話

因爲技術層面引起的問題，就天然很容易使用技術術語來描述。不過不少時候，當你的用戶不是工程師時，他們會以爲這徹底就是一堆胡言亂語。用戶已經因找不到所需功能而感到沮喪，想象一下此時他們再遇到一次障礙時該有多痛苦吧。

 

 

谷歌的404在這裏也有點術語話，不過旁邊的機器人算是挽救了一下。

負起責任， 是「我」的錯

對於一個UX設計師來講，法則第一條：別讓用戶以爲是他們的錯，或者是他們搞砸了什麼事情。不少狀況下不會是他們的問題，但即便是他們的錯，咱們也能夠打打馬虎眼。主動去認可錯誤，向他們道歉：「很抱歉，咱們找不到該頁面。」

也能夠經過使用「哎呀」 「搓搓手」 這樣的生活化措辭來表示你的同理心和關懷。

 

Natwest 在「道歉」上就作得很好，並且提供了有效建議

簡潔、溫柔、具體

在404頁面解釋問題發生的緣由時，文案應該知足「可以跳讀」的標準，即應該保持簡短和直擊重點。

正如我將在稍後介紹的那樣，404頁面是添加一些趣味元素的好機會，但首先，咱們須要說明出錯的緣由。此外，若是你知道錯誤發生的根本緣由（好比找不到頁面，或者因爲頁面長時間打開而致使會話過時），清楚地告訴用戶。

 

 Innocent drinks 的「404」頁面，跟品牌調性也符合。

考慮產品語調

思考你的目標受衆和品牌形象，來保證設計的「一致性」。好比說，語言的風格能夠適應目標人羣的使用習慣。若是你的品牌調性是有趣的，你的404頁面語言風格也能夠是好玩的。

 

Asos的404頁面乾淨，簡單，無多餘的裝飾，與總體品牌調性一致

增添一些指導信息

若是錯誤緣由很是明晰，一般有一些方法能夠解決這個問題。你能夠添加一個「返回」的按鈕，或者一些連接，讓他們跳回安全頁面；也能夠是一系列指導，教給用戶本身解決問題，好比刷新頁面、清空緩存，或者少在鍵盤前面邊吃餅乾邊掉餅乾屑……

 

Dropbox的404頁面提供了一些有用的連接

錦上添花的愉悅感

這一部分纔是有意思的。如今你添加了與用戶相關的消息，明確說明了問題，還提供了指導，是時候作一些錦上添花的事兒了：有趣的視覺元素，帶點幽默感的文案，讓用戶笑出聲來是最好了。

若是大家公司有吉祥物或漫畫形象，那404頁面也是發揮他們存在感的地方。即便沒有，一個笑話、雙關語、表情包都是不錯的選擇。時刻記得品牌調性，404頁面也是其展示平臺。

 

 Airbnb 的404頁面，配有可愛的動畫

棘手的事情才能考驗咱們解決問題的能力。若是你把一件糟糕的事情描述得「萌」一點，你的用戶也會更能與你共情，甚至欣賞你。

---

此文由墨刀編譯自 Katerina Samoilis 的 How to create great error pages.已聯繫容許轉載。

剛開始在網站上看到這篇文章的英文版本寫的很是好，但是因爲太多術語，沒有翻譯的太好…今天看到墨刀公衆號前兩天推送了這篇文章的翻譯版本，因此想在這裏分享給你們哈哈~