Pitch：紫色舞台上的大胆几何自信

6 分钟阅读 • 222 字
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 风格的自信紫色调色板 */
  --color-background: rgb(255, 255, 255);
  --color-text-primary: rgb(43, 42, 53);
  --color-brand-purple: #7B2FF2;
  --color-white: rgb(255, 255, 255);

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

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

/* 展示标题 — 密集、厚重、紧凑 */
.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-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 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: var(--color-text-primary);
}

/* 主视觉渐变舞台 */
.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 按钮 — 6px 圆角，专业创意风格 */
.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 将实时协作光标和共同编辑视为其视觉识别的一部分，而非仅仅是功能清单上的一项。看到其他人的光标让工具充满活力，强化了团队协作的理念。启示在于：协作功能是塑造产品感受的设计元素，而不仅仅是决定产品功能的特性。

参考资料