竖屏沉浸 Feed · 设计研究

# 下一条视频
永远猜不到

抖音的品牌不在 logo 里, 在那块 9:16 的屏幕里: 全屏吞掉你的视野, 互动栏挂在右手拇指的弧线上, 黑胶唱片在角落转个不停. 记录美好生活, 一次上滑一个世界.

进入沉浸 Feed 查看设计系统
9:16竖屏即画布
600ms一次上滑的决定
双生色#25F4EE / #FE2C55
关注推荐
这支舞
练了三个月 最后 8 秒是给你们的
+
128.4w
5.2w
8.9w
3.1w ♪ ♫
@小鹿不跳舞
练习室到天台, 第 91 天打卡 #街舞 #坚持的意义
♫ 原声 - 小鹿不跳舞 · 这一段循环了一整晚 ♫ 原声 - 小鹿不跳舞 · 这一段循环了一整晚
The Feed Is The Brand

## 结构即品牌: 一屏一世界

没有列表, 没有缩略图墙. 抖音的信息架构只有一个单位 — 一条全屏竖视频. 上滑切换世界, 互动永远长在右侧, 音乐永远在左下角走马灯.

关注推荐
整条街都是
我的观众
+
89.2w
3.8w
4.6w
1.9w ♪
@街角的Bboy阿凯
黄昏限定 freestyle #街舞 #城市就是舞台
♫ Funk Beat - 老式收音机 ♫ Funk Beat - 老式收音机
关注推荐
凌晨两点的
一碗牛肉面汤底熬了 14 个小时
+
156.8w
12.4w
21.3w
7.7w ♪♫
@深夜食堂主理人
开了九年的小店, 只做熟客 #深夜食堂 #人间烟火
♫ 原声 - 深夜食堂主理人 · 砂锅咕嘟声 ♫ 原声 - 深夜食堂主理人 · 砂锅咕嘟声
关注推荐
这座城市的夜
从不让人失望
+
73.5w
2.1w
6.2w
4.4w ♪
@城市漫游指南
无人机第 47 次起飞 #城市夜景 #航拍
♫ City Lights - 夜航电台 ♫ City Lights - 夜航电台
同一套骨架, 三个世界 — 互动栏, 字幕层, 音乐跑马灯的位置一像素不变, 变的只有那块画布.
Live Now

## 直播广场, 没有两个一样的房间

从凌晨的灶台到海拔 4500 米的雪线, 每个直播间都是一种生活的现场. 卡片只是门, 推开就是全屏.

LIVE 1.2w 观看
阿哲在唱歌
深夜电台 · 点歌房第 203 夜
赛事 8964 在看
巅峰小鱼
冲分之夜, 上分车开了就别下
LIVE 2.3w 观看
灶台一姐
锅气教学 · 三道家常菜的火候
LIVE 5621 在看
徒步的老王
贡嘎雪山东坡 · 海拔 4500m
福利场 3.4w 观看
珠珠好物社
工厂直发 · 最后一小时清仓
LIVE 9876 在看
Lina 舞室
韩舞翻跳 · 连麦 battle 进行中
自习 4312 在看
陪你自习
沉浸自习室 · 第 182 天
LIVE 1.8w 观看
星野 Hoshino
虚拟主播杂谈回 · 今晚聊宇宙
Design System Reference

## 沉浸黑 + 双生色错位

抖音的设计语言为 "屏幕消失" 服务: 近黑画布把界面藏起来, 让视频成为唯一光源. 双生色 cyan / red 的 RGB 错位是声画振动的视觉化 — 只用在 logo, 大标题与点赞数字上, 其余一律黑白灰.

View DESIGN.md ↗

### Color

画布近黑, 文字纯白, 双生色只做签名. red 承担所有 "行动": 关注, 点赞, LIVE; cyan 永远作为 red 的影子成对出现, 几乎不单独行动.

双生色 Twin Accents
活力红
#FE2C55
电光青
#25F4EE
沉浸黑
#0A0A0A
纯白
#F1F1F2
错位渐变
cyan → red
表面与文字 Surfaces & Ink
浮起面
#111114
卡片面
#16161A
次级文字
#A8A8B3
辅助文字
#63636E
话题金
#F8D96C

### Anaglyph 错位签名

白色本体, cyan 影子向左上偏移, red 影子向右下偏移 — 像一帧没对齐的视频信号. 用量纪律: 一屏最多出现一次大错位, 小错位只给 logo 和点赞数字.

##### Display 错位

记录美好生活
-2px -1px cyan / 2px 1px red

##### 小号错位

抖音
128.4w
-1.5px -1px cyan / 1.5px 1px red

##### 用量纪律

错位不是装饰, 是节拍重音.
正文, 按钮, 表单 — 永远禁用.
它出现的地方, 就是页面在 "响" 的地方.

### Typography

Noto Sans SC 全场, 标题压到 900 — 字幕要在 600ms 内被读完, 所以宁可重不可细. 数字用 Inter, 互动数据全部 tabular-nums.

Token | 样例 | 字号 | 字重 | 用途
--- | --- | --- | --- | ---
--display | 下一条视频 | 58 / 3.6rem | 900 | Hero 主标题
--title-section | 一屏一世界 | 40 / 2.5rem | 900 | 章节标题
--video-caption | 这支舞练了三个月 | 27 / 1.7rem | 900 | 视频大字字幕
--body | 记录美好生活 | 16 / 1rem | 400 | 正文
--meta-user | @小鹿不跳舞 | 15 / 0.94rem | 700 | 用户名
--num-stat | 128.4w | 11.5 / 0.72rem | 700 | 互动数字
--topic | #街舞 #人间烟火 | 12.5 / 0.78rem | 500 | 话题标签

### Radius

界面圆角偏小偏硬 (4-14px), 利落不粘腻; 大圆角只给手机外壳和头像 — 圆是给 "人" 和 "设备" 的, 不是给按钮的.

角标
4px
按钮
6px
输入框
10px
卡片
14px
手机壳
38px
头像 / 黑胶
50%

### Components

红色实心承担唯一主操作; 互动 icon 白色 + 投影, 点亮时红心金星; LIVE 角标永远带呼吸点. 输入框聚焦亮红圈.

##### Buttons

关注 / 主操作 白色次级 描边按钮 幽灵按钮

##### Inputs & Badges

LIVE 赛事 关注 新功能 #话题

##### 互动栏 Interaction Rail

128.4w
5.2w
8.9w
悬在拇指弧线上的一列

### Voice & Tone

抖音的文案不解释产品, 它模仿视频字幕说话: 短句, 现在时, 第一人称. 数字永远用 w 计数 — 这是这个社区自己的度量衡.

##### 像字幕一样说话

"这支舞练了三个月" 而非 "舞蹈教学视频".
短句, 留悬念, 把下文交给下一秒.
600ms 内读不完的, 都删掉.

##### 现场感

"凌晨两点" "第 91 天" "最后一小时" —
永远有具体的时间戳.
现场不需要形容词, 需要倒计时.

##### 社区度量衡

128.4w 不写成 1,284,000.
"在看" 不写成 "当前观众数".
用社区自己的语言计数, 才像自己人.
View source ↗