Ivory：源自 Tapbots 十五年工藝傳承的趣味精準

「我們想打造一款自己也想用的 Mastodon 客戶端。」——Mark Jardine，Tapbots

Ivory 誕生於 Tweetbot 的灰燼之中——2023 年 Twitter 封殺了第三方 API 存取權限。但 Tapbots 並非倉促移植，這個由設計師 Mark Jardine 和開發者 Paul Haddad 組成的兩人團隊，將他們十五年來對時間軸使用者體驗的精煉，重新為全新社交協定而打造。成果便是目前最流暢、回應最靈敏的 Mastodon 客戶端：ProMotion 滾動毫無卡頓、流暢的 120fps 動畫，以及一種讓查看時間軸如同打開心愛玩具般的個性魅力。

重點摘要

1. 個性應展現在藝術與聲音中，而非字體排印 - Ivory 完全使用系統字體，將所有品牌識別導入 3D 吉祥物插畫、觸覺回饋和獨特的音效提示
2. 十五年的迭代會產生複利效應 - Tapbots 自初代 Tweetbot 起便不斷精煉時間軸介面，這些累積的工藝知識造就了一款每次滾動、點擊和滑動都渾然天成的應用程式
3. 可自訂主題尊重使用者偏好 - Ivory 不強制單一配色方案，而是提供多種主題（淺色、深色、OLED 純黑），並讓使用者自選強調色，使設計系統成為參數化而非固定的
4. 聲音設計是一個介面層 - 下拉重新整理、發布貼文和收藏各有獨特的音效特徵，無需視覺注意即可提供回饋
5. 原生 ProMotion 動畫區分優秀與卓越 - 從底層即為 120fps 打造，每個轉場和滾動都針對 ProMotion 顯示器調校，而非事後補強

為何 Ivory 值得關注

Ivory 展示了當一對設計師與工程師花費超過十年精煉單一互動範式時會產生什麼成果。大多數 Mastodon 客戶端能力尚可但平淡無奇，而 Ivory 承載了每一代 Tweetbot 迭代的累積智慧——每一次滾動優化、每一次時間軸渲染精煉、每一個被新增、測試後保留或捨棄的手勢。

關鍵成就： - 證明兩人團隊能為整個社交協定打造出標竿客戶端 - 將十五年的時間軸使用者體驗精煉從 Twitter 遷移至 Mastodon，且未犧牲工藝品質 - 確立了應用程式個性（吉祥物、聲音、觸覺）能與平台原生介面慣例共存 - 實現了大多數擁有更大團隊的應用程式都無法匹敵的 ProMotion 原生 120fps 滾動

核心設計原則

1. 透過藝術而非裝飾展現個性

Ivory 的視覺識別將異想天開的 3D 吉祥物藝術——一隻身處太空的卡通大象，配有火箭和行星——與精心打造的應用程式介面相結合。行銷網站以深色搭配宇宙意象，而應用程式本身則乾淨且系統化。

這種劃分是刻意的。吉祥物和太空意象在行銷網站、App Store 列表和社群媒體上建立情感連結與品牌識別。在應用程式內部，介面是純粹功能性的——系統字體、標準控制元件、適合平台的資訊密度。所有個性來自圖示設計、動畫和聲音，而非字體排印或色彩上的新奇。

行銷頁面反映了這一哲學：沒有 CSS 自訂屬性、沒有設計系統代幣、沒有框架。只有精心放置的圖像和乾淨的系統字體。設計系統存在於應用程式中，而非網站上。

2. 時間軸作為核心Inter面

無限滾動時間軸是核心使用者體驗模式。其他一切——撰寫、個人檔案、設定——都次於閱讀流程。這個層級結構歷經每一版 Tweetbot 到現在的 Ivory 不斷精煉，產出了一個流暢到難以言喻、但一用便能立即感受的時間軸。

