PRODUCT DESIGN · IN PROGRESS
Wearbook
從 iOS App 的真實 bug 修復，到獨立網頁版的誕生——記錄這次開發裡實際做出的決定、驗證方式，以及目前的限制。
01 · OVERVIEW
專案概述
Wearbook 衣本是一個記錄穿著、換算「單次使用成本」的個人衣櫃管理工具。
核心賣點很單純：把「這件衣服到底值不值得」變成一個具體數字——買了多少錢、穿了幾次、平均一次穿多少錢，讓使用者對自己的消費決定有實際回饋，而不是憑感覺。
- 角色
- 獨立設計＋開發
- 時間
- 2026.09–現在
- iOS App
- SwiftUI＋Firebase（Auth／Firestore／Storage）；對照 Figma 設計稿刻版面、修 bug、補功能
- Web 網頁版
- Vite＋React＋TypeScript＋Tailwind；從零做出，共用同一個 Firebase 專案、帳號與衣櫃資料
- 狀態
- 開發中
開發後段做了一輪完整的視覺重整：重新定調色票、標題排版、卡片語言，先在網頁版落地、實測過，才把同一套系統搬回 iOS App——現在兩個平台看起來是同一個產品，不是各刻各的。
02 · PROBLEM & EVIDENCE
問題與證據
每一項都是這次開發裡實際發生、有出處的問題，不是憑空列的檢查清單：
類別篩選點到「無符合結果」的選項時，整排快速篩選跟著消失，使用者被卡住、點不到別的類別可以換選。
— 自己使用時發現新增項目頁不會在切回分頁時重置捲動位置，會停在上次滑到的地方。
— 自己使用時發現品牌欄位預設帶入「UNIQLO」，但品牌其實是選填欄位，不該有預設值。
— 自己使用時發現「平均單次成本」分母要求穿過至少一次，完全沒穿過的貴衣服被排除在計算之外——放越多沒穿的東西，平均值反而越漂亮。
— 自己檢查計算方式時發現項目詳情頁的分隔線變成粗色塊，視覺層次被打亂。
— 開發時自行發現登入頁原本自己刻了 email／密碼欄位，對照自己的 Figma 設計稿，實際設計裡登入頁根本沒有欄位，只有品牌識別加兩顆按鈕。
— 對照設計稿後發現落差底部導覽列切頁時位置會跳動。
— 實測抓到是捲軸空間不一致造成品牌字「Wearbook」誤用 Georgia 襯線字體，應該是圓潤字體。
— 自己的手誤自動去背用最小量化模型，邊緣有明顯雜訊斑點。
— 自己實測後發現效果不好03 · USERS
使用者輪廓
這次開發過程裡沒有明確討論過使用者輪廓或做過訪談，下面是根據功能反推的推論，不是實際研究結果。
從產品設計的功能重心（單次使用成本、未使用金額、久未穿提醒）可以反推：目標使用者是對消費有意識、想知道「這件衣服划不划算」的人，可能正在嘗試減少衝動購物或整理衣櫃。同時需要照顧兩種情境——用手機拍照建檔（需要相機、自動去背），以及不想每次都要連裝置才能查看衣櫃統計（因此才有了網頁版）。
04 · INFORMATION ARCHITECTURE
資訊架構
底部三分頁導覽，項目詳情從衣櫃總覽「推」進去（分頁列持續顯示），編輯項目則是蓋上來的 sheet（不顯示分頁列）——這個差異兩個平台刻意保持一致：
衣櫃總覽 →︎ 項目詳情（push，分頁列還在）→︎ 編輯項目（modal，分頁列消失）。網頁版路由對應：/login、/login/:mode、/、/add、/items/:id、/items/:id/edit（獨立在主版型外）、/profile。
05 · PRIMARY FLOW
核心流程
- 01註冊或登入，落地在衣櫃總覽
- 02點「新增」→︎ 選一張衣物照片
- 03自動去背（Web 版背景處理，不擋住表單；iOS 版用 Vision framework）
- 04選類別／顏色／季節／品牌，選填購買價格
- 05存檔，回到衣櫃總覽看到新卡片
- 06之後點進項目詳情，按「標記今天穿了」——累計次數 +1，單次使用成本重新算出
- 07「個人」頁彙總全衣櫃：未使用金額（可按眼睛圖示一鍵隱藏）、累計花費、最常穿排行、久未穿提醒
06 · KEY DECISIONS
三個最有代表性的決策
完整 10 個決策列在下方
整套視覺語言重新定調
重新定調整體視覺：暖米白背景、森林綠主色、左對齊大標題、霧面漸層彙總卡。調整的是視覺語言，功能與資訊架構維持 Wearbook 自己的設計，不跟著改變。
「平均單次成本」→︎「未使用金額」
原本的平均值會被沒穿過的衣服稀釋、看起來反而更漂亮；未使用金額直接揭露「這筆錢還卡在衣櫃裡沒被用到」。
主色定案：三次調整才收斂
深綠 #2f6b45 太深太重；退回後我改用更淺的 #93c797，但對比不夠、白字會糊；最後定案 #78b37d，深淺剛好。
還有 7 個決策
「最常穿的一件」→︎ Top 5 排行榜
單一數字資訊量太少，排行榜能看出整體穿著分布。
新增項目頁 X 按鈕：重設表單 →︎ 重設並跳回衣櫃頁
我原本以為是 bug，後來發現「重設」本身就不是我要的；X 現在等於「放棄新增、回首頁」。
大標題只套用在分頁根畫面
衣櫃、個人改左對齊大標題；新增／詳情／編輯／登入維持置中小標題，互動模式不同。
彙總卡（hero card）語言統一
個人頁「未使用金額」、項目詳情頁「單次使用成本」改成同一套霧面漸層卡片＋大數字。
個人頁新增金額隱藏開關（👁️）
花在衣服上的錢多少有點隱私，一鍵擋住「未使用金額」跟「累計花費」，只影響這次瀏覽。
空衣櫃：純文字 →︎ 圖示＋文案＋可以點的按鈕
原本只有一句話沒有引導動作；改成文案＋一顆直接連到新增流程的按鈕。
先在網頁版定案、實測過，才複製到 iOS App
網頁版改動快、截圖驗證也快，先收斂到滿意版本，才把 token、共用元件搬進 iOS。
07 · ALTERNATIVES CONSIDERED
被放棄的方案
Next.js→︎Vite + React
不需要 SSR／SEO，選更輕量、開發啟動更快的方案。
isnet_quint8（量化模型）→︎isnet（完整精度）
量化模型效果有明顯雜訊；自己實測後判斷畫質優先於速度。
主色 #93c797→︎#78b37d
#93c797 太淺，用在按鈕跟選取標籤上對比不夠、字會糊；最後改成飽和度剛好的 #78b37d。
阻塞式去背 UI→︎背景處理＋完成提示
改成背景跑，等待時間被「隱藏」在填表單的過程裡。
08 · UI SCREENS
介面畫面
iOS · 八個畫面
登入頁
登入／註冊表單
衣櫃總覽
篩選抽屜
新增項目
項目詳情
編輯項目
個人
09 · TESTING & VALIDATION
測試與驗證
iOS 每次改動都在 Simulator 上建置＋截圖驗證，用測試帳號直接進入畫面。
Web 在真實 Firebase 專案上跑完整流程，測完清乾淨測試帳號與資料：
註冊帳號 →︎ 新增衣物（含照片上傳到 Storage）→︎ 標記穿了（驗證 Firestore increment 即時生效）
個人頁統計、最常穿排行、未使用金額——即時運算結果跟實際資料對得上
Light／Dark 手動切換：系統設為淺色時強制深色仍生效，重新整理不閃色
標籤重新命名：改掉「上衣」標籤後，已存在的衣物卡片跟著同步改名
刪除項目後白屏崩潰 — React hooks 呼叫順序錯誤，測試中發現並修復
深連結直接進項目詳情／編輯頁會被誤判「找不到」導回衣櫃 — Firestore 監聽器非同步造成的資料賽跑，測試中發現並修復
10 · RESULTS & LIMITATIONS
結果與限制
- 額外交付一個功能對等的網頁版，共用同一份 Firebase 資料
- 網頁版補上自動去背、深色模式手動切換、標籤重新命名連動三項功能
- 完成整體視覺重整，先在網頁版定案，再同步搬回 iOS
- 新增金額隱藏開關、空衣櫃 CTA，網頁版與 iOS 兩邊同步補上
- iOS 八個畫面都對齊 Figma 規格，修掉多個真實 bug
- 網頁版去背比 iOS 的 Vision framework 慢很多，且每次新增都要重跑
- 主色前後調整三次才定案，一開始判斷不夠精準
- iOS 版空衣櫃畫面還沒在實機上確認過
- 網頁版還沒部署到正式網域，目前只在本機開發伺服器上