Mercury：銀行業的電影級精緻美學

7 分鐘閱讀 • 209 字
Mercury：銀行業的電影級精緻美學 screenshot

「徹底不同的銀行體驗。」— Mercury

Mercury 的創立基於一個前提：新創公司的銀行服務已經崩壞，而修復之道需要重新思考整個體驗——不僅僅是功能。共同創辦人 Immad Akhund 認知到，當時新創公司可用的銀行產品不是消費級（簡單但受限），就是企業級（強大但不友善）。Mercury 瞄準了第三條路：一個具備新創公司所需精密度的平台——資金管理、團隊卡片、API 存取、多實體支援——包裹在一個感覺毫不費力的體驗之中。這個賭注是：在自己公司中執著於產品品質的創辦人，也會選擇一家同樣執著於產品品質的銀行。

核心要點

  1. 客製字型是可防禦的品牌護城河 — Mercury 的 Arcadia 字型，搭配其不尋常的 480 字重標題，創造出競爭對手無法複製的視覺識別
  2. 深色模式傳達高端定位 — 以深色為優先的色彩方案將 Mercury 定位在奢華品牌之列，而非花俏的消費級金融科技應用程式
  3. 電影級攝影取代素材圖庫 — 經過藝術指導、具戲劇性打光的品牌攝影，借鑑汽車與時尚廣告手法，讓銀行服務成為一種嚮往
  4. 微調校的細節積累成身份認同 — 字重 480（不是 400，不是 500）和內文行高 1.625（不是 1.5）展現出精細用戶能識別的極致專注
  5. 銀行業中使用紫色是刻意的差異化 — 避開金融服務標準的藍色和綠色，是一個刻意的信號：Mercury 不是傳統銀行

為什麼 Mercury 重要

Mercury 證明了銀行可以是產品設計問題，而不僅僅是金融工程問題。每一筆交易、每一份對帳單、每一個審批流程，都以消費應用程式對待其新手引導流程的同等專注度來設計。公司已從 YC W19 批次的新創成長為管理數十億存款的規模，而設計也同步演進——從「乾淨的金融科技儀表板」到更具野心的樣貌。

關鍵成就： - 透過將銀行服務視為高端數位產品，為金融科技建立了新的設計標準 - 委託開發 Arcadia 字型家族，創造出兼具現代感與機構感的專屬視覺語言 - 證明了以深色模式為優先的品牌策略可以在金融服務領域運作——一個歷來與明亮藍色和綠色相關聯的類別 - 運用電影級品牌攝影將銀行服務定位為令人嚮往的，而非交易性的 - 建構了一套沒有任何預設值的設計語言——每一個字重、每一個色彩值、每一個陰影都經過精確校準

核心設計原則

1. Arcadia 字型：以精準作為身份認同

Mercury 最引人注目的設計決策是客製的 Arcadia 字型家族——ArcadiaDisplay 用於標題，Arcadia 用於內文。這套字型具有獨特的性格：略微窄體，具有鮮明的字母造型，同時讀起來既現代又具機構感，兼具科技與金融氣質。

TYPOGRAPHIC WEIGHT SPECTRUM:

標準做法：                   Mercury 的做法：
    400 (Regular)                 480 (客製)
    500 (Medium)                  ↑
    600 (Semibold)           透過可變字型進行
    700 (Bold)               精細控制

大多數 SaaS 產品：          Mercury：
「選擇最接近的              「校準到感覺恰到好處的
 標準字重」                  精確字重」

480 的標題字重相當於排版界的手工訂製西裝。大多數字型使用 100 為增量，但 Mercury 使用具有精細字重控制的可變字型，找到既具權威感又不沉重的精確值。內文使用寬裕的 1.625 行高——比典型的 1.5 更為寬敞，在深色背景上為文字提供呼吸空間，因為可讀性需要更多的行距。

2. 電影級攝影作為品牌策略

Mercury 的主視覺圖片不是拿著筆電的素材庫照片。他們使用戲劇性構圖、令人嚮往的場景和電影級調色——山巔上的辦公桌、凝望地平線的創辦人。這種攝影手法直接借鑑自豪華汽車和高端時尚廣告。

