產品原型 · 2026-07-16
四個改版方向,十五份原型,並排比較。
A=Mintlify 密集資料面;B=AI 營運儀表板;C=Mintlify 配色搭主從式版型;D=Airbnb 配色搭路線圖版型。四方向皆含 LIFF 手機端現場回報。程式碼與資料皆未更動。
方向 A · Mintlify 產品介面
密集資料面,黑 pill 與薄荷綠強調
依你 design.md 的 Mintlify 規範:每個平台一份代表畫面,涵蓋最能展現設計方向的核心模組。
方向 B · 參考圖延伸
AI 營運儀表板,光暗雙模式
自你提供的參考圖提取配色、字階與版面節奏:AI 摘要卡、KPI 迷你趨勢、事件時間軸與 AI 助理側軌。圖表色盤已通過色覺缺陷(CVD)與對比驗證,未複製參考品牌資產。
AI 摘要發現異常、KPI 迷你趨勢、回報趨勢圖與事件時間軸,右軌 AI 助理可下指令。
跨租戶儲存用量四序列趨勢、用量排行與同步事件,AI 偵測異常增長並給出建議。
連線狀態列、同步耗時圖(含逾時標記)、變更軌跡與同步歷史,失敗自動重試。
AI 藍風格手機端:玻璃球體 AI 檢查提示、兩段式拍照、批次提交與回報歷史。
方向 C · Mintlify 配色 × 主從式版型
參考圖版型,換上你的品牌語彙
沿用 Mintlify 配色(白畫布、黑 pill、綠色僅限強調、Inter+Geist Mono、full-pill 圓角),套上參考圖的桌面主從式版型:深色 pill 導覽、KPI 卡列、pill 篩選、清單+深色強調詳情面板。現場回報改為後台的「回報審核台」(LIFF 手機端保留在方向 A/B)。
方向 D · Airbnb 配色 × 路線圖版型
進度路線圖,換上 Airbnb 語彙
沿用參考圖的版型:深色圓角 app 外框、頂部 icon 導覽、左工具列+虛線串接的進度路線圖、右事件軌、底部浮動圓形工具塢。配色綁 Airbnb 設計系統(Rausch 珊瑚紅單一強調、Ink Black、Canvas White、Hairline 邊、圓形圖示鈕、Cereal 字體);參考圖的多彩收斂為 Soft Cloud 與語意色低量分類,珊瑚僅點重點卡。三個模組映射為路線圖:專案施工進度、租戶上線導引、現場回報總覽。
施工階段以虛線串接的路線圖卡片(完成/進行中/未開始),進行中卡含完成度與現場人員,右軌近期事件。
新租戶從建立、模組開通、匯入名錄到 ERP 連線與上線的步驟路線圖,右軌平台事件(用量/同步/授權)。
今日回報依工項串成路線圖(已審/待審/草稿),待審重點卡含照片與快速核准,右軌回報動態。
Airbnb 風格手機端:珊瑚紅單一強調、圓形按鈕、回報項目串成路線圖、深色圓角手機框。
方向 A · 設計語言
沿用你 design.md 的 Mintlify 規範
原型直接綁定既有 token:黑色主按鈕主導、薄荷綠僅保留給選中與強調狀態、Inter 搭配 Geist Mono、細線分隔的密集資料面。
開發進度對照
原型對應的模組現況
M2–M8 共 7 個模組已開發完成並通過測試,目前皆等待人工審核合併。原型即依這些模組的功能範圍繪製。