昨天完成了 Event Storming 和 BDD 場景定義，今天要把領域知識轉化為介面設計。不是畫漂亮圖，而是設計一個「懶人也會愛上」的記帳體驗。

為什麼多數記帳 App 都失敗了？

研究 50+ 個記帳 App 後，我發現它們的共同問題：認知負荷過重。

平均記帳需要 12 個步驟、45 秒。用戶要選擇 20+ 個分類、填寫 5+ 個欄位。這就像買了健身器材，說明書厚到讓人放棄。

PocketSmart 的目標：3 秒完成記帳。

設計原則：基於認知科學

Hick's Law：選項越少，決策越快

• 傳統：50 個分類任你選
• 我們：AI 預測 3 個最可能選項

Miller's Law：人腦只能同時處理 7±2 個資訊

• 傳統：一次顯示所有功能
• 我們：漸進式披露，用到才出現

Jakob's Law：用戶期待你的產品像其他產品

• 不創新互動模式，創新體驗價值
• 輸入框像 WhatsApp，手勢像 Instagram

資訊架構：情境導向 vs 功能導向

❌ 傳統功能導向

首頁 → 記帳 → 查看 → 統計 → 設定
（工程師思維）

✅ PocketSmart 情境導向

開啟即記帳（預設狀態）
向上滑 → 時間軸（看歷史）
向右滑 → 訂閱中心（管理固定支出）
長按 → 快速洞察（即時分析）

核心創新：3 秒記帳流程

傳統流程分析（12 步驟）

1. 找 App → 開啟 → 等待載入
2. 點記帳 → 選類型 → 輸入金額
3. 選分類（最痛苦）→ 填描述
4. 選帳戶 → 選日期 → 確認儲存

PocketSmart 極簡流程（3 步驟）

1. 開啟即輸入：App 打開就是輸入框
2. 自然語言：「咖啡 120」
3. 自動完成：AI 分類 + 振動回饋

關鍵：把複雜度從用戶轉移到系統。

視覺系統：少即是多

色彩心理學

• ❌ 藍色（可信）→ 太普通
• ❌ 紅色（警示）→ 太焦慮
• ❌ 金色（財富）→ 太俗氣
• ✅ 綠色（成長）→ 正向、自然、平靜

視覺層級

主要資訊：金額（32px - 最大）
次要資訊：分類（20px - 明顯）
輔助資訊：時間（14px - 存在感低）

AI 信心度視覺化

不用百分比數字，用視覺符號：

• 高信心（>90%）：實心圓點 ●
• 中信心（70-90%）：空心圓點 ○
• 低信心（<70%）：問號圖示 ？

微互動：細節決定體驗

輸入時的漸進回饋

輸「星」→ 顯示「星巴克？」
輸「120」→ 即時顯示分類
完成 → 微震動 + 打勾動畫

動畫時長基於認知

• 即時回饋：0-100ms（點擊）
• 快速過渡：200-300ms（切換）
• 複雜動畫：400-500ms（載入）

每個動畫都要回答：這能幫用戶理解什麼？

響應式策略：不只適配，要優化

基於內容的斷點

320px：單欄 + 全寬按鈕（iPhone SE）
428px：優化觸控區（iPhone 14 Pro）  
768px：雙欄 + 側邊欄（iPad）
1024px：三欄 + 快捷鍵（Desktop）

深色模式的細節

• 降低對比度（避免刺眼）
• 調降飽和度 20%（暗背景顯色問題）
• 用亮度而非陰影表現層次

用戶測試：5 個人就夠了

根據 Nielsen 研究，5 個用戶能發現 85% 問題。

三個關鍵任務測試

1. 首次記帳：測試直覺性
2. 查看支出：測試導航邏輯
3. 設定預算：測試進階功能

關鍵發現與改進

• 輸入格式困惑 → 動態切換範例
• 手勢不易發現 → 首次視覺提示
• 信心度看不懂 → 顏色漸層替代

設計系統：為擴展做準備

原子設計架構

Atoms（按鈕、輸入框）
  ↓
Molecules（輸入組、卡片）
  ↓  
Organisms（快速記帳、支出列表）
  ↓
Templates（首頁、報表頁）

設計決策紀錄（ADR）

為什麼不用底部導航？

• 決策：用手勢取代
• 原因：省 50px 空間、減少干擾
• 風險：學習成本
• 緩解：首次教學

為什麼用自然語言？

• 決策：單一輸入框
• 原因：降低認知負荷
• 風險：解析錯誤
• 緩解：手動修正選項

設計哲學：三個核心理念

1. 極簡不是減法，是選擇

不是功能少，而是：

• 複雜度轉移給系統（AI 分類）
• 決策延遲到需要時（漸進披露）
• 操作整合成直覺（自然語言）

2. 好設計是隱形的

用戶不該注意到介面，該專注任務：

• 記帳時只想「記什麼」
• 查看時只想「花在哪」
• 分析時只想「怎麼改善」

3. 設計是妥協的藝術

每個決策都是取捨：

• 簡單 vs 強大
• 美觀 vs 實用
• 創新 vs 熟悉

關鍵：知道為誰妥協、為何妥協。

User Flow

Wireframes