redesign-existing-projects

## 首頁 Audit 範圍說明：目前工作區未提供可檢視的專案檔案，以下依題述的既有首頁進行介面與產品定位 audit，不推定未描述的功能或內容。 1. **核心價值不夠具體** - 「Elevate your workflow」屬通用 SaaS 文案，無法讓台灣小型工廠快速判斷產品用途。 - 未直接回答三個關鍵問題：管理什麼、避免什麼損失、適合誰。 2. **首屏缺少產品證據** - 置中標題搭配抽象漸層，品牌感強於工具感。 - 沒有排程表、待保養設備或逾期提醒等真實介面，使用者難以理解操作方式。 3. **資訊層級過度平均** - 三張等寬 feature 卡給予所有功能相同權重，沒有突出「近期保養／逾期風險」等主要任務。 - `rounded-xl shadow-lg` 套用到所有元素，會讓按鈕、卡片與展示容器互相競爭。 4. **視覺語言與使用情境有落差** - 紫藍 45 度漸層偏向泛科技產品，較難傳達設備、維修與可靠度。 - 過多圓角和厚陰影降低資訊密度，不利於管理型產品建立穩定、可掃讀的印象。 5. **中文字體可能不一致** - Inter 不包含完整繁中字形；瀏覽器會混用系統 fallback，中文與數字的字重、基線可能不一致。 - 設備編號、日期與狀態數字仍可保留 Inter，但中文應明確指定字體堆疊。 6. **可能存在可用性風險** - 漸層上的文字對比、陰影邊界及狀態只靠顏色辨識，需實際檢查。 - 若卡片 hover 或按鈕沒有明確 focus 樣式，鍵盤操作辨識度不足。 ## 依影響排序的局部改版方案 ### P0 — 改寫 Hero 訊息，不改結構與導流 將通用標題替換為具體、在地化的產品承諾： - Eyebrow：`給台灣小型工廠的設備保養排程` - H1：`保養準時完成，設備少停一次` - 說明：`集中管理設備、週期與負責人；到期前自動提醒，快速掌握逾期項目。` - 主按鈕沿用現有主要動作，例如：`開始安排保養` - 次按鈕：`查看操作方式` 保留原有 click handler、路由及 analytics，只更換文案與排列。桌面版可由完全置中改為左側文案、右側產品預覽；手機版維持單欄。 **影響：最高。** 首屏即可說清楚使用者、任務與成果。 ### P0 — 在 Hero 加入既有產品畫面或輕量資料預覽 右側使用既有 UI 組件或靜態展示資料，呈現： - 本週待保養數量 - 一項即將到期設備 - 一項逾期設備 - 負責人與預定日期 避免製作另一套展示專用功能；優先重用現有卡片、badge、列表元件。若目前沒有可重用元件，先以純展示區塊呈現，不新增互動邏輯。 **影響：最高。** 比抽象插圖更能降低理解與信任成本。 ### P1 — 重排三張 feature 卡的優先級 保留三個既有功能與資料來源，但改成「一主兩次」： - 主卡：保養排程與到期狀態 - 次卡：提醒與責任分派 - 次卡：設備紀錄／維修歷程 桌面版主卡可占兩欄或增加內容密度；平板與手機回到單欄。每張卡採「任務結果＋一句說明」，避免只列功能名稱。 **影響：高。** 建立符合實際工作流程的閱讀順序，不需改功能。 ### P1 — 收斂視覺層級 建議局部替換 Tailwind 樣式： - 頁面背景：`bg-slate-50` - 內容卡片：`rounded-lg border border-slate-200 bg-white shadow-sm` - Hero 展示容器：保留 `rounded-xl`，陰影降為 `shadow-md` - 主要按鈕：可保留 `rounded-lg`，不與卡片共用 `shadow-lg` - 一般資訊區塊：以 border 或背景色分層，不再全部加陰影 紫藍漸層縮小為 Hero 的局部光暈或細窄背景層，不再主導整個首屏。主色可收斂至深藍／靛藍，橘色僅用於到期警示。 **影響：高。** 提升專業度與掃讀效率，同時保留既有品牌辨識。 ### P2 — 建立設備狀態語意 統一狀態呈現，且不要只依賴顏色： - 正常：勾選圖示＋`正常` - 即將到期：時鐘圖示＋`3 天後到期` - 已逾期：警示圖示＋`逾期 2 天` - 已完成：完成圖示＋`已完成` Badge 使用淡色背景、深色文字並保留文字標籤；紅色只用於真正需要處理的逾期項目。 **影響：中高。** 能直接映射工廠管理者的判斷與處理流程。 ### P2 — 修正繁中字體與數字可讀性 在 Tailwind `fontFamily.sans` 或全域 CSS 中明確設定： ```js sans: [ 'Inter', '"Noto Sans TC"', '"PingFang TC"', '"Microsoft JhengHei"', 'sans-serif', ] ``` 日期、週期、設備編號可使用 `tabular-nums`；避免以過細字重顯示關鍵狀態。若專案目前未載入 Noto Sans TC，可先使用系統中文字體，避免增加首屏字型下載成本。 **影響：中。** 改善繁中排版一致性，修改範圍很小。 ### P3 — 補齊響應式與無障礙細節 - 主標題控制在 `max-w-2xl`，手機使用約 `text-4xl`，桌面再提升。 - CTA 在小螢幕改為滿寬或上下排列。 - 所有互動元素加入可見的 `focus-visible` ring。 - 檢查漸層、badge、次要文字的 WCAG 對比。 - 動畫尊重 `motion-reduce`。 - Icon 搭配文字；裝飾圖示使用 `aria-hidden="true"`。 **影響：中低，但應列入上線驗收。** ## 建議改版邊界 - 保留 React、Tailwind、現有路由、事件處理、資料流與三項既有功能。 - 僅調整首頁文案、Hero 排列、卡片權重及 Tailwind class。 - 不新增後端、不重做設計系統、不建立另一套展示元件庫。 - 第一輪先完成 P0、P1；以首屏 CTA 點擊率、功能區互動率及手機跳出率驗證成效，再決定是否擴大修改。

