歡迎關注富途web開發團隊
今天又週三了，前兩天才和產品，視覺，設計同學BiBi完新股認購稿子的事。其實很多都是細小點子上的問題，比如頁面錯誤提示，頁面資訊展示是不是過多而影響使用者體驗的問題。作為一家獨角獸級別的網際網路券商還真不容易，新股認購看是簡單，其實已經改版3次了，但是使用者體驗說不上好。沒別的，就那麼幾點：系統龐大，功能點特多，和錢，股票有關，特別需要注重使用者體驗。
你說作為一名前端工程師，除了要會一手好程式碼，還需要和產品，設計，視覺同學各種“撕逼”，感覺還真不容易。
有沒有小夥伴要來搭把手的，缺人從眾
記得小編開始的時候，視覺同學出什麼稿子，我就會做成啥樣。可是做著做著感覺老是有什麼地方不對勁，後面就不用說啦，做出來的頁面，產品同學不認賬，最後肯定是上不了線了。然後，視覺同學各種改視覺稿，然後我就掉坑裡了。
後面經過導師Toobug點化，小編頓悟。作為一名前端工程師一定要比產品同學更瞭解專案需求；適當的懂點設計，因為使用者體驗是至關重要的。
正好，前段時間，組裡的 Diandian 翻譯了一篇關於使用者體驗相關的文章。今天正好可以分享給大家。
原文章來源於富途WEB部落格: 原文連結
正文
沒有什麼系統是不會出錯的。有時候是使用者誤操作導致的錯誤，有時候是系統本身報錯。面對報錯，用正確的方式來處理報錯資訊是非常重要的，這對於提高使用者體驗是很關鍵的。
錯誤資訊提示有三塊重要部分要注意：
- 錯誤資訊要清晰
- 錯誤資訊的正確位置
- 良好的視覺效果
錯誤文字資訊清晰明瞭
1、錯誤的資訊一定要清晰
錯誤資訊應該要很清楚的表明問題是什麼，為什麼會出現，需要使用者怎麼去做。要把錯誤資訊想象成是與使用者的一種對話交流-看起來像是專門為使用者設計的。確保錯誤資訊是有禮貌的，易懂的，友好的並且非行業術語。
2、錯誤資訊需要有用
僅僅把錯誤資訊展示出來是不夠的，要告訴使用者如何快速的解決這個問題。 例如：Microsoft描述了錯誤是什麼並且提供了錯誤資訊的解決方案，幫助你快速的解決這個問題。
3、錯誤資訊需要具體問題具體分析
很多時候，網站對所有的驗證狀態只使用一個錯誤提示。郵件輸入框為空-提示“請輸入有效的電子郵箱地址”，沒有用“@”符號-提示“請輸入有效的電子郵箱地址”。MailChimp會以另外一種方式進行處理-他們對於郵箱驗證有三種錯誤資訊提示。第一種是提交時驗證輸入框是否為空。另外兩種是驗證“@”和“.”符號。（然而“請輸入內容”不是個很好的錯誤提示示例，因為並沒有說清楚要輸入什麼樣的內容）最好是給使用者實際點的提示而不是通用的提示。
4、錯誤資訊需要禮貌
使用者即使操作有誤也不要責怪他們，對使用者要禮貌，讓使用者覺得舒適。其實這也是提高品牌聲譽的好機會，同時也可以設定有自己特色的錯誤提示。
5、適當的用些幽默的方式
錯誤提示中用幽默的方式要慎重。首先保證錯誤提示應該要有內容且有用。然後為了改善使用者體驗可以適當用些幽默的方式。
錯誤提示要放在合適的位置
一個好的錯誤提示是在需要時出現。要避免錯誤彙總或直接把錯誤資訊放在UI元素的旁邊。
為錯誤提示設計一個合適的視覺
錯誤提示應該要明顯些。使用文字或背景有對比的顏色，這樣更容易讓使用者一眼看到和閱讀。
通常，會用紅色來顯示錯誤提示。有時候可以用下橙色或者黃色，相對來說紅色會讓人覺得緊張。不管哪種顏色，要確保錯誤提示清晰，與背景色有明顯的對比。為了改善色盲患者的體驗，可以在顏色旁邊加一個相關的圖示提示。
總結
總之，錯誤提示是改善使用者體驗，提升品牌聲譽和產品個性的重要機會。要注意做好錯誤提示的每個方面-文案提示，錯誤提示位置，和UI視覺，這樣才可以做到萬無一失。
原文：How to Write a Perfect Error Message
譯者：Diandian