Stoxer 持股庫存卡片設計：未實現損益、權重佔比與資產視覺化
揭密 Stoxer 團隊如何透過漸進式資訊露出的視覺卡片設計，降低大腦認知負擔，兼顧專業數據深度。
傳統券商 App 常把幾十個數字同時塞在狹小的手機螢幕上，導致投資人在大跌時產生焦慮感。Stoxer 採用「漸進式揭露 (Progressive Disclosure)」設計，打造乾淨、俐落的卡片式視覺體驗。
一、 庫存卡片的三大視覺層級 (Visual Hierarchy)
包含個股名稱代號、當前總市值與未實現損益 (紅綠對比色)。讓使用者打卡開 App 的一秒內，立刻讀取最關鍵的結論資訊。
展示庫存股數、買入均價與歷史總均價 (扣除獲利與股利後成本)。清晰區隔「原始買價」與「防禦護城河」。
點擊展開後露出累積現金股利、已實現損益、ROPC (最大投入資金報酬率) 與 XIRR (年化複利)。兼具深度統計，又不會擠爆預設畫面。
二、 以「2317 鴻海」說明庫存與損益計算
以下以台股權值股「2317 鴻海」為範例，說明當輸入買進、領取股利與部分賣出紀錄後，系統的數據整理與計算邏輯：
【畫面顯示 A】：尚無報價時的庫存卡片
未取得市場最新報價時，卡片顯示如下。由於缺乏當前市場價格，總損益、總報酬率與年化報酬率顯示為 `---`：
各欄位計算細節：
均價 ＝ (50,000 ＋ 71) ÷ 500 股 ＝ 100.14 元
已實現損益 ＝ 64,750 − 50,071 ＝ +14,679 元
系統將已結算之賣出獲利 14,679 元與現金股利 3,000 元自剩餘持股成本中扣除：
保本總成本 ＝ 50,071 (買成本) − 14,679 (賣獲利) − 3,000 (股利) ＝ 32,392 元
總均價 ＝ 32,392 元 ÷ 500 股 ＝ 64.78 元
【畫面顯示 B】：同步最新報價（現價 140 元）時的庫存卡片
當系統取得最新市場報價（假設現價為 140 元）時，卡片會計算未實現損益、總損益、總報酬率與年化報酬率：
報價同步後的計算結果與 XIRR 計算數據假設：
• 未實現損益：500 股市值 70,000 元 − 買進成本 50,071 元 ＝ +19,929 元 (+39.80%)
• 總損益：未實現 19,929 元 ＋ 已實現 14,679 元 ＋ 股利 3,000 元 ＝ +37,608 元
• 總報酬率：總損益 37,608 ÷ 在庫買進成本 50,071 × 100% ＝ +75.11%
• 年化報酬率 (XIRR) 數據假設與計算細節：
- 評估基準日期：假設為 2026-07-31。
- 投入與回收現金流數據：
- 2026-01-15：買進支出 -100,142 元（含買進手續費 142 元）
- 2026-04-20：領取股利 +3,000 元
- 2026-07-10：賣出淨得 +64,750 元（65,000 元成交金額扣除賣出費稅 250 元之淨額）
- 2026-07-31：評估日持股市值淨額 +69,691 元（500 股 × 現價 140 元 ＝ 70,000 元，扣除估算賣出費稅 309 元） - 計算結果：將上述 4 筆日期與現金流帶入 XIRR 演算法折算後，求得年化報酬率為 +87.00%。
三、 庫存卡片之數據整理與顯示機制
關於卡片數據整理與顯示運作，說明如下：
「均價」記錄目前持股當初的買進成本；「總均價」則將歷史賣出獲利與現金股利納入成本扣抵。
輸入或取得最新報價後，系統會結合歷史買賣日期、股利日期與評估當日市值現金流，整理出未實現損益與年化報酬率 (XIRR)。
切換隱私顯示開關時，卡片上的金額與股數將自動遮罩處理。