Airbnb：透過設計建立規模化信任
「設計是產品的肢體語言。它在人們理解之前，就告訴他們該有什麼感受。」——Brian Chesky，Airbnb 執行長
Airbnb 要求人們做一件違反直覺的事：睡在陌生人的家裡。整個商業模式仰賴設計在素未謀面的人之間製造信任——在他們從未去過的地方，進行數百甚至數千美元的交易。如果設計在任何環節未能建立信任——房源頁面、照片、評價、房東簡介、結帳流程——預訂就不會發生。
正是這個信任難題，讓 Airbnb 成為消費級軟體中最具啟發性的設計案例之一。每一個設計決策，從攝影標準到評價系統再到價格透明度，都是為了在陌生人之間架起橋樑。Airbnb 為了在全球規模解決這個問題而打造的設計語言系統（DLS），成為業界最具影響力的設計系統之一。
為什麼 Airbnb 值得研究
Airbnb 解決了市場平台軟體中最困難的設計問題：在全球規模下於陌生人之間建立信任。
核心成就： - 建立了一套設計系統（DLS），將 web、iOS 和 Android 統一為單一視覺語言 - 證明攝影品質是市場平台中槓桿效益最高的設計變數 - 創造了取代傳統「篩選優先」搜尋模式的分類瀏覽範式 - 設計了一個雙角色產品（房東與房客），讓兩者都感覺量身打造，卻不像兩個獨立的應用程式 - 將價格透明度轉化為競爭優勢，在一個向來隱藏費用的市場中脫穎而出
重點摘要
- 攝影即信任基礎設施 — Airbnb 對專業攝影和圖片標準的投入，並非行銷支出，而是陌生人決定是否將自己的住所和安全託付給對方的首要機制
- 彈性搜尋尊重不確定性 — 多數旅行搜尋者既不確定想去哪裡，也不確定確切時間；Airbnb 的「彈性搜尋」範式承認了這種不確定性，並將其轉化為瀏覽體驗
- 評價需要被設計，而非僅僅收集 — 評價的結構、展示方式和驗證機制，與評價內容本身同等重要；Airbnb 的多維度評價系統（清潔度、準確度、入住體驗、溝通、地點、價值）提供了單一星級評分無法傳達的可操作資訊
- 價格透明度建立信心 — 在結帳前顯示包含所有費用的總價，消除了隱藏費用所帶來的預訂焦慮；Airbnb 在付出代價後才學到這個教訓，並重新設計了價格展示方式
- 雙角色需要共用元件 — 房東和房客有不同的目標，但與同一個系統互動；DLS 確保兩種角色都感覺被妥善服務，而不會將產品割裂為兩套體驗
核心設計原則
1. 攝影作為首要信任訊號
Airbnb 最早期的成長洞察是：專業攝影能大幅提升預訂量。公司真的派攝影師到房東家中拍攝。這不是行銷計畫，而是關於產品主要信任機制的設計決策。
房源頁面的圖片層級：
LISTING PAGE — IMAGE LAYOUT:
┌────────────────────────────────┬────────────┬────────────┐
│ │ │ │
│ │ Image 2 │ Image 3 │
│ Hero Image │ │ │
│ (largest, best shot) ├────────────┼────────────┤
│ │ │ │
│ │ Image 4 │ Image 5 │
│ │ │ [Show all │
│ │ │ photos] │
└────────────────────────────────┴────────────┴────────────┘
Grid ratio: 50% hero, 25% top-right pair, 25% bottom-right pair
All images: object-fit: cover (no letterboxing)
Aspect ratio: ~16:10 for hero, ~1:1 for grid items
/* Airbnb's listing image grid */
.listing-images {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
max-height: 460px;
}
.listing-images__hero {
grid-row: 1 / -1; /* Spans both rows */
}
.listing-images img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 200ms ease;
}
.listing-images:hover img {
filter: brightness(0.92);
}
/* Show all photos overlay */
.listing-images__show-all {
position: absolute;
bottom: 16px;
right: 16px;
background: #ffffff;
color: #222222;
border: 1px solid #222222;
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
作為設計要素的攝影標準： - 廣角鏡頭確立空間感（減少「比預期小」的投訴） - 自然光營造溫暖感與真實感 - 床鋪總是整理好的，檯面保持整潔（傳達清潔訊號） - 至少一張外觀或周邊環境照片（提供地點脈絡） - 主圖必須展示空間最具特色的亮點
2. 分類瀏覽：以探索取代搜尋
2022 年，Airbnb 推出了「分類」功能——從篩選式搜尋到視覺化瀏覽的範式轉移。Airbnb 不再問使用者「你想去哪裡？」，而是開始問「你在尋找什麼樣的體驗？」
CATEGORY BAR:
┌─────────────────────────────────────────────────────────┐
│ ◀ ┊ 🏠 Amazing 🏊 Amazing 🏕 Camping 🏰 Castles │
│ views pools ▶ │
│ │
│ 🌊 Beach- 🏡 Tiny 🌲 Tree- 🏗 Design │
│ front homes houses ▶ │
└─────────────────────────────────────────────────────────┘
↑ Horizontally scrollable
↑ Icon + label for each category
↑ Selected category is underlined + bold
/* Category pill navigation */
.categories-bar {
display: flex;
gap: 32px;
overflow-x: auto;
padding: 0 24px;
scrollbar-width: none; /* Hide scrollbar */
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid #ebebeb;
}
.categories-bar::-webkit-scrollbar {
display: none;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 0;
cursor: pointer;
opacity: 0.65;
transition: opacity 150ms ease;
flex-shrink: 0;
border-bottom: 2px solid transparent;
}
.category-item:hover {
opacity: 1;
}
.category-item--active {
opacity: 1;
border-bottom-color: #222222;
}
.category-icon {
width: 24px;
height: 24px;
}
.category-label {
font-size: 12px;
font-weight: 600;
color: #222222;
white-space: nowrap;
}
為什麼分類改變了搜尋體驗： - 傳統篩選假設使用者知道自己想要什麼（日期、地點、價格範圍） - 分類適合探索式瀏覽（「我想找一些酷的東西」變成「給我看樹屋」） - 視覺化圖示創造了跨語言皆可快速掃描的導覽方式 - 分類釋放了傳統搜尋無法觸及的供給（一座你從不知道存在的法國城堡）
3. Airbnb 設計語言系統（DLS）
Airbnb 的 DLS 是最早在大規模實現跨平台一致性的設計系統之一。該系統採用共享的元件、token 和模式語彙，橫跨 web、iOS 和 Android 運作。
Design tokens：
:root {
/* Airbnb's color system */
--color-primary: #ff385c; /* Rausch — the signature pink-red */
--color-primary-dark: #d70466;
--color-text: #222222;
--color-text-secondary: #717171;
--color-border: #dddddd;
--color-background: #ffffff;
--color-surface: #f7f7f7;
/* Spacing scale (8px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* Border radius */
--radius-small: 8px;
--radius-medium: 12px;
--radius-large: 16px;
--radius-pill: 999px;
/* Typography — Cereal is Airbnb's custom typeface */
--font-family: "Cereal", -apple-system, BlinkMacSystemFont, sans-serif;
--font-weight-book: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
/* Elevation */
--shadow-card: 0 2px 16px rgba(0, 0, 0, 0.12);
--shadow-dropdown: 0 4px 32px rgba(0, 0, 0, 0.16);
--shadow-modal: 0 8px 28px rgba(0, 0, 0, 0.28);
}
房源卡片——Airbnb 最重要的元件：
.listing-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
cursor: pointer;
}
.listing-card__image-container {
position: relative;
aspect-ratio: 20 / 19;
border-radius: var(--radius-medium);
overflow: hidden;
}
.listing-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.listing-card:hover .listing-card__image {
transform: scale(1.03);
}
/* Wishlist heart — always visible on hover */
.listing-card__wishlist {
position: absolute;
top: var(--space-3);
right: var(--space-3);
background: transparent;
border: none;
cursor: pointer;
}
.listing-card__wishlist svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 2;
fill: rgba(0, 0, 0, 0.5);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
/* Rating and metadata */
.listing-card__details {
display: flex;
flex-direction: column;
gap: 2px;
}
.listing-card__rating {
display: flex;
align-items: center;
gap: 4px;
font-size: 15px;
font-weight: var(--font-weight-medium);
}
.listing-card__location {
font-size: 15px;
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.listing-card__distance {
font-size: 15px;
color: var(--color-text-secondary);
}
.listing-card__price {
font-size: 15px;
margin-top: 4px;
}
.listing-card__price strong {
font-weight: var(--font-weight-bold);
}
值得借鑑的設計模式
評價信任系統
Airbnb 的評價系統旨在提供可操作的具體資訊，而非僅僅是情緒表達。多維度的評價方式讓房客能夠針對住宿的各個面向進行評估。
REVIEW DISPLAY:
┌─────────────────────────────────────────────────────────┐
│ ★ 4.87 · 234 reviews │
│ │
│ Cleanliness ████████████████████░ 4.9 │
│ Accuracy ████████████████████░ 4.9 │
│ Check-in █████████████████████ 5.0 │
│ Communication █████████████████████ 5.0 │
│ Location ████████████████████░ 4.8 │
│ Value ███████████████████░░ 4.6 │
│ │
│ ───────────────────────────────────────────────────── │
│ │
│ ○ Sarah · March 2026 │
│ "The apartment was exactly as pictured. │
│ Great location, walking distance to..." │
│ [Show more] │
│ │
│ ○ James · February 2026 │
│ "Clean, well-organized, and the host │
│ responded within minutes to every..." │
│ [Show more] │
│ │
│ [Show all 234 reviews] │
└─────────────────────────────────────────────────────────┘
為什麼多維度評價有效： - 一個清潔度 4.9 但價值 4.2 的房源，與整體 4.6 的房源傳達了截然不同的訊息 - 具體的維度促使房客撰寫更有用的評價內容（他們會逐項思考每個類別） - 房東能精確知道該改進什麼（溝通，而非「所有東西」） - 長條圖視覺化呈現，一目了然
價格透明度
Airbnb 在隱藏費用上付出了慘痛的代價。多年來，清潔費和服務費直到結帳時才揭露，導致大量用戶流失。重新設計的價格展示方式從一開始就顯示總價。
BEFORE (hidden fees):
┌────────────────────────────┐
│ $89 / night │ ← Listed price
│ ───────────────────────── │
│ (Checkout reveals:) │
│ $89 x 3 nights $267 │
│ Cleaning fee $75 │ ← Surprise
│ Service fee $48 │ ← Surprise
│ Taxes $39 │ ← Surprise
│ ───────────────────────── │
│ Total $429 │ ← 60% more than expected
└────────────────────────────┘
AFTER (total price toggle):
┌────────────────────────────┐
│ $143 / night total │ ← All-in price
│ before taxes │
│ ───────────────────────── │
│ $429 total │ ← No surprises
│ ───────────────────────── │
│ Price breakdown │
│ $89 x 3 nights $267 │
│ Cleaning fee $75 │
│ Service fee $48 │
│ ───────────────────────── │
│ Total before taxes $390 │
│ Taxes $39 │
│ ───────────────────────── │
│ Total $429 │
└────────────────────────────┘
設計原則： 預先顯示總價能減少結帳時的價格衝擊。看到每晚 $143 後仍繼續預訂的使用者，是真正準備好支付該金額的人。結帳時的轉換率因此提升，因為價格已經被接受了。隱藏費用雖然暫時提高了點擊率，卻摧毀了信任和最終轉換率。
房東/房客雙角色設計
Airbnb 在單一產品中服務兩種截然不同的使用者類型——房東和房客。DLS 透過共用元件搭配角色專屬的內容和流程來解決這個問題。
GUEST VIEW: HOST VIEW:
┌──────────────────────┐ ┌──────────────────────┐
│ Explore │ │ Today │
│ ─────────────────── │ │ ─────────────────── │
│ Where to? [Search] │ │ Arriving today: 2 │
│ │ │ Checking out: 1 │
│ Categories: │ │ Pending requests: 3 │
│ 🏠 🏊 🏕 🏰 │ │ │
│ │ │ Your listings │
│ [Listing cards...] │ │ ┌────────────────┐ │
│ │ │ │ ■ Beach House │ │
│ │ │ │ ★ 4.92 · $189 │ │
│ ────────────────── │ │ └────────────────┘ │
│ [Explore] [Wish] │ │ │
│ [Trips] [Inbox] │ │ ────────────────── │
│ [Profile] │ │ [Today] [Calendar] │
│ │ │ [Listings] [Inbox] │
└──────────────────────┘ │ [Menu] │
└──────────────────────┘
Shared: Inbox, messaging components, review display, profile cards
Different: Navigation, home screen, primary actions, onboarding
統一雙角色的共用元件： - 訊息氣泡（相同元件，不同情境） - 評價卡片（房東評價房客，房客評價房東） - 個人檔案展示（照片、姓名、驗證徽章） - 地圖整合（房客用來瀏覽，房東用來查看房源位置） - 日曆（房客選擇日期，房東管理可用性）
結語
Airbnb 解決了一個看似不可能的信任問題：說服數百萬陌生人在素未謀面的情況下，用真金白銀向其他陌生人開放自己的家。解決方案不是單一的設計功能，而是一套完整的系統——專業攝影、結構化評價、身份驗證、透明定價，以及一套持續傳達溫暖、安全和可靠感的視覺語言。
最具借鑑價值的啟示是：市場平台中的信任不是一個功能，而是整個產品中每一個設計決策的總和。攝影品質、評價結構、定價誠信、房東回覆速度、驗證徽章——每一項都是信任織物中的一根絲線。抽掉任何一根，整個系統都會削弱。
最適合學習： 如何在雙邊市場中為信任而設計、攝影和視覺標準如何驅動轉換率，以及如何建立一套服務多種使用者角色而不割裂產品的設計系統。
常見問題
Airbnb 如何運用攝影來建立信任？
Airbnb 為房東投資了專業攝影計畫，建立了廣角拍攝、自然光線和清晰構圖的標準。房源圖片網格採用主圖佈局，讓最佳照片佔據主導地位。攝影是最主要的信任信號，因為它讓房客能夠透過視覺確認自己預訂的房源實況。擁有專業照片的房源在預訂轉換率上始終優於沒有專業照片的房源。
什麼是 Airbnb 的 Design Language System（DLS）？
DLS 是 Airbnb 的設計系統，用於確保網頁版、iOS 和 Android 之間的視覺一致性。它包含設計代幣（顏色、間距、字體排印、層級陰影）、可複用元件（房源卡片、評價展示、搜尋欄）以及互動模式指南。該系統使用 Airbnb 的自訂字體 Cereal，並以標誌性的 Rausch 粉紅色（#ff385c）作為主要強調色。DLS 使數百名工程師能夠交付一致的體驗。
Airbnb 的分類瀏覽如何改變了旅行搜尋方式？
分類瀏覽打破了「使用者知道自己想去哪裡、什麼時候出發」的既有假設。使用者不再需要從目的地和日期開始搜尋，而是可以按照體驗類型瀏覽——樹屋、城堡、海濱、迷你住宅。這種範式能夠呈現傳統搜尋永遠找不到的房源（如果使用者不知道平台上有城堡，就不可能搜尋城堡）。可滾動的圖示列提供了易於瀏覽、不受語言限制的導覽方式。
Airbnb 為什麼改為顯示總價？
隱藏費用（清潔費、僅在結帳時才揭露的服務費）導致了大量的預訂流失。當最終價格比顯示的每晚房價高出 40-60% 時，使用者會感到被欺騙。Airbnb 推出了「總價」切換功能，預先顯示包含所有費用的每晚實際費用。這降低了結帳放棄率，因為繼續進行的使用者已經接受了真實價格。透明度成為了一項競爭優勢。
Airbnb 的評價系統如何建立信任？
Airbnb 採用多維度評價（清潔度、準確性、入住流程、溝通、地點、價值）取代單一的星級評分。這種結構引導房客針對具體面向進行評估，為房東產生更具可操作性的回饋，並為未來的房客提供細緻的參考信號。一個溝通項目 5.0 但價值項目 4.2 的房源，能傳達出有意義的資訊。評價與已驗證的住宿綁定，防止虛假評價。
資源
- 網站：airbnb.com
- 設計部落格：airbnb.design — 案例研究與設計系統文件
- DLS：Airbnb 的 Design Language System 文件與元件庫
- 工程部落格：medium.com/airbnb-engineering — 技術深度剖析
- 分類瀏覽上線：研究 2022 年夏季發佈版本，了解分類瀏覽的範式轉移