Pitch：紫色舞台上的大膽幾何自信

6 分鐘閱讀 • 221 字
Pitch：紫色舞台上的大膽幾何自信 screenshot

「你用來製作簡報的工具，本身就應該是房間裡最好的簡報。」——Christian Reber，創辦人

Pitch 的存在，是因為簡報軟體的美學進化在 1990 年代就停滯了。由 Christian Reber 和 Wunderlist 背後的團隊在柏林創立，Pitch 重新想像了當設計師為設計師打造簡報工具時會發生什麼。Google Slides 給人實用主義的感覺，PowerPoint 給人企業感，而 Pitch 一開場就是滿版的紫色漸層主視覺，點綴著漂浮的 3D 玻璃造型——立刻表明這是一個對簡報該有的樣子有著鮮明主張的產品。

核心要點

  1. 紫色作為舞台，而非點綴 - 大多數品牌將品牌色用作按鈕色調。Pitch 將紫色作為整個主視覺區域的環境，創造出一個戲劇性的開場，同時也是產品展示。
  2. 超粗體的堅定傳達權威感 - 800 字重的標題（比幾乎所有 SaaS 競爭對手都更粗）傳達出對產品定位的零猶豫。
  3. 雙速排版創造節奏 - 緊密厚重的標題（1.0 行高）後接輕盈的內文（2.0 行高），在「抓住注意力」和「讓人閱讀」之間產生戲劇性的轉換。
  4. 定制字體是競爭護城河 - Eina01 的幾何柔和感無法用系統字體複製，讓每個使用 Inter 的競爭對手相比之下都顯得千篇一律。
  5. 模板優先的引導解決空白畫布問題 - 模板庫是入口大門，在使用者創建任何內容之前就教會他們什麼是「好的」。

為什麼 Pitch 重要

Pitch 證明了生產力軟體可以擁有與其產出成果同等水準的視覺工藝。在一個被外觀與產出完全不同的工具主導的領域中，Pitch 言行合一：它的行銷網站本身就是一場簡報，而產品的模板庫設定了一個品質標準，提升每位使用者的產出水準。

主要成就： - 由 Wunderlist 團隊打造（被 Microsoft 收購），將消費級設計感帶入 B2B 軟體 - 開創了即時多人協作，將可見游標作為設計元素而非僅僅是功能 - 引入了 AI 操作，用於生成符合品牌風格的文字和視覺，推動使用者朝更高品質的產出邁進，而非增加複雜度

核心設計原則

1. 紫色舞台

主視覺漸層不是一個有顏色的區塊——它是一個簡報舞台。鮮豔的紫色漸層填滿整個視窗，佈滿半透明的 3D 玻璃物件，捕捉光線並展示 Pitch 對材質、深度和構圖的理解。產品透過本身就是一場簡報來推銷自己。

在主視覺下方，各區段過渡到乾淨的白色背景搭配溫暖的深灰色文字（rgb(43,42,53)）——一種帶有微妙紫色底調的顏色，與品牌識別和諧呼應，而非與之產生刺眼的對比。

┌─────────────────────────────────────────┐
│  ░░░░ 鮮豔紫色漸層 ░░░░░░░░░░░░░░░░░  │
│  ░░░░ 3D 玻璃造型漂浮 ░░░░░░░░░░░░░░  │
│  ░░░░░ 白色粗體標題 ░░░░░░░░░░░░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  乾淨白色區段                            │
│  溫暖深灰色文字 (43,42,53)               │
│  寬裕的 2.0 行高內文                      │
│                                         │
└─────────────────────────────────────────┘

2. 使用 Eina01 的紀念碑式排版

Pitch 委託設計了 Eina01，一款幾何無襯線字體，擁有柔軟圓潤的筆畫末端，賦予每個標題獨特的溫暖感。在 800 字重（超粗體）下，標題帶有熟知自己素材的主題演講者般的果斷感。

字級系統在兩種截然不同的模式下運作。標題緊密且有衝擊力：80px 展示文字搭配 1.0 行高和 -1.6px 字距，其中上伸和下伸筆畫在行間幾乎相觸，創造出圖形元素而非僅僅是文字。內文則截然相反——18px 搭配 2.0 行高，極為寬裕的間距賦予散文一種輕鬆的編輯風格，如同閱讀一本排版精美的雜誌。

負字距與尺寸成比例縮放：在 80px（-1.6px）和 42px（-0.84px）下均為 -2%，在每個標題尺寸下保持一致的視覺密度。

3. 克制的Inter動設計

每個互動元素都處於銳利的企業稜角與活潑的消費者圓角之間的空間。6px 的按鈕圓角傳達「專業創意工具」——足夠刻意讓人注意到，又足夠克制讓人認真對待。按鈕水平內距 24px 提供舒適的點擊目標而不顯臃腫。

60px 的導航列刻意做得精簡。對於簡報工具來說，內容應該始終比介面框架感覺更大。公告列在導航上方增加了 72px 的推廣空間，而不擁擠版面。

可遷移的設計模式

