下面從一個非常簡單的例子來說明如何設(shè)計一個好用的錯誤頁面。
例子是豆瓣網(wǎng)站的錯誤頁面，首先我們看現(xiàn)在的豆瓣的錯誤頁面，如下圖所示，整個頁面比較復(fù)雜，信息很多，包括了
1. “標(biāo)題”說明錯誤信息。
2. 具體的錯誤信息。
3. 可能造成的原因。
4. 你可以怎么做？
5. 詳細(xì)的錯誤信息
首先我們來回答下面三個問題：
1.誰會看到這個錯誤頁面？
絕大多數(shù)情況是普通用戶看到。工程師調(diào)試的時候可能看到。
2.什么情況下看到這個錯誤頁面？
可能出現(xiàn)錯誤頁面的原因有：
1.鏈接失效，內(nèi)容被刪除或轉(zhuǎn)移
2.鏈接根本不存在，404錯誤
3.程序造成的bug3.我們想讓看到的人做些什么？
1.告訴用戶出現(xiàn)錯誤
2.可能需要用戶的反饋。
3.給一個有用的鏈接
因此我們基于以上的分析，我們考慮得到以下的一些結(jié)論：
1. 首先這個錯誤頁面要是簡潔明了的說明錯誤的�？梢园ㄒ粋�小的圖片，為什么要包括圖片呢？因為視覺上的圖形會給用戶一個非常直觀的印象，恩，這里出錯了。但是圖片又不能太大，因為圖片加載需要時間，如果出現(xiàn)圖片還在加載的時候，就失去了給用戶第一視覺的沖擊。比較優(yōu)秀的這個方面的例子，我們參考了：
1. last.fm
2. 淘寶網(wǎng)
2. 其次，提示語言要簡單，也可以比較人性化。但是詳細(xì)信息可以不出現(xiàn)，因為要用到這個詳細(xì)信息的用戶太少，而且會造成整個頁面的復(fù)雜，和視覺噪音。
3. 我們同時也希望得到一些用戶的反饋，這時我們可以考慮是否讓用戶發(fā)送錯誤信息給我們。但是因為如果是簡單的放置錯誤信息，給出幫助中心的link。會造成用戶的操作很復(fù)雜，同時我們前面說過，詳細(xì)信息使用的人太少，因此，為5%的使用人數(shù)來造成95%的人的迷惑，這個是非常不值得的事情。這里我們參考了cooper.com的頁面設(shè)計，雖然他們是給出可以點擊的email鏈接。但是我們進(jìn)行了改進(jìn)，做成一個可以點擊的按鈕，用戶點擊，錯誤信息會直接發(fā)送到后臺。
1. cooper.com
4. 最后，我們希望告訴用戶還可以去哪里？給他們一些可能有用訪問的鏈接。在這里我們參考了很多的設(shè)計。比較正面的有：
1. digg.com
2. cooper.com
3. last.fm給出的鏈接太多。所以我們認(rèn)為是一個不好的設(shè)計。
4. taobao.com給出的link也太多，雖然進(jìn)行了分級的設(shè)置，但是我還是覺得過于復(fù)雜。不利于用戶的選擇。
因為用戶在選擇的時候，你給用戶一個鏈接，用戶可能點擊，但是如果你給它10個link。用戶可能就放棄了點擊的欲望，因為用戶不知道如何選擇。需要閱讀，思考。到點擊。這個我們認(rèn)為是一個非常不好的設(shè)計。
最后，我們?nèi)サ袅撕芏鄾]有用的，可以簡化的錯誤頁面。例如，評論轉(zhuǎn)成日記，活動轉(zhuǎn)成小組等。這些完全可以直接程序跳轉(zhuǎn)而不用經(jīng)過錯誤頁面，確切的說這些也不能算作錯誤。
其次，我們?nèi)サ袅巳绻枰顷懖拍茉L問的時候的錯誤頁面，而跳轉(zhuǎn)到登陸頁面，給出紅色的提示字符。
需要說明的是，這個頁面的css是寫死在頁面內(nèi)部的，因為錯誤的情況可能造成css也加載不全。所以寫死在頁面內(nèi)部是一個最保險的情況。
因此，我們最后的成型的設(shè)計包含了3類頁面：
1.已知錯誤頁面，包括被刪除，頁面不存在等等。
2.程序bug的錯誤頁面。用戶可以選擇去提交這個錯誤，但是操作非常方便。
3.未登錄或者權(quán)限不夠的錯誤頁面，直接跳轉(zhuǎn)到login，給出紅色的字提示。
以上僅為自己的一些思考。不對地方請指正。
粵公網(wǎng)安備 44010402000282號