Drafts：文字优先捕获的实用主义清晰设计

“Where Text Starts” — Drafts

大多数文字捕获工具在你还没开始写之前，就强迫你决定内容的归属——哪个笔记应用、哪个文档、哪个消息线程。由独立开发者 Greg Pierce 构建和维护的 Drafts，完全颠覆了这一逻辑：打开应用，开始输入，稍后再决定。这种颠覆就是产品的设计论点，所有视觉和交互决策都由此而来。

核心要点

空白页启动消除一切摩擦 - 每次打开应用都呈现一个全新的空白草稿，没有导航、没有文件选择器，在第一次按键之前无需任何决定
系统字体是刻意的品牌选择 - 通过专门使用平台原生字体，Drafts 确保你书写的文字本身就是排版；应用界面框架保持隐形
单一品牌色标示可交互性 - 品牌蓝（#335EEA）仅少量出现，且专用于可交互元素，建立了可靠的视觉契约：如果是蓝色，就可以点击
复杂性隐藏在简洁背后 - 基础用户看到的是文本编辑器；高级用户发现的是可编程的文本路由器，支持 JavaScript、键盘快捷键和数百个社区动作
轻量标题传达低调自信 - 48px、字重 400 的 H1 在营销页面中并不常见，但效果精致而富有编辑气质，而非喧嚣张扬

为什么 Drafts 很重要

Drafts 回答了一个看似简单的问题：文字在有归宿之前该放在哪里？这款应用充当文本收件箱——每段捕获的文字都带有时间戳且可搜索，但默认不归类。Action 系统是 Drafts 的标志性功能，让你在写完之后将文字路由到任何地方：发送到 Messages、到 Obsidian、到日历事件、到 GitHub issue。先捕获，后路由。

关键成就： - 创造了”文本收件箱”范式，将捕获与组织分离 - 证明了单个开发者可以在 iPhone、iPad、Mac 和 Apple Watch 上维护一款一流应用 - 证明了平台原生设计（系统字体、系统颜色、标准控件）可以成为竞争优势而非局限 - 构建了繁荣的 Action 生态系统，社区无需开发者编写额外代码即可扩展应用功能

核心设计原则

1. 空白页

每次打开应用都呈现一个全新的空白草稿。没有导航界面、没有最近文件列表、没有”你想做什么？”对话框。只有光标和键盘。这是核心用户体验创新——将文字捕获的摩擦降至绝对零点。

其设计意义深远：应用最常见的状态是空的。大多数应用将最好的设计投入到有内容的状态（仪表板、信息流、图库），而 Drafts 则投入到空白页面。空状态不是失败状态，它是产品的主界面。

2. 实用主义色彩纪律

Drafts 的配色方案刻意保持克制。界面的绝大部分是白色背景上的深色文字（#161C2D）。品牌蓝（#335EEA）仅出现在邀请交互的元素上——按钮、链接和 Action 图标。这建立了可靠的视觉契约：颜色意味着”点我”。

文字颜色本身也蕴含微妙的意图。Drafts 没有使用纯黑色，而是采用 rgb(22,28,45)——一种带蓝色底调的近黑色，读起来比 #000000 更柔和、更精致。次要文字颜色（#869AB8 和 #506690）共享这种蓝色底调，形成了统一的色调家族：

┌──────────────────────────────────────────────────┐
│  #FFFFFF  纯白画布                                │
│                                                  │
│  Where Text Starts                               │  ← #161C2D, 48px, 字重 400
│                                                  │
│  先捕获，后组织。                                  │  ← #161C2D, 17px 正文
│  通过 Actions 发送到任何地方。                      │  ← #869AB8, 次要文字
│                                                  │
│  ┌──────────────┐                                │
│  │  获取 Drafts  │                                │  ← #335EEA, 品牌蓝行动号召
│  └──────────────┘                                │
│                                                  │
└──────────────────────────────────────────────────┘

3. Action 系统作为高级层

Drafts 的视觉简洁之下蕴藏着非凡的深度。Action 系统添加了一组图标化按钮网格，每个按钮代表不同的文字路由目标。这些 Action 图标是应用的视觉标志：小巧、精确，并使用 Apple 系统颜色按类别进行色彩编码。

类别	颜色	用途
默认	System Blue	分享和系统操作
绿色	System Green	完成和成功
橙色	System Orange	重要或警示
红色	System Red	破坏性操作
紫色	System Purple	用户自定义操作
青色	System Teal	导出和集成

通过采用 Apple 的语义色彩系统而非发明专有调色板，Action 颜色在每个平台上都感觉原生，同时提供清晰的分类分组。

4. 出于信念的平台原生设计

Drafts 不追求视觉新奇。没有自定义字体、没有以深色主题作为品牌标识、没有动画营销主视觉。系统字体、系统颜色、标准控件。应用在每个平台上都感觉浑然一体，而非穿着跨平台的外衣。

这种承诺延伸到排版。17px 的正文大小与 Apple 在 iOS 中的默认正文尺寸一致。系统字体渲染（Apple 平台上的 SF Pro）提供的光学清晰度是自定义网页字体在小尺寸下通常无法匹配的。结果是：你输入的文字与操作系统渲染的文字在品质上无法区分——因为它们使用相同的字体。

5. 键盘优先的 Interaction

Drafts 专为不想将手从键盘上移开的人设计。Actions 可通过键盘快捷键触发。iOS 上的自定义键盘行用可编程按键扩展了默认键盘。在 Mac 上，完整的键盘快捷键系统意味着高级用户可以捕获、处理和路由文字，无需触碰鼠标。

这种键盘优先的理念并不排斥鼠标或触控用户——每个 Action 都有可点击的等效操作。但键盘路径始终是最快路径，这一优先级塑造了每个交互决策。

