duo-design

Duolingo 设计 — 内容地图

Duolingo 没有公开的设计系统网站：design.duolingo.com 会 301 重定向到 blog.duolingo.com/hub/design/，这是一个精选的四篇文章合集（截至 2026-09-22 核查）。因此，这些节点基于博客上的设计和工程文章构建，传达的是模式和设计依据，而非具体令牌。

如需实现层面的细节——缓动曲线、时长表、对比度、焦点环、组件 API——请参阅 [[../duolingo/references/design-handoff]]。

此技能采用图谱结构：浏览下方说明，只跟进你需要的 [[wikilinks]]。

动效与感受

• [[references/juicy-motion]] — 弹性十足、略带过冲的缓动曲线，让每次交互都能即时响应。
• [[references/celebration-design]] — “你做到了”的视觉语法——彩纸、缩放、角色客串。

角色层

• [[references/character-system]] — Duo 和伙伴作为产品的情感 API；以及如何为任何品牌打造这样的角色。

令牌

• [[references/color-tokens]] — 区分用途与取值（例如 correct-feedback 与 green-500），让品牌迭代时无需重写界面。
• [[references/type-system]] — Feather Bold、字重规则，以及可读性优先的层级体系。

界面

• [[references/sound-as-ux]] — 不可或缺的音频反馈；添加成本低，带来的回报却远超预期。
• [[references/progress-bars]] — 游戏化产品中最重要的 UI 元素，应当如此对待。
• [[references/bottom-bar-navigation]] — 五个标签页、通过角色图标识别，且位置固定。

决定构建什么

• [[references/prototype-the-extremes]] — 将每个相互竞争的取舍分别推到极致，探索不同方向，再找出各自的临界点。
• [[references/consistency-vs-purpose]] — 一致性可降低学习成本，简洁性可提升清晰度；当其中一项不再带来收益时，应对系统分级，而非处处套用同一规则。
• [[references/craft-pass-guardrail]] — 如何为纯粹的打磨项目提供资源并衡量成效，而不假装它会提升核心指标。
• [[references/design-for-many-ship-one]] — 即使发布时只启用一个选项，也要为 N 个选项构建布局，这样以后做实验只需分析，而无需重新设计。

界面对用户的定位

• [[references/required-path-not-optional-branch]] — 可选的深入内容会让人觉得可以跳过；把期望的行为放在主路径上，并将深入内容序列化呈现。
• [[references/capability-labels]] — 根据用户完成后能做到什么来命名级别和单位，并在存在外部标准时以其为依据。
• [[references/label-the-hard-thing]] — 在用户尝试之前告知任务很难，可以提高他们对失败的容忍度，并增强成功后的自豪感。

默认项

• [[references/accessibility-default]] — 颜色不应是唯一信息载体；文本缩放、减少动态效果、屏幕阅读器路径都应是发布的阻断项，而非锦上添花。
• [[references/error-as-delight]] — 错误状态是展现品牌的绝佳机会，不必让它成为破坏体验的环节。

相关技能

• [[../duo-gamification/SKILL]] — juicy-feedback 同时涉及设计和游戏化；具体实现见此处。
• [[../duo-voice/SKILL]] — 庆祝和错误提示也需要文案设计。
• [[../duo-retention/SKILL]] — 底部栏的存在，是因为留存需要一个稳定的主页入口。

来源

• blog.duolingo.com/hub/design/ — 四篇文章组成的设计合集（截至 2026-09-22，design.duolingo.com 会重定向至此）
• @duolingo 产品界面 — 观察到的动效和声音