┌──────────────────────────────────────────────────┐
│  ↓ 下拉重新整理（伴隨音效提示）                      │
├──────────────────────────────────────────────────┤
│  🐘 使用者名稱                            2 分鐘前 │
│  貼文內容以適當的行距和可讀的密度                      │
│  自然流動...                                      │
│  ♡ 12    ↺ 4    ⤴ 分享                           │
├──────────────────────────────────────────────────┤
│  🐘 另一位使用者                         15 分鐘前  │
│  時間軸就是產品。其他一切                             │
│  都是為了支持閱讀體驗而存在。                         │
│  ♡ 8     ↺ 2    ⤴ 分享                           │
├──────────────────────────────────────────────────┤
│  滾動以 120fps 持續進行...                         │
└──────────────────────────────────────────────────┘

時間軸的效能不僅是技術成就——更是一項設計決策。會卡頓或掉幀的時間軸會中斷閱讀流程，打破連續串流的沉浸感。Tapbots 將 120fps 滾動視為設計要求，而非優化目標。

3. 聲音設計作為Inter面

Tapbots 的應用程式為下拉重新整理、發布貼文、收藏和轉發都設有獨特聲音。這些音效提示在愉悅感之外更具功能性：它們在使用者無需看螢幕的情況下確認操作成功。下拉重新整理的聲音與重新整理失敗的聲音不同。發布貼文有令人滿足的確認音效。收藏則產生微妙的點擊聲。

這個音訊層與支援觸覺回饋的裝置協同運作。聲音與觸覺的結合創造了一種實體般的互動感受，強化了 Tapbots 長久以來的設計原則：應用程式應該感覺像是實體物品。

4. 參數化主題系統

Ivory 不強制單一視覺識別。使用者可從多種應用程式主題中選擇——淺色、深色和 OLED 純黑——並可自訂強調色。這意味著設計上刻意不存在單一的「Ivory 配色方案」。底層架構是參數化的：顏色按角色定義（背景、表面、強調、文字），並在執行時根據使用者偏好解析。

這種方法體現了對以下事實的尊重：社交時間軸應用程式常駐使用者主畫面，每天被開啟數十次。色彩需要符合使用者的審美，而非設計師的作品集。

5. 純原生，不妥協

Ivory 完全使用原生平台能力為 iOS 和 macOS 打造。沒有 Electron、沒有 React Native、沒有跨平台抽象層。這份堅持體現在每一個互動中：應用程式回應系統動態字體設定、遵循平台無障礙功能、整合 ShareSheet 和 Shortcuts，並在每種裝置尺寸上使用感覺正確的原生導航模式。

字體排印的選擇強調了這份承諾。字體堆疊純粹採用系統字體：-apple-system, helvetica-neue, helvetica, arial, sans-serif。零自訂字體。在 Apple 裝置上，這會解析為 San Francisco——與每個原生系統元素相同的字體，確保 Ivory 感覺像是平台的無縫延伸，而非第三方覆蓋層。

可遷移的模式

Ivory 在個性表達上的方法是最具遷移性的模式：投資於獨特的藝術、聲音和動畫，而非自訂字體排印或不尋常的配色方案。這種策略在維持平台原生可用性的同時，創造了強烈的品牌識別。

主題系統展示了如何建構可自訂的設計基礎：

struct AppTheme {
    let backgroundColor: Color
    let surfaceColor: Color
    let accentColor: Color
    let textPrimary: Color
    let textSecondary: Color
}

static let defaultTheme = AppTheme(
    backgroundColor: .black,
    surfaceColor: Color(white: 0.1),
    accentColor: Color(hex: "6C63FF"),  // Purple-blue default
    textPrimary: .white,
    textSecondary: Color(white: 0.8)
)

關鍵洞察在於主題結構定義的是角色，而非特定顏色。背景、表面、強調、文字——這些角色保持不變，而其值根據使用者偏好改變。這種參數化方法讓 Ivory 能支援淺色、深色和 OLED 純黑模式，而無需維護三套獨立的設計系統。

對於網頁實作，相同的模式可透過 CSS 自訂屬性以最小開銷運作：

:root {
  /* System-native approach — let the platform carry the weight */
  --font-sans: -apple-system, helvetica-neue, helvetica, arial, sans-serif;
  --body-size: 18px;
  --body-line-height: 1.5;
}

