Headspace：為平靜而設計
「我們希望它感覺像是你最睿智、最溫暖的朋友在引導你冥想。」— Andy Puddicombe，Headspace 共同創辦人
Headspace 是一個設計論證：一款 app 可以在使用者與它互動之前，就改變他們的感受。大多數 app 的設計目標是高效、資訊化或娛樂性。Headspace 的設計目標是令人平靜。每一個顏色、插畫、動畫和轉場都服務於一個單一的情感目標——減輕焦慮、邀請寧靜，讓靜坐十分鐘這件事感覺平易近人，而非令人生畏。
這是一個比表面上看起來更困難的設計問題。冥想本質上是抽象的。你無法像展示濾鏡效果或地圖路線那樣，向使用者展示冥想的樣貌。Headspace 的解決方案是從零開始創造一套完整的視覺語言——圓潤的角色、溫暖的漸層、與使用者呼吸同步的動畫。最終成果是一個視覺辨識度極高的品牌，僅憑一幅插畫就能傳達「平靜」，無需任何文字。
為什麼 Headspace 很重要
Headspace 由 Andy Puddicombe（前佛教僧侶）和 Rich Pierson 於 2010 年共同創辦，將冥想帶入了對健康類 app 抱持懷疑態度的一代人的主流生活中。
主要成就： - 在 190 個國家累計超過 7,000 萬次下載 - Apple 與 Google 年度最佳 App - Netflix 動畫影集將品牌語言延伸至影音領域 - 在同儕審查期刊發表臨床研究 - 與 Ginger 合併成立 Headspace Health（2021 年） - 客製化插畫系統，擁有超過 3,000 個原創素材 - 呼吸動畫引擎與語音導引同步 - 睡眠內容成為使用者參與度和留存率的重要驅動力
關鍵要點
- 插畫即品牌 — Headspace 的角色比其 logo 更具辨識度；視覺系統承載了整個品牌識別
- 動畫時序傳遞情感 — 緩慢的緩動曲線和較長的轉場在冥想開始前就能從生理上平靜使用者的神經系統
- 引導式體驗減少決策疲勞 — 處於壓力狀態的使用者無法應對複雜的導航；Headspace 讓他們只需 1-2 次點擊即可到達內容
- 睡眠 UI 需要不同的規則 — 深色背景、最低對比度，以及為躺在床上半閉著眼睛的使用者設計的大型觸控目標
- 訂閱轉換不能製造焦慮 — 一款向使用者施壓付費的健康類 app 會破壞其核心價值主張
核心設計原則
1. 插畫系統
Headspace 的插畫是其最具辨識度的設計元素。由專屬的內部團隊創作，這套系統遵循嚴格的規則，確保數千個素材的一致性。
ILLUSTRATION PRINCIPLES
──────────────────────────────────────────
SHAPES
所有角色和物件使用圓潤的造型
沒有尖銳的邊角，沒有棱角幾何
圓形和橢圓形是基本圖元
即使是「方形」物件也有大圓角 border-radius
COLOR
暖色調調色盤：橘色、珊瑚色、柔和藍、鼠尾草綠
插畫中絕不使用純黑（#000）
不用純白（#fff）— 最暖的中性色為 #FFF8F0
陰影使用有色疊加，絕不使用灰色
CHARACTERS
簡約的臉部：兩個點作為眼睛，一條曲線作為嘴巴
沒有細節特徵（沒有鼻子、沒有耳朵、沒有牙齒）
情感透過身體姿態和顏色傳達
角色總是在做某件事（坐著、漂浮）
EMOTION MAPPING
平靜： 柔和藍 + 鼠尾草綠 + 緩慢移動的雲朵
專注： 暖橘色 + 專注的單一角色
睡眠： 深藍色 + 星星 + 水平構圖
壓力： 纏繞的線條慢慢解開
喜悅： 明亮珊瑚色 + 向上漂浮的元素
/* Headspace illustration color palette */
:root {
/* Primary warm palette */
--hs-orange: #F47D31;
--hs-coral: #FF8C69;
--hs-peach: #FFDAB9;
--hs-warm-white: #FFF8F0;
/* Calm palette */
--hs-sky-blue: #91C8E4;
--hs-sage: #A8C686;
--hs-soft-teal: #7EC8C8;
/* Sleep palette */
--hs-deep-navy: #1B2838;
--hs-night-blue: #2C3E6B;
--hs-star-yellow: #FFE082;
--hs-moon-glow: #E8D5B7;
/* Never use */
--forbidden-pure-black: #000000; /* Use #1B2838 instead */
--forbidden-pure-white: #FFFFFF; /* Use #FFF8F0 instead */
--forbidden-gray: #808080; /* Use colored neutrals */
}
/* Illustration container — always warm background */
.illustration-container {
background: var(--hs-warm-white);
border-radius: 24px;
overflow: hidden;
padding: 32px;
}
/* Character styling — rounded everything */
.hs-character {
border-radius: 50%;
}
.hs-character-body {
border-radius: 40% 40% 50% 50%;
}
/* Shadows use colored overlay, never gray */
.hs-shadow {
box-shadow: 0 8px 24px rgba(244, 125, 49, 0.12);
}
禁止使用純黑和純白是一條基礎規則。純黑會產生刺眼的對比，與平靜的設計意圖相矛盾。純白則感覺冰冷。透過將調色盤限制在暖中性色，每個畫面都彷彿是繪畫而非程式碼的產物。
2. 呼吸動畫
Headspace 的呼吸練習使用一個隨語音導引擴張和收縮的圓圈。動畫的時序就是設計本身。一個花 4 秒擴張、6 秒收縮的圓圈，實際上在為使用者的呼吸設定節奏。
BREATHING ANIMATION STATES
──────────────────────────────────────────
INHALE（4 秒）
圓圈從容器的 40% 擴展到 100%
透明度從 0.6 增加到 1.0
顏色從冷藍色轉變為暖橘色
緩動：ease-in-out（緩慢開始、緩慢結束）
HOLD（2 秒）
圓圈保持在 100%
輕微的脈動光暈（透明度 0.9-1.0）
沒有尺寸變化
傳達靜止感
EXHALE（6 秒）
圓圈從 100% 收縮到 40%
透明度從 1.0 降低到 0.6
顏色從暖橘色轉回冷藍色
緩動：ease-in-out（緩慢開始、緩慢結束）
呼氣刻意比吸氣長
/* Breathing circle animation */
.breathing-circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(
circle,
var(--hs-coral) 0%,
var(--hs-orange) 60%,
transparent 70%
);
animation: breathe 12s ease-in-out infinite;
}
@keyframes breathe {
/* Inhale: 0% to 33% (4s of 12s) */
0% {
transform: scale(0.4);
opacity: 0.6;
background: radial-gradient(
circle,
var(--hs-sky-blue) 0%,
var(--hs-soft-teal) 60%,
transparent 70%
);
}
/* Hold: 33% to 50% (2s of 12s) */
33% {
transform: scale(1);
opacity: 1;
background: radial-gradient(
circle,
var(--hs-coral) 0%,
var(--hs-orange) 60%,
transparent 70%
);
}
50% {
transform: scale(1);
opacity: 0.95;
}
/* Exhale: 50% to 100% (6s of 12s) */
100% {
transform: scale(0.4);
opacity: 0.6;
background: radial-gradient(
circle,
var(--hs-sky-blue) 0%,
var(--hs-soft-teal) 60%,
transparent 70%
);
}
}
/* Glow effect during hold phase */
.breathing-circle::after {
content: '';
position: absolute;
inset: -20px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(244, 125, 49, 0.15) 0%,
transparent 70%
);
animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
4-2-6 的時序（吸氣-屏息-呼氣）並非隨意設定。它基於一個生理學事實：較長的呼氣會激活副交感神經系統，降低心率。這個動畫是偽裝成設計元素的醫學介入。
3. 引導式體驗設計
打開 Headspace 的使用者通常處於焦慮或不知所措的狀態。app 不能向他們呈現複雜的導航層級。主畫面根據一天中的時段、近期行為和當前連續天數，推薦單一的課程。
HOME SCREEN（早晨）
┌─────────────────────────────────────────┐
│ 早安，Blake │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ [插畫：日出場景 │ │
│ │ 角色正在冥想] │ │
│ │ │ │
│ │ 今日冥想 │ │
│ │ 尋找專注 │ │
│ │ 10 分鐘 │ │
│ │ │ │
│ │ [ ▶ 開始 ] │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ 你的連續天數：🔥 7 天 │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 專注 │ │ 睡眠 │ │
│ │ [icon] │ │ [icon] │ │
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 運動 │ │ 壓力 │ │
│ │ [icon] │ │ [icon] │ │
│ └──────────┘ └──────────┘ │
│ │
│ [首頁] [探索] [個人] │
└─────────────────────────────────────────┘
主要操作——開始冥想——只需在一個大型置中按鈕上點擊一次。次要的分類網格提供探索功能，但不強制要求。這與內容庫的概念相反；它是一種管家式服務。
值得借鏡的設計模式
睡眠 UI
Headspace 的睡眠內容佔所有使用量的近一半。睡眠介面遵循與白天 app 不同的設計規則——它假設使用者正躺在床上，處於黑暗中，注意力降低。
SLEEP SCREEN
┌─────────────────────────────────────────┐
│ [X] │
│ │
│ [深藍色背景] │
│ [星星緩慢飄過螢幕] │
│ │
│ ┌───────────────┐ │
│ │ │ │
│ │ [月亮/夜晚 │ │
│ │ 插畫] │ │
│ │ │ │
│ └───────────────┘ │
│ │
│ Rainday Antiques │
│ 睡眠故事 • 45 分鐘 │
│ │
│ ──●──────────────── 2:15 / 45:00 │
│ │
│ [ ▶ ] │
│ 大型觸控目標 │
│ （最小 80px 觸控範圍） │
│ │
│ │
└─────────────────────────────────────────┘
/* Sleep mode overrides */
.sleep-mode {
background: var(--hs-deep-navy);
color: var(--hs-moon-glow);
}
/* Minimal contrast — easy on tired eyes */
.sleep-mode .text-primary {
color: rgba(232, 213, 183, 0.9); /* Moon glow at 90% */
}
.sleep-mode .text-secondary {
color: rgba(232, 213, 183, 0.5); /* Moon glow at 50% */
}
/* Extra-large touch targets for bed use */
.sleep-mode .play-button {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
/* Stars background animation — very slow, barely perceptible */
.sleep-stars {
position: fixed;
inset: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, var(--hs-star-yellow), transparent),
radial-gradient(2px 2px at 40px 70px, var(--hs-star-yellow), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(255, 224, 130, 0.5), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255, 224, 130, 0.5), transparent);
background-size: 200px 100px;
animation: drift-stars 120s linear infinite;
}
@keyframes drift-stars {
from { transform: translateX(0); }
to { transform: translateX(-200px); }
}
/* Timer auto-fade — screen dims after playback starts */
.sleep-mode.playing .ui-controls {
animation: fade-controls 30s ease-out forwards;
}
@keyframes fade-controls {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; pointer-events: none; }
}
睡眠 UI 的關鍵決策：星星動畫每個循環 120 秒，慢到幾乎察覺不到。UI 控制元件在播放開始後 30 秒自動淡出——使用者在入睡時不需要看到進度條。觸控目標最小 80px，因為使用者是用不精確、昏昏欲睡的手指在點擊。
不製造焦慮的訂閱轉換
Headspace 的付費牆設計得像一份邀請，而非一道關卡。免費使用者可以獲得有意義的內容。升級提示使用與 app 其他部分相同的暖色調插畫風格。
SUBSCRIPTION PROMPT
┌─────────────────────────────────────────┐
│ │
│ [插畫：角色向上漂浮 │
│ 解鎖的內容在周圍飄動] │
│ │
│ 解鎖你的完整旅程 │
│ │
│ ✦ 超過 1,000 個冥想課程 │
│ ✦ 睡眠故事與音樂 │
│ ✦ 專注播放清單 │
│ ✦ 個人化推薦 │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 年費 $69.99/年 │ │
│ │ $5.83/月 │ │
│ │ ✦ 最佳價值 │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ 月費 $12.99/月 │ │
│ └─────────────────────────────────┘ │
│ │
│ [ 開始免費試用 ] │
│ │
│ 無需承諾。隨時取消。 │
│ │
│ [稍後再說] ← 始終可見， │
│ 絕不隱藏 │
└─────────────────────────────────────────┘
關鍵細節：「稍後再說」始終可見，絕不偽裝成角落裡的小「X」。一款使用暗黑模式將使用者困在訂閱中的冥想 app，將與它所代表的一切相矛盾。關閉選項清楚、明確且無罪惡感。
轉場與動態設計
Headspace 的每一個畫面轉場都使用強化平靜感的時序曲線。大多數 app 使用 250-300ms 的轉場，Headspace 則使用 400-600ms，搭配明顯的緩動效果。
/* Headspace transition timing — deliberately slow */
.hs-transition-page {
transition: opacity 500ms ease-in-out,
transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Entering a meditation — slower than navigating */
.hs-transition-meditation-enter {
animation: meditation-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes meditation-enter {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Session complete — celebratory but gentle */
.hs-transition-complete {
animation: session-complete 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes session-complete {
0% {
opacity: 0;
transform: scale(0.9);
}
60% {
opacity: 1;
transform: scale(1.02);
}
100% {
opacity: 1;
transform: scale(1);
}
}
課程完成動畫持續整整一秒，並包含微妙的過衝效果（縮放到 1.02 後回落到 1.0）。這傳達了成就感——一個用動態表達的溫柔「做得好」——而沒有紙花飛舞或徽章彈出的刺眼能量。
結語
Headspace 證明了設計可以具有療癒性。插畫系統、呼吸動畫、轉場時序和睡眠 UI 協同運作，創造出一種在使用者閉上眼睛之前就開始令他們平靜的體驗。這是最具意圖性的情感設計。
最深層的啟示在於「約束」。Headspace 本可以使用照片、寫實的 3D 角色、遊戲化機制或激進的推播通知。它拒絕了所有這些，因為它們會與核心的情感承諾相矛盾。每一個設計選擇都經過一個問題的過濾：這是否讓使用者感到更平靜？如果答案是否定的，就不會上線。
最佳學習方向： 如何為情感結果而非任務完成而設計。研究呼吸動畫時序作為生理學設計、睡眠 UI 作為情境感知的介面適應，以及訂閱付費牆如何避免破壞產品的核心價值。
常見問題
Headspace 的插畫系統如何維持一致性？
Headspace 聘用專屬插畫團隊，依據嚴格的風格指南進行創作。所有角色皆採用圓潤造型，完全不使用稜角幾何。面部表現極為精簡——兩個圓點作為眼睛，一條弧線作為嘴巴。色彩配置避免使用純黑與純白，改以溫暖的中性色調替代。每幅插畫都對應一種情緒狀態（平靜、專注、睡眠、壓力、愉悅），而各狀態的色彩與構圖規則各不相同。
為什麼呼吸動畫採用 4-2-6 的節奏模式？
此模式基於一項生理學原理：延長呼氣能活化副交感神經系統。4 秒吸氣、2 秒屏息、6 秒呼氣的節奏能逐步降低心率並減少皮質醇分泌。動畫扮演視覺節拍器的角色——使用者會不自覺地將呼吸節奏與圓圈的擴張和收縮同步。
Headspace 的睡眠介面與一般應用程式有何不同？
睡眠模式切換為深海軍藍色調，搭配暖金色的低對比文字。觸控目標最小尺寸增加至 80px，以適應就寢時不精確的點擊操作。播放開始 30 秒後，UI 控制項會自動淡出。背景動畫（飄浮星辰）以幾乎不可察覺的緩慢速度運行。整體亮度降低，以避免干擾褪黑激素的分泌。
Headspace 如何在推動訂閱轉換的同時不製造焦慮感？
「稍後再說」的關閉選項始終醒目可見——從不以小型 X 按鈕或偽裝連結的方式隱藏。付費牆採用與應用程式其他部分相同的溫暖插畫風格。免費用戶能獲得有實質意義的內容，而非功能殘缺的體驗。文案措辭採用邀請式語氣（「開啟你的完整旅程」），而非恐懼訴求（「你正在錯過」）。不使用倒數計時器或限時促銷的壓力策略。
Headspace 的轉場動畫與標準行動應用程式有何不同？
標準的行動裝置轉場通常為 250-300ms，搭配 ease-in-out 曲線。Headspace 則使用 400-800ms 的轉場，搭配強調減速階段的自訂 cubic-bezier 曲線。進入冥想課程的轉場最為緩慢（800ms），刻意在課程開始前營造一種放慢腳步的感受。這是將動態設計作為情緒調節的手段，而非單純的 UI 回饋。