规格表 / Components

Duolingo 行为剧本之外的另一面:组件本身就像玩具。3D 按钮在按下时塌缩 4px、HUD 顶栏四件套永远在视野最高处、Streak 火焰按里程碑长大成五形态、Lesson Complete 把一次完成切成 5–7 段瀑布。 每一件都标注来源;公开资料未明的标“待考”。

来源核实 推断待考 公开资料未明
Control

Big Button(招牌 3D 按钮)

圆角(社区观察)
16px(来自 Blake Crosley 等开发者对 app DOM 的反推;非官方设计规范)[5]
底部阴影(社区观察)
border-bottom: 4px solid <一档暗色>(如 #58A700 之于 Feather Green)[5]
按下(社区观察)
border-bottom-width: 0; margin-top: 4px;(整个下沉 4px)[5]
主色映射
主操作 Feather Green / 错误 Cardinal / 提示 Macaw / 警告 Fox[1]
字号
Feather Bold(具体 px tbd)[2]

这只按钮是 Duolingo 最被山寨的单件——4px 实色底边在按下时塌缩 4px,触感来自这个微小的位移而非任何阴影 blur。具体 px 值来自 Blake Crosley / Android Dvlpr 等开发者对 app DOM 的反推("observed", 非 Duolingo 官方规范);山寨者通常做错的是把它改成 box-shadow,但官方 app 是 border-bottom 直接吃掉。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
×
Choose the missing word
Yo _____ café.
Navigation

Path Node(学习路径节点)

形状
圆形(path 取代旧版 skill tree 后出现)[5]
尺寸
约 80–96 pt(视觉估算,未公开)待考
状态
locked / current / done / legendary(gold) / chest[5]
Crown levels(旧)
1–5 级是旧版 skill tree 的 crown 系统;从 2022 path 改版后已不直接显示在节点上,更多在课程汇总里出现[5]
当前节点动效
bobbing 上下浮动 + 描边脉冲[5]

States

lockedcurrentdonelegendarychest

路径节点取代了 2022 之前的横向 skill tree,强调线性叙事。当前节点会上下"呼吸"提示用户下一步——这个微小动效是路径页的视觉锚点。注:Crown 1-5 是旧 skill tree 的可见状态,path 改版后这个细分主要保留在课程统计里,不再直接当作 path node 的可见状态。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
🔥 47💎 2140♥ 5
🔒
Chrome

HUD(顶栏四件套)

组成
Streak 火焰 · Gem 计数 · Heart × 5 · XP / League badge[8]
色彩
Streak: Bee/Fox · Gem: Macaw · Heart: Cardinal · XP: Feather Green[1]
位置
顶栏固定,主页 / 课程页持续可见[5]
尺寸
具体 px tbd待考

HUD 是行为设计的关键:把所有可被消耗的资源(命、宝石、连胜)放在视线最高处,让用户每秒都看见"还剩多少"。Heart 用完锁课,是 free-to-play 游戏经济搬到学习应用的核心结构。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
472,140♥ 5
Icon

Streak 火焰(五形态)

形态
Day 0 灰 → 1 黄 → 7 双层 → 30 大 → 365 金(社区命名)[8]
主色
内焰 Bee #FFC800 / 外焰 Fox #FF9600[1]
断签
灰猫头鹰 + "You made Duo sad" 提示[8]
Streak Freeze
道具图标,蓝色冰晶,Macaw 主色[8]

States

day-0day-1day-7day-30day-365brokenfrozen

火焰的形态变化是 Duolingo 的视觉高潮:每过一个里程碑火焰会"长大",给用户一个图像化的成就累积。Day 365 的金色火焰带 special crown 是 Streak Society 的入场券。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
🔥0
🔥1
🔥30
🔥365
Component

Speech Bubble(角色对白气泡)

形状
圆角矩形 + 三角尾巴指向角色头像[8]
色彩
白底 + 角色主色 1px 描边 / 角色情绪填充色[1]
字体
Feather Bold 标题 + 普通 weight 正文[2]

对白气泡是 Duolingo 把"练习"包装成"剧情"的关键道具。每个角色的尾巴永远朝向自己的头像,色调与角色一致。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档

¡Hola! ¿Cómo estás?

Modal

Lesson Complete(多段结算屏)

段次
XP +n → Combo → Daily Goal → Streak +1 → Gem Chest[5]
触发动效
每段独立 bounce + 数字滚动到位 + 粒子爆发[5]
总时长
约 6–10 秒(视奖励数量),用户可点击跳过[5]
具体时长
每段时长 tbd(公开资料未明)待考

这串瀑布是 Duolingo 多巴胺设计的高潮——把一次单调的练习拆成 3-5 个独立庆祝时刻。每一段都有自己的音效、动效、文字。这是行为设计的教科书例子。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
Lesson complete!
XP+12
Combo×3
Streak+1
Gems+25
Notification

Push Card(通知卡片)

布局
Duo 头像 + 标题 + 文案(iOS / Android 系统模板)[6]
人格
"略带威胁感的主动语气" + 反向心理 / 拟人化[7]
时间窗(社区流传)
常见说法是"用户上次打开 app 的同一小时"。Duolingo 自己在 2020 push ML 文章里说会按上次活跃时间窗口学习,但"完全锁定上次的同一小时"是社区/媒体的简化解读,不是官方原话[7]
个性化
2020 年起的 bandit algorithm:从预先写好的通知模板池里按语言、streak、最近曝光等因素选择,并不是"AI 生成"或专门的 Birdbrain 模型[7]

Push card 是 Duolingo 营销资产中最被记住的部分——通知本身被做成了 meme,2019 年甚至自己拍了一支 April Fools 假产品 "Duolingo Push" 来回应。这是把负面反馈转化为品牌资产的经典案例。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
Duolingo
These reminders aren't working. We're trying something different.
Brand

Cast Sheet(角色档案)

主吉祥物
Duo(绿色猫头鹰,1) 长得像眼镜鸮[7]
World Characters
2020 起逐步发布的多位主角:Duo + Lily / Zari / Bea / Junior / Eddy / Oscar / Vikram / Lin / Lucy(具体节奏见 cast 页)[7]
设计师
Emily Chiu(Creative Producer)设计 Lily / Zari / Bea / Lin / Lucy(官方 origin 文章列出)[7]
插画语法
三种基础形状:rounded rectangle / circle / rounded triangle[7]

世界角色是 Duolingo 把 Web App 升级为"剧场"的关键资产。每个角色有完整的家庭设定、性格弧线、出场场景——Lily 在哥特青少年圈成为 meme,Zari 是宗教/文化代表性的破冰,Vikram 是 STEM 严肃感的对照。

Sources

  1. Duolingo Brand Guidelines · Color · brand-center官方色彩命名与 hex
  2. Duolingo Brand Guidelines · Typography · brand-center
  3. Monotype × Duolingo 案例 · design-blogFeather Bold 由 Krista Radoeva 设计,Johnson Banks 主导视觉系统,2019
  4. Creative Bloq · Feather Bold · press
  5. Blake Crosley · Duolingo Gamification · analysis3D 按钮的精确 CSS 实现
  6. Duolingo Push(2019) · press
  7. "Hi, it's Duo" — AI behind the meme · design-blog
  8. Duolingo Wiki · Streak / Heart 机制 · analysis社区维护的状态机文档
图片版权归Duolingo, Inc.所有,本图鉴仅作设计研究与分析用途。Images © respective owners. Used here for design commentary & research (fair use).