admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d8be643ec75429c718fd96752f3cc35e347cb4f1
workbuddy_skills/open-design/design-systems/nvidia/DESIGN-zh-tw.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

297 lines
16 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 靈感來源 NVIDIA 的設計系統
> 類別：媒體與消費性產品
> GPU 運算。黑綠能量，技術力量美學。
## 1. 視覺主題與氛圍
NVIDIA 的網站是一個高對比、以技術為核心的體驗，透過設計克制傳遞出原始運算力量。頁面建立在純黑（`#000000`）與純白（`#ffffff`）的基礎之上，以 NVIDIA 標誌性的綠色（`#76b900`）作為點綴——這個色彩精確到足以成為品牌指紋。這不是自然界的蔥鬱綠意；而是 GPU 渲染光源般的電子感石灰綠，介於黃綠與翠綠之間，在科技圈中能立刻讓人聯想到「NVIDIA」。
客製字型 NVIDIA-EMEA（備援字型為 Arial 與 Helvetica）塑造出簡潔、工業感的排版語調。36px 粗體標題搭配緊密的 1.25 行高，形成密集且具權威感的文字區塊。這套字型缺少矽谷無襯線字型的幾何趣味——它更歐洲化、務實，並帶有工程導向的氣質。內文排在 15–16px，易讀而不奢侈，保持著如同 GPU 記憶體最佳化般的螢幕空間效率感。
NVIDIA 設計與其他深色背景科技網站的差異，在於對綠色強調色的嚴謹運用。`#76b900` 出現在邊框（`2px solid #76b900`）、連結底線（`underline 2px rgb(118, 185, 0)`）以及 CTA 中——但從不作為主要內容區域的背景或大面積色塊。綠色是訊號，不是表面。搭配深沉的陰影系統（`rgba(0, 0, 0, 0.3) 0px 0px 5px`）與極小的圓角（1–2px），整體效果如同精密工程硬體以像素呈現。
**關鍵特徵：**
- NVIDIA 綠色（`#76b900`）作為純粹的強調色——僅用於邊框、底線與互動高亮
- 黑色（`#000000`）主導背景，深色區段搭配白色（`#ffffff`）文字
- NVIDIA-EMEA 客製字型，備援 Arial／Helvetica——工業感、歐洲風、簡潔
- 緊密行高（標題 1.25），形成密集且具權威感的文字區塊
- 極小圓角（1–2px）——全站使用銳利的工程感邊角
- 綠色邊框按鈕（`2px solid #76b900`）作為主要互動模式
- Font Awesome 6 Pro／Sharp 圖示系統，weight 900 呈現銳利圖示
- 多框架架構（PrimeReact、Fluent UI、Element Plus），支援豐富的互動元件
## 2. 色彩配置與角色
### 主要品牌色
- **NVIDIA 綠色**（`#76b900`）：標誌性色彩——用於邊框、連結底線、CTA 外框、啟用狀態指示。絕不作為大面積填充色。
- **純黑**（`#000000`）：主要頁面背景、淺色表面上的文字，主導整體調性。
- **純白**（`#ffffff`）：深色背景上的文字、淺色區段背景、卡片表面。
### 延伸品牌色
- **NVIDIA 亮綠**（`#bff230`）：明亮石灰色，用於高亮與懸停狀態。
- **橘色 400**（`#df6500`）：暖色強調，適用於警示、特色徽章或能源相關情境。
- **黃色 300**（`#ef9100`）：次要暖色強調，用於產品類別高亮。
- **黃色 050**（`#feeeb2`）：淺暖色表面，用於標注框背景。
### 狀態與語意色
- **紅色 500**（`#e52020`）：錯誤狀態、破壞性操作、重要警示。
- **紅色 800**（`#650b0b`）：深紅，用於嚴重警告背景。
- **綠色 500**（`#3f8500`）：成功狀態、正向指示（比品牌綠更深）。
- **藍色 700**（`#0046a4`）：資訊性強調，連結懸停替代色。
### 裝飾色
- **紫色 800**（`#4d1368`）：深紫，用於漸層末端、進階／AI 情境。
- **紫色 100**（`#f9d4ff`）：淺紫色調表面。
- **桃紅 700**（`#8c1c55`）：豐富強調色，用於特別促銷或精選內容。
### 中性色階
- **灰色 300**（`#a7a7a7`）：靜音文字、停用標籤。
- **灰色 400**（`#898989`）：次要文字、中繼資料。
- **灰色 500**（`#757575`）：三級文字、佔位符、頁尾。
- **灰色邊框**（`#5e5e5e`）：細膩邊框、分隔線。
- **近黑**（`#1a1a1a`）：深色表面、黑色頁面上的卡片背景。
### 互動狀態
- **連結預設（深色背景）**（`#ffffff`）：深色背景上的白色連結。
- **連結預設（淺色背景）**（`#000000`）：淺色背景上的黑色連結搭配綠色底線。
- **連結懸停**（`#3860be`）：所有連結變體懸停時轉為藍色。
- **按鈕懸停**（`#1eaedb`）：按鈕懸停狀態的青綠高亮。
- **按鈕啟用**（`#007fff`）：啟用／按下按鈕狀態的亮藍色。
- **焦點環**（`#000000 solid 2px`）：鍵盤焦點的黑色外框。
### 陰影與層次
- **卡片陰影**（`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`）：浮起卡片的細膩環境陰影。
## 3. 排版規則
### 字型家族
- **主要字型**：`NVIDIA-EMEA`，備援：`Arial, Helvetica, sans-serif`
- **圖示字型**：`Font Awesome 6 Pro`（實心圖示 weight 900，一般圖示 700）
- **銳利圖示**：`Font Awesome 6 Sharp`（細線圖示 weight 300，一般圖示 400）
### 層級結構
| 角色 | 字型 | 大小 | 粗細 | 行高 | 字間距 | 備註 |
|------|------|------|--------|-------------|----------------|-------|
| 主視覺標題 | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25（緊密） | normal | 最高衝擊力標題 |
| 區段標題 | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25（緊密） | normal | 區段標題、卡片標題 |
| 副標題 | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75（寬鬆） | normal | 功能描述、副標題 |
| 卡片標題 | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25（緊密） | normal | 卡片與模組標題 |
| 大內文 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67（寬鬆） | normal | 強調內文、導言段落 |
| 內文 | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | 標準閱讀文字 |
| 粗體內文 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | 強調標籤、導覽項目 |
| 小內文 | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67（寬鬆） | normal | 次要內容、描述 |
| 粗體小內文 | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | 強調次要內容 |
| 大按鈕 | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25（緊密） | normal | 主要 CTA 按鈕 |
| 按鈕 | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25（緊密） | normal | 標準按鈕 |
| 緊湊按鈕 | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00（緊密） | 0.144px | 小型／緊湊按鈕 |
| 連結 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | 導覽連結 |
| 大寫連結 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`，導覽標籤 |
| 說明文字 | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | 中繼資料、時間戳記 |
| 小說明文字 | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25（緊密） | normal | 細項說明、法律聲明 |
| 微型標籤 | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`，小型徽章 |
| 微型文字 | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00（緊密） | normal | 最小 UI 文字 |
### 原則
- **粗體作為預設語調**：NVIDIA 大量採用 weight 700 用於標題、按鈕、連結與標籤。400 僅保留給內文段落——其餘一律粗體，展現自信與權威感。
- **標題緊密，內文寬鬆**：標題行高固定為 1.25（緊密），而內文文字放鬆至 1.50–1.67。這種對比在內容區塊頂部製造視覺密度，同時保持段落的閱讀舒適度。
- **大寫導覽文字**：連結標籤使用 `text-transform: uppercase` 搭配 weight 700，形成如同硬體規格標籤般的導覽語調。
- **無裝飾性字距**：除緊湊按鈕（0.144px）外，全站字間距均為 normal。字型本身即承載工業感特質，無需額外操作。
## 4. 元件樣式
### 按鈕
**主要按鈕（綠色邊框）**
- 背景：`transparent`
- 文字：`#000000`
- 內距：11px 13px
- 邊框：`2px solid #76b900`
- 圓角：2px
- 字型：16px weight 700
- 懸停：背景 `#1eaedb`，文字 `#ffffff`
- 啟用：背景 `#007fff`，文字 `#ffffff`，邊框 `1px solid #003eff`，scale(1)
- 焦點：背景 `#1eaedb`，文字 `#ffffff`，外框 `#000000 solid 2px`，不透明度 0.9
- 用途：主要 CTA（「了解更多」、「探索解決方案」）
**次要按鈕（細綠色邊框）**
- 背景：透明
- 邊框：`1px solid #76b900`
- 圓角：2px
- 用途：次要操作、替代 CTA
**緊湊／行內按鈕**
- 字型：14.4px weight 700
- 字間距：0.144px
- 行高：1.00
- 用途：行內 CTA、緊湊導覽
### 卡片與容器
- 背景：`#ffffff`（淺色）或 `#1a1a1a`（深色區段）
- 邊框：無（乾淨邊緣）或 `1px solid #5e5e5e`
- 圓角：2px
- 陰影：浮起卡片使用 `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`
- 懸停：陰影加深
- 內距：16–24px
### 連結
- **深色背景**：`#ffffff`，無底線，懸停轉為 `#3860be`
- **淺色背景**：`#000000` 或 `#1a1a1a`，底線 `2px solid #76b900`，懸停轉為 `#3860be`，底線消除
- **綠色連結**：`#76b900`，懸停轉為 `#3860be`
- **靜音連結**：`#666666`，懸停轉為 `#3860be`
### 導覽列
- 深黑背景（`#000000`）
- Logo 左對齊，NVIDIA 字標醒目呈現
- 連結：NVIDIA-EMEA 14px weight 700 大寫，`#ffffff`
- 懸停：顏色轉換，底線不變
- 產品類別使用巨型下拉選單
- 捲動時固定於頂部並帶有背景
### 圖片處理
- 產品／GPU 渲染圖作為主視覺，通常全寬呈現
- 截圖圖片加細膩陰影增加層次感
- 深色主視覺區段疊加綠色漸層
- 頭像使用圓形容器（50% 圓角）
### 特色元件
**產品卡片**
- 白色或深色卡片，圓角極小（2px）
- 標題使用綠色強調邊框或底線
- 粗體標題搭配較輕的描述文字模式
- 底部附有綠色邊框 CTA
**技術規格表**
- 工業感網格排版
- 交替列背景（細膩灰色變化）
- 粗體標籤，一般字重數值
- 關鍵指標以綠色高亮標示
**Cookie／同意橫幅**
- 固定於頁面底部
- 圓角按鈕（2px 圓角）
- 灰色邊框處理
## 5. 版面原則
### 間距系統
- 基本單位：8px
- 刻度：1px、2px、3px、4px、5px、6px、7px、8px、9px、10px、11px、12px、13px、15px
- 主要內距值：8px、11px、13px、16px、24px、32px
- 區段間距：48–80px 垂直內距
### 網格與容器
- 最大內容寬度：約 1200px（受限容器）
- 全寬主視覺區段搭配受限文字區塊
- 功能區段：產品卡片使用 2–3 欄網格
- 文章／部落格內容使用單欄
- 文件頁面使用側邊欄排版
### 留白哲學
- **目的性密度**：NVIDIA 使用比一般 SaaS 網站更緊湊的間距，反映技術內容的密集性。留白的存在是為了區隔概念，而非製造奢華的空曠感。
- **區段節奏**：深色區段與白色區段交替出現，透過背景色（而非僅靠間距）區隔內容區塊。
- **卡片密度**：產品卡片緊密排列，間距 16–20px，呈現目錄感而非畫廊感。
### 圓角刻度
- 微型（1px）：行內標籤、極小元素
- 標準（2px）：按鈕、卡片、容器、輸入欄——幾乎所有元素的預設值
- 圓形（50%）：頭像圖片、圓形分頁指示器
## 6. 深度與層次
| 層級 | 處理方式 | 用途 |
|-------|-----------|-----|
| 平面（Level 0） | 無陰影 | 頁面背景、行內文字 |
| 細膩（Level 1） | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | 標準卡片、彈窗 |
| 邊框（Level 1b） | `1px solid #5e5e5e` | 內容分隔線、區段邊框 |
| 綠色強調（Level 2） | `2px solid #76b900` | 啟用元素、CTA、已選取項目 |
| 焦點（無障礙） | `2px solid #000000` 外框 | 鍵盤焦點環 |
**陰影哲學**：NVIDIA 的深度系統極簡且實用。基本上只有一個陰影值——5px 環境模糊、30% 不透明度——僅在卡片與彈窗上節制使用。主要的深度訊號不是陰影，而是_色彩對比_：黑色背景緊鄰白色區段、黑色表面上的綠色邊框。這創造出如同硬體材質的視覺層次，深度源於材質差異，而非模擬光線。
### 裝飾性深度
- 主視覺內容後方的綠色漸層暈染
- 深色到更深色的漸層（黑色到近黑色）用於區段轉場
- 無玻璃擬態或模糊效果——追求清晰而非氛圍感
## 7. 響應式行為
### 斷點
| 名稱 | 寬度 | 主要變化 |
|------|-------|-------------|
| 小型手機 | <375px | 緊湊單欄，縮小內距 |
| 手機 | 375–425px | 標準手機版面 |
| 大型手機 | 425–600px | 較寬手機，部分雙欄提示 |
| 小型平板 | 600–768px | 開始採用雙欄網格 |
| 平板 | 768–1024px | 完整卡片網格，擴展導覽 |
| 桌機 | 1024–1350px | 標準桌機版面 |
| 大型桌機 | >1350px | 最大內容寬度，充裕邊距 |
### 觸控目標
- 按鈕使用 11px 13px 內距，確保舒適的點擊目標
- 導覽連結 14px 大寫搭配適當間距
- 深色背景上的綠色邊框按鈕提供高對比觸控目標
- 手機版：漢堡選單展開為全螢幕覆蓋
### 折疊策略
- 主視覺：36px 標題按比例縮小
- 導覽列：約 1024px 時全水平導覽折疊為漢堡選單
- 產品卡片：3 欄→2 欄→單欄堆疊
- 頁尾：多欄網格折疊為單欄堆疊
- 區段間距：64–80px 在手機版縮減為 32–48px
- 圖片：維持長寬比，縮放至容器寬度
### 圖片行為
- GPU／產品渲染圖在所有尺寸保持高解析度
- 主視覺圖片依視窗比例縮放
- 卡片圖片使用一致的長寬比
- 全出血深色區段維持邊緣到邊緣的處理
## 8. 響應式行為（延伸）
### 字型縮放
- Display 36px 在手機版縮放至約 24px
- 區段標題 24px 在手機版縮放至約 20px
- 內文在所有斷點維持 15–16px
- 按鈕文字維持 16px 以確保一致的點擊目標
### 深色／淺色區段策略
- 深色區段（黑色背景、白色文字）與淺色區段（白色背景、黑色文字）交替出現
- 綠色強調色在兩種表面類型上保持一致
- 深色背景：連結為白色，底線為綠色
- 淺色背景：連結為黑色，底線為綠色
- 這種交替創造自然的捲動節奏與內容分組
## 9. Agent 提示指南
### 快速色彩參考
- 主要強調色：NVIDIA 綠色（`#76b900`）
- 深色背景：純黑（`#000000`）
- 淺色背景：純白（`#ffffff`）
- 深色背景標題文字：白色（`#ffffff`）
- 淺色背景標題文字：黑色（`#000000`）
- 淺色背景內文：黑色（`#000000`）或近黑（`#1a1a1a`）
- 深色背景內文：白色（`#ffffff`）或灰色 300（`#a7a7a7`）
- 連結懸停：藍色（`#3860be`）
- 邊框強調：`2px solid #76b900`
- 按鈕懸停：青綠色（`#1eaedb`）
### 元件提示範例
- 「在黑色背景上建立主視覺區段。標題 36px NVIDIA-EMEA weight 700，行高 1.25，顏色 #ffffff。副標題 18px weight 400，行高 1.67，顏色 #a7a7a7。CTA 按鈕背景透明，邊框 2px solid #76b900，圓角 2px，內距 11px 13px，文字 #ffffff。懸停時：背景 #1eaedb，文字白色。」
- 「設計產品卡片：白色背景，圓角 2px，box-shadow rgba(0,0,0,0.3) 0px 0px 5px。標題 20px NVIDIA-EMEA weight 700，行高 1.25，顏色 #000000。內文 15px weight 400，行高 1.67，顏色 #757575。標題下方綠色底線強調：border-bottom 2px solid #76b900。」
- 「建立導覽列：#000000 背景，固定於頂部。NVIDIA logo 左對齊。連結 14px NVIDIA-EMEA weight 700 大寫，顏色 #ffffff。懸停：顏色 #3860be。右側對齊綠色邊框 CTA 按鈕。」
- 「建立深色功能區段：#000000 背景。區段標籤 14px weight 700 大寫，顏色 #76b900。標題 24px weight 700，顏色 #ffffff。描述文字 16px weight 400，顏色 #a7a7a7。三張產品卡片水平排列，間距 20px。」
- 「設計頁尾：#000000 背景。多欄版面含連結群組。連結 14px weight 400，顏色 #a7a7a7。懸停：顏色 #76b900。底部列含法律文字 12px，顏色 #757575。」
### 迭代指南
1. 永遠以 `#76b900` 作為強調色，絕不作為背景填充——它是邊框、底線與高亮的訊號色
2. 按鈕預設為透明搭配綠色邊框——填充背景僅在懸停／啟用狀態出現
3. Weight 700 是所有互動元素與標題的主要語調；400 僅用於內文段落
4. 所有元素圓角統一為 2px——這種銳利的極小圓角是工業美學的核心
5. 深色區段使用白色文字；淺色區段使用黑色文字——綠色強調色在兩者上效果相同
6. 連結懸停一律為 `#3860be`（藍色），無論連結的預設顏色為何
7. 標題行高 1.25，內文行高 1.50–1.67——維持此對比以建立視覺層級
8. 導覽列使用大寫 14px 粗體——這種硬體標籤式的排版語調是品牌語音的一部分
Reference in new issue View Git Blame Copy Permalink