Bluesky:设计算法透明性
“我们认为不应该有一个统治一切的算法。算法应该是你可以选择的东西,就像选择电台一样。” — Jay Graber, CEO
Bluesky 是第一个将算法选择作为核心用户体验基本要素的社交网络,而非将其藏在三层深的设置菜单中。它基于 AT Protocol(Authenticated Transfer Protocol)构建,将身份、数据和算法分离为独立的层级——然后将这种架构以面向用户的设计呈现出来。你不只是使用 Bluesky 的信息流,而是浏览一个由任何人构建的信息流市场,固定你喜欢的那些,并通过一次点击在它们之间切换。这不是技术上的新奇之处,而是一种根本不同的社交媒体交互模型。
Bluesky 之所以成为一项设计研究而非仅仅是一个工程项目,在于协议层面的决策体现为界面模式。身份可移植性、自定义信息流、可组合式内容审核和标签服务都是协议功能,它们需要全新的用户体验范式。Bluesky 不得不为之前没有任何社交网络向用户暴露过的概念发明交互模式。
为什么 Bluesky 很重要
Bluesky 在不到一年的时间里从零增长到 2500 万用户,证明了当界面工作做得足够好时,协议层面的设计选择可以转化为消费级的用户体验。
主要成就: - 2500 万以上用户,没有算法锁定 - 自定义信息流市场,拥有数千个社区构建的算法 - 第一个支持可移植身份的主流社交网络(迁移你的账户,保留你的关注者) - 可组合式内容审核:用户选择自己的审核服务 - 从第一天起就开源客户端和信息流生成器 - AT Protocol 被 Bluesky 之外的第三方应用采用
核心要点
- 让基础架构选择可见 - Bluesky 将协议架构作为面向用户的功能呈现;信息流选择、身份可移植性和标签系统不是设置选项——它们是主要交互方式
- 信息流即产品,创造生态系统价值 - 通过让任何人构建和发布信息流算法,Bluesky 将内容策展从公司垄断转变为社区市场
- 内容审核是一个设计问题,而不仅仅是政策问题 - 可组合式审核服务让用户选择自己的内容边界,而非强制推行单一的企业标准
- 身份可移植性需要新的心智模型 - 用户需要理解句柄、DID 和服务器迁移;Bluesky 的设计工作通过基于域名的身份使这些概念变得平易近人
- 熟悉的模式降低了采用门槛 - 尽管协议层面有着根本性的差异,核心的发帖和时间线体验有意借鉴了 Twitter 已建立的模式
核心设计原则
1. 信息流选择作为主导航
Bluesky 最激进的用户体验决策是将信息流选择置于导航的最顶层。信息流不是你配置一次的设置——它们是你全天切换的标签页。
传统社交媒体
┌─────────────────────────────────────────────┐
│ [首页] [发现] [通知] │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 一个算法决定一切 │ │
│ │ 你看到的是我们展示给你的 │ │
│ │ "为你推荐" = 黑箱 │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
BLUESKY 的方式
┌─────────────────────────────────────────────┐
│ [关注] [发现] [低频发帖者] │
│ [科学] [艺术] [热门] [+ 添加信息流] │
│ ← 水平滑动切换 → │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 每个标签页 = 不同的算法 │ │
│ │ 你选择哪些出现 │ │
│ │ 任何人都可以构建新的 │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
设计洞察: 信息流标签使用了与浏览器标签页或电视频道相同的心智模型。用户已经理解了”切换以查看不同内容”。Bluesky 只是将这一模式应用到了算法上。
/* Feed tab bar: horizontal scroll with active indicator */
.feed-tabs {
display: flex;
overflow-x: auto;
scrollbar-width: none;
gap: 4px;
padding: 8px 16px;
border-bottom: 1px solid var(--border-color);
}
.feed-tabs::-webkit-scrollbar {
display: none;
}
.feed-tab {
flex-shrink: 0;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
background: transparent;
border: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.feed-tab:hover {
background: var(--hover-bg);
}
.feed-tab.active {
color: var(--text-primary);
font-weight: 600;
background: var(--active-bg);
}
/* Active indicator underline */
.feed-tab.active::after {
content: "";
display: block;
height: 3px;
background: var(--accent-blue);
border-radius: 1.5px;
margin-top: 6px;
}
2. 基于域名的身份作为信任信号
Bluesky 的句柄系统允许用户将句柄设置为他们控制的任何域名。纽约时报的记者可以是 journalist.nytimes.com。开发者可以是 alice.dev。这将 DNS——不可见的互联网基础设施——变成了可见的信任信号。
句柄系统
默认: @alice.bsky.social
自定义域名: @alice.dev
组织: @journalist.nytimes.com
@researcher.mit.edu
用户看到的:
┌─────────────────────────────────────────────┐
│ ┌────┐ │
│ │ AV │ Alice Chen │
│ └────┘ @alice.dev │
│ ↑ │
│ 域名就是验证。 │
│ 不需要蓝色认证标志。 │
│ 如果你控制域名, │
│ 你就拥有身份。 │
└─────────────────────────────────────────────┘
对比 TWITTER/X 验证:
- 每月支付 $8 获得认证标志
- 认证标志意味着"付费"而非"已验证"
- 没有身份的加密证明
- 平台控制认证标志
对比 BLUESKY 验证:
- 将句柄设置为你的域名
- DNS TXT 记录证明所有权
- 无需付费,无需平台审批
- 你控制证明
为什么这对设计很重要: Bluesky 彻底消除了”认证徽章”设计难题。句柄本身就是验证。设计师不需要创建徽章层级体系、解释徽章的含义,或处理用户对付费验证和认证验证之间的困惑。
3. 可组合式内容审核作为用户选择
Bluesky 不是由一个审核团队做出所有内容决策,而是让用户订阅按照不同标准标记内容的审核服务(称为”标签服务”)。
传统内容审核
平台 → 单一政策 → 应用于所有用户
用户可以: "减少展示" / "屏蔽" / "举报"
BLUESKY 的可组合式内容审核
┌──────────────┐
│ 标签服务: A │ → 标记 NSFW 内容
│ 标签服务: B │ → 标记虚假信息
│ 标签服务: C │ → 标记剧透
│ 标签服务: D │ → 社区特定规则
└──────────────┘
↓
用户订阅他们信任的标签服务
↓
被已订阅标签服务标记的内容
会被: 隐藏 / 警告 / 标注
↓
用户控制: 哪些标签服务,什么操作
设置界面:
┌─────────────────────────────────────────────┐
│ 内容审核 │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ Bluesky 官方审核(默认) │ │
│ │ ✓ 已订阅 │ │
│ │ 标签: NSFW, 垃圾信息, 冒充 │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 科学社区标签 │ │
│ │ ✓ 已订阅 │ │
│ │ 标签: 未经验证的声明, 预印本 │ │
│ └─────────────────────────────────────┘ │
│ │
│ 对于每种标签类型: │
│ [隐藏] [警告] [显示] [忽略] │
└─────────────────────────────────────────────┘
值得借鉴的设计模式
信息流市场发现
信息流市场是 Bluesky 的协议架构变成消费者功能的地方。用户浏览、预览和固定信息流,就像在应用商店中浏览应用一样。
信息流市场
┌─────────────────────────────────────────────┐
│ 发现新的信息流 [🔍] │
│ │
│ 当前热门 │
│ ┌──────────────────────────┐ │
│ │ 🔬 科学 │ │
│ │ 关于科学的帖子 │ │
│ │ by @science-feed.bsky │ │
│ │ ♥ 45.2K 喜欢 │ │
│ │ [预览] [+ 添加信息流] │ │
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 🎨 艺术信息流 │ │
│ │ 精选艺术帖子 │ │
│ │ by @art.bsky.social │ │
│ │ ♥ 32.1K 喜欢 │ │
│ │ [预览] [+ 添加信息流] │ │
│ └──────────────────────────┘ │
│ │
│ 分类: │
│ [新闻] [科技] [艺术] [科学] [体育] │
└─────────────────────────────────────────────┘
设计决策: 信息流卡片显示创建者的句柄、点赞数作为社交证明,以及承诺前的预览按钮。这借鉴了用户已经熟悉的应用商店模式,降低了理解这一新概念的认知成本。
/* Feed card in marketplace */
.feed-card {
padding: 16px;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--card-bg);
transition: box-shadow 0.15s ease;
}
.feed-card:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.feed-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.feed-card-avatar {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--accent-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.feed-card-meta {
font-size: 13px;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.feed-card-actions {
display: flex;
gap: 8px;
}
.btn-add-feed {
padding: 6px 16px;
border-radius: 20px;
background: var(--accent-blue);
color: white;
border: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.btn-preview {
padding: 6px 16px;
border-radius: 20px;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-color);
font-size: 13px;
cursor: pointer;
}
线程与引用帖子的对话设计
Bluesky 的线程可视化解决了一个 Twitter 从未完全解决的设计问题:在不让读者迷失位置的情况下展示对话上下文。回复线程通过连接线缩进显示,引用帖子则渲染为具有清晰视觉层级的嵌入卡片。
/* Thread connector lines */
.thread-reply {
position: relative;
padding-left: 52px; /* avatar width + gap */
}
.thread-reply::before {
content: "";
position: absolute;
left: 20px; /* center of parent avatar */
top: -8px;
bottom: 0;
width: 2px;
background: var(--border-color);
}
/* Quote post embed */
.quote-embed {
margin-top: 8px;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--card-bg);
font-size: 14px;
}
.quote-embed-author {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 13px;
}
.quote-embed-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
}
.quote-embed-handle {
color: var(--text-tertiary);
}
总结评价
Bluesky 是第一个证明协议层架构可以成为面向消费者的设计功能的社交网络。信息流选择作为主导航、域名句柄作为信任信号、以及可组合式内容审核作为用户偏好,这些模式都源于 AT Protocol 的关注点分离。设计团队的成就不在于协议本身——而在于让”算法选择”和”身份可移植性”等概念变得像切换标签页一样自然。对于设计师来说,Bluesky 证明了最困难的用户体验问题不在于像素,而在于让不可见的基础设施变得可被人类理解。
最适合学习的方面: 将后端架构作为用户体验功能呈现、抽象概念的市场模式、无需徽章系统的信任信号设计,以及超越”允许”和”删除”二元对立的内容审核用户体验。
常见问题
Bluesky 的信息流系统与 Twitter 的”为你推荐”标签有何不同?
Twitter 在逆序时间线之外提供一个专有算法。Bluesky 允许任何人构建和发布信息流算法,用户可以将多个信息流固定为可切换的标签页。一个用户可能同时拥有”关注”(时间顺序)、”科学”(主题过滤)、”低频发帖者”(展示很少发帖的账户)和”热门”(趋势),所有这些都可以通过滑动标签页访问。每个信息流由不同的开发者或社区构建。
什么是 DID,为什么设计师应该关注它?
DID(去中心化标识符)是一种永久身份,即使用户更改句柄或服务器也会持续存在。设计师关注它是因为它实现了诸如基于域名的验证(你的句柄就是你的域名)、不丢失关注者的服务器迁移以及跨应用身份等模式。用户体验的挑战在于让这一切变得无感——用户设置自定义句柄后”就能用了”,无需理解背后的加密基础设施。
可组合式内容审核在实践中如何运作?
用户订阅”标签服务”——使用 NSFW、剧透或虚假信息等标签标记内容的服务。每个用户控制他们信任哪些标签服务,以及对每个标签采取什么操作(隐藏、警告、显示)。这意味着家长和研究人员可以在同一平台上使用不同的内容边界,而双方都没有”错”。设计挑战在于让这感觉像是一种偏好设置,而不是一项繁琐的任务。
Bluesky 的信息流市场模式能应用于非社交产品吗?
当然可以。任何涉及内容策展的产品——新闻聚合器、电商、学习平台、音乐服务——都可以提供用户可选的算法。Bluesky 的关键模式是将算法视为可替换的、可见的组件,而非隐藏的基础设施决策。即使是仪表盘和分析工具也可以使用这种基于标签页的选择模型,让用户在”为我定制”和”社区热门”视图之间选择。
Bluesky 如何解决新信息流的冷启动问题?
信息流创建者可以将其信息流设置为公开展示在市场中,附带描述、预览和点赞数。热门信息流通过点赞和订阅数获得社交证明。新用户在入门引导过程中会看到一个精选的”发现信息流”页面,突出展示热门和类别相关的信息流。预览按钮让用户在提交之前查看示例内容,降低添加不良信息流的风险。