字體排印比例刻意保持克制。最大的標題（H3）僅為 28px、字重 600。H1 和內文共用相同的 18px 大小——這是對典型層級的反轉，之所以有效是因為圖像而非文字承載了行銷敘事。在一個以 3D 大象藝術為主視覺的頁面上，標題不需要爭奪注意力。

設計啟示

Ivory 教導我們，品牌個性與平台原生設計並不衝突。透過將所有個性導入藝術、聲音和觸覺——並將字體排印、控制元件和導航交給平台——Tapbots 同時實現了強烈的品牌識別和無縫的可用性。

十五年迭代的經驗較難複製，但理解其意義很重要：Ivory 的品質來自累積的精煉，而非單次精彩的設計衝刺。關於滾動物理、點擊目標和動畫時序的每一個微小決定，都已在超過十年間經過數百萬使用者的測試。這種複利式的工藝優勢才是 Tapbots 真正的護城河。

在以時間軸為基礎的應用程式中，要避免透過視覺新奇來差異化的誘惑。時髦的字體排印、不尋常的配色方案和非標準的導航模式，都會在使用者每天造訪數十次的介面中製造摩擦。Ivory 證明了原生控制元件搭配獨特的個性元素（吉祥物、聲音、觸覺），比單純的視覺差異化能創造出更令人難忘且更易用的產品。

避免在行銷頁面堆砌功能。Ivory 的網站幾乎完全是視覺化的——3D 藝術和極簡文字。功能在應用程式中被發現，而非在登陸頁面上推銷。這種方法信任體驗的品質會在使用者下載應用程式後自行說服他們。

常見問題

Ivory 的設計有何獨特之處？

Ivory 透過個性而非偏離平台慣例的視覺手法來實現獨特性。俏皮的 3D 大象吉祥物、獨特的音效設計和令人滿足的觸覺回饋創造了強烈的品牌辨識度，而實際介面則使用系統字型、標準控制元件和平台原生導覽。最終成果是一款既有著鮮明 Tapbots 特色、又能完美融入 iOS 和 macOS 的應用程式。

Ivory 如何實現如此流暢的滾動效能？

Ivory 從一開始就是為 120fps ProMotion 顯示器打造的，而非事後改造。開發者 Paul Haddad 對效能的執著意味著每一項時間軸渲染最佳化、每一次滾動物理計算、每一條動畫曲線都經過專門針對高更新率顯示器的調校。純原生的開發方式（不使用跨平台框架）消除了通常會導致掉幀的抽象層。

設計師能從 Ivory 學到什麼？

最主要的啟示是，品牌個性可以透過美術、音效和觸覺來體現，而非僅靠字型和色彩。透過使用系統字型和標準控制元件，Ivory 維持了原生的可用性，同時大象吉祥物、自訂音效和令人滿足的觸覺回饋則塑造了令人難忘的品牌形象。這種方式比視覺上的新奇更為持久，因為它是順應平台更新而非與之對抗。

Ivory 的主題系統如何運作？

Ivory 並非強制使用固定的色彩方案，而是按角色（背景、表面、強調色、文字）定義色彩，讓使用者從多種主題中選擇——淺色、深色和 OLED 純黑——並可自訂強調色。這種參數化的方式意味著設計系統能適應使用者偏好，同時在所有組合中維持視覺一致性和適當的對比度。

為什麼 Tapbots 選擇兩人團隊的架構？

Mark Jardine（設計）和 Paul Haddad（開發）自最初的 Tweetbot 時代便以搭檔方式合作。這種緊密的協作消除了大型團隊的溝通成本，使設計決策能夠立即付諸實現。Jardine 對工藝的執著與 Haddad 對效能的執著相遇，打造出一款在美學品質和技術效能上都不容妥協的應用程式。

參考資料

• Ivory for Mastodon — Tapbots 官方產品頁面
• MacStories Review — Federico Viticci 對 Ivory 的深度評測
• TechCrunch Launch Coverage — Twitter 關閉 API 後 Ivory 上線的相關報導
• Texas Monthly Profile — Tapbots 團隊及其從 Tweetbot 轉型至 Ivory 的專題報導