網(wǎng)頁(yè)設(shè)計(jì)!說(shuō)說(shuō)404頁(yè)面該怎么設(shè)計(jì)?(2)

來(lái)源:designshack 作者:蔣燦 學(xué)習(xí):4110人次

3. 通往主頁(yè)和網(wǎng)站地圖的鏈接。這個(gè)設(shè)計(jì)要素中可以包含與網(wǎng)站其他部分搭配的標(biāo)題或腳注。

4. 其他簡(jiǎn)化信息。建議刪去復(fù)雜的導(dǎo)航功能。如果用戶進(jìn)入到錯(cuò)誤頁(yè)面,你只需為其提供簡(jiǎn)單幾個(gè)能夠?qū)蛘_位置的選項(xiàng)。如果選項(xiàng)過(guò)多,反而會(huì)讓用戶更加頭疼或者困惑。

5. 加入顯眼的操作提示。告訴用戶下一步如何操作。

讓404頁(yè)面具有用途

網(wǎng)頁(yè)設(shè)計(jì)!說(shuō)說(shuō)404頁(yè)面該怎么設(shè)計(jì)?

在考慮404頁(yè)面時(shí),設(shè)計(jì)流程中的一個(gè)重要部分就是用途。加入能夠讓頁(yè)面既好看又有用的功能。

對(duì)于自定義404頁(yè)面中應(yīng)當(dāng)包含哪些信息,Google的網(wǎng)站管理員工具中提供了一系列很有用的建議。這些建議包括:

明確告知用戶其所尋找的頁(yè)面無(wú)法找到。語(yǔ)言應(yīng)當(dāng)友善、誘人。404錯(cuò)誤頁(yè)面應(yīng)當(dāng)與網(wǎng)站其他部分的外觀和感覺(jué)相互匹配?紤]在其中添加通往熱門文章或帖子的鏈接。為用戶提供報(bào)告壞鏈接的渠道。讓網(wǎng)絡(luò)服務(wù)器在收到對(duì)丟失頁(yè)面的請(qǐng)求時(shí)返回實(shí)際的404 HTTP狀態(tài)代碼,以免其顯示在搜索結(jié)果中。使用Enhance 404工具在自定義404頁(yè)面中嵌入搜索框。使用Change of Address工具將網(wǎng)站的動(dòng)作告知Google。

除了上述之外,還有一條給設(shè)計(jì)師們的提示:發(fā)揮創(chuàng)意。404頁(yè)面,只要技術(shù)允許,不一定是很無(wú)聊無(wú)趣的。

設(shè)計(jì)具有目的性的404頁(yè)面

網(wǎng)頁(yè)設(shè)計(jì)!說(shuō)說(shuō)404頁(yè)面該怎么設(shè)計(jì)?

在考慮404錯(cuò)誤頁(yè)面的設(shè)計(jì)時(shí),首先應(yīng)思考其與網(wǎng)站其他部分直接的聯(lián)系。你網(wǎng)站整體設(shè)計(jì)的氛圍和基調(diào)是什么?404頁(yè)面如何才能與其搭配。

優(yōu)秀的錯(cuò)誤頁(yè)面應(yīng)當(dāng)能夠與其所處的網(wǎng)站無(wú)縫銜接。如果你的網(wǎng)站采用了明快幽默的基調(diào),則404頁(yè)面也應(yīng)當(dāng)如此。另外,在顏色和圖形使用上也應(yīng)當(dāng)與網(wǎng)站一致。但在設(shè)計(jì)過(guò)程中,一定要小心謹(jǐn)慎,不要把進(jìn)入錯(cuò)誤頁(yè)面的責(zé)任歸咎到用戶頭上。(這種情況發(fā)生的頻率絕對(duì)超出你的想象。)

錯(cuò)誤頁(yè)面的設(shè)計(jì)應(yīng)當(dāng)是整體設(shè)計(jì)方案中的一個(gè)組成部分。

    保持設(shè)計(jì)的一致性。使用與網(wǎng)站其他頁(yè)面相同的顏色、字體和圖形風(fēng)格。保留品牌標(biāo)識(shí)。使用相同的logo、標(biāo)題和腳注處理方式能夠幫助用戶識(shí)別你的網(wǎng)站。保持視覺(jué)上的簡(jiǎn)約。在錯(cuò)誤頁(yè)面上,少就是多。不要讓用戶滾動(dòng)鼠標(biāo)。設(shè)計(jì)應(yīng)該以一屏為限。不要使用太多噱頭。雖然與整體網(wǎng)站和品牌保持相同的基調(diào)和感覺(jué)是個(gè)好主意,但是過(guò)多的內(nèi)容反而會(huì)讓用戶忘記自己本來(lái)要找的東西。表示歉意。用戶進(jìn)入錯(cuò)誤頁(yè)面時(shí)你道個(gè)歉絕對(duì)沒(méi)問(wèn)題。如果你的網(wǎng)站需要登陸,可以添加登陸功能。(錯(cuò)誤是否因?yàn)橛脩粜枰顷懚斐?)發(fā)揮創(chuàng)意,或者表現(xiàn)趣味。不要忘記先對(duì)頁(yè)面進(jìn)行測(cè)試。保證所有用戶都能理解你的設(shè)計(jì)。如果你使用了“404錯(cuò)誤”這句話,則應(yīng)當(dāng)再加一行文字告訴用戶其意思是什么,或者他們下一步應(yīng)當(dāng)如何操作。
12個(gè)優(yōu)秀范例

碰到一個(gè)優(yōu)秀的404錯(cuò)誤頁(yè)面時(shí)的感覺(jué)是很特殊的。它能夠減緩錯(cuò)誤鏈接所帶來(lái)的惱怒。下面的12個(gè)頁(yè)面一定能讓你流連忘返。

Deviant Art

科學(xué)上網(wǎng)。

網(wǎng)頁(yè)設(shè)計(jì)!說(shuō)說(shuō)404頁(yè)面該怎么設(shè)計(jì)?

Gig Masters

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!