admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
17 KiB
17 KiB
受 Uber 啟發的設計系統
Category: 媒體與消費 出行平台。大膽的黑白配色、緊湊的字體、都市活力。
1. 視覺主題與氛圍
Uber 的設計語言是自信極簡主義的典範——一個黑白宇宙，每一個像素都有其用途，沒有任何裝飾是無端存在的。整體體驗建立在鮮明的二元對立之上：純黑（#000000）與純白（#ffffff），幾乎沒有任何中間灰色來稀釋訊息。這不是一個尚未完成設計的新創公司那種貧瘠的極簡主義——這是一個足夠成熟的品牌所刻意為之的克制，成熟到可以用低語傳達一切。
標誌性字體 UberMove 是一款專有的幾何無襯線字體，具有鮮明的方形工程感。52px 的 UberMove Bold 標題如同廣告牌般有份量——權威、直接、毫不妥協。配套字體 UberMoveText 以中等字重（500）處理正文和按鈕，字形略柔和、可讀性更強。兩者共同構建了一套排版系統，感覺如同交通地圖：清晰、高效、專為快速瀏覽而生。
Uber 設計真正與眾不同之處，在於將全出血攝影與插畫和膠囊形互動元素（999px 圓角半徑）搭配使用。導航標籤、CTA 按鈕和分類選擇器都共享這種膠囊造型，創造出一套觸感友好、拇指操作順手的介面語言，讓人一眼即認出是 Uber。插畫——溫暖、略帶風格化的司機、乘客與城市風貌場景——為原本可能冰冷的單色系系統注入了人情味。頁面在白色內容區塊與全黑頁腳之間交替，卡片式版面使用盡可能輕柔的陰影（rgba(0,0,0,0.12-0.16)），在不破壞扁平美感的前提下製造微妙的層次感。
關鍵特徵：
- 純黑白基礎，UI 主體結構中幾乎不使用中間灰色
- UberMove（標題）+ UberMoveText（正文/UI）——專有幾何無襯線字體家族
- 萬物膠囊化：按鈕、標籤、導航項目均使用 999px 圓角半徑
- 溫暖的人文插畫與冷峻的單色介面形成對比
- 卡片式版面配以極輕柔的陰影（不透明度 0.12-0.16）
- 8px 間距網格，版面緊湊、資訊密度高
- 大膽攝影作品以全出血方式融入英雄區背景
- 黑色頁腳以高對比的深色環境錨定頁面
2. 色彩方案與角色
主色
- Uber Black（
#000000）：定義品牌的顏色——用於主要按鈕、標題、導航文字和頁腳。不是「近黑」或「偏黑」，而是真正毫不妥協的純黑。 - Pure White（
#ffffff）：主要介面底色與反色文字。用於頁面背景、卡片表面以及黑色元素上的文字。
互動與按鈕狀態
- Hover Gray（
#e2e2e2）：白色按鈕的懸停狀態——乾淨、冷靜的淺灰，提供清晰回饋而不帶溫度。 - Hover Light（
#f3f3f3）：浮起白色按鈕的微妙懸停——幾乎感受不到的灰，輕柔的互動回饋。 - Chip Gray（
#efefef）：次要/篩選按鈕及導航標籤的背景——中性、超淺的灰色。
文字與內容
- Body Gray（
#4b4b4b）：次要文字和頁腳連結——無冷暖偏向的純中灰色。 - Muted Gray（
#afafaf）：第三層文字、弱化的頁腳連結和佔位內容。
邊框與分隔
- Border Black（
#000000）：用於結構界定的細 1px 邊框——少量用於分隔線和表單容器。
陰影與深度
- Shadow Light（
rgba(0, 0, 0, 0.12)）：標準卡片層次——為內容卡片提供羽量級的懸浮感。 - Shadow Medium（
rgba(0, 0, 0, 0.16)）：浮動操作按鈕和疊加層稍強的層次感。 - Button Press（
rgba(0, 0, 0, 0.08)）：次要按鈕啟用/按下狀態的內嵌陰影。
連結狀態
- Default Link Blue（
#0000ee）：正文內容中帶底線的文字連結所用的標準瀏覽器藍色。 - Link White（
#ffffff）：深色表面上的連結——用於頁腳和深色區塊。 - Link Black（
#000000）：淺色表面上帶底線裝飾的連結。
漸層系統
- Uber 的設計完全無漸層。黑白二元對立和平鋪色塊構建了所有視覺層次。系統中任何地方都沒有漸層——每個表面都是純色，每次過渡都是硬邊界或陰影。
3. 字體規範
字體家族
- 標題/展示：
UberMove，備用字體：UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif - 正文/UI：
UberMoveText，備用字體：system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
注意：UberMove 和 UberMoveText 是專有字體。外部實作可用 system-ui 或 Inter 作為最接近的替代。UberMove 的幾何方形比例可用 Inter 或 DM Sans 近似。
層級
| 角色 | 字體 | 字級 | 字重 | 行高 | 備註 |
|---|---|---|---|---|---|
| 展示/英雄 | UberMove | 52px（3.25rem） | 700 | 1.23（緊湊） | 最大衝擊力，廣告牌級存在感 |
| 區塊標題 | UberMove | 36px（2.25rem） | 700 | 1.22（緊湊） | 主要區塊錨點 |
| 卡片標題 | UberMove | 32px（2rem） | 700 | 1.25（緊湊） | 卡片與功能標題 |
| 次級標題 | UberMove | 24px（1.5rem） | 700 | 1.33 | 次級區塊標題 |
| 小標題 | UberMove | 20px（1.25rem） | 700 | 1.40 | 緊湊標題、列表標題 |
| 導航/UI 大 | UberMoveText | 18px（1.13rem） | 500 | 1.33 | 導航連結、突出 UI 文字 |
| 正文/按鈕 | UberMoveText | 16px（1rem） | 400-500 | 1.25-1.50 | 標準正文、按鈕標籤 |
| 說明文字 | UberMoveText | 14px（0.88rem） | 400-500 | 1.14-1.43 | 後設資料、描述、小連結 |
| 微型文字 | UberMoveText | 12px（0.75rem） | 400 | 1.67（寬鬆） | 細則、法律文字 |
原則
- 粗體標題，中等正文：UberMove 標題字重統一為 700（加粗）——每個標題都有廣告牌般的衝擊力。UberMoveText 正文和 UI 文字使用 400-500，透過字重對比形成清晰的視覺層次。
- 緊湊標題行高：所有標題行高在 1.22-1.40 之間——緊湊有力，為快速瀏覽而設計，而非細讀。
- 功能性排版：沒有任何裝飾性文字處理。沒有字間距、沒有文字變換、沒有裝飾性尺寸。每個文字元素都直接服務於傳達目的。
- 兩款字體，嚴格分工：UberMove 專用於標題，UberMoveText 專用於正文、按鈕、連結和 UI。邊界從不逾越。
4. 元件樣式
按鈕
主要黑色（CTA）
- 背景：Uber Black（
#000000） - 文字：Pure White（
#ffffff） - 內距：10px 12px
- 圓角：999px（完整膠囊）
- 外框：無
- 焦點：內嵌圓環
rgb(255,255,255) 0px 0px 0px 2px - 主要操作按鈕——粗體、高對比、不可錯過
次要白色
- 背景：Pure White（
#ffffff） - 文字：Uber Black（
#000000） - 內距：10px 12px
- 圓角：999px（完整膠囊）
- 懸停：背景變為 Hover Gray（
#e2e2e2） - 焦點：背景變為 Hover Gray，出現內嵌圓環
- 用於深色表面或與主要黑色按鈕並列的次要操作
標籤/篩選
- 背景：Chip Gray（
#efefef） - 文字：Uber Black（
#000000） - 內距：14px 16px
- 圓角：999px（完整膠囊）
- 啟用：內嵌陰影
rgba(0,0,0,0.08) - 導航標籤、分類選擇器、篩選切換
浮動操作
- 背景：Pure White（
#ffffff） - 文字：Uber Black（
#000000） - 內距：14px
- 圓角：999px（完整膠囊）
- 陰影：
rgba(0,0,0,0.16) 0px 2px 8px 0px - 變換：
translateY(2px)輕微偏移 - 懸停：背景變為
#f3f3f3 - 地圖控件、返回頂部、浮動 CTA
卡片與容器
- 背景：白色頁面上使用 Pure White（
#ffffff）；無明顯卡片背景差異化 - 邊框：預設無——卡片由陰影而非描邊定義
- 圓角：標準內容卡片 8px；精選/推廣卡片 12px
- 陰影：標準層次
rgba(0,0,0,0.12) 0px 4px 16px 0px - 卡片內容密度高，內距極少
- 圖片主導卡片使用全出血影像，文字疊加或置於下方
輸入框與表單
- 文字：Uber Black（
#000000） - 背景：Pure White（
#ffffff） - 邊框：1px 純黑（
#000000）——唯一明顯出現邊框的地方 - 圓角：8px
- 內距：標準舒適間距
- 焦點：無自訂焦點狀態提取——依賴標準瀏覽器焦點圓環
導航
- 頂部固定導航，白色背景
- 標誌：24x24px 黑色 Uber 字標/圖示
- 連結：UberMoveText，14-18px，字重 500，Uber Black 色
- 膠囊形導航標籤，Chip Gray（
#efefef）背景，用於分類導航（「叫車」、「接單」、「企業」、「Uber Eats」） - 選單切換：50% 圓角的圓形按鈕
- 行動裝置：漢堡選單模式
圖像處理
- 溫暖的手繪插畫場景（功能區塊不使用攝影照片）
- 插畫風格：略帶風格化的人物，插畫內使用暖色調，富有當代感
- 英雄區塊使用大膽攝影或插畫作為全寬背景
- 應用程式下載 CTA 使用 QR Code
- 所有在卡片內的影像使用標準 8px 或 12px 圓角
特色元件
分類膠囊導航
- 水平排列的膠囊形按鈕用於頂級導航（「叫車」、「接單」、「企業」、「Uber Eats」、「關於」）
- 每個膠囊：Chip Gray 背景，黑色文字，999px 圓角
- 啟用狀態：黑色背景加白色文字（反色）
雙操作英雄區
- 分割英雄區：左側文字/CTA，右側地圖/插畫
- 並排兩個輸入框用於出發地/目的地
- 黑色膠囊「查看價格」CTA 按鈕
提前計劃卡片
- 推廣「Uber Reserve」和行程規劃等功能的卡片
- 以插畫為主，溫暖、以人為中心的影像
- 底部黑底白字 CTA 按鈕
5. 版面原則
間距系統
- 基礎單位：8px
- 間距刻度：4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px
- 按鈕內距：10px 12px（緊湊）或 14px 16px（舒適）
- 卡片內距：約 24-32px
- 區塊垂直間距：充裕但高效——主要區塊之間約 64-96px
網格與容器
- 最大容器寬度：約 1136px，置中
- 英雄區：左側文字、右側視覺的分割版面
- 功能區塊：兩欄卡片網格或全寬單欄
- 頁腳：黑色背景上的多欄連結網格
- 全寬區塊延伸至視埠邊緣
留白哲學
- 高效而非寬鬆：Uber 的留白是功能性的——足以分隔，絕不讓人感到空曠。這是交通系統式的間距：緊湊、清晰、目的明確。
- 資訊密集的卡片：卡片以最少的內部間距緊密排布資訊，依靠陰影和圓角定義邊界。
- 區塊喘息空間：主要區塊獲得充裕的垂直間距，但區塊內部元素緊密分組。
圓角刻度
- 尖銳（0px）：互動元素中不使用直角
- 標準（8px）：內容卡片、輸入框、列表框
- 舒適（12px）：精選卡片、較大容器、連結卡片
- 完整膠囊（999px）：所有按鈕、標籤、導航項目、膠囊
- 圓形（50%）：頭像圖片、圖示容器、圓形控件
6. 深度與層次
| 層級 | 處理方式 | 用途 |
|---|---|---|
| 平面（層級 0） | 無陰影，純色背景 | 頁面背景、內嵌內容、文字區塊 |
| 微妙（層級 1） | rgba(0,0,0,0.12) 0px 4px 16px |
標準內容卡片、功能區塊 |
| 中等（層級 2） | rgba(0,0,0,0.16) 0px 4px 16px |
懸浮卡片、疊加元素 |
| 浮動（層級 3） | rgba(0,0,0,0.16) 0px 2px 8px + translateY(2px) |
浮動操作按鈕、地圖控件 |
| 按下（層級 4） | rgba(0,0,0,0.08) inset（999px 擴散） |
按鈕啟用/按下狀態 |
| 焦點圓環 | rgb(255,255,255) 0px 0px 0px 2px inset |
鍵盤焦點指示器 |
陰影哲學：Uber 將陰影純粹用作結構工具，而非裝飾。陰影始終為極低不透明度（0.08-0.16）的黑色，製造分隔內容層所需的最低限度層次感。模糊半徑適中（8-16px）——足以自然，但絕不誇張。沒有彩色陰影、沒有疊加陰影堆疊、沒有環境光暈效果。深度更多透過黑白區塊對比來傳達，而非陰影層次。
7. 應做與禁忌
應做
- 使用純黑（
#000000）和純白（#ffffff）作為主色調——這種強烈對比本身就是 Uber - 所有按鈕、標籤和膠囊形導航元素使用 999px 圓角半徑
- 所有標題保持 UberMove Bold（700），達到廣告牌級衝擊力
- 使用極輕柔的陰影（不透明度 0.12-0.16）營造卡片層次——幾乎不可見
- 保持緊湊、資訊密集的版面風格——Uber 優先考慮效率而非寬鬆感
- 使用溫暖、以人為中心的插畫軟化單色介面
- 內容卡片使用 8px 圓角，精選容器使用 12px 圓角
- 導航和突出 UI 文字使用字重 500 的 UberMoveText
- 雙操作版面中將黑色主按鈕與白色次要按鈕搭配使用
禁忌
- 不要在 UI 主體結構中引入顏色——Uber 的介面嚴格限於黑、白、灰
- 不要在按鈕上使用小於 999px 的圓角——完整膠囊形狀是核心身份標識
- 不要使用濃重陰影或高不透明度的投影——深度效果應極度克制
- 不要使用襯線字體——Uber 的字體系統完全是幾何無襯線
- 不要創建留白過多的寬鬆版面——Uber 的密度是有意為之的
- 不要使用漸層或色彩疊加——每個表面都是平鋪純色
- 不要將 UberMove 用於正文，也不要將 UberMoveText 用於標題——層次是嚴格的
- 不要使用裝飾性邊框——邊框是功能性的（輸入框、分隔線）或不存在
- 不要用不純白或不純黑來軟化黑白對比——這種二元性是刻意為之的
8. 響應式行為
中斷點
| 名稱 | 寬度 | 關鍵變化 |
|---|---|---|
| 小型行動裝置 | 320px | 最小版面，單欄，堆疊輸入框，緊湊字體 |
| 行動裝置 | 600px | 標準行動裝置，堆疊版面，漢堡導航 |
| 小型平板 | 768px | 開始出現兩欄網格，卡片版面擴展 |
| 平板 | 1119px | 完整平板版面，英雄內容並排顯示 |
| 小型桌機 | 1120px | 桌機網格啟動，水平導航標籤 |
| 桌機 | 1136px | 完整桌機版面，最大容器寬度，分割英雄區 |
觸控目標
- 所有膠囊按鈕：最小高度 44px（10-14px 垂直內距 + 行高）
- 導航標籤：寬裕的 14px 16px 內距，方便拇指點擊
- 圓形控件（選單、關閉）：50% 圓角確保大而易點的目標
- 卡片表面在行動裝置上作為全區域觸控目標
折疊策略
- 導航：水平膠囊導航折疊為帶圓形切換按鈕的漢堡選單
- 英雄區：分割版面（文字 + 地圖/視覺）堆疊為單欄——文字在上，視覺在下
- 輸入框：並排的出發地/目的地輸入框垂直堆疊
- 功能卡片：兩欄網格折疊為全寬堆疊卡片
- 標題：52px 展示字級逐級縮小至 36px、32px、24px、20px
- 頁腳：多欄連結網格折疊為手風琴或單欄堆疊
- 分類膠囊：在較小螢幕上水平捲動溢出
圖像行為
- 插畫在容器內等比例縮放
- 英雄區影像保持縱橫比，在較小螢幕上可能裁切
- QR Code 區塊在行動裝置上隱藏（應用程式下載改為直連商店連結）
- 卡片影像在所有尺寸下保持 8-12px 圓角
9. Agent 提示指南
快速顏色參考
- 主要按鈕：「Uber Black（#000000）」
- 頁面背景：「Pure White（#ffffff）」
- 按鈕文字（黑色背景上）：「Pure White（#ffffff）」
- 按鈕文字（白色背景上）：「Uber Black（#000000）」
- 次要文字：「Body Gray（#4b4b4b）」
- 第三層文字：「Muted Gray（#afafaf）」
- 標籤背景：「Chip Gray（#efefef）」
- 懸停狀態：「Hover Gray（#e2e2e2）」
- 卡片陰影：「rgba(0,0,0,0.12) 0px 4px 16px」
- 頁腳背景：「Uber Black（#000000）」
示範元件提示
- 「在 Pure White（#ffffff）上建立英雄區，標題使用 52px UberMove Bold（700），行高 1.23。文字使用 Uber Black（#000000）。添加 Body Gray（#4b4b4b）副標題，16px UberMoveText 字重 400，行高 1.50。放置一個 Uber Black（#000000）膠囊 CTA 按鈕，純白文字，999px 圓角，內距 10px 12px。」
- 「設計分類導航列，包含水平膠囊按鈕。每個膠囊：Chip Gray（#efefef）背景，Uber Black（#000000）文字，14px 16px 內距，999px 圓角。啟用膠囊反色為 Uber Black 背景加純白文字。使用 UberMoveText 14px 字重 500。」
- 「在 Pure White（#ffffff）上建構功能卡片，8px 圓角，陰影 rgba(0,0,0,0.12) 0px 4px 16px。標題使用 UberMove 24px 字重 700，描述使用 Body Gray（#4b4b4b）16px UberMoveText。底部添加黑色膠囊 CTA 按鈕。」
- 「在 Uber Black（#000000）上建立深色頁腳，Pure White（#ffffff）標題文字，UberMove 20px 字重 700。頁腳連結使用 Muted Gray（#afafaf）14px UberMoveText。連結懸停變為純白。多欄網格版面。」
- 「設計浮動操作按鈕，Pure White（#ffffff）背景，999px 圓角，14px 內距，陰影 rgba(0,0,0,0.16) 0px 2px 8px。懸停時背景變為 #f3f3f3。用於返回頂部或地圖控件。」
迭代指南
- 每次專注於一個元件
- 引用嚴格的黑白色板——「使用 Uber Black（#000000）」而非「讓它深一點」
- 始終為按鈕和膠囊指定 999px 圓角——這對 Uber 身份標識不可妥協
- 明確描述字體家族——「標題用 UberMove Bold，標籤用 UberMoveText Medium」
- 陰影使用「極輕柔陰影（rgba(0,0,0,0.12) 0px 4px 16px）」——絕不用濃重投影
- 保持版面緊湊、資訊密集——Uber 追求高效，而非寬鬆
- 插畫應溫暖且以人為本——描述「暖色調風格化人物」而非抽象形狀
- 用白色次要按鈕搭配黑色 CTA，構建平衡的雙操作版面