Drafts：文字優先擷取的實用主義清晰設計

「Where Text Starts」— Drafts

大多數文字擷取工具會強迫你在還沒動筆之前，就決定內容的歸屬——哪個筆記應用程式、哪份文件、哪個訊息串。由獨立開發者 Greg Pierce 打造並維護的 Drafts，徹底顛覆了這一切：打開應用程式、開始輸入、稍後再決定。這種顛覆就是產品的設計論點，每一個視覺與互動決策都源自於此。

重點摘要

空白畫布式啟動消除所有阻力 - 每次開啟應用程式都呈現一個全新的空白草稿，沒有導覽、沒有檔案選擇器，在第一次按鍵之前不需要做任何決定
系統字體是刻意的品牌選擇 - 透過專門使用平台原生字體，Drafts 確保你寫的文字本身就是排版；應用程式的介面框架保持隱形
單一品牌色彩標示可操作性 - 品牌藍色（#335EEA）僅少量出現且專門用於互動元素，建立可靠的視覺契約：如果是藍色的，你就可以點擊它
複雜性隱藏在簡潔之後 - 基本使用者看到的是文字編輯器；進階使用者則會發現一個可程式化的文字路由器，支援 JavaScript、鍵盤快捷鍵和數百個社群動作
輕量級標題傳達低調的自信 - 在行銷頁面上使用 400 字重、48px 的 H1 標題並不常見，但效果精緻而富有編輯感，而非喧鬧張揚

為什麼 Drafts 重要

Drafts 回答了一個看似簡單的問題：文字在還沒有目的地之前，應該放在哪裡？這個應用程式扮演著文字收件匣的角色——每一段擷取的文字都會被加上時間戳記並可供搜尋，但預設不做分類。Action 系統是 Drafts 的核心特色，讓你在寫完之後將文字路由到任何地方：傳送到 Messages、到 Obsidian、到日曆事件、到 GitHub 議題。先擷取，再路由。

主要成就： - 創造了「文字收件匣」範式，將擷取與組織分離 - 證明了單一開發者可以在 iPhone、iPad、Mac 和 Apple Watch 上維護一流的應用程式 - 展示了平台原生設計（系統字體、系統色彩、標準控制項）可以成為競爭優勢，而非限制 - 建立了蓬勃發展的 Action 生態系統，讓社群在開發者無需撰寫額外程式碼的情況下擴展應用程式功能

核心設計原則

1. 空白畫布

每次開啟應用程式都呈現一個全新的空白草稿。沒有導覽畫面、沒有最近檔案列表、沒有「你想做什麼？」的對話框。只有游標和鍵盤。這就是核心的使用者體驗創新——將文字擷取的摩擦力降至絕對零。

設計上的含義非常重大：應用程式最常見的狀態是空的。大多數應用程式會在內容充實的狀態（儀表板、動態消息、圖庫）上投入最好的設計心力，而 Drafts 則投入在空白頁面上。空白狀態不是失敗狀態；它是產品的主要介面。

2. 實用主義的色彩紀律

Drafts 的色彩調色盤刻意保持稀疏。介面的絕大部分是白色背景上的深色文字（#161C2D）。品牌藍色（#335EEA）只出現在邀請互動的元素上——按鈕、連結和動作圖示。這建立了可靠的視覺契約：有顏色代表「點擊我」。

文字顏色本身也蘊含著微妙的意圖。Drafts 使用的不是純黑色，而是 rgb(22,28,45)——一種帶有藍色底調的近黑色，閱讀起來比 #000000 更柔和、更精緻。次要文字顏色（#869AB8 和 #506690）也共享這種藍色底調，形成一個協調的色調家族：

┌──────────────────────────────────────────────────┐
│  #FFFFFF  純白畫布                                │
│                                                  │
│  Where Text Starts                               │  ← #161C2D, 48px, 字重 400
│                                                  │
│  先擷取，稍後再組織。                              │  ← #161C2D, 17px 內文
│  透過 Actions 傳送到任何地方。                      │  ← #869AB8, 次要文字
│                                                  │
│  ┌──────────────┐                                │
│  │  取得 Drafts │                                │  ← #335EEA, 品牌藍色 CTA
│  └──────────────┘                                │
│                                                  │
└──────────────────────────────────────────────────┘

