没有列表, 没有缩略图墙. 抖音的信息架构只有一个单位 — 一条全屏竖视频. 上滑切换世界, 互动永远长在右侧, 音乐永远在左下角走马灯.
从凌晨的灶台到海拔 4500 米的雪线, 每个直播间都是一种生活的现场. 卡片只是门, 推开就是全屏.
抖音的设计语言为 "屏幕消失" 服务: 近黑画布把界面藏起来, 让视频成为唯一光源. 双生色 cyan / red 的 RGB 错位是声画振动的视觉化 — 只用在 logo, 大标题与点赞数字上, 其余一律黑白灰.
画布近黑, 文字纯白, 双生色只做签名. red 承担所有 "行动": 关注, 点赞, LIVE; cyan 永远作为 red 的影子成对出现, 几乎不单独行动.
白色本体, cyan 影子向左上偏移, red 影子向右下偏移 — 像一帧没对齐的视频信号. 用量纪律: 一屏最多出现一次大错位, 小错位只给 logo 和点赞数字.
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 | 话题标签 |
界面圆角偏小偏硬 (4-14px), 利落不粘腻; 大圆角只给手机外壳和头像 — 圆是给 "人" 和 "设备" 的, 不是给按钮的.
红色实心承担唯一主操作; 互动 icon 白色 + 投影, 点亮时红心金星; LIVE 角标永远带呼吸点. 输入框聚焦亮红圈.
抖音的文案不解释产品, 它模仿视频字幕说话: 短句, 现在时, 第一人称. 数字永远用 w 计数 — 这是这个社区自己的度量衡.