• 
• 
• 
• 
• 
• 
• 

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

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

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

下面從一個(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ù)情況是普通用戶看到。工程師調(diào)試的時(shí)候可能看到。 　　2.什么情況下看到這個(gè)錯(cuò)誤頁(yè)面？ 　　可能出現(xiàn)錯(cuò)誤頁(yè)面的原因有： 　　1.鏈接失效，內(nèi)容被刪除或轉(zhuǎn)移 　　2.鏈接根本不存在，404錯(cuò)誤 　　3.程序造成的bug 　　3.我們想讓看到的人做些什么？ 　　1.告訴用戶出現(xiàn)錯(cuò)誤 　　2.可能需要用戶的反饋。 　　3.給一個(gè)有用的鏈接 　　因此我們基于以上的分析，我們考慮得到以下的一些結(jié)論： 　　1.首先這個(gè)錯(cuò)誤頁(yè)面要是簡(jiǎn)潔明了的說(shuō)明錯(cuò)誤的?？梢园ㄒ粋€(gè)小的圖片，為什么要包括圖片呢？因?yàn)橐曈X(jué)上的圖形會(huì)給用戶一個(gè)非常直觀的印象，恩，這里出錯(cuò)了。但是圖片又不能太大，因?yàn)閳D片加載需要時(shí)間，如果出現(xiàn)圖片還在加載的時(shí)候，就失去了給用戶第一視覺(jué)的沖擊。比較優(yōu)秀的這個(gè)方面的例子，我們參考了： 　　1.last.fm 　　2.淘寶網(wǎng) 　　2.其次，提示語(yǔ)言要簡(jiǎn)單，也可以比較人性化。但是詳細(xì)信息可以不出現(xiàn)，因?yàn)橐玫竭@個(gè)詳細(xì)信息的用戶太少，而且會(huì)造成整個(gè)頁(yè)面的復(fù)雜，和視覺(jué)噪音。 　　3.我們同時(shí)也希望得到一些用戶的反饋，這時(shí)我們可以考慮是否讓用戶發(fā)送錯(cuò)誤信息給我們。但是因?yàn)槿绻呛?jiǎn)單的放置錯(cuò)誤信息，給出幫助中心的link。會(huì)造成用戶的操作很復(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)擊的按鈕，用戶點(diǎn)擊，錯(cuò)誤信息會(huì)直接發(fā)送到后臺(tái)。 　　1.yuhou.cn 　　4.最后，我們希望告訴用戶還可以去哪里？給他們一些可能有用訪問(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ù)雜。不利于用戶的選擇。因?yàn)橛脩粼谶x擇的時(shí)候，你給用戶一個(gè)鏈接，用戶可能點(diǎn)擊，但是如果你給它10個(gè)link。用戶可能就放棄了點(diǎn)擊的欲望，因?yàn)橛脩舨恢廊绾芜x擇。需要閱讀，思考。到點(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是寫死在頁(yè)面內(nèi)部的，因?yàn)殄e(cuò)誤的情況可能造成css也加載不全。所以寫死在頁(yè)面內(nèi)部是一個(gè)最保險(xiǎn)的情況。 　　因此，我們最后的成型的設(shè)計(jì)包含了3類頁(yè)面： 　　1.已知錯(cuò)誤頁(yè)面，包括被刪除，頁(yè)面不存在等等。 　　2.程序bug的錯(cuò)誤頁(yè)面。用戶可以選擇去提交這個(gè)錯(cuò)誤，但是操作非常方便。 　　3.未登錄或者權(quán)限不夠的錯(cuò)誤頁(yè)面，直接跳轉(zhuǎn)到login，給出紅色的字提示。 　　以上僅為自己的一些思考。不對(duì)地方請(qǐng)指正。

設(shè)計(jì)一個(gè)好用的錯(cuò)誤頁(yè)面相關(guān)標(biāo)簽：開(kāi)發(fā)網(wǎng)站，網(wǎng)站制作，網(wǎng)站開(kāi)發(fā)，網(wǎng)頁(yè)設(shè)計(jì)

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

公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談 網(wǎng)頁(yè)設(shè)計(jì)：如何確定網(wǎng)站 微信營(yíng)銷推廣的特性-奈 什么是自助建站？ 如何從營(yíng)銷的角度策劃建 建網(wǎng)站必備六步 基本搜索引擎優(yōu)化策略 新人做站之網(wǎng)站定位與網(wǎng) Web頁(yè)面設(shè)計(jì)原則 個(gè)人網(wǎng)站站長(zhǎng)看過(guò)來(lái)網(wǎng)站 網(wǎng)站設(shè)計(jì)中的簡(jiǎn)潔與簡(jiǎn)單 以“產(chǎn)品”思維搭建網(wǎng)站 關(guān)于VIP用戶研究與產(chǎn) 營(yíng)銷型網(wǎng)站優(yōu)化需要注意 如何制作友情連接？做友 網(wǎng)站建設(shè)目標(biāo)分析 如何 如何創(chuàng)建一個(gè)新的網(wǎng)站 8個(gè)實(shí)用的友情鏈接技巧 個(gè)人網(wǎng)站如何制作才能成 網(wǎng)站搜索引擎優(yōu)化指南 網(wǎng)站描述怎么寫？ 如何提高自己網(wǎng)站的流量 網(wǎng)頁(yè)文案設(shè)計(jì)淺談 個(gè)人如何做網(wǎng)站 深底色頁(yè)面設(shè)計(jì)指南設(shè)計(jì) 網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)的注意要點(diǎn) 網(wǎng)站制作簡(jiǎn)易流程介紹 什么是營(yíng)銷型網(wǎng)站 如何向必應(yīng)提交網(wǎng)站地圖 如何建立個(gè)人網(wǎng)站? 自助建站

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(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ū)信息港 山東在線門戶