16個設計案例研究：我融入自身工作的四大模式

我在四個月內發表了16篇深度設計案例研究。每篇研究都始於調查——理解卓越產品如何解決特定的設計挑戰。這些研究產出的不僅僅是分析。四個跨領域模式浮現出來，直接改變了我設計和建構自己產品的方式，包括 blakecrosley.com。

重點摘要

在分析了 Arc、Stripe、Linear、Raycast、Notion 及另外11個產品後，我歸納出四個在最強設計團隊中反覆出現的模式：約束驅動設計（刻意的限制產生獨特的產品）、字型優先層級（讓字體大小和粗細完成通常由色彩承擔的工作）、平台原生投入（使用原生 API 而非跨平台抽象層），以及文件即產品（以產品級的嚴謹態度對待文件）。每個模式都直接影響了我的工作：我的網站使用單色色彩系統、系統字型，以及一套粗獷主義設計方法，這些全都可以追溯到這些研究。

案例合集

開發者工具

• Warp — 基於區塊的終端架構，在 CLI 的強大功能與現代 UX 之間架起橋樑
• Vercel — 深色模式的典範、分頁狀態指示器、骨架載入狀態
• Linear — 讓操作感覺即時的樂觀 UI、一切以鍵盤優先
• Raycast — 50毫秒法則、動作面板、擴充套件生態系設計
• Stripe — 文件即產品、透過透明度建立信任
• Figma — 多人協作即時感知、情境感知面板、約束系統

創作工具

• Framer — 視覺化響應式設計、屬性控制、斷點系統
• Notion — 區塊架構、斜線指令、彈性資料庫
• Craft — 原生優先的跨平台、巢狀文件結構
• Bear — 字型優先設計、行內標記、資訊密度

iOS 卓越之作

• Arc — 空間架構、分割檢視、命令列模式
• Things — 延遲排程、快速輸入、自然語言輸入
• Flighty — 航班狀態的15種智慧狀態、Live Activities 整合
• Halide — 智慧 UI 啟用、手勢操控
• Superhuman — 100毫秒法則、命令面板訓練、以實作為基礎的新手引導

AI 原生

• Perplexity — 引用前置的回答、串流回應階段

每篇研究涵蓋的內容

每篇案例研究都遵循一致的結構：

1. 為什麼值得關注 — 是什麼讓這個產品值得研究
2. 核心理念 — 驅動設計決策的設計原則
3. 模式庫 — 具體、可複用的模式與實作細節
4. 視覺設計系統 — 色彩、字型、間距、動畫
5. 值得借鏡的經驗 — 可直接應用於您工作的具體行動方案

改變我工作方式的四大模式

模式一：約束驅動設計

Linear 選擇了鍵盤優先的互動方式。Notion 選擇了基於區塊的架構。Arc 選擇了垂直分頁。每個產品都做出了一項刻意的約束，這項約束消除了大量設計決策，同時產生了獨特的識別度。

我學到的： 約束比無限靈活性能產出更好的產品。Linear 不需要浪費工程時間去爭論滑鼠優化還是鍵盤優化的工作流程——這個約束只決定了一次，此後的每個功能都建立在這個基礎之上。單一約束在數百個功能上的複合效應所產生的一致性，是任何設計系統文件都無法達到的。

我採用的做法： 我的網站在三項刻意的約束下運作： 1. 無色彩 — 整個視覺層級使用黑底白字，分為四個不透明度層級。這個約束消除了每一個「連結該用什麼顏色？」的決策。 2. 無淺色模式 — 一種模式，精心設計，而非兩種模式各做得差強人意。 3. 無自訂字型 — 完全使用系統字型。這個約束帶來零字型載入延遲和平台原生的可讀性。

每個約束都縮減了決策空間，同時產生了獨特的美學。這些約束協同運作：無色彩＋無淺色模式＋系統字型＝一個粗獷主義的基底，使字型成為主要的層級工具。¹

模式二：字型優先層級

Bear 的設計將字型作為主要的視覺層級工具。字體大小、粗細和間距傳達結構，而色彩的使用保持最低限度。Linear 遵循同樣的模式：其密集的專案管理介面依賴字體粗細（半粗體用於活躍項目，一般粗細用於非活躍項目）和微妙的大小差異，而非以色彩編碼的狀態指示器。

