Design System

系統設計規範 (Design System)

本文檔介紹 Money2 專案中的 UI 設計系統，包含我們對 Material Design 3 (MD3) 的使用方式、專屬的色彩語義學（如財務正負值的顏色定義），以及共用元件與工具類的設計。

本專案使用 Jetpack Compose 開發 UI，並全面導入 Material Design 3 (androidx.compose.material3) 規範。

動態色彩 (Dynamic Color)：在 Theme.kt 中，支援 Android 12 (API 31) 以上的 Material You 動態色彩功能。當使用者設備支援且開啟時，App 將會自動從系統提取主色調 (dynamicDarkColorScheme / dynamicLightColorScheme)。
自定義主題：當環境不支援動態色彩時，我們提供了預設的亮色與暗色主題 (DarkColorScheme 和 LightColorScheme)。我們使用了特定的藍綠色調（例如 SurfaceTeal 和 OnSurfaceTeal）作為容器色與前景色，營造現代且值得信賴的金融 App 氛圍。

在金融類 App 中，色彩傳遞了極為重要的資訊。我們在 Color.kt 中定義了一套嚴格的財務數據語義色彩：

正向 / 收益 (Profit & Income)
- 代表色：綠色 / 藍綠色 (Green / Teal)
- 變數：IncomeGreen, IncomeGreenLight, ProfitPositive
- 使用情境：當投資獲利、資產增值或增加收入時使用，給予使用者正向的回饋。
負向 / 支出 (Loss & Expense)
- 代表色：紅色 / 玫瑰紅 (Red / Magenta)
- 變數：ExpenseRed, ExpenseRedLight, ProfitNegative
- 使用情境：資產虧損、日常支出或帳戶扣款時使用，警示財務減少。
中性 (Neutral)
- 代表色：金色/橘色 (Gold / Orange)
- 變數：NeutralGold
- 使用情境：無增減狀態、警告提醒或未實現的過渡狀態。

這種明確的色彩區分，幫助使用者在掃視儀表板或資產列表時，能在一秒內掌握財務健康狀況。

為了確保整個 App 在呈現金額數據時的一致性，我們封裝了共用的工具與元件。

CurrencyFormatter (com.example.money2.utils.CurrencyFormatter) 是一個專門處理多幣別轉換與字串顯示格式化的核心工具。

匯率轉換：支援 nativeCurrency（預設為 USD）與 targetCurrency 的動態換算，根據傳入的 exchangeRate 計算出轉換後的金額。
幣別格式化差異：
- 新台幣 (TWD)：依照台灣使用者習慣，捨棄小數點並加上整數標示，格式化為 NT$ {金額}（例：NT$ 1000）。
- 其他幣別 (以 USD 為主)：保留兩位小數並加入千分位逗號，格式化為 $ {金額}（例：$ 1,234.56）。
架構優勢：在 Compose UI 畫面層渲染時，開發者只需呼叫 CurrencyFormatter.format(...) 即可獲得統一且在地化正確的金額字串，大幅降低各個畫面自行處理邏輯而產生的 Bug 與不一致。