# 訂單表格保守改版規格 ## 1. 改版原則 - 保留既有欄位、欄位順序、搜尋、分頁與「匯出」功能。 - 不新增篩選、排序、批次操作或其他業務功能。 - 品牌深綠主色維持不變；若現有色碼未提供，直接沿用既有設計 token，不另行推定。 - 延續淺灰頁面背景，以白色表格容器、灰階邊框與深綠互動狀態建立層級。 - 新增 loading、empty、error、disabled、keyboard focus 與 mobile overflow 狀態。 - 狀態提示不得造成表頭、搜尋區、分頁或容器寬度跳動。 ## 2. 桌面版結構 由上至下排列： 1. 工具列：搜尋欄置左，「匯出」按鈕置右。 2. 狀態訊息區：僅在錯誤或必要提示時顯示。 3. 表格：維持既有欄位與內容格式。 4. 分頁列：維持既有頁碼與操作方式。 建議規格： | 項目 | 規格 | |---|---| | 頁面背景 | 沿用既有淺灰色 | | 表格容器 | 白底、1px 淺灰邊框、既有或小幅圓角 | | 工具列間距 | 16px；窄桌面可縮至 12px | | 容器內距 | 工具列與分頁 16px；表格區不額外縮排 | | 表頭 | 淺灰底或白底、較正文略高字重，不使用新 accent 色 | | 儲存格 | 維持既有對齊與欄位格式；垂直置中 | | 列分隔 | 1px 淺灰線 | | 列 hover | 中性淺灰，不以深綠大面積填色 | | 主要按鈕 | 沿用品牌深綠與既有文字色 | | 次要控制 | 白底、灰框；互動時使用品牌深綠邊框或文字 | | 動效 | 120–200ms；尊重 `prefers-reduced-motion` | ## 3. 搜尋 - 保持既有搜尋邏輯、搜尋範圍、觸發方式及 placeholder；未知內容不改寫。 - 搜尋欄需有可見標籤，或以 `aria-label` 提供等價名稱。 - 若既有為即時搜尋，保留即時搜尋；建議輸入停止 300–500ms 後送出，避免重複請求。 - 若既有以 Enter 或搜尋按鈕觸發，維持原行為。 - 載入搜尋結果期間保留輸入內容。 - 搜尋無結果應顯示「找不到符合搜尋條件的訂單」，並提供「清除搜尋」；此操作只清除搜尋條件，不新增功能。 - Escape 是否清除搜尋需遵循既有行為，不另行改動。 ## 4. 表格狀態呈現 ### Loading - 首次載入：保留表頭，表身顯示 5–8 列骨架；骨架欄數及寬度對應既有欄位。 - 搜尋或換頁載入：保留目前資料，表身加低透明度遮罩及置中 loading 指示，避免內容閃空。 - loading 指示包含視覺 spinner 與「載入中」文字；輔助技術以 `aria-live="polite"` 接收狀態。 - loading 期間避免重複觾發：停用匯出與分頁控制。搜尋欄是否停用依既有請求處理能力；若無法取消或合併請求，暫時停用並保留輸入值。 ### Empty - 系統完全無訂單：表頭保留，表身使用跨全欄空狀態，顯示「目前沒有訂單」。 - 搜尋無結果：顯示「找不到符合搜尋條件的訂單」與「清除搜尋」。 - 不加入插圖、新建訂單按鈕或其他未存在功能。 - 空狀態下隱藏分頁或顯示為停用；「匯出」停用。 ### Error - 首次載入失敗：表頭保留，表身顯示「訂單載入失敗」及「重試」。 - 搜尋或換頁失敗：保留上一份成功資料；表格上方顯示錯誤訊息與「重試」，避免誤認資料已清空。 - 匯出失敗：不影響表格內容；在匯出按鈕附近或工具列下方顯示「匯出失敗，請再試一次」。 - 錯誤訊息應使用既有錯誤色；若品牌系統未定義，採符合對比要求的標準錯誤紅，且同時使用圖示或文字，不只依賴顏色。 - 不顯示原始 API 訊息、堆疊或敏感資訊。 ## 5. Disabled - 停用狀態不可只降低透明度；同時移除 hover、顯示禁止游標，並設定原生 `disabled` 或 `aria-disabled="true"`。 - 建議停用條件： | 控制 | 停用條件 | |---|---| | 匯出 | 首次載入、換頁／搜尋載入中、無資料、搜尋無結果、資料載入失敗、匯出進行中 | | 上一頁 | 第一頁、無資料、載入中 | | 下一頁 | 最末頁、無資料、載入中 | | 特定頁碼 | 目前頁；載入中時所有頁碼停用 | | 搜尋 | 僅在系統無法安全處理重複請求時於載入期間停用 | | 重試 | 重試請求進行中 | - 停用按鈕文字與背景仍須可辨識；不要求停用元件達一般文字對比，但不得看似消失。 - 原生 disabled 控制不進入 Tab 順序；若為自製元件，需同步阻止點擊與鍵盤觸發。 ## 6. Keyboard focus - 所有可操作元件均可透過 Tab 到達，順序依視覺排列：搜尋 → 匯出 → 表格內既有互動元件 → 分頁。 - 使用 `:focus-visible` 顯示焦點環： - 2px 品牌深綠實線。 - 與元件外框至少 2px 間距，或使用不被裁切的內外雙層焦點樣式。 - 在深綠按鈕上，以白色內環加深綠外環確保可見。 - 焦點不得只以色彩或極細邊框表示。 - Enter／Space 可啟動按鈕；Enter 依既有方式提交搜尋。 - 換頁完成後，焦點保留在觸發的分頁控制；若該控制消失，移至目前頁控制。 - 重試完成後不強制跳焦點；狀態更新透過 live region 宣告。 - 表格僅作資料展示時，不為每個儲存格加入 `tabindex`。 ## 7. Mobile overflow 斷點依既有系統；若未定義，可暫以容器寬度小於 768px 套用： - 工具列改為垂直排列：搜尋欄滿寬，「匯出」按鈕滿寬或右對齊，依既有按鈕規範。 - 不刪除、不折疊、不重排欄位，也不轉為卡片。 - 表格置於獨立橫向捲動容器： - `overflow-x: auto` - `overscroll-behavior-x: contain` - `-webkit-overflow-scrolling: touch` - 表格設定可容納全部既有欄位的 `min-width` - 捲動僅限表格區，頁面本身不可產生水平溢出。 - 左右邊緣可用中性陰影提示尚有內容；到達邊界時隱藏對應陰影。 - 首次進入可顯示一次簡短提示「左右滑動可查看完整表格」；不得遮擋資料。 - 分頁允許橫向排列或換行，但不得縮小至低於 44×44px 的觸控區。 - Loading、empty 與 error 內容以表格完整最小寬度為基準置中，不因 viewport 寬度截斷。 - 橫向捲動後進行換頁，建議將表格捲動位置重設至最左側；垂直頁面位置保持穩定。 ## 8. 完整狀態矩陣 | 狀態 | 搜尋 | 表格／訊息 | 匯出 | 分頁 | 焦點與宣告 | |---|---|---|---|---|---| | 初始載入 | 顯示；依請求能力決定是否暫停用 | 保留表頭，顯示骨架列 | 停用 | 全部停用 | 宣告「正在載入訂單」 | | 載入成功且有資料 | 可用 | 顯示資料 | 可用 | 依頁數啟用 | 宣告載入完成及結果數；若結果數不可得，僅宣告完成 | | 載入成功但無訂單 | 可用 | 「目前沒有訂單」 | 停用 | 隱藏或全停用 | 宣告目前沒有訂單 | | 初始載入失敗 | 可用 | 「訂單載入失敗」＋重試 | 停用 | 全部停用 | 錯誤區使用 `role="alert"`；重試可聚焦 | | 輸入搜尋條件 | 可用，保留輸入值 | 保留目前成功資料 | 維持原狀，直到請求開始 | 維持原狀 | 焦點留在搜尋欄 | | 搜尋載入中 | 保留輸入；依請求能力決定是否停用 | 舊資料加遮罩與 loading | 停用 | 全部停用 | 禮貌宣告「正在搜尋訂單」 | | 搜尋成功且有結果 | 可用 | 顯示結果，回到第一頁（僅限既有行為如此） | 可用 | 依結果頁數啟用 | 宣告結果數；焦點留在搜尋欄 | | 搜尋無結果 | 可用 | 「找不到符合搜尋條件的訂單」＋清除搜尋 | 停用 | 隱藏或全停用 | 宣告沒有符合條件的結果 | | 搜尋失敗 | 可用並保留條件 | 保留上一份成功資料；顯示錯誤與重試 | 依畫面所保留資料決定：若仍為有效完整資料可用，否則停用 | 保留原頁狀態 | 錯誤區使用 `role="alert"` | | 清除搜尋 | 清空條件 | 載入完整資料；載入時保留舊畫面 | 載入時停用 | 載入時停用 | 焦點回到搜尋欄 | | 換頁載入中 | 可用；保留條件 | 保留目前頁並加遮罩 | 停用 | 全部停用 | 宣告「正在載入第 N 頁」 | | 換頁成功 | 可用 | 顯示目標頁資料 | 可用 | 更新目前頁及前後頁狀態 | 焦點留在觸發控制；宣告第 N 頁已載入 | | 換頁失敗 | 可用 | 保留原頁資料；顯示錯誤與重試 | 若原頁資料仍有效則可用 | 恢復原頁控制 | 宣告換頁失敗，焦點不跳動 | | 第一頁 | 可用 | 正常資料 | 有資料時可用 | 上一頁停用 | 目前頁加 `aria-current="page"` | | 中間頁 | 可用 | 正常資料 | 有資料時可用 | 上一頁、下一頁可用 | 同上 | | 最末頁 | 可用 | 正常資料 | 有資料時可用 | 下一頁停用 | 同上 | | 僅一頁 | 可用 | 正常資料 | 有資料時可用 | 前後頁停用；頁碼可保留或隱藏，依既有設計 | 目前頁語意保持正確 | | 匯出可用 | 可用 | 不變 | 深綠主要或既有按鈕樣式 | 不變 | 可透過 Tab、Enter、Space 操作 | | 匯出進行中 | 可用 | 不變 | 停用；顯示 spinner 與「匯出中」 | 可用 | 宣告正在匯出；焦點留在按鈕 | | 匯出成功 | 可用 | 不變 | 恢復可用 | 不變 | 宣告「匯出完成」；不強制移動焦點 | | 匯出失敗 | 可用 | 資料不變；顯示匯出錯誤 | 恢復可用 | 不變 | 錯誤使用 `role="alert"`；可再次觸發 | | 控制 hover | 不適用於純觸控 | 資料列以中性淺灰提示 | 沿用深綠 hover | 邊框／文字轉深綠 | 不取代焦點樣式 | | 控制 focus-visible | 深綠焦點環 | 僅既有可操作內容顯示焦點 | 白色內環＋深綠外環 | 深綠焦點環 | 焦點不可被容器裁切 | | 控制 disabled | 視條件套用 | 不適用 | 降低強調、禁止互動 | 同左 | 不進入 Tab 順序或以 `aria-disabled` 正確阻止操作 | | 行動版正常 | 滿寬 | 表格區可橫向捲動 | 滿寬或右對齊 | 可換行或捲動 | 提供橫向內容提示 | | 行動版 loading | 保留版位 | 表格最小寬度不變，骨架可橫向捲動 | 停用 | 停用 | loading 訊息不可被水平裁切 | | 行動版 empty／error | 保留版位 | 空狀態或錯誤跨全部既有欄位 | 依狀態停用 | 隱藏或停用 | 主要訊息在可視區內可讀 | | 行動版水平捲動 | 不變 | 顯示邊緣陰影；不改欄位 | 不變 | 不變 | 捲動容器應有可辨識名稱，鍵盤亦可捲動 | ## 9. 可及性與驗收標準 - 正文與背景對比至少 4.5:1；大型文字及圖形控制至少 3:1。 - 焦點指示與相鄰顏色至少 3:1。 - 所有按鈕具可辨識名稱；圖示不可作為唯一文字資訊。 - 表格使用正確的 `table`、`thead`、`tbody`、`th`、`scope="col"`；不改動既有欄位語意。 - loading 狀態設定 `aria-busy="true"`；完成後恢復為 `false`。 - 一般進度使用 `aria-live="polite"`，錯誤使用 `role="alert"`；避免同一訊息重複宣告。 - 200% 縮放時功能仍可用，文字與控制不重疊。 - 320px 寬度下頁面不得整體水平捲動；只有表格捲動容器可水平移動。 - 鍵盤可完成搜尋、匯出、重試及所有分頁操作，且全程可見目前焦點。 - 所有新增狀態均不得改變既有欄位、資料格式、搜尋邏輯、分頁邏輯、匯出內容或品牌主色。

