Superhuman

「我們不只是打造一個電子郵件客戶端。我們打造的是一種體驗，速度本身就是產品。」

設計哲學

Superhuman 體現了一種單一的執念：速度即核心功能。每一個設計決策，從 50ms 的回應時間到鍵盤優先的導航方式，都服務於這個獨特的願景。最終成果是一個感覺像是思維延伸的電子郵件客戶端，而非一個需要操作的工具。

創辦人將遊戲設計原則應用於生產力軟體：故事（你是征服電子郵件的英雄）、美學（優美、極簡）、機制（鍵盤快捷鍵作為遊戲玩法）、以及技術（不懈的效能優化）。

核心要點

真正的目標是 50ms，而非 100ms - Superhuman 對外宣稱 100ms 是門檻，但內部目標是 50-60ms；「快速」與「如同思維般流暢」之間的差異是可感知的
命令面板訓練使用者進階 - 每次有人使用 Cmd+K 時顯示鍵盤快捷鍵；幾次使用後，肌肉記憶接管，他們就不再需要面板
Vim 導航模式經過驗證 - J/K 用於垂直移動，H/L 用於水平移動，創造出進階使用者從數十年編輯器使用經驗中已熟知的空間心智模型
新手引導是練習，而非說明 - Superhuman 的 30 分鐘一對一課程透過合成郵件訓練肌肉記憶；使用者不是觀看演示，而是養成習慣
樂觀 UI 是速度的必要條件 - 操作在伺服器確認前就在視覺上完成；撤銷是安全網，而非載入指示器

模式庫

100ms 法則（實際上是 50-60ms）

Superhuman 著名的「100ms 法則」在內部實際上更為嚴格。研究顯示，感知的回應速度在超過 100ms 後會顯著下降，因此 Superhuman 將所有互動的目標設定為 50-60ms。

// Performance budget constants
const PERFORMANCE_TARGETS = {
  // Internal targets (what Superhuman actually aims for)
  keyRepeatRate: 65,        // ms - faster than macOS default (100ms)
  actionResponse: 50,       // ms - archive, send, move
  searchResults: 100,       // ms - first results appear
  composeOpen: 60,          // ms - new compose window

  // User perception thresholds (from research)
  instantaneous: 100,       // Feels instant
  responsive: 300,          // Still feels responsive
  noticeable: 1000,         // User notices delay
} as const;

// Optimistic UI pattern - action completes before server confirms
function archiveEmail(emailId: string) {
  // 1. Immediately update UI (0ms perceived)
  removeFromList(emailId);
  showUndoToast();

  // 2. Move focus to next email (keyboard flow uninterrupted)
  focusNextEmail();

  // 3. Server sync happens in background
  syncQueue.add({ action: 'archive', emailId });
}

設計洞察：按鍵重複率設定為 65ms，而 macOS 預設為 100ms。更快的速率使得按住 j/k 來瀏覽郵件時明顯更快。

命令面板作為訓練輔助

Cmd+K 命令面板同時也是一個訓練系統，逐步教導使用者鍵盤快捷鍵。

interface CommandPaletteResult {
  action: string;
  shortcut?: string;
  description: string;
}

function CommandPalette({ query }: { query: string }) {
  const results = searchCommands(query);

  return (
    <div className="command-palette">
      {results.map(result => (
        <div className="command-row" key={result.action}>
          <span className="command-name">{result.action}</span>
          <span className="command-description">{result.description}</span>

          {/* The teaching moment: always show the shortcut */}
          {result.shortcut && (
            <kbd className="command-shortcut">{result.shortcut}</kbd>
          )}
        </div>
      ))}

      {/* Subtle reinforcement after selection */}
      <div className="palette-footer">
        Pro tip: Next time, try <kbd>{selectedResult?.shortcut}</kbd>
      </div>
    </div>
  );
}

// Usage tracking shows the training effect
const ONBOARDING_IMPACT = {
  shortcutUsage: '+20%',      // After 30-min onboarding
  reminderUsage: '+67%',      // Feature adoption
  week1Activation: '+17%',    // Retention metric
};

