# ISO 27001 合規管理系統 - 主頁面 UI 設計 ## 🎨 整體設計理念 ### 設計原則 - **資訊層級清晰**：最重要的資訊在上方，次要資訊往下延伸 - **行動導向**：每個區塊都有明確的 CTA（Call-to-Action） - **狀態視覺化**：用顏色和圖示快速傳達健康度 - **零學習曲線**：即使不懂 ISO 27001 也能看懂介面 - **快速存取**：常用功能 2 次點擊內完成 --- ## 📐 頁面佈局結構 ``` ┌─────────────────────────────────────────────────────────────┐ │ Top Navigation Bar (頂部導航列) │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────┐ ┌────────────────────────────────┐ │ │ │ │ │ │ │ │ │ Side Menu │ │ Main Dashboard Area │ │ │ │ (側邊選單) │ │ (主儀表板區域) │ │ │ │ │ │ │ │ │ │ │ │ [Alert Banner] (警示橫幅) │ │ │ │ │ │ │ │ │ │ │ │ [KPI Cards] (關鍵指標卡片) │ │ │ │ │ │ │ │ │ │ │ │ [Quick Actions] (快速動作) │ │ │ │ │ │ │ │ │ │ │ │ [Charts] (圖表) │ │ │ │ │ │ │ │ │ │ │ │ [Recent Activities] (最近活動) │ │ │ │ │ │ │ │ │ └────────────────┘ └────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 🔝 Top Navigation Bar（頂部導航列） ### 位置：固定在最上方，不隨頁面捲動 ### 左側區域 **公司 Logo + 系統名稱** - 公司 Logo（可自訂上傳） - 系統名稱：「ISO 27001 合規管理系統」 - 點擊 Logo 回到儀表板首頁 ### 中央區域 **全域搜尋框** - 🔍 搜尋圖示 + 輸入框 - Placeholder：「搜尋資產、文件、稽核項目...」 - 快捷鍵提示：Ctrl+K 或 Cmd+K - 功能： - 即時搜尋（輸入時即顯示結果） - 搜尋範圍：資產、文件、控制措施、稽核、事件 - 搜尋歷史記錄 - 熱門搜尋建議 **搜尋結果預覽** - 下拉選單顯示前 5 筆結果 - 每筆結果顯示： - 圖示（依類型） - 標題 - 類型標籤（資產/文件/稽核） - 更新時間 - 底部：「查看所有結果」連結 ### 右側區域（由左至右） **1. 快速新增按鈕** - 圖示：➕ 加號 - 顏色：主色調（藍色） - Hover 顯示下拉選單： - 新增資產 - 新增文件 - 建立稽核 - 通報事件 - 記錄訓練 - 每個選項有對應圖示 **2. 通知中心** - 圖示：🔔 鈴鐺 - 有未讀通知時顯示紅點 + 數字 - 點擊顯示通知列表（下拉）： - 未讀通知在上（背景淡藍色） - 已讀通知在下（背景白色） - 每則通知顯示： - 圖示（依類型變化） - 標題 - 簡短內容 - 時間（如：2 小時前） - 快速動作按鈕 - 底部：「標記全部已讀」、「查看所有通知」 **通知類型與顏色** - 🚨 緊急（紅色）：資安事件、稽核不符合項 - ⚠️ 警告（橘色）：文件即將到期、訓練逾期 - ℹ️ 資訊（藍色）：文件更新、稽核排程 - ✅ 成功（綠色）：任務完成、核准通過 **3. 待辦事項** - 圖示：📋 清單 - 顯示未完成任務數量 - 點擊顯示待辦列表： - 分類標籤：全部 / 今日 / 本週 / 逾期 - 每項待辦顯示： - 優先級標籤（高/中/低） - 任務名稱 - 到期日（逾期用紅色） - 快速完成打勾 - 底部：「查看所有待辦」 **4. 使用者選單** - 顯示使用者大頭照（圓形） - 姓名 + 下拉箭頭 - 點擊顯示選單： - 👤 個人資料 - ⚙️ 系統設定 - 🔐 變更密碼 - 📊 我的活動記錄 - 📚 使用說明 - 🚪 登出（紅色） --- ## 📱 Side Menu（側邊選單） ### 設計風格 - 寬度：260px（可收合至 60px 僅顯示圖示） - 背景色：深色系（#1f2937）或淺色系（#ffffff） - 選中項目：淺藍色背景 + 左側藍色邊框 - Hover 效果：背景色加深 ### 選單結構 **主選單** 1. **📊 儀表板** - 點擊回到首頁 - 永遠顯示在第一項 2. **🏢 組織管理** - 組織資訊 - 部門管理 - 使用者管理 - 角色權限 3. **📦 資產管理** - 資產清單 - 資產分類 - 資產關係圖 - 匯入/匯出 4. **📄 文件管理** - 政策文件 - 程序文件 - 作業指引 - 表單範本 - 文件範本庫 5. **🛡️ 控制措施** - 控制措施清單（93 項） - 實作狀態 - 實作指引 - 適用性聲明（SOA） 6. **⚠️ 風險管理** - 風險評估 - 風險登錄簿 - 風險矩陣 - 處理計畫 7. **🔍 稽核管理** - 稽核計畫 - 稽核執行 - 不符合項（NCR） - 矯正措施（CAPA） - 稽核報告 8. **🚨 事件管理** - 事件通報 - 事件處理 - 事件統計 - 演練記錄 9. **👥 人員訓練** - 訓練計畫 - 訓練記錄 - 測驗管理 - 訓練統計 10. **📈 報表中心** - 管理審查報告 - 合規狀態報告 - 稽核總結報告 - 自訂報表 **底部區域** - **⚙️ 系統設定**（管理員可見） - **❓ 說明文件** - **💬 意見回饋** - **版本資訊**：v1.0.0 ### 互動特性 - 展開/收合按鈕（漢堡選單圖示） - 支援拖曳調整寬度 - 記住使用者的收合狀態 - 當前頁面選單項目自動展開 --- ## 🎯 Alert Banner（警示橫幅） ### 位置：主內容區域最上方 ### 顯示邏輯 - 只在有重要警示時顯示 - 最多同時顯示 3 個警示 - 可關閉（但會在下次登入再出現直到問題解決） ### 警示類型與樣式 **1. 緊急警示（紅色背景）** ``` 🚨 [緊急] 偵測到 3 個未處理的資安事件，需立即處理 [查看詳情] [標記已知] ``` - 條件：有未處理的 Critical 或 High 事件 - 圖示：🚨 紅色警報 - 背景：#fee2e2（淺紅） - 邊框：#ef4444（深紅） **2. 警告警示（橘色背景）** ``` ⚠️ [警告] 有 5 份文件將在 7 天內到期需審查 [查看清單] [延期] ``` - 條件：文件到期、稽核逾期、訓練未完成 - 圖示：⚠️ 橘色警告 - 背景：#ffedd5（淺橘） - 邊框：#f97316（深橘） **3. 資訊提示（藍色背景）** ``` ℹ️ [提示] 本月稽核計畫：釣魚郵件演練將於 10/20 執行 [查看計畫] [準備] ``` - 條件：即將到來的稽核、系統更新 - 圖示：ℹ️ 藍色資訊 - 背景：#dbeafe（淺藍） - 邊框：#3b82f6（深藍） **4. 成功訊息（綠色背景）** ``` ✅ [完成] 本季內部稽核已完成，無重大不符合項 [查看報告] ``` - 條件：重要任務完成、目標達成 - 圖示：✅ 綠色勾勾 - 背景：#d1fae5（淺綠） - 邊框：#10b981（深綠） --- ## 📊 KPI Cards（關鍵指標卡片區） ### 位置：警示橫幅下方 ### 佈局：一排 4 個卡片（響應式：手機 1 個，平板 2 個，桌面 4 個） ### 卡片設計風格 - 白色背景 - 陰影：hover 時加深 - 圓角：8px - 內邊距：24px - 可點擊（進入詳細頁面） --- ### **卡片 1：合規完成度** **視覺元素** ``` ┌─────────────────────────────┐ │ 🎯 合規完成度 │ │ │ │ 85% ▲ +5% │ │ ━━━━━ │ │ 進度圓環 │ │ │ │ 已完成: 85/93 項控制措施 │ │ [查看詳情 →] │ └─────────────────────────────┘ ``` **詳細內容** - **主標題**：合規完成度 - **主數字**：85%（大字體，粗體） - **趨勢指標**：▲ +5%（上個月相比） - 上升：綠色 ▲ - 下降：紅色 ▼ - 持平：灰色 ─ - **視覺化**： - 圓形進度環（Donut Chart） - 已完成部分：藍色 - 未完成部分：淡灰色 - **補充說明**：已完成 85/93 項控制措施 - **快速動作**：查看詳情按鈕（箭頭圖示） **點擊行為** - 跳轉至「控制措施清單」頁面 - 自動篩選「未完成」項目 --- ### **卡片 2：待辦任務** **視覺元素** ``` ┌─────────────────────────────┐ │ 📋 待辦任務 │ │ │ │ 12 項 🔴 3 逾期 │ │ │ │ 今日: 3 項 │ │ 本週: 7 項 │ │ 本月: 2 項 │ │ │ │ [查看全部 →] │ └─────────────────────────────┘ ``` **詳細內容** - **主標題**：待辦任務 - **主數字**：12 項（總數） - **緊急標籤**：🔴 3 逾期（紅色，閃爍） - **分類統計**： - 今日：3 項（黃色標籤） - 本週：7 項（藍色標籤） - 本月：2 項（綠色標籤） - **快速預覽**：滑鼠 hover 顯示前 3 項待辦 - **快速動作**：查看全部按鈕 **點擊行為** - 展開待辦清單側邊欄 - 或跳轉至專屬待辦頁面 --- ### **卡片 3：近期稽核** **視覺元素** ``` ┌─────────────────────────────┐ │ 🔍 近期稽核 │ │ │ │ 下次稽核: 5 天後 │ │ 📅 10/20 釣魚郵件演練 │ │ │ │ 本季完成: 2/4 │ │ ■■□□ 50% │ │ │ │ [查看計畫 →] │ └─────────────────────────────┘ ``` **詳細內容** - **主標題**：近期稽核 - **倒數計時**：下次稽核 5 天後（動態更新） - ≤ 7 天：紅色 - 8-14 天：橘色 - > 14 天：藍色 - **稽核名稱**：📅 10/20 釣魚郵件演練 - **季度進度**： - 本季完成：2/4 - 進度條：50% - **快速動作**：查看計畫按鈕 **點擊行為** - 跳轉至「稽核計畫」頁面 - 高亮下次稽核項目 --- ### **卡片 4：資安事件** **視覺元素** ``` ┌─────────────────────────────┐ │ 🚨 資安事件 │ │ │ │ 本月: 3 件 ▼ -2 │ │ │ │ 🔴 Critical: 0 │ │ 🟠 High: 1 │ │ 🟡 Medium: 2 │ │ 🟢 Low: 0 │ │ │ │ [查看詳情 →] │ └─────────────────────────────┘ ``` **詳細內容** - **主標題**：資安事件 - **主數字**：本月 3 件 - **趨勢**：▼ -2（比上月減少，綠色） - **嚴重度分布**： - 🔴 Critical: 0 - 🟠 High: 1 - 🟡 Medium: 2 - 🟢 Low: 0 - **平均處理時間**：2.5 小時（小字顯示） - **快速動作**： - 查看詳情按鈕 - 快速通報按鈕（滑鼠 hover 顯示） **點擊行為** - 跳轉至「事件管理」頁面 - 顯示本月事件列表 --- ## ⚡ Quick Actions（快速動作區） ### 位置：KPI 卡片下方 ### 設計風格 - 白色背景卡片 - 標題：「快速動作」 - 按鈕排列：2 行 4 列（共 8 個按鈕） ### 按鈕設計 - 尺寸：120px × 80px - 圓角：8px - 邊框：1px 實線 - Hover：背景色加深 + 陰影 - 結構： - 圖示（32px，上方） - 文字（下方） --- ### 快速動作清單 **第一排** 1. **➕ 新增資產** - 圖示：📦 藍色 - 點擊：開啟「新增資產」對話框 - 對話框包含： - 資產名稱（必填） - 資產類型（下拉選單） - 擁有者（自動帶入當前使用者） - 快速儲存按鈕 2. **📝 建立文件** - 圖示：📄 綠色 - 點擊：顯示文件範本選擇器 - 選項： - 從範本建立 - 從空白建立 - 從檔案上傳 3. **✅ 稽核檢查** - 圖示：🔍 紫色 - 點擊：跳轉至稽核檢查清單 - 顯示今日/本週需執行的稽核項目 4. **🚨 通報事件** - 圖示：⚠️ 紅色 - 點擊：開啟「事件通報」表單 - 表單包含： - 事件標題（必填） - 嚴重度（下拉） - 簡述（文字區域） - 快速通報按鈕 **第二排** 5. **📊 風險評估** - 圖示：⚠️ 橘色 - 點擊：開啟「快速風險評估」 - 引導式問卷： - 選擇資產 - 識別威脅 - 評估可能性與影響 6. **👥 記錄訓練** - 圖示：🎓 藍色 - 點擊：開啟「訓練記錄」表單 - 表單包含： - 課程名稱 - 參與人員（多選） - 日期 - 快速儲存 7. **📥 匯入資料** - 圖示：⬇️ 灰色 - 點擊：顯示匯入選項 - 支援格式： - Excel (.xlsx) - CSV - 提供範本下載 8. **📤 匯出報表** - 圖示：⬆️ 灰色 - 點擊：顯示報表選擇器 - 快速匯出： - 本月合規報告（PDF） - 資產清單（Excel） - 稽核記錄（PDF） --- ## 📈 Charts（圖表區） ### 位置：快速動作區下方 ### 佈局：2 欄式（左右各一個圖表） --- ### **左側圖表：合規趨勢** **視覺元素** ``` ┌─────────────────────────────────────────┐ │ 📈 合規趨勢（過去 6 個月） │ │ │ │ 100% ┤ ● │ │ 90% ┤ ● ╱ │ │ 80% ┤ ● ╱ │ │ 70% ┤ ● ╱ │ │ 60% ┤ ● ╱ │ │ 50% └───────────────────────────── │ │ 5月 6月 7月 8月 9月 10月 │ │ │ │ 圖例: ● 合規完成度 □ 目標值(90%) │ └─────────────────────────────────────────┘ ``` **詳細設計** - **圖表類型**：折線圖 - **數據系列**： - 主線：合規完成度（藍色實線） - 參考線：目標值 90%（紅色虛線） - 預測線：未來 2 個月預測（灰色虛線） - **互動功能**： - Hover 顯示精確數值 - 點擊數據點查看當月詳情 - 可切換時間範圍（3 個月/6 個月/1 年） - **關鍵洞察**（圖表下方顯示）： - 「本月成長 5%，持續進步中 ✅」 - 「預計 2 個月後達成 90% 目標」 --- ### **右側圖表：控制措施分布** **視覺元素** ``` ┌─────────────────────────────────────────┐ │ 🛡️ 控制措施實作狀態 │ │ │ │ ██████████████████ 已完成 78 │ │ ████ 進行中 10 │ │ ██ 未開始 5 │ │ │ │ 0 25 50 75 100 │ │ │ │ 按類別分布: │ │ 組織 ████████████ 85% │ │ 人員 ██████ 60% │ │ 實體 █████████████ 92% │ │ 技術 ███████████ 88% │ └─────────────────────────────────────────┘ ``` **詳細設計** - **圖表類型**：水平堆疊長條圖 - **數據分類**： - 🟢 已完成：78 項（綠色） - 🟡 進行中：10 項（黃色） - 🔴 未開始：5 項（紅色） - **次要圖表**：按類別分布 - 組織控制：85% - 人員控制：60% - 實體控制：92% - 技術控制：88% - **互動功能**： - 點擊色塊篩選對應控制措施 - Hover 顯示具體項目名稱 - **快速動作**： - 「查看未完成項目」按鈕 --- ## 🕐 Recent Activities（最近活動） ### 位置：圖表區下方 ### 設計風格 ``` ┌─────────────────────────────────────────────────────┐ │ 🕐 最近活動 [查看全部 →] │ ├─────────────────────────────────────────────────────┤ │ │ │ 📄 張小明 更新了「資訊安全政策」文件 │ │ v1.2 → v1.3 | 2 小時前 │ │ │ │ ✅ 李大華 完成了「備份還原測試」稽核 │ │ 結果：通過，無不符合項 | 5 小時前 │ │ │ │ 🚨 系統偵測到異常登入嘗試 │ │ IP: 203.x.x.x (10 次失敗) | 今天 14:32 │ │ [查看詳情] [標記已知] │ │ │ │ 👥 王美麗 完成了「資安意識訓練」 │ │ 測驗成績：95 分 | 昨天 16:20 │ │ │ │ 📦 新增了 5 項資產 │ │ 類型：伺服器 | 昨天 10:15 │ │ [查看清單] │ │ │ │ [載入更多...] │ └─────────────────────────────────────────────────────┘ ``` ### 設計細節 **活動項目結構** - **圖示**（左側）：依活動類型變化 - 📄 文件活動（藍色） - ✅ 稽核活動（綠色） - 🚨 事件活動（紅色） - 👥 人員活動（紫色） - 📦 資產活動（橘色） - ⚙️ 系統活動（灰色） **主要內容** - **主標題**：動作描述（粗體） - 格式：「[使用者] + [動作] + [對象]」 - 可點擊的對象（藍色連結） - **次要資訊**：詳細內容（灰色小字） - 變更摘要 - 結果 - 影響範圍 - **時間戳記**（右側） - 格式：相對時間 - 1 小時內：「X 分鐘前」 - 當天：「今天 HH:MM」 - 昨天：「昨天 HH:MM」 - 更早：「MM/DD HH:MM」 **快速動作**（針對特定活動類型） - [查看詳情] 按鈕 - [標記已知] 按鈕 - [查看清單] 連結 **顯示邏輯** - 預設顯示最近 10 筆活動 - 按時間倒序排列 - 可篩選活動類型（下拉選單） - 可搜尋關鍵字 - 「載入更多」按鈕（無限滾動） --- ## 🎨 視覺設計規範 ### 色彩系統 **主色調（Primary）** - 主要藍：#3b82f6 - 深藍：#1e40af - 淺藍：#60a5fa - 用途：主要按鈕、連結、選中狀態 **功能色彩（Semantic）** - 成功綠：#10b981 - 警告橘：#f59e0b - 錯誤紅：#ef4444 - 資訊藍：#3b82f6 - 用途：狀態指示、警示訊息 **中性色（Neutral）** - 純黑：#000000（文字） - 深灰：#1f2937（次要文字） - 中灰：#6b7280（提示文字） - 淺灰：#f3f4f6（背景） - 純白：#ffffff（卡片背景） ### 字體系統 **字體家族** - 繁體中文：Noto Sans TC, 微軟正黑體 - 英文數字：Inter, -apple-system, system-ui - 等寬字體：Fira Code, monospace（用於程式碼） ## 🎨 視覺設計規範（續） ### 字體系統（續） **字體大小** - h1（頁面標題）：32px / 2rem，粗體 - h2（區塊標題）：24px / 1.5rem，粗體 - h3（卡片標題）：20px / 1.25rem，粗體 - Body（內文）：16px / 1rem，正常 - Small（輔助文字）：14px / 0.875rem，正常 - Tiny（時間戳記）：12px / 0.75rem，正常 **行高** - 標題：1.2 - 內文：1.5 - 按鈕：1.0 ### 間距系統 **基準單位**：8px（0.5rem） **間距規格** - xs：4px（0.25rem） - sm：8px（0.5rem） - md：16px（1rem） - lg：24px（1.5rem） - xl：32px（2rem） - 2xl：48px（3rem） **應用場景** - 卡片內邊距：lg（24px） - 卡片間距：lg（24px） - 區塊間距：xl（32px） - 按鈕內邊距：sm md（8px 16px） - 表單欄位間距：md（16px） ### 圓角規範 - 按鈕：6px - 卡片：8px - 輸入框：6px - Modal：12px - 頭像：50%（圓形） - 標籤（Tag）：4px ### 陰影系統 **層級定義** ```css /* 懸浮卡片 */ shadow-sm: 0 1px 2px rgba(0,0,0,0.05) /* 一般卡片 */ shadow-md: 0 4px 6px rgba(0,0,0,0.1) /* Hover 狀態 */ shadow-lg: 0 10px 15px rgba(0,0,0,0.1) /* Modal/彈窗 */ shadow-xl: 0 20px 25px rgba(0,0,0,0.15) ``` --- ## 🖱️ 互動設計規範 ### 按鈕狀態 **主要按鈕（Primary Button）** ``` 預設狀態： - 背景：#3b82f6（藍色） - 文字：#ffffff（白色） - 邊框：無 Hover 狀態： - 背景：#2563eb（深藍） - 游標：pointer - 轉場：0.2s ease Active 狀態（點擊瞬間）： - 背景：#1e40af（更深藍） - 稍微縮小：scale(0.98) Disabled 狀態： - 背景：#9ca3af（灰色） - 游標：not-allowed - 透明度：0.6 ``` **次要按鈕（Secondary Button）** ``` 預設狀態： - 背景：透明 - 文字：#3b82f6（藍色） - 邊框：1px solid #3b82f6 Hover 狀態： - 背景：#eff6ff（淺藍背景） - 邊框顏色不變 ``` **危險按鈕（Danger Button）** ``` 預設狀態： - 背景：#ef4444（紅色） - 文字：#ffffff（白色） Hover 狀態： - 背景：#dc2626（深紅） ``` ### 載入狀態 **按鈕載入** - 顯示旋轉圖示（Spinner） - 按鈕文字變為「處理中...」 - 按鈕禁用（防止重複點擊） - 轉場動畫：淡入淡出 **頁面載入** - 顯示骨架屏（Skeleton Screen） - 保持佈局結構 - 避免閃爍效果 - 載入時間 > 3 秒顯示進度條 **資料載入** - 小型：旋轉圖示 + 「載入中...」 - 大型：進度條 + 百分比 - 表格：顯示 3-5 行骨架行 ### 過場動畫 **頁面切換** ``` 進入動畫： - 從右淡入：translateX(20px) + opacity 0→1 - 時間：300ms - 緩動：ease-out 離開動畫： - 向左淡出：translateX(-20px) + opacity 1→0 - 時間：200ms - 緩動：ease-in ``` **Modal 彈窗** ``` 開啟： - 背景遮罩：opacity 0→0.5（200ms） - 彈窗本體：scale(0.9)→1 + opacity 0→1（300ms） - 緩動：cubic-bezier(0.16, 1, 0.3, 1) 關閉： - 反向動畫（200ms） ``` **下拉選單** ``` 展開： - 高度：0→auto - 透明度：0→1 - 時間：200ms - 緩動：ease-out 收合： - 反向動畫（150ms） ``` ### Hover 效果 **卡片 Hover** - 陰影加深（shadow-md → shadow-lg） - 稍微上移（translateY(-2px)） - 時間：200ms **連結 Hover** - 顏色加深 - 底線出現（從中間往兩側擴展） - 時間：150ms **圖示按鈕 Hover** - 背景色出現（圓形或方形） - 圖示顏色變化 - 輕微放大（scale(1.1)） --- ## 📱 響應式設計 ### 斷點定義 ```css /* 手機（直向） */ mobile: 0 - 639px /* 手機（橫向）/ 小平板 */ tablet-sm: 640px - 767px /* 平板 */ tablet: 768px - 1023px /* 小型桌機 */ desktop-sm: 1024px - 1279px /* 標準桌機 */ desktop: 1280px - 1535px /* 大型桌機 */ desktop-lg: 1536px+ ``` ### 佈局調整 **手機版（< 640px）** ``` Top Navigation: - 隱藏搜尋框（改用放大鏡圖示點擊展開） - 隱藏「快速新增」按鈕文字（僅保留➕） - 使用者選單改為漢堡選單 Side Menu: - 預設隱藏（覆蓋在內容上方） - 點擊漢堡圖示滑出 - 背景遮罩（半透明黑色） KPI Cards: - 1 欄式（每排 1 個） - 上下排列 Quick Actions: - 2 欄式（每排 2 個） - 按鈕變小（100px × 70px） Charts: - 1 欄式（上下排列） - 圖表高度減少（200px） Recent Activities: - 簡化顯示（隱藏次要資訊） - 僅顯示 5 筆 ``` **平板版（640px - 1023px）** ``` Top Navigation: - 顯示簡化搜尋框（寬度 200px） - 快速新增按鈕保留 Side Menu: - 預設收合（僅顯示圖示） - 可點擊展開 KPI Cards: - 2 欄式（每排 2 個） Quick Actions: - 2 欄式（每排 4 個） Charts: - 1 欄式或 2 欄式（依內容複雜度） ``` **桌機版（≥ 1024px）** ``` 完整佈局（如前述設計） ``` ### 觸控優化（手機/平板） **可點擊區域** - 最小尺寸：44px × 44px（Apple 標準） - 按鈕間距：≥ 8px - 避免過於靠近邊緣 **手勢支援** - 側邊選單：由左向右滑動開啟 - 通知列表：由右向左滑動關閉單則通知 - 卡片：向下拉動刷新 - 列表：無限滾動 **輸入優化** - 輸入框放大至 16px（避免自動縮放） - 鍵盤開啟時自動捲動至輸入框 - 數字欄位顯示數字鍵盤 - 日期欄位使用原生日期選擇器 --- ## ⚡ 效能優化設計 ### 載入優先級 **首屏優先（Critical）** 1. Top Navigation（< 100ms） 2. Side Menu（< 200ms） 3. Alert Banner（< 300ms） 4. KPI Cards（< 500ms） **次要內容（Non-Critical）** 5. Quick Actions（< 800ms） 6. Charts（懶載入，viewport 內才載入） 7. Recent Activities（懶載入） ### 資料載入策略 **即時資料（Real-time）** - KPI 數字（每 30 秒更新） - 通知數量（WebSocket 推送） - 警示橫幅（即時檢查） **快取資料（Cached）** - 控制措施清單（快取 1 小時） - 使用者權限（快取至登出） - 靜態選項（快取 24 小時） **懶載入資料（Lazy Load）** - 圖表資料（viewport 內才載入） - 活動記錄（滾動至底部才載入更多） - 大型表格（虛擬滾動） ### 圖片優化 **圖示系統** - 使用 SVG 圖示（可縮放、體積小） - 內嵌常用圖示（減少請求） - 懶載入次要圖示 **使用者頭像** - 預設尺寸：48px × 48px - 使用 WebP 格式（fallback 至 JPEG） - 懶載入（非首屏） **圖表渲染** - 使用 Canvas（大量數據） - 使用 SVG（少量數據、需互動） - 降低精度（行動裝置） --- ## 🔔 通知與提示設計 ### Toast 通知（輕量提示） **位置**：螢幕右上角 **類型與樣式** **成功提示** ``` ┌─────────────────────────────┐ │ ✅ 操作成功 │ │ 資產已成功新增 │ └─────────────────────────────┘ ``` - 背景：#d1fae5（淺綠） - 圖示：✅ 綠色勾勾 - 自動消失：3 秒 **錯誤提示** ``` ┌─────────────────────────────┐ │ ❌ 操作失敗 │ │ 請檢查必填欄位是否完整 │ │ [重試] [查看詳情] │ └─────────────────────────────┘ ``` - 背景：#fee2e2（淺紅） - 圖示：❌ 紅色叉叉 - 手動關閉或 5 秒後自動消失 - 提供快速動作按鈕 **警告提示** ``` ┌─────────────────────────────┐ │ ⚠️ 注意 │ │ 此操作無法復原，確定要繼續？ │ │ [取消] [確定] │ └─────────────────────────────┘ ``` - 背景：#ffedd5（淺橘） - 圖示：⚠️ 橘色警告 - 手動關閉 **資訊提示** ``` ┌─────────────────────────────┐ │ ℹ️ 提示 │ │ 您有新訊息 │ └─────────────────────────────┘ ``` - 背景：#dbeafe（淺藍） - 圖示：ℹ️ 藍色資訊 - 自動消失：3 秒 ### Modal 對話框 **確認對話框（Confirmation）** ``` ┌───────────────────────────────────┐ │ 刪除資產 │ ├───────────────────────────────────┤ │ │ │ ⚠️ 確定要刪除「Web Server 01」？ │ │ │ │ 此操作無法復原，相關聯的稽核記錄 │ │ 也將一併移除。 │ │ │ │ [取消] [確定刪除] │ └───────────────────────────────────┘ ``` **特性** - 標題清楚（動作 + 對象） - 警告圖示（危險操作用紅色） - 說明後果 - 主要按鈕在右側 - 危險按鈕用紅色 - Esc 鍵關閉（等同取消） - 點擊背景遮罩關閉 **表單對話框（Form Modal）** ``` ┌───────────────────────────────────┐ │ 新增資產 │ ├───────────────────────────────────┤ │ │ │ 資產名稱 * │ │ [________________] │ │ │ │ 資產類型 * │ │ [硬體 ▼] │ │ │ │ 擁有者 │ │ [張小明 ▼] │ │ │ │ CIA 等級 │ │ 機密性: [中 ▼] │ │ 完整性: [高 ▼] │ │ 可用性: [高 ▼] │ │ │ │ [取消] [儲存] │ └───────────────────────────────────┘ ``` **特性** - 寬度：500px - 800px（依內容調整） - 最大高度：80vh（超過則內部滾動） - 必填欄位標記 * - 即時驗證（失焦時） - 錯誤訊息顯示在欄位下方 - Enter 送出（僅單一輸入框時） ### 內嵌提示（Inline Message） **表單驗證錯誤** ``` 資產名稱 * [________________] ❌ 資產名稱不可為空白 ``` **欄位說明（Help Text）** ``` CIA 等級 [高 ▼] ℹ️ 機密性：資料外洩的影響程度 ``` **成功回饋** ``` ✅ 檔案上傳成功（2.5MB） ``` --- ## 🎯 資料視覺化設計準則 ### 圖表配色 **單一數據系列** - 主色：#3b82f6（藍色） - Hover：#2563eb（深藍） **多數據系列（最多 6 色）** ``` 色彩組合 1（預設）: 1. #3b82f6（藍） 2. #10b981（綠） 3. #f59e0b（橘） 4. #ef4444（紅） 5. #8b5cf6（紫） 6. #ec4899（粉） 色彩組合 2（柔和）: 1. #60a5fa（淺藍） 2. #34d399（淺綠） 3. #fbbf24（淺橘） 4. #f87171（淺紅） 5. #a78bfa（淺紫） 6. #f472b6（淺粉） ``` **狀態顏色** - 良好/完成：#10b981（綠色） - 警告/進行中：#f59e0b（橘色） - 危險/失敗：#ef4444（紅色） - 中性/待處理：#6b7280（灰色） ### 圖表類型選擇 **趨勢分析** - 折線圖（Line Chart） - 適用：時間序列、變化趨勢 - 範例：合規完成度趨勢 **比例分析** - 圓餅圖（Pie Chart） - 環圈圖（Donut Chart） - 適用：部分占整體的比例 - 範例：控制措施完成比例 **分類比較** - 長條圖（Bar Chart） - 適用：不同類別的數量比較 - 範例：各部門資產數量 **分布分析** - 堆疊長條圖（Stacked Bar） - 適用：多維度分類比較 - 範例：控制措施按類別和狀態分布 **關聯分析** - 散點圖（Scatter Plot） - 適用：兩變數相關性 - 範例：風險可能性 vs 影響度 **階層分析** - 矩形樹狀圖（Treemap） - 適用：多層級數據 - 範例：資產按類型和部門分布 ### 圖表互動設計 **Tooltip（工具提示）** ``` 當滑鼠 Hover 在數據點時顯示： ┌─────────────────────┐ │ 10月份 │ │ 合規完成度: 85% │ │ 較上月: ▲ +5% │ │ 目標值: 90% │ └─────────────────────┘ ``` **特性** - 跟隨滑鼠位置 - 自動避開邊界 - 顯示完整資訊 - 出現延遲：100ms - 消失延遲：500ms **圖例（Legend）** - 位置：圖表下方或右側 - 可點擊切換顯示/隱藏該數據系列 - 滑鼠 Hover 時該系列高亮 **縮放與平移** - 滑鼠滾輪：縮放 - 滑鼠拖曳：平移 - 雙擊：重置視圖 - 縮放按鈕：+ / - / 重置 **資料點點擊** - 跳轉至詳細頁面 - 展開詳細資訊面板 - 顯示相關聯資料 --- ## 🚀 快捷鍵設計 ### 全域快捷鍵 ``` Ctrl/Cmd + K 開啟搜尋框 Ctrl/Cmd + / 顯示快捷鍵列表 Ctrl/Cmd + B 切換側邊選單 Ctrl/Cmd + N 快速新增（顯示選項） Esc 關閉 Modal/搜尋 F1 開啟說明文件 ``` ### 導航快捷鍵 ``` G + D 前往儀表板（Dashboard） G + A 前往資產管理（Assets） G + O 前往文件管理（dOcuments） G + C 前往控制措施（Controls） G + R 前往風險管理（Risks） G + U 前往稽核管理（aUdits） G + I 前往事件管理（Incidents） ``` **使用方式**：先按 G，放開後 1 秒內按第二個鍵 ### 操作快捷鍵 ``` Ctrl/Cmd + S 儲存 Ctrl/Cmd + E 編輯 Ctrl/Cmd + D 刪除（需確認） Ctrl/Cmd + P 列印/匯出 Ctrl/Cmd + F 頁面內搜尋 ``` ### 表單快捷鍵 ``` Tab 下一個欄位 Shift + Tab 上一個欄位 Enter 送出表單（單一輸入框時） Esc 取消/關閉 ``` ### 快捷鍵提示顯示 **觸發方式**：按下 `?` 或 `F1` **顯示樣式** ``` ┌───────────────────────────────────────┐ │ 鍵盤快捷鍵 │ ├───────────────────────────────────────┤ │ │ │ 全域快捷鍵 │ │ ──────────────────────────── │ │ Ctrl + K 開啟搜尋 │ │ Ctrl + B 切換側邊選單 │ │ Ctrl + N 快速新增 │ │ │ │ 導航快捷鍵 │ │ ──────────────────────────── │ │ G then D 前往儀表板 │ │ G then A 前往資產管理 │ │ │ │ [列印此列表] [關閉] │ └───────────────────────────────────────┘ ``` --- ## 📊 空狀態設計 ### 無資料狀態 **首次使用（Onboarding）** ``` ┌─────────────────────────────────────┐ │ │ │ 📦 │ │ 還沒有任何資產 │ │ │ │ 開始建立您的第一個資產， │ │ 這是建立 ISMS 的第一步！ │ │ │ │ [➕ 新增第一個資產] │ │ [📥 從 Excel 匯入] │ │ [📖 查看教學] │ │ │ └─────────────────────────────────────┘ ``` **特性** - 友善的插圖或圖示 - 清楚說明為何是空的 - 提供明確的下一步動作 - 提供替代方案（匯入、教學） **搜尋無結果** ``` ┌─────────────────────────────────────┐ │ │ │ 🔍 │ │ 找不到符合的結果 │ │ │ │ 搜尋「{{關鍵字}}」沒有找到任何資產 │ │ │ │ 建議： │ │ • 檢查拼字是否正確 │ │ • 嘗試不同的關鍵字 │ │ • 使用更廣泛的搜尋條件 │ │ │ │ [清除搜尋] [查看全部] │ │ │ └─────────────────────────────────────┘ ``` **篩選無結果** ``` ┌─────────────────────────────────────┐ │ 🎯 │ │ 目前篩選條件下無資料 │ │ │ │ 已套用 3 個篩選條件 │ │ • 類型：伺服器 │ │ • 狀態：使用中 │ │ • 部門：IT 部 │ │ │ │ [清除篩選] [調整條件] │ └─────────────────────────────────────┘ ``` ### 錯誤狀態 **載入失敗** ``` ┌─────────────────────────────────────┐ │ ⚠️ │ │ 資料載入失敗 │ │ │ │ 無法連線至伺服器，請稍後再試 │ │ │ │ 錯誤代碼：ERR_NETWORK_TIMEOUT │ │ │ │ [重新載入] [聯絡支援] │ └─────────────────────────────────────┘ ``` **權限不足** ``` ┌─────────────────────────────────────┐ │ 🔒 │ │ 權限不足 │ │ │ │ 您沒有權限檢視此頁面 │ │ 請聯絡管理員申請存取權限 │ │ │ │ [返回首頁] [申請權限] │ └─────────────────────────────────────┘ ``` **頁面不存在（404）** ``` ┌─────────────────────────────────────┐ │ 🧭 │ │ 找不到此頁面 │ │ │ │ 您訪問的頁面不存在或已被移除 │ │ │ │ [返回首頁] [查看網站地圖] │ └─────────────────────────────────────┘ ``` --- ## 🎭 微互動設計 ### 按鈕點擊回饋 **成功動畫** - 按鈕短暫變綠色 - 顯示 ✓ 圖示（淡入） - 輕微縮放效果 - 時間：500ms **載入動畫** - 按鈕文字消失 - 旋轉圖示出現 - 按鈕禁用（灰色） **錯誤動畫** - 按鈕晃動（左右搖擺 3 次） - 短暫變紅色 - 時間：300ms ### 表單驗證動畫 **欄位錯誤** - 邊框變紅色 - 輕微晃動 - 錯誤訊息由上滑入 - 欄位下方顯示紅色底線 **欄位正確** - 邊框變綠色 - ✓ 圖示淡入（欄位右側） - 持續 1 秒後恢復正常 ### 數字變化動畫 **KPI 卡片數字更新** - 數字滾動效果（CountUp） - 從舊值滾動至新值 - 時間：1 秒 - 緩動：ease-out **進度條更新** - 平滑過渡（transition） - 顏色漸變（依百分比） - 時間：500ms ### 列表操作動畫 **新增項目** - 由上滑入 - 淡入效果 - 背景短暫高亮（淺綠色 3 秒） **刪除項目** - 向右滑出 - 淡出效果 - 其他項目上移補位 - 時間：300ms **拖曳排序** - 被拖曳項目放大（scale 1.05） - 陰影加深 - 其他項目自動讓位（平滑移動） --- ## 💡 使用者引導設計 ### 首次登入引導 **歡迎步驟（Onboarding Tour）** **Step 1: 歡迎畫面** ``` ┌───────────────────────────────────────┐ │ │ │ 👋 歡迎使用 ISO 27001 CMS │ │ │ │ 我們將用 5 個步驟帶您快速了解系統 │ │ │ │ [開始導覽] [跳過] │ │ │ └───────────────────────────────────────┘ ``` **Step 2: 儀表板說明** ``` ┌──────────────────────┐ │ 這是您的儀表板 │ │ 這裡可以看到： │ │ • 合規完成度 │ │ • 待辦任務 │ │ • 近期稽核 │ └──────────────────────┘ ↓ [KPI Cards 高亮顯示] [上一步] [下一步] [跳過] (2/5) ``` **Step 3: 快速新增** ``` ┌──────────────────────┐ │ 點擊這裡可以快速新增 │ │ 資產、文件、稽核等 │ └──────────────────────┘ ↓ [➕ 按鈕高亮] ``` ## 💡 使用者引導設計（續） ### 首次登入引導（續） **Step 4: 側邊選單** ``` [側邊選單高亮] ↓ ┌──────────────────────┐ │ 從這裡可以進入 │ │ 各個功能模組 │ │ │ │ 點擊圖示可以收合選單 │ └──────────────────────┘ [上一步] [下一步] [跳過] (4/5) ``` **Step 5: 完成引導** ``` ┌───────────────────────────────────────┐ │ │ │ ✅ 引導完成！ │ │ │ │ 現在您可以開始建立您的 ISMS 了！ │ │ │ │ 建議的第一步： │ │ 1️⃣ 建立組織資產清單 │ │ 2️⃣ 制定資訊安全政策 │ │ 3️⃣ 建立年度稽核計畫 │ │ │ │ [開始使用] [觀看教學影片] │ │ │ └───────────────────────────────────────┘ ``` **引導特性** - 半透明黑色遮罩（背景暗化） - 當前說明區域高亮（白色光圈） - 箭頭指示目標元素 - 進度指示器（1/5, 2/5...） - 隨時可跳過 - 只顯示一次（可在設定中重新觀看） --- ### 功能提示（Feature Hints） **情境式提示（Contextual Tips）** 當使用者第一次進入特定功能時顯示： **資產管理頁面** ``` ┌─────────────────────────────────┐ │ 💡 小提示 │ ├─────────────────────────────────┤ │ 您可以直接從 Excel 批次匯入資產 │ │ 節省大量手動輸入時間！ │ │ │ │ [立即試試] [我知道了] [不再顯示] │ └─────────────────────────────────┘ ``` **文件編輯器** ``` ┌─────────────────────────────────┐ │ 💡 小提示 │ ├─────────────────────────────────┤ │ 使用變數如 {{company_name}} │ │ 可以自動替換為您的公司名稱 │ │ │ │ [查看可用變數] [我知道了] │ └─────────────────────────────────┘ ``` **顯示邏輯** - 淡入動畫 - 3 秒後自動淡出（或手動關閉） - 點擊「不再顯示」後永久隱藏 - 可在設定中重新啟用 --- ### 進度追蹤（Progress Tracking） **設定精靈（Setup Wizard）** 在側邊欄顯示設定進度： ``` ┌─────────────────────────────┐ │ 🚀 系統設定進度 │ ├─────────────────────────────┤ │ │ │ ✅ 建立組織資訊 (已完成) │ │ ✅ 新增使用者 (已完成) │ │ ⏳ 建立資產清單 (進行中 60%) │ │ ━━━━━━━━━━ │ │ ⬜ 制定安全政策 (未開始) │ │ ⬜ 設定稽核計畫 (未開始) │ │ │ │ 整體完成度: 40% │ │ ━━━━━━━━━━━━━━━━━━━━ │ │ │ │ [繼續設定] │ └─────────────────────────────┘ ``` **特性** - 可收合/展開 - 點擊未完成項目直接跳轉 - 完成後顯示慶祝動畫（🎉） - 完成度 100% 後可隱藏 --- ### 工具提示（Tooltips） **標準 Tooltip** ``` [圖示或文字] ↓ ┌──────────────────┐ │ CIA 等級是什麼？ │ │ │ │ 機密性（C） │ │ 完整性（I） │ │ 可用性（A） │ └──────────────────┘ ``` **顯示條件** - 滑鼠 Hover 1 秒後顯示 - 移開立即消失 - 支援富文本（粗體、連結） - 最大寬度：300px **複雜 Tooltip（帶圖示和連結）** ``` ┌────────────────────────────┐ │ ℹ️ 風險等級計算方式 │ │ ─────────────────────── │ │ 風險 = 可能性 × 影響度 │ │ │ │ 範例: │ │ 可能性(4) × 影響度(5) = 20 │ │ → 高風險 │ │ │ │ [了解更多 →] │ └────────────────────────────┘ ``` --- ## 🎨 主題與外觀設定 ### 主題切換 **支援主題** 1. **淺色模式（Light Mode）** - 預設 2. **深色模式（Dark Mode）** 3. **自動模式（Auto）** - 跟隨系統設定 **切換位置** - 使用者選單內 - 或頂部導航列右側獨立按鈕 **切換按鈕設計** ``` 淺色模式: ☀️ 太陽圖示 深色模式: 🌙 月亮圖示 自動模式: 🔄 循環圖示 ``` --- ### 深色模式配色 **背景色** ``` 主背景: #0f172a (深藍灰) 卡片背景: #1e293b (較淺藍灰) 懸浮背景: #334155 (中等藍灰) ``` **文字色** ``` 主文字: #f1f5f9 (淺灰白) 次要文字: #cbd5e1 (中灰白) 提示文字: #94a3b8 (深灰白) ``` **邊框色** ``` 邊框: #334155 分隔線: #1e293b ``` **功能色調整** ``` 成功: #34d399 (較亮綠) 警告: #fbbf24 (較亮橘) 錯誤: #f87171 (較亮紅) 資訊: #60a5fa (較亮藍) ``` **切換動畫** - 平滑過渡：300ms - 所有顏色同時變化 - 保存使用者偏好至 localStorage --- ### 密度設定（Compact Mode） **三種密度選項** **舒適模式（Comfortable）** - 預設 ``` 間距: 正常 字體: 16px 行高: 1.5 卡片內距: 24px ``` **緊湊模式（Compact）** ``` 間距: 縮小 25% 字體: 14px 行高: 1.3 卡片內距: 16px 適用: 資料量大、螢幕小的情境 ``` **寬鬆模式（Spacious）** ``` 間距: 放大 25% 字體: 18px 行高: 1.7 卡片內距: 32px 適用: 視力較差、高齡使用者 ``` --- ### 無障礙設計（Accessibility） **鍵盤導航** - 所有互動元素可用 Tab 鍵聚焦 - 聚焦時顯示清晰的邊框（藍色，2px） - 支援 Shift+Tab 反向導航 - 下拉選單支援方向鍵 **螢幕閱讀器支援** - 所有圖示都有 aria-label - 表單欄位都有 label - 動態內容變更時通知（aria-live） - 語義化 HTML（header, nav, main, aside） **顏色對比** - 符合 WCAG 2.1 AA 標準 - 文字對比度 ≥ 4.5:1 - 大文字對比度 ≥ 3:1 - 不僅依賴顏色傳達資訊（加圖示、文字） **字體縮放** - 支援瀏覽器字體縮放（200% 內不破版） - 使用相對單位（rem, em） **動畫控制** - 尊重 prefers-reduced-motion - 提供「減少動畫」設定選項 - 關閉後： - 無過場動畫 - 無數字滾動 - 僅保留必要回饋 --- ## 📱 行動版專屬設計 ### 底部導航列（Mobile Bottom Nav） **取代桌面版的側邊選單** ``` ┌─────────────────────────────────────┐ │ 主內容區域 │ │ │ │ │ └─────────────────────────────────────┘ ├───────┬────────┬────────┬────────┬───┤ │ 🏠 │ 📦 │ ➕ │ 🔍 │ 👤│ │ 首頁 │ 資產 │ 新增 │ 稽核 │ 我 │ └───────┴────────┴────────┴────────┴───┘ ``` **特性** - 固定在底部（不隨頁面捲動） - 5 個主要項目 - 當前頁面高亮（藍色）+ 底部藍條 - 點擊動畫：輕微放大（scale 1.1） - 圖示 + 文字標籤 **導航項目** 1. 🏠 首頁（儀表板） 2. 📦 資產（資產管理） 3. ➕ 新增（快速動作選單） 4. 🔍 稽核（稽核管理） 5. 👤 我（個人中心） **中央「新增」按鈕** - 稍微凸起（負 margin） - 圓形背景（藍色） - 點擊展開快速動作 Sheet --- ### 下拉選單（Bottom Sheet） **取代桌面版的 Modal** **外觀** ``` ┌─────────────────────────────────────┐ │ 頁面內容（暗化遮罩） │ │ │ │ ┌─────────────────────────────┐ │ │ │ ━━ │ │ ← 拖曳把手 │ │ │ │ │ │ 快速新增 │ │ │ │ ─────────────────────── │ │ │ │ 📦 新增資產 │ │ │ │ 📄 建立文件 │ │ │ │ ✅ 稽核檢查 │ │ │ │ 🚨 通報事件 │ │ │ │ │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **互動行為** - 由下往上滑入 - 可拖曳關閉（向下滑動） - 點擊背景遮罩關閉 - 支援不同高度： - 小型（30% 螢幕高度）：選單 - 中型（50%）：表單 - 大型（90%）：詳細內容 --- ### 手勢操作 **左右滑動** - 在資產/文件列表： - 向左滑：顯示刪除按鈕 - 向右滑：顯示編輯按鈕 **下拉刷新（Pull to Refresh）** - 在列表頂部向下拉 - 顯示載入圖示 + 「放開以刷新」 - 鬆開後開始刷新 - 完成後顯示 ✓ + 「已更新」 **長按（Long Press）** - 長按列表項目：顯示快速動作選單 - 長按圖片：預覽大圖 --- ### 觸控優化表單 **輸入框設計** ``` ┌─────────────────────────────────────┐ │ 資產名稱 * │ │ ┌─────────────────────────────────┐ │ │ │ [輸入資產名稱] ❌ │ │ ← 清除按鈕 │ └─────────────────────────────────┘ │ │ │ │ 資產類型 * │ │ ┌─────────────────────────────────┐ │ │ │ 硬體 ▼ │ │ ← 大下拉箭頭 │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` **特性** - 輸入框高度：48px（易點擊） - 字體大小：16px（避免自動縮放） - 清除按鈕（X）：方便清空 - 錯誤訊息更明顯（紅色背景） **日期選擇器** - 使用原生日期選擇器（type="date"） - 顯示本地化格式 **數字輸入** - 自動顯示數字鍵盤 - 支援 +/- 按鈕（增減數值） --- ### 離線功能 **離線指示器** ``` ┌─────────────────────────────────────┐ │ ⚠️ 您目前處於離線狀態 │ │ 部分功能可能無法使用 │ └─────────────────────────────────────┘ ``` **離線可用功能** - 查看已載入的資料 - 閱讀文件 - 查看儀表板（快取資料） **離線不可用** - 新增/編輯/刪除 - 搜尋（需即時資料） - 匯出報表 **恢復上線時** - 自動同步離線期間的變更 - Toast 提示：「✅ 已重新連線」 --- ## 🔐 安全相關 UI ### 登入頁面 **佈局** ``` ┌─────────────────────────────────────┐ │ │ │ [公司 Logo] │ │ │ │ ISO 27001 合規管理系統 │ │ ───────────────────── │ │ │ │ 📧 電子郵件 │ │ [_________________________] │ │ │ │ 🔒 密碼 │ │ [_________________________] 👁️ │ ← 顯示/隱藏密碼 │ │ │ ☑️ 記住我 │ │ │ │ [ 登入 ] │ │ │ │ [忘記密碼？] │ │ │ └─────────────────────────────────────┘ ``` **安全特性** - 密碼欄位自動完成（autocomplete="current-password"） - 顯示/隱藏密碼切換 - 登入失敗顯示剩餘嘗試次數 - 5 次失敗後鎖定 30 分鐘 - 支援 Remember Me（30 天） --- ### 多因素驗證（MFA） **設定 MFA** ``` ┌─────────────────────────────────────┐ │ 啟用雙因素驗證 │ ├─────────────────────────────────────┤ │ │ │ 步驟 1: 掃描 QR Code │ │ │ │ [QR Code 圖片] │ │ │ │ 或手動輸入此金鑰: │ │ JBSWY3DPEHPK3PXP │ │ │ │ 步驟 2: 輸入驗證碼 │ │ [__ __ __ __ __ __] │ │ │ │ [取消] [驗證並啟用] │ └─────────────────────────────────────┘ ``` **登入時 MFA** ``` ┌─────────────────────────────────────┐ │ 雙因素驗證 │ ├─────────────────────────────────────┤ │ │ │ 請輸入驗證器應用程式中的 6 位數代碼 │ │ │ │ [__] [__] [__] [__] [__] [__] │ │ │ │ 代碼將在 25 秒後過期 │ │ ━━━━━━━━━━━━━━━━━━ │ │ │ │ [使用備用代碼] │ │ │ │ [上一步] [驗證] │ └─────────────────────────────────────┘ ``` **特性** - 倒數計時器（30 秒循環） - 輸入框自動聚焦 - 自動跳到下一格 - 支援貼上完整代碼 - 備用代碼選項 --- ### Session 逾時警告 **彈出對話框（閒置 25 分鐘時）** ``` ┌─────────────────────────────────────┐ │ ⏰ 您的連線即將逾時 │ ├─────────────────────────────────────┤ │ │ │ 由於閒置過久，您的連線將在 │ │ │ │ 04:59 後 │ ← 倒數計時 │ │ │ 自動登出 │ │ │ │ [繼續使用] [立即登出] │ └─────────────────────────────────────┘ ``` **特性** - 5 分鐘前警告 - 倒數計時（更新每秒） - 點擊「繼續使用」延長 Session - 逾時後自動導向登入頁 - 保存未儲存的草稿至 localStorage --- ### 權限不足提示 **內嵌提示（頁面內）** ``` ┌─────────────────────────────────────┐ │ │ │ 🔒 │ │ 權限不足 │ │ │ │ 您沒有權限執行此操作 │ │ 需要的角色: SecurityOfficer │ │ 您的角色: Employee │ │ │ │ 如需存取權限，請聯絡： │ │ 👤 李大華 (資安主管) │ │ 📧 security@company.com │ │ │ │ [申請權限] [返回] │ └─────────────────────────────────────┘ ``` **按鈕/功能禁用** - 無權限的按鈕：灰色 + 🔒 圖示 - Hover 顯示 Tooltip：「您沒有權限執行此操作」 - 點擊顯示權限說明對話框 --- ## 📊 資料表格設計 ### 標準表格（Desktop） **外觀** ``` ┌─────────────────────────────────────────────────────────────────┐ │ 資產清單 [搜尋____] [篩選▼] [匯出▼] │ ├─────────────────────────────────────────────────────────────────┤ │ ☑️ │ 資產編號 │ 名稱 │ 類型 │ 狀態 │ 操作 │ ├────┼───────────┼──────────────┼───────┼────────┼──────────┤ │ ☑️ │ AST-001 │ Web Server 01│ 伺服器 │ 🟢使用中│ [⋯] │ │ ☑️ │ AST-002 │ DB Server │ 伺服器 │ 🟢使用中│ [⋯] │ │ ⬜ │ AST-003 │ Firewall │ 網路 │ 🔴維護中│ [⋯] │ │ ⬜ │ AST-004 │ NAS Storage │ 儲存 │ 🟢使用中│ [⋯] │ ├────┴───────────┴──────────────┴───────┴────────┴──────────┤ │ 已選擇 2 項 [批次刪除] [批次匯出] 顯示 1-4 / 共 156 項│ │ [<] [1] [2] [3] [>] │ └─────────────────────────────────────────────────────────────────┘ ``` **功能特性** **表頭（Header）** - 可點擊排序（▲ ▼ 圖示） - 固定表頭（滾動時不動） - 可拖曳調整欄寬 - 可隱藏/顯示欄位 **全選 Checkbox** - 全選當前頁 - 半選狀態（部分選中） - 顯示已選數量 **操作欄（Actions）** - ⋯ 更多選單（點擊展開） - 👁️ 查看 - ✏️ 編輯 - 📋 複製 - 🗑️ 刪除 **批次操作** - 選中項目時顯示批次操作列 - 支援：刪除、匯出、變更狀態、標記 **分頁** - 顯示總數 - 每頁筆數選擇（10 / 25 / 50 / 100） - 跳頁輸入框 - 上一頁/下一頁按鈕 --- ### 行動版表格（Mobile） **卡片式呈現** ``` ┌─────────────────────────────────┐ │ 🔍 [搜尋___________] [篩選▼] │ ├─────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 📦 Web Server 01 │ │ │ │ AST-001 • 伺服器 • 🟢使用中 │ │ │ │ 擁有者: 張小明 • IT 部 │ │ │ │ [查看] [編輯] │ │ │ └─────────────────────────────┘ │ │ │ │ ┌─────────────────────────────┐ │ │ │ 📦 DB Server │ │ │ │ AST-002 • 伺服器 • 🟢使用中 │ │ │ │ 擁有者: 李大華 • IT 部 │ │ │ │ [查看] [編輯] │ │ │ └─────────────────────────────┘ │ │ │ │ [載入更多...] │ └─────────────────────────────────┘ ``` **特性** - 卡片式佈局 - 顯示關鍵資訊 - 左右滑動快速操作 - 無限滾動載入 --- ## 🎨 資料視覺化進階設計 ### 儀表板小工具（Widgets） **可自訂儀表板** 使用者可以： - 新增/移除小工具 - 拖曳重新排列 - 調整大小 **可用小工具類型** 1. **數字卡片**（1×1） - 單一數字 + 趨勢 - 範例：合規完成度 2. **迷你圖表**（1×1） - Sparkline - 範例：本週稽核趨勢 3. **列表**（2×1） - 最近活動 - 待辦事項 4. **圓環圖**（1×1） - 比例顯示 - 範例：控制措施分布 5. **折線圖**（2×1） - 時間序列 - 範例：月度合規趨勢 6. **長條圖**（2×1） - 分類比較 - 範例：各部門資產數 **編輯模式** ``` ┌─────────────────────────────────┐ │ 儀表板編輯模式 [✓完成] [✕取消] │ ├─────────────────────────────────┤ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ 合規 │ │ 待辦 │ │ 稽核 │ │ ← 可拖曳 │ │ 85% │ │ 12項 │ │ 5天 │ │ │ └──────┘ └──────┘ └──────┘ │ │ [✕] [✕] [✕] │ ← 刪除 │ │ │ ┌────────────┐ ┌─────────────┐ │ │ │ 趨勢圖表 │ │ 活動列表 │ │ │ │ │ │ │ │ │ └────────────┘ └─────────────┘ │ │ [✕] [✕] │ │ │ │ [➕ 新增小工具] │ └─────────────────────────────────┘ ``` --- ## 📋 完整頁面清單與優先級 ### MVP 階段必須頁面 **Tier 1（最高優先）** - ✅ 儀表板（Dashboard）- 本文檔已詳述 - ✅ 登入/登出頁面 - ✅ 資產列表 - ✅ 資產詳情/編輯 - ✅ 文件列表 - ✅ 文件查看/編輯 - ✅ 稽核計畫列表 - ✅ 個人設定頁 **Tier 2（次要優先）** - ⏳ 控制措施清單 - ⏳ 風險評估表單 - ⏳ 事件通報表單 - ⏳ 訓練記錄頁面 - ⏳ 使用者管理頁面 **Tier 3（可延後）** - 🔮 報表中心 - 🔮 系統設定頁 - 🔮 稽核日誌查看 - 🔮 高級搜尋頁面 --- ## 🎯 設計交付檔案清單 完成設計階段後，應交付以下檔案： ### 設計稿（Design Files） - [ ] Figma / Sketch 完整設計檔 - [ ] 互動原型（Prototype） - [ ] 元件庫（Component Library） - [ ] 設計規範文件（Design Spec） ### 資產（Assets） - [ ] Logo（SVG + PNG） - [ ] 圖示集（SVG Icon Set） - [ ] 插圖（Empty State, Error, 404） - [ ] 色彩變數檔（CSS Variables） ### 文件（Documentation） - [ ] UI Kit 使用指南 - [ ] 元件使用範例 - [ ] 響應式斷點規範 - [ ] 動畫時間軸（Animation Spec） ## 🎯 設計交付檔案清單（續） ### 開發資源（Dev Resources） - [ ] CSS Framework 設定（Tailwind Config） - [ ] 元件程式碼片段（Code Snippets） - [ ] Storybook 元件庫（如適用） - [ ] 字體檔案（Web Fonts） - [ ] Icon Font 或 SVG Sprite --- ## 📐 關鍵頁面詳細設計 ### 資產列表頁面 **頁面結構** ``` ┌─────────────────────────────────────────────────────────────┐ │ Top Navigation │ ├─────┬───────────────────────────────────────────────────────┤ │ │ 📦 資產管理 │ │ ├───────────────────────────────────────────────────────┤ │ │ │ │ S │ ┌──────────────────────────────────────────────────┐ │ │ i │ │ 📊 統計概覽 │ │ │ d │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ e │ │ │總數 │ │硬體 │ │軟體 │ │資料 │ │ │ │ │ │ │ 156 │ │ 45 │ │ 67 │ │ 44 │ │ │ │ M │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ e │ └──────────────────────────────────────────────────┘ │ │ n │ │ │ u │ ┌──────────────────────────────────────────────────┐ │ │ │ │ 🔍 搜尋與篩選 │ │ │ │ │ ┌────────────┐ ┌─────┐ ┌─────┐ ┌──────┐ │ │ │ │ │ │🔍 搜尋... │ │類型▼│ │狀態▼│ │部門▼ │ │ │ │ │ │ └────────────┘ └─────┘ └─────┘ └──────┘ │ │ │ │ │ │ │ │ │ │ [+ 新增資產] [📥 匯入] [📤 匯出] [⚙️ 欄位設定] │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ 📋 資產清單 │ │ │ │ │ ┌──────────────────────────────────────────────┐│ │ │ │ │ │ ☑️│編號 │名稱 │類型│狀態 │擁有者│⋯ ││ │ │ │ │ ├───┼─────┼─────────┼───┼─────┼─────┼──┤│ │ │ │ │ │ ☑️│AST-1│Web Srv │伺服│🟢使用│張小明│⋯ ││ │ │ │ │ │ ⬜│AST-2│DB Srv │伺服│🟢使用│李大華│⋯ ││ │ │ │ │ │ ⬜│AST-3│Firewall │網路│🔴維護│王美麗│⋯ ││ │ │ │ │ └──────────────────────────────────────────────┘│ │ │ │ │ │ │ │ │ │ 已選 1 項 [批次刪除] [批次編輯] 第1/16頁 [<][>]│ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ └─────┴────────────────────────────────────────────────────────┘ ``` **功能區塊說明** **1. 統計概覽區** - 顯示總數 + 各類型數量 - 可點擊快速篩選該類型 - 數字更新時有動畫效果 **2. 搜尋與篩選區** - **搜尋框**： - 即時搜尋（輸入 300ms 後觸發） - 搜尋範圍：編號、名稱、描述 - 支援模糊搜尋 - **篩選器**： - 類型：硬體/軟體/資料/人員/設施 - 狀態：使用中/閒置/維護中/報廢 - 部門：下拉選單（動態載入） - CIA 等級：高/中/低 - **已套用篩選標籤**： ``` 🏷️ 類型:伺服器 ✕ 🏷️ 狀態:使用中 ✕ [清除全部] ``` **3. 動作按鈕區** - **+ 新增資產**（藍色主按鈕） - 點擊開啟新增表單 Modal - **📥 匯入**（次要按鈕） - 下拉選單： - 從 Excel 匯入 - 從 CSV 匯入 - 下載範本 - **📤 匯出**（次要按鈕） - 下拉選單： - 匯出當前篩選結果 - 匯出全部 - 格式：Excel / CSV / PDF - **⚙️ 欄位設定**（次要按鈕） - 顯示/隱藏欄位 - 調整欄位順序 - 儲存為個人視圖 **4. 資料表格區** **欄位說明** - **Checkbox**（40px）：批次選擇 - **編號**（100px）：AST-001，可排序 - **名稱**（200px）：可點擊查看詳情，可排序 - **類型**（100px）：圖示 + 文字 - **狀態**（100px）：彩色標籤 - **擁有者**（120px）：頭像 + 姓名 - **CIA 等級**（120px）：三個小標籤或簡寫 - **最後更新**（150px）：相對時間，可排序 - **操作**（60px）：⋯ 更多選單 **狀態顯示** ``` 🟢 使用中 （綠色圓點 + 文字） 🟡 閒置 （黃色圓點 + 文字） 🔴 維護中 （紅色圓點 + 文字） ⚫ 報廢 （灰色圓點 + 文字） ``` **操作選單（⋯）** ``` ┌──────────────┐ │ 👁️ 查看詳情 │ │ ✏️ 編輯 │ │ 📋 複製 │ │ 🔗 查看關聯 │ │ 📊 風險評估 │ │ ─────────── │ │ 🗑️ 刪除 │ ← 紅色 └──────────────┘ ``` **5. 批次操作區**（選中項目時顯示） ``` ┌──────────────────────────────────────────┐ │ ✓ 已選擇 3 項 │ │ [刪除] [變更狀態] [指派擁有者] [匯出] [✕] │ └──────────────────────────────────────────┘ ``` **6. 分頁區** ``` 顯示 1-25 / 共 156 項 [每頁: 25 ▼] [◄] 1 2 3 ... 7 [►] ``` --- ### 資產詳情頁面 **頁面結構** ``` ┌─────────────────────────────────────────────────────────────┐ │ Top Navigation │ ├─────┬───────────────────────────────────────────────────────┤ │ │ 📦 資產管理 > Web Server 01 │ │ │ [編輯] [刪除] [⋯] │ │ ├───────────────────────────────────────────────────────┤ │ │ │ │ S │ ┌────────────────────────────────────────────┐ │ │ i │ │ 基本資訊 [展開] │ │ │ d │ ├────────────────────────────────────────────┤ │ │ e │ │ 資產編號 AST-001 │ │ │ │ │ 資產名稱 Web Server 01 │ │ │ M │ │ 資產類型 🖥️ 伺服器 - Linux │ │ │ e │ │ 狀態 🟢 使用中 │ │ │ n │ │ 擁有者 張小明 (IT部) │ │ │ u │ │ 管理者 李大華 (IT部) │ │ │ │ │ 所在位置 機房 A - Rack 3 │ │ │ │ │ 建立日期 2024-01-15 │ │ │ │ │ 最後更新 2024-10-25 (5天前) │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ CIA 等級 │ │ │ │ ├────────────────────────────────────────────┤ │ │ │ │ 機密性 (C) 🔴 高 │ │ │ │ │ 完整性 (I) 🔴 高 │ │ │ │ │ 可用性 (A) 🟠 中 │ │ │ │ │ │ │ │ │ │ 整體風險評級: 🔴 高風險 │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ 📑 Tab 導航 │ │ │ │ │ [控制措施] [風險] [稽核記錄] [相關文件] [歷史]│ │ │ │ ├────────────────────────────────────────────┤ │ │ │ │ │ │ │ │ │ 🛡️ 適用的控制措施 (15項) │ │ │ │ │ │ │ │ │ │ ✅ A.8.9 組態管理 │ │ │ │ │ 實作狀態: 已完成 | 最後稽核: 2024-09-10 │ │ │ │ │ [查看詳情] │ │ │ │ │ │ │ │ │ │ ⏳ A.8.13 資訊備份 │ │ │ │ │ 實作狀態: 進行中 70% | 預計: 2024-11-01 │ │ │ │ │ [查看詳情] │ │ │ │ │ │ │ │ │ │ ⬜ A.8.16 監控活動 │ │ │ │ │ 實作狀態: 未開始 | 負責人: 未指派 │ │ │ │ │ [開始實作] │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ └─────┴────────────────────────────────────────────────────────┘ ``` **Tab 頁內容** **Tab 1: 控制措施** - 列出適用於此資產的所有控制措施 - 顯示實作狀態進度 - 可快速進入控制措施詳情 - 可新增自訂控制措施 **Tab 2: 風險** ``` ┌────────────────────────────────────────────┐ │ ⚠️ 識別的風險 (3項) [新增風險] │ ├────────────────────────────────────────────┤ │ │ │ 🔴 高風險: DDoS 攻擊 │ │ 可能性: 4/5 | 影響: 5/5 | 風險值: 20 │ │ 處理方式: 降低 | 負責人: 張小明 │ │ [查看處理計畫] │ │ │ │ 🟠 中風險: 硬體故障 │ │ 可能性: 3/5 | 影響: 4/5 | 風險值: 12 │ │ 處理方式: 接受 | 已購買備援設備 │ │ [查看詳情] │ │ │ └────────────────────────────────────────────┘ ``` **Tab 3: 稽核記錄** ``` ┌────────────────────────────────────────────┐ │ 📋 稽核歷史 (8次) │ ├────────────────────────────────────────────┤ │ │ │ ✅ 2024-09-10 | 定期稽核 │ │ 稽核員: 王美麗 | 結果: 通過 │ │ 發現: 無不符合項 │ │ [查看報告] │ │ │ │ ⚠️ 2024-06-15 | 專項稽核 │ │ 稽核員: 李大華 | 結果: 有發現 │ │ 發現: 1個觀察項 │ │ [查看報告] │ │ │ └────────────────────────────────────────────┘ ``` **Tab 4: 相關文件** ``` ┌────────────────────────────────────────────┐ │ 📄 關聯文件 (5份) [連結文件] │ ├────────────────────────────────────────────┤ │ │ │ 📘 組態管理程序 │ │ 版本: 1.2 | 更新: 2024-08-10 │ │ [查看] │ │ │ │ 📗 備份作業指引 │ │ 版本: 1.0 | 更新: 2024-07-05 │ │ [查看] │ │ │ └────────────────────────────────────────────┘ ``` **Tab 5: 變更歷史** ``` ┌────────────────────────────────────────────┐ │ 🕐 變更歷史 │ ├────────────────────────────────────────────┤ │ │ │ 2024-10-25 14:32 | 張小明 │ │ 更新 CIA 等級: 可用性 高→中 │ │ 原因: 增加備援機制 │ │ │ │ 2024-09-10 09:15 | 李大華 │ │ 變更狀態: 維護中→使用中 │ │ 原因: 維護完成並通過測試 │ │ │ │ 2024-09-08 16:00 | 系統管理員 │ │ 變更狀態: 使用中→維護中 │ │ 原因: 例行性維護 │ │ │ └────────────────────────────────────────────┘ ``` --- ### 資產關係圖（視覺化） **互動式網狀圖** ``` ┌─────────────────────────────────────────────┐ │ 🔗 資產關係圖 [全螢幕] [匯出]│ ├─────────────────────────────────────────────┤ │ │ │ ┌──────────┐ │ │ │ Firewall │ │ │ └─────┬────┘ │ │ │ │ │ ┌────────┴────────┐ │ │ │ │ │ │ ┌────▼─────┐ ┌────▼─────┐ │ │ │Web Server│ │DB Server │ │ │ │ 01 │◄────┤ │ │ │ └────┬─────┘ └────┬─────┘ │ │ │ │ │ │ └────────┬───────┘ │ │ │ │ │ ┌─────▼─────┐ │ │ │NAS Storage│ │ │ └───────────┘ │ │ │ │ 圖例: ─ 依賴關係 ◄─ 資料流向 │ └─────────────────────────────────────────────┘ ``` **特性** - 可拖曳節點 - 可縮放 - 點擊節點查看詳情 - Hover 顯示關係類型 - 支援匯出為圖片 --- ### 文件查看頁面 **頁面結構** ``` ┌─────────────────────────────────────────────────────────────┐ │ Top Navigation │ ├─────┬───────────────────────────────────────────────────────┤ │ │ 📄 文件管理 > 資訊安全政策 │ │ │ [編輯] [下載PDF] [列印] │ │ ├───────────────────────────────────────────────────────┤ │ │ │ │ S │ ┌────────────────────────────────────────────┐ │ │ i │ │ 文件資訊 │ │ │ d │ ├────────────────────────────────────────────┤ │ │ e │ │ 文件編號 DOC-POL-001 │ │ │ │ │ 文件名稱 資訊安全政策 │ │ │ M │ │ 版本 v1.3 │ │ │ e │ │ 狀態 🟢 已發布 │ │ │ n │ │ 發布日期 2024-09-01 │ │ │ u │ │ 下次審查 2025-09-01 (306天後) │ │ │ │ │ 核准者 總經理 王大明 │ │ │ │ │ │ │ │ │ │ 對應控制措施: │ │ │ │ │ • A.5.1 資訊安全政策 │ │ │ │ │ • A.5.2 資訊安全角色與責任 │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ 📋 目錄 │ │ │ │ ├────────────────────────────────────────────┤ │ │ │ │ 1. 目的 │ │ │ │ │ 2. 適用範圍 │ │ │ │ │ 3. 資訊安全目標 │ │ │ │ │ 4. 資訊安全原則 │ │ │ │ │ 4.1 機密性 │ │ │ │ │ 4.2 完整性 │ │ │ │ │ 4.3 可用性 │ │ │ │ │ 5. 角色與責任 │ │ │ │ │ 6. 違反政策之處置 │ │ │ │ │ 7. 政策審查 │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ 📊 簽署狀態 (85/100) │ │ │ │ ├────────────────────────────────────────────┤ │ │ │ │ ✅ 已簽署: 85人 │ │ │ │ │ ⏳ 待簽署: 15人 [提醒] │ │ │ │ │ ━━━━━━━━━━━━━━━━━ 85% │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ └─────┴────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ 文件內容區域 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 【ACME公司】資訊安全政策 │ │ 版本：v1.3 │ │ 發布日期：2024年9月1日 │ │ 核准者：總經理 王大明 [簽名] │ │ │ │ ═══════════════════════════════════════════════════════════ │ │ │ │ 一、目的 │ │ 本政策旨在保護 ACME公司 之資訊資產，確保資訊的機密性、 │ │ 完整性及可用性，以支持業務目標達成並符合法規要求。 │ │ │ │ 二、適用範圍 │ │ 本政策適用於： │ │ 1. ACME公司 全體員工（含正職、約聘、派遣、實習生） │ │ 2. 所有承包商、供應商、顧問及第三方人員 │ │ ... │ │ │ └─────────────────────────────────────────────────────────────┘ ``` **功能特性** **1. 版本對比** ``` [比較版本: v1.2 ▼] ⇄ [v1.3 ▼] 顯示差異： 新增內容：綠色背景 刪除內容：紅色刪除線 修改內容：黃色背景 ``` **2. 評論功能** - 可在段落旁新增評論 - 支援 @提及其他使用者 - 評論可標記為已解決 **3. 簽署功能** ``` ┌──────────────────────────────────────┐ │ ✍️ 簽署此文件 │ ├──────────────────────────────────────┤ │ │ │ ☑️ 我已詳細閱讀並充分了解本文件內容 │ │ │ │ 電子簽章： │ │ ┌──────────────────────────────────┐ │ │ │ │ │ ← 簽名板 │ │ [簽名區域] │ │ │ │ │ │ │ └──────────────────────────────────┘ │ │ [清除] [使用預設簽名] │ │ │ │ [取消] [確認簽署] │ └──────────────────────────────────────┘ ``` --- ### 稽核計畫頁面 **年度視圖（甘特圖風格）** ``` ┌─────────────────────────────────────────────────────────────┐ │ 🔍 稽核管理 > 年度計畫 [新增稽核] [匯出] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 2025年度稽核計畫 [月視圖] [列表視圖]│ │ │ │ 稽核項目 │1月│2月│3月│4月│5月│6月│7月│8月│9月│10│11│12││ │───────────────────┼───┼───┼───┼───┼───┼───┼───┼───┼───┼──┼──┼──┤ │ 資安意識訓練 │███│ │ │ │ │ │███│ │ │ │ │ │ │ 實體安全稽核 │ │███│ │ │ │ │ │███│ │ │ │ │ │ 釣魚郵件演練 │ │ │███│ │ │███│ │ │███│ │ │ │ │ 存取權審查 │███│ │ │███│ │ │███│ │ │██│ │ │ │ 災難復原演練 │ │ │ │ │███│ │ │ │ │ │ │ │ │ 供應商安全評估 │ │ │ │ │ │███│ │ │ │ │ │ │ │ 弱點評估 │ │ │ │ │ │ │███│ │ │ │ │ │ │ 變更管理審查 │ │ │ │ │ │ │ │███│ │ │ │ │ │ 備份還原測試 │ │ │ │ │ │ │ │ │███│ │ │ │ │ 資安事件演練 │ │ │ │ │ │ │ │ │ │██│ │ │ │ 內部稽核(全面) │ │ │ │ │ │ │ │ │ │ │██│ │ │ 管理審查會議 │ │ │ │ │ │ │ │ │ │ │ │██│ │ │ │ 圖例: ███ 已完成 ███ 進行中 ███ 未開始 ███ 逾期 │ └─────────────────────────────────────────────────────────────┘ ``` **列表視圖** ``` ┌─────────────────────────────────────────────────────────────┐ │ 篩選: [全部▼] [本月▼] [逾期▼] [我負責▼] 排序: [日期▼]│ ├─────────────────────────────────────────────────────────────┤ │ │ │ ⏰ 即將到期 (7天內) │ │ ┌──────────────────────────────────────────────────────────┐│ │ │ 🟡 釣魚郵件演練 ││ │ │ 計畫日期: 2024-11-05 (5天後) ││ │ │ 負責人: 李大華 | 狀態: 準備中 ││ │ │ [查看詳情] [開始執行] ││ │ └──────────────────────────────────────────────────────────┘│ │ │ │ 📅 本月稽核 (3項) │ │ ┌──────────────────────────────────────────────────────────┐│ │ │ ✅ 資安意識訓練 ││ │ │ 計畫日期: 2024-10-15 | 完成日期: 2024-10-16 ││ │ │ 負責人: 張小明 | 狀態: 已完成 | 結果: 通過 ││ │ │ [查看報告] ││ │ └──────────────────────────────────────────────────────────┘│ │ │ │ 🔴 逾期稽核 (1項) │ │ ┌──────────────────────────────────────────────────────────┐│ │ │ 🟠 供應商安全評估 ││ │ │ 計畫日期: 2024-10-01 | 完成日期: 2024-10-02 ││ │ │ 負責人: 王小華 | 狀態: 已完成 | 結果: 通過 ││ │ │ [查看報告] ││ │ └──────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