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）——比純黑更溫暖
|