Bluesky：設計演算法透明度
「我們不認為應該由一個演算法來主宰一切。演算法應該是你可以選擇的東西，就像選擇廣播電台一樣。」— Jay Graber，執行長
Bluesky 是第一個將演算法選擇權作為核心使用者體驗基本元素的社群網路，而非埋藏在三層設定深處的開關。它建構於 AT Protocol（Authenticated Transfer Protocol）之上，將身分、資料和演算法分離為獨立層級，然後將這種架構以使用者介面的形式呈現出來。你不只是使用 Bluesky 的動態消息，而是瀏覽一個由任何人建構的動態消息市集，釘選你喜歡的，並透過單次點擊在它們之間切換。這不是技術上的新奇玩意；這是社群媒體根本性不同的互動模式。
讓 Bluesky 成為設計研究而非僅僅是工程專案的原因在於，協議層級的決策體現為介面模式。身分可攜性、自訂動態消息、可組合式內容審核和標籤服務都是協議功能，而這些功能需要全新的使用者體驗範式。Bluesky 必須為先前社群網路從未向使用者展示過的概念發明互動模式。
為什麼 Bluesky 很重要
Bluesky 在不到一年的時間內從零成長到 2,500 萬用戶，證明了當介面設計做得夠好時，協議層級的設計選擇可以轉化為消費級的使用者體驗。
主要成就： - 超過 2,500 萬用戶，且無演算法鎖定 - 自訂動態消息市集，擁有數千個社群建構的演算法 - 第一個具備可攜式身分的主要社群網路（搬遷帳號，保留追蹤者） - 可組合式內容審核：使用者選擇自己的審核服務 - 從第一天起就開源客戶端和動態消息產生器 - AT Protocol 被 Bluesky 以外的第三方應用程式採用
核心要點
- 讓基礎設施選擇可見 — Bluesky 將協議架構以使用者可見的功能呈現；動態消息選擇、身分可攜性和標籤功能不是設定選項，而是主要互動方式
- 動態消息即產品，創造生態系統價值 — 透過讓任何人都能建構和發布動態消息演算法，Bluesky 將內容策展從公司壟斷轉變為社群市集
- 內容審核是設計問題，不僅是政策問題 — 可組合式審核服務讓使用者選擇自己的內容邊界，而非強加單一的企業標準
- 身分可攜性需要新的心智模型 — 使用者需要理解 handle、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 的 handle 系統讓使用者可以將其 handle 設定為自己控制的任何網域。紐約時報的記者可以是 journalist.nytimes.com。開發者可以是 alice.dev。這將 DNS——看不見的網路基礎設施——轉變為可見的信任訊號。
HANDLE 系統
預設： @alice.bsky.social
自訂網域： @alice.dev
組織： @journalist.nytimes.com
@researcher.mit.edu
使用者看到的：
┌─────────────────────────────────────────────┐
│ ┌────┐ │
│ │ AV │ Alice Chen │
│ └────┘ @alice.dev │
│ ↑ │
│ 網域本身就是驗證。 │
│ 不需要藍色勾勾。 │
│ 如果你控制該網域， │
│ 你就擁有該身分。 │
└─────────────────────────────────────────────┘
對比 TWITTER/X 驗證：
- 每月支付 $8 獲得勾勾
- 勾勾代表「已付費」而非「已驗證」
- 沒有身分的加密證明
- 平台控制勾勾
對比 BLUESKY 驗證：
- 將你的 handle 設定為你的網域
- DNS TXT 記錄證明所有權
- 無需付費，無需平台批准
- 你控制證明
為何這對設計很重要： Bluesky 完全消除了「驗證徽章」的設計難題。Handle 本身就是驗證。設計師不需要建立徽章層級制度、解釋徽章的含義，或處理使用者對付費驗證與真實驗證之間的困惑。
3. 可組合式內容審核作為使用者選擇
Bluesky 不是由一個審核團隊做所有內容決策，而是讓使用者訂閱根據不同標準標記內容的審核服務（稱為「labeler」）。
傳統內容審核
平台 → 單一政策 → 套用到所有使用者
使用者擁有：「減少顯示」/「封鎖」/「檢舉」
BLUESKY 的可組合式內容審核
┌──────────────┐
│ Labeler: A │ → 標記 NSFW 內容
│ Labeler: B │ → 標記不實資訊
│ Labeler: C │ → 標記劇透
│ Labeler: D │ → 社群特定規則
└──────────────┘
↓
使用者訂閱他們信任的 labeler
↓
被已訂閱 labeler 標記的內容
會被：隱藏 / 警告 / 標示
↓
使用者控制：哪些 labeler、什麼動作
設定介面：
┌─────────────────────────────────────────────┐
│ 內容審核 │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ Bluesky 內容審核（預設） │ │
│ │ ✓ 已訂閱 │ │
│ │ 標籤：NSFW、垃圾訊息、冒充 │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 科學社群標籤 │ │
│ │ ✓ 已訂閱 │ │
│ │ 標籤：未經驗證的聲明、預印本 │ │
│ └─────────────────────────────────────┘ │
│ │
│ 每種標籤類型： │
│ [隱藏] [警告] [顯示] [忽略] │
└─────────────────────────────────────────────┘
值得借鏡的設計模式
動態消息市集探索
動態消息市集是 Bluesky 的協議架構成為消費者功能的地方。使用者瀏覽、預覽和釘選動態消息，就像在應用程式商店瀏覽 app 一樣。
動態消息市集
┌─────────────────────────────────────────────┐
│ 探索新動態消息 [🔍] │
│ │
│ 目前熱門 │
│ ┌──────────────────────────┐ │
│ │ 🔬 科學 │ │
│ │ 關於科學的貼文 │ │
│ │ 由 @science-feed.bsky │ │
│ │ ♥ 45.2K 個喜歡 │ │
│ │ [預覽] [+ 新增動態消息] │ │
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 🎨 藝術動態消息 │ │
│ │ 精選藝術貼文 │ │
│ │ 由 @art.bsky.social │ │
│ │ ♥ 32.1K 個喜歡 │ │
│ │ [預覽] [+ 新增動態消息] │ │
│ └──────────────────────────┘ │
│ │
│ 分類： │
│ [新聞] [科技] [藝術] [科學] [體育] │
└─────────────────────────────────────────────┘
設計決策： 動態消息卡片顯示建立者的 handle、作為社會認同的按讚數，以及在做出承諾前的預覽按鈕。這仿照了使用者已經熟悉的應用程式商店模式，降低了理解新概念的認知成本。
/* 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 是第一個證明協議層級架構可以成為消費者可見設計功能的社群網路。動態消息選擇作為主要導航、網域 handle 作為信任訊號、可組合式內容審核作為使用者偏好設定——這些模式都源自 AT Protocol 的關注點分離。設計團隊的成就不在於協議本身，而在於讓「演算法選擇」和「身分可攜性」等概念感覺如同切換分頁一般自然。對設計師而言，Bluesky 證明了最困難的使用者體驗問題不在於像素，而在於讓看不見的基礎設施對人類變得可讀。
最適合學習： 將後端架構以使用者體驗功能呈現、抽象概念的市集模式、無需徽章系統的信任訊號設計，以及超越「允許」與「移除」二元對立的內容審核使用者體驗。
常見問題
Bluesky 的動態消息系統與 Twitter 的「為你推薦」分頁有何不同？
Twitter 提供一個專有演算法搭配一個反向時間序時間軸。Bluesky 讓任何人都能建構和發布動態消息演算法，使用者可以將多個動態消息釘選為可切換的分頁標籤。一位使用者可能同時擁有「追蹤中」（時間序）、「科學」（主題篩選）、「安靜的發文者」（呈現較少發文的帳號）和「熱門」（趨勢）等動態消息，全部以可滑動的分頁形式呈現。每個動態消息由不同的開發者或社群建構。
什麼是 DID，為什麼設計師應該關注它？
DID（Decentralized Identifier，去中心化識別碼）是一種永久性身分，即使使用者更換 handle 或伺服器也會持續存在。設計師之所以關注，是因為它實現了基於網域的驗證（你的 handle 就是你的網域）、不失去追蹤者的伺服器遷移，以及跨應用程式身分等模式。使用者體驗的挑戰在於讓這一切變得無形——使用者設定自訂 handle 後「就能用了」，無需理解背後的加密基礎設施。
可組合式內容審核在實際中如何運作？
使用者訂閱「labeler」——這些服務會為內容標記如 NSFW、劇透或不實資訊等標籤。每位使用者控制信任哪些 labeler，以及針對每種標籤採取什麼行動（隱藏、警告、顯示）。這意味著一位家長和一位研究人員可以在同一個平台上使用不同的內容邊界設定，而兩者都不算「錯」。設計的挑戰在於讓這感覺像是一種偏好設定，而非一項苦差事。
Bluesky 的動態消息市集模式可以應用於非社群產品嗎？
當然可以。任何具有內容策展功能的產品——新聞聚合器、電子商務、學習平台、音樂服務——都可以提供使用者可選擇的演算法。Bluesky 的關鍵模式是將演算法視為可替換、可見的元件，而非隱藏的基礎設施決策。即使是儀表板和分析工具，也可以使用相同的分頁選擇模型，讓使用者在「為我策展」和「社群熱門」視圖之間選擇。
Bluesky 如何處理新動態消息的冷啟動問題？
動態消息建立者可以將其動態消息設定為在市集中公開列出，附帶描述、預覽和按讚數。熱門動態消息透過按讚數和訂閱者數量獲得社會認同。新使用者在入門引導過程中會看到一個精選的「探索動態消息」畫面，突顯熱門和相關類別的動態消息。預覽按鈕讓使用者在做出承諾前查看範例內容，降低了添加不好動態消息的風險。