同一種功能,全站只用一個動態元件。上半部是今天的現況與統一規格;中間 12 個新元件各有 3 個方向,每個都可以直接點、按重播,勾「選這個」會記在這台電腦上。09-01 的舊版整份收在最下面。
以後新增任何動態都先對這張表:同一類用途只用同一個時長和曲線。電腦開了「減少動態效果」時,全部直接到位、不播。
| 用途 | 範圍 | 時長 | 曲線 | 用在哪裡 |
|---|---|---|---|---|
| 狀態改變 | hover、顏色、底色 | 0.18 秒(--dur-1) | ease-out | 按鈕滑過、列滑過、連結 |
| 小元件進出 | 提示框、下拉、選單 | 0.25 秒(--dur-2) | --enter(快出慢停) | 提示框、下拉選單、日期面板 |
| 大元件進出 | 彈窗、詳情窗、面板 | 0.35 秒(--dur-3) | --enter;關閉用加速曲線 | 彈窗往上浮、往下收 |
| 會「滑到位」的指示 | 一顆底色跟著選項走 | 彈簧(240/17),約 0.8 秒收尾 | 彈簧+移動中拉長 | 切換滑塊、側欄膠囊、分頁(N9-A) |
| 數字變化 | 數字換成新數字 | 彈簧(170/18),每位數錯開 60ms | 一位一位滾 | KPI、批次列數字、通知紅點(N8-C) |
| 清單出現 | 一批東西一起出現 | 0.3 秒/列,錯開 28ms,最多 14 列 | --enter+模糊到清楚 | 表格列、通知、搜尋結果 |
| 確認成功 | 存好了、完成了 | 打勾畫 0.36~0.42 秒 | 描繪+彈一下 | Toast 勾勾、匯入打勾、N1 儲存 |
你 09-22 選的 D1、D2、D3、D4、D10、E1、E4,以及下面 12 個新元件裡選的 N1-A、N4-A、N7-A、N8-A、N10-B、N11-A、N12-C,已經全站套用,同一種功能只用這一個元件。
| 編號 | 元件 | 套用範圍 | 現在的樣子 | |
|---|---|---|---|---|
| D1 | 切換滑塊 | 全站 17 組切換鈕(日/週/月、全部/登入/新增…、成員卡片/列表) | 選中的底色是一顆膠囊,換選項時用彈簧滑過去、移動中微微拉長,新選項的字從模糊到清楚 | 到工作檔看 |
| D2 | 動態島批次列 | 來客名單勾選、銷控表「選取」 | 兩條批次列統一成同一顆墨色膠囊:出現時彈出、數字換時模糊交叉、按鈕多寡變了寬度用彈簧伸縮 | 到工作檔看 |
| D3 | 堆疊通知 | 全站右下角的操作回饋(所有呼叫點自動套用) | 新的在最前、舊的縮小疊在後面;滑過展開成一條一條;往右滑可以撥掉;成功畫勾、失敗類換琥珀驚嘆號並多停 1 秒 | 到工作檔看 |
| D4 | 滾輪數字 | 各頁頂部 KPI 大數字 | 進頁時每一位數自己滾到定位、由左到右錯開;滾完換回純文字,不影響複製與其他程式讀數字 | 到工作檔看 |
| D10 | 清單進場 | 所有頁面的表格(來客名單、操作明細、帳單、已刪來客、成員…) | 換頁、換篩選、換頁碼時,新出現的列一列一列從模糊浮上(最多 14 列);只是排序的話不重播 | 到工作檔看 |
| E1 | 側欄膠囊 | 左側導覽(平板時是頂部橫列) | 選中的深藍底色是一顆膠囊,換頁時滑到新的圖示,移動中沿方向拉長 | 到工作檔看 |
| E4 | 匯入進度環 | 來客名單 → 匯入 Excel 第一步 | 按「解析表頭」或拖檔進去,虛線框內跑一圈進度環、變綠打勾「解析完成」,再自動進第二步 | 到工作檔看 |
| N1-A | 儲存形變打勾 | 所有彈窗的儲存/送出/建立/新增鈕、詳情窗的儲存 | 真的存成功才播(彈窗關了或跳成功通知):按鈕位置縮成圓、轉圈、變綠畫勾再淡掉;跳提醒就不播 | 到工作檔看 |
| N4-A | 刪除往左滑出 | 來客、最新消息的刪除 | 列往左滑走,下面的列滑上來補位;按「復原」從左邊滑回來 | 到工作檔看 |
| N7-A | 飛進標籤區 | 來客名單「存成常用組合」 | 新存的組合標籤從愛心鈕的位置飛進常用組合區 | 到工作檔看 |
| N8-A | 鈴鐺長出面板 | 頂列鈴鐺 | 鈴鐺晃一下,通知面板從鈴鐺的位置長出來 | 到工作檔看 |
| N10-B | 搜尋標重點 | ⌘K 快查、來客名單搜尋 | 結果一筆筆浮上;符合的字標琥珀底色,名字不會被拆開 | 到工作檔看 |
| N11-A | 骨架微光 | 換建案、業務報表換日期或日/週/月 | 內容先閃 0.45 秒灰色骨架再出現(背景漸層,你選了=點頭) | 到工作檔看 |
| N12-C | 提示框滑行 | 所有提示框(側欄、圖示鈕) | 在相鄰按鈕間移動時,提示框直接滑到新位置換字,不會一直重彈;停久了再滑過去照常彈出 | 到工作檔看 |
每個方向都可以直接操作,右下角可以重播。勾「選這個」,最上面會計數,選完按「複製我的選擇」貼給我就好。全部照你的黑名單:沒有粒子、磁吸、3D 傾斜、按鈕或文字漸層。
這次套用 7 項以外的舊動態提案。D8、P19 的方向已經併進上面的 N5、N1 重新給你挑。
| 編號 | 提案 | 現況 | 現在的樣子 |
|---|---|---|---|
| D5 | 彈窗依狀態增減欄位時高度用彈簧 | 還沒做 | 欄位直接出現消失,高度會跳 |
| D6 | 開關壓扁拉伸 | 還沒做 | 圓鈕移動有一點回彈,沒有壓扁 |
| D7 | 狀態膠囊打勾+數字彈出 | 做了一部分 | 有戶數小數字,沒打勾、沒彈 |
| D8 | 銷控格改狀態的回饋 | 還沒做 | 顏色 0.18 秒淡換 → 這次改成 N5 三個方向給你挑 |
| D9 | 下拉選單彈性展開 | 做了一部分 | 自訂下拉已有,缺彈性展開與選項依序浮現 |
| E2 | 彈窗把手可拖 | 還沒做 | 把手只是裝飾 |
| E3 | ⌘K 指令面板 | 已做 | 分組+鍵盤,缺背景霧化 |
| E5 | 篩選改多選 | 還沒做 | 來源、分級還是單選 |
| E6 | 手機日期滾輪 | 不再適用 | 提案時就撤回 |
09-23 盤點、送 Codex 複審後留下的候選,每一項都做成可以點的 demo,而且各給兩種樣式。勾「選這個」,最上面會計數,按「複製我的選擇」貼給我。完整的做法、驗收斷言與 Codex 裁決,見另一份「CRM_動態元件下一批建議.html」。
09-23 請 Codex 專門提「更高級、有趣、特別」的動態元件,交回 48 項;我逐條裁決後留下 27 項,每一項都做成可以點的 demo。勾「要做這個」,最上面會計數,按「複製我的選擇」貼給我。審查包與 Codex 原文存在 codex-review/2026-09-23-動態元件第二輪/。
逐項對照今天的工作檔:已做 13、做了一部分 14、還沒做 27、功能已移除 6、不再適用 3。功能已移除的是當時的頁面或元件後來拿掉了(例如價格表併進銷控表、首頁改版)。
| 編號 | 項目 | 現況 | 現在的樣子 |
|---|---|---|---|
| P1 | 首頁深色帶右上字看不清 | 功能已移除 | 首頁 09-08 改成「案場今日」,深色帶已拿掉 |
| P2 | 銷售率條加刻度 | 做了一部分 | 有百分比數字,沒有 50% 刻度與目標線 |
| P3 | 八顆功能磚收斂 | 功能已移除 | 首頁已經沒有功能磚 |
| P4 | 交屋=綠色要向業務確認 | 不再適用 | 你 09-08 定案交屋維持綠色 |
| P5 | 「1 戶負溢價」可點 | 功能已移除 | KPI 已經沒有這行,溢價層負值格直接上色 |
| P6 | 銷控加棟別剩餘小計 | 還沒做 | 程式有算,但畫面沒顯示 |
| P7 | 批次調底價試算預覽 | 還沒做 | 有兩種調法+必填理由,沒有預覽 |
| P8 | 電話預設遮罩 | 還沒做 | 電話完整顯示 |
| P9 | 「示範 12 筆」字樣 | 已做 | 表尾只剩「共 1,268 筆」 |
| P10 | 收客頁產生 QR | 已做 | 有 QR 鈕與 QR 視窗(個資告知見 X12) |
| P11 | 金額欄右對齊 | 已做 | 全站金額欄靠右 |
| P12 | 分析頁工程標籤可隱藏 | 已做 | 預設隱藏,有按鈕打開 |
| P13 | 報表加「跟昨天比」 | 做了一部分 | 日報有跟昨日比;上週同日、四週中位數沒有 |
| P14 | 成員人數口徑 | 做了一部分 | 人員頁「10 人」、權限頁「9 位成員」兩頁對不上 |
| P15 | Premium 兩個價格打架 | 做了一部分 | 有月繳/年繳切換,預設仍並列 8,800 與 9,800 |
| P16 | 操作明細 API 路徑收起 | 還沒做 | 路徑欄一直顯示 |
| P17 | 「誰看得到底價」一句話總結 | 還沒做 | 權限頁沒有總結列 |
| P18 | 彈窗支援 Esc | 已做 | Esc 關最上層;詳情窗先問未儲存(09-21) |
| P19 | 儲存鈕「處理中→打勾」 | 做了一部分 | 只有匯入、匯出、登入有轉圈;彈窗儲存沒有 → 這次 N1 給你挑 |
| P20 | 一個畫面只有一顆紅 | 不再適用 | 刪除與退戶不會同時出現 |
| U1 | 溢價層「灰海」降噪 | 已做 | 沒值的格子改成淡色小字 |
| U2 | 切價格層只翻有變化的格 | 已做 | 已照 Codex 建議做 |
| U3 | 聚焦狀態時 KPI 跟著變 | 還沒做 | KPI 一直是全案數字 |
| U4 | 選取格跟保留格分不出 | 不再適用 | 改成選取格加深藍實線框 |
| U5 | 負溢價口徑 | 功能已移除 | 這行字已拿掉 |
| U6 | 詳情購買紀錄跟銷控同源 | 還沒做 | 購買紀錄還是寫死、編號格式不同 |
| U7 | 車位緊湊格字太小 | 功能已移除 | 緊湊模式已拿掉,格子統一大小 |
| U8 | 欄頭/樓層滑過整欄整列亮 | 還沒做 | 選取模式下點欄頭可整欄選,滑過沒反應 |
| W1 | 勾勾表範本改名 | 還沒做 | 還叫勾勾表範本(09-21 你定了用詞統一成「勾勾表」) |
| W2 | 回溯補差加說明 | 已做 | 表頭有提示 |
| W3 | 熟成訂單改名 | 還沒做 | 只加了提示,沒改名 |
| W4 | 已成交(可算溢價)拆兩層 | 已做 | 標題+小字 |
| W5 | 歸戶加說明 | 還沒做 | 沒有提示 |
| W6 | 作戰台保留 | 已做 | 名稱保留 |
| W7 | 檢視身分改名 | 功能已移除 | 身分切換已移除(你 09-08 決定) |
| W8 | 發酵中改累積中 | 還沒做 | 還是「發酵中」 |
| W9 | 各跳/齊跳白話 | 做了一部分 | 下拉有白話說明,方案卡沒有 |
| W10 | 幽靈客率/補建率改字 | 還沒做 | 字沒改 |
| A1 | 快捷鍵依平台顯示 | 還沒做 | 一律顯示 ⌘K(Ctrl+K 可用) |
| A2 | 大字模式 | 還沒做 | 沒有 |
| A3 | 民國年切換 | 還沒做 | 沒有 |
| A4 | 日期加星期 | 做了一部分 | 來客日期篩選有,下訂/簽約/交屋欄沒有 |
| A5 | 觸控尺寸 | 做了一部分 | 觸控時操作鈕常駐、手機業務版 44px |
| A6 | 破億改億制 | 做了一部分 | 報表有,銷控 KPI 沒有 |
| A7 | 列印樣式 | 做了一部分 | 報表可列印,銷控沒有 |
| N1 | 導覽選單沒底色 | 已做 | 已補白底 |
| N2 | 詳情卡下方空白 | 已做 | 高度跟內容走 |
| N3 | 寬表格右緣暗示 | 做了一部分 | 可橫捲,沒有右緣淡出 |
| N4 | 新增建案只有 3 欄 | 還沒做 | 還是 3 欄 |
| N5 | 加扣款數字欄原生箭頭 | 還沒做 | 箭頭還在 |
| N6 | 確認框位置統一 | 已做 | 確認框也改成從下方浮上 |
| X1 | 同戶同時編輯保護 | 做了一部分 | 有「誰正在編輯」提醒與保留排隊,沒有保留到期 |
| X2 | 交易生命週期(訂金、付款期程) | 還沒做 | 只有下訂/簽約/交屋日期 |
| X3 | 實價登錄申報待辦 | 還沒做 | 沒有 |
| X4 | 追客流程(下次追蹤日、流失原因) | 做了一部分 | 有久未追蹤、跨案合併、改派;沒有下次追蹤日 |
| X5 | 低於底價要簽核 | 做了一部分 | 要填理由,沒有核准人 |
| X6 | 退戶四條路 | 還沒做 | 只有一個退戶鈕 |
| X7 | 貸款/地政士時間軸 | 還沒做 | 沒有 |
| X8 | 客變追蹤 | 還沒做 | 沒有 |
| X9 | 驗屋與交屋保留款 | 還沒做 | 交屋只有日期 |
| X10 | 獎金稅務層 | 還沒做 | 沒有 |
| X11 | 業主對帳單凍結版 | 還沒做 | 沒有 |
| X12 | 個資告知與同意 | 還沒做 | 收客頁沒有告知文字 |
參考 beui.dev 的動態手法,逐項對照目前 CRM demo 的元件;並以房地產(建設・代銷)從業者的使用習慣,全盤檢視 18 頁與所有彈窗。每一項都有勾選框——勾選=要導入,勾選狀態會存在這台電腦的瀏覽器裡,關掉再開不會消失。
結論:已上線 1 項(⌘K 指令面板)、做了一部分 2 項(狀態膠囊、下拉選單)、定案不做 1 項、提案撤回 1 項、還沒做 11 項。 還沒做的 11 項裡,D1 跟全站動態規則有衝突(09-05 起「彈一下」只留給開關),其餘沒有規則衝突,是還沒排進來。下面第二張表是提案之外、工作檔裡現在真的在動的東西。
| 編號 | 提案 | 現況 | 現在實際的樣子 |
|---|---|---|---|
| D1 | 價格層/密度切換改彈簧滑塊 | 09-21:還沒做 | 選中的按鈕直接換成實色底,沒有滑塊在跑。另外全站規則(09-05)把「彈一下」的曲線只留給開關用,做這項要先改這條規則。 |
| D2 | 批次操作列→動態島 | 09-21:還沒做 | 勾選後底部浮出一條固定寬度的膠囊列,數字直接換;不會隨內容伸縮。 |
| D3 | Toast→堆疊卡 | 09-21:還沒做 | 右下角深色小條往上排,最多 4 條、約 3 秒自己消失;沒有疊成一疊、不能滑掉、成功與錯誤同一款。 |
| D4 | KPI 數字滾輪 | 09-21:還沒做 | 每次進頁,整個數字從 0 數上來(約 0.9 秒);不是一位一位滾。 |
| D5 | 彈窗依狀態增減欄位(形變) | 09-21:還沒做 | 戶別/車位視窗換狀態時,欄位直接出現或消失,視窗高度會跳一下。 |
| D6 | 開關壓扁拉伸 | 09-21:還沒做 | 開關圓鈕移動時有一點點回彈,沒有壓扁拉伸。 |
| D7 | 狀態聚焦膠囊(打勾+數字) | 09-21:做了一部分 | 聚焦時膠囊上會出現戶數小數字,其他格子變淡;還沒有打勾、數字是直接出現沒有彈一下。 |
| D8 | 銷控格子改狀態的蓋章 | 09-21:還沒做 | 存檔後格子顏色用 0.18 秒淡換;沒有蓋章、沒有一格一格波浪。(切價格層時的翻牌是另一個效果,還在) |
| D9 | 自訂下拉選單 | 09-21:做了一部分 | 全站下拉已換成自訂樣式(有勾勾、鍵盤上下選、下面沒空間會往上開);還沒有彈性展開、選項依序浮現、打字跳到選項。 |
| D10 | 清單重載逐列進場 | 09-21:定案不做 | Enson 09-05 定案「框架不要動,內容看狀況設計動態」,表格逐列進場全部拿掉;現在只有「新增的那一列」會浮上來。 |
| E1 | 側欄切頁指示滑動 | 09-21:還沒做 | 選中的圖示直接換底色,沒有指示塊滑過去。 |
| E2 | 彈窗頂端把手可拖 | 09-21:還沒做 | 把手只是裝飾;關窗用 ×、Esc、點外面,關的時候有往下收的動畫。 |
| E3 | ⌘K 指令面板 | 09-21:已上線 | 已是分組的指令面板(功能/建案/來客/業務/戶別+最近搜尋、常用功能),鍵盤上下+Enter,結果依序浮現。只差背景沒有霧化。 |
| E4 | Excel 匯入進度環+打勾 | 09-21:還沒做 | 按「解析」直接跳下一步,只有按鈕上的轉圈;沒有進度環與完成打勾。 |
| E5 | 篩選改多選 | 09-21:還沒做 | 來客名單的「來源」「分級」還是單選;多選元件已有(詳情、表單在用),可以直接接上。 |
| E6 | 手機日期滾輪 | 09-21:提案撤回 | 提案時就撤回了,手機維持系統原生的日期選擇。 |
| 在哪 | 元件 | 怎麼觸發、長什麼樣子 |
|---|---|---|
| 全站 | 頁面切換 | 換頁時內容 0.14 秒淡入;框架(側欄、頂列)不動 |
| 全站 | 彈窗進出 | 進場往上浮、關閉往下收;09-21 修了兩個舊 bug:關掉確認框 0.3 秒內又打開會被自己關掉、按 Esc 關來客詳情只關掉遮罩 |
| 全站 | 確認框 | 刪除、退款這類高風險動作先問;最高風險要打字確認才解鎖 |
| 全站 | 未儲存提醒(09-21 新) | 來客詳情編輯到一半,按 ×/Esc/點外面/點別位來客 → 先跳「有未儲存的內容:放棄/繼續編輯」;沒改過就直接關 |
| 全站 | 快速動作鈕(右下閃電) | 滑過或點開成扇形選單;可以拖到別的位置,雙擊回原位;在畫面上半部時選單往下開 |
| 全站 | 頁面導覽(使用說明) | 聚光燈+細線指到元件,每頁有自己的步驟;常見問題用情境卡(09-21 改 C 版) |
| 全站 | 操作回饋 Toast | 右下角深色小條,刪除類附「復原」 |
| 全站 | 按鈕 | 處理中轉圈、按下縮一點、點擊漣漪;5 個頁面的主按鈕外框有慢慢流動的邊 |
| 全站 | 懸浮提示 | 圖示按鈕滑過顯示名稱(按鈕上不放字) |
| 全站 | 搜尋框展開 | 點搜尋圖示時欄位彈開 |
| 全站 | 通知 | 小紅點脈動、鈴鐺輕晃 |
| 建案首頁 | H3+A 八格篩選(09-21 新) | 點左邊八格其中一格,右邊待辦只留那一類;再點一次回到全部 |
| 來客名單 | F2 篩選列「更多」(09-21 新) | 點「更多」展開區域、贈品、關聯三個條件,有套用時按鈕上顯示數字 |
| 來客名單 | 表頭排序 | 點表頭排序時,列會滑到新位置(不是瞬間跳) |
| 來客名單 | 久未追蹤琥珀點 | 慢慢脈動;09-21 移到名字後面 |
| 來客名單・最新消息 | 刪除可復原 | 刪掉的列淡出滑走,Toast 上可以按復原 |
| 操作明細・已刪來客・帳單紀錄 | 表頭排序(09-21 新) | 時間欄點一下切 新→舊/舊→新;靜態切換,沒有動畫 |
| 操作明細 | 異常操作警示(09-21 新) | 頁首一行琥珀帶(靜態)+「只看這幾筆」 |
| 業務報表 | 日期面板 | 點日期彈出月曆;09-21 新增:選到沒有資料的日子換成空狀態+「回到最近一天」 |
| 銷控表 | 切價格層翻牌 | 切底價/表價/成交價時,數字有變的格子翻一下 |
| 銷控表 | 圈選模式 | 拖曳拉框一次選多格 |
| 銷控表・價格表 | 格子滑過放大 | 滑過的格子微微放大 |
| 權限・人員 | 成員展開 | 點角色時成員清單從那張卡「長」出來;權限改了底部浮出「未儲存」列 |
| 人員 | 在線脈動 | 在線的人頭像旁小綠點脈動 |
| 勾勾表範本 | 拖曳排序 | 欄位與選項可以拖動換順序 |
| KPI 數字 | 數到位 | 進頁時數字從 0 數上來;滑過放大一點 |
| 規則 | 內容 |
|---|---|
| 框架不動(Enson 09-05) | 側欄、頂列、頁面區塊、KPI、表格列都不做進場動畫;動態只放在「內容」與「回饋」上。D10 就是因為這條不做。 |
| 減少動態 | 使用者電腦開了「減少動態效果」時,全站動畫一次關掉(批次列、Toast 仍會正常顯示)。以上每一項都照這條走。 |
價格層滑塊的舊滑塊、舊密度切換、舊單條 Toast、舊翻牌動畫、銷控波浪進場、篩選頁籤發光——共 6 組。不影響畫面;要清掉會動到跟 Enson 共用的樣式區,要清再跟他講。
登入頁的動態(第二輪 14 個方向、L2+L3 結合 3 個方向)目前只在 demo 檔裡,還沒進工作檔,等你選定才搬。
beui.dev 是一套 React+Framer Motion 的動態元件庫。它的價值不在單一元件,而在三個一致的動效手法。我們的 CRM 是單檔 vanilla JS,不能直接搬程式碼,但手法全部可以用原生 CSS/Web Animations 重現(第 02 節的示範就是這樣做的)。
| 手法 | beui 的做法 | 用在我們哪裡 |
|---|---|---|
| 彈簧物理 | 所有位移都帶輕微過衝(overshoot)再回彈,不是等速滑到位 | 價格層滑塊、開關、格子按壓、彈窗入場 |
| 形變 morph | 同一個容器連續變形(寬度、高度、內容),不是關掉再打開 | 批次操作列、彈窗依狀態增減欄位、選單展開 |
| 模糊交叉淡化 | 內容切換時舊的模糊淡出、新的由模糊到清晰,取代硬切 | 切換價格層時的格子數字、島內容切換、清單重載 |
| beui 元件 | 狀態 | 原因 |
|---|---|---|
| Tilt Card(3D 傾斜卡) | 不採用 | 妳已明確否決 3D 傾斜(黑名單 🔴) |
| 磁吸按鈕(Magnetic) | 不採用 | 黑名單 🔴 |
| Shader / 粒子背景 | 不採用 | 黑名單 🔴(粒子背景),且 CRM 是工作介面不是形象頁 |
| Theme Toggle(深色切換) | 不採用 | CRM 已定案亮底白鋼藍,不做深色版 |
| 玻璃質感(glass surface) | 要用先問妳 | backdrop-filter 屬黃燈項;本文件僅進度列頂欄用了一次(附不支援時的白底 fallback),CRM 內要用會另外先問 |
另:beui 的按鈕有「金屬質感/漸層」變體——按鈕漸層在黑名單 🔴,一律用我們的實色 pillbtn。
動畫總預算(Codex 二審後補的共同原則):主要動效 ≤0.45s、彈簧收尾 ≤0.8s、同畫面同時動的元素 ≤30 個、一律尊重減少動態設定——D8 的批次蓋章與 U2 的輕量化共用這條,不再各說各話。左欄「現在」是從工作檔原樣搬過來的樣式與動態(同一份 CSS),右欄「建議」是照 beui 手法重做的版本。兩邊都可以直接操作,妳實際按按看再決定勾不勾。已依「效益 ÷ 工作量」排序。工作量:S 半天內 M 一個工作階段 L 多個階段。
價格表頁首的「底價/表價/成交價/溢價」與「完整/緊湊」、銷控表與業務報表同款 「現在」含今天剛修好的初始定位;滑動仍是等速
銷控表・價格表 → 按「選取」圈選後畫面底部那條深色列 「現在」是今天剛改成「已選 N 個…」的新版
全站右下角的深色膠囊(儲存、批次操作後跳的那個) 工作檔現況
每一頁頂部的大數字(戶數 72、累積來客 1,388…) 工作檔現況
銷控表點任一戶/車位跳出的編輯視窗,切「狀態」下拉時 「現在」是今天剛做好的依狀態顯示版(切換瞬間跳動)
車位視窗的「充電車位」、權限管理整頁、人員卡右下 工作檔現況(已有輕彈簧)
銷控表 KPI 下方那排「待售/保留/下訂/簽約/交屋」 「現在」含今天剛加的「顯示全部(聚焦 N 格)」
價格表切換價格層時的整片翻牌;銷控表改狀態目前「沒有」動畫 工作檔現況
戶別/車位/批次修改等彈窗內所有 select 工作檔現況(原生選單)
來客名單、操作明細、帳單的表格列 工作檔現況
左「現在」右「建議」,都可以操作。E4 更正:我實際打開匯入視窗檢查後,發現拖放上傳其實已經有了(四步驟),所以建議改為補進度與成功動畫。
最左側那條 icon 導覽列 工作檔現況
所有底部彈窗頂端的小橫槓(戶別、車位、批次…全部) 工作檔現況(純裝飾)
試著把上面的把手往下拖……沒反應
抓住把手往下拖超過一半就關閉
頂欄中間的搜尋框 工作檔現況
來客名單 → 右上「匯入 Excel」→ 四步驟視窗的第 1 步 工作檔現況(拖放已有)
來客名單頂部的「來源」「分級」下拉 工作檔現況
戶別/車位視窗的下訂日、簽約日、交屋日欄 工作檔現況
左「現在」照工作檔重現,右「建議」做出來給妳看。可互動的都做成可以按。
建案首頁最上方深色趨勢帶的右上角小字 工作檔現況
建案總覽三張建案卡下緣的藍色細條 工作檔現況
建案首頁下半部的八顆功能磚 工作檔現況
銷控表矩陣的五種狀態底色 狀態色是今天照正式站資料重上的
價格表 KPI 第四格「溢價總額」旁的琥珀小字 工作檔現況
銷控表戶別矩陣(A01–A06 六欄) 工作檔現況
價格表 → 選取幾戶 → 批次列「批次調整底價」跳出的視窗 這個視窗是今天剛做的
來客名單的「電話」欄 工作檔現況
來客名單表格左下角的表尾文字 工作檔現況
現場收客頁的頁首 工作檔現況
業務獎金明細表、帳單表、批次視窗的金額欄 工作檔現況
| 戶別 | 總獎金 |
|---|---|
| A1-10F | 81,000 |
| B6-8F | 7,000 |
| C3-12F | 485,200 |
| 戶別 | 總獎金 |
|---|---|
| A1-10F | 81,000 |
| B6-8F | 7,000 |
| C3-12F | 485,200 |
分析頁每張卡右上的橘紅小標籤(共 57 顆) 工作檔現況
業務報表 → 日報的六格 KPI 工作檔現況
人員管理頁首「成員 9 人」 工作檔現況
帳單與方案頁:上方現有方案卡 vs 下方比較表 工作檔現況
操作明細表最右的「路徑」欄 工作檔現況
權限管理頁的角色卡與底價相關開關 工作檔現況
全部 18 個彈窗 工作檔現況(都不支援)
所有彈窗右下角的深藍實心鈕 工作檔現況(.busy 樣式在檔內但沒接)
戶別視窗(交屋狀態同時有刪除+退戶時) 這個頁尾是今天剛做的
這輪把兩頁的每個狀態都開過:完整/緊湊、四個價格層、選取中、聚焦中、批次視窗。先報三個當場修好的 bug,再給 8 個建議(U 系列,全部附 demo)。
| 已修 | 本輪深看時抓到、已直接修進工作檔的 bug |
|---|---|
| B1 | 「顯示全部(目前聚焦 0 格)」在沒聚焦時也一直顯示——按鈕樣式的顯示規則蓋過了隱藏屬性 |
| B2 | 車位的緊湊模式從來沒有作用——切了「緊湊」,車位還是大格(程式往容器內找自己,永遠找不到) |
| B3 | 價格表緊湊模式整片格子空白——我昨天加的一條隱藏規則把數字一起藏了(已改寫並複驗) |
價格表 → 切到「成交價」或「溢價」層(72 戶只有 6–8 戶有值) 工作檔現況
價格表 → 點「底價/表價/成交價/溢價」的瞬間 工作檔現況(0.42 秒波浪翻牌)
銷控表 → 點「下訂」「簽約」聚焦後,上方 KPI 仍顯示全部 72 戶 聚焦計數是今天剛加的;KPI 連動還沒有
銷控表選取模式——選取=底色加深(妳今天定的),但保留格本來就是灰底 今天剛改的選取樣式,發現跟保留撞色
價格表 KPI——那筆負溢價是車位 005(底價 250 萬、成交 160 萬),不是「戶」 工作檔現況
來客名單 → 陳威宇 → 購買紀錄寫「8F・A4 3,350 萬」;但銷控表的 A04/8F 是待售、成交資料裡也沒這筆 工作檔現況(兩邊是不同批示意資料)
價格表 → 車位區 → 緊湊模式(36px 格內擠「編號+$250萬」) 車位緊湊是今天剛修好才看得到的
銷控表・價格表的欄頭(A01–A06)與樓層(12F–1F)——目前滑過沒有任何反應 工作檔現況
| A01 | A02 | |
|---|---|---|
| 3F | A01 | A02 |
| 2F | A01 | A02 |
| A01 | A02 | |
|---|---|---|
| 3F | A01 | A02 |
| 2F | A01 | A02 |
這輪逐分頁看完後又多抓到三個(W8–W10)。W2、W5、W8 右邊的 ⓘ 可以滑上去看說明浮出。
勾勾表範本頁的頁標與側欄選單 工作檔現況
艾德內部叫得順;賣給別家代銷會卡住。也可並列「勾勾表(來客調查表)」。
業務獎金明細表的表頭「回溯補差」欄 工作檔現況
核心概念零解釋 → 加 ⓘ。滑上去右邊的 ⓘ 看效果。「跳級補差」同款處理。
分析頁的第五個分頁名 工作檔現況
「熟成」是資料術語(cohort 成熟),業務聽不懂。
價格表 KPI 第三格 工作檔現況
括號補語塞在 KPI 標籤裡很拗口,拆成標籤+小字。
戶別/車位視窗的「成交客戶(歸戶)」欄 工作檔現況
代銷圈通用;建設公司財務不一定熟,首次出現加 ⓘ。
分析 → 作戰台的 A1 卡標題 工作檔現況
有個性,是產品聲音的一部分,建議留。勾=同意保留。
分析頁右上角的身分切換鈕 工作檔現況
「檢視身分」像在驗證你的身分;其實是模擬視角。
分析 → 熟成訂單的 E1 矩陣(整排「發酵中」) 工作檔現況
熟成矩陣裡整排「發酵中」——業務會以為在做麵包。逐分頁檢查抓到的。
業務獎金 → 方案設定的三張方案卡 工作檔現況
方案設定頁全是圈內話。代銷懂;建設公司財務簽核時會問。
分析 → 對業主的 F1 稽核板 工作檔現況
對業主分頁的稽核指標。「幽靈客」給業主看有點驚悚。
頂欄搜尋框右端的 ⌘K 小徽章 工作檔現況
全站(示意用建案首頁功能磚) 工作檔現況無此設定
全站所有日期(示意用戶別視窗的下訂日) 工作檔現況只有西元
戶別/車位視窗的三個日期欄、來客名單來訪日期 工作檔現況
銷控表緊湊模式的 36px 格、各頁 hover 才出字的圓鈕 緊湊模式今天剛修好(原本車位緊湊完全沒作用)
價格表溢價總額、建案總覽總銷金額 工作檔現況
業務報表右上的「列印 PDF」 工作檔現況(無列印樣式)
妳問「每一個分頁、每一個頁面、每一個視窗都看了嗎」——誠實回答:上一版沒有全看。這輪補齊:18 頁 + 分析 7 分頁 + 報表 3 分頁 + 獎金 3 分頁 + 人員雙視圖 + 名單篩選/抽屜 + 15 個彈窗/選單/導覽,共 44 個畫面狀態逐張截圖看過。清單在本節底部。以下是新抓到的 6 個問題(N 系列),每個都做了對照。
第一次開站的使用導覽 → 第 1 步「左側工具列」 工作檔現況(第 2 步之後正常,只有第 1 步沒底色)
來客名單點任一列跳出的詳情卡(往來紀錄分頁) 工作檔現況
分析 → 名單媒體分頁 → C1 來源品質對帳的表 工作檔現況
| 來源 | 組數 | W日回簽 | W日淨簽 | CPL |
|---|---|---|---|---|
| FB | 64 | 5/64・7.8% | 2/64・3.1% | 待接花費資料 |
建案總覽 → 右上「+新增建案」 工作檔現況
業務獎金 → 發放列表 → 任一戶「+加扣款」跳出的視窗 工作檔現況
人員管理刪除成員、批次刪除戶別的確認框 工作檔現況(全站唯二置中的視窗)
確定要移除 林曉青?
確定要移除 林曉青?
| 範圍 | 狀態 |
|---|---|
| 18 個頁面 | 建案總覽・建案首頁・來客名單・銷控表・價格表・分析・業務報表・勾勾表範本・業務獎金・人員・權限・帳單・操作明細・已刪來客・最新消息・現場收客・使用指引・設計規範 |
| 分析 7 分頁 | 作戰台・產品價格・名單媒體・業務・熟成訂單・對業主・資料 |
| 報表/獎金分頁 | 日報・週報・月報|我的獎金・發放列表・方案設定 |
| 其他視圖 | 人員卡片視圖・人員列表視圖・名單日期篩選展開 |
| 21 個彈窗/選單 | 戶別編輯・車位編輯・批次修改・批次調底價・批次建立・新增單筆・價格歷史・刪除確認・來客詳情・勾勾表編輯・Excel 匯入・新增建案・QR・邀請成員・新增角色・新增方案・加扣款・齒輪選單・通知面板・帳號選單・首次導覽 |
舊版文件的 P1–P20、W1–W7 也全部出自實際截圖;上一版漏看的是分析內頁與部分彈窗,E4 的錯誤(說匯入沒有拖放)就是這樣來的,已更正並在 E4 標明。
CRM 市場飽和是事實,但房地產垂直 CRM 的對手(叡揚、鼎新客製、Excel+LINE 群組)介面都停在十年前。視覺差異化有效的前提:動效必須指向「這家更懂代銷」,而不是「這家會做動畫」。
| 原則 | 落地做法 |
|---|---|
| 快、輕、可關 | 主要動效 ≤0.45 秒、彈簧收尾含回彈總長 ≤0.8 秒(本文件 demo 的彈簧取樣約 0.9 秒,正式實作要調短——Codex 二審抓的,數字要誠實);同一動效一個流程看 3 次不膩才過關;「減少動態效果」開關永遠存在。這也是回答「老電腦會不會卡」的標準答案。 |
| 動效帶資訊 | D2 島變長=選取數在變;D4 滾輪=哪一位數在變;D8 蓋章=哪一戶剛成交。每個動效回答一個問題,才不會被說花俏。 |
| 一個記憶點打深 | 展示鉤子是「銷控牆」:別家是表格,我們是有物理感的牆——圈選像圈房子、改狀態像蓋章。三分鐘動線:總覽 → 點進建案 → 銷控牆選 5 戶蓋章 → 島跳出 → 價格表看溢價 → 操作明細收尾(每一筆都有紀錄)。 |
| 賣點排序 | 對建設公司:①底價保密 ②操作稽核 ③業主檢視。對代銷:①銷控牆手感 ②獎金自動算 ③現場收客離線可用。視覺是門面,成交靠這六件事。 |
| 兩種客戶兩條動線Codex 補 | 建商與代銷不是同一種客人:代銷版 demo 主打收客→追客→銷控→獎金;建商版主打契約→收款→客變→貸款→驗屋→業主對帳(即 X 系列)。一條動線打兩種人會兩邊都不痛。 |
| 競品比較講證據Codex 補 | 「別家介面停在十年前」是嘴,不是證據——台灣已有建案系統在賣收款與客變流程。改講可量測的:撞單率、日結工時、逾期追客率、對帳時間。競品表比流程/權限/導入/價格,不比動畫數量。 |
| 層面 | 要想清楚的事 |
|---|---|
| 資料搬家 | 客戶舊資料在 Excel/舊系統/業務私人 LINE。「誰幫他們整理格式」是導入成敗關鍵——要不要提供付費導入服務? |
| 結案後資料歸屬 | 完銷、代銷約滿後名單歸誰?要能「結案打包匯出+凍結唯讀」。合約與功能都要有答案。 |
| 跨案的人與客 | 一個業務跑兩案很常見;同一客看兩案時獎金歸屬與重複判定規則要先想,不然上線第一個月就吵。 |
| 斷網現場 | 收客表已有離線暫存——放進賣點;銷控牆也該有「斷線中・顯示 3 分鐘前狀態」的誠實標示。 |
| 教育訓練 | 代銷流動率高=永遠有新人。導覽已有(N1 修掉底色 bug 後)建議加「可跳過的 5 步新手引導」。 |
| 示範/正式切換 | 賣的時候用漂亮假資料(現在這份),簽約後一鍵清空。架構要先留這個機制。 |
| 吉日文化 | 交屋、簽約挑日子是常態。日期欄旁留「備註吉時」小欄位,成本低、很「懂台灣」。 |
| 問題 | 目前系統的答案 |
|---|---|
| 「業務離職會不會把名單帶走?」 | ✅ 權限+匯出留紀錄;加 P8 電話遮罩更完整 |
| 「底價會不會被業務看到?」 | ✅ 底價檢視獨立角色;加 P17 總結列更好賣 |
| 「手機/平板能用嗎?」 | ⚠️ RWD 有基礎,A5 觸控細節要補 |
| 「跟我現在的 Excel 怎麼接?」 | ✅ 匯入匯出都有(含四步驟對照) |
| 「LINE 能不能通知我?」 | ⚠️ 權限頁有 LINE 通知(方案未含)——定價要定案 |
| 「一案多少錢?可以只買一案嗎?」 | ✅ 方案表有;P15 價格矛盾先修 |
| 「你們倒了我的資料怎麼辦?」 | ❌ 未回答:要準備匯出承諾/備份 SLA 說法 |
| 「可以客製報表給業主嗎?」 | ⚠️ 業主檢視+週報有;自訂報表在 Business 方案但功能未做 |
| 「動畫這麼多會不會卡?」 | ✅ 標準答案:全部 ≤0.45 秒+可關+單檔離線可跑 |
| 「個資法查核過得了嗎?」 | ⚠️ 操作紀錄是底氣;加 P8 遮罩+刪除權流程才完整 |
| 批次 | 內容 | 預估 |
|---|---|---|
| P0 正確性 | U6 詳情與銷控資料不一致・P15 價格矛盾・P19 錯誤狀態缺失・N1 導覽底色(B1–B3 已修) | 優先於一切視覺項 |
| S 級一批 | D1 D4 D6 D7 D8 D10・E1 E4・P2 P3 P5 P9 P10 P11 P12 P14 P16 P18 P20・U1 U2 U4 U5 U7 U8・W1–W10・A1 A4 A6・N2 N3 N5 N6 | 4–5 個工作階段 |
| M 級一批 | D2 D3 D5 D9・E2 E3 E5・P6 P7 P8 P13 P17 P19・U3 U6・A2 A3 A5 A7・N4(E6 已撤回) | 每項約 1 個階段 |
| 要先問人 | P1(妳按完選 a/b/c)・P4(艾德業務端)・P15(Enson)・N6(統一或例外) | — |
預估含驗收(無頭渲染+逐項截圖),不是只寫完 code。要趕請給優先序,我不會自己偷降標。
我把整份文件送給 Codex(另一顆模型)複查。它最重要的提醒:這份文件是「動效與介面提案集」,但房地產 CRM 的成交關鍵在交易流程、資料一致性與法遵——以下 12 項是台灣建設/代銷會當場問「這你們有嗎」的主流程,目前 demo 完全沒有。這些是產品功能層(需要 Enson 的後端),不是改版面就能做的;勾選=列入產品路線圖討論。每項附介面落點與流程示意。
接在第 09 節「客戶十問」之後;答不出的通常代表產品有缺口,不只是話術問題 Codex 二審新增
| 問題 | 對應 |
|---|---|
| 「兩個案場同時動同一戶會不會重複賣?斷網後誰算數?」 | X1 |
| 「資料放哪個國家?不同建商能不能完全隔離?你們工程師看得到嗎?」 | 要有標準答案 |
| 「多久備份一次?出事多久通知我?」 | 要有 SLA 文件 |
| 「一案幾戶幾客幾人同時用?拿哪台案場電腦測過?」 | 效能報告 |
| 「今天看到的哪些是真的、哪些只是畫面?」 | DT3 證據標籤 |
| 「能不能串 LINE OA、電子發票、會計 ERP?API 另外算錢嗎?」 | 整合定價 |
| 「導入多久?舊資料誰清?新人訓練怎麼算?」 | 導入服務定價 |
| 「合約期、漲價、終止後匯出與刪除證明怎麼規定?」 | 合約模板 |
| 「建商、代銷、地政士、外部會計的權限怎麼隔?」 | 權限頁已有基礎 |
| 「契約版本、實價申報、個資同意的證據,系統給什麼?」 | X2 X3 X12 |