0 Fork 0

Files

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

19 KiB

Raw Blame History

受 Nike 啟發的設計系統

Category: 電子商務與零售運動零售。單色 UI，巨幅大寫字體，全出血攝影。

1. 視覺主題與氛圍

Nike.com 是一座充滿動感的零售大教堂——將運動的爆發性能量轉化為數位購物體驗。其設計遵循極簡主義原則：將一切剝離至黑、白、灰，讓運動攝影和產品色彩無需競爭便能主導視覺。最終效果不像一個網站，更像是以奢侈雜誌精準度排版的體育編輯專題。每一個像素要麼在銷售產品，要麼在引導使用者走向產品。

「Podium CDS」（Nike 內部核心設計系統）確立了一套極為單色調的基礎。UI 融入黑色（#111111）文字與白色表面，讓英雄攝影——揮汗如雨的運動員、凌空飛翔的球鞋、體育場的澎湃能量——承載情感重量。當 UI 中出現顏色時，幾乎都是功能性的：紅色表示錯誤，藍色表示連結，綠色表示成功。產品本身才是色彩故事。這種克制創造出一種視覺悖論：網際網路上色彩最豐富的頁面反而感覺最簡約，因為所有活力來自商品而非介面。

字體系統是 Nike 視覺識別的另一半。Nike Futura ND——一款定制的窄體 Futura 變體，行高極度壓縮（0.90）——以巨幅大寫標題穿透英雄圖像，如同排版衝擊波。標題之下，Helvetica Now 字族以瑞士精確度負責從導覽到產品描述的一切內容。這種表現型展示字體與功能性正文字體之間的分裂，映照了 Nike 品牌的雙重性：激勵與執行相遇。

主要特徵：

單色調 UI（黑/白/灰），讓產品攝影成為唯一的色彩來源
巨幅大寫展示字體（96px，行高 0.90），穿透英雄圖像
無邊框圓角的全出血攝影——圖像填充每一個可用邊緣
藥丸形按鈕（30px 圓角）作為主要互動元素
8px 間距網格，嚴格的運動紀律——每個尺寸都對齊到系統
以類別為驅動的購物架構，搭配大型導覽圖像卡片
無陰影、邊框極簡的層級模型——僅透過灰度變化區分表面

2. 色彩調色盤與角色

主色