PHOTOGRAPHY TREATMENT:

素材庫金融科技照片：            Mercury 照片：
┌─────────────────────┐        ┌─────────────────────┐
│ 使用筆電的人物       │        │ 戲劇性風景           │
│ 一般辦公室           │        │ 電影級打光           │
│ 明亮、平坦的光線     │   →    │ 冷色陰影、           │
│ 「請信任我們」的氛圍 │        │ 暖色高光             │
│                      │        │ 微妙的暗角效果       │
└─────────────────────┘        └─────────────────────┘
  同質化信號                     嚮往感信號

主視覺圖片上的文字使用精心校準的漸層覆蓋——linear-gradient(rgba(15,15,20,0) 0%, rgba(15,15,20,0.8) 100%)——確保可讀性而不遮蔽攝影作品。漸層是品牌與功能之間的介面。

3. 深色模式作為高端信號

Mercury 的深色調色盤對品牌而言是不可妥協的。主背景色 rgb(15,15,20)、表面色 rgb(25,25,32)、抬升元素 rgb(38,38,48) 構成了一個分層的深度系統。淺色文字 rgb(237,237,243) 映襯在這些深色表面上，傳達精緻與現代感——深色主題與高端數位產品相關聯，從高階音訊軟體到豪華汽車介面。

調色盤刻意低調。沒有代表「金錢」的亮綠色，沒有代表「信任」的響亮藍色。Mercury 透過設計品質來傳達信任，而非色彩心理學暗示。強調色紫色（rgb(108,92,231)）在銀行業中並不常見，而這正是重點——Mercury 不想看起來像傳統銀行。

4. 金融數據即排版元素

帳戶餘額和交易金額擁有專屬的排版處理：28px 大小、500 字重、-0.5px 字距、1.0 行高。這創造出即時可掃視的金融數據，在視覺上與標題和內文截然不同。語義色彩——綠色代表收入（rgb(52,211,153)）、紅色代表支出（rgb(248,113,113)）、琥珀色代表待處理（rgb(251,191,36)）——遵循既有的金融慣例，同時保持足夠的低飽和度以與深色調色盤和諧共存。

可移轉的模式

Mercury 的設計系統展示了精確排版控制搭配深色調色盤如何提升任何產品類別。CSS 基礎揭示了其中的校準程度：

:root {
  /* Mercury's cinematic dark palette */
  --color-background: rgb(15, 15, 20);
  --color-surface: rgb(25, 25, 32);
  --color-elevated: rgb(38, 38, 48);
  --color-text: rgb(237, 237, 243);
  --color-text-secondary: rgb(170, 170, 185);
  --color-text-tertiary: rgb(120, 120, 140);
  --color-accent: rgb(108, 92, 231);
  --color-accent-light: rgb(140, 125, 245);
  --color-border: rgba(255, 255, 255, 0.08);

  /* Financial semantic colors */
  --color-credit: rgb(52, 211, 153);
  --color-debit: rgb(248, 113, 113);
  --color-pending: rgb(251, 191, 36);

  /* Shadows + glow */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-cta: 0 0 24px rgba(108, 92, 231, 0.3);

  /* Typography — custom Arcadia */
  --font-display: "ArcadiaDisplay", "ArcadiaDisplay Fallback", ui-sans-serif, sans-serif;
  --font-body: "Arcadia", "Arcadia Fallback", ui-sans-serif, -apple-system, sans-serif;
}

不尋常的 480 字重標題是最能體現 Mercury 設計哲學的細節。注意它不是 400 也不是 500——而是團隊確定看起來恰到好處的精確字重：

h1 {
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 480;
  line-height: 50px;
  letter-spacing: normal;
  color: #EDEDF3;
}

CTA 按鈕將強調紫色與光暈效果配對——陰影使用相同的紫色但降低透明度，在深色背景下創造出發光的質感：

