iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0

行雲流水的前端檢核

前端檢核(frontend validation)指的是使用者操作產品的過程中,透過程式邏輯檢查使用者輸入的數據,以確保其操作符合規則。前端們在完成 UI 畫面的切版和主要功能的開發後,會陸續將檢核機制加入到開發流程中。

前端檢核與後端檢核不同,主要以 「使用者的操作體驗」 為考量,並提前排除錯誤,避免額外呼叫伺服器。每個欄位的輸入限制、檢核條件和錯誤訊息都是息息相關的,操作和輸入的回饋也會影響使用者的操作體驗。

前面的文章有提到,我們的專案光前台就有 800+ 個檢核條件,不同欄位之間也存在互動和依賴關係。在如此龐大的前端專案中,我們會將欄位的檢核時間和錯誤提示訊息另外維護(Excel 表,雖然不是 Figma 的應用,但還是分享一下😂),而非直接出在 UI 介面上,也是避免開發們浪費時間在 「找找哪裡有不同」,並更專注於核心功能。

檢核表

雖然檢核通常在開發的中後期階段才開始,但越早在開發和討論考慮到檢核的邏輯和做法能夠對整體開發流程帶來很大的幫助。透過與開發討論出的檢核文件也有助於確保每個欄位的功能正常運作,還能讓前後端團隊在對接過程中減少溝通成本,避免因資訊不對稱導致的錯誤和後期過高的調整成本。

到底什麼情境寫什麼提示文字

檢核時回饋使用者的「提示訊息」能夠引導使用者操作,是設計師們很重要的一部分工作。而不管是在檢核失敗時的錯誤提示文字,或是操作成功的回饋訊息,都能幫助使用者理解問題的關鍵元素。
callout

如何藉由統一的規則有效撰寫一致邏輯的提示訊息?下一篇來看看我們的作法吧!


上一篇
[Day21-開發中期] 欄位邏輯 Flow 🎢  藉由 Figma 模擬程式模組積木,定義功能互動及開發!(下)
下一篇
[Day23-開發後期] 提示訊息的藝術讓前端檢核與提醒不再混亂 🎨
系列文
【前端工程師&UI 的 30 天約會】戰勝猴子!:Figma 交付實戰篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言