Nike 黑 (#111111)：基礎——主要文字、按鈕背景、導覽文字、英雄疊加層。刻意不用純黑（#000000），營造略微柔和的閱讀體驗
Nike 白 (#FFFFFF)：主要頁面畫布、深色背景上的按鈕文字、卡片表面、導覽列背景

表面與背景

雪白 (#FAFAFA)：最淺表面，接近白色的微妙差異（--podium-cds-color-grey-50）
淺灰 (#F5F5F5)：次級背景、搜尋輸入填充、圖像佔位符、載入骨架屏（--podium-cds-color-grey-100）
懸停灰 (#E5E5E5)：懸停狀態背景、停用按鈕填充（--podium-cds-color-grey-200）
深色表面 (#28282A)：深色/反色區塊的主背景（--podium-cds-color-grey-800）
深炭灰 (#1F1F21)：反色主背景，最深的非黑色表面（--podium-cds-color-grey-900）
深色懸停 (#39393B)：深色背景上的懸停狀態（--podium-cds-color-grey-700）

中性色與文字色

主要文字 (#111111)：正文主體、標題、導覽連結（--podium-cds-color-text-primary）
次要文字 (#707072)：描述性文案、中繼資料、時間戳記、價格標籤（--podium-cds-color-text-secondary）
停用文字 (#9E9EA0)：非活動元素、不可用選項（--podium-cds-color-text-disabled）
停用反色 (#4B4B4D)：深色背景上的停用文字（--podium-cds-color-text-disabled-inverse）
主要邊框 (#707072)：標準邊框顏色，與次要文字一致
次要邊框 (#CACACB)：細微邊框、輸入框邊框、分隔線（--podium-cds-color-grey-300）
停用邊框 (#CACACB)：非活動邊框狀態
啟用邊框 (#111111)：啟用/聚焦邊框，與主要文字一致

語意色與強調色

Nike 紅 (#D30005)：嚴重錯誤、促銷角標、緊急通知（--podium-cds-color-red-600）
亮紅 (#EE0005)：紅色-500，略淺的紅色用於強調
Nike 橙色角標 (#D33918)：角標文字、促銷標注（--podium-cds-color-text-badge）
橙閃 (#FF5000)：富有表現力的橙色強調（--podium-cds-color-orange-400）
成功綠 (#007D48)：確認、可用性、積極狀態（--podium-cds-color-green-600）
成功反色 (#1EAA52)：深色背景上的成功色（--podium-cds-color-green-500）
連結藍 (#1151FF)：文字連結、資訊高亮（--podium-cds-color-blue-500）
資訊反色 (#1190FF)：深色背景上的連結（--podium-cds-color-blue-400）
警告黃 (#FEDF35)：警告背景、注意橫幅（--podium-cds-color-yellow-200）
焦點環 (rgba(39, 93, 197, 1))：鍵盤焦點指示環

延伸色譜（Podium CDS）

每個色階從 50 到 900，用於活動和產品頁面的表現性使用：

紅色: #FFE5E5 → #EE0005 → #530300
橙色: #FFE2D6 → #FF5000 → #3E1009
黃色: #FEF087 → #FCA600 → #99470A
綠色: #DFFFB9 → #1EAA52 → #003C2A
青色: #D4FFFB → #008E98 → #043441
藍色: #D6EEFF → #1151FF → #020664
紫色: #E4E1FC → #6E0FF6 → #1C0060
粉色: #FFE1F3 → #ED1AA0 → #4C012D

漸層系統

Nike 避免使用 UI 漸層。出現漸層時，均為攝影漸層——應用於產品英雄背景（例如，紅色鞋款置於紅到深紅的漸層背景上）。設計系統本身僅使用純色。

3. 排版規則

字體族

展示字體： Nike Futura ND（Nike 專屬定制窄體 Futura 變體）

備用字體：Helvetica Now Text Medium、Helvetica、Arial
專用於大型大寫展示標題
特有的緊密行高（0.90）與大寫轉換

標題字體： Helvetica Now Display Medium

備用字體：Helvetica、Arial
用於 24–32px 的章節標題和產品名稱

正文 Medium： Helvetica Now Text Medium（字重 500）

備用字體：Helvetica、Arial
用於連結、按鈕、說明文字、強調正文

正文： Helvetica Now Text（字重 400）

備用字體：Helvetica、Arial
用於標準正文、描述、中繼資料

阿拉伯語： Neue Frutiger Arabic——特定語言替代字體

層級

角色	尺寸	字重	行高	字間距	備注
展示	96px	500	0.90	—	Nike Futura ND，大寫，英雄標題
標題 1	32px	500	1.20	—	Helvetica Now Display Medium，章節標題
標題 2	24px	500	1.20	—	Helvetica Now Display Medium，子章節
標題 3	16px	500	1.50	—	Helvetica Now Text Medium，卡片標題
正文	16px	400	1.75	—	Helvetica Now Text，產品描述
正文 Medium	16px	500	1.75	—	Helvetica Now Text Medium，強調文字
連結	16px	500	1.75	—	Helvetica Now Text Medium，導覽連結
小連結	14px	500	1.86	—	Helvetica Now Text Medium，頁尾/實用連結
按鈕	16px	500	1.50	—	Helvetica Now Text Medium，CTA 文字
小按鈕	14px	500	1.50	—	Helvetica Now Text Medium，次級按鈕
說明	14px	500	1.50	—	Helvetica Now Text Medium，價格標籤
小號	12px	500	1.50	—	Helvetica Now Text Medium，時間戳記
微小	12px	400	1.50	—	Helvetica Now Text，法律文字

原則

Nike 的排版是一種張力研究。展示層——Nike Futura ND，96px，行高壓縮至 0.90——被設計得如同體育場計分板：巨幅、窄體、大寫、無法忽視。它將標題變成戰鬥口號。展示層之下，Helvetica Now 提供臨床式的對應：瑞士精確度的可讀性，1.75 行高確保舒適的產品瀏覽體驗。字重 500（Medium）貫穿正文始終，賦予 Nike 文案一種輕微的自信感而不顯厚重——每一句話讀起來都像一個有把握的建議，而非呼喊。

4. 元件樣式

按鈕

主要按鈕

背景：Nike 黑（#111111）
文字：白色（#FFFFFF），16px/500，Helvetica Now Text Medium
邊框：無
邊框圓角：完全圓潤藥丸形（30px）
內邊距：約 12px 24px
懸停：背景變為灰色-500（#707072），文字懸停顏色
啟用：scale(0) 漣漪效果，透明度 0.5
焦點：2px 盒陰影環，顏色 rgba(39, 93, 197, 1)
轉場：背景 200ms ease

深色背景上的主要按鈕

背景：白色（#FFFFFF）
文字：黑色（#111111）
懸停：背景變為灰色-300（#CACACB）

次要按鈕（描邊）

背景：透明
文字：Nike 黑（#111111）
邊框：1.5px solid #CACACB（灰色-300）
邊框圓角：30px
懸停：邊框加深至 #707072，背景變為灰色-200

停用按鈕

背景：灰色-200（#E5E5E5）
文字：灰色-400（#9E9EA0）
游標：not-allowed

圖示按鈕

背景：灰色-100（#F5F5F5）
形狀：30px 圓角（或 50% 圓形）
內邊距：6px
懸停：灰色-500 背景

卡片與容器

背景：白色（#FFFFFF）——大多數情況下無可見卡片邊界
邊框圓角：產品圖像卡片為 0px（邊緣到邊緣圖像），互動容器為 20px
陰影：無——Nike 完全不使用卡片陰影
懸停：產品卡片無上浮效果；卡片內文字連結下底線
產品卡片：圖像在上（無圓角），文字中繼資料在下，間距 12px
類別卡片：全出血攝影，深色漸層疊加層上顯示文字
轉場：懸停時圖像切換的透明度 200ms ease

輸入框與表單

背景：灰色-100（#F5F5F5）
邊框：可見時 1px solid #CACACB，搜尋框無邊框
邊框圓角：24px（搜尋輸入），8px（表單輸入）
字體：Helvetica Now Text，16px
焦點：邊框變為 #111111（邊框啟用），2px 焦點環 rgba(39, 93, 197, 1)
錯誤：邊框 #D30005（嚴重）
佔位符：灰色-500（#707072）
轉場：邊框顏色 200ms ease

導覽

背景：白色（#FFFFFF），黏性定位
高度：桌面端約 60px
左側：Nike Swoosh 標誌（24x24px SVG）
中間：類別連結（新品與精選、男款、女款、童款、特賣），16px/500 Helvetica Now Text Medium
右側：搜尋（24px 圓角輸入框）、收藏、購物車圖示
懸停：文字顏色變為灰色-500（#707072）
行動版：漢堡選單，全螢幕疊加層
頂部橫幅：深色背景（#111111）白色文字的促銷訊息列

圖像處理

英雄圖像：全出血，無邊框圓角，邊緣到邊緣
產品網格：正方形（1:1）或 4:3 寬高比，無邊框圓角
類別卡片：16:9 或 4:3，全出血並帶文字疊加層
圖像佔位符：灰色-100（#F5F5F5）純色背景
延遲載入：原生 loading="lazy"，骨架屏使用 #F5F5F5 背景
產品懸停：切換至次級圖像（正面 → 側面視圖）

促銷橫幅

全寬深色（#111111）背景，白色文字
緊湊內邊距（垂直 8-12px）
文字置中，12px/500 Helvetica Now Text Medium
用於運費促銷、會員權益、特賣公告

5. 版面原則

間距系統

基礎單位：4px（主網格為 8px 的倍數）

令牌	值	用途
space-1	4px	緊湊圖示間距、行內間距
space-2	8px	基礎單位、按鈕圖示間距
space-3	12px	卡片內邊距、緊湊外邊距
space-4	16px	標準內邊距、導覽間距
space-5	20px	產品卡片間距
space-6	24px	章節內邊距、網格間距
space-7	32px	章節分隔
space-8	48px	主要章節內邊距
space-9	64px	英雄區域內邊距
space-10	80px	大型章節間距

網格與容器

最大容器寬度：1920px
標準內容寬度：約 1440px，帶水平內邊距
產品網格：桌面端 3 欄，平板端 2 欄，行動端 1 欄
類別網格：3 欄，全出血圖像
網格間距：產品卡片之間 4-12px（刻意緊湊）
水平內邊距：桌面 48px，平板 24px，行動 16px

留白哲學

Nike 的留白策略刻意激進——不是時尚品牌那種奢侈的呼吸感，而是一種壓縮的、高密度的方式，用內容或刻意的留白填滿每一個像素。產品網格使用最小間距（4-12px）營造豐盛感和選擇感。章節分隔較寬（48-80px）以區分購物情境。整體效果是一家感覺商品琳瑯滿目卻保持可導覽性的商店——如同一家布局良好的運動超市。

邊框圓角比例

值	上下文
0px	產品圖像、英雄攝影（銳利邊緣）
8px	表單輸入（非搜尋）
18px	小型互動元素
20px	容器、帶 UI 內容的卡片
24px	搜尋輸入、中等藥丸形
30px	按鈕、標籤、篩選（完整藥丸形）
50%	圓形圖示按鈕、頭像佔位符

6. 深度與層級

層級	處理	用途
扁平	無陰影，無邊框	一切的預設狀態
分隔線	`0px -1px 0px 0px #E5E5E5 inset`	章節之間的細微嵌入線
焦點	`0 0 0 2px rgba(39, 93, 197, 1)`	鍵盤焦點環
疊加層	攝影上的深色遮罩	圖像上文字的可讀性

Nike 的層級哲學是激進的扁平化。沒有卡片陰影，沒有懸停上浮，沒有浮動元素。深度完全透過顏色傳遞——深色區塊後退，淺色區塊前進，灰度變化表示狀態變化。這種扁平感強化了運動、務實的品牌個性：沒有視覺裝飾，只有直接的溝通。整個系統中唯一的「陰影」是 1px 嵌入分隔線和無障礙必需的焦點環。

裝飾性深度

英雄攝影疊加層：全出血攝影上的深色漸層遮罩，確保文字可讀性
產品背景漸層：英雄產品圖背後的彩色背景（例如，紅色鞋款置於紅色漸層背景上）
橫幅條：頁面頂部的純深色（#111111）促銷條

7. 規範與禁忌

規範

所有主要文字使用 Nike 黑（#111111）——絕不使用純黑 #000000
保持按鈕藥丸形（30px 圓角），限定為主要/次要變體
英雄區域使用全出血、邊緣到邊緣的攝影——圖像不加邊框圓角
讓產品攝影提供所有色彩活力；保持 UI 單色調
大寫 Nike Futura ND 僅用於展示標題（96px+）
保持緊湊的產品網格間距（4-12px）營造密集、豐盛的感覺
所有輸入框和佔位符背景使用灰色-100（#F5F5F5）
將顏色專門保留用於語意含義（紅色=錯誤，綠色=成功，藍色=連結）
所有互動文字元素使用字重 500（Medium）

禁忌

不為卡片添加陰影——Nike 的層級模型完全扁平
不為產品圖像添加邊框圓角——只有 UI 元素才有圓角
不為 UI 元素引入灰度以外的品牌顏色
不在 24px 以下使用 Nike Futura ND——它專屬於展示字體
不添加懸停上浮效果——Nike 卡片懸停時不會產生動畫
不為按鈕或連結使用常規字重（400）——始終使用 500
不在 UI 元素後方添加彩色背景——顏色專用於產品場景
每張卡片不要超過兩級文字層級（標題 + 正文）
不添加裝飾性分隔線——1px 嵌入線是唯一的分隔線模式
不弱化對比度——Nike 的設計刻意將黑白對比推向最大值

8. 響應式行為

斷點

名稱	寬度	主要變化
行動版	<640px	單欄，漢堡導覽，展示文字縮小，緊湊 16px 內邊距
小平板	640-768px	開始 2 欄產品網格，導覽仍折疊
平板	768-960px	2 欄網格，類別卡片縮放，水平內邊距 24px
小桌面	960-1024px	導覽展開為完整水平，3 欄產品網格
桌面	1024-1440px	完整版面，展開導覽，3 欄網格，48px 內邊距
大桌面	>1440px	最大寬度容器置中，增加外邊距，英雄圖像全出血

觸控目標

最小觸控目標：44x44px（WCAG AAA）
行動版導覽圖示：48x48px 觸控區域
產品卡片：整個表面均可點擊
篩選藥丸：最小 36px 高度，12px 內邊距

折疊策略

導覽：960px 以下完整類別連結 → 漢堡選單；搜尋、收藏、購物車圖示保持可見
產品網格：3 欄 → 960px 時 2 欄 → 640px 時 1 欄
英雄區域：展示文字從 96px → 64px → 48px 縮小；英雄圖像在所有尺寸保持全出血
類別卡片：3 欄 → 2 欄 → 1 欄，保持全出血圖像
章節內邊距：隨視埠縮小，80px → 48px → 32px → 24px
促銷橫幅：文字換行或截斷，保持深色背景

圖像行為

透過 Nike CDN（c.static-nike.com）使用寬度參數提供響應式圖像
產品圖像：srcset 多解析度（w_320、w_640、w_960、w_1920）
英雄圖像：所有斷點均全出血，寬高比變化（桌面 16:9 → 行動端 4:3）
延遲載入：原生 loading="lazy"，載入期間灰色-100 佔位符
藝術指導：英雄裁切在桌面端和行動端構圖之間變化

9. 智能體提示指南

快速顏色參考

主要 CTA：Nike 黑（#111111）
背景：白色（#FFFFFF）
次要表面：淺灰（#F5F5F5）
標題文字：Nike 黑（#111111）
正文文字/懸停：次要文字（#707072）
邊框：次要邊框（#CACACB）
錯誤：Nike 紅（#D30005）
連結：連結藍（#1151FF）

元件提示範例

"建立一個產品英雄區，全出血邊緣到邊緣攝影，無邊框圓角，深色漸層疊加層用於文字，96px/500 巨幅大寫標題採用 Nike Futura 風格，行高 0.90，Nike 黑（#111111）藥丸形按鈕（30px 圓角）"
"設計一個 3 欄產品卡片網格，正方形圖像（無邊框圓角），卡片間距 4px，產品名稱 16px/500 Nike 黑（#111111），價格 14px/500，次要文字灰色-500（#707072）"
"建構一個黏性白色導覽列，左對齊標誌，中間類別連結 16px/500（#111111），懸停顏色 #707072，右對齊搜尋（24px 圓角，#F5F5F5 背景）、收藏和購物車圖示"
"建立一個促銷橫幅條，#111111 背景，白色 12px/500 置中文字，垂直內邊距 8px——全寬，無邊框圓角"
"設計一個次要描邊按鈕，透明背景，1.5px #CACACB 邊框，30px 藥丸圓角，16px/500 #111111 文字，懸停時邊框加深至 #707072"

迭代指南

使用此設計系統精修已有介面時：

一次專注於一個元件
引用本文件中的具體顏色名稱和十六進位代碼
記住：產品攝影是顏色——UI 保持單色調
使用灰度進行狀態變化：#F5F5F5 → #E5E5E5 → #CACACB → #707072
如果 UI 中某處感覺過於豐富多彩，它很可能確實如此——Nike 保持 UI 灰度
展示字體（Nike Futura）應始終大寫，絕不低於 24px
正文字體（Helvetica Now）互動元素幾乎應始終使用字重 500

19 KiB Raw Blame History Unescape Escape