.button-primary {
  background-color: var(--color-accent);
  color: white;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 8px;
  box-shadow: var(--shadow-cta);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.button-primary:hover {
  background-color: var(--color-accent-light);
  box-shadow: 0 0 32px rgba(108, 92, 231, 0.45);
}

在 SwiftUI 中，金融餘額顯示展示了貨幣數據的獨特排版處理——中等字重、負字距，以及清晰的標籤到數值層級：

extension Color {
    static let mercuryBg = Color(red: 15/255, green: 15/255, blue: 20/255)
    static let mercurySurface = Color(red: 25/255, green: 25/255, blue: 32/255)
    static let mercuryText = Color(red: 237/255, green: 237/255, blue: 243/255)
    static let mercurySecondary = Color(red: 170/255, green: 170/255, blue: 185/255)
    static let mercuryAccent = Color(red: 108/255, green: 92/255, blue: 231/255)
}

// Financial balance display
VStack(alignment: .leading, spacing: 4) {
    Text("Checking")
        .font(.system(size: 12, weight: .medium))
        .tracking(0.5)
        .foregroundStyle(Color.mercurySecondary)
    Text("$2,847,392.00")
        .font(.system(size: 28, weight: .medium))
        .tracking(-0.5)
        .foregroundStyle(Color.mercuryText)
}

設計啟示

如果你想要可防禦的身份認同，就投資客製字型。 Arcadia 是 Mercury 獨有的。沒有競爭對手能達到相同的排版感受，使得 Mercury 的設計身份成為真正的護城河。480 字重標題是只有 Mercury 能擁有的細節。

深色模式是定位選擇，不僅僅是偏好切換。 Mercury 的深色調色盤是品牌不可分割的一部分——它傳達精緻與嚴肅。行銷網站不提供淺色模式切換，因為深色本身就是訊息，而非用戶偏好。

低飽和色彩比高飽和色彩更能建立信任。 Mercury 避開了金融產品通常用來傳達「金錢」和「信任」的亮綠色和藍色。透過保持調色盤低飽和度，讓設計品質自己說話，Mercury 吸引的是能識別工藝而非慣例的創辦人。

將金融數據視為一級排版元素。 帳戶餘額不是內文。它們值得擁有自己的大小、字重、字距和語義色彩系統。Mercury 的獨特處理使金融數據即時可掃視，而不會與周圍的敘述文字競爭。

委託拍攝，不要授權購買。 經過藝術指導、具電影級調色的品牌攝影，無法被從相同素材庫購買的競爭對手所複製。對原創攝影的投資，隨著品牌規模擴大而產生複利回報。

常見問題

Mercury 的設計與其他金融科技產品有何不同？

Mercury 將銀行業務視為一個頂級設計課題。大多數金融科技產品使用明亮的色彩和素材圖庫來傳達親和力，而 Mercury 則採用深色電影感色調、定製字體（Arcadia）以及藝術指導攝影，將自身定位於奢侈品牌之列。這樣的設計傳達出一個訊號：這是為重視工藝的創辦人打造的銀行服務。

為什麼 Mercury 使用 480 的字重而非標準值？

Mercury 使用可變字體，允許超越傳統 100 為單位的刻度進行精細的字重控制。480 的字重經過精心校準，使其具有權威感而不顯厚重——比 medium（500）更含蓄，但比 regular（400）更有力量。這種對排版細節的微觀關注是 Mercury 品牌識別的核心：沒有任何值是預設的。

Mercury 的深色調對銀行產品的可用性有何影響？

深色調實際上透過減少視覺雜訊來增強金融數據的可用性，使彩色元素（綠色代表收入、紅色代表支出）在中性背景上更加醒目。正文使用 1.625 的慷慨行高以確保在深色表面上的可讀性，文字顏色採用柔和的米白色（rgb(237,237,243)）而非純白色，以減輕眼睛疲勞。

設計師能從 Mercury 的品牌攝影方法中學到什麼？

Mercury 的攝影借鑒了豪華汽車和時尚廣告的技巧——戲劇性的燈光、令人嚮往的場景以及電影級的色彩分級。其中的啟示是：用於在實體產品中營造嚮往感的同一套技巧，同樣可以將數位產品從大眾商品重新定位為品牌。漸層覆蓋系統確保文字在圖像上保持可讀性，同時不犧牲其視覺衝擊力。

參考資料