
Duolingo
白纸上活泼的班级吉祥物
多邻国的界面设计如同儿童绘本:洁白的纸张,圆润饱满的字体,以及一种浓郁的绿色,让人一眼就能联想到“正确答案”。正文采用舒缓的中灰色调,让绿色及其点缀的蓝色承担起情感表达的重任——绿色用于进度条和标题,蓝色用于可点击的链接和附加操作。组件的形状如同药丸或圆角,并带有粗黑或彩色的边框,使得每个按钮都更像是贴在页面上的贴纸,而非扁平的用户界面控件。
页面各部分占据整个页面宽度,并以单列垂直排列,每部分高度约为 800 像素。内容最大宽度约为 1 像素,居中显示。左侧文字和右侧插图交替排列,各部分之间留有充足的垂直空间(80 像素)。页面没有网格卡片或多列布局——每个部分都是一个单独的文本块,搭配一幅插图。导航栏采用极简的顶部栏设计,包含徽标和语言选择器,以固定栏的形式出现在各部分之间。页脚是一条横跨整个页面宽度的绿色条带。页面布局遵循编辑节奏:标题、段落、行动号召、插图、重复。
本书的插图语言以扁平的二维吉祥物角色(猫头鹰杜特和各种人物形象)为特色,这些角色拥有圆润的几何形状、粗黑轮廓线以及粉色、紫色、黄色、橙色和蓝色的互补色调色板,而这些颜色在界面本身中从未出现过。插图位于每个章节右侧文本旁边,背景为纯白色,没有任何容器或背景。书中没有照片——角色本身就是视觉内容。图标采用粗轮廓线,与吉祥物的风格保持一致。图像密度适中:每个章节都包含一幅角色的大幅插图,页面的其余部分则用于排版和留白。
调色板
品牌
- Eager Green
#58cc02— 绿色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。 - Storybook Green
#d7ffb8— 浅色表面上的柔和高光,以及页脚导航标签后面的微妙背景色调。
中性的
- Spark Blue
#1cb0f6— 蓝色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。 - Fresh Leaf
#a5ed6e— 绿色用于突出显示链接、标签和短语。它不应该用作行动号召的主要颜色。 - Night Ink
#000437— 链接、标签和简短的突出显示短语以紫色突出显示。 - Paper White
#ffffff— 页面画布、纸板表面、绿色/深色背景上的按钮文字。 - Charcoal
#4b4b4b— 标题和正文 - 通用深色文本,使彩色标题更加醒目。 - Pencil Gray
#777777— 正文段落用不显眼的字母突出显示,次要的描述性文字则退居背景,从而使彩色元素更加突出。
排版
从 13 像素到 64 像素 · 7 步
- feather — 替代品: Inter · 轮廓 700 · 诸如“免费、有趣、有效”和“多邻国英语测试”之类的章节标题使用自定义圆角字体显示,赋予品牌活泼、友好、类似吉祥物的风格。请将其替换为相应字重的“Feather Bold”或“Nunito Black”字体。字间距:-0.0200em
- duolingo-sans — 替代品: Inter · 轮廓 500 · 主要段落和导航链接使用 17px/500 的几何无衬线字体,既清晰易读,又能使 700 的行粗细突出显示重点。可替换为“DIN Next”、“Inter”或“Nunito Sans”。
- duolingo-sans — 替代品: Inter · 轮廓 700 · 所有字重均设置为 700:导航标签中的大写字母为 15px(行距 0.0530em),副标题为 19px 和 32px,链接强调为 13px。字体与正文相同——视觉上的区别在于字重,而非字体本身。导航标签中大写字母的行距为 0.0530em。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 12px |
| 按钮半径 | 12px |
| 卡片半径 | 12px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 80-120px |
| 页面宽度 | 1200px |
AI 将按照Duolingo风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Family — 奶油色羊皮纸上的童话故事
- Say Briefly — 米色纸创意机构素描本
- Flying Papers — 周六早晨卡通片中的忏悔
- Portrait — 一面记忆之墙,用宝丽来照片记录在米色相纸上。一本明亮的米色剪贴簿,深蓝色墨水是唯一的文字、唯一的结构线和唯一的边框颜色——只有一道手绘彩虹,它只出现过一次,在“注册”按钮上和斜体字“永远”上,之后便再也没有出现过。
- Karl — 阳光明媚的日子里,一个3D立体书风格的立体模型。
- Navigate — 一大堆贴纸贴在板子上:粗体大字,形状像平板电脑,还有五个彩色图标,像标志一样重复出现。
- Monte — 清晨的海岸,泛着锈红色的光芒
- MotherDuck — 终端用彩色铅笔在米色纸上编码
- Wise Design — 全球街头的霓虹灯市场摊位——一个鲜亮的绿色招牌在拥挤的市场中格外醒目,而招牌背后,则低调地呈现出一个精致的产品用户界面。
- Hatch — 手绘风格的地下出版物设计,融合了柔和的糖果碗图案。奶油色的纸张画布上点缀着薄荷绿的装饰、五彩纸屑般的圆点和药丸状的行动号召,醒目的大号衬线字体暗示着趣味性,角落里还有一个蓝色的吉祥物在眨眼。
- Superr — 午后柔和的阳光下,一本温暖的笔记本映入眼帘。米白色纸页,一支没盖笔帽的橙色马克笔,还有一叠等着撕下来的塑封姓名贴纸。
- Mews — 黎明时分,酒店服务控制中心笼罩在一片粉红色之中。阳光洒满白墙工作区,醒目的黑色字体、温暖的米色卡片和一枚亮粉色的操作按钮,共同构成了每个屏幕——展现的是一种轻松自信,而非刻板的商务风格。