3. Action 系統作為進階功能層

Drafts 的視覺簡潔隱藏著驚人的深度。Action 系統新增了一組圖示化按鈕網格，每個按鈕代表不同的文字路由目的地。這些動作圖示是應用程式的視覺標誌：小巧、精確，並使用 Apple 的系統色彩按類別進行色彩編碼。

類別	色彩	用途
預設	系統藍色	分享與系統動作
綠色	系統綠色	完成與成功
橘色	系統橘色	重要或警示
紅色	系統紅色	破壞性動作
紫色	系統紫色	使用者自訂動作
青色	系統青色	匯出與整合

透過採用 Apple 的語意化色彩系統而非自創專屬調色盤，動作色彩在每個平台上都感覺原生，同時提供清晰的分類歸組。

4. 出於信念的平台原生設計

Drafts 不追求視覺新奇。沒有自訂字體、沒有以深色主題作為品牌識別、沒有動畫行銷主視覺。系統字體、系統色彩、標準控制項。應用程式在每個平台上都感覺渾然天成，而非穿著跨平台的偽裝。

這種堅持延伸到排版。17px 的內文大小符合 Apple 在 iOS 中的預設內文尺寸。系統字體渲染（Apple 平台上的 SF Pro）提供了自訂網頁字體在小尺寸下往往無法匹配的視覺清晰度。結果是一個應用程式，你輸入的文字與作業系統渲染的文字在品質上無法區分——因為它們使用的是同一套字體。

5. 鍵盤優先的Inter互動

Drafts 是為不想將手從鍵盤上移開的人設計的。Actions 可透過鍵盤快捷鍵觸發。iOS 上的自訂鍵盤列以可程式化的按鍵擴展了預設鍵盤。在 Mac 上，完整的鍵盤快捷鍵系統意味著進階使用者可以在完全不碰滑鼠的情況下擷取、處理和路由文字。

這種鍵盤優先的理念並不排斥滑鼠或觸控使用者——每個動作都有可點擊的對應操作。但鍵盤路徑永遠是最快的路徑，這個優先順序塑造了每一個互動決策。

可轉移的模式

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 Directory 擴展應用程式。視覺複雜度會隨著使用者的投入程度而調整。

為什麼 Drafts 使用系統字體而非自訂字體？

你在 Drafts 中撰寫的文字才是產品的視覺識別——而非圍繞它的應用程式外框。自訂字體會與使用者的內容競爭，並在跨平台時引入渲染不一致的問題。透過在 Apple 裝置上使用 SF Pro，以及在其他平台使用系統字體堆疊，Drafts 確保編輯體驗感覺原生，焦點始終保持在使用者的文字上。

什麼是「文字收件匣」範式？

傳統的筆記應用程式要求你在撰寫之前先選擇目的地（資料夾、筆記本、標籤）。Drafts 反轉了這個流程，將每一段新文字視為收件匣項目——附有時間戳記、可搜尋，但未分類。撰寫完畢後，你使用 Actions 將文字路由到最終目的地。這種將擷取與組織分離的方式，消除了扼殺靈感的阻力。

Drafts 的單一色彩方法如何影響可用性？

透過將品牌藍色（#335EEA）專門保留給互動元素，Drafts 建立了一種無意識的視覺契約：如果某個東西是藍色的，它就是可點擊的。這種一致性降低了認知負擔，消除了使用者在色彩被裝飾性使用的介面中所經歷的猜測。這種克制也使少數帶有色彩的元素更加引人注目，提升了可發現性。

參考資料

Drafts — 官方首頁與產品概覽
Drafts Action Directory — 社群建立的 Actions，可將文字路由至數百個目的地
Drafts Documentation — 完整使用者指南與功能參考
Drafts Scripting Reference — JavaScript API 自訂動作文件
Agile Tortoise — Greg Pierce 的開發工作室
MacStories Review — Federico Viticci 對 Drafts 5 的全面評測