網(wǎng)頁(yè)設計中錯誤提示的五種設計方法發(fā)布者：本站     時(shí)間：2021-12-15 11:12:50

每個(gè)系統軟件在運行的過(guò)程中都會(huì )出錯，可能是用戶(hù)操作造成的也可能是系統錯誤?；谶@兩種情況，如何正確的提示錯誤信息就顯得尤為重要，它直接決定了用戶(hù)體驗的好與壞。

網(wǎng)頁(yè)<a href=/design/ target=_blank class=infotextkey>設計</a>中錯誤提示的五種設計方法,PS教程,

一個(gè)好的錯誤提示必備的3條重要法則：

清晰地文本提示語(yǔ)

放置在正確的位置

良好的視覺(jué)設計

清晰的文本信息

1. 錯誤提示信息應該簡(jiǎn)明易懂

提示信息應該明確的表明發(fā)生了什么錯誤、發(fā)生的原因以及解決方法。將你的錯誤提示信息看作是一次對話(huà)，跟用戶(hù)說(shuō)人話(huà)。確保你的文案是禮貌性的、易于理解的、友好的并且沒(méi)有晦澀難懂的專(zhuān)業(yè)術(shù)語(yǔ)。

<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中錯誤提示的五種設計方法,PS教程,

2. 錯誤提示信息應該是有用的

僅僅是描述系統出錯是不夠的，還要向用戶(hù)提供最簡(jiǎn)單、快速的解決方案。

例如，微軟的錯誤提示信息是這樣表述錯誤原因和解決方案的，所以你可以快速的知道如何解決它。

網(wǎng)頁(yè)設計中錯誤提示的五種設計方法,PS教程,

3. 錯誤提示信息應該是針對特定的使用場(chǎng)景

很多網(wǎng)站經(jīng)常在所有的狀態(tài)確認情況下都使用同一個(gè)錯誤提示信息，當你沒(méi)有填寫(xiě)E-mail一欄時(shí)——提示“請輸入一個(gè)有效的電子郵箱地址”，當你少寫(xiě)了“@”符號時(shí)——提示“請輸入一個(gè)有效的電子郵箱地址”。

MailChimp不是這樣做的，他們針對每個(gè)不同的郵箱地址狀態(tài)確認都有3種錯誤提示信息。第一個(gè)是在提交表單的時(shí)候檢查輸入框是否為空，另外兩個(gè)是檢查是否輸入了“@”和“.”符號。(然而“請輸入內容”并不是一個(gè)好的錯誤提示，它并沒(méi)有清晰地表明你需要填寫(xiě)什么內容)，向你的用戶(hù)顯示有針對性的而不是普適性的信息。

網(wǎng)頁(yè)設計中錯誤提示的五種設計方法,PS教程,

4. 錯誤提示信息應該是禮貌性的

即使是你的用戶(hù)操作錯誤了，也不要責怪他們，禮貌的對待用戶(hù)，讓他們感覺(jué)使用你的產(chǎn)品很舒服、很便捷。這是一個(gè)很好的展示品牌特性的機會(huì )，試著(zhù)在錯誤提示中加入一些品牌元素。

網(wǎng)頁(yè)設計中錯誤提示的五種設計方法,PS教程,

5. 恰當的展示你的幽默

在錯誤提示信息中展示幽默一定要十分小心謹慎，首先應當確保你的提示信息是有用的，之后如果合適的話(huà)，你可以在提示信息中加入一些小幽默，從而提升用戶(hù)體驗。

網(wǎng)頁(yè)設計中錯誤提示的五種設計方法,PS教程,

錯誤提示信息的正確位置

一個(gè)好的錯誤提示信息，應該是在你需要的時(shí)候可以很快速的找到它。不要寫(xiě)一個(gè)錯誤信息摘要，應該將它放置在相關(guān)的UI元件附近。

網(wǎng)頁(yè)設計中錯誤提示的五種設計方法,PS教程,

錯誤提示信息的設計形式

錯誤提示信息應該清晰易讀。使用與背景色有對比的文本顏色，以便用戶(hù)可以快速地注意到并且閱讀它。

紅色經(jīng)常被用于編寫(xiě)錯誤提示信息，在某些時(shí)候，黃色和橙色經(jīng)常被用于標注某些資源，紅色常常讓用戶(hù)有壓迫感。所以，確保你的提示文本清晰可見(jiàn)，與背景色有明顯對比，考慮到色盲用戶(hù)群，不要忘記在顏色旁邊放置一個(gè)相關(guān)的圖標，作為標注。

網(wǎng)頁(yè)設計中錯誤提示的五種設計方法,PS教程,

總結

錯誤提示信息是一個(gè)提升用戶(hù)體驗的絕佳時(shí)機，你可以通過(guò)它提升品牌形象、展示企業(yè)個(gè)性。不要小看錯誤提示信息的每一個(gè)方面，將提示文本、放置位置和視覺(jué)設計都做到盡善盡美，那么它才可以稱(chēng)得上完美。