設計洞察：每次你使用 Cmd+K 尋找命令時，都會看到它的快捷鍵。幾次使用後，肌肉記憶接管，你就不再需要使用面板來執行該操作。

分割收件匣架構

Superhuman 的分割收件匣自動將郵件分類為 3-7 個專注的信件流，減少統一收件匣的認知負擔。

interface InboxSplit {
  id: string;
  name: string;
  filter: EmailFilter;
  position: number;
  color: string;
}

const DEFAULT_SPLITS: InboxSplit[] = [
  {
    id: 'important',
    name: 'Important',
    filter: { from: 'vip-list', or: { hasReply: true } },
    position: 0,
    color: 'blue'
  },
  {
    id: 'team',
    name: 'Team',
    filter: { domain: 'company.com' },
    position: 1,
    color: 'green'
  },
  {
    id: 'calendar',
    name: 'Calendar',
    filter: { from: ['[email protected]'] },
    position: 2,
    color: 'purple'
  },
  {
    id: 'news',
    name: 'News & Updates',
    filter: { category: 'newsletter' },
    position: 3,
    color: 'orange'
  },
  {
    id: 'other',
    name: 'Other',
    filter: { default: true },
    position: 4,
    color: 'gray'
  }
];

// Navigation with H/L keys
function SplitNavigation({ splits, activeSplit, onSelect }) {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'h' || e.key === 'H') {
      // Previous split
      const prev = splits[Math.max(0, activeSplit - 1)];
      onSelect(prev);
    }
    if (e.key === 'l' || e.key === 'L') {
      // Next split
      const next = splits[Math.min(splits.length - 1, activeSplit + 1)];
      onSelect(next);
    }
  };

  return (
    <nav className="split-tabs">
      {splits.map((split, i) => (
        <button
          key={split.id}
          className={`split-tab ${i === activeSplit ? 'active' : ''}`}
          style={{ '--accent': split.color }}
        >
          {split.name}
          <span className="unread-count">{getUnreadCount(split)}</span>
        </button>
      ))}
    </nav>
  );
}

設計洞察：分割區使用類似 vim 的 H/L 導航（左/右），而 J/K 則在分割區內導航（上/下）。空間模型保持一致。

鍵盤優先設計

憑藉超過 100 個鍵盤快捷鍵，Superhuman 將鍵盤視為主要輸入裝置。

// Core navigation shortcuts (vim-inspired)
const NAVIGATION_SHORTCUTS = {
  // Email list
  'j': 'next-email',
  'k': 'previous-email',
  'o': 'open-email',
  'u': 'go-back',

  // Split navigation
  'h': 'previous-split',
  'l': 'next-split',

  // Actions
  'e': 'archive',
  '#': 'trash',
  'r': 'reply',
  'a': 'reply-all',
  'f': 'forward',
  'c': 'compose',

  // Power features
  'Cmd+k': 'command-palette',
  'Cmd+/': 'shortcuts-help',
  '/': 'search',
  'z': 'undo',
};

// Visual feedback on every keypress
function KeypressIndicator({ lastKey }: { lastKey: string }) {
  return (
    <div className="keypress-toast" role="status">
      <kbd>{lastKey}</kbd>
      <span>{getActionName(lastKey)}</span>
    </div>
  );
}

// Zero-delay action feedback
function handleArchive() {
  // Haptic-like visual feedback
  animateEmailOut('slide-right', { duration: 150 });

  // Immediately focus next email
  focusNextEmail();

  // Show undo toast
  showToast({
    message: 'Archived',
    action: { label: 'Undo', shortcut: 'z' }
  });
}

設計洞察：操作零動畫延遲。按下 E 鍵，郵件立即消失。動畫是為了視覺上的完整感，而非阻塞操作。

白手套式新手引導

Superhuman 著名的 30 分鐘一對一引導課程，透過實際練習而非口頭解說來建立肌肉記憶。

interface OnboardingSession {
  duration: '30-minutes';
  format: '1:1-video-call';
  structure: OnboardingPhase[];
}

