233 lines
12 KiB
Markdown
233 lines
12 KiB
Markdown
|
# 受 Pinterest 启发的设计系统
|
|||
|
|
|
|||
|
|
> Category: 媒体与消费
|
|||
|
|
> 视觉发现。红色点缀，瀑布流网格，图片优先。
|
|||
|
|
|
|||
|
|
## 1. 视觉主题与氛围
|
|||
|
|
|
|||
|
|
Pinterest 的网站是一块温暖、充满灵感的画布，将视觉发现体验打造得如同生活方式杂志。设计基于柔和、略带暖意的白色背景，以 Pinterest 红（`#e60023`）作为唯一醒目的品牌点缀色。与大多数科技平台的冷蓝色调不同，Pinterest 的中性色系带有明显的暖色调——灰色偏向橄榄/沙色（`#91918c`、`#62625b`、`#e5e5e0`），而非冷钢色，营造出温馨、手工感十足的氛围，让人忍不住想要浏览下去。
|
|||
|
|
|
|||
|
|
字体使用 Pin Sans——一款定制专属字体，拥有宽泛的备用字体栈（包含日文字体），体现了 Pinterest 的全球影响力。在展示级别（70px，字重 600），Pin Sans 打造出宽大、亲切的标题。在较小尺寸下，系统保持紧凑：按钮 12px，说明文字 12–14px。CSS 变量命名体系（`--comp-*`、`--sema-*`、`--base-*`）揭示了一套精密的三层设计 token 架构：组件层、语义层和基础层 token。
|
|||
|
|
|
|||
|
|
Pinterest 的特色在于其慷慨的圆角系统（12px–40px，加上圆形的 50%）以及带暖色调的按钮背景。次要按钮（`#e5e5e0`）呈现出明显的暖沙色调，而非冷灰色。主要红色按钮使用 16px 圆角——圆润但不是药丸形。结合暖色徽章背景（`hsla(60,20%,98%,.5)`——微妙的暖黄色调）以及以摄影为主导的版面，最终呈现出一种手工感、个性化的设计，而非企业化、千篇一律的风格。
|
|||
|
|
|
|||
|
|
**关键特征：**
|
|||
|
|
- 带橄榄/沙色中性色的暖白色画布——温馨，而非冷峻
|
|||
|
|
- Pinterest 红（`#e60023`）作为唯一醒目的点缀色——从不低调，始终自信
|
|||
|
|
- Pin Sans 定制字体，配备全球备用字体栈（含 CJK）
|
|||
|
|
- 三层 token 架构：`--comp-*` / `--sema-*` / `--base-*`
|
|||
|
|
- 暖色次要表面：沙灰色（`#e5e5e0`）、暖色徽章（`hsla(60,20%,98%,.5)`）
|
|||
|
|
- 慷慨的圆角：标准 16px，大容器最高 40px
|
|||
|
|
- 摄影内容优先——图钉/图像是主要视觉元素
|
|||
|
|
- 深近紫色文字（`#211922`）——温暖，带一丝梅红色
|
|||
|
|
|
|||
|
|
## 2. 色彩调色板与用途
|
|||
|
|
|
|||
|
|
### 主品牌色
|
|||
|
|
- **Pinterest 红**（`#e60023`）：主要 CTA、品牌点缀——醒目、自信的红色
|
|||
|
|
- **绿色 700**（`#103c25`）：`--base-color-green-700`，成功/自然点缀
|
|||
|
|
- **绿色 700 悬停**（`#0b2819`）：`--base-color-hover-green-700`，按下的绿色
|
|||
|
|
|
|||
|
|
### 文字色
|
|||
|
|
- **梅黑色**（`#211922`）：主要文字——带梅红色调的暖近黑色
|
|||
|
|
- **纯黑**（`#000000`）：次要文字、按钮文字
|
|||
|
|
- **橄榄灰**（`#62625b`）：次要描述，低调文字
|
|||
|
|
- **暖银色**（`#91918c`）：`--comp-button-color-text-transparent-disabled`，禁用文字，输入框边框
|
|||
|
|
- **白色**（`#ffffff`）：深色/彩色表面上的文字
|
|||
|
|
|
|||
|
|
### 交互色
|
|||
|
|
- **焦点蓝**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`，焦点环
|
|||
|
|
- **性能紫**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`，性能功能
|
|||
|
|
- **推荐紫**（`#7e238b`）：`--sema-color-hover-text-recommendation`，AI 推荐
|
|||
|
|
- **链接蓝**（`#2b48d4`）：链接文字颜色
|
|||
|
|
- **Facebook 蓝**（`#0866ff`）：`--facebook-background-color`，社交登录
|
|||
|
|
- **按下蓝**（`#617bff`）：`--base-color-pressed-blue-200`，按下状态
|
|||
|
|
|
|||
|
|
### 表面与边框
|
|||
|
|
- **沙灰色**（`#e5e5e0`）：次要按钮背景——温暖，手工感
|
|||
|
|
- **暖亮色**（`#e0e0d9`）：圆形按钮背景，徽章
|
|||
|
|
- **暖色调**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`，微妙的暖色徽章背景
|
|||
|
|
- **雾色**（`#f6f6f3`）：浅色表面（50% 不透明度）
|
|||
|
|
- **禁用边框**（`#c8c8c1`）：`--sema-color-border-disabled`，禁用边框
|
|||
|
|
- **悬停灰**（`#bcbcb3`）：`--base-color-hover-grayscale-150`，悬停边框
|
|||
|
|
- **深色表面**（`#33332e`）：深色区域背景
|
|||
|
|
|
|||
|
|
### 语义色
|
|||
|
|
- **错误红**（`#9e0a0a`）：复选框/表单错误状态
|
|||
|
|
|
|||
|
|
## 3. 字体规则
|
|||
|
|
|
|||
|
|
### 字体家族
|
|||
|
|
- **主字体**：`Pin Sans`，备用字体：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
|
|||
|
|
|
|||
|
|
### 层次结构
|
|||
|
|
|
|||
|
|
| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
|
|||
|
|
|------|------|------|--------|-------------|----------------|-------|
|
|||
|
|
| 展示主标题 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大视觉冲击力 |
|
|||
|
|
| 区块标题 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 负字间距 |
|
|||
|
|
| 正文 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 标准阅读 |
|
|||
|
|
| 加粗说明 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 强调元数据 |
|
|||
|
|
| 说明 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小字，标签 |
|
|||
|
|
| 按钮 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 按钮标签 |
|
|||
|
|
|
|||
|
|
### 原则
|
|||
|
|
- **紧凑字号体系**：字号范围 12px–70px，跨度显著——大多数功能性文字为 12–16px，营造密集的应用感信息层次。
|
|||
|
|
- **暖色字重分布**：标题 600–700，正文 400–500。无超轻字重——文字始终感觉有分量。
|
|||
|
|
- **标题负字间距**：28px 标题的 -1.2px 字间距创造出温馨、亲近的区块标题感。
|
|||
|
|
- **单一字体家族**：Pin Sans 承担所有排版——未检测到次要展示或等宽字体。
|
|||
|
|
|
|||
|
|
## 4. 组件样式
|
|||
|
|
|
|||
|
|
### 按钮
|
|||
|
|
|
|||
|
|
**主要红色按钮**
|
|||
|
|
- 背景：`#e60023`（Pinterest 红）
|
|||
|
|
- 文字：`#000000`（黑色——在红色上的对比度是个不寻常的选择）
|
|||
|
|
- 内边距：6px 14px
|
|||
|
|
- 圆角：16px（圆润但非药丸形）
|
|||
|
|
- 边框：`2px solid rgba(255, 255, 255, 0)`（透明）
|
|||
|
|
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓
|
|||
|
|
|
|||
|
|
**次要沙色按钮**
|
|||
|
|
- 背景：`#e5e5e0`（暖沙灰色）
|
|||
|
|
- 文字：`#000000`
|
|||
|
|
- 内边距：6px 14px
|
|||
|
|
- 圆角：16px
|
|||
|
|
- 焦点：相同的语义边框系统
|
|||
|
|
|
|||
|
|
**圆形操作按钮**
|
|||
|
|
- 背景：`#e0e0d9`（暖亮色）
|
|||
|
|
- 文字：`#211922`（梅黑色）
|
|||
|
|
- 圆角：50%（圆形）
|
|||
|
|
- 用途：图钉操作、导航控件
|
|||
|
|
|
|||
|
|
**幽灵/透明按钮**
|
|||
|
|
- 背景：透明
|
|||
|
|
- 文字：`#000000`
|
|||
|
|
- 无边框
|
|||
|
|
- 用途：第三级操作
|
|||
|
|
|
|||
|
|
### 卡片与容器
|
|||
|
|
- 以摄影为主的图钉卡片，慷慨的圆角（12px–20px）
|
|||
|
|
- 大多数卡片无传统盒阴影
|
|||
|
|
- 白色或暖雾色背景
|
|||
|
|
- 部分图片容器有 8px 白色厚边框
|
|||
|
|
|
|||
|
|
### 输入框
|
|||
|
|
- 邮箱输入框：白色背景，`1px solid #91918c` 边框，16px 圆角，11px 15px 内边距
|
|||
|
|
- 焦点：通过 CSS 变量实现的语义边框 + 轮廓系统
|
|||
|
|
|
|||
|
|
### 导航
|
|||
|
|
- 白色或暖色背景上的简洁顶部栏
|
|||
|
|
- Pinterest logo + 搜索栏居中
|
|||
|
|
- 导航链接 Pin Sans 16px
|
|||
|
|
- 活跃状态使用 Pinterest 红色点缀
|
|||
|
|
|
|||
|
|
### 图片处理
|
|||
|
|
- 图钉式瀑布流网格（Pinterest 标志性版面）
|
|||
|
|
- 图片圆角：12px–20px
|
|||
|
|
- 摄影作为主要内容——每个图钉都是一张图片
|
|||
|
|
- 精选图片容器有 8px 白色厚边框
|
|||
|
|
|
|||
|
|
## 5. 版面原则
|
|||
|
|
|
|||
|
|
### 间距系统
|
|||
|
|
- 基础单位：8px
|
|||
|
|
- 刻度：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
|
|||
|
|
- 大跳跃：32px → 80px → 100px 用于区块间距
|
|||
|
|
|
|||
|
|
### 网格与容器
|
|||
|
|
- 图钉内容使用瀑布流网格（标志性版面）
|
|||
|
|
- 居中内容区块，充裕的最大宽度
|
|||
|
|
- 全宽深色页脚
|
|||
|
|
- 搜索栏作为主要导航元素
|
|||
|
|
|
|||
|
|
### 留白哲学
|
|||
|
|
- **灵感密度**：瀑布流网格将图钉紧密排列——内容密度本身就是价值主张。留白存在于区块之间，而非网格内部。
|
|||
|
|
- **上方呼吸，下方密集**：主角/特色区块获得充裕的内边距；图钉网格紧凑而沉浸。
|
|||
|
|
|
|||
|
|
### 圆角体系
|
|||
|
|
- 标准（12px）：小卡片，链接
|
|||
|
|
- 按钮（16px）：按钮、输入框、中等卡片
|
|||
|
|
- 舒适（20px）：特色卡片
|
|||
|
|
- 大（28px）：大容器
|
|||
|
|
- 区块（32px）：标签元素，大面板
|
|||
|
|
- 主角（40px）：主角容器，大型特色块
|
|||
|
|
- 圆形（50%）：操作按钮，标签指示器
|
|||
|
|
|
|||
|
|
## 6. 层次与阴影
|
|||
|
|
|
|||
|
|
| 层级 | 处理方式 | 用途 |
|
|||
|
|
|-------|-----------|-----|
|
|||
|
|
| 扁平（0 级）| 无阴影 | 默认——图钉依靠内容而非阴影 |
|
|||
|
|
| 微妙（1 级）| 最小阴影（来自 token） | 悬浮叠层，下拉菜单 |
|
|||
|
|
| 焦点（无障碍）| `--sema-color-border-focus-outer-default` 环 | 焦点状态 |
|
|||
|
|
|
|||
|
|
**阴影哲学**：Pinterest 使用极少的阴影。瀑布流网格依靠内容（摄影）创造视觉趣味，而非依靠提升效果。深度来自表面颜色的温暖感和容器的慷慨圆角。
|
|||
|
|
|
|||
|
|
## 7. 应做与不应做
|
|||
|
|
|
|||
|
|
### 应做
|
|||
|
|
- 使用暖中性色（`#e5e5e0`、`#e0e0d9`、`#91918c`）——橄榄/沙色调是品牌标识
|
|||
|
|
- 仅将 Pinterest 红（`#e60023`）用于主要 CTA——它醒目且唯一
|
|||
|
|
- 专一使用 Pin Sans——一种字体统揽一切
|
|||
|
|
- 应用慷慨的圆角：按钮/输入框 16px，卡片 20px+
|
|||
|
|
- 保持瀑布流网格的密集感——内容密度就是价值
|
|||
|
|
- 使用暖色徽章背景（`hsla(60,20%,98%,.5)`）实现微妙的暖色调
|
|||
|
|
- 主要文字使用 `#211922`（梅黑色）——比纯黑更温暖
|
|||
|
|
|
|||
|
|
### 不应做
|
|||
|
|
- 不要使用冷灰色中性色——始终保持暖色/橄榄色调
|
|||
|
|
- 不要使用纯黑（`#000000`）作为主要文字——使用梅黑色（`#211922`）
|
|||
|
|
- 不要使用药丸形按钮——16px 圆角是圆润的，但不是药丸形
|
|||
|
|
- 不要添加厚重阴影——Pinterest 设计上是扁平的，深度来自内容
|
|||
|
|
- 不要在卡片上使用小圆角（<12px）——慷慨的圆角是核心
|
|||
|
|
- 不要引入额外的品牌色——红色+暖中性色就是完整的色彩体系
|
|||
|
|
- 不要使用细字重——Pin Sans 最低 400
|
|||
|
|
|
|||
|
|
## 8. 响应式行为
|
|||
|
|
|
|||
|
|
### 断点
|
|||
|
|
| 名称 | 宽度 | 主要变化 |
|
|||
|
|
|------|-------|-------------|
|
|||
|
|
| 移动端 | <576px | 单列，紧凑布局 |
|
|||
|
|
| 大移动端 | 576–768px | 2 列图钉网格 |
|
|||
|
|
| 平板 | 768–890px | 扩展网格 |
|
|||
|
|
| 小桌面 | 890–1312px | 标准瀑布流网格 |
|
|||
|
|
| 桌面 | 1312–1440px | 完整布局 |
|
|||
|
|
| 大桌面 | 1440–1680px | 扩展网格列 |
|
|||
|
|
| 超宽屏 | >1680px | 最大网格密度 |
|
|||
|
|
|
|||
|
|
### 折叠策略
|
|||
|
|
- 图钉网格：5+ 列 → 3 → 2 → 1
|
|||
|
|
- 导航：搜索栏 + 图标 → 简化移动端导航
|
|||
|
|
- 特色区块：并排 → 堆叠
|
|||
|
|
- 主角：70px → 按比例缩小
|
|||
|
|
- 页脚：深色多列 → 堆叠
|
|||
|
|
|
|||
|
|
## 9. 智能代理提示指南
|
|||
|
|
|
|||
|
|
### 快速颜色参考
|
|||
|
|
- 品牌色：Pinterest 红（`#e60023`）
|
|||
|
|
- 背景色：白色（`#ffffff`）
|
|||
|
|
- 文字色：梅黑色（`#211922`）
|
|||
|
|
- 次要文字：橄榄灰（`#62625b`）
|
|||
|
|
- 按钮表面：沙灰色（`#e5e5e0`）
|
|||
|
|
- 边框色：暖银色（`#91918c`）
|
|||
|
|
- 焦点色：焦点蓝（`#435ee5`）
|
|||
|
|
|
|||
|
|
### 示例组件提示
|
|||
|
|
- "创建一个主角区块：白色背景。标题使用 70px Pin Sans 字重 600，梅黑色（#211922）。红色 CTA 按钮（#e60023，16px 圆角，6px 14px 内边距）。次要沙色按钮（#e5e5e0，16px 圆角）。"
|
|||
|
|
- "设计一个图钉卡片：白色背景，16px 圆角，无阴影。摄影填充顶部，下方 16px Pin Sans 字重 400 描述文字，颜色 #62625b。"
|
|||
|
|
- "制作一个圆形操作按钮：#e0e0d9 背景，50% 圆角，#211922 图标。"
|
|||
|
|
- "创建一个输入框：白色背景，1px solid #91918c，16px 圆角，11px 15px 内边距。焦点：通过语义 token 实现蓝色轮廓。"
|
|||
|
|
- "设计深色页脚：#33332e 背景。白色 Pinterest 手写体 logo。12px Pin Sans 链接，颜色 #91918c。"
|
|||
|
|
|
|||
|
|
### 迭代指南
|
|||
|
|
1. 随处使用暖中性色——橄榄/沙灰色，绝不用冷钢色
|
|||
|
|
2. Pinterest 红仅用于 CTA——醒目且唯一
|
|||
|
|
3. 按钮/输入框 16px 圆角，卡片 20px+——慷慨但非药丸形
|
|||
|
|
4. Pin Sans 是唯一字体——UI 紧凑 12px，展示 70px
|
|||
|
|
5. 摄影承载设计——UI 保持温暖而简约
|
|||
|
|
6. 文字使用梅黑色（#211922）——比纯黑更温暖
|