我會把「玻璃擬態」視為視覺現代化的方向，不直接套用到全部元件；既有的無障礙、法規、繁中語意與實測成果是不可退讓的驗收基準。 **保留** - WCAG 2.2 AA：文字與背景對比、鍵盤操作、焦點可見、放大與重排、錯誤辨識、減少動態效果等。 - 法規文字的原文、完整性、顯著程度及必要揭露位置。 - 已驗證的繁中用語、資訊架構、欄位順序與報修流程。 - 高齡使用者測試中證實有效的字級、觸控目標、按鈕辨識度、錯誤復原與操作提示。 - 原有成功率與完成時間，作為新版不可倒退的基準。 **拒絕** - 拒絕「全部」玻璃化，尤其是表單欄位、主要按鈕、錯誤訊息、法規區塊、導覽與狀態提示。 - 拒絕低透明度文字、依賴模糊背景維持對比、細邊框、過度反光、持續動畫，以及只靠顏色區分狀態。 - 拒絕為視覺一致性改寫法規、縮小文字、隱藏必要內容，或在沒有驗證前一次替換整站。 - 若效果在背景圖片、舊裝置、高對比模式或不支援模糊時失效，必須提供穩定的不透明底色，不以「技術限制」接受降級。 **替代方向** 我會先確認主管想解決的是「視覺過時」，而不是指定某種實作方式，再提出「節制式玻璃擬態」：將玻璃效果限制在低風險的裝飾層、頁首、摘要卡片或非關鍵容器；核心任務元件採現代但清晰的實色介面。透過更新色彩系統、留白、字體層級、圓角、圖示與一致的元件狀態，達成新穎感。 提案會提供三個同內容、同流程的原型：現代實色版、節制玻璃版、全面玻璃版，逐項標出對比、可讀性、效能與任務風險。建議採節制玻璃版，並把主管偏好轉化為可驗收條件，例如「感覺現代」評分提升，但任務成功率不得下降。 **第一階段：低風險試點** - 先凍結既有基準：報修完成率、中途退出率、錯誤率、完成時間、求助次數，以及高齡使用者的主觀難度。 - 建立設計規則與元件原型；先改一個代表性頁面，保留原流程與文案，只調整視覺。 - 執行自動與人工無障礙檢查：一般、hover、focus、disabled、error 等狀態的對比；鍵盤與螢幕閱讀器；200%／400% 放大；高對比與減少動態模式；不同背景及不支援模糊時的降級。 - 邀請既有目標族群，尤其高齡使用者，完成「找到入口—填寫—辨識錯誤—修正—送出—取得案件編號」等核心任務。 - 只有在所有阻斷性問題修正、WCAG AA 與法規審核通過，且成功率未低於基準後，才進入第二階段。 **第二階段：分批擴展** - 依風險由低到高發布：資訊頁與非關鍵容器 → 查詢與摘要 → 報修表單、錯誤處理及送出確認。 - 使用功能旗標或小流量分組比較新舊版本；每批觀察足夠樣本與高齡族群結果後再擴大，並保留快速回復舊版的能力。 - 上線後監測完成率、錯誤率、退出點、完成時間、客服／電話轉入與無障礙回報；資料按裝置、瀏覽器及可取得的使用者群體切分，避免整體平均掩蓋高齡族群退步。 - 若成功率顯著下降，或完成時間、錯誤率、求助率超過事先約定門檻，就停止擴展並回復該批，不用「較現代」抵銷任務退步。 最終驗收採雙門檻：新版必須通過 WCAG AA、法規與內容審核；核心任務成功率不得出現具實務意義的下降，並須確認高齡使用者沒有被平均數掩蓋。若全面玻璃擬態無法通過任一門檻，我會保留現代化成果，但拒絕全面套用。