Pitch 的設計系統提供了幾種可直接遷移到其他專案的模式。溫暖深灰色文字色是最直接可用的：rgb(43,42,53) 避免了純黑的刺眼感同時保持可讀性，其微妙的紫色底調與任何偏紫色的品牌調色盤都能產生視覺凝聚力。

雙速排版系統適用於任何需要在衝擊力與可讀性之間取得平衡的情境：

:root {
  /* Pitch-inspired confident purple palette */
  --color-background: rgb(255, 255, 255);
  --color-text-primary: rgb(43, 42, 53);
  --color-brand-purple: #7B2FF2;
  --color-white: rgb(255, 255, 255);

  /* Typography */
  --font-display: "Eina01", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --nav-height: 3.75rem;
  --button-radius: 6px;
  --button-padding: 0 24px;
}

/* Display headline — dense, heavy, tight */
.display {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1.6px;
  color: var(--color-text-primary);
}

/* Section headline */
.section-heading {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.84px;
  color: var(--color-text-primary);
}

/* Body — generous breathing room */
.body {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: var(--color-text-primary);
}

/* Hero gradient stage */
.hero {
  background: linear-gradient(135deg, #7B2FF2 0%, #4A0E8F 100%);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA button — 6px radius, professional creative */
.button-primary {
  border-radius: 6px;
  padding: 0 24px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  background: var(--color-brand-purple);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

對於 iOS 應用程式，相同原則透過系統字重映射和 SwiftUI 的行距修飾符來實現：

extension Color {
    static let pitchBackground = Color.white
    static let pitchText = Color(red: 43/255, green: 42/255, blue: 53/255)
    static let pitchPurple = Color(red: 123/255, green: 47/255, blue: 242/255)
}

extension Font {
    static let pitchDisplay = Font.system(size: 80, weight: .heavy)
        .leading(.tight)
    static let pitchHeading = Font.system(size: 42, weight: .heavy)
    static let pitchBody = Font.system(size: 18, weight: .regular)
        .leading(.loose)
}

struct PitchButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color.pitchPurple)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 6))
            .opacity(configuration.isPressed ? 0.85 : 1.0)
    }
}

設計啟示

在藍色海洋中選擇紫色是值得的。 在 Slack、Notion、Linear 和 Figma 都以藍色為錨點的環境中，Pitch 的紫色立即將其與群體區隔開來。紫色象徵創意和高端定位——正是簡報工具所需要的聯想。

800 字重是一個品牌聲音的決定。 大多數 SaaS 網站的標題使用 600-700 字重。Pitch 的超粗體選擇不是為了可讀性——而是為了個性。這個品牌不是建議你試試看；而是告訴你這就是那個工具。只有當你的產品定位支撐得起那種程度的果斷時，才使用重字重。

展示文字的 1.0 行高創造圖形元素。 當上伸和下伸筆畫幾乎相觸時，標題不再作為文字被閱讀，而開始作為視覺建築發揮作用。這只適用於大尺寸（60px 以上），此時個別字母形態清晰可辨。

避免在有色彩品牌中使用純黑文字。 Pitch 的溫暖深灰色（rgb(43,42,53)）維持了頁面的凝聚力，因為其底調與紫色調色盤相匹配。純黑色會造成斷裂感，削弱視覺系統。

避免在自信驅動的品牌中使用纖細字重。 Pitch 使用的最輕標題字重是 800。400 字重的內文是唯一的例外。混入 300 或 400 字重的標題會削弱品牌努力建立的果斷定位。

常見問題

Pitch 的設計與其他簡報工具有何不同？

Pitch 將其行銷網站作為自身產品哲學的展示。滿版紫色漸層主視覺搭配 3D 玻璃造型、800 字重的 Eina01 標題，以及雙速排版（緊密標題、輕盈內文），創造出與 Google Slides 的實用主義感或 PowerPoint 的企業厚重感截然不同的美學。

Pitch 如何以不同於典型 SaaS 產品的方式使用色彩？

大多數 SaaS 品牌將主色用作點綴——白色背景上的彩色按鈕。Pitch 反轉了這一做法，將鮮豔紫色作為整個主視覺區域的環境，創造出沉浸式的舞台而非裝飾性的點綴。紫色毫不妥協地飽和，從不被灰色或白色稀釋。

為什麼 Pitch 使用如此粗重的字重？

800 字重（超粗體）的標題是一個刻意的品牌聲音決定。在這個字重下，排版傳達的是信念和專業，而非僅僅是標示內容。這與 Pitch 作為一個對簡報該有的樣子有著強烈主張的工具的定位相匹配，由對這些主張充滿信心的設計師所創造。

設計師能從 Pitch 的多人協作方式中學到什麼？

Pitch 將即時協作游標和共同編輯視為視覺識別的一部分，而非僅僅是功能清單上的勾選項。看到其他人的游標讓工具感覺充滿生命力，並強化了團隊共創的理念。其中的啟示是：協作功能是塑造產品感受的設計元素，而不僅僅是產品做什麼。

參考資料