const ONBOARDING_PHASES: OnboardingPhase[] = [
  {
    name: 'Synthetic Inbox',
    duration: '10-min',
    description: 'Practice with fake emails before touching real inbox',
    exercises: [
      'Archive 10 emails using E key',
      'Reply to 3 emails using R key',
      'Navigate using J/K keys',
      'Find a command with Cmd+K'
    ]
  },
  {
    name: 'Split Setup',
    duration: '10-min',
    description: 'Configure splits for their workflow',
    exercises: [
      'Create VIP split for important contacts',
      'Set up team split for work domain',
      'Navigate splits with H/L'
    ]
  },
  {
    name: 'Power Features',
    duration: '10-min',
    description: 'Introduce advanced features',
    exercises: [
      'Schedule send with Cmd+Shift+Enter',
      'Snooze email with H key',
      'Set reminder with Cmd+Shift+R'
    ]
  }
];

// Onboarding impact metrics
const ONBOARDING_RESULTS = {
  shortcutUsageIncrease: 0.20,    // +20%
  reminderFeatureAdoption: 0.67,  // +67%
  week1ActivationLift: 0.17,      // +17%
  npsScore: 70,                    // Industry-leading
};

設計洞察：模擬收件匣讓使用者在零風險的環境下建立肌肉記憶。當他們開始處理真實郵件時，快捷鍵操作已經逐漸變得自動化。

視覺設計系統

字型：Messina 家族

Superhuman 採用 Luzi Type 的 Messina 字型家族，這是一套包含無襯線、襯線及等寬字型的協調系統。

:root {
  /* Messina Sans - Primary UI */
  --font-sans: 'Messina Sans', -apple-system, sans-serif;

  /* Messina Serif - Email body, long-form */
  --font-serif: 'Messina Serif', Georgia, serif;

  /* Messina Mono - Code, timestamps, metadata */
  --font-mono: 'Messina Mono', 'SF Mono', monospace;

  /* Type scale - optimized for scanning */
  --text-xs: 11px;    /* Timestamps, metadata */
  --text-sm: 12px;    /* Secondary info */
  --text-base: 14px;  /* Primary UI text */
  --text-lg: 16px;    /* Email body */
  --text-xl: 18px;    /* Email subject */
}

/* Email list: optimized for rapid scanning */
.email-row {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.4;
}

.email-subject {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;  /* Tighter for headlines */
}

.email-sender {
  font-weight: 600;
  color: var(--text-primary);
}

.email-preview {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

色彩系統：極簡介面風格

Superhuman 謹慎使用色彩，主要用於狀態和焦點指示，從不用於裝飾。

:root {
  /* Neutral foundation */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #ebebeb;

  /* Text hierarchy */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;

  /* Accent: Blue for interactive, Purple for premium */
  --accent-primary: #0066ff;
  --accent-secondary: #7c3aed;

  /* Status colors */
  --status-unread: #0066ff;
  --status-starred: #f59e0b;
  --status-snoozed: #8b5cf6;

  /* Focus states - high contrast */
  --focus-ring: 0 0 0 2px var(--accent-primary);
}

/* Unread emails: subtle but clear distinction */
.email-row[data-unread="true"] {
  background: linear-gradient(
    to right,
    var(--accent-primary) 3px,
    var(--bg-primary) 3px
  );
}

.email-row[data-unread="true"] .email-sender {
  font-weight: 700;  /* Bolder for unread */
}

動畫模式

即時操作，流暢過渡

操作立即完成；動畫提供視覺上的收尾效果，但不會阻擋流程。

/* Email archive: instant removal, smooth visual */
.email-row.archiving {
  animation: slide-out-right 150ms ease-out forwards;
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100px);
    opacity: 0;
  }
}

/* Next email slides up to fill gap */
.email-row.moving-up {
  animation: slide-up 150ms ease-out;
}

@keyframes slide-up {
  from {
    transform: translateY(var(--row-height));
  }
  to {
    transform: translateY(0);
  }
}

