Airbnb：通过设计构建规模化信任
“设计是产品的肢体语言。它在人们思考之前，就告诉他们该如何感受。” — Brian Chesky, Airbnb CEO
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 是最早在规模化层面实现跨平台一致性的设计系统之一。该系统使用一套在 web、iOS 和 Android 上通用的组件、设计令牌和模式词汇。
设计令牌：
: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 的设计系统，用于确保 Web、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 年夏季发布版，了解分类浏览的范式转变