Procreate：手勢優先的創意工具
「我們希望讓最強大的創作工具隱於無形，讓藝術家能專注於創作。」——James Cuda，Savage Interactive 創辦人
Procreate 是一款罕見的應用程式，它將硬體限制轉化為設計優勢。2011 年 Savage Interactive 推出這款應用時，iPad 還被視為一台純粹的內容消費裝置。Procreate 證明了觸控螢幕可以成為專業的創作畫布——不是將桌面範式移植到行動裝置上，而是發明了一套全新的互動模型，建立在手勢、壓力感應，以及手持觸控筆時的自然動作之上。
成果是一款專業插畫師、概念藝術家和動畫師每天都在使用的應用程式。Procreate 下載量超過三千萬次，多次榮獲 Apple Design Award，而且完全沒有採用訂閱制。其設計理念毫不妥協：每一個互動都必須讓人感覺工具已經消失，藝術家正直接在畫布上創作。
為什麼 Procreate 重要
Savage Interactive 是一間小型澳洲工作室，他們將 Procreate 作為熱情專案打造，最終將其發展為 iPad 上最具主導地位的創作應用。
主要成就： - 多次榮獲 Apple Design Award - iPad 年度最佳應用程式 - 超過 200 支手工製作的筆刷，支援完整自訂 - 銷售超過三千萬份，零訂閱收入 - Animation Assist 將逐格動畫帶到了 iPad 上 - 概念藝術、插畫和分鏡的業界標準 - 在 ProMotion 顯示器上以 120fps 運行，延遲低於 7 毫秒
關鍵要點
- 手勢必須既可發現又隱於無形——雙指點擊復原一旦學會就很直覺，但永遠不會打斷創作流程
- 延遲是一項設計決策——低於 7 毫秒的觸控筆到像素延遲讓數位感覺如同類比；任何更高的延遲都會打破這種錯覺
- 創作工具的觸控目標需要不同的規則——繪畫應用的點擊區域必須考慮手掌誤觸排除、觸控筆角度，以及手掌放在玻璃上的物理特性
- 觸控介面的圖層管理已是解決了的問題——Procreate 基於滑動的圖層控制證明了複雜操作不需要複雜的 UI
- 一次性購買建立忠誠度——拒絕訂閱制是一項設計決策，而不僅僅是商業決策；它傳達了對創作者與工具之間關係的尊重
核心設計原則
1. 隱形介面
Procreate 最重要的設計成就是你看不到的部分。在繪畫模式下，畫布佔據整個螢幕。工具列是一條可以隱藏的細長條。筆刷游標是唯一持續存在的 UI 元素。其他一切都透過手勢來操作。
畫布模式（預設狀態）
┌─────────────────────────────────────────┐
│ [Gallery] [+] [⚙] [🔧] [Layers] [Color]│
│ │
│ │
│ │
│ │
│ 純粹的畫布空間 │
│ 沒有邊框，沒有面板 │
│ 只有你的藝術作品 │
│ │
│ │
│ │
│ ← Brush ● │
│ Size Opacity │
│ │
└─────────────────────────────────────────┘
比較：傳統桌面繪圖應用
┌─────────────────────────────────────────┐
│ [Menu Bar] │
│ [Toolbar] [Toolbar] [Toolbar] │
│ ┌────┐┌─────────────────────┐┌────────┐│
│ │Tool││ ││Layers ││
│ │Pane││ 畫布 ││Panel ││
│ │ ││ （螢幕的 60%） ││ ││
│ │ ││ ││ ││
│ │ │├─────────────────────┤│ ││
│ │ ││ Brush Settings ││ ││
│ └────┘└─────────────────────┘└────────┘│
│ [Status Bar] │
└─────────────────────────────────────────┘
差異非常明顯。Procreate 將 95% 的螢幕空間留給畫布。桌面應用通常將 40% 的空間讓給工具列、面板和選單。這之所以可能，是因為手勢取代了按鈕。
2. 手勢語法
Procreate 的手勢系統遵循一套一致的語法，一旦內化，每個操作都會感覺瞬間完成。
手勢參考
──────────────────────────────────────────
復原／重做
雙指點擊 → 復原
三指點擊 → 重做
雙指長按 → 快速復原（快轉瀏覽歷史記錄）
畫布操作
雙指捏合 → 放大／縮小
雙指旋轉 → 旋轉畫布
雙指拖曳 → 平移畫布
快速捏到最小 → 畫布適應螢幕
選取與工具
三指向下滑動 → 剪下／複製／貼上選單
觸碰並長按 → 滴管工具（取色）
畫完後長按 → QuickShape（線條自動校正為直線）
圖層
在圖層上向右滑動 → 選取多個圖層
在圖層上向左滑動 → 鎖定／刪除／複製
捏合兩個圖層 → 合併圖層
長按 + 拖曳 → 重新排序圖層
顏色
觸碰並長按色票 → 刪除顏色
從色盤拖曳 → 顏色填充
這套語法有其規則：雙指用於畫布操作，三指用於剪貼簿操作，觸碰長按用於取色與校正。這種一致性意味著藝術家學習的是一套系統，而不是個別的快捷鍵。
3. 手掌誤觸排除——隱形的工程
在一塊你會將手掌靠在上面作畫的畫布上，系統必須區分手掌、手指點擊、手指手勢和 Apple Pencil 筆觸。Procreate 的手掌誤觸排除功能如此可靠，以至於藝術家忘記了它的存在——這正是重點所在。
輸入辨別層級
──────────────────────────────────────────
優先級 1：Apple Pencil
→ 始終被視為繪圖輸入
→ 壓力、傾斜度和方位角全部捕捉
→ 從觸控到像素延遲低於 7 毫秒
優先級 2：手指手勢（已辨識的模式）
→ 雙指捏合／旋轉／平移
→ 雙指點擊（復原）
→ 三指點擊（重做）
→ 50 毫秒內完成辨識
優先級 3：單指觸碰
→ 若啟用「手指繪畫」則視為塗抹／繪畫
→ 否則視為畫布互動
→ 永遠不會與靜置的手掌混淆
已排除：手掌接觸
→ 大面積接觸 + 低壓力 + 手掌邊緣
→ 在第一個觸碰幀內即被排除
→ 不會留下痕跡，不會觸發手勢
工程實現是複雜的，但設計結果卻很簡單：把手放在螢幕上，然後畫。工具消失了。
值得借鏡的設計模式
壓力曲線與筆刷自訂
Procreate 的筆刷引擎建立在壓力曲線之上，將 Apple Pencil 的輸入對應到筆刷行為。曲線編輯器本身就是一堂設計課，展示了如何讓複雜的參數變得具體可感。
壓力曲線編輯器
──────────────────────────────────────────
輸出（筆刷效果）
100% │ ╱
│ ╱
│ • ← 拖曳控制點
│ ╱
50% │ ╱
│ •
│╱
0% └──────────────────
0% 50% 100%
輸入（觸控筆壓力）
線性曲線（預設）：
輕壓 → 細線
重壓 → 粗線
等比例回應
S 曲線（適合字體設計）：
輕壓 → 極細（髮絲線）
中等 → 跳到中等粗細
重壓 → 在最大值處趨於平穩
中間範圍有更多控制
重壓曲線（適合素描）：
輕壓 → 已經是中等粗細
壓力變化影響極小
一致的線條粗細
/* Web equivalent: SVG-based pressure curve editor */
.pressure-curve-editor {
position: relative;
width: 200px;
height: 200px;
background: #1a1a2e;
border: 1px solid #333;
border-radius: 8px;
overflow: hidden;
}
.pressure-curve-editor .grid-line {
stroke: #ffffff10;
stroke-width: 1;
}
.pressure-curve-editor .curve-path {
fill: none;
stroke: #5ce1e6;
stroke-width: 2;
stroke-linecap: round;
}
.pressure-curve-editor .control-point {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: grab;
position: absolute;
transform: translate(-50%, -50%);
box-shadow: 0 0 8px rgba(92, 225, 230, 0.5);
}
.pressure-curve-editor .control-point:active {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.2);
}
/* Fill below the curve */
.pressure-curve-editor .curve-fill {
fill: rgba(92, 225, 230, 0.08);
}
觸控介面的圖層管理
Procreate 解決了在觸控螢幕上管理數十個圖層的挑戰。圖層面板使用滑動手勢而非微小的按鈕，合併則是在兩個圖層列之間進行物理捏合。
圖層面板
┌─────────────────────────────────┐
│ Layers [+] │
│ │
│ ┌─────────────────────────────┐ │
│ │ ☑ Layer 8 (Details) N │ │ ← 混合模式：Normal
│ │ [縮圖預覽] 100% │ │ ← 不透明度滑桿
│ ├─────────────────────────────┤ │
│ │ ☑ Layer 7 (Highlights) S │ │ ← 混合模式：Screen
│ │ [縮圖預覽] 80% │ │
│ ├─────────────────────────────┤ │
│ │ ☑ Layer 6 (Shadows) M │ │ ← 混合模式：Multiply
│ │ [縮圖預覽] 60% │ │
│ ├─────────────────────────────┤ │
│ │ ☑ Layer 5 (Color) N │ │ ← 向左滑動：鎖定／刪除
│ │ [縮圖預覽] 100% │ │ ← 向右滑動：多選
│ ├─────────────────────────────┤ │ ← 捏合這兩個：合併
│ │ ☑ Layer 4 (Line art) N │ │
│ │ [縮圖預覽] 100% │ │
│ └─────────────────────────────┘ │
│ │
│ 背景顏色：[■ #f5f0e8] │
└─────────────────────────────────┘
手勢：
點擊縮圖 → 切換可見性
點擊圖層名稱 → 重新命名
向左滑動 → 鎖定 | 複製 | 刪除
向右滑動 → 選取以進行多圖層操作
雙指點擊 → 切換 Alpha 鎖定
長按 + 拖曳 → 重新排序
捏合兩列 → 合併圖層
捏合合併手勢特別優雅。它將兩個東西擠在一起的物理隱喻，對應到合併圖層的數位操作上。沒有確認對話框——只需捏合，圖層就合併了。復原永遠只需雙指點擊即可。
Animation Assist
Procreate 的 Animation Assist 將圖層堆疊轉變為逐格時間軸。這個設計重複使用了既有概念（圖層即幀），而不是引入全新的範式。
ANIMATION ASSIST 模式
┌─────────────────────────────────────────┐
│ │
│ [帶有洋蔥皮效果的畫布] │
│ │
│ 當前幀以完整不透明度顯示 │
│ 前一幀以 25% 顯示（紅色調） │
│ 下一幀以 25% 顯示（綠色調） │
│ │
├─────────────────────────────────────────┤
│ ◀ ▶ ● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ▶▶ │
│ ↑ ↑ ↑ │
│ 播放 當前幀 FPS: 12 │
│ （已高亮） │
│ │
│ [Onion Skin] [Settings] [Add Frame] │
└─────────────────────────────────────────┘
洋蔥皮設定
顯示幀數： 前 1-4 幀，後 1-4 幀
不透明度： 每幀 10%-80%
顏色： 紅色（過去）／綠色（未來）
混合： Normal 或 Multiply
洋蔥皮效果使用紅色表示過去的幀，綠色表示未來的幀——這是從傳統動畫透光桌借鏡的慣例。在紙上學習動畫的藝術家會立即理解這套系統。
匯出工作流程
Procreate 支援匯出為所有主流格式，但匯出 UI 是圍繞藝術家的意圖而非技術規格來設計的。
分享選單（基於意圖）
┌─────────────────────────────────────────┐
│ 分享為... │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Procreate│ │ PSD │ │ PDF │ │
│ │ .pro │ │Photoshop│ │ 列印 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ JPEG │ │ PNG │ │ TIFF │ │
│ │ 分享 │ │ 網頁 │ │ 歸檔 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ 動畫格式： │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ GIF │ │ MP4 │ │ PNG │ │
│ │ 動畫 │ │ 影片 │ │ 序列圖 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────┘
PSD 匯出會保留圖層、混合模式和遮罩——這意味著 Procreate 可以作為工作流程中的起始工具，最終在桌面上完成。這種互通性是一項設計選擇，它尊重藝術家現有的工作流程，而不是要求他們放棄它。
結論
Procreate 的成功在於它拒絕了一個假設：專業創作工具需要專業創作工具的介面。Savage Interactive 沒有把 Photoshop 積累了 30 年的 UI 塞進觸控螢幕，而是去思考在玻璃上繪畫究竟應該是什麼感覺，然後從這個問題向外延伸來構建一切。
手勢語法是基礎。每一個決策——從手掌誤觸排除到圖層捏合合併到 QuickShape——都服務於一個原則：介面應該消失，讓藝術家獨自面對畫布。低於 7 毫秒的延遲不是規格表上的數字；它是「在螢幕上畫圖」和「畫圖」之間的差別。
最適合學習： 如何為創作工具設計基於手勢的互動系統。研究雙指／三指語法的一致性、壓力曲線編輯器作為讓複雜參數變得具體可感的範例，以及圖層管理如何在不失去專業能力的前提下為觸控重新設計。
常見問題
Procreate 如何實現低於 7 毫秒的觸控筆延遲？
Procreate 使用 Apple 的預測觸控 API 結合 Metal 渲染，將觸控筆接觸到像素回應之間的間隔降到最低。應用程式根據速度和角度預測筆觸走向，在實際觸控資料到達之前就渲染預測的像素。當實際資料到達時，預測會被無縫校正。這個預測管線結合 ProMotion 的 120Hz 更新率，創造出零延遲的錯覺。
為什麼 Procreate 拒絕訂閱模式？
Savage Interactive 的立場是，創作工具應該被擁有，而非租用。一次性購買在藝術家和工具之間建立了一種不同的關係——一種擁有而非義務的關係。這個決定也意味著 Procreate 必須在每次重大更新中提供足夠的價值來推動新銷售，而不是依賴現有用戶的經常性收入。結果是每次更新都真正推進了工具的發展，而非漸進式的功能分級。
QuickShape 是如何運作的？
當藝術家畫完一個形狀並在筆觸末端長按觸控筆時，Procreate 會辨識幾何形狀並將其校正為乾淨的版本。一個歪斜的圓會變成完美的圓。一條粗糙的線會變得完美筆直。一個潦草的矩形會校正為直角。長按的持續時間是觸發條件——它區分了有意的形狀繪製和快速素描。原始筆觸保留在復原歷史中，因此藝術家隨時可以回到原來的樣子。
Procreate 如何處理 Apple Pencil 的傾斜度和方位角？
Procreate 將觸控筆的傾斜角度和旋轉方位角對應到筆刷參數。以陡峭角度握持的鉛筆筆刷會產生細緻、精確的線條。同一支筆刷以淺角度握持會產生寬廣的陰影筆觸——就像真正的鉛筆一樣。每支筆刷都可以透過筆刷引擎設定自訂其對傾斜度和方位角的回應方式，讓藝術家能創造出行為如同特定實體媒材的工具。
Procreate 的圖層系統與桌面應用有什麼不同？
Procreate 的圖層系統擁有與桌面應用相同的功能——混合模式、不透明度、Alpha 鎖定、剪裁遮罩、群組——但互動模型完全基於手勢。沒有右鍵選單或微小的圖示按鈕。滑動、捏合、點擊和長按取代了每一個傳統控制項。最大圖層數受限於畫布解析度和裝置記憶體，Procreate 會在建立新畫布時就預先告知。