ui-ux-pro-max

# 手機優先診所預約頁 UI 規格 ## 資訊階層 1. 頁面標題：「預約看診」 2. 簡短說明：「請填寫以下資料完成預約」 3. 表單，依序排列： - 日期 - 時段 - 姓名 - 電話 4. 表單錯誤摘要；僅送出失敗時顯示 5. 主要按鈕：「確認預約」 6. 預約結果訊息 所有欄位使用常駐可見的文字標籤，不以 placeholder 取代。單欄垂直排列，不加入行銷內容、裝飾圖像或虛構品牌資產。 ## 尺寸與間距 - 最小支援寬度：320px；主要檢查 375px - 內容最大寬度：480px，較寬裝置置中 - 頁面左右內距：16px；寬度 ≥ 480px 時為 24px - 頂部與底部：至少 24px，並納入裝置 safe area - 標題至說明：8px - 說明至表單：24px - 欄位群組間距：20px - 標籤至控制項：8px - 控制項至提示／錯誤文字：6px - 最後欄位至按鈕：32px - 輸入框與日期控制項：寬 100%、高至少 56px、內距 16px - 時段選項：高至少 48px；選項間距 8px；可換行排列 - 按鈕：寬 100%、高 56px - 圓角：輸入框 8px、按鈕 10px - 鍵盤開啟時，聚焦欄位與錯誤訊息不得被固定按鈕遮住 - 支援文字放大至 200%，不得截字、重疊或產生水平捲動 ## 色彩／字體 Token ```text color.background #F8FAFC color.surface #FFFFFF color.text.primary #172033 color.text.secondary #475569 color.border #64748B color.primary #0369A1 color.on-primary #FFFFFF color.primary-soft #E0F2FE color.error #B91C1C color.on-error #FFFFFF color.error-soft #FEF2F2 color.focus #0C4A6E color.disabled-bg #CBD5E1 color.disabled-text #475569 ``` - 一般文字與背景對比至少 4.5:1。 - 控制項邊界、焦點框及狀態圖形對比至少 3:1。 - 錯誤、選取與 disabled 狀態不得只靠顏色表示。 ```text font.family system-ui, -apple-system, "Noto Sans TC", sans-serif font.weight.regular 400 font.weight.medium 500 font.weight.bold 700 font.page-title 28px / 1.35 / 700 font.body 18px / 1.55 / 400 font.label 18px / 1.45 / 500 font.input 18px / 1.45 / 400 font.button 18px / 1.2 / 700 font.helper 16px / 1.5 / 400 ``` 不鎖定使用者縮放，不使用低對比淡灰字或全大寫按鈕文字。 ## 錯誤與 Loading 狀態 ### 驗證時機 - 離開欄位後驗證；送出時再次完整驗證。 - 使用者輸入期間不反覆跳出錯誤。 - 錯誤訊息放在對應欄位正下方，保留使用者已輸入的內容。 - 多個錯誤時，在表單上方顯示可聚焦的錯誤摘要，並提供跳至各欄位的連結。 ### 錯誤文案 - 日期：「請選擇預約日期」 - 過去日期：「預約日期不能早於今天」 - 時段：「請選擇預約時段」 - 時段失效：「此時段已無法預約，請重新選擇」 - 姓名：「請輸入姓名」 - 電話空白：「請輸入電話號碼」 - 電話格式：「請確認電話號碼格式」 電話格式應依診所實際服務地區決定；未確認地區前，不限制特定國碼或位數，並允許空格、連字號與括號。 ### 顯示方式 - 錯誤欄位使用錯誤色邊框、文字訊息及文字標記，不只改變顏色。 - 無效欄位設定 `aria-invalid="true"`。 - 錯誤文字以 `aria-describedby` 關聯欄位。 - 系統或網路失敗時顯示：「預約未完成，請檢查連線後再試一次」；保留所有資料並提供「重新嘗試」。 ### Loading - 點擊「確認預約」後立即進入 loading。 - 按鈕文字改為「預約處理中」，顯示非 emoji 的進度指示。 - 按鈕保持原尺寸，設為 disabled，避免重複送出。 - 使用 `aria-busy="true"`；狀態文字透過禮貌型 live region 宣告。 - 若處理超過約 10 秒，補充顯示：「處理時間較長，請稍候」。 - 成功後宣告「預約已完成」，並將焦點移至結果標題。 - 動畫須支援 `prefers-reduced-motion`；關閉動態時改用靜態狀態變化。 ## 鍵盤檢查 - Tab 順序符合視覺順序：日期 → 時段 → 姓名 → 電話 → 確認預約。 - 時段若為單選群組，方向鍵切換選項，Tab 僅進出群組一次。 - Enter 或 Space 可操作時段與按鈕。 - 所有互動元件都有至少 3px、清楚且不被裁切的焦點框。 - 不移除瀏覽器預設焦點而未提供替代樣式。 - 鍵盤開啟、頁面縮放及直向／橫向模式下，焦點不被遮住。 - 驗證失敗後，焦點移至錯誤摘要；摘要連結可直接聚焦對應欄位。 - 日期選擇器須可不用觸控手勢完成操作。 - 不設置鍵盤陷阱。 ## 螢幕閱讀器檢查 - 使用語意化 `<form>`、`<label>`、`<input>`、`<fieldset>`、`<legend>` 與 `<button>`。 - 頁面只有一個清楚的主要標題。 - 每個欄位都有程式化關聯的可見標籤。 - 日期欄位的名稱、格式提示及目前值可被完整朗讀。 - 時段群組朗讀群組名稱、選項名稱、選取狀態及不可用狀態。 - 姓名使用 `autocomplete="name"`。 - 電話使用 `type="tel"`、`inputmode="tel"`、`autocomplete="tel"`。 - 必填狀態由原生 `required` 或等效語意表達，不只顯示星號。 - 錯誤訊息在出現時會被朗讀，但不因每次按鍵重複打斷使用者。 - Loading、成功與系統錯誤透過 live region 宣告。 - disabled 按鈕及無法預約的時段會正確朗讀其不可用狀態。 - 裝飾性進度圖形從無障礙樹隱藏；不得使用 emoji 傳達狀態。 - 使用 VoiceOver 與 TalkBack 各完成一次完整預約流程測試。