/* Command palette: snappy spring */
.command-palette {
  animation: palette-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes palette-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

復原提示模式

function UndoToast({ action, onUndo }: { action: string; onUndo: () => void }) {
  const [timeLeft, setTimeLeft] = useState(5);

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(t => {
        if (t <= 1) {
          clearInterval(timer);
          return 0;
        }
        return t - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="undo-toast">
      <span>{action}</span>
      <button onClick={onUndo}>
        Undo <kbd>Z</kbd>
      </button>
      <div
        className="toast-timer"
        style={{ '--progress': timeLeft / 5 }}
      />
    </div>
  );
}

經驗教訓

1. 速度即功能

效能不是技術需求——它就是產品本身。每一毫秒都很重要，因為回應速度塑造了使用軟體的情感體驗。

2. 命令面板作為漸進式訓練

不要只是透過命令面板展示功能。用它來教導快捷鍵。每次都顯示鍵盤快捷鍵，用戶自然會進階到直接調用。

3. 鍵盤優先源自 Vim 啟發

來自 vim 的 j/k/h/l 導航模式為進階用戶提供了經過驗證的心智模型。與此慣例保持一致，可降低開發者和進階用戶的學習曲線。

4. 引導是練習，不是解釋

30 分鐘的一對一培訓不是解釋功能，而是訓練肌肉記憶。用戶使用模擬資料進行練習，直到快捷鍵變成自動反應。

5. 樂觀 UI 是速度的必要條件

等待伺服器確認會打破速度的錯覺。操作必須在伺服器回應之前就完成視覺呈現，以復原功能作為安全網。

6. 分割檢視降低認知負荷

統一收件匣強迫用戶不斷切換情境。預先排序的分割檢視讓用戶能進入不同的心智模式，批次處理相似的郵件。

常見問題

什麼是 Superhuman 的「100ms 法則」？為什麼他們實際目標是 50ms？

Superhuman 對外宣傳 100ms 法則——這是互動感覺即時的門檻。然而，他們內部對所有操作的目標是 50-60ms。50ms 和 100ms 之間的差異是可感知的；50ms 感覺像介面在你完成動作之前就已回應，而 100ms 只是感覺「快」。這個積極的目標來自遊戲設計對感知回應性的研究。

Superhuman 的命令面板如何訓練用戶使用鍵盤快捷鍵？

每次你使用 Cmd+K 尋找命令時，面板會在旁邊顯示鍵盤快捷鍵。這創造了被動學習：你會反覆看到快捷鍵（例如「E」代表封存），而不需要刻意記憶。使用幾次後，肌肉記憶就會形成，你自然會開始直接按 E 而不是打開面板。對於進階用戶來說，面板本質上讓自己變得多餘。

Vim 的導航模式——J/K 上下移動，H/L 左右移動——創造了一個空間心智模型，讓你的手指停留在主鍵位上。數百萬開發者已經從程式編輯器認識這些按鍵。Superhuman 將此延伸到電子郵件：J/K 在列表中的郵件間移動，H/L 在收件匣分割檢視間移動。這種一致性意味著進階用戶可以以思考的速度導航，無需看鍵盤。

Superhuman 30 分鐘引導培訓中發生什麼？

引導專員不解釋功能——他們訓練肌肉記憶。用戶使用包含模擬郵件的練習收件匣進行練習，用 E 封存 10 封郵件，用 R 回覆，用 J/K 導航。只有在快捷鍵變得半自動化後，他們才會接觸真實收件匣。與自助式引導相比，這種練習優先的方法使快捷鍵使用率提高 20%，功能採用率提高 67%。

Superhuman 如何在伺服器同步的同時實現即時感的操作？

Superhuman 使用樂觀 UI：當你按 E 封存時，郵件立即消失，焦點移動到下一封郵件。伺服器同步在背景進行。如果失敗（很少見），郵件會重新出現並顯示錯誤。帶有「Z」快捷鍵的復原提示框提供安全網。這種模式意味著用戶零感知延遲，即使實際操作在伺服器上需要數百毫秒才能完成。

參考資料

Superhuman 設計哲學簡報
Rahul Vohra（CEO）產品設計訪談
遊戲設計應用於生產力軟體
效能優化案例研究
引導影響指標與用戶研究

超人類：速度即產品