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/uber/DESIGN-zh.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

299 lines
17 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.
# 受 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
- 内边距：标准舒适间距
- 焦点：无自定义焦点状态提取——依赖标准浏览器焦点圆环
### 导航
- 顶部固定导航，白色背景
- Logo：24x24px 黑色 Uber 字标/图标
- 链接：UberMoveText，14-18px，字重 500，Uber Black 色
- 胶囊形导航标签，Chip Gray（`#efefef`）背景，用于分类导航（"打车"、"接单"、"企业"、"Uber Eats"）
- 菜单切换：50% 圆角的圆形按钮
- 移动端：汉堡菜单模式
### 图像处理
- 温暖的手绘插画场景（功能区块不使用摄影照片）
- 插画风格：略带风格化的人物，插画内使用暖色调，富有当代感
- 英雄区块使用大胆摄影或插画作为全宽背景
- 应用下载 CTA 使用二维码
- 所有在卡片内的图像使用标准 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
- **页脚**：多列链接网格折叠为手风琴或单列堆叠
- **分类胶囊**：在较小屏幕上水平滚动溢出
### 图像行为
- 插画在容器内等比例缩放
- 英雄区图像保持纵横比，在较小屏幕上可能裁剪
- 二维码区块在移动端隐藏（应用下载改为直链商店链接）
- 卡片图像在所有尺寸下保持 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。用于返回顶部或地图控件。"
### 迭代指南
1. 每次专注于**一个**组件
2. 引用严格的黑白色板——"使用 Uber Black（#000000）"而非"让它深一点"
3. 始终为按钮和胶囊指定 999px 圆角——这对 Uber 身份标识不可妥协
4. 明确描述字体家族——"标题用 UberMove Bold，标签用 UberMoveText Medium"
5. 阴影使用"极轻柔阴影（rgba(0,0,0,0.12) 0px 4px 16px）"——绝不用浓重投影
6. 保持布局紧凑、信息密集——Uber 追求高效，而非宽松
7. 插画应温暖且以人为本——描述"暖色调风格化人物"而非抽象形状
8. 用白色次要按钮搭配黑色 CTA，构建平衡的双操作布局
Reference in new issue View Git Blame Copy Permalink