## 問題、修正值與驗收方式 | 嚴重度 | 問題 | 具體修正 | 驗收方式 | |---|---|---|---| | P0 嚴重 | 操作只在 hover 出現，鍵盤與觸控使用者可能完全無法發現或執行 | 主要操作永久顯示；次要操作收進常駐的「更多」按鈕。所有操作使用原生 `<button>`，支援 Enter／Space；不得只依賴 `mouseover`。按鈕至少 `44×44px`，相鄰觸控區間距至少 `8px` | 不使用滑鼠，以 Tab、Shift+Tab、Enter、Space 完成全部流程；觸控裝置不觸發 hover 也能找到所有操作；操作不會因指標移出而消失 | | P0 嚴重 | 移除 focus outline，使用者不知道目前焦點位置 | 恢復 `:focus-visible`；建議 `2px` 實線焦點環、`2px` offset，焦點環與相鄰顏色對比至少 `3:1`。例如深藍焦點環，不能只以輕微陰影表示 | 鍵盤巡覽每個互動元件時焦點皆清楚可見、不被 sticky header／彈窗遮住；焦點順序符合畫面順序；無鍵盤陷阱 | | P0／P1 | 全部按鈕只有圖示，語意可能不明；若沒有 accessible name，螢幕閱讀器只會讀成「button」 | 刪除、匯出、分享等非通用或高風險操作加可見文字；空間受限時至少提供精確 `aria-label`，例如「匯出報表」，並在 hover 與 keyboard focus 顯示 tooltip。切換按鈕補 `aria-pressed`，展開按鈕補 `aria-expanded` | 用瀏覽器無障礙樹或螢幕閱讀器確認每個按鈕都有唯一名稱、角色及狀態；隱藏圖示時仍可判斷操作用途；tooltip 可由滑鼠及鍵盤觸發 | | P1 高 | 告警只靠紅／綠區分，色覺障礙與灰階環境下無法辨識 | 同時加入文字與形狀：`● 嚴重`、`▲ 警告`、`✓ 正常`；不要只有彩色圓點。文字對背景至少 `4.5:1`，圖示／狀態邊界至少 `3:1`。動態重大告警可用節制的 `role="status"` 或 `aria-live` 宣告 | 使用灰階與紅綠色盲模擬器後仍能分辨所有狀態；隱藏 CSS 色彩後仍保留完整語意；以對比檢測工具逐一量測 | | P1 高 | 11px 灰字過小且可能低對比；11px 本身不必然構成 WCAG 失敗，但會明顯降低桌面儀表板可讀性 | 一般內容改為 `16px/24px`；密集表格與次要標籤最低 `14px/20px`；只有非關鍵註記可用 `12px/18px`。一般文字對比至少 `4.5:1`；大字才可採 `3:1`。白底可先用 `#4B5563` 或更深，再實測 | 以實際背景色量測全部文字；瀏覽器放大至 `200%` 後內容不重疊、截斷或遺失；在一般辦公螢幕上不需縮放即可閱讀表格與告警 | | P1 高 | 固定 1280px 寬會在較窄視窗產生整頁水平捲動 | 改為 `width:100%; max-width:1280px; margin-inline:auto; box-sizing:border-box`；桌面外距 `24–32px`，內容區允許 grid／flex 子項縮小，文字子項設定 `min-width:0` | 分別在 1280、1024、768、390、320 CSS px 測試；頁面本身不得出現水平捲軸，內容不可被裁切；400% zoom 下仍可重排閱讀 | | P2 中 | 密集操作缺少清楚狀態與回饋 | hover、pressed、disabled、loading、success、error 狀態均須可辨識；狀態變化不可只改顏色。一般狀態轉場約 `150–200ms`，並尊重 `prefers-reduced-motion` | 執行儲存、刪除、重新整理等操作時立即看到進度及結果；快速連點不會重複提交；減少動態效果模式下不依賴動畫傳達結果 | ## 390px 手機版重排 - 頁面使用 `width:100%`，左右 padding `16px`；可用內容寬度為 `358px`。加入正確 viewport 設定，且不得禁止縮放。 - 桌面側欄改為抽屜式導覽；若使用底部導覽，僅保留最多 5 個最高頻入口，並加入安全區 `padding-bottom: env(safe-area-inset-bottom)`。 - 頂部列分兩行：第一行為頁面標題與主要操作，第二行放搜尋／篩選。搜尋與主要篩選採全寬，次要條件放入「篩選」面板。 - KPI 卡片優先採兩欄：`grid-template-columns: repeat(2, minmax(0,1fr))`、gap `12px`，每張約 `173px`；文字或數值放不下時改成單欄，不縮小至 11px。 - 圖表、告警摘要與主要內容改為單欄，圖表寬度 `100%`；圖例移至圖表下方並允許換行。 - 資料表優先轉為卡片／定義列表，每筆先呈現名稱、狀態、關鍵數值與主要操作；次要欄位展開後顯示。無法轉換的寬表只能在表格容器內水平捲動，不得讓整頁捲動，並固定首欄或提供欄位選擇。 - 列操作永久顯示一個主要按鈕及一個 `44×44px`「更多」按鈕；不可等待 hover。 - 底部固定操作列若存在，必須保留內容下方空間，確保最後一列與鍵盤焦點不被遮住。 - 以 390×844、390×667、320px 寬及橫向模式實機或模擬驗收：無整頁水平捲動、無文字覆疊、所有操作可觸達、觸控目標至少 `44×44px`，且螢幕閱讀器朗讀順序與視覺順序一致。