可迁移模式

Drafts 的设计语言是实用主义清晰设计的典范。其色彩系统、排版和间距可直接应用于任何以文字为核心的或生产力应用。

CSS 实现揭示了实现 Drafts 美学所需的自定义属性之少：

:root {
  /* Utilitarian palette */
  --color-background: #FFFFFF;
  --color-bg-secondary: #003471;
  --color-text: #161C2D;
  --color-secondary: #869AB8;
  --color-muted: #506690;
  --color-brand: #335EEA;
  --color-surface: #F5F5F7;
  --color-border: #D2D2D7;

  /* Minimal shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(51, 94, 234, 0.25);

  /* System font stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Light-weight editorial headline */
h1 {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.96px;
  line-height: 1.2;
  color: var(--color-text);
}

/* Apple-native body size */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 27.2px;
  color: var(--color-text);
}

注意 H1 的字重为 400——这是对营销页面中占主导地位的 600-800 字重的刻意背离。-0.96px 的字间距（恰好是字号的 -2%）收紧了标题，赋予其编辑品质。这些细小的选择累积成整体低调自信的美学。

对于 SwiftUI，同样的理念产生了一个将内容区域置于首位的文本编辑器：

extension Color {
    static let draftsText = Color(red: 22/255, green: 28/255, blue: 45/255)
    static let draftsBrand = Color(red: 51/255, green: 94/255, blue: 234/255)
    static let draftsSecondary = Color(red: 134/255, green: 154/255, blue: 184/255)
    static let draftsSurface = Color(red: 245/255, green: 245/255, blue: 247/255)
}

struct DraftsEditorView: View {
    @State private var text = ""

    var body: some View {
        TextEditor(text: $text)
            .font(.body)
            .foregroundStyle(Color.draftsText)
            .scrollContentBackground(.hidden)
            .padding()
    }
}

文本编辑器视图默认没有工具栏、没有格式化功能区、没有侧边栏。只有光标和你的思绪。界面框架可折叠或自动隐藏。这不是为了美学而做的极简主义——它是产品原则的直接体现：你正在书写的文字始终是屏幕上最重要的东西。

设计启示

Drafts 教会我们：平台惯例不是约束，而是优势。通过信任系统字体、系统颜色和标准控件，Greg Pierce 将自己从维护自定义设计系统中解放出来，也让用户免于学习新的视觉语言。这款应用在每个 Apple 平台上都让人感到立刻熟悉。

空白页模式可迁移到任何以捕获为导向的工具。如果你的产品的首要目的是快速获取用户脑中的内容，就移除启动到输入之间的一切障碍。没有启动画面、没有最近文件对话框、没有分类选择器。立即呈现输入界面。

避免过度使用颜色。当品牌蓝仅出现在可交互元素上时，用户会建立无意识的关联：蓝色意味着可操作。一旦你将品牌色用于装饰，这种视觉契约就会被打破。Drafts 严格维护这一纪律——如果是蓝色，你可以点击；如果不是蓝色，那就是内容。

避免以功能为先的营销。Drafts 网站以概念（”Where Text Starts”）而非功能列表开篇。理念销售应用；功能是次要的。实际应用的截图承担销售任务，而非动画渲染或 3D 模型。

常见问题

Drafts 的设计有何独特之处？

Drafts 的设计由它所移除的元素定义，而非它所添加的。空白启动页、仅使用系统字体以及单色强调色，共同创造了一个在你需要其强大功能之前几乎隐形的界面。Action 系统在不增加视觉复杂性的前提下增添了深度——强大的功能只需一次点击即可触达，却不会造成任何干扰。

Drafts 如何在简洁与高级用户功能之间取得平衡？

通过在架构层面实现渐进式披露。新用户看到的是一个文本编辑器。中级用户会发现带有预设路由选项的 Action 抽屉。高级用户则可以使用 JavaScript 创建自定义 Action，构建键盘快捷键工作流，并通过社区 Action Directory 扩展应用功能。视觉复杂度随用户的投入程度而递增。

为什么 Drafts 使用系统字体而非自定义字体？

你在 Drafts 中书写的文本就是产品的视觉标识——而非围绕它的应用界面装饰。自定义字体会与用户内容形成竞争，并在跨平台渲染中引入不一致性。通过在 Apple 设备上使用 SF Pro、在其他平台使用系统字体栈，Drafts 确保编辑体验保持原生感受，焦点始终停留在用户的文字上。

什么是”文本收件箱”范式？

传统笔记应用要求你在书写之前选择目标位置（文件夹、笔记本、标签）。Drafts 颠覆了这一模式，将每一段新文本视为收件箱条目——带有时间戳、可搜索，但未分类。书写完成后，你使用 Action 将文本路由到最终目的地。这种将捕获与整理分离的设计，消除了扼杀灵感的阻力。

Drafts 的单色方案如何影响可用性？

通过将品牌蓝色（#335EEA）专门保留给可交互元素，Drafts 建立了一种无意识的视觉契约：如果某物是蓝色的，它就是可点击的。这种一致性降低了认知负荷，消除了用户在颜色被装饰性使用的界面中所经历的猜测。这种克制也使少数带颜色的元素更加醒目，从而提升了可发现性。

参考资料

Drafts — 官方主页与产品概览
Drafts Action Directory — 社区构建的 Action，可将文本路由至数百个目的地
Drafts Documentation — 完整用户指南与功能参考
Drafts Scripting Reference — JavaScript API 自定义 Action 文档
Agile Tortoise — Greg Pierce 的开发工作室
MacStories Review — Federico Viticci 对 Drafts 5 的全面评测