Ivory：源自 Tapbots 15 年匠心传承的趣味精准设计

“我们想打造一款自己都想用的 Mastodon 客户端。” — Mark Jardine, Tapbots

Ivory 诞生于 Tweetbot 的灰烬之中——2023 年 Twitter 终止了第三方API访问权限。但 Tapbots 并没有匆忙移植，这个由设计师 Mark Jardine 和开发者 Paul Haddad 组成的两人团队，将他们 15 年的时间线用户体验打磨成果重新构建在了一个全新的社交协议之上。最终成果是目前最流畅、响应最灵敏的 Mastodon 客户端：ProMotion 滚动毫无卡顿，流畅的 120fps 动画，以及一种让你查看时间线时如同打开一件心爱玩具般的个性体验。

核心要点

1. 个性属于美术与声音，而非字体排版 - Ivory 完全使用系统字体，将所有品牌识别度集中在 3D 吉祥物插画、触觉反馈和独特的音效提示上
2. 15 年的迭代积累产生复利效应 - Tapbots 从最初的 Tweetbot 起就不断打磨时间线界面，这些积累的匠心知识造就了一款每次滚动、点击和滑动都感觉浑然天成的应用
3. 可定制主题尊重用户偏好 - Ivory 并非强加单一配色方案，而是提供多种主题（浅色、深色、OLED 纯黑），并支持用户自选强调色，使设计系统具有参数化特性而非固定不变
4. 声音设计是一个界面层级 - 下拉刷新、发帖和收藏各有独特的音效签名，无需视觉注意力即可提供操作反馈
5. 原生 ProMotion 动画区分优秀与卓越 - 从底层为 120fps 构建，每一个转场和滚动都针对 ProMotion 显示屏调优，而非事后改造

Ivory 的重要意义

Ivory 展示了当一对设计师-工程师搭档花费超过十年时间打磨单一交互范式时会产生什么样的成果。大多数 Mastodon 客户端虽然称职但平淡无奇，而 Ivory 承载着每一代 Tweetbot 迭代的智慧积累——每一次滚动优化、每一次时间线渲染改进、每一个被添加、测试后保留或舍弃的手势。

核心成就： - 证明了两人团队可以打造出整个社交协议的标杆客户端 - 将 15 年的时间线用户体验积累从 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 纯黑模式。

对于 Web 实现，同样的模式通过 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 同时实现了强烈的品牌识别度和无缝的易用性。

15 年迭代的经验难以复制，但值得理解：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 的专题报道