# 「夜班交接」一頁式設計系統規格 ## Style direction **Clinical Operations Dark**：冷靜、可信、低干擾的醫療作業介面。採瑞士式網格、清楚分隔與緊湊資料列；避免霓虹、高光、玻璃擬態、巨大 KPI、發光描邊及遊戲式儀表板。 - 深色為預設，但不使用純黑；以表面層級與邊框建立資訊階層。 - 高密度不犧牲操作尺寸：內容可緊湊，觸控熱區仍須 ≥ 48×48px、相鄰熱區間隔 ≥ 8px。 - 臨床優先順序依「位置、文字、圖示、形狀」共同表達，顏色僅作輔助。 - 一屏聚焦：目前班別、待交接病人、未完成事項、異常與簽核狀態。 ## Tokens ### 色彩 | Token | 值 | 用途 | |---|---:|---| | `bg/base` | `#0B1118` | 頁面背景 | | `bg/surface` | `#111923` | 卡片、表格 | | `bg/elevated` | `#18222E` | Drawer、Popover | | `border/default` | `#334155` | 分隔與邊界 | | `text/primary` | `#F1F5F9` | 主文字 | | `text/secondary` | `#B7C2CF` | 次要資訊 | | `text/muted` | `#8D9AAA` | 輔助資訊，不承載關鍵內容 | | `action/primary` | `#2563EB` | 主要操作 | | `focus/ring` | `#7DD3FC` | 3px 鍵盤焦點環 | | `status/info` | `#60A5FA` | 一般通知 | | `status/success` | `#34D399` | 已完成、同步成功 | | `status/warning` | `#FBBF24` | 待確認、即將逾時 | | `status/danger` | `#F87171` | 異常、逾時 | | `action/destructive` | `#B91C1C` | 破壞性操作 | 一般文字對比至少 4.5:1；焦點、圖示及控制邊界至少 3:1。狀態必須搭配圖示與文字，例如「▲ 高風險」「! 待確認」「✓ 已完成」。 ### 尺度 - Spacing：`4 / 8 / 12 / 16 / 24 / 32px` - Radius：`4px` 輸入與資料列、`8px` 卡片、`12px` Dialog；不使用膠囊形大容器 - Border：`1px` 一般、`2px` 強調、`3px` focus ring - Elevation：最多三層；以邊框優先，陰影僅用於浮層 - Icon：`16 / 20 / 24px`，統一 1.75px outline SVG - Touch target：網頁平板統一採 `48×48px`；小圖示以透明 padding 擴大熱區 ## 排版 字體使用 `Inter, "Noto Sans TC", system-ui, sans-serif`；數值、床號與時間啟用 `tabular-nums`。 | Style | Size / Line height | Weight | 用途 | |---|---|---:|---| | Display | 24 / 32px | 700 | 班別與頁面標題 | | H1 | 20 / 28px | 700 | 區段標題 | | H2 | 16 / 24px | 600 | 卡片標題 | | Body | 14 / 21px | 400 | 一般內容 | | Dense | 13 / 18px | 400–500 | 表格、交接摘要 | | Label | 12 / 16px | 600 | 欄名、時間、標籤 | 最多使用三種字重。病人姓名、床號、風險與待辦不得只以字重差異表示。 ## 核心元件 - **App Header**：院區／病房、班別時間、同步狀態、目前使用者；平板固定頂部。 - **Shift Summary Bar**：病人數、未讀交接、逾時任務、待簽核；使用數字＋文字＋圖示，不使用大型遊戲式 KPI。 - **Patient Handoff Row**：48–56px 高；床號、姓名、主要問題、風險、未完成項目、最後更新者。選取態使用左側 3px indicator、表面變化與 `aria-selected`。 - **SBAR Panel**：Situation／Background／Assessment／Recommendation 固定順序；支援展開、逐段編輯、版本與作者時間戳。 - **Status Badge**：圖示＋短標籤＋邊框；禁止純色圓點。單行、不換行。 - **Task Checklist**：48px 操作列；顯示負責人、期限、狀態與來源病人。完成高風險事項需明確確認。 - **Clinical Timeline**：時間、事件圖示、事件類型文字與來源；不可僅用彩色節點分類。 - **Filter/Search Bar**：可搜尋床號／姓名／事項；篩選條件以可取消 chip 呈現，chip 使用原生 button 語意與 `aria-pressed`。 - **Chart Card**：優先採水平 bar、bullet chart 或 line chart；直接標示數值、目標線與系列名稱，並提供可排序資料表。 - **Drawer / Dialog**：Drawer 用於詳情與編輯；Dialog 僅用於簽核、取消未存變更與不可逆操作。 - **Sync Banner / Toast**：顯示離線、同步中、衝突及失敗；錯誤不可只靠暫時消失的 toast。 ## 互動與動態 - 點擊、觸控與鍵盤具相同行為；不得把關鍵操作藏在 hover 或 swipe。 - 按壓回饋於 100ms 內出現；pressed state 不改變元件尺寸或造成位移。 - 時序：pressed `80–120ms`、狀態切換 `160ms`、Drawer/Dialog `200–240ms`。 - 動畫僅使用 opacity 與 transform；不動畫化 width、height 或大面積模糊。 - `prefers-reduced-motion: reduce` 時移除位移、縮放與自動捲動，只保留即時狀態切換。 - 編輯內容自動保存為草稿；正式交接與簽核必須明確提交，提交期間鎖定按鈕並顯示進度。 - 高風險操作不得以 optimistic success 呈現；伺服器確認後才顯示完成。 - 即時更新不得移動目前焦點；以完整句子宣布，例如「病房 8A 尚有 3 項待交接」。 - Sticky header、底部操作列與虛擬鍵盤不得遮住焦點或最後一列內容。 - 50 筆以上清單採虛擬化，但須維持正確焦點、讀屏順序與捲動位置。 ## Breakpoints | Breakpoint | 版面規則 | |---|---| | **Compact `<768px`** | 單欄；摘要橫向捲動；病人列轉為雙行；詳情使用全螢幕 Drawer；底部只保留一個主要操作。 | | **Tablet `768–1199px`** | 12 欄網格、24px gutter；病人清單 5 欄＋詳情 7 欄；直向可折疊詳情，橫向固定 split view；所有列與控制維持 48px 熱區。 | | **Desktop `≥1200px`** | 12 欄、最大內容寬 1600px；左側篩選 2 欄、清單 4 欄、詳情 6 欄；避免把額外空間用於放大 KPI，優先增加可見欄位與比較資訊。 | ## 交付前 checklist - [ ] 深色背景下的一般文字對比 ≥ 4.5:1，控制邊界與焦點狀態 ≥ 3:1 - [ ] 所有警示、圖表與狀態均有文字、圖示、形狀或線型輔助，未只依賴顏色 - [ ] 圖表具直接標籤、圖例、鍵盤 tooltip 等價資訊及可讀資料表 - [ ] 所有觸控目標 ≥ 48×48px，彼此間距 ≥ 8px - [ ] 可用鍵盤完成搜尋、篩選、編輯、簽核與關閉浮層；焦點順序符合視覺順序 - [ ] Focus ring 清晰，且不被 sticky header、Drawer、鍵盤或底部列遮蔽 - [ ] Icon-only 控制具 accessible name；裝飾圖示從 accessibility tree 隱藏 - [ ] 表單具永久 label、欄位旁錯誤訊息；多重錯誤提交後聚焦錯誤摘要 - [ ] 已驗證 768px 平板直向、1024px 平板橫向及 ≥1200px 桌面版 - [ ] 最大文字尺寸下無截斷、重疊或不可操作元件 - [ ] `prefers-reduced-motion` 下內容完整，無必要資訊依賴動畫 - [ ] 離線、同步中、同步失敗及版本衝突皆有持續且可恢復的狀態 - [ ] 破壞性操作、正式交接與簽核具明確確認及稽核紀錄 - [ ] 50 筆以上清單已驗證捲動效能、焦點保存與讀屏順序 - [ ] 未使用 emoji 作結構圖示、霓虹光效、玻璃擬態、遊戲式徽章或裝飾性儀表盤