• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 設(shè)計(jì)一個(gè)好用的錯(cuò)誤頁(yè)面

設(shè)計(jì)一個(gè)好用的錯(cuò)誤頁(yè)面

奈薇網(wǎng)頁(yè)設(shè)計(jì) 于2019-08-15 18:42發(fā)表 閱讀次數(shù) 2488次

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

設(shè)計(jì)一個(gè)好用的錯(cuò)誤頁(yè)面相關(guān)標(biāo)簽：企業(yè)網(wǎng)站建設(shè)，網(wǎng)站建設(shè)，網(wǎng)站建設(shè)方案，企業(yè)網(wǎng)站制作

相關(guān)熱點(diǎn)推薦

如何提高網(wǎng)站的用戶(hù)體驗(yàn) 網(wǎng)站設(shè)計(jì)趨勢(shì)-互動(dòng)站細(xì) 網(wǎng)站優(yōu)化的真諦到底是什 網(wǎng)站設(shè)計(jì)如何做好風(fēng)格統(tǒng) 如何做網(wǎng)頁(yè)設(shè)計(jì)的10個(gè) 跨境電商稅改新政實(shí)施 影響網(wǎng)站排名的因素有哪 10個(gè)重要的網(wǎng)頁(yè)設(shè)計(jì)技 博客論壇推廣技巧優(yōu)化網(wǎng) 企業(yè)網(wǎng)站推廣怎么做 網(wǎng)站建設(shè)中企業(yè)所面臨的 青島企業(yè)網(wǎng)站建設(shè) 快照又回到以前的了，是 40種網(wǎng)站設(shè)計(jì)常用技巧 History.bac 建立網(wǎng)站的好處 怎樣衡量網(wǎng)站用戶(hù)的價(jià)值 建站要向你熟悉的行業(yè)前 《設(shè)計(jì)師談網(wǎng)頁(yè)設(shè)計(jì)思維 網(wǎng)站形成視覺(jué)沖擊的幾種 網(wǎng)站：首頁(yè)所應(yīng)該達(dá)到的 一家公司的網(wǎng)站應(yīng)該有哪 怎樣交換友情鏈接 企業(yè)建站系統(tǒng) 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計(jì)的思考網(wǎng)頁(yè)版面 靈感創(chuàng)意的八種簡(jiǎn)潔網(wǎng)頁(yè) 網(wǎng)站優(yōu)化站內(nèi)很重要 微信紅包里的錢(qián)“去哪了 網(wǎng)站優(yōu)化目標(biāo)及意義 外部鏈接的優(yōu)化之一 黃島網(wǎng)站建設(shè) nev.cn奈薇網(wǎng)站開(kāi) 企業(yè)建站關(guān)鍵注意事項(xiàng) 網(wǎng)頁(yè)界面設(shè)計(jì)教程六：版 網(wǎng)站設(shè)計(jì)的方塊元素該如 網(wǎng)站設(shè)計(jì)和圖形用戶(hù)界面 人機(jī)交互界面設(shè)計(jì)的三個(gè) 最接近真機(jī)的iPhon

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專(zhuān)業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線(xiàn)門(mén)戶(hù)