我學到的： 依賴字型建構層級的產品會產生更簡潔、更具可及性的介面。依賴色彩的層級對8%有色覺辨認障礙的男性會失效，在低對比螢幕上也會劣化。基於字型的層級則具有普適性。

我採用的做法： 我的13級字型比例結合四個不透明度層級，提供了52種可能的組合。實際上，我穩定使用約15種。字型比例承擔了大多數網站交給色彩的層級工作。標題使用 --font-size-display（80px）搭配 --font-weight-bold（700）以及完全不透明度。中繼資料使用 --font-size-xs（12px）搭配 --font-weight-normal（400）以及40%不透明度。這些極端值之間的對比所傳達的層級感，與任何色彩系統一樣清晰。²

模式三：平台原生投入

Things、Flighty、Halide 和 Craft 投入於平台特有的功能，而非建構跨平台的最低公約數體驗。Things 使用 iOS 原生手勢（滑動排程、長按快速輸入）。Flighty 使用 Live Activities 在鎖定畫面上顯示航班狀態。Halide 使用 Camera API 搭配自訂 Metal 著色器來實現即時直方圖顯示。

我學到的： 使用者會以忠誠度和願意支付溢價來回報平台原生的投入。跨平台框架（React Native、Flutter）以犧牲使用者體驗為代價來優化開發者效率。這個取捨對某些產品來說是合理的，但我研究中能收取溢價的產品，全都投入了原生 API。

我採用的做法： 我所有的 iOS 專案都專門針對 iOS 26+，使用 SwiftUI、SwiftData 和平台原生 API。Ace Citizenship 使用原生測驗模式。Banana List 使用 iCloud 同步和 SwiftData 持久化。我不為 Android 開發，也不使用跨平台框架。這個約束（僅限 iOS）產出的應用程式感覺是原生的，因為它們本來就是原生的。³

模式四：文件即產品

Stripe 以與生產程式碼同等的嚴謹態度對待文件。文件是互動式的（即時 API 範例）、可搜尋的（帶篩選器的全文檢索）、有版本控制的（按 API 版本區分），並且由專職工程師維護。結果是：Stripe 的文件作為產品介面運作，獨立於支付 API 本身驅動用戶採用。

我學到的： 文件不是成本中心——它是成長引擎。Notion 的範本庫和 Figma 的社群資源服務於相同目的：將文件從額外開銷轉化為用戶獲取管道。這個模式延伸到開發者工具：Linear 的更新日誌同時兼作產品行銷工具。

我採用的做法： 我的 .claude/ 基礎設施將文件視為一級產出物。MEMORY.md 檔案記錄了涵蓋錯誤、決策和模式的54個條目。49份交接文件在不同工作階段之間保存了上下文。這些文件不僅僅是給人類讀者看的——AI 代理在工作階段開始時會讀取這些文件，因為上下文更豐富，所以能產出更好的程式碼。Stripe 的洞見（文件＝產品）即使在「使用者」是 AI 的情況下也同樣適用。⁴

改變我設計方法的產品

研究 Linear 改變了我對設計基本原則的思考方式。Linear 看起來不像 Airbnb 或 Apple 行銷頁面那樣「經過設計」。Linear 看起來是「經過工程化」的：密集、資訊豐富、鍵盤驅動，每個像素都服務於功能目的。美感來自精確，而非裝飾。

在研究 Linear 之前，我將好設計與視覺豐富性聯繫在一起——漸層、插圖、自訂字型、色彩多樣性。在研究 Linear 之後，我將好設計與功能精確性聯繫在一起——一致的間距、清晰的字型層級、快速的互動，以及零裝飾元素。

我的網站設計理念直接源自 Linear 的研究。絕對黑色的背景、基於不透明度的層級、系統字型、150毫秒的懸停過渡效果——每個決定都映射了我從研究 Linear 建構介面方式中提煉出的原則。

這個啟示是：深入研究產品會改變您的思維方式，而不僅僅是增加您的知識。十六篇淺層的評論只會產出十六份要點列表。十六篇深入的研究則產出了一套設計哲學。⁵

瀏覽完整指南

這些研究是設計原則指南的一部分，該指南還涵蓋了格式塔原則、視覺層級、字型學和色彩理論等基礎概念。

這些案例研究將這些原則付諸實踐——展示真實產品如何運用設計基本原則來解決特定問題。

查看設計原則指南

參考文獻