信用卡權益管理系統
查看樣板:新增與異動方案 →
權益方案查詢、適用條件設定、方案異動、生效期間管理與異動覆核。
參考各系統的任務與元件組合;實際流程、權限與資料條件依業務需求確認。
02 流程與畫面
先說明使用者角色、要完成的任務與操作範圍,再整理流程、資料條件及畫面關係;角色分工與權限由專案確認。
從上方使用情境選擇信用卡權益管理或 ICC進件徵審系統,檢視 Wireframe 的區域配置與元件指引,再比對專案需要沿用或調整的畫面。
03 設計系統選用檢查
依專案流程與畫面,從本站找可引用的版型與元件,與 UX/UI 確認選用及需補設計的內容。
參考使用情境中的查詢列表、明細與編輯表單,對照需求需要哪些資訊區域。
名稱用文字輸入欄、固定狀態用下拉選單、期間用日期選單,清單用表格/Sheet。
互斥用單選、並列用多選;資訊展示用資訊列表,資料輸入用填寫表單。
依表單標題、內容分組與按鈕規範,分清主要操作、次要操作及返回路徑。
確認預設、焦點、停用與錯誤;也要涵蓋載入、無資料及操作結果。
相同資訊與操作沿用同一名稱及呈現方式;狀態需有文字,不只依賴顏色。
在資料對照頁確認 Storybook、Token、Figma 與 Guide;有示範不代表來源皆已完成。
比對專案所需畫面與狀態,與 Designer 確認未涵蓋部分的補齊方式。
比對成果應列出「選用的版型與元件」「參考連結」「仍需補設計的畫面或狀態」,作為與設計團隊溝通的共同依據。
04 設計選用摘要
將 03 的比對結果整理為設計選用摘要,讓討論直接對應本站的畫面、元件與尚待補齊的部分。以下為各專案共用的整理方式,實際選用依需求確認。
列出所選情境、畫面名稱與 Wireframe 連結;如有獨立互動樣板,補上操作流程的參考入口。
查詢條件參考文字輸入欄及按鈕;結果參考表格/Sheet 與分頁器;固定選項與期間條件分別參考選擇元件、下拉選單與日期選單。以實際使用的元件作為選用清單。
區分「可沿用」「需調整」「尚無完整範例」,註明欄位、權限、狀態或流程差異,以及需與設計團隊確認的事項。
保留選用畫面、元件範例及資料對照頁的連結,並註明待確認的來源。網站有示範,不代表 Figma、Token、Storybook 與 Guide 均已完成對應。