光通靈就飽了@@

作為前端工程師，需要在設計稿和 API 規格中橫跳比對。撇除透過 user flow（day18：UI Flow 指引我回家 🌊）深入了解業務情境，也需要工程師們瀏覽一輪所有的設計畫面。

當開發們面對 Figma 設計稿中一系列看似大同小異的 UI 介面和模組時，弄清楚哪個畫面該在哪個後端回傳的欄位值時觸發不僅關鍵，也很複雜。

例如：Status P（覆核）+ ApprovalStatus W（變更審批）時，需要以狀態「審批中」呈現，表示該筆項目在覆核後又做變更且再度進入審批流程。

（各種長得很像的畫面…）

為了解決這個狀況並提升開發效率，前端工程師、SA 需與設計師合作出 「欄位規則表」（名字是我們自創的 😂），將後端 API 的欄位和前端的 UI 元素結合起來。

搭配後端規格的欄位規則表

完成一份欄位規則表會包含以下步驟：

1. 列出影響 UI 的欄位
2. 列出受欄位規格影響的不同設計模組（如：列表樣式、資訊動靜態呈現）
3. 列出受欄位規格影響的設計細節（如：操作按鈕、項目狀態badge、文案等）

不過實際的產出仍會依據情境的不同而有所不同，也沒有一個特定的作法。因此建議設計師與工程師們依照各自的痛點，只要記得以工程師好理解為出發點，藉由討論找到共識，尋求適合自己團隊的作法！