01
基礎題
知識庫首頁規格
測試問題
為 12 人研究團隊的內部知識庫首頁建立視覺規格。內容有搜尋、最近文件、專案標籤與快捷鍵提示。請給完整 token、字體階層、Bento 版面、按鈕、標籤與互動規則；風格要安靜、精準且適合長時間閱讀。
載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill6234 tokens · 116991 ms
# 內部知識庫首頁視覺規格
適用對象：12 人研究團隊
核心氣質：安靜、精準、低干擾，適合每日長時間閱讀
首頁內容：全域搜尋、最近文件、專案標籤、快捷鍵提示
---
## 1. 設計原則
1. **內容優先**：介面退居背景，文件名稱與更新資訊保持最高辨識度。
2. **低視覺噪音**：不使用漸層、厚重陰影、大面積高飽和色或過度動效。
3. **密度適中**：桌面版單屏呈現主要工作入口，但每個區塊保留充足留白。
4. **一致且可預測**：卡片、標籤、按鈕與鍵盤焦點遵循同一套狀態規則。
5. **鍵盤優先**：搜尋、結果導覽與快捷操作均可不依賴滑鼠完成。
---
## 2. Design Tokens
### 2.1 色彩
採中性冷灰為主，藍色僅用於互動與焦點。
```css
:root {
/* Canvas */
--color-canvas: #F7F8F8;
--color-surface: #FFFFFF;
--color-surface-subtle: #F2F4F4;
--color-surface-hover: #ECEFEF;
--color-surface-active: #E6EAEA;
/* Text */
--color-text-primary: #202424;
--color-text-secondary: #5F6868;
--color-text-tertiary: #858E8E;
--color-text-disabled: #A9B0B0;
--color-text-inverse: #FFFFFF;
/* Border */
--color-border-subtle: #E4E7E7;
--color-border-default: #D6DADA;
--color-border-strong: #B8C0C0;
/* Accent */
--color-accent: #315E78;
--color-accent-hover: #284F66;
--color-accent-active: #214456;
--color-accent-subtle: #E8F0F4;
--color-accent-border: #BDD0DA;
/* Semantic */
--color-success: #39715C;
--color-success-subtle: #E9F3EE;
--color-warning: #8A6528;
--color-warning-subtle: #F7F0E2;
--color-danger: #9A4848;
--color-danger-subtle: #F8EAEA;
/* Focus & selection */
--color-focus: #39779A;
--color-selection: #DCEAF1;
/* Overlay */
--color-overlay: rgb(21 28 28 / 36%);
}
```
使用規則：
- 一般內文須使用 `text-primary` 或 `text-secondary`。
- `text-tertiary` 僅用於時間戳、輔助說明與非關鍵 metadata。
- Accent 色不作大面積裝飾，只用於主要操作、連結、焦點與選取狀態。
- 專案標籤以低彩度淺底呈現，文字對比度至少 4.5:1。
- 不以顏色作為狀態的唯一辨識方式，須搭配文字或圖示。
### 2.2 專案標籤色組
```css
--tag-blue-bg: #E9F0F4;
--tag-blue-text: #355E73;
--tag-green-bg: #EAF2ED;
--tag-green-text: #426A58;
--tag-amber-bg: #F5F0E5;
--tag-amber-text: #755E35;
--tag-violet-bg: #F0EDF5;
--tag-violet-text:#65597A;
--tag-rose-bg: #F5ECEC;
--tag-rose-text: #765656;
--tag-gray-bg: #EEF0F0;
--tag-gray-text: #586161;
```
同一專案的顏色固定，不因頁面或狀態改變。建議最多同時使用 6 組色彩。
### 2.3 間距
以 4px 為基準單位。
```css
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
```
主要規則：
- 頁面左右安全距離：桌面 40px、平板 24px、手機 16px。
- Bento 卡片內距：桌面 24px；窄螢幕 20px。
- 區塊標題與內容：16px。
- 清單項目間距：4px；項目內距為 12px 14px。
- 可點擊元素之間至少保留 8px。
### 2.4 尺寸與圓角
```css
--size-control-sm: 32px;
--size-control-md: 40px;
--size-control-lg: 48px;
--size-search: 56px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
```
- 按鈕：`radius-sm`
- 搜尋框與 Bento 卡片：`radius-md`
- 標籤：`radius-pill`
- 不使用過度圓潤的「氣泡式」大型卡片。
### 2.5 邊框與陰影
```css
--border-width: 1px;
--shadow-card:
0 1px 2px rgb(24 32 32 / 4%);
--shadow-raised:
0 8px 24px rgb(24 32 32 / 8%),
0 2px 6px rgb(24 32 32 / 5%);
--shadow-focus:
0 0 0 3px rgb(57 119 154 / 20%);
```
- 靜態卡片主要依靠邊框分層，只使用 `shadow-card`。
- 搜尋建議面板、Popover 與 Modal 可使用 `shadow-raised`。
- 不使用模糊範圍過大的裝飾陰影。
### 2.6 動效
```css
--duration-fast: 100ms;
--duration-normal: 160ms;
--duration-slow: 220ms;
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-exit: cubic-bezier(.4, 0, 1, 1);
```
允許動效：
- Hover、背景色與邊框：100–160ms
- 搜尋面板出現：160ms，透明度加 4px 位移
- Modal：220ms 以內
禁止：
- 彈跳、視差、循環動畫
- 卡片 hover 上浮
- 造成版面位移的縮放效果
若系統啟用 `prefers-reduced-motion`，移除位移與縮放，只保留立即或 100ms 內的透明度變化。
---
## 3. 字體階層
### 3.1 字體族
```css
--font-sans:
Inter, "Noto Sans TC", "PingFang TC",
"Microsoft JhengHei", system-ui, sans-serif;
--font-mono:
"SFMono-Regular", "Roboto Mono", "Noto Sans Mono",
Consolas, monospace;
```
- 中文以 Noto Sans TC 或系統黑體呈現。
- 英數若使用 Inter，需確認與中文字級、基線視覺協調。
- 快捷鍵、文件 ID 與程式碼使用等寬字體。
- 正文避免低於 14px。
### 3.2 字級 Token
| Token | 字級／行高 | 字重 | 用途 |
|---|---:|---:|---|
| Display | 32px / 40px | 600 | 首頁問候或頁面主標，最多一行 |
| H1 | 26px / 34px | 600 | 頁面標題 |
| H2 | 20px / 28px | 600 | Bento 主要區塊標題 |
| H3 | 16px / 24px | 600 | 卡片或群組標題 |
| Body-lg | 16px / 26px | 400 | 導言、空狀態說明 |
| Body | 14px / 22px | 400 | 文件名稱以外的一般內容 |
| Label | 13px / 18px | 500 | 按鈕、標籤、欄位標籤 |
| Meta | 12px / 18px | 400 | 時間、作者、文件類型 |
| Kbd | 11px / 16px | 500 | 鍵帽文字 |
字體規則：
- 標題 letter-spacing：`-0.01em`；Display 可用 `-0.02em`。
- Body 不使用負字距。
- 中文正文維持至少 1.55 倍行高。
- 文件標題最多兩行；首頁清單建議單行截斷，完整名稱於 tooltip 顯示。
- 大段內容每行控制在約 60–78 個半形字元。
---
## 4. Bento 首頁版面
### 4.1 桌面版
內容最大寬度：`1200px`，置中。
建議斷點：`≥ 1024px`。
```text
┌──────────────────────────────────────────────────────┐
│ 品牌／知識庫名稱 說明 個人選單 │
├──────────────────────────────────────────────────────┤
│ 問候或頁面標題 │
│ ┌────────────────── 全域搜尋 ──────────────────────┐ │
│ │ 搜尋文件、研究主題或成員… ⌘ K │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────┐ ┌───────────────────┐ │
│ │ 最近文件 │ │ 專案標籤 │ │
│ │ │ │ │ │
│ │ 6–8 筆文件 │ │ 標籤與文件數 │ │
│ │ │ ├───────────────────┤ │
│ │ │ │ 快捷鍵提示 │ │
│ └────────────────────────────┘ └───────────────────┘ │
└──────────────────────────────────────────────────────┘
```
12 欄 Grid：
```css
.home-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
}
```
配置：
- 搜尋：12 欄，高度 56px；位於內容卡片之外或放入 12 欄淺底卡片。
- 最近文件：8 欄，最小高度 420px。
- 右側欄：4 欄。
- 專案標籤：4 欄，約 248px 高。
- 快捷鍵提示：4 欄，約 156px 高。
- 同列卡片頂部對齊，卡片間距 16px。
- 頁首至搜尋框 24px；搜尋至 Bento 區 24px。
### 4.2 中型螢幕
`768–1023px`：
- 使用 8 欄 Grid。
- 最近文件佔 8 欄。
- 專案標籤與快捷鍵各佔 4 欄，並排於下一列。
- 頁面最大寬度不再限制，由 24px 安全距離控制。
### 4.3 手機版
`< 768px`：
- 單欄排列：搜尋 → 最近文件 → 專案標籤 → 快捷鍵。
- 卡片間距 12px。
- 頁面標題使用 H1；可省略非必要問候文案。
- 最近文件初始顯示 5 筆，其餘透過「查看全部」進入文件列表。
- 標籤不可水平溢出；採自然換行。
- 搜尋快捷鍵提示可改為搜尋圖示，不顯示 `⌘ K`。
---
## 5. Bento 卡片規格
```css
.bento-card {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-6);
}
```
卡片結構：
- Header 高度依內容自然延伸，不固定。
- 標題左對齊；右側最多保留一個文字操作，如「查看全部」。
- Header 與主要內容間距 16px。
- 卡片內不得再嵌套相同視覺重量的卡片。
- 整張卡片只有在語意上代表單一目的地時才可整體點擊。
- 若卡片內含多個文件或標籤，只讓個別項目可點擊。
---
## 6. 全域搜尋
### 6.1 預設狀態
- 高度：56px
- 左側搜尋圖示：20px
- 輸入字級：16px / 24px
- 左右內距：16px
- 圖示與文字間距：12px
- 右側快捷鍵鍵帽：`⌘ K`；Windows/Linux 顯示 `Ctrl K`
- Placeholder：「搜尋文件、研究主題或成員…」
- 背景：`surface`
- 邊框：`border-default`
### 6.2 狀態
- **Hover**：邊框改為 `border-strong`。
- **Focus**：邊框 `focus`，加 `shadow-focus`；不可只移除原生 outline。
- **Typing**：右側快捷鍵提示改為清除按鈕。
- **Loading**：在右側顯示 16px spinner，搜尋文字保持可編輯。
- **Error**：保留輸入內容，面板顯示簡短錯誤與「重試」。
- **No result**：顯示「找不到符合的文件」，並提供移除篩選條件的操作。
### 6.3 搜尋結果面板
- 與搜尋框相距 8px。
- 寬度與搜尋框一致。
- 最大高度：`min(520px, 70vh)`。
- 結果依「文件、專案、成員」分組，但沒有結果的群組不顯示。
- 每筆結果高度至少 52px。
- 文件名稱使用 14px／600；摘要與 metadata 使用 Meta。
- 命中字詞以 `accent-subtle` 背景標示，不使用粗重螢光色。
- 鍵盤目前選項使用 `surface-hover` 背景及左側 2px accent indicator。
- `↑/↓` 移動、`Enter` 開啟、`Esc` 關閉。
- 關閉後焦點回到搜尋欄。
- 輸入防抖建議 150–250ms；不得造成輸入延遲感。
---
## 7. 最近文件
### 7.1 文件列
每列最低高度 58px，結構如下：
```text
[文件圖示] 文件名稱 更新時間
專案標籤 · 更新者
```
規格：
- 文件圖示：18px，使用 `text-tertiary`。
- 文件名稱：14px / 22px，字重 500。
- Metadata：12px / 18px。
- 更新時間右對齊，避免換行。
- 列內水平間距 12px。
- 列與列間以 1px `border-subtle` 分隔；首末列不額外加線。
- Hover 背景延伸至整列，使用 `surface-hover`。
- Focus-visible 顯示 2px focus ring，並保留圓角。
- 點擊列開啟文件；輔助操作以右側 `…` 按鈕呈現。
- `…` 僅在 hover、focus-within 時顯示；觸控裝置固定顯示。
### 7.2 排序與數量
- 預設依「最近查看」排序，而非最近建立。
- 顯示 6–8 筆；數量固定以避免卡片高度跳動。
- 更新時間採可讀形式：`剛剛`、`18 分鐘前`、`昨天`、`8 月 28 日`。
- Tooltip 或詳細頁可提供完整時間。
- 「查看全部」置於卡片 Header 右側，使用 tertiary button。
### 7.3 空狀態
- 不使用大型插圖。
- 顯示 20px 文件圖示、H3 標題及一行說明。
- 建議文案：「尚無最近文件」／「開啟文件後，會顯示在這裡。」
- 若使用者有建立權限，可提供「建立文件」次要按鈕。
---
## 8. 專案標籤
### 8.1 標籤外觀
- 高度：28px
- 左右內距：10px
- 標籤間距：8px
- 字級：13px / 18px，字重 500
- 圓角：pill
- 可選擇在右側顯示文件數量，例如 `聲學研究 12`
- 數量使用同色系但降低視覺強度，不另加徽章
### 8.2 狀態
- **Default**：淺色背景，無外框或使用同色系淡外框。
- **Hover**：背景加深約 5–7%。
- **Pressed**：背景再加深，持續 100ms。
- **Selected**：增加 1px 深色邊框與勾選圖示。
- **Focus-visible**：外側 focus ring。
- **Disabled**：降低至 45% opacity，不接受互動。
### 8.3 行為
- 點擊標籤進入對應專案文件列表。
- 若標籤用於搜尋篩選，需在標題或搜尋欄附近明確顯示已啟用狀態。
- 支援多選時，選取結果以「交集」或「聯集」運算必須明確標示；首頁預設建議單選。
- 顯示最多 10 個常用專案；其餘以「全部專案」進入完整列表。
- 不將標籤做成純色高飽和膠囊。
---
## 9. 按鈕
### 9.1 尺寸
| 尺寸 | 高度 | 水平內距 | 圖示 | 用途 |
|---|---:|---:|---:|---|
| Small | 32px | 12px | 16px | 卡片內次要操作 |
| Medium | 40px | 16px | 18px | 一般操作 |
| Large | 48px | 20px | 20px | 主要建立流程 |
最小觸控範圍為 44×44px；視覺按鈕較小時，以透明 hit area 補足。
### 9.2 類型
**Primary**
- 背景：`accent`
- 文字：白色
- Hover：`accent-hover`
- Active：`accent-active`
- 僅用於頁面最重要的單一操作，例如「建立文件」
**Secondary**
- 背景：`surface`
- 邊框：`border-default`
- 文字：`text-primary`
- Hover：`surface-hover`
**Tertiary**
- 無背景、無邊框
- 文字：`text-secondary`
- Hover：`surface-hover`
- 用於「查看全部」、「管理專案」
**Icon button**
- 正方形，預設 40×40px
- 圖示 18px
- 必須具備可存取名稱與 tooltip
- 不得單靠難以辨認的自訂圖示傳達功能
### 9.3 共通狀態
- Focus-visible：3px focus halo。
- Disabled：文字與圖示使用 `text-disabled`；不顯示 hover。
- Loading：保留原寬度，避免版面跳動；文字可隱藏但需保留空間。
- Danger 操作僅在確實具有破壞性時使用紅色。
---
## 10. 快捷鍵提示
呈現為安靜的參考資訊，不與主要操作競爭。
```text
搜尋 ⌘ K
建立文件 C
快速切換 ⌘ P
關閉面板 Esc
```
規格：
- 說明文字：13px / 20px，`text-secondary`
- 鍵帽：最小高度 22px，水平內距 6px
- 鍵帽背景：`surface-subtle`
- 邊框：`border-default`
- 圓角：4px
- 字體：Kbd token
- 鍵帽底部可加 1px 輕微內陰影，模擬實體按鍵但不可立體化過度
- 依作業系統自動顯示 `⌘` 或 `Ctrl`
- 單鍵快捷鍵不得在輸入欄位聚焦時觸發
- 使用者能透過 `?` 開啟完整快捷鍵說明時，需在此卡片底部提供入口
---
## 11. 導覽與頁首
- 頁首最大高度：64px。
- 左側顯示知識庫名稱；不需要大型品牌標誌。
- 右側僅保留說明入口與個人選單。
- 頁首使用透明或 Canvas 背景，不需獨立浮動卡片。
- 與主內容以留白或 1px 底線分隔。
- 個人頭像 32px；若無照片，使用低彩度底色與姓名縮寫。
- 首頁不配置常駐大型側邊欄；若產品範圍需要側欄，桌面寬度控制在 224px，並可收合至 56px。
---
## 12. 圖示
- 使用同一套 1.5px stroke 線性圖示。
- 常用尺寸：16、18、20px。
- 圖示預設色為 `text-secondary`。
- 避免混用填色與線框風格。
- 搜尋、文件、專案、更多、建立、關閉可使用圖示；抽象研究概念優先使用文字。
- 裝飾性圖示加上 `aria-hidden="true"`。
- 不能以圖示取代難以猜測的操作名稱。
---
## 13. 互動規則
### 13.1 Hover 與選取
- Hover 只改變背景、邊框或文字色，不移動元件。
- Selected 與 Focus 必須可同時辨識。
- 點擊區域包含整個清單列，但列內次要按鈕需停止事件冒泡。
- Hover 不顯示會造成內容寬度變化的元素；操作按鈕應預留空間。
### 13.2 載入
- 首次載入使用與內容結構一致的 skeleton。
- Skeleton 使用 `surface-subtle` 至 `border-subtle` 的低對比動畫。
- 超過約 600ms 才顯示 loading UI，避免短暫閃爍。
- 區塊可獨立載入，搜尋框不可被最近文件載入狀態阻塞。
### 13.3 回饋
- 非阻斷性成功訊息使用右下角 Toast，最多停留 4 秒。
- 錯誤訊息需包含下一步，例如「重新整理」或「重試」。
- 儲存中狀態不應頻繁跳動；可在文件層級顯示「儲存中／已儲存」。
- 刪除與離開未儲存內容等不可逆操作才使用確認對話框。
### 13.4 鍵盤順序
建議 Tab 順序：
1. 頁首主要入口
2. 搜尋框
3. 最近文件 Header 操作
4. 最近文件列
5. 專案標籤
6. 快捷鍵說明入口
搜尋面板開啟時，鍵盤導覽限制於搜尋框與結果面板；關閉後恢復原焦點。
---
## 14. 可讀性與無障礙
- 一般文字與背景對比度至少 4.5:1。
- 大型文字與非文字介面至少 3:1。
- 所有操作均支援鍵盤。
- Focus indicator 不得被 `overflow: hidden` 裁切。
- 文件更新、搜尋結果數量等動態資訊以適當的 `aria-live="polite"` 宣告。
- 標題使用正確的 H1–H3 結構，不以字級模擬語意。
- Icon-only button 必須提供可存取名稱。
- Tooltip 不承載完成任務所必需的唯一資訊。
- 頁面縮放至 200% 時不得出現水平捲動，資料表等必要例外除外。
- 支援 `prefers-reduced-motion` 與高對比模式。
- 文字選取色使用 `selection`，仍須保持清晰可讀。
---
## 15. 建議文案
- 頁面標題：`知識庫`
- 輔助文案：`搜尋團隊研究、決策與專案紀錄`
- 搜尋 Placeholder：`搜尋文件、研究主題或成員…`
- 最近文件：`最近文件`
- 最近文件操作：`查看全部`
- 專案標籤：`專案`
- 專案操作：`全部專案`
- 快捷鍵區塊：`快捷鍵`
- 搜尋空狀態：`找不到符合「{query}」的內容`
- 文件空狀態：`開啟文件後，會顯示在這裡`
- 無權限狀態：`你沒有查看此文件的權限`
文案保持直接、中性，避免歡呼式語氣、感嘆號與不必要的擬人化提示。
已載入 Skill +5101 tokens · 97246 ms
# 內部知識庫首頁視覺規格
適用情境：12 人研究團隊、桌面優先、每日高頻使用。
設計方向：安靜、精準、低刺激；以暖白、炭黑與少量低彩度標籤色建立層級。避免漸層、厚重陰影、玻璃效果與大面積高彩度背景。
## 1. 設計 Token
```css
:root {
/* Color — foundation */
--color-canvas: #F7F6F3;
--color-surface: #FFFFFF;
--color-surface-subtle: #FBFBFA;
--color-surface-hover: #F4F3F0;
--color-surface-pressed: #EEEDE9;
--color-text-primary: #20201E;
--color-text-secondary: #66645F;
--color-text-tertiary: #8A8882;
--color-text-disabled: #AAA8A2;
--color-text-inverse: #FFFFFF;
--color-border: #E7E5E0;
--color-border-strong: #D3D0C9;
--color-focus: #355F73;
--color-selection: #E1EEF3;
/* Color — semantic */
--color-danger-bg: #FDEBEC;
--color-danger-text: #8F3431;
--color-success-bg: #EDF3EC;
--color-success-text: #346538;
--color-info-bg: #E7F1F6;
--color-info-text: #315F73;
--color-warning-bg: #FBF3DB;
--color-warning-text: #815E12;
--color-neutral-bg: #EFEEEA;
--color-neutral-text: #5E5C57;
/* Typography */
--font-sans: "SF Pro Text", "Geist Sans", "Helvetica Neue", sans-serif;
--font-serif: "Newsreader", "Noto Serif TC", serif;
--font-mono: "Geist Mono", "SFMono-Regular", monospace;
/* Font size */
--text-11: 0.6875rem;
--text-12: 0.75rem;
--text-13: 0.8125rem;
--text-14: 0.875rem;
--text-16: 1rem;
--text-18: 1.125rem;
--text-24: 1.5rem;
--text-32: 2rem;
--text-40: 2.5rem;
/* Font weight */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
/* Spacing — 4px base */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* Geometry */
--radius-control: 6px;
--radius-card: 12px;
--radius-tag: 999px;
/* Elevation */
--shadow-hover: 0 2px 8px rgb(32 32 30 / 4%);
/* Motion */
--duration-fast: 120ms;
--duration-standard: 200ms;
--duration-entry: 480ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
/* Layout */
--content-max: 1184px;
--reading-max: 720px;
--grid-gap: 16px;
}
```
所有卡片邊框固定為 `1px solid var(--color-border)`。預設無陰影，僅可在可點擊卡片的 hover 狀態使用 `--shadow-hover`。
## 2. 字體階層
| 用途 | 字型 | 尺寸／行高 | 字重 | 字距 |
|---|---|---:|---:|---:|
| 頁面標題 | Serif | 40/44px | 400 | -0.03em |
| 行動版頁面標題 | Serif | 32/38px | 400 | -0.025em |
| Bento 區塊標題 | Sans | 18/26px | 600 | -0.015em |
| 文件標題 | Sans | 14/21px | 500 | -0.005em |
| 內文 | Sans | 16/26px | 400 | 0 |
| UI 文字 | Sans | 14/20px | 400 | 0 |
| 次要資訊 | Sans | 13/19px | 400 | 0.005em |
| 標籤 | Sans | 11/16px | 600 | 0.06em |
| 快捷鍵／時間 | Mono | 12/18px | 400 | 0 |
| 欄位標籤 | Sans | 12/17px | 600 | 0.04em |
規則：
- 只有頁面標題使用 Serif；搜尋、文件與操作介面皆使用 Sans。
- 長文閱讀行寬上限為 720px，行高至少為字級的 1.6 倍。
- 不使用純黑；主要文字固定為 `#20201E`。
- 標籤可用全大寫英文；中文標籤不增加字距，也不強制轉換形式。
- 文件標題最多兩行，第二行後截斷；中繼資料維持單行。
## 3. 頁面骨架
### 桌面版：≥ 1200px
- 頁面內容上限：1184px。
- 左右安全邊距：至少 32px。
- 12 欄 Grid，欄距 16px。
- 頂部工具列高度：64px。
- 標題區上方間距：64px；標題與 Bento 間距：32px。
- Bento 卡片最小內距：24px。
```text
┌──────────────────────────────────────────────────────────────┐
│ 團隊名稱 成員狀態 個人選單 │ 64
├──────────────────────────────────────────────────────────────┤
│ │
│ 研究資料庫 │
│ 團隊的文件、分析與專案脈絡 │
│ │
├──────────────────────────────────────────────────────────────┤
│ 搜尋知識庫 │ 156
│ [搜尋文件、研究者或專案… ⌘ K] │
├───────────────────────────────────────┬──────────────────────┤
│ │ 專案標籤 │
│ 最近文件 │ │ 220
│ ├──────────────────────┤
│ 6 筆文件列表 │ 快捷鍵 │
│ │ │ 220
└───────────────────────────────────────┴──────────────────────┘
8 欄 4 欄
```
Bento 配置：
- 搜尋：12 欄，最小高度 156px。
- 最近文件：8 欄，最小高度 456px。
- 專案標籤：4 欄，最小高度 220px。
- 快捷鍵：4 欄，最小高度 220px。
- 搜尋卡與下方卡片間距 16px。
- 卡片不可為了對齊而加入無意義空白；右側兩張卡片以內容自然分配高度。
### 平板版：768–1199px
- 8 欄 Grid，左右邊距 24px。
- 搜尋：8 欄。
- 最近文件：5 欄。
- 專案標籤與快捷鍵：3 欄，垂直排列。
- 頁面標題縮為 32px。
### 行動版：< 768px
- 4 欄 Grid，左右邊距 16px，卡片間距 12px。
- 所有卡片皆為 4 欄，順序固定為：搜尋、最近文件、專案標籤、快捷鍵。
- 卡片內距 20px。
- 頂部工具列高度 56px。
- 最近文件首頁僅顯示 4 筆，提供「查看全部」文字按鈕。
- 隱藏搜尋框內的快捷鍵提示，但保留外接鍵盤功能。
## 4. 頂部工具列
左側：
- 團隊名稱，14px／600。
- 可附 6×6px 中性色狀態點；不可使用強烈綠色表示「在線」。
右側：
- 成員按鈕顯示最多 4 個 24px 頭像，超出以 `+8` 表示。
- 個人選單使用 32×32px 圖示按鈕。
- 工具列下方使用 1px 分隔線，不加陰影。
頭像只作成員辨識，不作裝飾；無照片時以姓名縮寫和低彩度背景呈現。
## 5. 搜尋模組
### 結構
- 區塊標題：「搜尋知識庫」。
- 標題下方 16px 放置搜尋欄。
- 搜尋欄高度 48px，寬度 100%。
- 左側使用 18px Radix 或 Phosphor Bold 搜尋圖示。
- 右側顯示 `<kbd>⌘ K</kbd>` 或平台對應的 `Ctrl K`。
```css
.search-input {
height: 48px;
padding: 0 14px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-control);
background: var(--color-surface);
color: var(--color-text-primary);
}
```
### 狀態
- Default：`#D3D0C9` 邊框。
- Hover：邊框變為 `#AAA7A0`。
- Focus：2px `#355F73` 外框，與元件保持 2px 間距。
- Loading：結果區顯示 3 列固定高度骨架，不使用無限旋轉動畫。
- Empty：「找不到符合『關鍵字』的內容」，並提供清除篩選。
- Error：錯誤訊息置於搜尋欄下方，不清除使用者輸入。
### 搜尋結果
輸入 2 個字元後，在搜尋欄下方展開結果面板：
- 最多先顯示 8 筆。
- 結果依「文件、專案、成員」分組。
- 每列高度至少 52px。
- 顯示標題、所屬專案、更新時間；命中詞以中等字重標示，不用彩色底。
- 上下方向鍵切換，Enter 開啟，Esc 關閉。
- 選中項背景為 `--color-surface-hover`，不可只靠文字顏色表示。
## 6. 最近文件
### 卡片標頭
- 左側：「最近文件」。
- 右側：「查看全部」文字按鈕。
- 標頭與列表間距 16px。
### 文件列
每列高度 64px，結構如下：
```text
[文件圖示] 文件標題 18 分鐘前
專案名稱 · 最後編輯者
```
- 圖示容器：32×32px、6px 圓角、`#EFEEEA` 背景。
- 文件標題：14px／500。
- 中繼資料：12px／18px，`--color-text-tertiary`。
- 更新時間使用 Mono，靠右對齊。
- 列與列之間只使用 1px 分隔線，不再包覆子卡片。
- 整列可點擊；hover 背景延伸至卡片左右內距，圓角 6px。
- 文件類型以圖示形狀區別，不依賴顏色。
- 最多顯示 6 筆，按最近開啟時間排序。
空狀態文案：「尚無最近開啟的文件。」下方提供「瀏覽所有文件」次要按鈕。
## 7. 專案標籤
### 樣式
標籤高度 26px，左右內距 10px，間距 8px。
```css
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: 999px;
font: 600 11px/16px var(--font-sans);
letter-spacing: 0.04em;
}
```
建議語意配色：
| 類別 | 背景 | 文字 |
|---|---|---|
| 田野研究 | `#EDF3EC` | `#346538` |
| 文獻整理 | `#E7F1F6` | `#315F73` |
| 方法設計 | `#FBF3DB` | `#815E12` |
| 待審閱 | `#FDEBEC` | `#8F3431` |
| 已封存 | `#EFEEEA` | `#5E5C57` |
互動規則：
- 點擊標籤後篩選最近文件，標籤增加同色 1px 邊框與 600 字重。
- 再次點擊取消。
- 預設只允許單選；按住 Shift 可多選。
- 選取狀態不可只靠顏色：需增加 12px 勾選圖示。
- 標籤數量超過 8 個時，顯示「其餘 4 個」，不在首頁形成多行長牆。
- 標籤文字保持單行，最大寬度 160px，溢出截斷並提供 tooltip。
## 8. 按鈕
### Primary
- 高度：36px；重要建立動作可用 40px。
- 背景：`#20201E`。
- 文字：白色、14px／500。
- 圓角：6px。
- 左右內距：14px。
- 無陰影。
狀態：
- Hover：`#383734`。
- Active：`transform: scale(0.98)`。
- Focus-visible：2px focus ring，offset 2px。
- Disabled：`#D8D6D0` 背景、`#8A8882` 文字，禁止 hover 動畫。
- Loading：保留原按鈕寬度，文字換為進度狀態；不可只顯示 spinner。
### Secondary
- 白色背景、`#D3D0C9` 邊框、主要文字色。
- Hover 使用 `#F4F3F0`。
- 適合「瀏覽全部」「清除篩選」。
### Tertiary
- 無背景、無邊框，文字色為 `#4F6670`。
- Hover 顯示 `#EFEEEA` 背景。
- 適合卡片標頭中的「查看全部」。
### Icon button
- 32×32px，圖示 18px。
- 必須提供 `aria-label` 與 tooltip。
- 不使用細線圖示；統一採 Radix 或 Phosphor Bold，視覺筆畫約 1.75–2px。
## 9. 快捷鍵提示
使用實體鍵帽形式：
```css
kbd {
min-width: 24px;
height: 24px;
padding: 2px 6px;
border: 1px solid var(--color-border-strong);
border-bottom-color: #BAB7B0;
border-radius: 4px;
background: var(--color-surface-subtle);
color: var(--color-text-secondary);
font: 400 12px/18px var(--font-mono);
text-align: center;
}
```
首頁顯示：
| 動作 | 快捷鍵 |
|---|---|
| 開啟搜尋 | `⌘ K` / `Ctrl K` |
| 建立文件 | `C` |
| 前往最近文件 | `G`、`R` |
| 關閉面板 | `Esc` |
規則：
- 單字母快捷鍵在輸入欄、編輯器或對話框開啟時停用。
- 連續快捷鍵允許 800ms 輸入間隔。
- Windows/Linux 自動顯示 Ctrl，macOS 顯示 Command。
- 快捷鍵觸發後，焦點必須移至目標並由螢幕閱讀器宣告。
- 不攔截瀏覽器或輔助科技的既有快捷鍵。
## 10. 卡片互動
- 靜態卡片不產生 hover 動畫。
- 可點擊卡片 hover 時允許 `translateY(-1px)` 與極淡陰影。
- Active 回到原位，不使用彈跳效果。
- 卡片內若有多個獨立操作，不讓整張卡片成為單一連結。
- 焦點順序遵循視覺閱讀順序：搜尋 → 最近文件 → 專案標籤 → 快捷鍵。
- Scroll entry 僅於首次進入使用：`opacity 0 → 1`、`translateY(8px → 0)`、480ms。
- 列表項目錯開最多 40ms；整體動畫不得超過 700ms。
- `prefers-reduced-motion: reduce` 時取消位移與縮放，只保留即時狀態切換。
## 11. 內容與資料規則
- 相對時間在 24 小時內顯示「18 分鐘前」；超過 24 小時顯示日期。
- hover 或聚焦時間時，以 tooltip 提供完整日期、時間與時區。
- 文件標題應具體，如「訪談編碼規則 v2」或「2026 Q3 方法設計紀錄」。
- 禁止使用純裝飾性統計、歡迎口號或大面積插圖。
- 首頁只呈現能直接支援查找、返回工作與切換專案的資訊。
- 使用者篩選狀態保留於同一瀏覽器工作階段；搜尋字串不永久保留。
## 12. 無障礙與長時間閱讀
- 一般文字對背景對比至少 4.5:1；大字至少 3:1。
- 所有操作目標最小 40×40px；密集文件列可為 64px 高。
- focus ring 不可被 `overflow: hidden` 裁切。
- 不以顏色單獨傳達選取、錯誤或狀態。
- 搜尋結果使用 `combobox`、`listbox` 與 `option` 語意。
- 載入、結果數量與篩選變更透過 `aria-live="polite"` 宣告。
- 頁面縮放至 200% 時不得出現水平捲動。
- 暖白畫布搭配白色卡片，降低長時間觀看純白大面積造成的疲勞。
- 不使用自動播放、環境漂浮動畫、閃爍狀態或持續旋轉指示器。