CTBC Finance
把複雜金融流程,準確落地成跨裝置介面。
案件資料
看懂設計的意圖,也把每個細節做成能真正交付的前端。
合作範圍包含法人金融智慧申請平台、iTrust、教學網站,以及蝦皮、易付等多項網銀對外服務流程。三伍杉接手完成度高的設計稿,負責前端實作、RWD、元件狀態與交付文件,讓後續系統團隊能直接接續 API 整合。
合作方式設計夥伴/系統團隊
代表專案FAST/iTrust
主要技術Vue/TypeScript
交付方式API-ready frontend
實際流程
設計、實作與交付,接在同一條線上。
- 01 設計稿
接收核准版型、元件規則與完整流程狀態
- 02 前端實作
元件、RWD、表單與各種流程狀態
- 03 系統交付
mock、API 接口與串接文件交給後續團隊
01 COLLABORATION
設計公司可以放心交付完成度高的設計稿。
平面設計背景讓我們能理解排版、比例、層級與品牌細節。實作時逐項確認字級、間距、圖像裁切、表單狀態與斷點,不把視覺精度當成系統開發必然要犧牲的成本。
02 COMPONENTS
從畫面拆出元件,也保留設計原本的節奏。
法人金融智慧申請、iTrust、蝦皮、易付等流程以 Vue 與自製元件處理表單、OTP、身分掃描、上傳、錯誤與完成狀態。共用行為被整理成元件,但不同流程仍保留各自的資訊層級。
03 HANDOFF
交付不只是一包畫面,而是後端接得起來的結構。
前端使用 mock 資料完成真實狀態,預留 API 接口並提供串接說明。新版法人金融網銀也以同樣方式交付國際系統整合團隊接續開發。
04 DELIVERY
讓每一次來回,都集中在真正需要判斷的細節。
元件化實作、設計檔資訊與視覺比對工具能縮短機械性的確認工作,溝通則回到間距、狀態、斷點與系統限制。面對多流程的金融介面,仍能維持一致的實作品質與清楚的交付結構。
下一個案例
Zyxel Platforms →